首页 » 新人必读 » 高质量产品原型技巧

高质量产品原型技巧

2019-04-14 dabaiPM 新人必读

用 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》《写给大家看都设计书》这本书)。

京东似乎近期购书有活动,直接点击下方banner查看。

另外,如果买书给大家推荐两个平台:多爪鱼、漫游鲸;可以买新书和二手书,如果看完了不想要了还可以在这两个平台卖了赚钱。当然网上下载电子书也可以的。

如果感兴趣可以使用一下我的邀请链接,这样彼此都能获得一点平台福利;

人靠衣装,佛靠金装

想画出好看都原型图,你还需要一套风格统一都组件库。由于 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”做好了原型图,记得分享给我互相学习一下哈!

更多元件库可以关注我的公众号,索取更多!

说点什么
头像
沙发还空着,发表你的看法吧ヾ(≧▽≦*)o
Loading...
上一篇 下一篇
已跳转到上次阅读的位置,从头阅读?