一、明确UI视觉风格

UI设计与技术发展的脚步是同步的，技术的进步推动着近几年的UI风格的变化，在不同时期都有着独特的视觉风格。例如整体风格上：拟物化、扁平化、卡片式、无框界面等等都流行过一段时间。图标和插画风格也是多种多样，例如：手绘、2.5D、等距3D、MBE、扁平、C4D等等风格。

在开始工作前预先确定UI风格是有必要的。前面“举栗”了目前已有人尝试并且运用的很好的部分UI风格，当然还有许多没有谈及的。哪个更加合适自己手中的项目，这就需要你经过分析手中项目的用户人群、产品定位、

未来发展等方面来做取舍。做为一名优秀的设计师需要有自己的设计审美，但不能纠结于设计风格，为什么我还要说开始设计前先考虑好UI风格呢？因为设计风格对设计师来说不是主要的，但对于产品来说是必要的。

二、组织色彩系统

我们天生对色彩有着绝对的敏感，并且颜色也充斥着我们的日常生活，在外面看到蓝天心情会很舒畅，在卧室开着暖光让人感到温馨，节日看到红色会感到喜庆。当颜色运用到设计中就更加体现了其价值，比如，在大学我的的某同学就喜欢把手机软件列表页中的图标按照颜色分屏，当他想用微信的时候第一想到的就是先滑动到绿色软件的界面。他这方法的确比按照软件类型分类或用软件夹来整理来的方便，我在去年刚换新手机的时候就下载了一。

堆软件和游戏，一时间也来不及整理，而每次在要打开软件时就是一顿找，最终还是用关键词搜索找到的。如果你想让你的用户对你的软件铭记于心，就给软件赋予一个特别而又合理的颜色吧。

设计大师保罗兰德是我非常喜欢的设计师之一，他经常会跟他的学生说“设计就是关系，是形式和内容的关系”，色彩系统本质上也是在找关系，色彩与产品、色彩与色彩和色彩与其他元素的关系。色彩系统中主要分为三类。第一就是主色，很多时候就是运用的时候，把主色给弱化了造成主色不明确，这时候就会发现颜色运用的很混乱，正常主色会跟品牌色有直接的联系，会给用户一直在同个软件的感受。第二类就是辅助色，辅助色正常会有几个颜色，例如：提醒、成功、警告、错误等颜色，有时还会有主色的补色或对比色做为点缀，与主色同时出现让视觉上不会太过于单调。第三类是文字的颜色，文字颜色至少需要拥有三个层级的灰度，重灰会运用于标题和主要文本部分，中灰运用于内文和普通文本，浅灰会运用于标注部分。这是最基本的色彩系统，具体情况需要具体分析，颜色本就是这个世界很奇特的存在，想要掌握好如何运用颜色，那就多观察、多运用、多尝试。

三、设计组件中DNA的等位基因

设计存在DNA这个说法是我毕业后第一家公司老板跟我提及的，在后来工作中发现这个描述简直神乎其技。我们都有自己的家族，家族延续几百年甚至千年，为什么会有家族一说，就是因为每个人或多或少都会存在DNA的联系。UI设计中也有组件一说，每个组件就相当于一户人家，组件的不同状态就是这户人家的成员。把组件组合在一起成为一个功能页的时候，那这功能页就相当于一个小家族。

这个跟品牌系统也是相同道理，这个DNA就相当于品牌logo，在同一个UI系统中，每个组件样式都会存在关系。可以是一个装饰角装饰线，也可以是卡片样式，也可以是颜色肌理。如何提取项目的DNA呢？可以做一场关于项目的头脑风暴，再将风暴过后的想法进行分类整理分析出具有创意又有意思的想法，并初步尝试其可能性。这尝试需要验证这DNA具有：“合理性和延展性”，能适用于不同场合的组件当中（DNA本身就是比单细胞还要小的存在，因此这个不需要太复杂的样式，可能是一个8px的圆角，可能是个渐变色，并且可以存在多个DNA。）。这个DNA方案确定之后，在设计组件和icon时就需要将之合理运用其中。并且将做好的组件进行分类整理，这跟整理族谱很类似，方便接下去的作图规范。

四、网格标尺体系

平面设计版式中会有隐藏着的网格，网格体系为的是让整个UI页面保持统一视觉效果。可以把UI每个功能页比喻做书籍的单页，书籍网格会贯穿一本书籍让其成为一个整体。统一的网格体系让页面在跳转的时后不会感到奇异，就像你在翻阅书籍的时候视线会不由自主的移动到新页的开头，如果发现结果与自己预想的不一样那结果只有两点，一个是感到新奇并且感到愉悦，另一个就是会非常愤怒。因此在UI里需要寻找到合理的网格规律并且将其统一。

网格系统需要考虑包括版心、模块间距及模块大小。不过由于电子屏的尺寸不像传统媒介，在不同设备当中显示分辨率及比例会有所区别，因此也需要考虑到如何适配不同设备，采取最合理的动态网格系统。

网页中常见网格，比如：静态布局（宽为960px、1140px、1200px等设计网格，我发现现在的网站以什么宽度的都有，完全看设计师的个人喜好，应该是设计师认为是静态布局，因此才不需要去考虑哪个宽度合适吧！）、Ethan Marcotte提出的自适应布局（需要设计多个静态布局，以满足不同尺寸的设备浏览网页。）、响应式布局（根据浏览器的宽度，来决定网页布局样式。）。手机端的网格目前主要分为iOS系统和安卓两大类，iOS系统的设计尺寸为375*667px，安卓为360*640px，那么它们的网格也是有所区别的。

五、字体规范

在字体选择中经常会默认使用系统字体，常规字体中：“iOS系统是苹方黑体、安卓系统是思源字体、web端是微软雅黑”。不过在特殊的项目也许会使用特殊的字体，那这时候使用字体就需要慎重选择，尽量选择适合屏幕阅读的特殊字体。在千篇一律的系统字体软件中，忽然有特殊字体的软件，相信会给用户带来焕然一新的视觉感受。

定义字体字号、字重、间距行距以及文字颜色的的规范，不同的文本信息需要统一字体样式。规范字体前首先需要整理项目中涉及到的文字并分类，然后分析不同文字的层级关系来确定文字的大小、字重、间距行距和颜色。（对于该如何将文字层级明显区分开可以寻找相应书籍学习）

注：首先先感谢文中UI设计图的作者，你们的设计真的的很棒。由于是平时收藏，图片出处比较难找，并且这篇文章我只是用来与读者学习和探讨，如有冒犯请联系我，我会及时修改。对于文中内容如果您有不同的见解，欢迎您的留言与建议！