神刀安全网

【移动应用 UI 设计模式】读书笔记

这本书更类似于工具书,了解全文之后,根据需要进行细致研究,也可以作为索引来辅助设计。

要设计出优秀的移动应用,就要先了解目前不同操作系统下优秀的设计案例。本书介绍了当前所有移动操作系统下典型的设计模式,截取了这些系统下典型应用的界面设计,将其分为了以下10大类。

  1. 导航设计模式:主要导航和次要导航模式。
  2. 表单设计:通过表单实现良好的布局和内容输入。
  3. 表格和列表的设计:通过表格和表单简明扼要地显示最重要的信息。
  4. 搜索、分类和过滤:通过这些功能的易用性增强用户的主动性。
  5. 工具的设计:良好的工具设计能营造出直接交互的使用体验。
  6. 图表设计模式:让用户拥有控制大量数据内容的能力。
  7. 视觉吸引:吸引用户并促使其发现产品功能。
  8. 控制与反馈:帮助用户执行操作,并及时提供反馈。
  9. 帮助:真正为用户提供解决问题的方法,而不是告知用户问题是什么。
  10. 反模式:移动应用设计中应该避免犯的错误。

第1章 导航

主要导航模式:跳板式(Springboard)、列表菜单式(List Menu)、选项卡菜单式(Tab Menu)、陈列馆式(Gallery)、仪表式(Dashboard)、隐喻式(Metaphor)、超级菜单式(Mega Menu)。

次级导航模式:页面轮盘式(Page Carousel)、图片轮盘式(Image Carousel)、扩展列表式(Expanding List)。

1.1.2 列表菜单式

列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项,用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。

1.1.3 选项卡式

为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

1.1.4 陈列馆式

陈列馆式导航能很好地应用于用户需要经常浏览、频繁更新的内容。

1.1.5 仪表式

不要使用过多的仪表式导航。你需要开展研究才能决定应该对哪些关键量度采用仪表式导航。

1.1.7 超级菜单式

在选择导航模式之前,首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容,就可以使用选项卡之类的导航模式。

1.2.1 页面轮盘式

页面轮盘式导航可以很好地实现少量页面的导航。利用直观的指示器来表明总屏数和当前所处的位置。页面轮盘式导航通常用“滑动”动作实现操作。

1.2.2 图片轮盘式

图片轮盘式导航能很好地显示清新悦目内容,如艺术品、产品或照片等。无论是使用箭头、部分图片内容或是页面指示器(点),它都能提供良好的视觉化功能可见性,以此告知用户有更多的内容可以访问。

2.1 登录表单

登录表单应该只包括少量的信息输入:用户名、密码、操作按钮、密码帮助、注册选项等

不要自己“独创”登录表单,采用常见的设计方案,这样更易于用户登录。提供取回已忘记密码的方式。

2.2 注册表单

注册界面应该简洁明了,最好在一屏内显示完所有要填的信息,注册按钮应该显示在同一屏幕内。确保已注册用户能很容易地登录。

2.3 核对表单

把提升速度、效率和让用户放心作为设计目标。去掉不必要的输入域,减少页面和操作步骤。

2.4 计算表单

使用标准的表单设计和布局原则。如果可以,在同一页面内显示计算结果,位置尽量明显。

2.5 搜索表单

不要让太多的搜索选项吓到用户,把搜索条件控制在一页之内。采用能够通过手指,方便且快速操作的控制方式。

2.6 多步骤表单

告知用户当前所在的位置和将要去的地方。去掉不必要的输入域,最小化页面和操作步骤的数量。

2.7 长表单

不要人为地把表单划分成一些步骤来避免屏幕的滚动。坚决要去掉那些不必要的输入域。遵循特定操作系统中按钮布局的标准。

3.1 基本表格

不要使用暗色的网格线和垂直分割方式。文字左对齐,数字右对齐。一屏幕内显示的表格内容不宜过多。如果要在单个屏幕内显示大量信息,请采用其他方式。

