《移动端设计模式》学习笔记

这里总结了8种常见设计模式:导航、表格、搜索、表单、工具、引导、操作、反馈。

导航

1、导航

1.1、标签导航

iOS系统原生导航。应用程序有多个重要功能,且需要频繁切换时使用。

优点:可见性好,切换方便。

缺点:占用底部空间,影响沉浸式体验;最多使用5个标签。


1.2、舵式导航

标签导航的变体。在应用程序需要特别强调某个操作时,将行动召唤按钮放在中间位置。


1.3、Tab导航

安卓系统原生导航。规范建议,只有单层导航时可以在顶部使用基于文本的标签导航。为了避免滚动,最多显示4个水平标签。(现在的主流应用一般把它用作次级导航且不止4个标签。)

优点:占用空间少,左右滑动切换方便。

 缺点:显示在顶部,用户不太容易注意到。越往右侧的标签点击率越低。


1.4、抽屉导航

安卓系统原生导航。应用程序只有一个功能特别重要,其他功能重要性比较低,且不会频繁切换功能时使用。例如打车类、共享单车类应用。

优点:节省页面空间,聚焦核心内容,沉浸式体验较好。

缺点:其他功能的使用率较低,切换功能比较麻烦。


1.5、列表导航

有多个平级功能, 功能层级比较浅且不需要频繁切换时使用。例如邮箱类应用、设置。

优点:结构清晰,可以快速找到想要的内容。

缺点:内容比较多的时候,容易阅读疲劳。切换功能比较麻烦。


1.6、轮播导航

适合用在功能选项比较少,且不需要频繁切换时使用。

优点:大图展示内容,体验感比较强。

缺点:不能显示太多的页面,不能表示页面之间的层级结构,切换比较麻烦。


1.7、宫格导航

有多个平级功能,使用频率相近,彼此相互独立且不需要频繁切换时使用。

优点:所有功能都能够直观展示出来,扩展性好。

缺点:内容比较多的时候,不容易查找;切换功能比较麻烦。


1.8、菜单导航

当一个页面内容太多时,可以将一些功能收起来,放到菜单里面。

优点:节省空间,点击菜单入口就可以唤出菜单。

缺点:一般菜单入口放在页面顶部,不容易点击;不知道菜单里面包含哪些功能。


表格

2、表格

2.1、基本表格

基本表格模式就是,带有固定列表头及网格布局的标准表格。设置不同的表格行颜色,即斑马线,或者在两行之间用细线分割,都能提高表格的可读性。

现在普遍省略垂直网格线以减少视觉噪音。


2.2、无表头表格

无表头表格的特征是,用较宽的行显示某一对象的多个变量,且没有列标签。

常见的做法是突出显示行标志符(信息的关键部分)。可以使用图标。可以使用更大、颜色更深的字体来突出行标志符。

无表头表格非常适合用来显示项目集合(比如存货清单、菜谱、专辑等),也很适合显示搜索结果。


2.3、固定列表格

对较大的表格来说,固定列表格模式或许是一个可行的解决方案。

当用户不是垂直滚动屏幕的时候,最左侧的列固定,其他列可左右滑动。


2.4、概览加数据型表格

这种模式的特点是,表格内容的摘要显示在第一行数据的上方。

这种模式在财务类型的应用中十分普遍,也适用于任何其他应用,只要用户想从中看到总数或随时间变化的趋势。

如果图表概览太大,可以考虑用逐级深入模式。


2.5、行分组表格

行分组可以让表格数据更易读。

一组分组行集可以作为节区头部,比如按年分组或按类别分组的交易记录。

从视觉上将表格的汇总行和其他行区别开来。一般而言,汇总行应该较窄,字体颜色较浅。


2.6、带有视觉指示器的表格

这种模式设计时,波形图和图标可以提升表格的信息显示效果。

注意不要使用没用的图标堆满表格,给数据的显示造成困扰。

只有当视觉指示器可以突出表格数据时,才可以使用。否则,应该避免使用。


2.7、可编辑表格

多见于office、numbers等表格工具。

清晰的指示出选中的单元格和行。

如果单元格有特定的格式,要提供适当的编辑器。例如选择器、下拉菜单、颜色选择器、日期选择器。

