iOS 基本界面元素包括三大类,分别是 Bars(栏)、Views(视图)、Controls(控件)。之前跟大家分享了 Bars(栏),以及具有模态属性的部分 Views(视图),今天分享视图部分的其他样式。

往期回顾:


这里提醒大家,各种视图之间并不是互斥的关系,而是可以组合使用的,例如分隔视图中的主、副窗格都可以采用表格视图,滚动视图可基于 App 内置的网页视图呈现文本视图等。

Tables 表格

表格将数据以可滚动的列表形式进行展示,可以简洁有效地显示大量信息,特别适用于文本内容。

iOS 提供了三种表格样式:Plain 平铺、Grouped 分组、Inset Grouped 嵌入式分组。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

1. 表格宽度

表格过窄导致文本被截断或换行,表格过宽导致用户难以浏览阅读,且过度占用页面空间。

总之,表格过宽、过窄都会降低阅读效率。

2. 优先加载文本内容

在图片等加载较慢的内容呈现之前,优先加载表格框架和文本内容,用户可以立即获得有用的信息,同时提升了操作反馈响应速度,缓解用户在等待完整内容加载时的焦虑情绪。在一些场景中,在新数据展示出来之前展示旧数据也是有意义的。

3. 展示加载进度

加载动效可以让用户感受到 App 在正常运行。

4. 持续刷新内容

更新数据时不要改变当前展示位置(用户会感到失控),可以将新数据加入顶部或底部,同时提供指示器让用户跳转至更新位置,也可以提供手动刷新按钮。

避免将索引与右对齐控件结合在一起,两者都在屏幕右侧,控件距离太近可能导致误操作。

5. Tables Rows 表格行

iOS 人机界面指南精简版笔记之界面元素:Views(下)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

系统提供的表格样式都可使用图像元素,但这些图像元素会挤压大标题和副标题的展示空间。

6. 保持文案简短,避免被截断

被截断的文案内容增加了理解难度。(备注:人类在阅读时,大脑的识别模式是视觉化的,被截断的文案破坏了这种视觉化的完整性,详情可以了解《认知与设计》第四章:阅读不是自然的)

7. 使用自定义删除按钮

相比系统提供的删除按钮,自定义删除按钮更清晰明确,也更容易保持 App 内用户体验的一致性。

8. 行被选中后应有反馈

表格行在被点击的瞬间突出显示,之后紧接着会有其他反馈,例如切换视图,选中标记出现等。

9. 可自定义表格样式

依据需要呈现的数据类型,或者为了保持 App 外观的一致性,可以自定义表格样式。

Split Views 分隔视图

分隔视图可以同时展示两个窗格。每个窗格可以包含各种元素,包括导航栏,工具栏,选项卡栏,表格,合集,图像,地图和自定义视图。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

1. 分隔视图通常与可筛选的内容一起使用

当设备为竖屏方向时,主窗格可以覆盖辅助窗格,不使用时可以隐藏在屏幕外。这样可以为辅助窗格提供更多的内容展示空间。

2. 主、副窗格的布局比例

默认主窗格占屏幕 1/3,辅助窗格占比 2/3,也可以各自 1/2,但辅助窗格不能比主窗格要窄。

3. 主窗格中被选中内容突出显示

辅助窗格内容从属于主窗格,主窗格中被选中内容突出显示,有助于用户了解两块内容之间的联系。

4. 提供多种访问隐藏的主窗格的方式

在主窗格可以隐藏的布局中,允许用户使用轻扫手势或者按钮显示主窗格。

Scroll Views 滚动视图

滚动视图允许用户浏览大于屏幕可见区域的内容,例如文档、图片合集。当用户使用轻扫,滑动,拖动,点击和捏合手势时,滚动视图会跟随手势显示或缩放。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

滚动视图本身没有外观,但用户和页面交互时会显示滚动指示器。滚动视图可以和其他几种视图组合使用。分页(paging mode)也可配置为滚动视图,但滚动后切换到新页面,而非当前页面。

1. 关于缩放

如果你的 App 允许对滚动视图进行缩放,要设置合理缩放范围(上限和下限)。

2. 分页控制器

分页控制器可以展示包含页数和当前位置的信息。如果页面是分页模式,建议采用分页控制器,而不是滚动指示器,以免混淆。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

3. 不要在滚动视图中嵌套另一个滚动视图

滑动手势幅度大,用户可能会误触到另一个滚动视图。如果确实需要有两个滚动视图,要设置不同的滚动方向(一个横向,一个纵向),从而降低误操作概率。

Collections 合集

合集视图用来管理一组有序内容(例如照片集),展示效果可自定义,视觉上颇具有感染力。这种视图不强制采用严格的线性格式,因此特别适合显示大小不同的项目,通常非常适合展示图片内容。可以利用背景和其他视觉元素,在视觉上区分内容分组。(备注:可以参考格式塔心理学)

iOS 人机界面指南精简版笔记之界面元素:Views(下)

1. 合集视图可支持交互和动效

默认情况下,点击以选中,长按以编辑,轻扫来滚动。动效可以在内容插入、删除、重新排序时使用。可以自定义其他手势和动效。

2. 尽量使用标准的行布局或者网格布局

用户在这种布局下更容易和内容交互。注意留有足够的空隙,避免交互内容之间拥挤和重叠而导致误操作。

3. 文本内容建议使用表格视图

以可滚动的列表形式展示文本,便于用户浏览阅读。

4. 谨慎使用动态布局

随时更改的布局会让用户失去控制感。

Image Views 图像视图

图像视图展示单个图像或动画序列。背景可以是透明或者不透明的。图像可以被拉伸、缩放、调整大小和固定到指定位置。图像模式默认是非交互式的。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

尽量确保动画序列中的所有图像尺寸一致

最好对图像进行预缩放。系统执行缩放时,所有图像在具有相同尺寸和形状的情况下效果最好。

Text Views 文本视图

文本视图展示多行内容,高度不限,当内容扩展到视图之外时可以滚动(和滚动视图组合使用)。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

1. 保持文本清晰易读

尽管可自定义文本字体、颜色、对齐方式,但保持内容的可读性至关重要。建议支持动态类型,这样当用户更改设备上的文字大小时依旧可以保持文本清晰易读。另外还应该测试在启用辅助功能后的展示效果(例如文本加粗)。

2. 显示适当的键盘类型

为了简化数据输入,应对根据字段类型调用对应键盘类型。以下是我截图的一些键盘类型,可以参考。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

Web Views 网页视图

网页视图在 App 中可显示丰富的网页内容,例如嵌入式 HTML 和网站。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

1. 启用前进和后退导航

系统默认禁用前进和后退导航,如果有很多页面,那么要启用前进和后退导航,并提供相应控件。

2. 避免使用网页视图来构建Web浏览器

使用网页视图的目的是让用户在不离开 App 的情况下短暂访问网站。Safari 是 iOS 提供的浏览网络的主要方式,不必要并且不鼓励 App 中复制 Safari 的功能。

Pages 页面视图

页面视图的控制器提供了内容页面之间(文档、书籍、记事本、日历等)线性导航的方式。

默认有滚动、翻页两种页面切换方式。

iOS 人机界面指南精简版笔记之界面元素:Views(下)

提供非线性导航方式。可以的话,允许用户跳转想去的位置,而不需一页一页的翻过去。

欢迎关注作者的微信公众号:「能呆书房一整天」

iOS 人机界面指南精简版笔记之界面元素:Views(下)

点赞 7
收藏 50
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