探索编辑器中的功能区

0 评论 1256 浏览 1 收藏 17 分钟

设计软件时,针对功能区的设计都是比较复杂的。这篇文章,作者分享了一种在国外广泛使用的设计模式——微软的Ribbon设计模式,并从多个角度进行了讲解,希望可以帮到大家。

大家应该都接触过编辑器这个功能,比如我们常用的文字编辑器、图形编辑器、流程图编辑器等……

但当我们真正拿到一个编辑器需求的时候,却不知道怎么下手。因为编辑器内容通常比较多、零散。我们怎么组织、怎么排列、怎么交互都是需要思考的问题。

这个时候我们可以去看看世界上最前沿的产品,他们是怎么思考与设计的。

一、微软Ribbon设计模式

Ribbon设计模式是一种直接、简洁、以结果为导向的现代设计方法。它是软件界面上固定在顶部的一个功能区域。

Ribbon设计模式在我们的日常使用中并不陌生,尤其是在常用的Office软件中,它们都采用了这种设计模式。

所谓Ribbon,实际上就是一种功能区,其中包含了各种常用功能和命令的图标、按钮等元素。这种设计模式使得用户可以更直观地找到所需功能,从而提高了软件的易用性和效率。如果你要问为什么学微软,那就看一下他们用研数据:

在初期的研究过程中,除了收集定性的用户声音,设计师还充分利用数据驱动设计。

他们:

  • 从 Office 用户那收集了总计 30 亿份数据集,平均每天收集 2 百万份。
  • 在 90 天时间里,跟踪了用户在 Word 的 3.52 亿次点击的情况。
  • 跟踪剖析了近 6000 个独立的数据样本。

图:部分Word 中的操作使用情况(上);Office 套件中所有操作的使用情况(下)

像这种量级的调研,在国内也没多少公司可以做。所以 AutoCAD 、 3DS MAX,包括国内的万兴科技旗下的产品都有借鉴Ribbon设计模式,当然还有我们经常使用的WPS。

下面就来看下微软Ribbon设计模式有哪些优势,让这么多产品都去学习。

二、功能区

什么是功能区?

万兴科技旗下软件——亿图

金山软件——WPS

功能区是一种新式方式,让用户能够以最少的点击次数,高效地完成他们的任务,从而提高了编辑的效率和愉快程度。

功能区可以同时代替传统的菜单栏和工具栏。功能区由选项卡和组组成,组是一组标记的密切相关的命令。除了选项卡和组外,功能区还包含:

  • “应用程序”按钮,其中显示了一个命令菜单,这些命令涉及对文档或工作区执行某些操作,例如与文件相关的命令。
  • 快速访问工具栏,它是一个可自定义的小型工具栏,用于显示常用命令。
  • 核心选项卡是始终显示的选项卡。
  • 上下文选项卡,仅在选择特定对象类型时显示。始终显示的选项卡称为核心选项卡。
  • 选项卡集是单个对象类型的上下文选项卡的集合。例如,由于对象可以有多个类型
  • (具有图片的表中的标题是三种类型) ,因此一次可以显示多个上下文选项卡集。
  • 模式选项卡,是使用特定临时模式(如打印预览)显示的核心选项卡。库,这些库是图形呈现的命令或选项的列表。基于结果的库说明了命令或选项的效果,而不是命令本身。 功能区内库显示在功能区内,而不是弹出窗口。
  • 增强的工具提示,可简洁地解释其关联的命令并提供快捷键。它们可能还包括图形和对帮助的引用。 增强的工具提示减少了对命令相关帮助的需求。
  • 对话框启动器,是某些组底部的按钮,用于打开包含与组相关的功能的对话框。

三、丰富的命令

丰富命令是指在使用功能区时,用户可以直接看到并与命令进行交互,而不需要额外点击或打开功能区容器。

丰富的命令具有以下特征:

1、图标。所有命令都提供一目了然的图标,除非图标并不是大家所熟知。

这些命令非常广为人知,因此它们不需要标签文字。

2、按钮。命令的大小不是统一调整,而是根据其使用频率和重要性进行大小调整。

除了使最常用的命令更易于查找和单击外,它还使它们更易于触摸 。

在此示例中,最常用的按钮比其他按钮大。

3、动态大小调整。丰富的命令控件调整自身大小以充分利用可用空间,而不是使用固定大小,在太小时截断或使用溢出。

4、拆分按钮。拆分按钮是在需要时合并命令的一组变体的好方法,同时保持最常用的命令的直接性。

在此示例中,“另存为”命令使用拆分按钮,其中main按钮执行最常见的变体,菜单部分显示具有命令变体的菜单。

5、丰富的下拉菜单和库。下拉菜单、下拉列表和库占用了沟通和区分选项效果所需的空间,通常使用图形和文本说明。 类别用于组织大型选项集。

