目录
视觉层级
2022年10月28日

在我的书桌上,堆放了一摞书,如果我想拿到最下面的那本,那么我需要将这本书上面的所有书挪开。通过这个堆放模型,我们能很好地理解,我们生活的这个物理世界,是有层级先后的关系存在的。


于是,当我们爬山时,当到达顶峰后,回望山腰和山脚下的人群,我们就会形成这样一个判断,山腰上的人要比山脚下的人距离我们更近一些。

可以说,我们认识客观世界里的万事万物,都是建构在我们的经验基础之上。我们会习惯性的,将任何事物,和我们的“模型库”的某一个模型进行比对,如果得到的反馈是YES,那么,我们可以轻松的同这些新事物交互,反之,就会陷入麻烦。


界面层级

我们在软件设计开发时,同样会在软件界面示意中,模拟真实的世界。当我们打开电脑,启动多个软件应用时,我们就会发现,多个应用窗口之间,存在遮挡关系。通过这种遮挡现象,我们可以很容易的判定,这些软件的工作状态。比如,那个没被遮挡的软件界面,应该位于所有软件层级的最上面,我们是可以直接同它进行交互的。这就好比真实物理世界中的一摞书,最靠上的那本,可以被直接拿到一样。


应用内的信息,同样也可以依靠视觉分层,来引导用户操作。比如,我们最熟悉的绘图软件sketch,在默认状态下,sketch的主界面视窗,由四部分构成,分别为左侧的图层面板、右侧的操作面板、顶部的工具栏,和位于界面中间的工作区域。当我们在工作区域,滑动鼠标执行缩放操作时,就会发现,其他三个区域的面板会保持不动,但会和工作区域的内容形成事实的遮挡。即便是没有强阴影示意这种遮挡关系,我们依然能够判定,工作区域是位于这三个区域面板之下的。



拟物化

说到阴影,我们就不得不提,早期的苹果系统设计。苹果的产品,给人的感受,不只是工业设计做的好,他的系统界面设计,也非常让人着迷,乔布斯几乎以一己之力,将拟物化化设计风格,推到了前所未有的高度。

早期的苹果系统上,所有的应用,都被设计的非常精美,很多软件的导航栏被设计成各种质感。这些应用看起来,就像是一件又一件的“艺术品”。而使用阴影来揭示页面层级关系,几乎是所有应用的不二的选择。



扁平化

再后来,基于安卓系统的设计指导规范面世,引发了新的设计讨论。很多设计师,呼吁让应用设计更加聚焦信息呈现,他们认为,界面设计不应该成为信息呈现的”障碍“。这句话说的直白一点就是,界面UI设计不需要太抢眼,应用设计的核心,应该是要把内容信息凸显出来。后来,这种提议形成了共识,于是扁平化渐渐成为了一种趋势。如今,在应用设计中,我们已经很少看到,通过使用大阴影,来揭示层级关系了。取而代之的是,通过使用不同的色块或是直线,来圈定图层示意范围。

但是过度的扁平化也会带来新问题,很多应用设计,因缺乏个性,而略显平淡,这很难让用户有体验的乐趣。如果说在工具类产品,采用扁平风格,这本无可厚非,毕竟用户只需要用工具应用来完成任务。但是对于一些社交应用,或者小众应用,设计上缺乏个性,往往很难被用户喜欢,

于是,很多设计师开始进行新的探索,他们在保持导航栏和标签栏扁平的基础上,尝试在内容页中强化层级。这种处理手法的好处是,既能丰富界面的视觉观感,同时也有利于信息分层。在新版App Store中,我们可以看到,首页的主体内容区域,已经开始通过使用大阴影卡片,来丰富页面构成了。



强化操作

即便是工具性应用,有时也会通过加强视觉层级的表现,来提升用户的执行效率。比如Mac系统下的pages应用,会在操作面板中,将全部可用于执行的选项按钮,通过视觉强化处理,提升显示层级。这样做的好处是,用户可以更容易的聚焦操作。


而在它的导航条上,同样可执行操作的缩放按钮,确采纳不同的处理方式,这个按钮并没有被强化,而是和导航层完全融合。给出这种设计方案,可能出于两种因素考量,一个是非高频按钮,不需要过度强化,另一个是强化按钮,可能会导致面板内容失调。



输入面板

在移动应用设计中,导航栏和标签栏,一定会位于主体内容之上,而在PC应用的设计中,也会划出特定的区域,来承载某些操作按钮。这些安排在最上层级的操作命令,往往对用户执行效率,意义重大。

但是即便如此强化层级,当系统级别的,输入面板被激活时,这些应用的全部内容,也会被置于输入面板之下。因为在输入场景下,应用中,没有任何应用界面的展示优先级,会高过输入面板。



最后

当我们面对书架中,分类明确,整齐排布的书籍时,我们可以从容的取放,但是。如果将这些大量的书籍堆叠在一起时,取用底层的书籍,将会非常困难。在应用设计中同样不鼓励使用较多的层级,使用2到3个信息层级来完成设计最优。如果在设计方案中使用过多的层级,就会导致元素关系混乱。用户很难从这种混乱的关系中,厘清逻辑。而混乱的层级分布,也会让界面UI失调。