如何画优美精准的交互原型
学习
（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：https://sketch.im/（有Sketch源文件）
阿里巴巴矢量图标库：https://www.iconfont.cn/
ICONPNG：https://www.iconpng.com/
图标下载：https://www.iconpng.com/
更多设计网站可看我的博客：zhangqiang.cc
5、请保证文案的真实准确，100%还原真实的界面，保证给人看到的是最新最精确的原型。
6、一定要对齐！具体请看《写给大家的设计书》
7、建议使用Sketch设计原型。
交互原型最重要的事情是“逻辑的清晰表达”，而我写这个文章是想让这种表达更加清晰准确，以及让别人看到设计师对这件事的认真！
