UI复制:命令名称和键盘快捷键的UX准则

UE视界网    ()  ()

2019-11-22 00:50:23

命令标签应简短,翔实,并依赖动词和形容词,并避免使用烙印字词。命令快捷键必须限制修饰符的数量并遵循标准约定。


用户希望时间效率高。透明的命令名称和命令快捷键可帮助用户弥合执行的鸿沟,对于顺利,快速且轻松地进行交互至关重要。这些文字元素虽然经常被忽略,但它使包括残疾人在内的所有类型的用户都能快速浏览我们的数字产品。


定义:用户界面副本(UI副本)是指在用户界面中的按钮,菜单项和其他面向操作的元素中显示的命令的标签。


了解UI复制

有时也会使用“ UX复制”一词来指代这些元素,但是对于这些可操作的项目,我们更倾向于使用更精确,不太模糊的术语“ UI复制”,而不是要阅读的长篇内容,但未点击。UI副本也不同于微内容(或微内容),后者表示用于标题,电子邮件主题行,页面标题或工具提示的非常短的内容。


UI复制也不同于链接文本。链接只是帮助用户在链接的内容空间中导航,而命令与交互流相关联,并且通常会更改系统状态。它们通常显示为按钮,图标(最好带有标签或至少悬停文本),菜单项,单选按钮或其他类似的UI元素。


命令是应用程序的基础。由于应用程序经常需要提供大量功能和命令,因此命令名称通常很短-应用程序屏幕中根本没有太多空间来容纳许多长命令名称。这意味着需要创建命令标签以简洁的方式捕获命令的含义。


有效的UI复制准则

  • 使命令文本简短而不牺牲清晰度。一词,不言自明的命令文本最容易扫描,但是晦涩的命令或不经常使用的命令将需要更多上下文。仅使用足够的文本来准确描述命令,并且包括不超过2-4个字。避免过度解释命令并删除文章(“ a”,“ an”和“ the”),以加快可扫描性,理解力和任务完成速度。虽然首选短命令,但请使用足够的文字来充分说明该命令。 

1574354505144_2.jpg

对话框中的Minesweeper UI副本过于冗长和复杂。 

该对话框中的UI副本过于冗长和复杂(左)。对话框的更好版本(右)在不牺牲清晰度的情况下删除了多余的单词。此版本使用户更容易理解可用选项并选择正确的命令。(在这种情况下,可能不需要其他解释,但是当需要时,可以提供内联上下文帮助。)

  • 描述结果状态,而不是当前状态。命令应始终反映系统将进入的状态,而不是当前状态。例如,当播放视频时,我们会看到一个“ 暂停”按钮,该按钮表示视频通过单击图标进入的状态。这种类型的可变标签有助于在保留接口空间的同时传达后续状态。如果始终显示所有命令,则用户界面会变得过于混乱和混乱。

1574354536591_3.jpg

视图菜单中的命令描述了所需的状态。

Apple Mail应用程序中“查看” 菜单中的项目描述的是所需状态,而不是当前状态,并根据状态进行更改-例如,当标签栏可见时,“显示标签栏” (左)变为“隐藏标签栏” (右)。这些更改可避免混乱并最大程度地减少混乱。

  • 将动词用于启动操作或提交信息的命令。以动词或动词短语开头,这些动词或动词短语清楚地概述了选择命令后将发生的情况。例如,打印或接受并登录。用户通常可以识别常见的标签,例如“ 后退”,“前进”,“新建”,“下一个”,“上一个”,“撤消”和“设置”,因此不需要动词。但是,请记住,它们(例如Next,Previous)可能含糊不清且过于笼统,并且在任何可能的情况下,都希望使用特定动词代替这些通用名称之一。

1574354588693_2.jpg

SweatyBetty.com在结帐时使用特定的动词短语。

SweatyBetty.com并未使用模糊的命令标签,而是使用特定的动词短语(例如“继续计费”)来指导用户完成结帐过程。

1574354608633_4.jpg

Experian要求用户在登录流程中查看并接受新的使用条款,

经过最近的重新设计后,Experian要求用户在登录流程中查看并接受新的使用条款。按钮文本使用动词短语“接受并登录” 来有效地设置对用户需要做什么以及接下来会发生什么的期望。

  • 形容词用于触发系统状态更改或界面中元素外观的命令。形容词应始终反映元素的变化方式。例如,对于文本编辑,使用形容词(例如Regular,Bold或Italic)来描述外观的变化。

