如何设计工具栏
前段时间工作中涉及到几个工具类应用的设计，设计过程中查找了一些资料，再加上自己在使用工具类应用的体验，在此聊聊工具栏的设计。
工具栏的作用与特点
工具栏的作用是使用户能快速访问常用功能，因此通常具有这些特点：
- 使用频率高：工具栏展示的都是最常用的功能，显然使用频率会很高。
- 即时性：工具栏的命令通常都是点击后立即生效的。如最常见的保存、复制、粘贴等。
- 数量有限：工具栏的命令都是直接摆在画面中的，因此占用空间大，数量必定也会有所限制，并且常用功能本身数量也有限，所以也没必要把所有的功能都放在工具栏。
工具栏内容
工具栏可以看做是一系列按钮、下拉菜单等组成的，按使用模式可以分为以下几类：
命令按钮：单击按钮立即操作。如：保存、复制。
模式按钮：单击按钮进入所选模式。如：调试。
属性按钮：属性按钮的状态反映了当前选定对象的状态。单击按钮将对所选对象应用更改。
菜单按钮：适用于一组互斥的命令，或一组同类命令。如：切换视图。
拆分按钮：是一种命令按钮，用于合并命令的各种变体，特别是当其中一个命令比其他命令使用频率更高时。 与菜单按钮类似，按钮右边部分是一个小三角，点击即可展开更多命令。 与菜单按钮不同的是点击拆分按钮的左边部分，将立即执行命令。在下一个命令可能与上一个命令相同的情况下，拆分按钮的效率就很高。如：颜色选择器、边框选择器
下拉列表：用于查看或更改选中对象的属性。如：字体
按钮图标
一个典型的工具栏通常都离不开图标，因为图标更易于快速阅读，也更节省空间。在设计工具栏的图标时，有几个要点需要注意：
工具栏图标应尽量简洁，不要企图只使用图标就能把功能百分百表达出来，我们需要做到的是把图标做到容易辨识，再结合其他方式，如图标+文字、悬停提示，告知用户该按钮的功能。
按钮又分为纯图标按钮和图标+文字的按钮。纯图标的好处是节省空间，但不易于表达按钮的准确用途；图标+文字的按钮和纯图标正相反，文字能准确表达按钮的用途，但同时会占用更大的空间。
Adobe Acrobat 的纯图标按钮
WPS 的图标+文字按钮
具体取用哪种方式，还需根据软件的实际应用情况进行取舍，比如像打开、保存这类已经是在很多行业里通用的工具，就可以用纯图标的按钮，而如果是一些大众不熟知的功能，则最好使用图标+文字的按钮。
工具栏图标常见的尺寸包含16px、24px、32px等，需结合整体功能和视觉效果去选择尺寸。
最后还需要保证图标在不同按钮状态下的对比度足够高。
工具栏位置
顶部放置：顶部放置是最常见的一种方式。
侧边放置：在图形设计软件中比较常见，如Adobe Illustration、Adobe Photoshop。
不固定位置：根据当前选中的内容，就近显示不同的工具。很多文档软件会使用这种方式，这是语雀中的一个例子，当我选中一篇文档中的图片时，在图片位置上方会显示针对该图片操作的工具栏。
其他设计要点
功能分组
同类型命令放置在同一组，不同组之间可用分割线隔开。破坏性命令不要与常用命令放在一起，防止误操作，比如保存和删除。
明确按钮状态
在不同状态下显示不同的样式，可以让用户明确当前的状态。如：鼠标悬停时，看到按钮变化，便可知道该按钮是点击的；单击并抬起鼠标后，如果按钮状态恢复，则表示该按钮为命令按钮，如果按钮变化并保持了该状态，则表示该按钮为模式按钮。
如何选择禁用或不显示
当前暂时不可用功能，按钮显示为灰色禁用状态，而不是直接隐藏。因为当用户习惯了工具的固定位置，某一工具消失时，会让人困惑，所以如果暂时不可用，使用置灰的方式更好，能让用户感知到哪些操作会禁用或启用该功能。
如果是与权限有关的功能，比如有的功能只能 VIP 使用，那在普通用户界面，最好不显示 VIP 功能，可以在帮助或关于页面说明哪些功能与权限有关。
Ribbon 控件
Ribbon 控件是微软在 Office 2007中开始应用的一种控件，是把菜单和工具栏相结合，将不同功能放在不同的选项卡。这种方式在 Office 软件中沿用至今。AutoCAD 从2010版本也开始使用 Ribbon 控件替代传统工具栏了。
关于 Ribbon 控件的设计在微软官方的文档里有很详细的说明，见 Windows 7 Ribbons。
参考资料
- Windows 7 Toolbars
- About Face 4：交互设计精髓
订阅： 本站所有内容首发于 tangweijuan.com，同步更新于微信公众号"Afterwork Time"，欢迎扫描下方二维码订阅。
