移动应用UI设计模式 7.2分
读书笔记 第三章,第四章
香蒲
  • 第 3 章表格和列表
    • 3.1 基本表格
    • 3.2 无表头表格…
    • 3.3 固定列表格的表格
    • 3.4 带有内容总览和数据的表格
    • 3.5 行分组表格…
    • 3.6 级联式列表
    • 3.7 带有视觉指示器的表格
    • 3.8 可编辑表格
  • 第 4 章搜索、分类和过滤
    • 4.1 搜索
      • 4.1.1 显性搜索…
      • 4.1.2 自动补全搜索
      • 4.1.3 动态搜索
      • 4.1.4 范围搜索…
      • 4.1.5 保存搜索记录并显示最近搜索内容…
      • 4.1.6 搜索表单
      • 4.1.7搜索结果/浏览结果
    • 4.2 分类
      • 4.2.1 屏内分类
      • 4.2.2 分类排序选择器…
      • 4.2.3 分类表单
    • 4.3 过滤…
      • 4.3.1 屏内过滤
      • 4.3.2 过滤容器…
      • 4.3.3 过滤对话框…
      • 4.3.4 过滤表单

第 3 章表格和列表

常见表格模式:

基本表格(Basic Table)、

无表头表格(Headerless Table)、

行分组表格(Grouped Row)、

固定列表格(Fixed Column)、

级联式列表(Cascading List)、

可编辑表格(Editable Table)、

带有视觉指示器的表格(Tables with Visual Indicator)、

带有内容总览和数据的表格(Overview plus Data)等。

3.1 基本表格

列数据有固定的表头,表格呈网格式布局。为表内的 行设定不同的颜色(这种形式也称为斑马纹),或者在各行之间用细线分割,都能提 升表格的可读性(见图 3-4)。

文字左对齐,数字右对齐。

3.2 无表头表格…

3.3 固定列表格的表格

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

3.5 行分组表格…

3.6 级联式列表

类似树形结构的层级信息。

iOS 将这种表格模式称为表格视图,它是一个在多行单列内显示数据的 UI 元素。

3.7 带有视觉指示器的表格

火花谱线(Sparkline)和图标能提升表格的信息显示效果

3.8 可编辑表格

电子表格软件

移动设备上的可编辑表格不适合用来输入大量数据,因为大 部分移动设备的键盘都不支持键盘导航

第 4 章搜索、分类和过滤

显性搜索(Explicit Search)、

自动补全搜索(Auto-complete)、

范围搜索 (Scoped Search)、

保存搜索记录并显示最近搜索内容(Saved & Recent)、

搜索标准 (表单)(Search Criteria (form))、

搜索结果(Search Result)、

屏内分类(Onscreen Sort)、

分类排序选择器(Sort Order Selector)、

分类表单(Sort Form)、

屏内过滤 (Onscreen filter)、

过滤容器(Filter Drawer)、

过滤对话框(Filter Dialog)、

过滤表单(Filter Form)。

4.1 搜索

4.1.1 显性搜索…

显性搜索要求用户执行明显的搜索操作并浏览搜索结果。其操作方式可以是点击屏 幕上的搜索按钮,如 Walmart 的设计(见图 4-2),或是按下键盘上的搜索键,如 Target 的设计(见图 4-3)。搜索结果通常显示在搜索栏下方。建议为显性搜索搭配 自动补全模式。

4.1.2 自动补全搜索

4.1.3 动态搜索

这种模式也被称为动态过滤。

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

程序会过滤屏幕上列出的内容项

【类似淘宝购物时的过滤,只留下相关选项。】

4.1.4 范围搜索…

在执行搜索之前,首先确定搜索条件的范围能够更容易、更快速地搜索到 想要的结果。

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

4.1.6 搜索表单

在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。

搜索航班和酒店

4.1.7搜索结果/浏览结果

只要执行了搜索操作,那么就要在同一屏内显示搜索结果,或在专用的屏幕内显示。 搜索结果可以显示为表格或列表,也可以在地图或卫星上显示,或者显示为缩略图。

延迟加载是一种常用技术,它可以在加载其他搜索结果的同时显示当前已找到 的结果,.....大部分应用的做法是,提供一个“查看更多结果”的按钮,或者自动加载更多结果。

4.2 分类

一点点常识加上用户 调查就足以找出最有效的默认分类模式。

  • 屏内分类
  • 分类排序选择器
  • 分类表单

4.2.1 屏内分类

分类项很少,点击一次就可以实现分类排序。

对于按照价格分类,为用户提供 2 种选择:升序 和降序。

4.2.2 分类排序选择器…

4.2.3 分类表单

很多应用都把分类和过滤功能整合在一屏内显示,通常称为提炼(Refine)。这是最为有效的分类模式,

4.3 过滤…

4.3.1 屏内过滤

不要把这种过滤模式用作主要导航,而应该用它来分组、过滤信息内容,详细内容

4.3.2 过滤容器…

过滤容器也可以用来显示过滤选项,它与屏内过滤一样高效。快速滑动或触摸操作 对象都能打开容器。

4.3.3 过滤对话框…

4.3.4 过滤表单

条件过滤器也称为谓语编辑器(Predicate Editor)或表达式生成器(Expression Builder),是一种高级过滤功能,常见于报表工具。

受表单的影响,在移动应用中创建条件过滤器非常困难,但 Roambi 在这一点却做得非常好(见图 4-32)。

【看不清楚是怎么操作的。】

不要在过滤器的设计上花费太多心思,简单的屏内过滤器或过滤容器通常就够用了。

0
《移动应用UI设计模式》的全部笔记 11篇
豆瓣
免费下载 iOS / Android 版客户端