除非编辑后产生错误提示,否则没有必要为每项操作都提供确认反馈,只需要保存时要求用户确认即可。

如果要进行批量数据输入,或者可能需要大量的编辑工作,要避免使用可编辑表格。


搜索

3、搜索

3.1、搜索模式

隐式搜索:通过感知用户需求,自动完成搜索。

跨平台同步用户信息,并用隐式搜索的方式显示搜索结果。

地理围栏,基于附近位置的隐式搜索。例如查看附近的餐厅。


显式搜索:通过显式的用户操作实现搜索并获得结果。

输入前:扫描商品而不用输入商品名、使用最近一次搜索、访问保存的搜索、语音搜索。

输入时:提供搜索建议,最小化输入需求,提高搜索效率,降低出错的几率。

直接操纵:用手势在地图上划出搜索范围。

模态搜索:点击搜索框,搜索模式显示为一个带有弹出键盘的完整的搜索页。

模态搜索的好处在于,用单个搜索页面增加了搜索空间。

要提供一个「清除」按钮和取消模态搜索选项。


自动完成搜索:显示搜索的标配。

当用户输入文字时,会出现一组可能的选项;

当用户继续输入文字时,搜索结果也相应的减少;

点击任何一项结果就会触发搜索(点击页面或键盘上的按钮,也应该触发对当前高亮选项的搜索)。

理想情况下,自动完成搜索的结果会立刻显示出来,如果存在延迟,应该显示进程指示器,例如 搜索中…

增强型的自动完成搜索:将搜索提示分组,标记可能每项提示有可能所属的类别


动态搜索:空白的搜索框下会显示全部的分类结果,输入搜索字符串会动态的对结果进行筛选,缩减列表范围。


限定范围的搜索:在用户搜索前先设定好搜索范围。

可以采用分段控件、滚动的选项卡、胶囊导航栏(Pill Bar)来实现限定范围的搜索。

为数据集提供合理的范围选项,3-5个就够了。


保存的搜索、最近的搜索记录、热门搜索。


搜索表单:有一个用于输入多个搜索条件的单独的表单和一个显示搜索按钮。


搜索结果/查看结果

执行搜索后,搜索结果可以在同一页展示,也可以跳转到专门的搜索结果页。

搜索结果可以显示为表格、列表、地图、卫星图、缩略图。

延迟加载,是一种在其他结果正在加载时显示部分搜索结果的常用技术。

很多应用会在用户滑动屏幕时自动加载更多结果,有些则提供了一个链接来加载更多商品。

标明搜索返回的条目个数。

设定合理的默认排序。


3.2、排序模式(Sort)

单页排序:在只需要少数几种排序选项的情况下,单页排序可以作为一种简单的一键式解决方案。

很多iOS应用都弃用了这种模式,转而采用更节省空间的其他模式,例如排序浮层。

有的应用直接点击排序、有的应用在点击排序按钮后才显示单页排序选项。

在安卓应用中,下拉菜单控件可以很好的用来选择排列顺序,可以清晰的指明哪一项是活动的。


排序浮层:通过点击排序标签或图标开启浮层,这种模式可以节省屏幕空间。


排序表单:需要用户做出更多操作——打开表单,选择一个选项,而且还可能点击‘完成’‘应用’或‘返回’按钮。

一些应用将排序和筛选模式集成在一个表单中。因为两者都是用于进一步精细化搜索。


3.3、筛选模式

单页筛选:与单页排序一样,单页筛选显示在搜索结果页;点击后,筛选立即执行。

在安卓应用中,下拉菜单控件可以很好的实现筛选列表,可以清晰的显示出当前被选中的选项。


筛选浮层:通过点击‘筛选’Filter或‘设定条件’Refine标签开启浮层,也可以使用能够更清晰表达可以应用筛选条件的图标。


筛选表单:需要用户做出更多操作——打开表单,选择一个或多个选项,然后点击’应用’按钮。适合筛选选项很多的情况,可以把这些选项分组显示。

可以在用户做出选择时动态的更新搜索结果条数,帮助用户判断何时可以对搜索结果进行操作。


筛选抽屉:像筛选浮层和筛选表单一样,筛选抽屉需要额外点击’应用’或‘完成’按钮以获取筛选结果。他们之间的主要区别是,筛选抽屉是从当前页面侧边滑出的,这样允许用户在筛选过程中停留在筛选结果页上。

