［教程］盒饭君带你画UI（一）

界面原创：By Anton Aheichanka for InVision

最近偶然的机会看到这套界面，个人有着临摹练习的习惯临摹了一套，很多看到了想学习UI设计的伙伴们问怎么做的，有的尝试着画一下，遇到了当中的某个“难点”后又放弃。决定做这个小教程，给大家分享下设计思路和技法。如果大家喜欢的话就小小关注一下吧，轻喷～

准备素材

1.一张背景图，和四张人物图像图片

2.线性图标

3.准备字体

4.界面色值

(注：图片可以找一样的，也选择自己的喜欢图片）

推荐几个我平时收集素材的一些网站给大家吧！

① Dribbble（大名鼎鼎的UI设计网站，一个注册码都要好几百）

② Behance（PS\AI完美结合，Adobe公司的亲儿子）

③ 500px（最出色的摄影社区）

④ Goodfon（免费高清大图）

⑤ Uigreat（其实没到上面的级别，帮朋友推荐一下）

常见界面布局

这些布局都是我们常见的几种布局，而这次的练习界面采用的是侧边导航布局。而它的优点：突出核心功能，将其他的功能隐藏掉。适用一些有很多功能，强调目前核心完善的功能，弱化其它功能的产品。如果你细心观察，你会发现很多成熟产品比如QQ、微信，都采用的底部导航。

字体

在UI设计中，避免使用有衬线。iOS中英文用Helvetica，中文使用冬青、思源黑体等一些无线衬字体，尽量用一下和iOS自有字体相似的字体做设计，这样在app实现后能和设计稿效果减小相差出入。

选色

基本选择两个颜色，主色、辅色。而高光、阴影基于主色，高光向左上角去选择合适的色值，阴影向右下角选择暗一些的色值。主色选择是很重要的，每一个主题都有一个适合的颜色，就像旅游类的采用蓝绿色系的色值。同样色值也是有忌讳的，比如在国内金融就不能使用绿色了，因为绿色在股市代表着跌；可想而知，一个用绿色作为主题色的金融app会怎样？

画界面

准备好要用的色值、字体、图片素材后，我们就来开始做界面。界面画布尺寸设定：“750*1334px”，状态栏高度设定：40px，导航栏高度设定：88px，导航栏两侧按钮设为大小设为36*36px。小伙伴在工作会遇到有时候按钮宽为24px、高为36px的时候，或者程序员说点击热区太小的时候，我们可以画一个不小于大小44px的透明矩形盖按钮下方了。如图1所示，左边是没有加透明框的，右边是添加了不小于44px热区的。

为什么要添加透明框？

1.这是个细节问题，对于工作交付标注图，这样作出的标注更规范严谨。

2.提高用户体验，增大用户可以点击按钮热区，试想下一个20px和40px的按钮，谁更容易点击？

图1

如图2所示，圈画的地方，相对于新手暂时是“难点”，圈画的地方有5处，其实归类起来只有2个，一个蒙版，一个图层样式的渐变。2.2、2.1、2.3、2.4是涉及图层蒙版的，2.5是涉及图层样式描边渐变的。

图层蒙版

上图所示都是涉及图层蒙版的，图层蒙版是什么？简单点的意思就是说，你只想要一片区域都消失，只显示你想要的部分区域。蒙版就是盖住其它你不想看到的区域，只显示你想要的区域的一个工具。蒙版怎么做呢，蒙版有好几种蒙版形式，这里采用的是图层蒙版。怎么操作呢？现在我用2.2的蒙版做一个演示。

画一个正圆，拖入一张图片，覆盖在正圆上方，选中图片按住“alt”键，将鼠标剪头放置图片图层和椭圆图层之间就会出现一个标示（如图2.6所示），点击一下完成图层蒙版。

渐变描边

使用椭圆工具画一个320*320像素大小的正圆，关闭3.1中的填充，打开描边，设置描边为6px，选择3.2的渐变描边。设置3.3为“角度”，3.4为“90”，根据自己的需要在3.5中设置色块。就能得到2.5的效果。

图片处理

图4是原图，把图片拖入后转换成智能对象，变成智能对象后，图片文件大小变小能少占一些内存，图片放大缩小不会模糊，也是为了方便在智能对象里对图片单独做一些色相/饱和度的调整。图4我在智能里调整了一下饱和度和明度（如图4.1所示），用了图层样式的颜色叠加（如图4.2所示）；叠加的颜色用得是基于主色相对于比较暗的色，这样和整体更加融合一些。最终的效果就是图4.4的效果，配合图层蒙版就达到最终的结果。

包装

做完界面以后呢，千万别以为完事了。给自己的做的界面做个简单的包装，衬托美好下自己的界面，对于自己也算是留下了一个好的作品吧！等在UI这条道路上走稳了，再回过头来，看看自己以前和现在你就会发现不一样的惊喜，因为你每天都在成长。包装的话，像头图那样简单包装也行，找个手机模版放入你的界面也行。

第一次写教程，可能还有些不够清晰或者不够理解的。可以找盒饭噢～