写给交互设计师和产品经理的线框原型图美化经验

本文写给那些没有经历过科班设计教育的产品经理和交互设计师，主要是通过介绍一些技巧和方法，提高他们的原型图的质量，方便产出更美观而且容易被人理解的线框图。

本文将分为两大部分，其一是关于一些前期的准备工作和学习内容，其次是关于美化线框图的技巧（记住！这不是线框图的要点指南!!!!!)。两者都对于学习美化线框图的过程很有必要，希望我写的这些能给你们一些裨益吧。本文基于axure7以及sketch3.3进行介绍，也会适当拓展一些内容和技巧。

# 学习要点

——从style guide中学习

建议好好细读google material design指南的相关内容（https://www.google.com/design/resources/#material-design-guidelines）建议重点仔细阅读guidelines中关于style还layout的章节。并且通过这些章节的阅读，在axure/sketch开始建立gird和layout。之所以选择这套guidelines，是因为这套规范是一套真正跨平台的解决方案。而且这套规范足够细致，从布局到控件都有很详细的说明。对于初学者而言，一开始先从这类规范学起，老老实实遵循规范并且思考这些通过这些规范制作的软件和app如何体现这套规范，大概就能慢慢领悟一些在gui设计方面的知识和理念。很多设计师他们并不必要过于死板的遵循规范也能设计出美观的产品，那是因为他们也经受足够和训练和练习。简而言之，新手老老实实打玩教学关卡吧。

——建立模板

根据具体的工作需要，为了提高原型制作速度而制作一整套模板很有必要。

这套模板通常包括以下内容：

*layout解决方案（网格大小，layout大小等等）

*色卡（最好和设计师商定一套色卡，一套不会干扰他们实际工作的设卡）

*一些基本的部件，比如列表，比如switch开关（移动端网页端都有）

*字体（一套中英文都较好且有多字重量的字体，可能新的苹（果）方（黑）和思源黑系列都是选择，windows上方正的黑体都还不错）

*常用icon套装（可以依赖iconfinder等网站或者iconfont的解决方式

（axure8出来以后自己画简单的icon也不难（真的，简单的icon画出来不难，画好就绝不容易））。

——找标注软件 老老实实标注几套ui

PS 首先你要html+css的基础，特别是布局方面。

很多人都会说，要注重留白，注意细节，注意排版布局色彩对比等等一堆东西。但是一个没有基础的人，要怎么样去注意到这种细节呢？如果没有一定的基础，连发现和鉴赏美都是遥不可及的事情。盲目看一堆网页布局经验和ui设计指南等等，堆砌很多知识并不能让人迅速的掌握知识。因此我认为，老老实实找几套ui稿，（sketch用sketch measure的插件，windows上找现成的psd（可能需要设计师帮忙输出）和markman等等软件）老实实每个平台（web/app/ios）都仔细的标注几套（注意单位！）经典的页面模板，感觉就会有了....

这个过程虽然痛苦和漫长，但是能切实的提高你的视觉能力（比如对留白和布局的感知，对ui细节的感知）。

在标注布局，字体，色彩样式，控件大小的过程中，要善于总结和发现规律。同时适当回顾google的设计指南，就会发现设计师如何利用那些最基本的原则控制自己的设计，精心排版布局。或许你没办法和设计师设计出美丽的页面，但是遵循规范能设计出至少中规中矩不太糟糕的页面。

——关注好的设计

产品经理和交互设计师未必要亲自完全把握设计一套完整的界面，这不意味着他们没有必要提高审美水准。偶尔逛dribble behance，medium等网站，看看那些优秀的设计师的作品还有他们的文章。特别对于某些注重业务的产品经理而言，关注好的设计能让自己在选择设计方案的时候也照顾到视觉体验，同时有助于更好的和设计师合作（至少内心对于高大上的标准有所提升）。当然，学习和分析他人的作品和看到一个好作品就不顾一切的全盘照搬不是一回事。

#具体技巧

使用好看的字体，这能明显提升设计的格调....

字体大小要控制好，如果控制不好回头去标注多几套ui就能学会了...别无捷径

注意字体的行距和字距（特别是英文）

根据围观google guidelines以及标注不同平台ui稿的经验，你就会发现设计师的留白规律，对着做就好了。

有规律的留白来提升你的设计的层次（所以要素之间的距离是刻意设计的结果）

密密麻麻不是美德，不要为了提高空间利用效率而想办法展示全部东西，否则用户一眼都不想看你。

栅格和辅助线是你的好朋友，有空多拉辅助线方便自己对齐。

当然你也不必过于死板的遵循layout，大致上比例匀称就已经足够。

栅格和辅助线存在的意义是帮你理解你所使用的大致空间大小和内容分布。

如果设计移动端产品，那么要记得常用控件尺寸。

颜色使用要有规律，不仅仅是根据guide为不同层次的内容使用同一种颜色。

类似的控件也要使用相同的颜色（比如按钮）

多练习常用控件所在区位和布局（这个靠多看和多模仿，能减少很多低级问题——我要一个很大很大的按钮！）

尽量避免纯黑纯白，特别是纯黑，这种颜色很难驾驭。可以尝试使用很浅的灰色。

使用色彩浅淡而柔和的线条划分内容区域，尽量不要使用粗黑线。

使用大的浅灰色色块表明层次和内容划分，这比使用一个一个框框要舒服得多。

偶尔可以做点很浅淡的阴影突出层次感。（axure是有内外阴影的，但是无法多层阴影叠加）