打开和关闭抽屉是对应的操作

动态更新搜索结果的条数

搜索结果在背景层中始终可见

在筛选器被执行后给予清晰的反馈


基于手势的筛选

当结果的相关性取决于用户所处的地理位置时,基于手势的筛选为用户提供了一种直观的方式来设定搜索结果的范围。


表单

4、表单

4.1、登录表单

1、明文显示密码。这一点已经得到可用性测试和现场使用效果的有力支撑。


4.2、注册表单

去掉确认电子邮件、确认密码字段。这一点已经经过了大量的用户测试验证。

密码项可以选择显示或隐藏。

每个表单都有即时反馈。

在输入框内使用提示文字。悬浮标签可以解决提示文字消失后的可用性问题。

如果对密码的安全性有特定要求,要在用户点击提交/完成按钮之前告诉他们。


4.3、个性化注册表单

通过个人便好设置,提供定制化的内容。


4.4、多步骤表单

如果几个步骤不得不跨屏幕显示,不要显示过于密集的进程栏,而是采用显示当前步骤是第几步的方法。

产品配置是一种特殊的多步骤表单,它不只是典型的线性流程,而是需要实现返回-前进的导航。


4.5、结账表单

同时提供登录、注册、客人用户选项。允许以游客身份结账,在用户支付后再创建账号。

简化流程。弃用进程栏,把分屏步骤融合进一个结账页。

提供快捷输入方式。通过导入通讯录,快速填写收件人信息。通过扫描卡片功能,快速录入信用卡号码。

提供快速结账方式。


4.6、计算表单

最好的计算器应用应该是将输入结果用视觉效果呈现出来。


4.7、搜索表单

应该只有最核心的、不可或缺的输入字段,并提供合理的默认值。

在搜索结果页提供筛选功能,让用户对结果列表进行细化。

在表单页上直接预览搜索结果数目。

保存搜索项,例如票价提醒功能。


4.8、长表单

一些表单不能只放进一屏之内,这时长的滚动页比把表格分成多页要好得多。(不要特意把表单分割成多页步骤,单页滚屏更可取。)

设计长表单最棘手的部分在于,应在何处放置执行和退出按钮。

在大多数iOS应用中,表单在模态环境下显示。iOS设计指南建议,命令按钮放在右上角,退出键(一般叫作返回或取消)放在左上角。

安卓指南建议,命令按钮应该放在操作栏。(固定在屏幕顶端)。


工具

5、工具

5.0、按钮只是一种变通手段。—Josh Clark

在现实世界中,按钮往往必不可少,但他们和操控对象有一定距离,他们是操作主体的辅助工具。

人们必须通过学习才能进行这些间接交互,且他们之间的关联关系不是很明显。

触屏设备引发了一场变革,我们能够越来越多的将主体内容作为控制对象,从而制造出直接交互的幻觉。

在有必要触发抽象操作的情况下,使用按钮。

触屏界面允许用户在更多的情景中进行直接交互。例如滑动翻页,双指捏合缩放。

在设计触屏交互时,应当不断问自己,我真的需要在这里加上一个按钮或控件吗?


5.1、工具栏

工具栏是提供页面特定操作的最常见方式。

iOS系统中,始终显示在屏幕最底端。

ios版mail,在底部显示一条工具栏。

wunderlist,底部设计了一个可收起/展开的自定义工具栏。(新版已经改成固定的工具栏)

expedia,在工具栏的基础上,设计了级联菜单。

narrato,底部的一个操作按钮可以触发一页操作菜单。


安卓系统中,没有专门的工具栏。

操作按钮放在操作栏的右上角。

操作栏位于页面顶端,通常固定在每个应用的页面上。

主要操作按钮显示在顶部操作栏上,次要操作放进溢出菜单(overflow menu)中,通过点击垂直的省略号调出。


5.2、上下文工具栏

一种与操作系统无关的模式。

例如,在输入栏或输入框中输入文本时,键盘上方显示一组相关操作。(用于文本输入的上下文工具栏)


5.3、工具箱

工具箱类似于增强型的工具栏。这种模式在提供大量效果处理工具的摄影和设计类应用中最为常见。

