我们知道在设计中提高视觉层级,无非是通过尺寸、对比、颜色、样式、分组、统一、对称、相似等方面来体现,换句话说就是在设计中制造差异性,突出我们要重点表达的内容,而忽略不重要的东西,本期和大家总结一下关于提高视觉层级的一些技巧



下面将通过大量的案例去给大家讲解,如何在设计中通过不同的方面去提高视觉层级


打开VS关闭

页面中通过打开或关闭的处理方法,在页面中,我们需要重点表达给用户的信息,可以铺开呈现出来,对于不那么重要信息可以收纳起来,通过展开和收起的对比,通过二级页面的跳转或引导到其他操作,以这种手段来强调页面的关系和节奏



满VS空

在一个页面中,一半内容满、另一半内容少,形式强烈对比,从而产生层级落差感


在上图中,左侧图片比较饱满,右侧文字采用正负形结合,视觉稍显的比较空洞,通过这种对比来突出页面调性


上图中,左侧空洞而右侧饱满,对比强烈,让用户更懂关注在文字信息


同样,这个app在顶部大量的留白,内容集中于底部,使页面一分为二,上半部分空,下面满,形成对比


图中酒杯比较满,而且颜色靓丽,而底部文字非常轻量,形成视觉冲击整个画面更加聚焦于中心


对称VS不对称

在一个页面中,通过使元素不对称的方法,会让视觉焦点更突出,差异感更强



如图,偶尔在设计中运用这种不对称的设计手法,反而能起到很好的效果


这个页面中,主要功能集中在左侧第一个按钮,和传统的重要功能放在中心位置不同,这样能形成产品的差异性,同时也可以营造视觉差异性


以上也是非对称在页面中的运用


大VS小

通过元素的大小对比,这种直接的感官传达方式,能让我们的注意力更聚焦在大的元素上面




面VS线

在设计中,面和线之间的对比,常用在按钮和标签,或者区块之间,面的按钮比线的按钮更突出,这也是大家在设计中经常运用到的设计技法



衬线字体VS非衬线字体

字体也是一种对比,比如 Serif 和 sans-serif 的对比



有序VS混乱

在页面中,有时候为了强调对比关系,在页面文字上的处理中,采用比较有序排版,对于物体采用混乱的排版方式,通过有序和混乱的对比强调画面的关系,最著名的例子莫属于苹果设计,大量采用另这种有序VS混乱的手法


如图,文字居中是有序的排版,而手机使用倾斜的角度去摆放,从而营造一种对角线的感觉,和文字有序的排列相呼应、形成对比


同样,上面两图文字部分都采用的整齐左对齐方式,而一些手机,或者装饰氛围的物品,则交错的排布在页面的各个地方,以此形成对比



文字有序,氛围素材无序,对比强烈,装饰效果强


质感VS扁平

最后一个:质感的和扁平的对比,这个质感不一定是拟物设计,而是有画面感、有色彩重量的意思,通过对质感与扁平的对比来强调和突出重点,差生差异感



看了这么多案例和分析,你是否都熟记于脑海呢?

下面给大家归纳一下,对比技巧、技法的运用总结



文章图片素材均来源于网络,如有侵权请联系删除!公众号内所有文章未经授权一律不得转载,转载前请后台回复【转载】


公众号:Sky的设计日记

设计师Sky和浪小花之父于朝蓬,愿每周和你分享最新设计趋势、科学设计方法、品牌插画教程、以及在智能化来临的时代,设计师如何找到自己的定位和价值

本篇文章来源于微信公众号: 我们的设计日记