导航栏与位置标记

July 27, 2015 / leiwaa

在众多的网页导航中,一个有意思的现象是,对于当前页面在导航栏的位置标识,有两种刚好相反的强调样式。

先来看一组图片(截于150727):

对于这些导航,可以归纳为两种样式(假如当前处于页面B):

样式一: 页面A 页面B 页面C 页面D
样式二: 页面A 页面B 页面C 页面D

两种做法似乎都没啥问题。高亮的意义不是把它变亮,而是让它跳出来,变亮是途径,差异是目的。不过这其中还是有一点微妙的差异:

样式1可以理解为视觉上提亮(例如暗色背景提明度,亮色背景降明度)当前页标识,而样式2则相反,提亮的是当前页面外的其他页面(与降低当前页面亮度不一样)。所以如果样式1偏向于直接强调「我现在在哪」,那么样式2则是强调「我可以去哪里」,这是主要的思路差异。

样式1可以类比在移动端常见的 Tab 栏,高亮当前的页面链接,可以理解为被激活的,使用中的,也可参考现实中的点亮的指示灯。样式2也可以理解为表示你已经处于当前页面,所以这个按钮是无效不可用的,而其它的则是可用的,可以联想一下旧式磁带录音机的按键。

需要提醒的是,当用户去看导航的时候,往往就是要用导航的时候——一般来说也就是要到别的地方的时候。所以整体来看,样式2似乎更合理,更能逻辑自洽。但是样式1也很常见,实际使用中也不存在可用性上的问题,除非你的导航菜单只有两个条目,不然用户只需要从几个菜单中找到唯一一个不同的的就可以确定自己的位置。从两种方式都能长期共存来看,也说不上谁对谁错。

如果不想纠结于这二选一的选择,也可考虑其他方法达到目的。例如附加额外的元素(如剪头与条状 Indicator),而不是通过自身控件的强弱高亮来标识。除此之外,因为页面内容本来就能表明当前所处页面、而且即使点错了也没有什么大问题等, 所以也有相当一部分网页在一级导航上是不带位置标识的。

相比之下,移动端基本很难发现这种差异,绝大部分都是采用视觉上提亮当前页面标志(样式1)的做法,或者在 Android 下常见的条状滑块指示器。

— 本文采用 Creative Commons BY-NC-ND 授权,转载请注明出处 —

Comments
Write a Comment