UI系统之什么是视觉层次

什么叫层次性?下面来结合一个改版案例进行讲解

改版之前的页面在设计跟排版上都没有大问题,那么没有大问题的页面我们如何通过层次性这个角度把页面做的更加优异呢?

我们可以把左右两个页面进行观察对比下,改版后的页面并不是说在设计精细度上有了多么大的提升,而是层次性做的更加好了。

改版后的页面好在“卡片突显、图标突显、列表弱化”这三个点,把突显的版块突出,把该弱化的版块弱化,有强有弱就是层次性。

 

首先我们可以看到卡片的突显,在这个页面中比如用户希望重点看到资金版块,采用卡片式设计后,资金版块在层级关系上最强最突出

 

其次中间常用的功能图标与底下不常用要进行区别,在图标上突显常用图标,这里使用了不同的颜色与图标样式进行突显

 

最后一些不常用的辅助功能的图标去色,让它弱下去,这样整个页面的层级关系就非常明显了,从上到下,由强到弱。

 

总结:设计是一门服务型的角色,服务于产品服务于用户,你要站在用户的角度思考,用户在使用你这个软件时会重点关注哪些功能,另外产品在整个设计原型阶段的时候,希望突显哪里,在设计上把用户和产品的关注点用设计突显出来,把不常用不关注的辅助功能弱化,这就是为什么要关注层次级的出发点。

做设计,我是认真的!

发表评论

电子邮件地址不会被公开。 必填项已用*标注