写给新手的控件设计指南（二）：控制器

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

想成为真正的 UI 设计师，光会视觉设计可不行。这份控件设计指南，可以帮你快速巩固基础。第一部分：

写给新手的控件设计指南（一）：UI栏

想成为真正的UI 设计师，光会视觉设计可不行。

今天接着讲第二部分：控制器 controls，这篇文章包括：按钮 buttons；上下文菜单 context menus；编辑菜单 edit menus；标签 labels；页面控制器 page controls。

按钮button

1. 在 ios 设计规范中的描述

按钮是用于启动应用程序的特定操作，按钮的背景可自定义，可以含图标或标题，具体的形式可以根据设计需要进行自定义。苹果系统按钮通常出现在导航栏和工具栏中，也可以在任何地方使用。

2. 需要注意的点

• 标题尽量使用动词，动词给人的感受是可交互的，并说明单击该按钮时会发生什么。
• 标题保持简短，标题过长会使界面变得拥挤，同时会增加用户的理解成本。
• 仅在必要时考虑为按钮添加边框或背景。

默认情况下，系统按钮没有边框或背景，但是在某些内容区域中，边框或背景使按钮的可交互性变强。比如电话应用中，数字键和通话按钮的背景都增强了按钮的可点击性，如下图，图一的按钮可点击性>图二按钮可点击性。所以我们可以采用不同的样式来区分按钮的优先级。

上下文菜单 context menu

1. 什么是上下文菜单 context menu？

根据字面意思，上下文菜单指的是结合上下文而显示的菜单，其实，上下文菜单 context menu 约等于鼠标右键菜单。

但与鼠标右键菜单不同的是，context menu 提供了内容的预览。ios 13 以前，「3D touch+上滑」两步操作才能看到预览及下方的命令，而context menu 通过长按一步做到。

2. 在 ios 设计规范中的描述

在 ios 13 及更高版本中，可以体验到上下文菜单，上下文菜单中显示的是内容的预览及与当前内容相关的功能。

需要注意的点：

使上下文菜单一直保持可见。如果一个应用中某些地方提供上下文菜单，而某些地方又不提供该功能，会让应用失去稳定性变的不可控。

保持克制，上下文菜单中仅显示用户最常用的命令。

将优先级最高的命令放在菜单顶部，在打开上下文菜单时，用户的焦点位于菜单的顶部区域，将优先级最高的命令放在菜单顶部，更方便用户找到。

命令过于复杂时可以使用子菜单，这里的子菜单就相当于电脑端的子菜单，也叫二级菜单，如下：

子菜单的级别不宜过多，级别过多会让体验变得更加复杂，且导航效果不好，容易让用户迷失。

给命令进行分组。视觉分组可以帮助用户更快的扫描菜单，将相关性强的命令分为一组，通常情况下，菜单中不要超过三个组。

不要给一个内容同时提供编辑菜单和上下文菜单，由于这两个控件的触发方式都是长按，如果同时出现会使用户困惑。

不要提供打开预览的操作按钮，用户可以通过点击打开正在预览的内容，因此无需再提供「打开」按钮。

标签labels

△ 在 ios 设计规范中的描述

标签指的是界面元素或提供一个短文本，不能编辑但可以复制，标签可以包括任意数量的静态文本，但最好保持简短，清晰易读。标签可以是纯文本也可以是具有样式的文本，如果需要使用自定义的字体，要以保证其易读性为前提。

编辑菜单 edit menus

1. 在 ios 设计规范中的描述

用户可以通过长按或双击文本字段，文本视图，web 视图或图像视图中的元素，来选择内容并显示编辑选项。

需要注意的点：