3.2 无表头表格

每一宽行内最多显示三行信息。不太重要的细节内容使用较小、浅色的字体。不要自己猜测什么信息最重要,而要询问客户的意见,然后作出行之有效的设计。

3.3 固定列表格的表格

为固定的列设计比较醒目的样式,以提示用户,滑动操作能浏览更多的数据。

3.4 带有内容总览和数据的表格

表格内容总览应该显示在数据上方,且要一目了然。

3.5 行分组表格

在表格中为内容总结行设定与其他行不同的视觉效果。

3.6 级联式列表

使用较为宽泛的信息结构可以避免在应用内产生较深的层次(多于3层)。如果用级联式列表来导航用户自定义的信息结构,则可能无法避免产生很多界面层次。

3.7 带有视觉指示器的表格

使用那些用户能够迅速识别的视觉化指示器,去掉那些不必要的图标

3.8 可编辑表格

网络程序和桌面应用程序设计之间的权衡为可编辑表格提供了丰富的可参考经验。不要为大量数据输入使用可编辑表格,当需要有大量可编辑元素时,也不要使用这种表格模式。

第4章 搜索、分类和过滤

常见模式:显性搜索(Explicit Search)、自动补全搜索(Auto-complete)、范围搜索(ScopedSearch)、保存搜索记录并显示最近搜索内容(Saved & Recent)、搜索标准(表单)(Search Criteria(form))、搜索结果(Search Result)、屏内分类(Onscreen Sort)、分类排序选择器(Sort Order Selector)、分类表单(Sort Form)、屏内过滤(Onscreen filter)、过滤容器(Filter Drawer)、过滤对话框(Filter Dialog)、过滤表单(Filter Form)。

4.1.2 自动补全搜索

如果程序在显示搜索结果时有延迟,就要给出一些反馈。在搜索结果中突出显示用户输入的搜索内容。

4.1.3 动态搜索

对于有限的数据,如地址薄或个人媒体库,这种搜索模式非常有效,但它不太适合用来搜索海量数据。

4.1.5 保存搜索记录并显示最近搜索内容

保存搜索记录通常要执行额外的步骤来为搜索命名,以供后用;显示最近搜索内容的做法对搜索记录的保存比较模糊,且浮于表面。你应该考虑哪种方式最能满足用户需求。

4.3.4 过滤表单

不要在过滤器的设计上花费太多心思,简单的屏内过滤器或过滤容器通常就够用了。如果要用过滤表单,请参考优秀的表单设计案例。

第5章 工具

常见模式:工具栏(Toolbar)、重叠菜单(Overlay Menu)、情境工具(Contextual Tool)、内联操作(Inline Action)、调用操作按钮(Call to Action Button)、批量操作(Bulk Action)。

我和Bill Scott提出了富交互网络应用设计的6条原则。其中最核心的两条是:直截了当(Make It Direct)和轻量化设计(Keep It Lightweight)。这两条原则也同样适用于移动应用界面中的工具和操作设计。

“直截了当”指在输入域周围显示结果,界面应该直接反映用户的交互结果。

而“轻量化设计”则要求尽可能保持交互过程的轻量化。

5.1 工具栏

工具栏通常显示在屏幕底端,包含有屏幕级的操作。工具栏内的图标应该是用户熟悉、易于识别的,或者采用标签加图标的设计。

5.2 选项菜单

如果可能,采取直接交互式的设计方案。不要把导航隐藏在选项菜单中。如果某一屏只有一个操作选项,考虑使用调用动作按钮模式。

5.3 调用动作按钮

不要把主要操作隐藏在菜单中,也不能将其设计成无法识别的工具栏图标。一定要让其显而易见(良好的对比效果),不言自明(含义清晰的标签)。

5.4 情境工具

