导航栏与位置标记

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