旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 行业资讯 > UI设计师教你8个提高视觉层级的技巧

UI设计师教你8个提高视觉层级的技巧

时间:2018-01-31来源:www.aaa-cg.com.cn点击量:作者:吴冬冬
时间:2018-01-31点击量:作者:吴冬冬
大家都知道提高视觉层级,无非就几个点,尺寸、对比、颜色、样式、分组、对称、相似等这些点,基本总结起来就是制造差异,通过差异点来突出我们想表达的信息,视觉层级它能引导我们去发现设计中重要的地方,忽略不重要的点。今天就结合一些案例来聊聊提升视觉层级在设计中是如何去运用对比来达到提升设计层级的。

improving-the-visual-hierarchy 01

 

打 开  VS 关 闭   

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

 

improving-the-visual-hierarchy 02

improving-the-visual-hierarchy 03

improving-the-visual-hierarchy 04

improving-the-visual-hierarchy 05

 

满 VS 空   

一半内容满一半内容少,形式对比,形成层级落差。

improving-the-visual-hierarchy 06

▲(上图)左侧图片比较饱满,右侧文字采用正负形结合视觉稍显空来突出页面调性。

 

improving-the-visual-hierarchy 07

▲(上图)左侧空右侧饱满,对比强烈,让用户更懂关注在文字信息。

 

improving-the-visual-hierarchy 08

▲  同样这个app在上面留白较多,内容集中底部,页面一分为二,上半部分空,下面满,形成对比。

 

improving-the-visual-hierarchy 09

▲  酒杯比较满,文字底部空,形成视觉冲击整个画面更加聚焦中心。

 

对 称 VS 不 对 称   

在页面中,通过对元素不对称,会让视觉焦点差异点突出来。

improving-the-visual-hierarchy 10

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

 

improving-the-visual-hierarchy 11

▲  这个页面主要功能集中在左侧第一个按钮,和传统的重要功能集中在中心不同,能形成产品差异点,同时营造视觉差异性。

 

improving-the-visual-hierarchy 12

improving-the-visual-hierarchy 13

▲  非对称在页面中的运用

 

大 VS 小   

通过元素大和小对比,这种直接感官方式能让我们更聚焦在大的图形上面。

improving-the-visual-hierarchy 14

improving-the-visual-hierarchy 15

improving-the-visual-hierarchy 16

improving-the-visual-hierarchy 17

 

面 VS 线   

通过线和面之间对比,常用在按钮和标签,或者区块之间,面的按钮重于线的按钮,这个是设计中经常运用到的设计技法。

improving-the-visual-hierarchy 18

improving-the-visual-hierarchy 19

improving-the-visual-hierarchy 20

improving-the-visual-hierarchy 21

 

衬 线 字 体 VS 非 衬 线 字 体   

字体也是种对比,如Serif and Sans-serif的对比。

improving-the-visual-hierarchy 22


improving-the-visual-hierarchy 24

improving-the-visual-hierarchy 25

improving-the-visual-hierarchy 26

 

有 序  VS  混 乱   

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

improving-the-visual-hierarchy 27

▲  文字居中是有序的,手机采用倾斜的营造一种对角线感觉,和文字有序排列形成呼应。

 

improving-the-visual-hierarchy 28

improving-the-visual-hierarchy 29

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

 

improving-the-visual-hierarchy 30

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

 

质 感  VS  扁 平   

质感的和扁平的,这个质感不一定是拟物设计,是有画面感,有色彩重量的,通过对扁平对比来强调。

improving-the-visual-hierarchy 31

improving-the-visual-hierarchy 32

improving-the-visual-hierarchy 33

 

对 比 技 巧 技 法 的 运 用 总 结 

  • 打开 VS 关闭
  • 满 VS 空
  • 对称 VS 不对称
  • 大 VS 小
  • 面 VS 线
  • Serif   VS   Sans-serif
  • 有序 VS 混乱
  • 质感 VS 扁平

 

原文地址:我们的设计日记(公众号)
相关文章--《UI设计师教你如何学会包装








 

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

©2007-2022/ www.aaa-cg.com.cn 北京漫动者数字科技有限公司 备案号: 京ICP备12034770号 监督电话:010-53672995 邮箱:bjaaa@aaaedu.cc

京公网安备 11010802035704号

网站地图