一般主工具箱放置在屏幕底端。从主工具箱中选择一个工具,会显示该工具特定的一个新的选项集。

安卓版pixlr,使用浮层选项菜单。

repix、aggl,在工具箱上方增加一行,显示所选中工具的各个选项。

aviary,选择了一个工具时,显示子项,隐藏原先的主选型。


5.4、行为召唤按钮

只在页面显示单一操作时,可以使用行为召唤按钮。也适用于有一个主要行为召唤按钮和一个次要行为召唤按钮的页面。

全局行为召唤按钮,是在一个应用的任何界面都可以点击进入的按钮。

可以在标签栏中间位置放置单一操作按钮

可以在屏幕底端放置一个悬浮的行为召唤按钮

对称交互。例如path中的悬浮行为召唤按钮,点击后会显示更多选项。行为召唤按钮由’+’变成’×’,即打开变成关闭,两个按钮放在同一个位置。


5.5、行内操作

行内操作指的是操作按钮与其作用的对象在同一行,而不是在全局或整个屏幕层级上。

行内操作应该靠近被操作对象。

选择用户熟悉的图标,并且可以考虑为图标加上文字标签。


5.6、多状态按钮

通常来说,你不应该在一个UI控件中设置多个操作,因为这会让页面过载,让用户感到有压力。多状态按钮是个例外。

多状态按钮既用做操作触发器,同时也是一个反馈机制。例如:APP Store的下载按钮,下载—安装进度—打开。

多状态按钮的另一个常见用例是一种删除控件。例如:删除—点击删除。

(在一系列紧密相关的过程被快速连续执行时,多状态按钮十分有效。)

(在设计提示用户确认不可撤回的操作时,也可以考虑使用多状态按钮取代对话框。)


5.7、上下文工具

上下文工具专门针对一个对象或任务。只有在上下文建立起来之后才显示这些工具,这种设计很合乎情理,还能简化页面。

luvocracy,点击任何一张图片中的省略号按钮,在图片区域显示该图片的上下文工具。

any.do,通过点击某个条目,在点击区域下方显示上下文工具。

dropbox,点击更多,通过浮层来自暗示上下文工具。也可以采用内嵌式把其他行推向下方。

flixster,通过手势,来显示工具栏,例如滑动手势。这种方式在效率类工具中非常流行。例如电子邮件、任务应用。

box,通过长按来选择一个对象,并呈现出对应的上下文工具。

在选择一种手势来显示上下文工具时,应该先从最简单的解决方案着手,并对其可发现性和用户效率进行测试。


5.8、批量操作

常见的批量操作包括选择、删除和重新排序。

iOS的照片应用。当一张照片被选中时,上下文工具就会显示出来,同时还可以选择更多照片,然后对全部选中条目执行批量操作。

iOS的股票应用。提供了一种可重排、删除和排序股票的编辑模式。(重新排序功能,最新版已经取消。)

还可以在批量操作时,显示选中数量。

像删除和重排这样的批量操作,最好使用独立的编辑模式。要提供一个退出编辑模式的明显选项。


5.9、锁屏控件

iOS和安卓都提供了在锁屏界面显示工具的选项。这种模式常见于音乐类型。

如果你的应用要在后台运行,而用户可能需要快捷方式进行暂停、停止或调整应用,那么可以考虑为锁屏设计工具。

例如安卓any.do,使用小部件在早上提醒用户使用,也在一天当中帮助用户管理任务。

(移动用户体验可以突破应用的常规边界。为提高用户体验,可以考虑采用锁屏控件或小部件。)



引导

6、引导

6.1、引导原则

原则1:少用文字

当我们想要解释一件事情的时候,文字通常是最简单的工具。但如果我们想要了解一件事情,却经常不愿采用文字这种途径。

《教程101》指出,我们应该避免只依赖文字进行讲解。因为“阅读文字速度很慢,而且会破坏浸入式体验,此外,那些最需要引导的玩家反而常常跳过文字引导。”

使用太多的文字是一种’说而不秀’的方法,这与移动应用的优势相违背。

引导应该是’秀而不说’,应该具有交互性,这样用户可以通过操作来学习。