1574354635344_1.jpg

Photoshop的带有命令的“抗锯齿”菜单。

Photoshop的“抗锯齿” 菜单项触发一个选项子菜单,这些子菜单描述了选择形容词命令后图像边缘的变化方式。

  • 避免使用模糊的命令名称。用户不必在Google上输入命令名称即可了解其含义,含义或与其他命令的区别。命令文本应简单明了,说明性且准确;不可爱,也不时髦。

  • 包括工具提示以澄清结果。当使用图标或按钮来启动操作时,请包括在翻转时激活的工具提示,并提供上下文帮助,以便用户确切了解将要发生的情况。无论您使用本机工具提示,自定义设计的工具提示,还是两者结合使用,工具提示中的说明都应该是翔实且无冲突的。

1574354661954_2.jpg

Illustrator中的动画工具提示

Illustrator使用动画工具提示来提供有关一个新的,晦涩命名的命令 Puppet Warp的更多上下文。尽管更好的命令名称可能是“ Twist and Distort” ,但“ Puppet Warp” 工具提示阐明了选择此命令后艺术品会发生的情况。

  • 限制使用品牌术语。该应用程序的名称可用作主应用程序菜单的标签。并且,尽管品牌字词可以为“ 帮助”菜单下的菜单项添加有用的上下文,但在大多数情况下,应避免在命令文本中使用它们。不熟悉任务流程或应用程序的用户将无法理解其含义。

1574354732517_1.jpg

Adobe Acrobat Pro DC在主菜单中使用品牌术语。

Adobe Acrobat Pro DC仅在主应用程序菜单标签和“帮助” 菜单下的菜单项中使用品牌术语。所有其他命令均显示为简单明了的非品牌短语。

  • 使用一致的命令字,即使它们出现在不同的上下文中也是如此。如果同一命令出现在多个菜单,对话框或任务流中,请在每个实例中使用相同的标签文本,并将其放置在相似的位置。如果仅从动词或形容词中看不出所产生的动作或受影响的元素,请在动词后使用名词来消除上下文的歧义-例如,绘制表或删除文件夹,而不是绘制或删除。

1574354757836_2.png

Dropbox使用一致的命令标签 

Dropbox在应用程序的每个级别使用一致的命令标签。为了更加清楚,形容词和动词都带有名词,这特别有用,因为重复了常见命令(例如, Upload 和 New)。

  • 避免使用通用命令文本,例如OK。避免在确认对话框中对按钮标签使用通用短语“ 确定 ”。出于习惯,用户可能会选择它而无需阅读周围的文本,前提是这是正确的选项。通过按下该按钮来明确说明用户正在做什么。在用户不要做出事件的错误,总是包括撤消他们的行动,并使用简洁的UI副本,帮助用户的能力识别撤消或Ç 安塞尔可用选项。

1574354786166_1.jpg

使用“放弃”作为主要命令的对话框

Google日历:在离开日历邀请之前,会出现一个对话框,以确认放弃未保存的更改。使用单词 Discard (代替 OK )很有帮助,并加强了用户将要执行的操作。

  • 在命令文本中包括省略号(“…”)以指示何时需要更多信息。省略号将需要参数(以用户进一步输入的形式)的命令与直接命令区分开。省略号还可以指示尚未进行选择,并导致用户做出选择。

1574354810861_3.jpg

Excel中“文件”菜单中的椭圆

Excel:“文件” 菜单中的省略号表示相应的命令需要从用户处获得更多信息,然后才能执行。

命令快捷方式准则

除了命令文本之外,传达命令快捷方式的文本和符号也被视为UI复制。


定义:命令快捷键是在键盘上键入的按键组合,使用户可以快速执行常用命令。


命令快捷键与访问键不同:访问键允许用户通过在键盘上键入字符来从可见(扩展)菜单中选择命令,而命令快捷键通常涉及功能键并允许直接调用命令,无论其深度如何可以埋在命令菜单中。

1574354844701_2.jpg

快捷键与键盘快捷键