如果可能,采取直接交互式的设计方案。如果需要按钮,尽量将其放置在可操作对象的旁边。使用用户熟悉或带有文字标签的图标。

5.5 内联操作

如果可能,采取直接交互式的设计方案。操作应该布局在接近于可操作对象的位置。使用用户熟悉或带有文字标签的图标。每个对象最多只能有1~2种内联操作。

5.6 多状态按钮

多状态按钮非常适合一系列联系紧密、在有限屏幕空间连续执行内的操作。

5.7 批量操作

诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项,让用户可以退出编辑模式。

第6章 图表

常见图表模式:带过滤器的图表(Chart with Filters)、总览加数据式图表(Overv-iew + Data)、滚动预览图表(Scrolling with Preview)、数据点细节图(Data Point Details)、详细信息图(Drill Down)、缩放图(Zoom In)、数据透视表(Pivot Table)、火花谱线图(Sparklines)。

所有的图表模式都建立在基本图表的设计之上。最简单的图表应该包括标题、轴标签以及数据。数据应该显示为饼状图(Pie)、条形图(Bar)、柱状图(Coulmn)、面积图(Area)、折线图(Line)、气泡图(Bubble)、散点图(Scatter Plot)、子弹图(Bullet)、雷达图(Radar)、计量图(Gauge)或混合图表。根据图表的类型不同,或许还需要设计图例。

6.2 带预览窗口的图表

图表的特性取决于预览窗口是只读的还是可交互的。如果是可交互的预览窗口,使用较大的触摸对象更易于用户的操作。

6.3 总览加数据式图表

测试图表,看看用户是否能回答以下三个简单的问题:主题是什么?哪些信息最为重要?最重要信息的具体数值是多少?

6.5 详细信息图

吸引用户查看更多的数据。用面包屑式的导航(Breadcrumb)显示层级结构。

6.6 缩放图表

诱导用户旋转设备来以全屏方式查看图表,在用户转回设备时自动恢复导航。

6.8 火花谱线图

火花谱线图又称为微图表(Microchart),它是以小体积和高度密集的数据著称的信息图形。它用简单的方式,在较小的空间内呈现某些量的发展和变化趋势,如平均温度或股票市场的波动。(维基百科) 火花谱线图特别适合移动应用,因为它能提供数据的整体情况或变化趋势,却不像完整图表那么占空间

遵守火花谱线设计的惯例,让用户测试设计方案。结合火花谱线和详细信息图显示图表的所有细节信息。

第7章 视觉吸引

常见模式:对话框(Dialog)、提示(Tip)、使用向导(Tour)、视频演示(Demo)、幻灯片(Transparency)、首次使用引导(1st Time Through)、持续视觉吸引(Persistent)、可发现的视觉吸引(Discoverable)。

7.1 对话框

对话框的内容一定要言简意赅,确保用户可以通过其他方式访问程序的使用说明。

7.2 提示

提示要尽可能地接近它所指向的功能,保持内容的简洁,在交互开始时(也就是当用户触摸屏幕时)关闭提示。

7.3 使用向导

使用向导能很好地从用户使用目标的角度出发,突出应用的主要功能。兼顾内容简洁和视觉效果。

7.4 视频演示

视频演示可以展示应用的关键功能,也可以用来显示应用的标准使用流程。一定要提供常见的视频控制选项(停止、暂停、音量控制等)。

7.5 幻灯片

使用幻灯片模式时一定要恰到好处,不要因此把屏幕搞得的混乱不堪。一旦交互过程开始(也就是用户开始触摸屏幕),就移除幻灯片。

7.6 首次使用引导

一定要利用图像或其他视觉线索明确地将首次使用引导与其他内容区别开来(也就是说,不要为视觉吸引元素使用那些常规内容所用的颜色、字体大小)。

7.7 持续视觉吸引