如果我们预先练习过操作,而不仅仅是被告知如何做,那么我们在需要的时候,就会更容易记住这些操作。

少用文字,并不意味着文字永远是错的,或是说,文字总是越少越好。它指的是在你想吸引用户进一步体验的时候,应该首先考虑减少文字,增加交互。

错误的方式:使用文字解释操作和效果,而不是鼓励用户操作,让他们自己观察结果。

正确的方式:使用引导文字鼓励用户边操作边学习。


原则2:不要前置引导

《额外加分》节目在《教程101》中说到,如果你一上来就进行讲解,事无巨细的引导你的玩家,他们就会被信息的海洋淹没,没有动力玩下去了。

前置引导会熄灭用户的热情,让他们跳过你的引导。而且,用户一旦跳过引导,就不大可能从你的应用中有所收获,也不大可能向其他人推荐你的应用。

限制前置引导,只对主要功能做个初步介绍,以便让你的用户潜心进入,快速上手。

(不要预先告知用户可能会用到的所有信息,否则他们会不堪重负,把信息分成小块儿,当用户需要时再显示)


原则3:给予用户成就感

即使我们不能让新手的学习过程变得有趣,也仍然有一些方法让这一过程富有成就感,并使之完全融入到应用的整体体验当中。

一个比较好的做法实时交互,让用户实际完成操作。

在引导中融入一种趣味性。

例如flipboard,用有趣的嵌入式提示吸引用户,并强化了这种用于应用导航的关键手势。

例如noom,采用’升级’的游戏化技巧,激励用户成功完成一系列任务,达到下一级所需水平。

例如noom,还运用了一个让应用始终有趣的‘惊喜’元素。完成程序设置后,马上获得一个’优胜者奖’,激励我再接再厉。

对于激励型应用,惊喜是很有用的。


原则4:在使用中强化学习。

不要前置引导原则的补充。

例如在引导中讲解一项操作时,附加一个微小的视觉或听觉的反馈。当用户以后进行这项操作时,同样的反馈会强化他学到的东西。

不要试图一次性把你的应用一展无余,可以考虑设计一种引导用户循序渐进的浸入式应用体验。

随着时间的推移,展示更高一级的功能,或者发放意外‘奖品’以资鼓励。


原则5:倾听用户的心声

简单的用户测试能暴露出应用使用过程中的任何障碍。观察你的用户,看看他们在哪里绊住了,在哪里碰到了问题。倾听他们与应用互动时的评论,稍后再向他们提问。如果在他们使用应用的时候提问,可能会不自觉的引导他们说出你想要的答案。

不要到最后再设计引导。你必须一开始就把引导融入整个设计过程。

引导应该允许用户跳过。

引导中传达的所有信息应该都可以随时访问。


6.2、提示

提示应该指向屏幕上某一个特定的工具或操作按钮。

避免使用幻灯片提示、对话框提示、一屏展示多个提示。

把提示放在操作按钮或菜单项旁边,内容要简短,并在互动开始时隐藏提示。


6.3、持续的视觉吸引

持续的视觉吸引在某些例子中看上去也许和提示差不多,但他们在持续性上还是不尽相同。

这些视觉吸引要么始终可见,要么保持可见状态直到用户执行指定操作位置。


6.4、可发现的视觉吸引

在用户执行了常见手势操作(如点击、下拉、滑动)之后才显示出来。


操作

7、操作

7.0、功能可见性(原文中使用功能可见性作为本节标题)

功能可见性,指的是一个对象具有让用户知道他可以用来执行一项操作的特性。例如门把手、抽屉把手。

软件中常见的功能可见性示例包括拖拽手柄、卷起的页脚,以及按钮和滑块等3D控件。


7.1、点击

像斜面和阴影这样的视觉设计技巧可以让元素看上去是可点击的。然而,扁平化设计的兴起让这些技巧对设计师来说不再那么有效。

不是说扁平化设计不能体现功能可见性,只是它要求更高的设计技巧才能使其正确实现。

luke wroblewski :要为页面上不同的元素设计出有意义的差异,却掉纹理和纵深使得剩余的视觉设计工作更加困难。我认为这是‘扁平化设计’更难的一个主要原因。它迫使你简化,从而达到使用更少的视觉联系提供同样清晰的视觉传达的目的。


