产品页面设计--提升ui设计的高级感

一、使用颜色深浅构建层次结构

在使用文本进行样式控制时，除了仅仅依靠字体大小差异来营造层次结构以外。还可以结合字重（字体颜色深浅）来营造更好的对比效果。

比如：在白色背景下，主要内容使用深灰色，次要内容使用灰色，辅助性内容使用浅灰色。

           在有色背景下，可以通过降低白色文本的不透明度，或让文本逐渐接近背景本色，来达到淡化视觉效果的目的。

二、统一色调

选择一种基础色，在调整色调和颜色深浅来增加均衡。避免使用过多的颜色。可使用固定的色板，通过调整基础色的饱和度和透明度来为设计增加一致性。

三、干净的阴影

阴影可以增加元素的深度，吸引用户的注意力，增强画面的视觉层次感。

使用垂直偏移阴影效果更明显，更自然。如果阴影范围太小或颜色太深，位置也没有偏移而是聚集在元素四周，会让画面更扁平，让视觉变得厚重。

四、无框设计

模块的边框、列表的分割线如果使用过多，会让整个布局设计感降低。因此可以减少不必要的装饰元素。

有以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：

1）使用阴影代替边框营造边界感。

2）使用不同的背景色代替分割线，分割两个元素。

3）仅仅使用留白--代替分割线实现元素分组

五、第三方图标风格统一

可以以自家的App图标风格为依据，对第三方图标进行优化设计。

六、图文设计

当有文字叠加在图片背景之上的情况时，为了减少复杂背景对文字的干扰，通常的做法是使用叠加半透明度的黑色蒙版。但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，使文字、色块和图片融到一起。