一、三大基本设计主题
清晰(Clarity)
纵观整个iOS系统,清晰意味着,每种尺寸下的文本都应该是易读的,所有图标都应该是精确易懂的,每一个装饰都应该是精心恰当的,而且应该本着功能驱动设计的原则。利用留白,颜色,字体,图像以及其它界面元素来共同巧妙地突出重点内容且表达其不同的可交互性。
遵从(Deference)
干净美观的界面和清晰流畅的动态效果有助于用户去理解界面内容并与之进行交互,从而避免给用户带来干扰。而如果当前的内容占据了整个屏幕时,可以利用半透明以及模糊处理等方式来暗示用户其更多内容的存在。尽可能少的使用边框,渐变以及阴影可以让界面更轻,从而突出更多的内容。
深度(Depth)
鲜明的视觉层级以及生动的动态效果可以对界面有更深层次的表达,赋予了界面活力也更有助于用户去理解。易于发现且易于触发的界面元素能够提升用户的体验愉悦感,而用户在成功触发相应功能或获得更多内容的同时也掌握了当前所在位置的由始至终(可以理解为PC端的面包屑)。因此当用户在浏览内容的同时,流畅的过渡其实便体现出了一种纵深感。
二、黑暗模式(Dark Mode)
尤其这次更新中深色模式非常重头,“从 iOS 13.0 开始,人们可以将系统全局的外观样式设置为深色视觉风格,即“深色模式”。
在深色模式中,系统会为所有界面、视图、菜单、控件等等调用一套更深的背景色方案,同时通过更多的半透明虚化效果使前景内容更有效地从深色背景当中突显而出。深色模式同样支持所有的可访问性设计标准。
人们可以将深色模式设置为系统的默认外观模式,也可以让设备在光照条件较弱的环境中自动切换至深色模式。
使用黑暗模式的原因
- 查看照片等媒体内容会更加清晰,生动
- 在夜晚等光线较暗的模式下可以更舒适的浏览
- 很多用户觉得深色模式很酷
如何设计黑暗模式
- 专注并聚焦内容:深色模式可以将焦点集中于界面当中的内容区域,使内容本身得以突显,而周围的界面元素则会隐退于背景之中。更高效地给用户呈现内容。
- 在明亮和黑暗的外观下测试您的设计: 需要在app界面设计时充分考虑在深色与浅色两种模式下的内容依然清晰可读性。在某一种模式当中表现良好的设计方案,在另一种模式当中很可能出现问题。检视界面在两种模式下的表现,进行必要的调整,使其能够良好适配于每一种模式。
- 调整对比度和透明度:请确保在黑暗模式下的内容保持清晰易读。在黑暗模式下,您应该单独测试,并一并打开“增加对比度”和“降低透明度”来测试您的内容。
三、具有语义化的颜色(Semantic Color)
颜色是一种传递活力,提供视觉连续性,传达状态信息,响应用户操作提供反馈以及帮助人们可视化数据的好方法。
在选择浅色和深色背景下单独和组合的应用色调颜色时,请查看系统的配色方案以获得指导。
明智地使用颜色进行交流
当谨慎使用时,提高注意重要信息的颜色力量会增强。例如,当出于非关键原因在应用程序中的其他地方使用红色时,警告人们关键问题的红色三角形变得不那么有效。
在整个应用中使用补色:
应用中的颜色应该很好地协同工作,而不是冲突或分散注意力。例如,如果粉彩对于应用程序的样式至关重要,请使用一组协调的粉彩。
选择与您的应用徽标协调的有限调色板
微妙地使用颜色是传达品牌的好方法。
考虑选择色调颜色以指示整个应用程序的交互性
在Notes中,交互元素为黄色。在日历中,交互式元素为红色。如果您定义表示交互性的色调颜色,请确保其他颜色不与之竞争。提供两种版本的色调,以确保它在明暗模式下都很好看。当您使用系统颜色作为色调时,您可以自动支持高对比度。
避免对交互式和非交互式元素使用相同的颜色
如果交互式和非交互式元素具有相同的颜色,则人们很难知道在哪里挖掘。考虑艺术品和半透明度如何影响附近的颜色。艺术品的变化有时需要改变附近的颜色,以保持视觉连续性并防止界面元素变得过于强大或不足。例如,地图在使用地图模式时会显示浅色方案,但在激活卫星模式时会切换为深色方案。放置在半透明元素后面或应用于半透明元素(如工具栏)时,颜色也会显得不同。
在各种照明条件下测试应用程序的配色方案
根据房间的氛围,时间,天气等,室内和室外的照明都有很大差异。当您的应用在现实世界中使用时,您在计算机上看到的颜色看起来并不总是一样。始终在多种光照条件下预览您的应用,包括在晴天户外,以查看颜色的显示方式。如有必要,调整颜色以在大多数用例中提供最佳的观看体验。
考虑True Tone显示如何影响颜色
True Tone显示器使用环境光传感器自动调整显示器的白点,以适应当前环境的照明条件。主要关注阅读,照片,视频和游戏的应用可以通过指定白点适应性样式来增强或削弱此效果。
考虑如何在其他国家和文化中看到您对颜色的使用
例如,在某些文化中,红色表示危险。在其他人看来,红色具有积极的内涵。确保应用中的颜色发送相应的消息。
避免使用让人们难以察觉应用内容的颜色
例如,色盲人可能无法区分某些颜色组合,而对比度不足会导致图标和文本与背景混合并使内容难以阅读。有关指导,请参阅颜色和对比度。
使用适应当前外观的颜色
语义颜色(如分隔符)会自动适应当前外观。 当您需要自定义颜色时,将颜色集资源添加到应用程序的资产目录中,并指定颜色的浅色和深色变体,以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。
例如,在浅色模式下,用RGB色(255.255.255)100%的不透明度来作为背景颜色,那么在深色模式会使用RGB色(255.255.255)100%的不透明作为背景颜色。这两个颜色都会被称为背景色,打包写在代码中。系统只需按照不同的场景来使用这两种颜色即可。
苹果设计师为我们提供了4组的语义化文字样式颜色。无论在深色或者浅色模式,都能呈现出良好的对比度。如下图所示。
同样的,iOS 13也提供了三种默认的背景色供我们选择,包含系统背景,二级和三级背景。设计师可以在三种层级颜色中搭配来表达更好的层次效果。
在填充色,分隔线和系统色中,建议大家使用各种透明度的颜色来处理,确保在黑暗模式和白色模式下,这些颜色都能很好的适配。
当然,不是所有的颜色都可以用透明色,比如下面这种。此时我们可以根据情况使用不透明的纯色代替。比如下面两张图片:
iOS 13系统引入了六种不透明的灰色,你可以在上述半透明效果不佳的极少数情况下使用它们。 例如,交叉或重叠元素(例如网格中的线条或条形)在不透明度方面看起来更好。 通常,为UI元素使用语义定义的系统颜色。上下两图分别为默认颜色和无障碍颜色:
系统级别的颜色,在苹果的设计文档中也有详细的描述,如下图两图,分别为默认颜色和无障碍颜色:
确保所有外观都具有足够的色彩对比度
使用系统定义的颜色可确保前景和背景内容之间的对比度。 对于自定义颜色,目标是对比度为7:1,尤其是对于较小的文本。 对比度越高,深色背景下颜色就越浅,浅色模式下就会颜色越深。
在使用设计师自己指定的颜色的时候,要确保在两种模式下的对比度都足够强,如下图点睛色指定了橙色,黑暗模式下使用白色,浅色模式下使用黑色文字,则对比度必须要拉大,确保应用的可读性足够好。
在下图中,我们可以体会下黑色模式和浅色模式下,同一种颜色对于用户视觉的影响,是不一样的,要保证在两种模式下都有更好的对比度和可读性,需要设计师更严谨的配色。
柔化白色背景的颜色。 如果您必须在暗模式下使用白色背景作为内容,请选择稍暗的白色,以防止背景对周围的暗色内容太刺眼。比如可以为白色背景加一些透明度,这样舒适性更好。
三、基本层与浮出层(Base & Elevated)
很多时候我们都会用到这样的设计形式,比如在背景上方叠加一层具有阴影的模块。这样页面就具有了3维的层次感。比如下图这样:
但是在深色模式下,这种具有阴影的设计就失效了。所以,在深色模式下,我们就退而求其次,直接使用比背景稍微浅一点的颜色作为浮层,而不用考虑阴影了。
可以从下图这个简单的操作来理解基本层和浮出层。常规情况下,打开通讯录,那么这个界面使用了纯黑色背景,但是当我们从电话应用中打开这个联系模块时,此时它的背景色就成为了稍浅一点的颜色。
同样,在iPad的邮件应用中,侧推弹层使用了稍浅一点的颜色作为背景色。
但是当使用分屏模式的时候,左右两侧的设计都使用了浮层的颜色作为背景色。因此,在不同的情况下,浮出层的用法是不一样的,这一点必须注意。
四、材质(Materials)
通过下图,我们可以理解,材质主要可以理解为内容区块背景叠加到基础色上所呈现的透明度。如下图所示,有四种:Thick,Regular,Thin,Ultrathin。透明度分别递增。
在黑暗模式下同理
每种厚度的材质,苹果设计师都为我们提供了不同的配色方案。
对于设计师来说,我们不需要完全严格遵循这些色值,只需要保证在不同厚度下的透明度能达到基本的对比度要求即可,比如右边的两个设计方案,可读性就非常差。
五、控制条与导航栏(Control & Bars)
对于这些基础的组件,苹果建议我们使用系统内置的设计,因为他们都使用了语义化的颜色,能更好的适配白色模式和深色模式。
而对于Bar来说,大的Title文字则得到了普及,得益于手机屏幕的纵向长度提升,大的Title字体会让页面内容更加醒目,更加优雅。
六、图标
一些长期保留直角的图标,在iOS 13中均改为圆角,线条也得到了加粗。
众所周知,圣弗朗西斯科字体是苹果内置的英文字体,如今的圣弗朗西斯科字体内置了1500多个符号(icon)。如果各位小伙伴对图标难以把握,或者想偷个懒,可以借助于SF字体中的符号来进行设计,更加方便快捷。因为这些符号通过输入法可以直接打出来。
设计师可以根据文字的字重,选配对应重量(粗细)的图标。
除了重量外,Apple还针对每个图标提供了三种不同的尺寸:Small、Medium、Large。
三种状态下文字字号相同,图标尺寸不同。官方对上述三种尺寸给出了对应的使用场景。
七、更清晰的字体
1、计算器
- 新的加粗字体的设计让重要的信息更加突出,整个iOS 13减少了细线字体的出现。
- 增强了字和背景的对比,让文字更容易识别,特别注重无障碍设计。
2、日历
- 月份和日期都用了更粗的字体,但仍然保持了清晰度。
- 更加突出重要的信息,从iOS 11开始日历中的“年”和“月”是最突出的。而iOS 10却只突出了日期。
八、更醒目的导航
1、运用大标题
设置⻚面标题使⽤⼤字号; 导航栏增高。让用户随时都知道⾃己现在什么位置。但是当用户滚动页面时则缩小导航整体比例,因为此时用户更关注中间的内容。
2、App store - 信息层级的改变
原来的整个App Store变成了现在的“App”标签栏,为了突出其他更能盈利、用户更关注的信息。
把用户评论数以及星级去掉,因为苹果的排名本身就已经说明了App的优秀程度。
加粗了关键信息-价钱、标题。
3、更清晰的图标
- 解锁页面 - 以实心按钮取代线形按钮,这样可以增强点击感。
- 键盘 - 用更宽的间距、浅浅的按钮阴影来加强可点击感。
- 以面性图标取代线性图标(因为面性图标更像实物实体是实心的为主,图标也更显稳重。
- 涉及(线)的图标,加粗线条,使之看起来更像面性图标。
- phone、App store、photos的信息层级被重新设计。(例如App Store的标签栏为了突出其他更能盈利、⽤户更关注的信息, 如游戏,现在就单独成为了⼀个标签页。然后将“Upates”盈利能力一般的信息入口移至右上角的个人中心)
九、弹窗视图
模态我们可以理解是一种弹层的形式,这种弹层具有强制性。它已经存在很久,对于模态场景,大家不要乱用,必须谨慎。(静电注)
在iOS 13之前,模态展示的视图默认是全屏(Fullscreen)。
iOS 13新增了一种操作视图:操作的视图會被縮小,同時淡化置于新跳出视图的下方。
这样的弹窗视图在Human Interface Guideline(苹果设计指南)中被称为Sheet。新版的视图有助于用户明确信息的层级,便于用户找回此前被暂停的任务。
新版的视图弹窗(Sheet)提供三种关闭方式:
- 从屏幕顶部向下滑动
- 当卡片内容滚动到顶部时,从屏幕上的任何位置向下滑动 (单手操作的)
- 点击按钮
- 如果关闭弹窗时存在“修改为储存的内容”这类行为时,要提醒使用者是否要放弃编辑。
- 弹窗中的任务需要简单、简短,避免过于复杂,导致用户忘了此前他们所暂停的任务,进而导致用户“迷路”。以通讯录为例:
- 对于拍照、录像、照片编修、文件编辑等这类需要沉浸式、较复杂的使用场景,就适合维持过去全屏(Fullscreen)的呈现方式。
十、消息通知
消息通知的目的是为了提升产品活跃度,激活休眠用户使用产品。
出现消息通知的场景有锁屏、使用中、通知中心。其中交互类型分为“显式推送”、“隐式推送”。视觉样式分为“普通消息”、“详情样式”。
- iOS 消息通知的设计原则为“不打扰,不错过”
- 推送通知为了有效的提醒和保存用户注意
- 重叠样式则是为了减少用户消耗时间而设
- 提供有用的、有意义的通知(通知不是为了引导用户打开“你的应用”在推送消息时要注意通知个性化。尤其是注重场景化,运用智能算法推算出用户使用app的契机,提供合适的推送)
- 即使用户没有作出回应,也不要为了同一件事情发送多个通知(推荐按应用分组,也可以定制化分组)
- 明确告知用户开启通知权限的价值)。最好的请求权限应在恰当的时候提出。如当用户完成新手引导后或登陆后。开通权限后app提供描述性文字和声音,以便在隐藏通知预览时显示。
- 考虑提供一个详情视图(包含图片、视频以及其它可动态更新的内容,允许用户可执行快速的操作)
- 考虑提供一个详情视图(包含图片、视频以及其它可动态更新的内容,允许用户可执行快速的操作)
- 提供直观、有用的操作(最多包含四个操作按钮,用来执行常用任务)尽可能的提供少操作按钮,运用席克定律帮助用户作出选择,减少用户的思考避免焦虑。
- 避免展示破坏性的操作(确保用户有上下问,并用红色字体显示)。
- 画出用户旅程图,找出消息推送切入点,帮助并提醒用户重要信息,避免用户在状态变更后错过重要信息,及时告知用户。
十一、HapticTouch
在iOS 13中,Apple取消了 3DTouch(又名 Force Touch),改用了HapticTouch。
此前,在支持3DTouch的机型上,轻轻长按桌面图标,图标会开始晃动,会进入重新排列桌面的状态。
而“重按”某个图标,就可以通过3DTouch呼出菜单。
在改用HapticTouch之后,原本的3DTouch也随之取消,系统不再区分轻按和重按。只能通过长按呼出菜单,“重新排列桌面”也变成了菜单中的一个选项。
十二、情境菜单(Contextual Menu)
情景菜单类似于Peek(预览)和Pop(弹出),但有两个主要区别:情境菜单可在运行iOS 13及更高版本的所有设备上使用;Peek和Pop仅适用于支持3D Touch的设备。 情境菜单立即显示上下文相关的命令;Peek和Pop需要向上滑动才能查看命令。 (请注意:iOS 13中 3D touch的交互方式与此情境菜单的交互逻辑不太一样,情境菜单的交互方式是长按,而不是重压。
对于情境菜单的交互设计,请遵循以下建议:
始终采用情境菜单: 如果您为某些地方的项目提供情境菜单而不是其它地方的项目,人们将不知道他们可以在哪里使用该功能,并且可能认为您的应用程序存在问题。
仅包括适用于该项目的最常用命令:例如,在邮件消息的上下文菜单中,包含用于回复和移动邮件的命令是有意义的,但包含格式或邮箱命令没有意义。 列出太多命令可能会让人无所适从。
使用子菜单来管理复杂性:子菜单是一个情境菜单项,显示逻辑相关命令的二级菜单。 为子菜单提供描述其内容的直观标题,以便人们可以预测子菜单的命令而不会泄露它们。 简洁,以行动为导向的标题还允许人们跳过他们在当前环境中不需要的子菜单。
将子菜单保持在一个级别:虽然子菜单可以缩短情境菜单并阐明人们可以执行的命令,但是多个子菜单级别使得体验变得复杂并且人们难以导航。
将最常用的项目放在菜单的顶部:当人们打开情境菜单时,他们的焦点位于该菜单的顶部区域。 将最常见的项目放在菜单顶部可以帮助人们找到他们正在寻找的项目。
使用分隔符对相关菜单项进行分组:创建可视分组可以帮助人们更快地扫描菜单。 例如,您可以使用分隔符对与编辑项目相关的操作进行分组,使用另一个分隔符对与共享项目相关的操作进行分组。 通常,不建议情境菜单中有三个以上的组。
避免为同一项目提供情境菜单和编辑菜单: 当人们为同一个项目启用这两个功能时,系统很难检测到意图,这可能会让人感到困惑。
避免提供打开项目预览的操作按钮: 人们可以点击打开他们正在预览的项目,因此通常不需要提供明确的“打开”按钮。
十三、默认头像
在iOS 12系统中,“默认头像”都具有性别特征。比如通讯录的图标,就是由一男一女的剪影所组成。
在其他位置,比如:通讯录详情页、短信列表、AppStore所用的默认头像均为“男性”剪影。
而在iOS 13中,上述这些位置的头像,都变成了去性别特征的圆形头像。如下图:
Apple没有根据账号性别显示男/女头像,而是采用“无性别头像”。我想这么做也许是为了更好的照顾到“跨性别群体”的感受。
此前跨性别群体曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等标志,这些眼下已出现在iOS 12.2的Emoji中。
十四、开关(Switches)
自iOS 7发布以来,iOS的切换开关一直没有变化。其特点是,开关的投影延展到了“凹槽”外、且底色会有缩放动效。
时隔五年,苹果对切换开关的细节做了调整。在最新的OS 13中,开关的投影缩到了“凹槽”内,并且取消了底色缩放的过渡,改用“渐隐渐显”的过渡方式。
十五、分段控件
新版的分段控件由过去的描边线,改为填充的形式。其中,选中状态的滑块含投影,投影效果和切换开关一样,投影只在“凹槽”内。
十六、音量调整视图
在iOS12版本中,音量的调节图标是在屏幕中间显示一个巨大的铃铛,铃铛下面会有音量大小的进度条,严重干扰用户视线。
iOS13的音量控制图标也进行了全新的设计,音量大小的图标被设计在了屏幕左侧。在音量调节过程中,喇叭图标也非常直观的显示了音量大小的变化。
另外,左侧的音量可以支持滑动调整,类似底部控制器弹窗的音量调节。
十七、三指菜单
在iOS 13中,只要用3个手指点击屏幕,就可以呼出一个全新的菜单。用来完成:撤销、剪切、复制、粘贴、重做这五个操作。
值得一提的是,Edit Menu依然存在,可以和三指菜单同时出现。
本文部分内容参考文档
https://developer.apple.com/videos/play/wwdc2019/808/
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/