第三步：排版小技巧

【A】文字排版规范

1、对文字信息进行层级区分（可以参考一些好的APP）

通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。2、预估好信息呈现的最大值（即字符数量的最大值，设定一个字符上限，以免信息超出可控范围）3、善于利用提示符进行设计：数字、符号、字母等（也属于层级范畴，提升视觉传递效果，同时增强用户体验）

【B】图片的使用技巧

1、图片比例：常用的图片比例，如 1:1、4:3、16:9、16:10等等；

1:1 强调主体的存在感 例：电商4:3 图像紧凑、更易构图 例：站酷、UI中国的作品封面、Dribbble作品展示16:9 电影场景般的效果 例：影视娱乐类APP16:10 拥抱黄金比例 例：视频等APPX:≤Y 瀑布流设计 H花瓣网的最大值为848px2、图片比例一致性3、提高图片质量4、图片的真实还原——场景应用

【C】设计策略

1、亲密原则：先对内容进行信息分层，属于一个层级分为一组，有关联的内容会离的更近，有间距规律可清洗区分信息。

2、对比原则：通过颜色对比、粗细对比、形状对比、疏密对比、大小对比使我们聚焦在我们需要关注的信息上，在进行对比排班的时候，需要多维度考虑。3、平衡原则：平衡原则是界面排班布局的首要原则，大到整个官网，小到一张图文，都需要我们对页面视觉平衡有一很好节奏控制。4、相似原则：对相似的内容赋予相同的属性，例如同一级别的标题文字大小相同，相同颜色的字体都可以点击等，相似原则的因素也不只有文字颜色，还有背景色、方向、大小等等。5、简单原则：对页面所有元素避免有小数点，页面间距规则简单通用（最好不超过两种间距，大模块内容间隔是区块内容域内间隔的两倍即可），视觉样式轻量化，无线化分割，同时注意页面右边边缘对齐。6、封闭原则：用于区分两个独立的模块部分时候一般采用封闭原则即使用卡片，线框或者间隔的颜色来封闭内容。

当然，如果你在行业内没有这方面的工作经验，这种排班技巧还需要大家搜索国内知名WEB及APP练习一下，局部练习也是可以的，只要练习了就是经验……

第四步：掌握文字规范

【A】字体规范

中文通用微软雅黑/英文Arial（如果所在公司没有购买字库的情况下尽量使用免费字体）

【B】文字颜色

通用颜色：标题文字#333333、内容文字#666666、副文本文字#999999、描边#dddddd、分割线#e5e5e5、背景色#eeeeee(此配色为最安全使用色，设计时，可根据实际配色情况选定)

【C】字号规范

H1——32px：页面个别主标题、副标题

H2——24px：板块主标题H3——18px：一级导航、产品标题、新闻标题H4——16px：二级导航、产品小标题、新闻小标题H5——14px：正文H6——12px：注释（当然，以上字号是通用的，还需要根据实际情况而定，毕竟每一个产品都是独一无二的！）

【D】字体排版

完美阅读用户体验的10大排版技巧： 对于绝大多数网站而言，最佳行间距应该是字体高度的125% 对于绝大多数移动端设备而言，最佳行间距是字体高度的150% 宽松的行间距（比如直接空一行作为行间距）能让内容更易于被识别和扫描 控制行间距的松紧，用双眼来浏览段落进行测试，基于感觉来进行调整

第五步：色彩的使用技巧

1、配色这个就要小初们自己脑补了！熟练掌握色相、明度等。

4、http://www.xiaopiu.com/  免费在线APP工具

5、在线原型墨刀 https://modao.cc/

6、http://www.uisdc.com/create-ui-design-guideline  UI设计规范

7、https://xituqu.com/786.html   UI组件

优设/站酷/UI中国