(10秒看完这个文章)

画原型的要点:

1、尊重iOS设计规范

2、建立统一的设计标准

3、灰色块色值不超3种

4、图标要精妙灵巧,不要傻大蠢笨

5、保证文案的真实准确

6、一定要对齐!

7、使用Sketch设计原型

 

 

以下是正文:

最近我的一个好朋友跟我说,他画的原型不好看,让我帮他看看。

在指导了他之后,我想干脆写一个文章吧。

一是自己可以进行一下总结;二是下次谁再问我同样的问题,我就直接把文章发给他,省时省力效率最高。

经朋友允许后,使用他发我的交互原型为案例,原图如下:

(点击图片可看大图)

按从上到下的顺序进行分析:

1、状态栏的高度是40px(在750*1334的情况下),状态栏中的样式在这里应和手机中是一样的,绝对不要像现在这样没有等比例的缩小,会给人很粗糙、很不认真的感觉。

 

2、“返回”和“搜索”按钮,若使用文字,则千万不要随意加这种边框。应使用设计规范中的标准字号大小,且这个位置所有的文字都统一大小、粗细、色值。

文字“距离左右的边距”和“距离上下的边距”,全部要统一,精确到像素。所有的界面皆是如此。

对于常用的功能建议使用图标,辨识度高,还更好看。画面中若都是文字,用户会感觉画面很满,很复杂,较难理解,这时就需要“图形”与“文字”相搭配。

 

3、“护肤”、“彩妆”这里请注意一下字体,建议画原型时使用“PingFang-SC”字体,这个字体一定不会出错,系统自带的都有,开发过程中工程师同学也不需要添加字体。
一般的内容性文字使用“Light”,比如:简介、评论、引导说明、注释、时间…

重要的醒目性文字使用“Regular”,比如:标题、导航栏文字…

 

4、像“小三角”这样的图标一定要设计的“灵巧”。

或者说设计本身就是一件很“讲究”的事,就是需要设计师的“细心”,粗枝大叶、大大咧咧的是做不好设计的。

设计师的眼睛要极其的“敏感”,甚至是脆弱的,要能够察觉到画面各元素的比例是否和谐,颜色给人心理的感受是否恰当。

看到美的事物会觉得“养眼”,看到丑的事物更会觉得“伤眼”。

小三角一般的大小是宽“20px”,高“10px”(在750*1334的情况下)。

 

5、注意筛选器与导航栏之间不会有空白,在任何时候都请注意iOS的设计规范,不要轻易违背这个规范。

筛选器的高度一般为80px(在750*1334的情况下),当你选择使用80px这个高度时,那么注意在其他界面使用筛选器时一定要保持高度80px的“统一”。

筛选器中的不同标签不建议使用“|”这样的竖线进行区分,距离本身就已经可以产生区分了,加上这样的“|”真心不好看。

 

6、宝贝图片这里,首先不推荐使用颜色这么重的灰色色值。推荐使用较浅的色值,会给人以轻巧、优雅的感觉。比如:#D8D8D8、#E5E5E5、#EFEFEF。

图形真的不需要“边线”,并且边线的色值还跟图形不一样,看着真心Low。

图形与图形之间的距离不需要那么大,距离小一些会更好看。之所以保留一点距离,是因为实际工作中图片的质量是无法保证,有可能紧挨着的上下两张图都是黑色背景的的,就会给人两张图“傻傻分不清楚”的感觉,所以就保留一点边距。

目前这种商品列表的交互,已经在移动互联网团队中被大家所熟悉了,一看就知道这里就是图片,所以就不需要“宝贝图片”这几个字了,真心多余,建议去掉。

 

7、商品标题可以适当大一些,色值加深一些,比如“#333333”,建议使用“Regular”,字体“PingFang-SC”

 

8、价格这里由于“¥”、“.00”这个信息并不重要,所以建议缩小。

由于一般价格是重要信息,建议使用“点睛色”会更加醒目一些。

也可以加粗,只是加粗后会显得Low,很粗糙~

 

9、右侧的“+”,不要为了偷懒使用输入法打出来的“+”,真心很粗糙。请使用“线”画出来“+”,适当调节粗细。

由于这里“+”很重要,所以最后还是比其他各元素都更粗一些,且使用“点睛色”,以更加醒目的样式进行展示。

一定要注意对齐,“+”应该上下左右居中于圆。

 

10、不要为了偷懒,而使用重复信息,黏贴复制一下标题文案就完事了。

即使只是演示用的交互原型,都请尽量的贴近于真实情景,使用真实不重复的文案,方便团队其他同学的理解。不要光嘴上说“大致是这样”,然后让别人想象你的交互是什么样的。一定要把交互做到精确!

 

11、底部左侧的购物车,不应该要边线,还这么粗…  建议去掉。

购物车图标统一风格,建议使用2px的图标。

“7”注意对齐。

不要再出现“购物车”三个字越界的情况了~

 

12、请使用750*1334这个尺寸进行设计(或等比例缩小),保证在手机中显示完成。

 

针对以上问题,我进行了优化设计:

(点击图片可看大图)

 

 

最后,总结一下规则:

1、尊重iOS设计规范,真实还原各元素的像素大小。

2、建立统一的设计标准,统一字体的大小、粗细、色值,图标的风格,标准色,间距…

3、字体建议使用1种,颜色最多一种(点睛色),灰色块色值不超3种(灰色属于无彩色)。

4、图标要精妙灵巧,不要傻大蠢笨。

 

推荐图标网站:

Sketch.im:http://sketch.im/(有Sketch源文件)

阿里巴巴矢量图标库:http://www.iconfont.cn/

ICONPNG:http://www.iconpng.com/

图标下载:http://www.iconpng.com/

更多设计网站可看我的博客:zhangqiang.cc 或点击左下角的“阅读原文

 

5、请保证文案的真实准确,100%还原真实的界面,保证给人看到的是最新最精确的原型。

 

6、一定要对齐!具体请看《写给大家的设计书》

 

7、建议使用Sketch、XD设计原型

交互原型最重要的事情是“逻辑的清晰表达”,而我写这个文章是想让这种表达更加清晰准确,以及让别人看到设计师对这件事的认真!