前段时间，我的工作涉及到几个工具应用的设计。 在设计过程中，查阅了一些资料，结合自己使用工具应用的经验，这里就来谈谈工具栏的设计。
工具栏的作用及特点
工具栏的目的是为用户提供对常用功能的快速访问，因此它通常具有以下特点：
工具栏内容
工具栏可以看作是一系列按钮、下拉菜单等，按使用方式可分为以下几类：
命令按钮：单击按钮可立即执行操作。 如：保存、复制。
模式按钮：单击按钮进入所选模式。 如：调试。
属性按钮：属性按钮的状态反映了当前选中对象的状态。 单击该按钮会将更改应用到所选对象。
菜单按钮：适用于一组互斥命令，或一组同类命令。 如：切换视图。
拆分按钮：是一种命令按钮，用于组合命令的变体，尤其是当其中一个命令的使用频率高于其他命令时。 与菜单按钮类似，按钮右边部分是一个小三角形，点击可以展开更多命令。 与菜单按钮不同，单击拆分按钮的左侧部分将立即执行命令。 拆分按钮在下一个命令可能与上一个命令相同的情况下非常有效。例如：颜色选择器、边框选择器
下拉列表：用于查看或更改所选对象的属性。如：字体
按钮图标
一个典型的工具栏通常离不开图标，因为图标更容易快速阅读并节省空间。 在设计工具栏图标时，有几点需要注意：
工具栏图标应尽可能简单。 不要试图通过仅使用图标来 100% 地表达功能。 按钮对用户的作用。
按钮分为纯图标按钮和图标+文字按钮。 纯图标的优点是节省空间，但不容易表达按钮的确切用途； 图标+文字按钮与纯图标相反。 文字可以准确表达按钮的用途，但同时会占用较多的空间。
Adobe Acrobat 的纯图标按钮
WPS图标+文字按钮
使用哪种方法取决于软件的实际应用。 比如打开、保存等在很多行业已经很普遍的工具wps工具栏怎么全部显示出来，可以使用纯图标的按钮。 功能，最好使用图标+文字按钮。
工具栏图标常见的尺寸有16px、24px、32px等，需要结合整体功能和视觉效果来选择尺寸。
最后，需要保证图标在不同按钮状态下的对比度足够高。
工具栏位置
置顶：置顶是最常见的方式。
侧面放置：多见于平面设计软件，如Adobe Illustration、Adobe Photoshop。
位置不固定：根据当前选择的内容，附近会显示不同的工具。 很多文档软件都会用到这种方法。 这是语雀中的一个例子。 当我在文档中选中一张图片时，图片所在位置的上方会出现一个对图片进行操作的工具栏。
其他设计要点
功能分组
相同类型的命令放在同一个组中，不同的组可以用分界线分隔。 不要将破坏性的命令和常用的命令放在一起，以防误操作，如保存、删除等。
清除按钮状态
在不同的状态下展示不同的风格，可以让用户知道当前的状态。 例如：当鼠标悬停时，可以看到按钮发生变化，就可以知道按钮被点击了； 单击并抬起鼠标后，如果按钮状态恢复，则表示该按钮为命令按钮。 如果按钮改变并保持这种状态，则该按钮是模式按钮。
如何选择禁用或不显示
功能目前暂时不可用，按钮显示为灰色而不是隐藏。 因为当用户习惯了工具的固定位置时，当某个工具消失时会感到困惑，所以如果暂时不可用，最好使用灰色化，让用户感知哪些操作将禁用或启用功能。
如果是权限相关的功能，比如有些功能只有VIP才能使用wps工具栏怎么全部显示出来，一般用户界面最好不要显示VIP功能，可以在帮助或者关于上说明哪些功能是权限相关的页。
色带控件
Ribbon控件是微软在Office 2007中开始应用的控件，它结合了菜单和工具栏，将不同的功能放在不同的选项卡上。 这种方法至今仍在 Office 软件中使用。 AutoCAD也从2010版开始使用Ribbon控件来替代传统的工具栏。
Ribbon控件的设计在微软的官方文档中有详细的介绍，参见Windows 7 Ribbons()。
参考
订阅：本站所有内容首发于tangweijuan.com，微信公众号“下班时间”同步更新，欢迎订阅。