保持持续视觉吸引元素的简洁。用图像或其他视觉线索清晰地将视觉吸引与其他内容区分开来(也就是说,不要使用常规内容所用的颜色、字体大小等)。

7.8 可发现的视觉吸引

对于可发现的视觉吸引,一定要取之有度,用之有节。最常见的这种视觉吸引模式是鼓励用户刷新数据的提示。

第8章 反馈与功能可见性

常见反馈模式:出错(Errors)、确认(Confirmation)、系统状态(System Status)。

功能可见性模式:触摸(Tap)、滑动(Flick)、拖曳(Drag)。

8.1 反馈

与反馈有关的可用性准则要求“向用户提供适当、清晰且及时的反馈,这样用户才能知道他所执行的操作得到了什么样的结果,才能了解系统的运行状态。”反馈的类型非常多,从简单的进度指示器、确认信息,到复杂的动画和界面效果。

8.2 出错信息

出错信息应该以纯文字的形式展现给用户(不要用代码),应该一语中的,并主动向用户提供解决办法。

用纯文字的形式提供解决问题的办法。保证错误信息清晰可见,在屏幕内显示错误信息,不要使用模式对话框。

8.3 确认

当用户执行某项操作时,提示确认信息,但不要打断用户使用产品的过程。

8.4 系统状态

告知用户系统的状态。为可能会持续较长时间的操作提供“取消”选项

8.5 功能可见性

功能可见性指某个对象向用户呈现出的可执行操作,例如抽屉的拉手或门上的把手。软件中的功能可见性包括:拖动手柄(Drag Handle)、卷起的页边(Page Peel)、诸如按钮和滑块之类的三维控制对象等

8.5.1 触摸

斜角和阴影等视觉设计技巧能让界面元素看上去是可触摸的

用常见的视觉效果来暗示可触摸的控制项。一定要小心谨慎地使用三维效果,泛滥的阴影和斜角效果会降低可读性。

8.5.2 滑动

通过页面指示器,或显示其余内容的一部分来告知用户,滑动屏幕可以发现更多内容。不要使用反应过慢的滚动条。

8.5.3 拖曳

拖动手柄的图标一定要易于识别。为拖动手柄设计一个突出的效果,以此告知用户这一对象是可操作的。

第9章 帮助

常见帮助模式:使用说明(How To)、界面元素说明(Cheat Sheet)、使用向导(Tour)。

移动应用程序应该易于用户学习,让用户快速掌握其使用方法。但是,无论应用如何与人的直觉相符,都需要提供一些帮助。

9.1 使用说明

在使用说明中综合使用屏幕截图、插图和文本等多种形式。

9.2 界面元素说明

界面元素说明是优良设计不可或缺的部分,但它可以让用户很快习惯产品的使用方法,也能提高使用效率。

9.3 使用向导

使用向导所包含的应该是应用中最关键的功能,最好从用户的使用目标开始。向导的设计应该简短、充满吸引力。

第10章 反模式

常见反模式:标新立异(Novel Notion)、隐喻错位(Metaphor Mismatch)、愚蠢的对话框(Idiot Boxe)、图表垃圾(Chart Junk)、按钮海(Oceans of Button)。

反模式也称为“陷阱”(Pitfall),通常指对于某些问题所采取的没有实质性革新的、糟糕的解决办法。人们已将其作为界面设计的一种模式进行了研究,以便在后续的设计中避免犯同样的错误,也希望在对无法工作的系统进行调查时也能识别出此类模式

10.1 标新立异

如果你想要对应用进行创新,请把关注点放在主要的功能和所提供的服务上,对于界面设计,最好还是遵循以往的设计惯例。如果你设计了一个自定义控制项,一定要对其进行严格的测试和修正,最终达到可用性的要求。

10.2 隐喻错位

隐喻错位可能会发生在较低级的层面,比如某个控制项或图标使用不当;也可能会出现于较高的层面,如应用的概念模型与用户的心理模型不匹配。