• 显示适用于当前上下文的命令，编辑菜单中的默认命令有「剪切」「复制」「粘贴」「选择」「全选」「删除」，可以根据实际情况对命令进行禁用或者自定义添加。
• 编辑菜单弹出的位置可调节。默认情况下，编辑菜单出现在插入点或选择的上方/下方，具体显示位置取决于页面的可用空间，并包含指向相关内容的指针，菜单形状无法更改，但位置可自行配置，以防止其覆盖页面的重要内容。
• 相同的功能不要在两个控件中出现，意思就是同一个功能，比如文本的复制，不要在编辑菜单中出现的同时又在其他控件中出现，这样会导致用户感到迷惑不可控。
• 不要给按钮执行编辑菜单。
• 允许用户撤销。由于编辑菜单在执行操作之前不需要用户再次确认，为避免用户「后悔」，应支持用户可以撤销上一步操作。
• 不要将自定义按钮与系统按钮混在一起，始终将自定义的按钮显示在系统按钮后面，这样更容易使用户形成固定认知，方便查找。
• 自定义按钮的标题要简短，使用动词或动词短语。

页面控制器 page controls

1. 在 ios 规范中的描述

页面控制器在页面列表中显示页面总数和当前页面的位置，它通常由一组小圆点组成，实心点表示当前页面，在视觉上这些点是等距的，在手机端，用户可以通过点击小圆点或者左右滑动切换下一页或上一页（但在很多应用中，只能通过左右滑动切换，小圆点无法点击，大家可以自己体验一下），受圆点大小的限制，无法点击特定的点进入特定的页面。

需要注意的点：

• 不要显示太多页面，超过 10 个点一个页面容易显示不开，超过 20 个点用户浏览起来会比较耗时费劲，如果需要显示超过 20 个页面时，考虑使用其他控件。
• 不要将页面控制器与分层页面一起使用，页面控件不会显示页面之间的关联方式，也不会显示与每个点相对应的页面。
• 样式可以多样化。Page controls 通常用圆点表示，当需要特别说明页面功能时，可以用其他形式，比如苹果系统将小圆点变成相机icon，表意更明确。

2. 拓展应用

page controls 与进度条结合使用，进度条代表当前页面的展示时间，有的允许用户手动滑动，有的为了更好的传达信息，不允许用户滑动，这种情况下，进度条帮助用户了解下一页何时出现，可以有效缓解用户等待时的焦虑感。当进度条与 page controls 结合使用时，受空间的限制，数量不易过多。

当页面过多时，Page controls 与数字结合使用。上面提到圆点不易过多，圆点过多的话，会导致一个页面展示不开，而且从第一个点滑动到最后一个点费时费力。但实际业务往往不能只从用户体验出发，有的业务场景需要展示多个页面，比如自如 app：

自如没有直接将全部小圆点展示出来，虽然使页面变得更加简洁，但是这样的 page controls 却失去了他一重要的指示功能，用户无法通过小圆点判断页面数量。自如这里展示的是运营类 banner，用户并不会太在意此类 banner 的总数量，也是可以说的过去的。

当需要展示多个页面，又不想使页面因为圆点过多变得杂乱，该如何处理呢？看小红书是如何做的的：右上角的数字与 page controls 结合使用。

数字角标和 page controls 的作用其实类似，所以当需要展示过多页面时，很多应用选择用数字角标，放弃使用 page controls，比如淘宝：

不同的是 page controls 可以通过点击小圆点切换下一张，而数字角标只能通过左右滑动切换，但数字角标可显示的页面更多。

总结一下，数字角标的优劣：可展示的页面更多；样式更简洁。Page controls 的优劣：可点击小圆点切换页面；比数字角标更直观；但需要展示多个页面时由于小圆点过多容易让用户混乱。

page controls 与标签结合使用：为了在展示多个页面时方便用户自由切换，提高用户浏览效率，于是出现了 page controls 与标签结合使用的方案，举个例子，自如的房源详情页面，由于展示的图片多且类型不同，为方便用户快速定位想要看的目标图片，将图片以标签形式分类，通过点击标签快速切换，不足之处是，用户不能一目了然的获知图片总数，每类图片的数量，及当前浏览的位置。

欢迎关注作者的微信公众号：「设宴」