想成为真正的 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 与标签结合使用的方案,举个例子,自如的房源详情页面,由于展示的图片多且类型不同,为方便用户快速定位想要看的目标图片,将图片以标签形式分类,通过点击标签快速切换,不足之处是,用户不能一目了然的获知图片总数,每类图片的数量,及当前浏览的位置。

写给新手的控件设计指南(二):控制器

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

写给新手的控件设计指南(二):控制器

收藏 148
点赞 22

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。