10.2.3 心理模型错位

从图标到控件再到概念模型,都可以通过隐喻提升用户体验。但不恰当的隐喻只能让应用难以理解、难以使用。

10.3 愚蠢的对话框

只有当心理状态与工具合而为一时,人们才能有更高的工作效率……没有足够的借口就打扰用户的工作,无异于愚蠢地迫使用户暂停,这是最具破坏性的行为。

不要打扰用户的使用过程,当用户执行了不可撤销的操作(如永久性删除)时,仅显示个确认窗口就行了。

10.4 图表垃圾

在图表和图形中,仅使用那些有助于传达所显示信息的视觉元素。

10.5 按钮海

用标准模式显示页面层级操作。为内容项的层级操作使用情境工具,而不是重复相同的按钮。尽量分离页面层级操作与导航元素。

附录

跳板式 利用网格布局各个同等重要的内容项,利用不规则的布局方式凸显某些项的重要性。视情况使用个性化和用户自定义选项。

列表菜单 列表菜单很适合用来显示较长或拥有次级内容的标题。使用列表菜单的应用应该在所有次级屏幕内提供一个选项,用以返回到列表菜单。通常的做法是,在标题栏设置一个带有列表图标或“菜单”字样的按钮。

选项卡 为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

陈列馆式 陈列馆式导航能很好地应用于用户经常浏览、频繁更新的内容。

仪表式 不要使用过多的仪表式导航,通过研究确定为哪些关键量度采用仪表式导航。

隐喻式 谨慎地使用隐喻式导航,蹩脚的模仿很可能造成10.1节出现的反模式。

超级菜单式 在选择导航模式之前,首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容,就可以使用选项卡之类的导航模式。

页面轮盘式 页面轮盘式导航能很好地应用于少量页面的导航。利用直观的指示器标示出总屏数和用户当前所处的位置。页面轮盘式导航通常用“滑动”手势进行操作。

图片轮盘式 图片轮盘式导航可以很好地展示清新悦目的内容,如艺术品、产品和照片等。利用箭头、部分显示的图片或页面指示器(点),提供视觉化的功能可见性,以此告知用户有更多的内容可以访问。

扩展列表式 扩展列表式导航能很好地逐步显示某个内容项的更多细节或选项。

登录表单 不要自己“独创”登录页面的设计,采用常见的设计方案,这样更易于用户登录。提供取回已忘记密码的方式。

注册表单 注册界面应该简洁明了,最好在一屏之内显示完所有要填的信息,把“注册”按钮放在同一屏幕内显示。保证已注册用户能非常容易地登录。

核对表单 把提升速度、效率和让用户放心作为设计目标。去掉不必要的输入域,尽量减少页面和操作步骤。

计算表单 使用标准的表单设计和布局原则。如果可以,在同一页面内显示计算结果,位置尽量明显。

搜索表单 不要让太多的搜索选项吓到用户,把搜索条件控制在一页之内。采用能够通过手指方便且快速操作的控制方式。

多步骤表单 告知用户当前所在的位置和将要去的地方。去掉不必要的输入域,最小化页面和操作步骤的数量。

长表单 不要人为地把表单划分成多个步骤来避免屏幕的滚动。坚决要去掉那些不必要的输入域。遵循特定操作系统中按钮布局的设计标准。

有表头的表格 不要使用暗色网格线和垂直分割方式。文字左对齐,数字右对齐。一屏幕内显示的表格内容不宜过多。如果要在单个屏幕内显示大量信息,请采用其他显示方式。

无表头表格 每一宽行内最多显示三行信息。不太重要的细节内容使用较小、浅色的字体。不要自己猜测什么信息最重要,而要询问客户的意见,然后作出有效的设计。

固定列表格的表格 为固定的列设计比较醒目的样式,利用滑动操作浏览更多的数据。

带有内容总览和数据的表格 表格内容总览应该显示在数据上方,且要一目了然。

