用 axure 画原型图是任何一个级别的产品经理必需掌握的基本技能!
你是否也有这种体会,看别人分享的原型图,无论是排版布局还是配色设计都感觉比自己做都更清晰美观。可是又不知道自己都问题出做哪?每次画图也是拉各种辅助线却依然画不好原型图![摔.gif]
本文我就以产品设计师或前端工程师都角度来分析,为什么你的原型图颜值不高?怎样提高原型图制作水平?
原型图设计原则:
一、颜色尽量简单、统一
不要用太多的颜色,一般页面主体部分主要是黑、白、灰三色。另外可以辅助一些提示颜色、警告色等等。但是基本的原则是保证色调尽量简单且统一(色彩简单是避免影响下游设计师同学的发挥,也让你的原型图保持干净、清爽。毕竟产品经理不是专业设计出身,配色能力大家也都懂的哈)。
二、文字规格统一
文字字体大小尽量只使用12、14、16、18像素字体,尽量避免奇数字号(没有什么原因,习惯而已)不要使用12像素以下的字体,浏览器能识别的最小字号就是12像素(一般作为辅助类文字尺寸)。
三、间距统一
包括:不同级别标题与内容间都间距、段落前后间距,段落文字的行间距、页边留白间距;按钮组的按钮之间间距,输入框文字和边框间距、CheckBox、radio 与文字间距、其他 icon 与提示文字间距等等。
四、尽量采用大留白,突显页面块
现在的设计原则基本都是扁平化设计,块与块的分割不再像传统的用线条来区分,而是通过块的背景色与主体背景色的不同来区分;很多时候个别产品经理的审美层次有限,可能下意识的就把页面元素拼凑的非常紧凑,导致最终制作出来的原型图看着乱七八糟,感觉层次不明显或者内容主次不清晰。。。
如果能掌握好上面提到的这几点,并且在制作原型图的时候能做到灵活运用,那你最终产出的成品原型图应该不会差到哪去。至于中间那些没有量化的地方比如行间距多少合适?页边留白多少合适?这你可以请教一下设计师同学或者前端开发同学。
这个是根据字体大小不同也而变化的,一般是保证相对尺寸统一,比如字号14号、行高是字号的1.5或1.6倍也就是21像素或22像素。当然如果是标题那行高一般是字号的2-3倍。
套路都说完了,那也得给你点锦上添花的东西来帮助你把锦织的更漂亮(如何提高审美请务必好好看看《do not make me think》《写给大家看都设计书》这本书)。
人靠衣装,佛靠金装
想画出好看都原型图,你还需要一套风格统一都组件库。由于 axure 软件本身只提供了基本元件/表单元件等基本页面元素,你如果想制作一套自有风格的原型图就需要自己去做一套元件库,或者从网上下载一套元件库。
今天就给大家推荐几套小编私藏的标准元件库:
1、饿了么 Axure 组件库
下载地址:http://element.eleme.io/#/zh-CN/resource
2、蚂蚁金服 Axure 组件库
下载地址:https://ant.design/docs/resource/download-cn
3、Axure 官方网站提供都其它组件库
下载地址:https://www.axure.com.cn/category/rplib/
各位“小CEO”做好了原型图,记得分享给我互相学习一下哈!