UI成长季—微信小程序UI练习总结（公司篇）17年12月

微信小程序UI练习总结

今天是我在公司上班的第四天，在经过三天的观察、临摹、学习后，薇姐终于给我派任务了（当时那个激动啊  (￣▽￣)~* ），虽然流程写的很简单（目测只有三页，仅限于目测罒ω罒），但对于我一个新手来说实在不易。在学校自学的UI，没有老师教，纯靠自己，早就经历过盲目崩

溃，所以我并不惧怕折中任务，反而很开心（动词打次动词打次 (￣▽￣)~* ）。

一、流程图（薇姐一写字让我着实惊讶，难道这世上只有我不会写连笔字吗  (T ^ T)  ）

          （我方了 ε(┬┬﹏┬┬)3  ，最近练得都是APP，怎么是个微信小程序）

二、模型图

一般的项目都会有个前期制图，然后才会到设计师手里，鉴于这是个练习，逻辑方面还是得自己来（画什么模型图，直接上手  o(´^｀)o   ）。

三、制图

我们公司一般用iOS的750×1334进行设计，这里有个尺寸图。

1.状态栏（40px）

2.导航栏（88px）：内容图标是44×44px。重点：图标用矢量工具去画，我用AI软件，画图标的时候要时刻切换为像素图（Ctrl+Alt+Y）去查看自己画的图标是不是标准（就是画的横平竖直的时候是没有锯齿的，除非你画错了，拐弯的地方有锯齿很正常。我觉得这个模式还有一个好处，就是可以数着像素格来修改自己的图标，可以使自己画的图标更标准。还有一种画图标的方法，就是用带“黄金比例圈”的绘图本，在本子上画好，然后拍下来放到AI上描出来，我忘记带那个本子了，就直接画的）。画好图标后将图标全选，点击“对象-扩展”使图标成为一个整体，将图标从AI软件里直接拖到PS里，一定要记得在图标的下方画一个44×44px的矩形，只将矩形设成透明，将图标和矩形对齐后打组或转为智能对象（因为导航栏的图标是44×44px，但是图标的不规则性又不一定全部撑满，就在下方画一个透明的矩形，这样切图的时候即使图标再不规则，也会切出一个44×44px的图表来）。将图标放到导航栏上，两边的安全距离我设置的是24px（不是死规定），再打上文字，然后将内容与导航栏执行对齐。

错误纠正：

1、Home页中的订单详情我加了一条下划线，不要随变乱加，还有就是开始扫码和订单详情的比重关系我没有设计好（薇姐提出来的时候，我感觉她好专业  T^T  ）。

2、订单详情页中的待收货下方有一条直线要用直线工具去画，一定要考虑到三个字和两个字的直线长短是不一样的，要在打标注的时候标出来告诉工程师（这点是最令我意外的，因为我根本就没有想到，欲哭无泪啊

 o(╥﹏╥)o     o(╥﹏╥)o    o(╥﹏╥)o    o(╥﹏╥)o   o(╥﹏╥)o    o(╥﹏╥)o   o(╥﹏╥)o ）。

3、最尴尬的就要属订单的排版了，收货信息和订单应该属于一个整体，我硬生生的给收货信息一栏里的框上下加了两条不合适的直线，不仅分开了界面，还显得突兀。

4、订单列表页面中的物流信息，应该是一个轴线型的样子，我为了省事，就给用几行字给省略了（好想打自己一个耳光），字为了不出现头部参差不齐的情况，要用T工具画一个段落框，再打字，行间距应该是字体的两倍左右。

四、打标注

1、因为有一些代码基础，所以在打标注的时候我大多是知道怎么打的。值得注意的是给字体、颜色打标注时尽量和测距标注的颜色分开，否则工程师会看的很头疼。

2、导航栏是88px，我只把图标的44×44px给标注了，要把图标与边框的间距给标上，不要让工程师自己去算。

 

五、切图

  这个练习，我并没有切图，我安装了cutterman，但还没有用过，我会切图，但是不规范，自己还在学习。不过我知道另一种切图方法，可以不用插件。CC2015版本以上的软件可以右击自己的图层或编组，选择导出为，在弹出来的框里可以进行多倍导出，方便切图。有些设计师觉得这样会更好用，单凭个人感觉，选择适合自己的就好。

 

 

        用此文来记录我的成长，够努力才会更幸运！

        本人是大四学生，在公司实习，希望能够在这里遇到我的伯乐，最好北上广深，成都、汉州、重庆、湖南都可以，世界那么大，我想去看看。