移动端ui设计规范
APP架构
启动
提供启动图
合适的方向启动
快速进入APP
重启前恢复原状态
为新用户提供指导
增强趣味性
加载
明确加载状态
至少要有一个加载的图标,可以表达正在发生的状态。更好的方式是:使用类似进度条的形式,显示明确的进度,让用户可以判断自己大概需要等待多长时间。
尽快显示内容
在用户看到屏幕内容之前,不要让用户干等着加载。你可以使用占位符文本、图形或动画来告诉用户,这个区域的内容还没加载完成。在加载出内容后直接代替这些占位符元素。后台也要尽可能使用预加载,例如在播放动画或用户正在操作导航栏的选项卡时,后台预先加载出来即将播放和显示的内容。
自定义加载页面
虽然系统默认的进度指示器可以用,但有时会感觉它们脱离了主题,与APP的风格甚至显得格格不入。设计师可以考虑用自定义动画亦或是与APP风格相匹配的元素来设计,会使用户有更沉浸式的体验
趣味性加载动画
比如很多游戏、视频APP等,都可以放一段有趣的动画或占位图作为加载提示,缓解用户焦急的心情。(其实就是障眼法的意思)
缺点是:比较耗内存,一般游戏APP里用的比较多,普通的APP很少看到用动画作为加载方式的,因为现在网络越来越快,用户只想尽快看到APP内的内容。
导航
路径清晰,最少点击
用户应该知道他们在APP中的位置以及如何到达下一个目的地。无论导航风格如何,操作路径必须符合逻辑,可预知易于遵循。
一般情况下,一个页面只给用户提供一个入口。如果他们需要在多个场景下看到一个页面内容,请考虑使用操作表、警示框、弹出式气泡或模态视图。
转场之间切换流畅
让用户以最小的阻力在页面之间跳转。例如,你可以让人们从页面侧面滑动以返回上一个页面。
导航栏联通层级结构
为你的APP设计一个信息架构,在这个架构中,只需要最少的点击、最少的滑动和最少的页面数量便可以访问相应内容。
标签栏展示对等功能
使用标签栏显示对应类别的内容或功能。标签栏可让人们快速轻松地在不同类别之间切换。
尽量用标准导航控件
尽可能使用标准导航控件,例如页面控件,标签栏,分段控件,表视图,集合视图和拆分视图。用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你的APP。
适时使用页面控件
页面控件能清楚地传达可用页面总数和当前页面位置。天气APP就是使用页面控件来展示不同地理位置的天气情况。
使用导航栏贯穿层级结构
导航栏的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。
模态
明确说明加载状态
只有需要用户集中注意力在做出选择或执行与当前页面不同的任务时,才能创建模态体验。模态体验使用户脱离当前的页面并需要用户主动关闭,因此只有当创建模态体验有明确的好处时才使用它。
重要操作使用Alert
通常情况下,弹出警示框意味着出现了问题。因为警示框会中断体验,需要点击才能关闭。所以要让用户认为打断是有必要的,这一点很重要。
任务必须简单集中
不要在你的APP中创建另一个APP。如果一个模态任务太复杂,那么当用户进入模态视图时,他们可能会忽略他们之前被暂停的任务。
尤其谨慎创建太多层级结构的模态任务,因为用户可能会在多个视图中迷失不知道怎么返回或忘记怎么返回。如果模态任务必须包含子视图,请提供清晰的返回路径和完成路径。
除非完成任务,否则不要使用“完成”按钮。
关闭按钮是必须的
例如:你可以使用“完成”或“取消”。至少有一个按钮以确保辅助技术访问模态视图,并代替手势关闭模态视图。
必要时进行关闭确认
无论用户使用手势还是按钮来关闭模态视图,如果该操作可能导致用户生成内容丢失,请提供解释情况的操作表,并为用户提供解决方法。
样式外观风格统一
例如,当模态视图包含导航栏时,它应该采用与APP导航栏相同的外观。
为模态视图的展示提供一个合适的过渡方式
使用与APP风格统一的过渡样式,增强用户对内容转变的认知。iOS默认的过渡方式是:模式视图从屏幕底部向上滑入,被关闭时向下滑出。注意在整个APP中使用统一的模态转换样式。
通常为模态任务设置一个标题
当用户进入模态任务时,他们会离开之前的页面,因此最好使前后操作清晰连贯。你也可以在视图的其他部分中,提供更全面描述任务或指导的文本。
请求许可
需要用到时才请求
导航栏的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。
解释需要的原因
在系统的权限请求警示框中提供自定义文本(示例用途字符串)。使用简短和具体、礼貌的文案,让用户感觉轻松,没有压力。文案中没有必要包含APP的名称 - 因为系统可以自动识别你的APP并带入名称。
文案简短具体、礼貌
必要时才请求位置
在获得位置位置信息之前,检查系统以查看是否已启用位置服务。如果已经开启, 你可以在用户真的需要用到该功能时再进行警示框提醒,甚至可以直接省略掉警示框。
尽量不在启动时请求
如果你的APP显然只有获得他们的个人信息才能正常运行,那么用户也不会对这个请求感到很反感。
使用系统标准警示框
你可以在标准的权限警示框中自定义文本,但不要直接复制标准警示框行为的提示文本和外观样式。
设置
尽可能先向系统请求
如果APP需要有关用户、设备或环境的信息,请尽可能向系统请求,而不是直接询问用户。
例如:如果你想要知道用户的邮政编码来提供本地选项时,可以向用户请求获取他们的位置。如果用户拒绝访问其当前位置,则优雅地退回到手动输入。如滴滴APP
设置尽量放次级页
APP的的主页是用来放置关键内容或者常用选项的。次级页面更适合放置偶尔才会更改的选项。
不常用的放系统设置
系统的“设置”APP是更改系统配置的中心位置,但用户必须离开你的APP才能到达“设置”APP。能在APP中直接调整设置会更方便。
去设置的快捷方式
如果APP包含引导用户到“设置”的文本,例如:“转到设置> MyApp>隐私>位置服务”,则会提供一个自动打开该位置的按钮。
扩展
主屏幕快速操作
一定是很重要的操作
标题简短、明确
提供可识别图标
不可代替导航
不显示通知
保证操作可预知
小组件
确保良好的浏览体验
快速显示内容
足够的边距和间隔
避免自定义背景
控件
按钮
标题使用动词
必要时添加边框/颜色
简短的标题
统一外观、规范
进度指示器
进度条优于加载器
保持加载器的转动
适时提供提示信息
可量化时间的进度条
保证进度条的准确性
自定义进度条的样式
选择器
可预测、合理有序的值
当前页显示选择器
避免过多的值
指定分钟增加间隔
分段控件
限制段的数量
让段内容大小一致
勿同时包含文本和图像
自定义分段控件
开关
开关的视觉与APP协调
仅在列表中使用开关
避免添加说明标签
管理界面的可用性
文本输入框
提供必要的提示
必要时显示清除按钮
与图标搭配显示
弹出合适类型的键盘
编辑菜单
为当前页提供相应命令
编辑菜单的位置可调
不要使用“编辑”按钮
确保编辑操作可关闭
减少自定义命令
自定义的确保标题简短
情境菜单
一致采用情境菜单
仅采用展示最常用命令
用子菜单管理复杂性
将常用命令放在顶部
视图
列表
快速显示内容
加载时配以指示器
文字言简意赅
给予相应的反馈
在对应的视图中切换
可自定义行格式
警示框
尽量少用警示框
标题明确、简短
使用1~2个按钮
突出破坏性按钮
提供“取消”按钮
可通过Home键取消
活动视图
设计简约的图标
标题明确、简单
选择合适的活动
通过功能按钮显示
操作表
提供“取消”按钮
突出破坏性按钮
避免操作表滚动
避免操作项太多
交互
认证
尽量延迟登录
如果不能马上做任何有用的事情,用户经常会果断放弃使用该APP。在他们放弃之前,让他们有机会爱上你的APP。
例如:在购物APP中,让用户在进入后立即浏览商品,并且只有在他们准备要购买时才需要弹出登录。而在一些媒体流APP中,让用户在登录之前也可以轻松浏览并查看APP里面的内容。
提供注册的入口
如果你的APP需要身份验证,请在登录页上显示简短、友好的说明,说明验证的原因及其好处。
此外,请记住,并非每个使用APP的人从一开始就拥有帐户。请务必说明如何获取账户,或提供简单的注册方式。
密码自动填充
此功能可自动生成并填写密码和安全代码,以便人们在验证上花的时间更少。所有APP都应支持此功能。
说明身份验证的益处
如果你的APP需要身份验证,请在登录页上显示简短、友好的说明,说明验证的原因及其好处。
此外,请记住,并非每个使用APP的人从一开始就拥有帐户。请务必说明如何获取账户,或提供简单的注册方式。
Face ID和Touch ID
尽可能支持生物识别身份验证
Face ID和Touch ID是用户相信安全、熟悉的身份验证方法。如果用户启用了生物识别身份验证,你可以先假设他们了解其工作原理,了解其便利性,并且希望尽可能使用它。
请记住,用户也可能会选择在其设备上禁用生物识别身份验证,因此你的APP应准备其他备选方案。
默认一种方式对用户进行身份验证
用户不用选择具体哪一种方式进行身份验证,这是最直观的。只需给他们一个选项,比如Face ID,然后提供替代登录方案。
例如:若在初始方法失败时,将用户名和密码登录的方式作为后备方案。
仅在响应用户操作时启动身份验证
显示操作(如点按按钮)可确保用户进行身份验证。例如:在Face ID的情况下,用户可能需要面向相机。
明确描述身份验证方法
例如:使用Face ID登录APP的按钮标题应为“使用Face ID登录”,而不仅仅是“登录”二字。
准确参考认证方法
请勿在支持Face ID的设备上引用Touch ID。同理,请勿在支持Touch ID的设备上引用Face ID。检查设备的功能并用适当的文字说明。
一般来说,不要在APP中提供选择生物识别身份验证的设置(开关)
如果系统中启用了生物识别身份验证,则只需假设用户在你的APP里也是想使用它的。
如果你单独在APP做一个生物识别身份的选择开关,则用户可能会看到这样一种状态:当生物识别身份认证在系统内被真正禁用时,APP设置里却显示为已启用。
请勿使用图标来标识系统身份验证功能
当用户看到类似于系统的Touch ID(指纹)和Face ID图标时,他们会认为应该进行身份验证。使用图标来标识身份验证功能会产生不一致并导致混淆,尤其是当图标上色、以大尺寸显示并脱离上下文时。
手势
使用标准手势
当用户看到类似于系统的Touch ID(指纹)和Face ID图标时,他们会认为应该进行身份验证。使用图标来标识身份验证功能会产生不一致并导致混淆,尤其是当图标上色、以大尺寸显示并脱离上下文时。
避开屏幕边缘手势
根据设备的不同,屏幕边缘手势可以访问主屏幕,应用程序切换器、通知中心、控制中心和Dock等。用户需要依靠这些手势方便访问设备中的每个APP。
在极少数情况下,像游戏这样的沉浸式APP自定义的屏幕边缘手势可能需要优先于系统的屏幕边缘手势 - 第一次滑动调用自定义的APP手势,第二次滑动调用系统手势。应谨慎实施此行为(称为边缘保护),因为这会让用户更难以访问系统级的操作。
提供快捷手势
尽可能提供一种简单、可见的方式来导航或执行操作,即使这可能意味着需要额外的点击。
许多系统APP的导航栏中,都包含一个清晰且可点击的返回按钮。但是用户也可以通过从屏幕侧面滑动来返回上一页。在iPad上,用户还可以通过按Home键或使用四指捏手势退出主屏幕。
多指手势增强体验
虽然同时涉及多个手指的手势并不适合每个APP,但它们可以丰富某些APP的体验,比如游戏和绘图APP。例如:游戏APP中可以同时操作控制杆和发射按钮。
标准手势
用户通常希望以下标准手势在整个系统和每个APP中的工作方式和含义是相同的。
1. 点击(Tap)
激活按钮或者选择某个对象
2. 拖动(Drag)
把一个元素从一边移到另一边,或者在屏幕内拖动某个元素
3. 滑动(Flick)
快速滑动或平移
4. 横扫(Swipe)
当用一根手指横扫时,可以用来返回到上一个屏幕、呼出在分屏视图控制器中的隐藏视图、在列表中显示“删除”按钮、或者在预览中呼出操作列表。在iPad上用四根手指横扫时,可在APP之间切换。
5. 双击(Double Tap)
放大居中的内容或图片,或缩小已经放大的图片
6. 捏合(Pinch)
向外张开时放大当前内容,向内捏合时缩小当前内容
7. 长按(Touch and Hold)
在可编辑或可选择的文本中执行长按时,显示编辑光标定位的放大视图。在某些视图(例如集合视图)中执行长按时,则进入重新排列项目的模式。
8. 摇晃(Shake)
撤销或重做
9. 旋转(Rotate)
旋转图像或视图
信息输入
尽量选项代替输入
尽量提高信息输入的效率。例如:考虑使用选择器或列表进行选择,而不是直接输入文本字段,因为提前设定好选项供用户选择比让他们直接输入信息要容易得多。
从系统获取信息
不要强迫人们提供那些本可以自动获取,或是在用户许可范围之内的信息。例如:联系人或日历信息。
合理的默认值
在可能输入的范围内,尽量提供一个合理可靠的默认值。合理的默认值会大大缩短用户做出决定的时间,同时加快整个流程进行。
填完才可下一步
在激活“下一个”或“继续”按钮之前,请确保所有必填项都有值。利用按钮的外观状态作为提示,告诉用户可以进行下一步了。(如按钮被激活后高亮显示)
动态验证信息有效性
在用户填完冗长的信息后,再使其返回去更正错误会很令人沮丧的。尽可能的在用户输入信息后立即进行字段值检查,以便用户能及时发现并更正错误。
只有在必要时才需要必填字段值
只有系统运行真正必需的信息才需要使用必填字段。
设计简单的值列表导航
尤其是在列表和选择器中,必需能很简单地选择一个值。可以考虑将值列表按首字母排序或是其它逻辑排列,以便于加快用户浏览和选择的速度。
在输入栏中显示提示以辅助说明
当输入栏没有其他文本时,可以用占位符文本,比如:“电子邮件”或“密码”。当占位符文本已经足够说明时,不要再用单独的标签文字来描述。
声音
使用系统音量视图
音量视图是用于调节音量最好的界面控件。这个视图是可自定义的,包括音量层级的滑块,甚至包括替音频输出重新选路由的控件。
短音/震动用系统声音
必要时对声音分类
不同的音频类别都可以用静音开关静音、与其他音频混响、或在APP在后台时播放。根据音频类别的含义和当前设备的音频状态选择一个类别,并将其分配给你的音频对话。例如:非必要情况下,请不要阻止用户听来自其他APP的音乐。
一般情况下,最好避免在APP运行时更改音频类别,除非APP需要经常录制并马上播放音频。
中断后及时恢复
有时,当前正在播放的音频会被来自其他应用的音频中断。暂时性干扰(比如来电铃声)被认为是可恢复的。永久性干扰(比如由Siri打开的音乐播放列表),被认为是不可恢复的。
当APP正在播放音频发生暂时性干扰而中断播放,在中断结束后,应立即恢复播放。例如:在播放配乐的游戏和播放音频的媒体应用,都应该恢复声音的播放。
允许选择输出设备
用户经常需要选择不同的音频输出设备。例:他们可能希望通过客厅立体音响、汽车收音机或Apple TV来听音乐。请支持这个功能,除非你有令人信服的理由。
不要自定义声音控件
用户希望声音控件在所有APP中都能保持一致。永远不要重新定义声音控件。如果你的APP不支持某些控件,那么不对他们做出响应即可。
触觉
在触觉和触发器之间建立清晰的因果关系
理想情况下,用户应当知道你的APP为什么会播放触觉模式。如果一个触觉无法加强这种因果关系,那么它可能会让人感到困惑,而且似乎是无缘无故发生的。
触觉反馈一致性
当APP中的视觉、听觉和触觉反馈协调一致 - 就像它们在物理世界中一样 - 这样的用户体验更加连贯,看起来更自然。
避免过度使用触觉
例如:当触觉提供持久的价值时使用触觉模式;使用它们来增加新鲜感,会让你的APP看起来花哨。此外,可以在少量重要的、结果性的交互中添加触觉。
若为大量且琐碎的交互操作添加触觉的话,则会让人头晕目眩。
始终如一地使用触觉
触觉反馈的一致性有助于用户在某些触觉模式和某些体验之间建立触觉关联。
例如:如果你的APP在游戏角色未能完成任务时播放特定的触觉模式,用户则会学习将该触觉模式与否定的结果关联起来。如果你再使用相同的触觉模式来反馈获得肯定的结果,比如任务完成,那就会使用户感到困惑。
避免影响其他体验
有时,触觉在偶尔体验时会感觉恰到好处,但在如果经常遇到让人烦恼。避免设计产生扩展和重复触觉反馈的体验。
通常情况下,最好的触觉体验应该是用户可能根本没有意识到的,但是当它被关闭时却会意识到。
一定要测试APP中的触觉
不同的人对触觉有不同的偏好和敏感程度,因此你需要尽可能找更多的人测试触觉。
使触觉成为可选的
如果用户愿意,让他们可以选择关闭触觉或者使触觉静音,并确保他们在没有触觉模式的情况下依然可以很好的享受你的APP。
在游戏APP中,可以考虑自定义触觉来增强玩家体验
除了在玩家与物品、控件互动时播放触觉,你可能会想在游戏中交流事件的时候播放触觉。例如:触觉可以增强实质性的体验 - 比如碰撞或打击或微妙的体验 - 就像是脚步声或迫在眉睫的危险。
留意播放触觉可能会影响其他用户体验
通过设计,触觉产生足够的物理力量,让用户感觉到设备的振动。确保触觉不会破坏涉及相机、陀螺仪或麦克风的用户体验。
动效
栏
导航栏
不要放太多的控件
使用标准返回按钮
提供备选的文本标签
可使用分段控件
标签栏
承载APP的层级结构
数量控制在3~5个
确保每一个标签可用
图标视觉上平衡统一
在对应的视图中切换
可用红色椭圆标记
工具栏
提供相关工具栏按钮
选择图标or文本标题
避免使用分段控件
文本按钮足够的间隔
搜索栏
提供“清空”按钮
“取消”按钮视情况定
提供搜索的提示
提供快捷方式
范围栏优化搜索范围
搜索尽量使用搜索栏
状态栏
不要自定义状态栏
适时选择深浅状态栏
状态栏背后避免交互
全屏内容隐藏状态栏
图标和图片
图标设计
8px-by-8px网格
网格可以保持线条锐利,并确保内容在所有尺寸下尽可能清晰,不需要再进行修饰和锐化。将图片边界紧贴网格边缘,以最小化缩小时可能会出现的半像素和模糊细节。
保存为PNG格式
通常,对位图/栅格图稿使用去隔行PNG文件。PNG支持透明度,因为它是无损的,被压缩也不会模糊重要细节或改变颜色。对于需要阴影、纹理和高光等效果的复杂图标/图片来说,PNG是一个不错的选择。
将照片用JPEG格式。它的压缩算法使它比PNG格式可以产生更小的尺寸,并且在照片中更难辨别伪像。但是,照片般逼真的APP图标看起来最适合用PNG。将PDF用于需要高分辨率缩放的字形和其他平面矢量图稿。
对于不需要全24位颜色的PNG图形,请使用8位调色板
使用8位调色板可以在不降低图像质量的情况下让文件更小。此调色板不适用于照片。
提供备选的文本标签
备选文字标签在屏幕上不可见,但它们让解说者可以直观地描述屏幕上的内容,使视力障碍人士更容易导航。
优化JPEG大小和质量
可以压缩大多数JPEG文件,而且生成的图像质量也不会被降低。即使是少量压缩也可以节省大量磁盘空间。
尝试对每个图像进行压缩设置,以找到产生可接受结果的最佳值。
应用图标
单一焦点、清晰简约
美观、易识别
不要使用透明度
尽量不使用APP名称
不同壁纸下测试图标
切图保证边缘直角
自定义图标
统一样式规范
避免包含文字
提供备选文本标签
颜色指示图标交互性
高辨识度、简约
确保图标清晰易读
启动屏
尽量接近首屏内容
避免有文字(国际化)
弱化启动
避免广告
视觉
适应性布局
默认方向清晰易读
用户没有必要通过水平滚屏来阅读重要文本,或者放大才能查看主要图像,除非用户自己选择改变尺寸(翻转屏幕)。
保持对齐、外观统一
通常,具有相似功能的元素应该看起来是相似或者统一的。
尽量同时支持横纵向
用户更喜欢在不同的方向使用APP,因此最好是你能能够满足用户这种期望。
确保充足的点击热区
对于所有控件,尽量保持最小可点击区域为44pt x 44pt。
多设备预览效果
你可以使用模拟器(Xcode附带)预览你的APP,来检查裁剪以及其他布局问题。如果你的APP支持横向模式,不管设备是左旋转还是右旋转,都要确保你的布局看起来很棒。全屏iPhone不支持颠倒的纵向模式。有些特例(如彩色大图),最好能在实际设备上预览。
适应文本大小的更改
用户希望大多数APP在设置中选择不同的文本大小时都能做出响应。若要适应某些文本大小的更改,你可能需要调整布局
使用视觉分量和平衡来传达重要性
大的元素吸引眼球,而且看起来比较小的元素更重要。较大的元素也更容易点击,这对于处在极易分散用户注意力环境下的APP尤为重要,例如用户在厨房或健身房。
通常,将主要内容或元素放置在屏幕的上半部分中,并且在从左到右的读取上下文中 - 靠近屏幕左侧。
保持对齐让用户浏览更简单,并传达组织和层级关系
对齐使APP看起来整洁有序,有助于用户在滚动时集中注意力,并使查找信息变得更加容易。缩进和对齐还可以表明内容之间的关系。
在较大的设备上显示文本时,应留有可读性边距
这些边距使文本行足够短,以确保舒适的阅读体验。
适应环境的变化
在上下文变化期间确保聚焦在当前内容
内容是APP中优先级最高的。在环境变化时改变重心(或焦点)可能会令人迷茫和沮丧,并且可能让用户觉得他们失去了对APP的控制。
避免不必要的布局更改
当有用户旋转设备时,整个布局不必更改。例如,如果你的APP以纵向模式显示图像网格,则不必在横向模式下显示与列表相同的图像。相反,它可能只需要调整下网格的尺寸。试着在所有情况下保持可比较的体验。
如果你的APP必须以单一方向运行,请同时支持这两种变体
a.无论用户是向左还是向右旋转设备,都应该支持在横向模式下运行APP。b.仅在纵向模式下运行的APP,应在用户将设备旋转180度时将其内容旋转180度 - 除了iPhone X,不支持倒置纵向模式。
如果当用户将设备放在错误的方向时,你的APP并没有跟着自动旋转,他们会本能地知道旋转到正确方向。你不需要另外告诉他们。
根据上下文自定义APP对旋转的响应
例如:通过旋转设备让用户移动角色的游戏,可能不应该是在游戏过程中切换方向。但是,它可以根据当前方向显示菜单和介绍序列。
确保你的APP能在iPad上运行,而不仅仅在iPhone上运行
用户可以灵活地在任何类型的iOS设备上运行您的应用。即使你希望大多数人在iPhone上使用您的APP,但界面元素仍然应该在iPad上是可见且可用的。
如果你的APP的某些功能需要特定的iPhone硬件(如3D Touch),请考虑在iPad上隐藏或禁用这些功能,并让用户使用其他功能。
在复用现有图稿时请注意宽高比差异
不同的屏幕尺寸可能有不同的宽高比,导致图稿出现裁剪模式、信箱模式或邮筒模式。确保重要的视觉内容保持在所有显示尺寸的视图中。
品牌
与APP设计相融合
用户是用你的APP来娱乐、获取信息或完成任务,而不是观看广告。为了获得最佳体验,请将你的品牌巧妙地融入到APP的设计中。例如:在整个界面上下文中贯穿APP图标的颜色,就是一个很好的方法。
避免过度设计
最重要的是,让你的APP看起来像一个iOS应用程序。确保它直观、易于导航、易于使用,并专注于内容。即使你的APP在其他平台也可以使用,也要避免通过过分关注一致的品牌却削弱了你的设计。
遵循内容,而非营销
在屏幕顶部显示一个持久栏,除了显示品牌资产之外什么也不做,这意味着用户查看内容的空间变小了。相反,请考虑使用尽量将干扰降到最低来呼应你的品牌。例如:使用自定义颜色方案或字体,或巧妙地自定义背景。
避免APP中显示LOGO
不要在你的APP中显示Logo,除非对于上下文是很有必要出现的。尤其是导航栏中要禁止,因为说明性的标题对用户会更有用。
字体排版
突出重要信息/内容
使用字体粗细、大小和颜色来突出APP中的重要信息/内容。
尽量使用同一种字体
混合几种不同的字体可能会使APP看起来支离破碎或者很随便。尽可能只使用一种字体,以及尽可能少的进行字形变化和字体大小变化。
使用内置文本样式
内置的文本样式使你的APP在展示不同内容的基础上,同时保持最佳的易读性。这些样式是基于系统本身各种优势特征实现的,例如动态类型,它可以自动调整每个字体大小。
确保自定义字体清晰易读
iOS上支持自定义字体,但通常会很难阅读。除非你的APP对自定义字体有强烈的需求。例如:用于品牌宣传或创建沉浸式的游戏体验,否则最好还是坚持使用系统字体。如果一定要使用自定义字体,请确保它易于阅读,即使是小字号也是一样。
术语
使用熟悉易懂的字/词
例如:色盲人可能无法区分某些颜色组合;而对比度不足会导致图标和文本与背景混合,使内容难以阅读。
保持文本清晰简洁
用户可以快速、轻松地吸收简短而直接的文本,并且不喜欢被迫阅读长篇文章来完成任务。
确保将最重要的信息简洁地表达出来,并突出地呈现出来,这样用户就不必读太多的东西来找到他们要找的东西,也不必去想下一步该做什么。
使用易识别的动词
用户应该一眼就能看出元素的作用。在标记按钮和其他交互元素时,请使用动作谓词,如连接、发送和添加。
避免侮辱性语言
避免我们、我们的、我和我的(例如“我们的教程”和“我的训练”)。它们有时会被理解为侮辱或屈尊的词。
非正式、友好的语气
以一种非正式、平易近人的风格,就像你在午餐时与人交谈的方式一样。偶尔使用缩略词、你和你的直接与用户对话。
相关且一致的语言
始终确保对当前环境能起到指导作用。例如:当用户使用iPad时,就不要显示iPhone 的提示或图标。保持与平台一致的语言。你可以点击、轻击、滑动、捏和拖动触摸屏上的内容。你可以按物理按钮和内容来响应3D Touch。你旋转并摇动装置。
慎用幽默性语句
请记住,用户可能会多次阅读界面中的文本,并且最初看起来很不错的内容,可能会随着时间的推移而让用户觉得烦躁。还要记住,一种文化中的幽默不一定能代表它在其他文化中也很幽默。
准确地显示日期
使用像今天和明天这样的友好的术语是很合适的,但如果不考虑当前的区域设置,这些术语可能会令人困惑或不准确。
考虑一个在午夜之前开始的事件。在一个时区,活动可能从今天开始。在另一个时区,同一事件可能已于昨天开始。通常,日期应反映观看活动的人的时区。但是,在某些情况下,例如在航班跟踪APP中,可以更清楚地显示航班开始的日期和时区。
动画
勿盲目使用动画
不要为了动画而使用动画。过多或无缘无故的动画会让用户感到不连贯或分心,尤其是在那些无法提供沉浸式体验的APP中。
iOS使用运动效果(如视差效果),在主屏幕和其他区域创建深度感。这些效果可以增加理解和享受,但过度使用它们会使APP感到迷失方向和难以控制。如果实现运动效果,请保持测试以确保它们正常工作。
符合现实、安全可靠
人们倾向于接受充满艺术的东西,但动画没有意义或似乎违反物理法则时,他们会感到迷失方向。例如:如果有人通过从屏幕顶部向下滑动来显示视图,他们应该也能够通过向上滑动来消除视图。
一致的动画
熟悉、流畅的体验会让用户更投入。他们习惯于iOS中使用的微妙动画,例如平滑过渡、设备方向的流畅转换和基于物理的滚动。除非你是创建沉浸式体验,例如游戏,否则你的自定义动画应与系统的内置动画差不多的。
使动画可选
在辅助功能首选项中启用减少动画的选项时,你的APP应该最小化或消除动画。
颜色
明智地使用颜色与用户交流
当一种颜色被谨慎或很少使用时,它能明显提高用户的注意力。例如,如果在不是很关键的其他地方使用红色时,那么警告用户关键问题的红色就会变得不是那么有效。
在APP中使用互补色
APP中的颜色需要很好地协同工作,而不是冲突或分散注意力。例如:如果粉彩对APP的风格至关重要,请使用一组协调的粉彩。
通常,选择与Logo协调的颜色
可以在Logo中提取颜色作为你APP的标准色。巧妙地使用颜色是传达品牌感的好方法。
考虑选择一种色调来表示APP的交互性
在Notes中,交互元素为黄色。在日历中,交互式元素为红色。如果你自定义了表示交互的色调,请确保其他颜色不会与之竞争。
提供两种版本的色调,以确保它在浅色和深色模式下都很好看
当你使用系统颜色作为色调颜色时,将自动支持高对比度。
避免对交互元素和非交互元素使用相同的颜色
如果交互元素和非交互元素具有相同的颜色,那么用户很难知道哪里可以点击,哪里不能点。
考虑插图和半透明元素对附近颜色的影响
为了保持视觉连续性,防止界面元素变得过于强大或缺乏吸引力,插图的变化有时需要改变附近的颜色。
例如:地图在使用地图模式时显示浅色模式,但在卫星模式时切换到深色模式。放置在半透明元素后面或应用于半透明元素(如工具栏)上时,颜色也会显得不同。
在各种照明条件下测试APP的配色方案
根据房间的氛围、一天的时间、天气等,室内和室外的照明差异很大。要知道,现实世界中电脑上的颜色看起来并不总是一样,APP也是一个道理。所以请在多种光照条件下预览你的APP,包括在晴天户外,去查看颜色的显示方式。如有必要,请调整颜色以便于在大多数用例中都能提有很好的观看体验。
考虑True Tone显示如何影响颜色
True Tone显示器使用环境光传感器自动调整显示器的白点,以适应当前环境的照明条件。主要关注阅读、照片、视频和游戏的APP可以通过指定白点适应性样式来增强或削弱此效果。
考虑如何在其他国家和文化中区别对颜色的使用
例如:在某些国家的文化中,红色代表危险。而可能在其他国家的人看来,红色具有积极的内涵。确保APP中的颜色可以表达相应的信息。
避免使用让用户难以查看内容的颜色
例如:色盲人可能无法区分某些颜色组合;而对比度不足会导致图标和文本与背景混合,使内容难以阅读。
视频
系统提供的视频播放器可提供两种查看模式:全屏(纵横填充)和适合屏幕(纵横比)。默认情况下,系统根据视频的纵横比选择观看模式,用户可以在播放期间切换模式。
全屏(纵横填充)模式。视频放大以铺满设备屏幕。可能会发生一些边缘裁剪。这是宽视频的默认查看模式(2:1到2.40:1)。
适合屏幕(纵横)模式。整个视频在屏幕上可见。会出现信箱或邮筒模式。这是标准视频(4:3,16:9,以及最高2:1)和超宽视频(任何高于2.40:1)的默认查看模式。
设计主题及原则
清晰主题
文字清晰易读,图标精确醒目,去除多余修饰,突出重点,以功能驱动设计。留白、颜色、字体、图形和界面元素都是为了更好地突出重要内容并传达交互性。
遵从主题
流畅的转场动画和清晰美观的界面可以帮助用户理解内容并与之互动,同时不能过度设计而干扰用户。必须坚定一点:设计服务于内容。UI作为内容的支撑,是为了帮助用户理解界面上的内容并与之交互。
深度主题
层次分明的视觉布局、生动逼真的交互动画,会让界面更有活力,有助于用户更好地理解内容,提升用户愉悦感。而在浏览内容的过程中,层级之间的跳转,更有利于用户理解产品的结构与深度。
整体美学原则
整体美学,意味着APP的视觉表现和交互行为与其功能已经融为一体。
例如,一个帮助用户执行严肃任务的APP可以通过使用微妙/不显眼的图形、标准控件和可预测的交互行为来使用户更专注。反之,沉浸式APP,如游戏,则可以提供吸引人的外观,同时鼓励用户去探索和发现,增添乐趣。
一致性原则
一致性是指,该APP的视觉上统一了标准和规范。
包括风格统一的图标和界面元素、标准的字体样式、一致的表达术语等。同时,APP内的功能和交互行为都与用户心理预期保持一致(符合用户心智模型)。
直接操控原则
直接与屏幕上的内容进行交互,有助于用户的理解。
例如:当用户旋转设备或者使用手势来影响屏幕内容时,用户可以体验到直接操控的感觉,最后用户可以看到自己的行为所带来的可视化反馈。
反馈原则
直接与屏幕上的内容进行交互,有助于用户的理解。
例如:当用户旋转设备或者使用手势来影响屏幕内容时,用户可以体验到直接操控的感觉,最后用户可以看到自己的行为所带来的可视化反馈。
隐喻原则
当APP的虚拟对象和交互行为能够与用户所熟悉的体验相似时,无论这种体验来自于真实生活还是数字世界,用户都能够更快学会使用这款APP(其实就是映射,同理心)。
隐喻在iOS中非常有效,因为用户通过屏幕进行互动。例如:用户移动视图来查看更多内容、拖曳和滑动内容、开关切换、移动滑块解锁、滚动选择器、快速翻页。
用户控制原则
在整个iOS中,都是人在控制APP,而不是APP控制人。APP可以提供建议和解决方案,但具体操作一定是用户自己选择的。不能让APP直接替用户做决定。最好的方式在用户主动操作和避免错误结果之间做到平衡。
例如:通过使用熟悉和可预知的交互元素、对重要操作进行确认(如付款、删除)、即便在执行中的操作也可以取消,就可以让用户感觉到他们在APP使用过程中掌握了主动权。