1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

时间:2020-06-17   分类:交互设计    作者:网络   来源:网络整理   点击:137

iOS 人机界面指南精简版笔记之界面元素:Bars

最近仔细研读了苹果官网最新的设计规范。网上没有找到很满意的翻译版本,于是自己老老实实的啃了几遍官方文档,顺便把学习笔记输出给大家分享一下。

本文来自九分网络

阅读文章 >>

copyright 9fen.net

本文来自九分网络

www.9fen.net

值得注意的是,Views 中的 Alerts、Action Sheets、Activity Views 都属于模态视图(Popovers 比较特殊,可以是模态或者非模态的)。今天我们先把具有模态属性的各种视图作为一个合集进行分享。 九分网络

Modality 模态

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

www.9fen.net

九分网络

1. 什么是模态

copyright 9fen.net

模态是一种临时模式,独立于用户之前的正常操作流程,需要执行明确操作才能将其关闭。 本文来自九分网络

2. 模态的作用

内容采集来自9fen.net

帮助人们专注于某个任务或相关操作。 九分网络

确保用户接收到关键信息,采取行动。 copyright 9fen.net

iOS 13 及更高版本支持 Sheet 、Fullscreen 两种可自定义样式。

内容采集来自9fen.net

3. Sheet 卡片风格面板 本文来自九分网络

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

copyright 9fen.net

本文来自九分网络

卡片风格适用于非沉浸式模态内容,不要包含复杂任务。

本文来自九分网络

取消卡片的方式 copyright 9fen.net

从屏幕顶部向下轻扫 内容采集来自9fen.net

卡片内容滚到顶部时,从屏幕任意位置向下轻扫

九分网络

点击某按钮(取消、完成等)

内容采集来自9fen.net

4. Fullscreen 全屏模态 www.9fen.net

先前视图被完全覆盖,从而将视觉干扰降至最低,只能通过点击按钮关闭全屏模态视图。 九分网络

适用于沉浸式内容(视频、照片、拍摄),或复杂任务(标记文档或编辑照片)。

本文来自九分网络

5. 使用模态视图时应注意 内容采集来自9fen.net

不要滥用模态,模态会破坏用户心流,必要时才使用。

copyright 9fen.net

保持模态任务简单、轻量,模态任务不要包含多个层级。如果不得不包含子页面,则必须提供唯一、清晰的单线程路径,帮助用户完成任务。

本文来自九分网络

提供退出模态视图的按钮,提供「完成」、「取消」按钮,作为手势的替代。我的理解是,手势操作在界面上不可见,学习成本高。而按钮在界面上可见,可以给用户带来操作可控的安全感。 www.9fen.net

避免数据丢失,不管用户是使用手势还是按钮来关闭视图,如果该操作会导致用户生成的内容丢失,提示用户,并提供挽回办法。 内容采集来自9fen.net

不要在弹窗上面叠加卡片,应先关掉弹窗再展示卡片(消息对话框除外)。 copyright 9fen.net

明确当前任务,通过模态窗的标题(或其他文案)来帮助用户明确当前任务是什么。我的理解是,模态打断了用户之前的操作流,这会和用户预期的操作相冲突。如果不能明确提示用户当前任务是什么,用户会感到茫然甚至被打扰。 本文来自九分网络

使用合适的过渡动效,使用动效向用户暗示内容已发生转换。系统的默认动效是屏幕底部向上滑出,关闭时向下滑出。 九分网络

Alerts 消息对话框

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技 本文来自九分网络

copyright 9fen.net

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

copyright 9fen.net

copyright 9fen.net

消息对话框是对有关 App 或者手机状态的重要说明,通常需要用户执行操作反馈。

九分网络

慎用消息对话框。消息对话框属于模态视图,会破坏用户体验,仅可用在重要场景中,例如确认付费,具有破坏性的不可逆操作(比如删除),报错。注意消息对话框出现频率越高,用户越容易将其忽视。 内容采集来自9fen.net

消息对话框组成元素

本文来自九分网络

标题 copyright 9fen.net

说明性文字(非必须)

九分网络

一个或多个的按钮

www.9fen.net

可包含输入框,用来收集用户相关信息,注意消息对话框外观不可自定义。 九分网络

1. 文案相关注意事项

标题 copyright 9fen.net

标题越简短越好,尽量一行内说完。 copyright 9fen.net

试试仅使用标题就把情况解释清楚,而不需要额外说明性内容。单个字词的标题很难提供完整的信息,建议使用疑问句或者短句。

www.9fen.net

说明性文字 九分网络

说明性文案保持在两行以内,要确保在横屏竖屏方向上都能方便阅读而无需滚动。

copyright 9fen.net

说明性文字要使用完整句子,而不是短语。

www.9fen.net

语气

九分网络

避免听起来是指责,审判或侮辱。

www.9fen.net

只要使用了礼貌语气,否定且直接的态度,效果要好过正面但隐晦的态度。 内容采集来自9fen.net

按钮

九分网络

按钮文案清晰明确,尽量无需额外解释按钮含义。

本文来自九分网络

若必须提供操作指导,引用按钮时使用动词「点击」,例如「点击 XX 按钮」。如果是英文要注意,引用的按钮文案用大写字母,而不是引号引起来。 copyright 9fen.net

2. 按钮相关注意事项

九分网络

按钮规范系列!从四个方面详解「按钮位置」的设计方法

本文从经典的古腾堡原则出发,通过超多大厂的优秀案例告诉大家如何正确摆放按钮的位置。

www.9fen.net

阅读文章 >> www.9fen.net

copyright 9fen.net

copyright 9fen.net

数量

九分网络

1 个按钮用于通知场景,通常是 2 个按钮,3 个以上建议使用活动面板(Action Sheet)。 内容采集来自9fen.net

明确

九分网络

尽量使用与标题和消息直接呼应的动词,避免使用是和否。

九分网络

位置 本文来自九分网络

取消按钮在左侧,建议操作按钮在右侧。 www.9fen.net

破坏性的操作 本文来自九分网络

破坏性的操作要使用系统已有的「破坏性」格式。将「取消」按钮标记为默认按钮,使其变为粗体。 内容采集来自9fen.net

Action Sheets 动作面板

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

本文来自九分网络

本文来自九分网络

iOS 人机界面指南精简版笔记之界面元素:Views(上)--九分科技

内容采集来自9fen.net

内容采集来自9fen.net

标签: 优设 交互 界面设计 ui iOS 设计 Views 弹窗

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----