在这些示例中,单击菜单按钮会显示显示其效果的选项列表。

6、实时预览。每当用户把鼠标放在格式设置选项上时(WPS采用的是点击),程序会立即显示出该格式设置对文本的实际效果。

7、增强的工具提示。

提示清晰地解释了与命令相关联的内容,并提供了快捷键。此外,它们可能还包括帮助图形和引导动画。

增强的工具提示简洁地说明其关联的命令

四、可发现性

功能区通过提供选项卡和组来帮助你组织命令,从而使其更易于发现和使用。

挑战在于,让用户能够轻松地根据选项卡和组的名称找到他们需要的命令,而不会因为混乱或重复而感到困惑。

例如:应该确保用户可以通过一个简单、直接的路径来执行命令,而不是让他们在不同的地方寻找同一个功能,或者需要重复多次点击才能完成同一个任务。这样可以提高用户体验,避免混淆和不必要的复杂性。

通过多个路径查找命令似乎是一种方便。但请记住,当用户找到他们要查找的内容时,他们就会停止查找。用户很容易认为他们找到的第一条路径是唯一的路径,如果这条路径效率低下,则会是一个严重的问题。

在此示例中,你可以通过“页面边框”命令更改段落边框,即使“开始”选项卡上有一个更直接的路径。如果查找段落边框的用户偶然发现了此意外路径,他们可能很容易认为这是唯一的路径。

五、组

在确定组及其呈现时,需要考虑多种因素:

1、分类

尽管不同的程序可能有不同的功能和命令,但是一些常用的命令在许多程序中都是通用的。通过在不同的程序中以相同的名称和相似的位置显示这些命令,可以极大地提高用户发现这些命令的能力。

2、数量

虽然一些组织结构很好,但过多的结构会使用户更难找到命令。合理的组织结构应该既有足够的详细性,又不要过分繁琐,以确保用户能够轻松找到他们需要的命令,而不至于造成混乱。

3、组名

良好的组名是指能清晰反映其命令或功能用途的名称。

比如,你有一个组用于管理项目文件,那么给它起一个像”项目文件管理组”这样的名称就很合适,因为它明确告诉你这个组是用来管理项目文件的。

4、浏览

虽然我们习惯从左到右阅读,使得最左侧的内容首先显眼,但实际上,选项卡标题下方和内容上方更容易被注意到。将最常用的组放在最突出的位置,并确保整 个选项卡中的组有逻辑流。

在此示例中,“字体”和“段落”组比剪贴板组更明显,因为它们是从文档上移时眼睛首先看到的。

在此示例中,跟踪(tracking)组受到最多关注,原因是突出显示的“审阅”选项卡充当焦点。

5、对比

当命令看起来很相似时,用户可能难以辨别它们。为了帮助用户更轻松地识别命令组,可以采取使用不同形状、颜色、大小的图标使它们更易于区分。

六、预览

你可以通过使用各种类型的预览来显示执行命令的结果。这些预览能够帮助用户更有效地使用程序,减少尝试和错误的学习过程。

1、逼真的静态图标和图形

当你打开“字体”下拉列表时,里面显示的不是简单的文字列表,而是每种字体最终展示的样子。

在此示例中,缩略图展示了不同水印的外观,让用户在选择时可以直观地看到每个水印的样式。

2、动态图标和图形

这种修改后的图标和图形,会显示当前状态或执行的操作。

举个例子,如果你在编辑程序中修改了一些设置,现在想要将另一个项目设置成与上一次相同,这些图标和图形会反映出当前的设置状态,帮助你在作出决定时更加明智。这样的设计让用户更容易理解程序的状态,同时也提高了操作的效率。

在此示例中,Microsoft Word更改样式库以反映当前样式。

在此示例中,Word更改文本突出显示颜色和字体颜色命令以指示其当前效果。

3、实时预览

当用户把鼠标移动到格式设置选项上时,屏幕上会立即显示出该格式设置的效果,而不是等到用户真正应用这个设置后才能看到效果。

在此示例中,“页面颜色”命令通过鼠标悬停时改变页面背景色,让用户快速看到实际效果。

七、页面缩放

缩放工具栏很简单:如果窗口太窄而无法显示工具栏,则工具栏会显示适合的内容,并通过溢出按钮访问其他所有内容。

工具栏使用溢出按钮进行缩放。

没有默认功能区大小。最小大小是单个弹出组图标。

谢谢大家观看!

参考资料:

桌面应用程序的设计基础知识 – Win32 apps | Microsoft Learn

设计考古(1)_工具类产品 Office – 知乎 (zhihu.com)

本文由人人都是产品经理作者【夜莺YEAH】,微信公众号:【夜莺B端UX设计】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!