iOS 13 发布后,我整理了这份苹果人机设计指南更新内容(附最新 UI 模板下载) - 优设网 - UISDC

iOS 13 发布后,我整理了这份苹果人机设计指南更新内容(附最新 UI 模板下载)

2019/06/11 17747评论区

@龙爪槐守望者?:苹果在6月4日凌晨 WWDC(Worldwide Developers Conference 苹果全球开发者大会)公布 iOS 13 之后,随即提供 iOS 13 的 Sketch UI 模板,Human Interface Guidelines(界面设计指南)内容也有很多更新。

iOS 13官方Sketch UI文件下载

大家可以在 https://developer.apple.com/design/resources/,下载到最新的 iOS、macOS、macOS、tvOS 等UI模板,提供 Sketch、Photoshop、Adobe XD 甚至是 Keynote 的源文件。截止到6月9日,仅提供 Sketch 的 iOS 13 UI模板,其他版本还需要等待。

△ iOS 13 UI模板下载

注意:由于 iOS 13 把部分图标通过全新的 SF Symbols 技术呈现,如果没有做一些设置,首次打开 Sketch 模板会出现图标乱码的情况。

△ 没安装SF Symbols程序导致部分图标显示不全

必须先安装 SF Symbols 程序(下载地址: https://developer.apple.com/design/downloads/SF-Font-Pro.dmg)后,通过程序内的指引删除老的 San Francisco 字体后, Sketch 模板才显示正常。

△ 在SF Symbols程序内查看指引删除老的字体

新的 UI 模板新增深色模式(Dark Mode)的样式、iPad OS 版式模板等。

△ 新增Dark Mode的控件样式

还有一些有趣的地方,比如分段选择器(Segmented Control)的选中状态更有质感,像凸出的按钮。

△ 分段选择器 Segmented Control

我整理了一份包含: Sketch UI 模板、组件库、新的 SF Symbols 程序和 San Francisco Pro 字体的文件,可供下载。

设计指南内容更新

设计指南更新包含两部分:新增内容和老内容修改。

1. 新增内容

iPad Apps for Mac(适用于Mac的iPad App)

上一届 WWDC 就提到支持将 iOS App 移植到 Mac 上,这届 WWDC 提供了详细的移植技术和设计方案。这部分内容主要是嘱咐开发者移植过程中注意大屏幕 Mac 的界面适配、支持鼠标和键盘快捷键操作等。

Dark Mode(深色模式)

启用深色模式后,iOS 系统会自动适配背景、主色调等。但是设计师仍要检查颜色、图标和文字颜色在深色模式的显示情况。

Materials(材质)

iOS Materials 和 Google 的 Material Design 不一样。iOS 的 Materials 是指为控件本身或者背景增加一个半透明的效果,让界面有景深感。既能让用户意识到控件和背景的关系,也不会分散用户的注意力。其实这就是 iOS 7 毛玻璃效果,只不过以前从来没有在设计指南里强调过。

△ 背景Materials

Multiwindow on iPad(iPad支持多窗口)

iPad OS 支持单个应用打开多个窗口。iPad App 的窗口可分为主窗口和副窗口,副窗口要提供「关闭」或者「完成」按钮,点击按钮后会关闭副窗口回到主窗口,不能用「返回」按钮代替关闭功能,因为用户可能理解不了返回是关闭副窗口还是返回副窗口里前一个页面。

△ Multiwindow on iPad(iPad支持多窗口)

Context Menus(上下文菜单)

Context Menus 是 3D Touch中 Peek and Pop 的改进版,以后既可以用 3D Touch 唤起 Context Menus,也可以用其他操作或者手势(比如长按)打开。这意味着没有 3D Touch 的 iOS 设备也间接地获得了 3D Touch 的功能。

△ Context Menus(上下文菜单)

2. 老内容修改

新增Custom haptic pattern(自定义触感模式)

自从 iPhone 7 开始加入了线性马达后,我们在滑动 Picker 等控件的时候,能感觉到手机在轻微震动,这让用户产生在真实世界拨轮的触感。iOS 13 允许自定义触感,比如游戏中人物角色从树上跳下来,用自定义触感模拟出跳下来地板震动的效果,让体验更加真实和强烈。

新增System Color(系统颜色)和Dynamic System Color(动态系统颜色)

如果使用某个具体的 RGB 色值进行界面设计,当用户使用深色模式或者残疾人打开了无障碍模式后,原来的颜色可能变得丑或者残疾人看不清楚。而 System Color 提供的颜色会在深色模式和无障碍模式下自动改为合适的色值,让颜色在这些特殊模式下更舒适和清晰。

△ 系统颜色自带深色模式和无障碍下的变体

Dynamic System Color 可以为某类控件定义一组颜色,以自动适应明亮模式和深色模式。例如给标题设置一组颜色,那么整个 App 的所有标题明亮模式时都是同一种颜色,切换到深色模式后颜色都会变成另一种颜色。

新增卡片风格的模态

提起模态,最常见的是界面中间弹出一个对话框。

△ Alert对话框

或者全屏的模态,通过导航栏的取消或完成按钮退出模态。

△ 全屏的Modal View

其实在 iOS 13 之前,系统邮件 App 还提供介于对话框和全屏模态之间的模态样式,这种模态卡片既占据非常大的屏幕空间,又能通过卡片顶部隐约看到原来页面的导航栏,让用户意识到模态与之前页面的关系。iOS 13 更新后,卡片风格的模态被正式写入到 iOS 设计指南中,相信以后会有越来越多的 App 采用这种风格。

△ 卡片风格的模态

大标题导航栏可隐藏底部边框

隐藏大标题导航栏底部边框线,让标题和内容联系更紧密,当然如果滚动的时候底部边框线还是会显示的,否则就分不清导航栏和内容的边界了。

△ iOS 12对比iOS 13大标题导航栏

欢迎关注作者的微信公众号:「龙爪槐守望者」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://wap.maladuo.cn/human-interface-guidelines-update

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师干货 交互设计师 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

新世纪娱乐网址 通州区| 锦州市| 田林县| 扎囊县| 永平县| 肥乡县| 中卫市| 灵寿县| 施秉县| 高唐县| 罗定市| 古丈县| 呼伦贝尔市| 讷河市| 沈丘县| 沙湾县| 天全县| 连江县| 莱阳市| 开化县| 宜君县| 金昌市| 佛坪县| 宜兰市| 松溪县| 偏关县| 比如县| 榆社县| 海淀区| 大英县| 二手房| 常德市| 石狮市| 建平县| 甘德县| 宁武县| 舒城县| 建湖县| 阿尔山市| 大港区| 新龙县| 上蔡县| 德令哈市| 玉田县| 江门市| 华阴市| 合阳县| 抚远县| 通州市| 乌拉特中旗| 綦江县| 舞阳县| 江油市| 缙云县| 吕梁市| 临桂县| 新宁县| 瑞安市| 永靖县| 自治县| 永顺县| 通化市| 清水县| 湖口县| 万年县| 积石山| 疏附县| 泰宁县| 周口市| 阿鲁科尔沁旗| 兰考县| 临安市| 七台河市| 平安县| 安阳市| 高雄县| 翼城县| 寻乌县| 静乐县| 济源市| 拜泉县| 武宣县| 潜山县| 澎湖县| 新沂市| 宜宾县| 渝北区| 合水县| 惠安县| 旬邑县| 遵义县| 涞源县| 张家界市| 牡丹江市| 南靖县| 东明县| 安吉县| 龙州县| 合阳县| 永德县| 阳高县| 平安县| 射洪县| 洪江市| 大理市| 金华市| 利津县| 绥芬河市| 清远市| 富蕴县| 来凤县| 安西县| 嫩江县| 朝阳县| 穆棱市| 南宫市| 丰城市| 筠连县| 化德县| 奎屯市| 马尔康县| 藁城市| 同江市| 酒泉市| 平顶山市| 长葛市| 美姑县| 子洲县| 兴和县| 文成县| 三明市| 文安县| 金沙县| 广宗县| 长春市| 元氏县| 新源县|