『UI入门』个人中心：顶部信息归纳与图标设计

改版前分析：

改版前页面

1.顶部元素多，排版混乱

2.列表图标过大：（跟文字对比，左右轻重失衡）造型复杂（挖空点太多）

3.视觉层级混乱（从上到下图标特别多，没有做好层级区分，没做到有强有弱）

4.设计规范极度欠缺（右边标签描边粗细跟数字粗细不一样等）

标识

局部分析-顶部头像区与信息区：

1.元素过多导致的排版混乱

2.视觉层级混乱：橙色区域用的太大规模，是否可以把不重要功能放到信息区

图

改版后

改版依据：做好信息归纳分类

1.文字层级（字号，字重，颜色，特殊字体）

2.间距留白（将信息归类） 

3.图形元素（图形板块）

案例

1

2

苹方字体包

特殊数字字体包

适当加图标丰富界面

图标与文字细节注意

比如文字26像素，图标可以做28*28或者30*30像素

总结：

顶部总结

排版多字段多板块排版可以从大到小的漏斗排版规律比如头像，名字主要信息，标签，关键图标

图例

列表流图

功能少的时候适合用列表流：适用于金融类，工具栏，社交类产品。

功能多的时候需要做的比较工整的适用网格化：电商型，平台型的产品。

大型功能多

图标改版前

问题点

图标：要有外环内环的规范，用规律图形（圆形，方形，圆角矩形，三角形等，勿用钢笔工具画）复用复杂图形。渐变的起点可以在图标外围

案例

图标

知识要点：

1.图标布尔运算

黄金分割比、合并形状，减去挖空

2.图标色彩搭配：联系业务属性、结合文案色彩情绪

顶部背景改版分析：

分析

增加层次感思路

规则图形或线条组合简单插画

挑选颜色右上角

插画背景