7.1、滑动/轻扫

通过滑动操作实现功能可见性的方式有很多。

例如:iOS页面指示器控件

例如:在页面边缘显示不完整的内容,以暗示页面侧边或下方还有更多内容。

例如:滚动条也是一种可选方案,尽管它在移动应用中不那么常见。例如字母联系人列表中的字母滚动条。

例如:其他的设计隐喻还有封面流/轮盘、名片盒、堆叠的照片。例如RetailMeNot,Safari,Potluck。

动画也可以吸引用户使用滑动手势。

例如:安卓版Allthecooks在侧边栏菜单打开时‘弹跳’者提示:水平滑动手势可以显示完整菜单。

例如:flipboard,上下翻动页面一角,引导用户使用其著名的垂直页面滑动手势。

在吸引用户滑动操作方面,文字的方式起不到作用,这一点已被证实。


7.3、拖拽

在移动设备上,一般先要进入一个模式才能使用拖拽操作。比如编辑模式,或者长按。

在应用中,最常见的拖拽功能可见性是手柄。手柄常常在明确地进入编辑模式之后显示出来。

拖拽手柄适合用来排序列表项。

一些拖拽手柄默认可见,例如滑块控件上的手柄。

设计和配置类应用不只有拖拽移动,还拥有拖拽旋转和拖拽调整大小这样更复杂的拖拽交互。



反馈

8、反馈

8.0、反馈模式

反馈有各种形式,从简单的进度指示器和确认信息,到更为复杂的动画和特效。移动反馈模式包括错误提示、确认、系统状态。


8.1、错误提示

错误提示应该用直白而非代码式的语言表达出来,精确的指出问题所在,并给出建设性的解决建议。

最佳实践是在一页上突出显示错误提示。这种设计方案比模态对话框更好,因为模态对话框遮挡住了问题。


8.2、确认

在执行一项操作时,要提供确认。不要使用’愚蠢的对话框’反模式。要寻找不会打断用户操作流的提供确认反馈的方法。

将一个项目加入任何类型的列表中时都需要用户确认。可以通过动画显示一项内容被保存到什么地方去了,同样重要的是,显示此后可以在哪里找到保存的项。

行内反馈是一种很好的提供确认的设计模式。这种模式特别适用于表单,当提交无效数据时,会出发多个错误提示。


行内反馈也应该用于功能性的手势,比如滑动删除。

安卓滑动删除。安卓版滑动一封邮件会立即将其存档,这时典型的‘滑动执行操作’(swipe to perform)手势。行内反馈会显示这封邮件被存档了,同时提供撤销存档的选项。

iOS滑动删除。iOS系统的邮件是‘滑动显示’(swipe to reveal)手势的示例。滑动一封邮件时只显示可选择的操作,而没有执行任何操作。此时需要使用第二个手势--点击,才会存档邮件。这里不需要点击后的行内确认反馈。


另一种提供确认的方案是,使用toast通知。安卓系统中还可以使用snackbar,并提供一个撤销选项。

多状态按钮,就是在不打断用户操作流的前提下提供确认反馈的方法。

在完成一个事项后,比如下一个订单或提交一张表单后,通常应该提供更突出的反馈。因为这些事件常出现在流程的最后,所以这时可以使用全屏或对话框式的确认反馈。

(在执行操作后,提供确认反馈,但不要打断操作流。把确认元素设计成整体流程的一部分。)


8.3、系统状态

展示系统状态时,你应该清楚地让用户明白,你在向目标推进,而不是让用户等待加载画面。

好的设计方案让用户专注于进程,而不是加载画面。

例如:谷歌,加载页面从侧边滑出,让用户感觉内容会立刻加载进来,即时情况并非如此。这种过度动画实际上就是加载指示器。

例如:polar,采用构架页面的方式,构架页面本质上是一个空白页面,信息在该页面上逐步加载进来。

例如:sigfig,在初始化配置或注册时需要很长的等待时间,实时反馈每项任务的完成百分比,让用户知道应用的进程。

例如:smartr,在索引联系人时,进度条显示在页面上方,内容区域介绍产品功能。

如果是很长的进程,要提供一个取消选项。

你可能感兴趣的:(《移动端设计模式》学习笔记)