你学会UI设计了吗？

UI设计师如何前驱？

关于产品

做为一个UI设计师，咱们还在干巴巴的等着产品经理甚至交互提供的需求和原型再开始动手吗？这样被动的工做是永远没法提高本身的，固然你也永远只能拿到几千块的薪水了。

咱们应该参与UI设计前期产品的规划中去：

1.了解下一个版本计划作哪些需求，上一个版本还留下什么需求？

2.在下一个版本中需求的目标和目的分别的什么？

3.怎么样挖掘出用户的原始需求？

4.但愿以后拿到哪些数据，而且对这些数据准备作怎样的分析，得出怎样的结果？ 产生的商业价值又是什么？ 这个需求是否能为咱们的产品带来明显的业务或者用户体验的提高？

关于交互／用研

接着，咱们也千万不要放过交互设计师，当他们拿到产品的需求的时候，这时候咱们必须不要x脸的凑过去，不管是请教也好，打脸也好，多去问问他作需求的思路，他是怎样分析需求，分析商业战略，怎样梳理流程，怎样设计框架，又是怎样分析信息架构和布局的。这时候假如本身是一个交互设计师，然而当产品一古脑儿把需求提给你以后是否是快蒙逼了呢？不要急，万事开头难，咱们必须透过现象看本质，挖掘出用户的原始需求才是关键，举个例子：用户发出了一个想吃东西的信号，这个时候产品就说用户饿了，快送去馒头米饭！！那其实真的是用户饿了吗，仍是说用户在打完游戏期间想抽根烟吃点零食呢？因此咱们须要看清楚用户究竟须要什么？

那么咱们能够怎样去作一个需求的调研，看看用户是否是反馈了这个比较严重的问题，下面咱们分了3个步骤：

1.验证这个使用场景是否存在？

2.再次了解用户是否已经有其余的解决方法？

3.最后肯定咱们的解决方法是否在用户看来比已有的解决方法跟更好？

这3个步骤缺一不可，少一个这个需求就能够不作。

找到了实际需求以后（用户其实想抽烟）咱们得来给这些需求排优先级（买烟，点烟，散味），这里教你们一个用研用的模型－－kano模型，这个模型中分别列了三个属性：必备属性，指望属性，魅力属性；另外还有个个不经常使用的属性：反向属性和无差别属性，这里就不细说了。

必备属性就是这个功能在这个产品里必须得有（买烟，你不给我买烟我怎么抽）。

指望属性就是用户但愿有这个功能，若是没有，用户满意度会降低（点烟，为了服务好用户必须点上）。

魅力属性就是若是作了这个功能，那么用户会很开心很惊喜，若是没有，那也影响不大（散味，这个时候要是能当着用户的面吸光二手烟这简直服务到家了）。

当咱们将不少需求用kano模型统计出来后会发现，咱们的需求分类成这三种，那么咱们作需求的顺序就是必备需求>指望需求>魅力需求。（具体怎样使用能够加我qq或者下方关注公众号）

固然以上的内容不只仅用研同窗会用到，交互的同窗也一样能够去用，由于我以为未来的趋势将会是UX>UI,说的更准确一点就是二者互相融合，甚至融合更多角色。

关于视觉

颜色：

为了保持产品的总体品牌调性，咱们将会使用一种主色调，两种或三种辅色，但通常选择两种辅色，选择同一色系或者邻近的色系，好比主色是蓝色，那么咱们能够选择临近色系的浅蓝和深蓝作为辅色。再加上1-2种点睛色，用来高亮显示，提醒用户的做用，好比红色，橙色，黄色等对比色。

字体：

通过研究及多方证明，在一倍设计图下，最利于阅读的字号以及大部分人所以为最温馨的字号大小是16px。那么，在同一个产品里，咱们将用到除了顶部导航之外的3种字体大小，分别为正文16px，次要性文字14px，提示文字12px。对于10px文字小编建议尽可能少的使用。字体的颜色也一般使用3个颜色便足以用于这个产品，深色，深灰色，以及浅色字体。

线条：

线条所起的做用一个是分割内容，第二个是流引导，一样的内容，用横向线条或者竖向线条，用户的浏览路径将会发生变化，因此分割线在整个app里的所用也是不言而喻的，那么咱们将分割线也能够定义1-2个层级的颜色，在移动端肉眼能识别便可，但注意不能太深，也不能太浅。

图标：

图标能使整个app更生动，可是图标有时候单独存在又是个硬伤，对于一些抽象画的字段图标没办法更好的绘制出来的时候咱们就须要进行图文结合来描述。图标使用的位置不一样，大小也会不一样，甚至风格也会迥异。好比：微信底部标签栏的图标，和顶部导航栏的图标粗细不一样，风格也不一样。可是不是一个app里就有不少风格的图标，只要造成统一就行。通常图标能分为线性和色块两种，线性图标更轻盈，缺点是放大以后线条会变粗，且线性图标没有色块图标来的表意明确。色块图标更直观，且放大缩小不影响，能够用到iconfont里，图标将成为一种字体，比较大程度优化app的内存，缺点是信息较多时比较冗杂。

排版：

排版对于一个页面来讲是最最重要不过了，在交互稿上，交互已经大体区分出了信息的布局，这个时候咱们视觉须要去进行“具像化”（或许前期交互就是你本身作的）。咱们先将信息关联度大的内容整合在一块儿，再根据内容的重要程度，以用户的视觉流进行排布，固然这个只是正常的设计流程，凡事无绝对，要懂得变通。再说一个小窍门，就是尽可能保证信息元素之间的距离相等，除非为了区分两个信息，间距一致会使整个页面更美观，固然咱们考虑作页面的时候不是能展现全部信息就是好设计，咱们强调的是用户体验，那么用户不但愿一眼看去都是信息，这个时候咱们须要作一些留白的设计或者信息的层级显示。

作项目碰到的问题：

1.目前采用的标注方式使用sketch的插件marketch一键导出标注，虽然不是很精确，但已经大大提升了工做效率。问题来了，开发到底看不看标注？颇有意思的问题，其实只要项目紧他们通常不会看标注，等到逻辑写完了，再来改UI的问题。那么为了不在页面写完后不作大的布局调整，作为视觉设计，应该在开发前期就和前端定义好布局的框架，交互，用自定义仍是系统控件，不然等开发写完你和开发说我要的效果不是这样，可是开发说已经改不了了，再改就要很大的精力去重写（固然也多是开发想偷懒），这里必须说一下，其实为了你我他，UI设计必需要学前端代码，不然开发随便忽悠下你你就放弃了本身的立场，这彻底是对本身，对产品不负责。

2.尽量将页面的状态补全，由于可能没有交互，也可能交互的文档原型没有那么细致。好比你作完一个页面发现全部字段都填满了，整个页面挺饱满，这个时候测试的同窗说了，这个字段后台可能不返回，是空，那里也是空，这样的页面东边少一块，西边少一块还好看吗？

3.适配的问题。运营要作活动图片，经过后台返回获取到不是由前段添加，这时候咱们须要定义一个比例，不一样机型等比例缩放便可。

4.同时接到3个以上的需求怎么办，拍优先级？怎么排？

把内容少的，重要的部分先作，再作内容多的，重要的。最重要的仍是老板重视的，必须先作！

5.能这个版本迭代掉的内容千万不要放倒下一个版本，放着放着就没了。

6.sketch的插件craft＋dropbox的新组合用来制做app kit，能拖拽直接使用和编辑