网站、应用交互设计分析：禁用状态二三事.docVIP

网站、应用交互设计分析：禁用状态二三事 　　 ? 　　前言 　　禁用，顾名思义，代表不可用的意思。有一个禁用，就一定对应着一个可用。不论是表单，还是复杂性管理界面，抑或是分步引导，这些场景中都有可能出现禁用状态，而如何合理运用禁用状态，让它成为体验的加分项而不是减分项，正是设计师要不断思考、深入实践的。这里抛一些砖出来，希望和大家一起探讨。 　　“这个不可点的按钮放在这里很鸡肋，我们是不是可以考虑去掉?” 　　“默认放出按钮吧，不能点也没关系，不然用户怎么了解产品中有哪些功能?” 　　禁用状态可看为应用程序机制对外暴露的一个直接体现，什么时候展现，什么时候隐藏，也是设计中经常碰到的争议话题。 　　Alan Cooper曾提到，激活和禁止菜单可以帮助用户了解菜单所反映的用途，从而帮助菜单成为更好的教学工具。例如我们常用的Photoshop选择菜单： 　　菜单作为软件中最完备的功能集合，应该呈现所有的功能，这是第一个前提。在这个前提下，再根据具体交互的流程来展示哪些操作可用，哪些禁用。仔细想想，在我们日常所见的各种软件中，你并不会对菜单里的禁用项感到陌生。 　　菜单有一个好基友叫做工具栏。作为一种直观、快捷的功能呈现形式，有幸出现在工具栏上的操作一般来说是软件中最常用的功能，为用户提供快速、高效的操作入口。 　　工具栏给用户的预期应该是稳定的，可靠的，用户会不知不觉地对工具栏的布局进行学习，记住常用操作的位置，形成使用惯性。如果某个按钮有时消失，有时出现，用户会感到迷惑，也不利于提高界面操作的效率。尤其是当工具栏上有大量操作时，固定位置的好处显而易见，例如Ribbon界面，每个子面板下都包括至少5个以上的按钮： 　　 ? 　　看上去，对于菜单、工具栏中的操作，不论是否有禁用状态，默认放出来是最好的选择。然而当操作较少时，设计师们仍然会做出思考和改进。 　　浏览器，一个所有人都离不开的软件，前进、后退是它的核心功能之一。在这件事上，Chrome和Firefox采取了不同的设计思路。Chrome的前进、后退按钮将位置固定在地址栏左侧，根据当前网页的访问路径判断该按钮是否展示为可用状态，如下图所示： 　　 ? 　　这样设计的好处在于，用户第一眼就能明白功能的位置，便于形成操作惯性。虽然在某些情况下前进按钮会由可用样式改变为禁用样式，但用户浏览网页时几乎全部注意力都在网页内容上，这里的状态变化并不会造成困扰。 　　在Firefox中，打开新网页时地址栏左侧仅有一个后退按钮。点击后退按钮后，一个可用的前进按钮快速滑出。也就是说，仅当前进按钮可用时，它才会出现，在不可用时它会被隐藏掉。 　　 ? 　　 ? 　　如果用户是按照开新窗口的模式打开新页面，浏览完毕就关闭窗口，前进按钮并不会出现;如果用户在同一窗口内新开页面，再点击后退时，前进按钮快速滑出，动画的衔接让它具备了功能自解释的属性，不会给用户造成理解上的困惑。当页面不能继续前进的时候，此时前进按钮瞬间变为禁用状态且快速滑动收起消失，用户也没有机会去点击。这样一来，Firefox地址栏左侧的空间在大部分情况下视觉感受轻量简洁，仅有一个最重要的后退按钮，而在需要使用前进按钮的场景下，操作也是流畅、自然的。 　　这里不评判两种设计孰优孰劣，在处理前进按钮的这个问题上，Chrome和Firefox都有各自的答案。Firefox之所以采用这种较为大胆的设计，我认为和前进按钮的使用频率、使用场景有着密不可分的关系。再换个角度，Chrome也并不适用Firefox的设计：在Chrome地址栏左侧有3个按钮，如果中间的按钮有时会隐藏，那么最后一个刷新按钮的位置无法固定，在用户看来这个“工具栏”是有明显跳动存在的，而firefox的刷新按钮是在地址栏右侧，并不会有这样的问题。 　　上文是一层操作的例子。那么多层操作呢?假如你面对一组信息列表，针对全部列表有一套操作，针对每条信息又都有一套新的操作时，就必须要考虑隐藏的设计了。 　　Gmail的邮件列表页在未选中邮件时，工具栏只包括3个针对列表的功能。选中具体邮件后，针对该邮件的操作出现在工具栏中，原有的操作消失。这样既可以避免未选中邮件时大量禁用操作摆放在界面上给用户造成负担，又保证工具栏在默认状态下的清爽简洁。然而，这种设计也给用户带来一定的学习成本，新手用户在初次使用时需要探索一番才能明白邮件选中前后的区别。 　　 ? 　　Dropbox也采用了类似的设计，在默认界面的表格标题栏中不呈现任何操作，单击选中文件后，具体操作展现在工具栏上。 　　 ? 　　当我们面临不那么复杂的操作时，例如web上的发布表单、提交流程等，对禁用状态的取舍则需要更加细致入微的思考。以下是一些设计建议供参考： 　　1.需要应引导用户操作时，扔掉禁用 　　先来看看新浪微博的发布按