一、重要性
说到视觉信息层级的重要性，就不得不说结合我们的工作重要性来说。
我们的工作担任整个产品构成到上线（由抽象概念到具体界面）的“表现层”。肩负着与客户接触的最后一道工序，我们的主要任务就是把交互设计师提供的交互原型线框图设计成大众接受的美观界面，以保证用户在使用产品时有非常好的初始印象同时留下强烈的品牌记忆。
ps：核心目的——商业价值的最大化
设计应当符合设计目的，不应只追求艺术效果
这就需要我们需要建立正确的价值观，不要因为设计而设计，要知道为什么这么做，对商业的价值是什么。
说白了我们在做任何设计的时候，需要考虑的是：
用户想看到什么（初步行为），以及我们想让用户看到什么（诱导）
结合我们的工作职能总结为：
视觉界面设计关注的是如何处理和安排可视元素，传达行为和信息。
视觉设计者做的是设计的组织、视觉暗示、启示用户行为的交流模式。
合理组织、处理、安排界面元素，便是我们今天提到的：建立界面视觉信息层级
二、信息梳理
①亲密性原则
为了更好的划分界面的信息层级，我第一步要做就是信息组织贵啦。
这里我们借鉴（写给大家的设计书）种亲密性原则：彼此相关的元素应当靠近，组织在一起。如果多个元素之间存在很近的亲密性，他们就应成为一个视觉单位，而不是多个孤立的元素。这又助与组织信息，减少混乱，位读者提供清晰视觉信息结构，如下图：
亲密性的根本目的在于组织性。我们需要将相同组织的信息组织在一起，为页面的内部建立起一个良好的信息浏览顺序，符合用户的阅读习惯，避免用户在浏览信息的时候耗费过多的精力甚至导致用户看不懂的情况出现。这里我们以淘淘票为案例：
通过上图我们能看出在淘淘票种将同种属性的信息进行了有序的组织，使得界面看起来整齐有序，并符合用户的自上而下、从左到右的阅读习惯。
②什么是有效的视觉层级
左图为手机拍摄照片，右图为经过我处理过的模拟眼睛焦点阅读的照片
我们可以看出，利用设备拍摄时，我们采集信息的模式是一次性完成的。拍摄时统揽界面中的所有信息。但是当人对信息的采集模式时，是根据眼球的移动，按照一定顺序获取信息。不能统揽页面所有信息，当眼睛焦点在那里的时候，才可看到哪里的信息。
设计师需要考虑的就是让用户通过眼球移动，按照一定的顺序获取信息，帮助用户高效自然获取和理解信息。
强烈的视觉层次感是通过界面上视觉元素提供清晰的浏览顺序来实现的，也就是说，用户每次都能按照同一个顺序浏览同一些元素。
🌂对比原则
为了能够更好的区分信息层层级，我们第二件要做的事情就是“对比”，我们通过加强一些元素的对比来区分信息的重要程度。
我们这里在借鉴（写给大家的设计书）种的对比原则：对比的核心思想是避免避免页面上的元素过于相似，我们需要通过对比让页面上重要的元素能首先引起的注意，而不是整体都十分的平庸，让用户感觉无从下手。
一般情况下我们可以通过字体、粗细、大小、色彩、的对比来突出页面的重要信息，以增加页面的节奏感。
1 大小对比
很好理解，通过视觉元素体量上的对比进行层级的划分，体量越大则层级越高，也就越突出。Appstore的页面中，利用字号大小和图片大小来区分信息层级，一目了然。iOS11中去除了以往的背景和装饰元素，很多页面均利用文字大小来区分层级，使整体页面看上去层级更加清晰易懂。
△ AppStore中的大小对比
2 明暗对比
明暗对比即通过颜色的明度来进行对比。一般在处理文字信息层级时较为常用，通过使用不同明度或灰度的文字来划分层级。知乎的信息流中，标题用较深的颜色作为第一层级，用于让用户快速判断核心信息，简介用略浅的颜色可以使用户清晰阅读，其余文字信息则作为辅助信息置灰处理为第三层级。
△ 知乎APP中的文字的明暗对比
3 色彩对比
重点信息除了可以用较大体量的元素和明暗对比表达外，往往受限于页面尺寸，则可以考虑使用添加背景底色来进行突出。代表性的是支付宝头部的蓝色，不仅强调了“扫一扫”等主要功能，而且大面积使用品牌色更能向用户有效传达了品牌信息。天猫APP首页为了突出限时抢购的模块，也使用了非常亮的黄色来吸引眼球，与黑色文字形成强烈反差，进而突出了有效信息。
△ 支付宝中的色彩对比
△ 天猫APP中的色彩对比
4 虚实对比
虚实对比在背景信息中较为常用，使用虚化的背景来突出前景，借鉴于摄影中的景深效果。书旗小说详情页头部的背景处理，不仅能突出重点信息，而且能够较好营造氛围感、场景感和立体感。
△ 书旗小说APP中的虚实对比
5 前后对比
前后对比类似于虚实对比，但层级划分更加明显，往往应用于两类完全不同的信息之间，一般情况下，弹窗、浮层等均属于这一对比范围。ofo、各类地图产品等为了以更大区域展示背景中的地图信息，往往会采用这一形式。在信息量巨大的地图上利用浮层形式进行前后对比，进而突出操作信息。
△ ofo中的前后对比
6 动静对比
在信息较多，色彩较丰富的页面中，大小与色彩对比往往就不能派上用场了。此时如果向再突出某个元素，则可以考虑使用动态图形。如抖音的新手引导、咸鱼的二级入口icon。不过使用动态元素需要节制，不仅在数量上要严格控制，在动画频率上也需要谨慎。过多或过快的动态元素不仅起不到突出信息的作用，反而容易令页面失去焦点，激发用户急躁和烦乱的情绪。
△ 抖音的动态新手引导
△ 咸鱼APP中的动态二级icon
粗细对比
三、建立有效的视觉层级的前期分析
UI设计是科学与艺术结合的综合技能。在考虑如何建立信息层级前，我们必须知道什么是重要的，以及背后的逻辑是什么。
比如一个音乐播放页面，在看似简单的上一首，暂停，下一首的按钮设计中，按钮的大小，彼此的间距都关系到用户的点击效率和操作难度。
我们应该谨记，设计应当符合设计目的，不应只追求艺术效果。好的设计师做出来的界面，一定是在产品逻辑合理下安排的信息层级合理的界面。
建立有效的视觉层级前，进行如下几步的分析：
1、 页面定位（帮助分析）
用户是谁
用户来自哪里，即从什么渠道来到该页面
页面内容定位，提供什么、不提供什么
页面作用
2、 信息优先级
一级信息吸引用户
二级信息帮助理解
三级信息详细理解
3、 用户核心行为
行为最终导向
了解，有意愿（导向）
了解更多细节（最终导向）
网友评论