大家都知道提高视觉层级,无非就几个点,尺寸、对比、颜色、样式、分组、对称、相似等这些点,基本总结起来就是制造差异,通过差异点来突出我们想表达的信息,视觉层级它能引导我们去发现设计中重要的地方,忽略不重要的点。今天就结合一些案例来聊聊提升视觉层级在设计中是如何去运用对比来达到提升设计层级的。
打 开 VS 关 闭
页面中通过打开或关闭处理方法,对页面中需要透出给用户的信息,可以铺开呈现出来,对于不那么重要信息可以收起来,通过展开和收起的对比,通过二级页面跳转或引导到其他操作,通过这种方式来强调页面关系和节奏。
满 VS 空
一半内容满一半内容少,形式对比,形成层级落差。
▲(上图)左侧图片比较饱满,右侧文字采用正负形结合视觉稍显空来突出页面调性。
▲(上图)左侧空右侧饱满,对比强烈,让用户更懂关注在文字信息。
▲ 同样这个app在上面留白较多,内容集中底部,页面一分为二,上半部分空,下面满,形成对比。
▲ 酒杯比较满,文字底部空,形成视觉冲击整个画面更加聚焦中心。
对 称 VS 不 对 称
在页面中,通过对元素不对称,会让视觉焦点差异点突出来。
▲ 偶尔在设计中运用这种不对称设计手法反而能起到更好的效果
▲ 这个页面主要功能集中在左侧第一个按钮,和传统的重要功能集中在中心不同,能形成产品差异点,同时营造视觉差异性。
▲ 非对称在页面中的运用
大 VS 小
通过元素大和小对比,这种直接感官方式能让我们更聚焦在大的图形上面。
面 VS 线
通过线和面之间对比,常用在按钮和标签,或者区块之间,面的按钮重于线的按钮,这个是设计中经常运用到的设计技法。