UI设计理念

项目的UI设计理念

UI制作，是基于产品原型而做的设计。在交互的原型确定后，视觉方面也就紧锣密鼓地行动。

对于UI设计，我一开始不是直接就开始做效果图，而是在规划一些设计规则。尝试着把整体的UI拆散成一个个元件，去分析规划、统一。

例如：

1，我们的产品颜色定义。主色调以及辅助色，包括“删除”，“保存”，“登录”，“注册”等这些常用按钮的颜色定义（前面我们定的会比较少，后面根据页面的需求，会增加一些颜色，但是我们尽量控制颜色的数量）。

2，我画的icon，线条粗是2px还是3px，或是更多，或者其它用“面”的形式画icon？

3，我的一、二级页面Tab是什么形式？确定它的规则之后，就必须延续这样一个规则，方便用户对于产品结构划分的理解。

4，字体大小，我们定几个规格？一级字体，二级字体，三级字体，都是具体多少pt。

5，根据交互原型，我们的列表页单元格有多少类型？定一个统一的规格。图标大小统一，图片大小统一，主标题字体大小、颜色统一，副标题字体大小、颜色统一。对于数字，我喜欢取偶数，因为这个涉及到转化IOS尺寸的一些细节问题（@2x，@3x），奇数会出现一些麻烦。

6，边距设置。设置几个边距，有助于我们区分层级。一级标题、二级标题、三级标题，通过字体大小、颜色、加粗、边距，我们能很清晰的分出页面层级，这样也能帮助用户更好的理解我们的软件模块层级关系是什么样子的。

（PC划分层次的一些运用）

7，icon尺寸大小规划。注：当选择中等清晰度（720p）时，一定要是偶数，他的1.5倍（1080p）才能是整数。我们如果前期规划好，未来对于提供不同分辨率的icon切图，将会特别省力。

按照这种规则设置icon大小，之后都在一个psd文件里绘制。后面做其它尺寸的icon，只需要统一压缩或放大，通过调边线处理icon，效率将非常高。

二、为什么我们的设计要去定这些东西？

主要有这几点：

1，防止我们颜色过于杂乱，影响导向认知。

2，统一的规则，有助于用户预判没有见过的页面，更加清楚页面的结构，某一个细节的导向特点。例如蓝色的字体可以点击，“”icon+文字”代表也可以点击。

3，设计过程中，如果过于用感性去设计，那么我们有时候一些标题字体大小、以及颜色、图片倒角，很有可能都设置的不一样，这会影响风格的统一，以及程序员编辑页面工作会加重。

4，规划这些，有助于我们把页面的层次划分的更清晰。

5，方便统计工作量，未来工作量也会减少很多。还能避免一些不必要的返工。

UI设计的细节规则很多，这里我就这样简单说明一下我所注重的一些点。总体来说，设计一定要有规划性，去处理未来可能会更省力的事情、避免做一些低效率的修改工作。以及在设计中，心理一定要有这么一个“辅助线”，帮助我们完成有思路的设计。美观有一定是感性，但是如果我们把它整理成一个规律，把抽象变成具象、数据化的东西，那就能创造“美的理论”了。规律产生美！

-------------------------------------------------------------------------------------------------------------------------------

另外：

在设计过程中，避免我们感性设计，可能尺寸方面只是凭感觉估出来，会有不准，我个人极力推荐打开“标尺”和“参考线”去做精准的设计。

--------------------------------------------------------------------------------------------------------------------

三、关于未来UI发展的方向思考（2016年5月）

未来UI的设计风格并非由UI决定，需要结合UE的设计思维，以及对人的一个研究，我觉得可能有一个方向，就是人的短期记忆或者在简单操作中，你怎么能让用户记住它，包括它在哪个位置。人的记忆并不是很好，我举一个简单例子：当一个人介绍自己，这个人如果叫一个没特色的名字和一个叫“王八”的人，它们在大家面前的记忆力是不一样的，大家会一下记得他说出自己名字是很多人都笑了。这种加上用户短期记忆可能是UE、UI的一个突破口。怎么让用户在不知不觉中增强对页面的记忆力，更快的学会使用APP。

UI需要UE的理念，如果缺少，它只是一层皮肤而已。扁平化风潮，在色彩感应度上，以及人第一眼印象，辨别性明显高于3d这种类型。我们很清楚，当我们从远处看一个人，最快辨别的是这个人的衣服裤子颜色，之后体型，再之后才是细节的脸以及其他部位的细节。扁平化是一个研究过程的结果，颜色的辨别度和大致形状，对于用户能起到很快的辨别和判断作用，并非像流行色那样仅仅只是一时的潮流，抓住主线才有可能判断方向。