行分组表格 在表格中为内容总结行设定与其他行不同的视觉效果。

级联式列表 使用较为宽泛的信息结构可以避免在应用内产生较深的层次(多于3层)。如果用级联式列表来导航用户定义的信息结构,则可能无法避免产生很多界面层次。

带有视觉指示器的表格 使用那些用户能够迅速识别的视觉化指示器,去掉那些不必要的图标。

可编辑表格 网络和桌面应用程序设计之间的权衡为可编辑表格提供了丰富的经验。不要为大量数据输入使用可编辑表格,当需要有大量可编辑元素时,也不要使用这种表格模式。

显性搜索 在输入域周围提供明显的操作按钮,并提供撤销搜索的选项。通过反馈告知用户搜索动作已执行

自动补全搜索 如果程序在显示搜索结果时有延迟,就要给出一些反馈。在搜索结果中突出显示用户输入的搜索内容。

动态搜索 对于有限的数据,如地址薄或个人媒体库,这种搜索模式非常有效,但它不太适合用来搜索海量数据。

范围搜索 根据数据集提供合理的搜索范围选项,3~6个范围选项足矣。用搜索表单实现高级搜索功能。

保存搜索记录并显示最近搜索内容 保存搜索记录通常要执行额外的步骤来为搜索命名,以供后用;显示最近搜索内容的做法对搜索记录的保存比较模糊,且浮于表面。你应该考虑哪种方式最能满足用户需求。

搜索表单 尽量减少输入域的数量。为特定的操作系统选择适当的输入控制。参考最佳的表单设计案例(对齐方式、标签、尺寸等)

搜索结果/浏览结果 标明已找到搜索结果的总项数。使用延迟加载,而不是分页显示的方式。设定一种合理的默认分类模式。

屏内分类 以明确的方式告知用户当前采用(生效)的分类选项。如果分类选项无法很好地与触发器按钮栏融合,考虑使用分类排序选择器。

分类排序选择器 根据操作系统的设计惯例选择控制搜索结果分类的方法,或使用不受操作系统影响的界面方案。要清晰地向用户表明当前采用的分类选项。

分类表单 在使用这种模式之前,应该首先考虑使用其他更为有效的分类选项触发器或分类排序选择器。

屏内过滤 过滤器选项的用词应该清晰无误、易于理解。向用户表明当前所用或起效的选择器是哪一个。不要为导航使用这种过滤模式,参见9.2.3节。

过滤容器 保持选项列表简洁,避免滚屏。如果列表较长或有多个过滤选项,考虑使用过滤表单。

过滤对话框 保持选项列表简洁,避免滚屏。如果列表较长或有多个过滤选项,考虑使用过滤表单

过滤表单 不要在过滤器的设计上花费太多心思,简单的屏内过滤器或过滤容器通常就够用了。如果要用过滤表单,请参考优秀的表单设计案例。

工具栏 工具栏通常显示在屏幕底端,包含有屏幕级的操作。工具栏内的图标应该是用户熟悉、易于识别的,或者采用标签加图标的设计。

选项菜单 如果可能,采取直接交互式的设计方案。不要把导航隐藏在选项菜单中。如果某一屏内只有一个操作选项,考虑使用调用动作按钮模式。

调用动作按钮 不要把主要操作隐藏在菜单中,也不能将其设计成无法识别的工具栏图标。一定要让其显而易见(良好的对比效果),不言自明(含义清晰的标签)

情境工具 如果可能,采取直接交互式的设计方案。如果需要按钮,尽量将其放置在可操作对象的旁边。使用用户熟悉或带有文字标签的图标。

内联操作 如果可能,采取直接交互式的设计方案。操作应该布局在接近于可操作对象的位置。使用用户熟悉或带有文字标签的图标。每个对象最多只能有1~2种内联操作。

