故事背景

AutoCAD（Auto Computer Aided Design）是美国Autodesk公司首次于1982年推出的自动计算机辅助设计软件，用于二维绘图、详细绘制、设计文档和基本三维设计，现已经成为国际上广为流行的绘图工具。

一个冷知识，各大软件诞生时间

  • AutoCAD 1982
  • Windows 1985
  • Adobe 1982
  • Photoshop 1988年被Adobe买下
  • Office 1989

Office于2006年正式发布Ribbon UI。而AutoCAD 2009版第一次引入Ribbon UI，同时还保留切换回到Menu+Toolbar界面的入口，到AutoCAD 2015则彻底去掉了切换回经典界面的入口。

image.png image.png image.png


那么AutoCAD为什么要跟随office的Ribbon UI模式呢？

  1. ribbon对新手更加友好
  2. ribbon可以使更多更好的功能被用户发现

我的故事

第一次做专业软件设计

故事前情概要：为绘图人员设计图纸比较功能，方便用户快速找不同。

从一开始，在设计上就决定要用ribbon，而不是其他形式（toolbar，palette）
image.pngimage.png image.png

然后，就遇到了一些Ribbon设计困境

  1. 新功能放在哪个tab下面好？

做了好几轮问卷调查各个答案选的人都有
image.png image.png

  1. 想要的功能没有现成的ribbon控件 ，有些东西从来没有被放在过ribbon上，比如文件信息

实际设计中，发现有些内容适合放在palette上，有些适合放在ribbon上。

image.png

  1. 不用ribbon的用户还是还是很多，他们就无法使用到新功能绝大多数的设置。AutoCAD用户不接受Ribbon UI的原因一般如下：
    1. ribbon对新手探索产品功能很友好，但是对于老用户帮助不大，反而由于旧习惯和肌肉记忆难以改变，引起老用户不适。
    2. 绘图者都喜欢更大的绘图空间，但是ribbon占用纵向空间，尤其是宽屏情况下。
    3. AutoCAD的功能和用户的工作流比Office产品复杂得多，功能的群组梳理不一定符合用户认知，则无法如预期般更高效找到功能。
    4. AutoCAD资深用户很多还停留在AutoCAD老版本阶段，因为老版本的功能已经满足工作需求，没有升级新版本的动力。而AutoCAD新用户很多也都是老用户手把手教学指导，老用户会把自己的工作习惯带给新用户，包括对界面的偏好设置。

在这个项目的用户调研里，我们就遇到一些不使用ribbon的用户，他们对于新功能的评价就是：这个功能不错，不过我不用ribbon。。
image.png

一年的工作成果受到挑战

不管这一年遇到多少棘手的问题，总算也都被解决了。自己跟了一年多的项目页终于正式发布了。然后就开始功能的迭代升级。

结果，项目组来了一个Design Architect，表示原来的设计要大改，并给出了自己的全新设计：

  1. 所有相关操作从ribbon移到类似toolbar，
  2. 属性设置类操作全部藏到类似于palette的地方。

理由：

  1. 很多人不用ribbon。
  2. 功能升级：比较结果由原先在新图纸中生成，变为在当前图纸展示比较结果，而且可以把另一张图的元素直接转移到当前图纸，需要有一个明确的反馈：当前是在一个图纸比较的特殊视图下。
  3. 原来的设计不够优雅：不是一个功能就要设计一个按钮的。很多不适合放在ribbon上的也硬塞到了ribbon。

然后就对原来的设计进行了大刀阔斧的改革。

enhanced-dwg-compare-video-1920x1080.mp4 (2.49MB)

虽然这个经历有点令人沮丧，但Design Architect的一些设计，也确实让我受到启发。比如有些交互可以更自然，零UI。
Kapture 2019-08-26 at 22.12.10.gif

自己的反思

应该想清楚各种控件形式适合使用的情景：

  • Ribbon：常用/情景式的按钮类，选择类操作，状态切换类
  • Toolbar：常用的按钮类，状态切换类操作
  • Menu：可以找到所有操作
  • Palette：常用/情景式的信息展示，属性设置，可能要随时设置
  • Modal Dialog：低频属性设置
  • Commandline：快速唤出常用功能，适合资深用户

让我们再回头看看Ribbon的一些上手法则：

  • 想清楚 Ribbon 是否真的适合你的产品。如果使用 Ribbon 不能让你的程序变得更简单、更高效、更易用，请考虑其它解决方案。
  • 不要低估了设计一个高效的 Ribbon 的难度。不要期望它是你现有菜单栏和工具栏的简单端口，也不要想当然认为 Ribbon 会自动把你的程序变得更好。做好心理准备，创造一个高效的 Ribbon 需要付出长时间的打磨思考。
  • 遵循让命令操作可被发现的原则。设计标签卡时，要让其中的命令操作和标签描述具备清晰、明确、唯一的映射关系。用户在寻找目标操作的时候应能够快速、果断自信的选择包含该目标操作的标签卡。
  • 借助富按钮让命令操作的作用不言自明。通过标签说明、图标、提示框和实时预览等方式，让用户能够理解命令操作的作用，而非通过不断尝试或去阅读帮助说明。
  • 让命令操作高效使用起来。用户应该大部分时间都花在主选项卡上（home tab）；在常见任务中，用户几乎不需要反复切换选项卡（tab）；当界面窗口最大化且聚焦在正确的选项卡上时，最常用到的命令操作在视觉上要有所突出以便用户通过一次单击就能激活该操作；最多不超过四次点击用户就能触发所有其它的操作命令；在常见任务中，不要让用户通过打开的对话框（dialog boxes）来触发命令操作或进行一些参数设置。
  • 帮助用户在选择命令操作或选项时能更加自信，同时降低试错的频次。无论何时何地，只要条件允许都应使用结果导向的命令操作（results-oriented command）设计，如陈列室（gallery）和实时预览（live preview）。
  • 确保ribbon在最大窗口尺寸到最小窗口尺寸间都能缩放自如。保障跨终端设计。

其实有些法则对于其他形式的控件都适用。

那么，Ribbon UI到底是否适合AutoCAD呢？

AutoCAD Team自己似乎也不太确定。

使用Ribbon的AutoCAD for Windows
image.png

AutoCAD for Mac，左边工具栏是ribbon和toolbar的混合体
image.png

AutoCAD Web，抛弃了绝大多数功能和面板，同时也是左右结构。
image.png

工具设计的新发现

  1. 有些操作，可以用时间换空间

这是语雀的图片设置：
image.png

这是Confluece的图片调整方式：

Kapture 2019-08-26 at 22.37.51.mp4 (808.32KB)

  1. 控制器越来越靠近被控制对象，交互组件越来越融合。 Kapture 2019-08-26 at 22.44.06.mp4 (362.26KB) image.png

image.png

image.png
image.png

image.png

  1. 有些交互方式的出现，让我竟有了“时尚就是个圈”的感觉，比如古老的task panel升级换代成为很多工具中的contextual toolbar，古老的commandline变成了Mac OS经典的全局搜索。

image.pngimage.png

image.png

引申阅读

image.png

image.png