第15期【你怎么看】我们请到了腾讯 用户研究与体验部 设计师 sherry跟大家分享

   禁用,顾名思义,代表不可用的意思。有一个禁用,就一定对应着一个可用。不论是表单,还是复杂性管理界面,抑或是分步引导,这些场景中都有可能出现禁用状态,而如何合理运用禁用状态,让它成为体验的加分项而不是减分项,正是设计师要不断思考、深入实践的。这里抛一些砖出来,希望和大家一起探讨。

  “这个不可点的按钮放在这里很鸡肋,我们是不是可以考虑去掉?”


  “默认放出按钮吧,不能点也没关系,不然用户怎么了解产品中有哪些功能?”


  禁用状态可看为应用程序机制对外暴露的一个直接体现,什么时候展现,什么时候隐藏,也是设计中经常碰到的争议话题。

  Alan Cooper曾提到,激活和禁止菜单可以帮助用户了解菜单所反映的用途,从而帮助菜单成为更好的教学工具。例如我们常用的Photoshop选择菜单:


  菜单作为软件中最完备的功能集合,应该呈现所有的功能,这是第一个前提。在这个前提下,再根据具体交互的流程来展示哪些操作可用,哪些禁用。仔细想想,在我们日常所见的各种软件中,你并不会对菜单里的禁用项感到陌生。


  菜单有一个好基友叫做工具栏。作为一种直观、快捷的功能呈现形式,有幸出现在工具栏上的操作一般来说是软件中最常用的功能,为用户提供快速、高效的操作入口。


  工具栏给用户的预期应该是稳定的,可靠的,用户会不知不觉地对工具栏的布局进行学习,记住常用操作的位置,形成使用惯性。如果某个按钮有时消失,有时出现,用户会感到迷惑,也不利于提高界面操作的效率。尤其是当工具栏上有大量操作时,固定位置的好处显而易见,例如Ribbon界面,每个子面板下都包括至少5个以上的按钮:


2


  看上去,对于菜单、工具栏中的操作,不论是否有禁用状态,默认放出来是最好的选择。然而当操作较少时,设计师们仍然会做出思考和改进。


  浏览器,一个所有人都离不开的软件,前进、后退是它的核心功能之一。在这件事上,Chrome和Firefox采取了不同的设计思路。Chrome的前进、后退按钮将位置固定在地址栏左侧,根据当前网页的访问路径判断该按钮是否展示为可用状态,如下图所示:


3


  这样设计的好处在于,用户第一眼就能明白功能的位置,便于形成操作惯性。虽然在某些情况下前进按钮会由可用样式改变为禁用样式,但用户浏览网页时几乎全部注意力都在网页内容上,这里的状态变化并不会造成困扰。


  在Firefox中,打开新网页时地址栏左侧仅有一个后退按钮。点击后退按钮后,一个可用的前进按钮快速滑出。也就是说,仅当前进按钮可用时,它才会出现,在不可用时它会被隐藏掉。


5

4


  如果用户是按照开新窗口的模式打开新页面,浏览完毕就关闭窗口,前进按钮并不会出现;如果用户在同一窗口内新开页面,再点击后退时,前进按钮快速滑出,动画的衔接让它具备了功能自解释的属性,不会给用户造成理解上的困惑。当页面不能继续前进的时候,此时前进按钮瞬间变为禁用状态且快速滑动收起消失,用户也没有机会去点击。这样一来,Firefox地址栏左侧的空间在大部分情况下视觉感受轻量简洁,仅有一个最重要的后退按钮,而在需要使用前进按钮的场景下,操作也是流畅、自然的。


  这里不评判两种设计孰优孰劣,在处理前进按钮的这个问题上,Chrome和Firefox都有各自的答案。Firefox之所以采用这种较为大胆的设计,我认为和前进按钮的使用频率、使用场景有着密不可分的关系。再换个角度,Chrome也并不适用Firefox的设计:在Chrome地址栏左侧有3个按钮,如果中间的按钮有时会隐藏,那么最后一个刷新按钮的位置无法固定,在用户看来这个“工具栏”是有明显跳动存在的,而firefox的刷新按钮是在地址栏右侧,并不会有这样的问题。


   事实上还有更多的例子,有兴趣的同学可以点击这里观看全文,相信能给你带来更多的收获:)