快捷键与键盘快捷键:在Windows(左)中,快捷键由命令名称中带下划线的字母表示。在MacOS(右)中,访问键的工作方式类似,但未加下划线。在两种操作系统上,键盘快捷方式均通过在菜单的最右边显示修饰符和组合键来表示。

因此,命令快捷键的常见示例是Ctrl + S保存或Command + N打开新的浏览器窗口。快捷键有助于加快界面的移动速度,并简化日常任务的完成。例如,键入Ctrl + V或Command + V比从菜单中查找复制和粘贴功能要快。但是,需要UI复制和熟悉的约定以使用户意识到这些省时器并记住它们,尤其是在界面中没有足够的空间可以与它们进行通讯时。


  • 优先执行频繁的应用任务的键盘快捷键。并非应用程序上的每个任务都需要快捷方式,因此请观察您的用户与您的应用程序进行交互以确定最常见的任务,并为这些任务确定键盘快捷方式的优先级。例如,当用户通过桌面浏览器访问Facebook时,他们可以使用一组键盘快捷键来快速导航界面并完成常规操作。(有趣的是,Facebook的也有一段名为快捷方式出现在左侧的导航,是指常用的页面。为了保证用户不会得到之间混淆的键盘快捷键的应用程序和快速接入点,包括字键盘快捷键的命令快捷方式的标签。)

1574354871727_5.jpg

Facebook键盘快捷键

Facebook提供了应用程序中常用命令的键盘快捷键列表。

  • 不要改变用途或覆盖标准命令快捷键。一些命令快捷方式(例如Ctrl + S或Command + S保存)已经得到广泛使用,并且许多人已经习惯了它们。不要重载这些命令 -例如,不要使用Ctrl + S滚动页面。创建新的快捷方式时,请始终考虑可访问性所需的键盘快捷方式,以免干扰辅助技术。


  • 使快捷方式可发现和重新定义。对于Mac和Windows操作系统,等效的快捷方式都应该可用,并且用户应具有定义自己的快捷方式的能力,除了应用程序设置的默认值之外。提供快速参考点;如果有快捷方式,则在工具提示中的命令文本旁边包括功能键和附加键序列。帮助部分还应包括可打印的图像,备忘单或用户可以轻松找到并共享的键盘快捷键列表。

1574354898331_5.png

Google表格使用相同的熟悉的键盘快捷键 

Google表格使用与其他工作表应用程序相同的熟悉的键盘快捷键,并将它们显示在命令按钮悬停时出现的悬停文本中。

1574354924664_3.jpg

Trello提供响应式备忘单 

为了帮助用户学习键盘快捷键,Trello提供了一个响应式备忘单,可以在任何设备上进行访问或打印并引用。

1574354942496_0.jpg

在Evernote中分配键盘快捷键

Evernote允许用户为常见操作分配自己的键盘快捷键。

  • 捷径应该是易学和难忘的。不要仅仅因为您认为组合是唯一的就设置键盘快捷键。它必须易于学习和记忆。使用清晰一致的系统,并始终将符号和功能与键盘上的按钮名称相关联。许多用户不看键盘本身就不知道某些符号或按钮名称的含义。

1574354966239_2.jpg

转录应用程序中的常见快捷方式

Transcribe应用程序在界面中提供了常用键盘快捷键的列表。它还在该快捷方式控制的媒体播放器功能旁边显示了键盘快捷方式;这种方法使快捷方式更加易学。

  • 使用最少的修饰符。 注意快捷方式中包含多少个shift,control,option和command功能。越简单越好。如果可能,请主要依靠一个或两个字母的快捷方式来确保它们对用户有所帮助,而不是增加其内存负担。

1574354993716_5.jpg

操作屏幕截图命令快捷方式

浏览器扩展 “动作屏幕截图” 在其菜单中显示键盘快捷方式。但是,这些键组合涉及多个修饰符,很难记住。

结论

精心编写的命令名称和熟悉的快捷方式可引导用户通过界面,并帮助他们学习如何使用它。相反,选择不当的UI副本会使人们感到困惑,并迫使他们花费时间弄清楚如何使用UI。要了解有关编写有意义的命令文本的更多信息,请参加我们的全天培训课程,为Web和桌面编写引人注目的数字拷贝和应用程序设计。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> UI设计,应用设计

还可以输入0个字

(审核后展示)
打开目录