多状态按钮 多状态按钮非常适合一系列联系紧密、在有限屏幕空间内连续执行的操作。

批量操作 诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项,让用户可以退出编辑模式。

带过滤器的图表 使用标准的UI过滤控制器以及过滤模式,参见第4章。动态更新图表数据,而不是扔给用户一个“应用”按钮。

带预览窗口的图表 图表的特性取决于预览窗口是只读的还是可交互的。如果是可交互的预览窗口,使用较大的触摸对象更易于用户的操作。

总览加数据式图表 测试图表,看看用户是否能回答以下三个简单的问题:主题是什么?哪些信息最为重要?最重要信息的具体数值是多少?

数据点细节图 网络应用的图表让人们形成了通过“指针悬停”操作查看细节的心理预期。你可以考虑通过“按下并持续”操作来显示数据点的详细信息,提供用户所需的更多内容。

详细信息图 吸引用户查看更多的数据。用面包屑式的导航显示层级结构。

缩放图表 诱导用户旋转设备来以全屏方式查看图表,在用户转回设备时自动恢复导航。

数据透视表 在一屏内显示数据透视图表的已选择项和选择结果。根据用户的选择动态更新内容。

火花谱线图 遵守火花谱线设计的惯例,让用户测试设计方案。结合火花谱线和详细信息图显示图表的所有细节信息。

对话框 对话框的内容一定要言简意赅,确保用户可以通过其他方式访问程序的使用说明。

提示 提示要尽可能地接近它所指向的功能,保持内容的简洁,在交互开始时(也就是当用户触摸屏幕时)关闭提示。

使用向导 使用向导能很好地从用户使用目标的角度出发,突出应用的主要功能。兼顾内容简洁和视觉效果。

视频演示 视频演示可以展示应用的关键功能,也可以用来显示应用的标准使用流程。一定要提供常见的视频控制选项(停止、暂停、音量控制等)。

幻灯片 使用幻灯片模式时一定要恰到好处,不要因此把屏幕搞得的混乱不堪。一旦交互过程开始(也就是用户开始触摸屏幕),就移除幻灯片。

首次使用引导 一定要利用图像或其他视觉线索明确地将首次使用引导与其他内容区别开来(也就是说,不要为视觉吸引元素使用那些常规内容所用的颜色、字体大小)。

持续视觉吸引 保持持续视觉吸引元素的简洁。用图像或其他视觉线索清晰地将视觉吸引与其他内容区分开来(也就是说,不要使用常规内容所用的颜色、字体大小等)。

可发现的视觉吸引 对于可发现的视觉吸引,一定要取之有度,用之有节。最常见的这种视觉吸引模式是鼓励用户刷新数据的提示。

出错信息 用纯语言的形式提供解决问题的办法。保证错误信息清晰可见,在屏幕内嵌入错误信息,不要使用模式对话框。

确认 当用户执行某项操作时,提示确认信息,但不要打断用户使用产品的过程。

系统状态 告知用户系统的状态。为可能会持续较长时间的操作提供“取消”选项。

触摸 用常见的视觉效果来暗示可触摸的控制项。一定要小心谨慎地使用三维效果,泛滥的阴影和斜角效果会降低可读性。

滑动 通过页面指示器,或显示其余内容的一部分来告知用户,滑动屏幕可以发现更多内容。不要使用反应过慢的滚动条。

拖曳 拖动手柄的图标一定要易于识别。为拖动手柄设计一个突出的效果,以此告知用户这一对象是可操作的。

使用说明 在使用说明中综合使用屏幕截图、插图和文本等多种形式。

界面元素说明 界面元素说明是优良设计不可或缺的部分,它可以让用户很快习惯产品的使用方法,也能提高使用效率。

使用向导 使用向导所包含的应该是应用中最关键的功能,最好从用户的使用目标开始。向导的设计应该简短、充满吸引力。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 【移动应用 UI 设计模式】读书笔记

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址