|
|
51CTO旗下网站
|
|
vwin官网端

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

苹果近来 WWDC(Worldwide Developers Conference 苹果全球开发者大会)发布 iOS 13 之后,随即供给 iOS 13 的 Sketch UI 模板,Human Interface Guidelines(界面规划攻略)内容也有许多更新。

作者:龙爪槐守望者来历:优设|2019-06-12 06:04

苹果在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 发布后,我收拾了这份苹果人机规划攻略更新内容

△ iOS 13 UI模板下载

留意:由于 iOS 13 把部分图标经过全新的 SF Symbols 技能呈现,假如没有做一些设置,初次翻开 Sketch 模板会呈现图标乱码的状况。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

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

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

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 在SF Symbols程序内检查指引删去老的字体

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

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 新增Dark Mode的控件款式

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

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 分段挑选器 Segmented Control

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

  • 下载链接:https://pan.baidu.com/s/1qkZbToUFE7GYaH11r0uyag
  • 提取码:bwtp
  • 备用链接:https://share.weiyun.com/5iYa2gk

规划攻略内容更新

规划攻略更新包括两部分:新增内容和老内容修正。

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 毛玻璃作用,只不过曾经从来没有在规划攻略里强调过。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 布景Materials

Multiwindow on iPad(iPad支撑多窗口)

iPad OS 支撑单个运用翻开多个窗口。iPad App 的窗口可分为主窗口和副窗口,副窗口要供给「封闭」或许「完结」按钮,点击按钮后会封闭副窗口回到主窗口,不能用「回来」按钮替代封闭功用,由于用户或许了解不了回来是封闭副窗口仍是回来副窗口里前一个页面。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

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

Context Menus(上下文菜单)

Context Menus 是 3D Touch中 Peek and Pop 的改进版,今后既能够用 3D Touch 引发 Context Menus,也能够用其他操作或许手势(比方长按)翻开。这意味着没有 3D Touch 的 iOS 设备也间接地获得了 3D Touch 的功用。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ Context Menus(上下文菜单)

2. 老内容修正

新增Custom haptic pattern(自界说触感形式)

自从 iPhone 7 开端参加了线性马达后,咱们在滑动 Picker 等控件的时分,能感觉到手机在细微轰动,这让用户产生在实在国际拨轮的触感。iOS 13 答应自界说触感,比方游戏中人物人物从树上跳下来,用自界说触感模拟出跳下来地板轰动的作用,让体会愈加实在和激烈。

新增System Color(体系色彩)和Dynamic System Color(动态体系色彩)

假如运用某个详细的 RGB 色值进行界面规划,当用户运用深色形式或许残疾人翻开了无妨碍形式后,本来的色彩或许变得丑或许残疾人看不清楚。而 System Color 供给的色彩会在深色形式和无妨碍形式下主动改为适宜的色值,让色彩在这些特别形式下更舒适和明晰。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 体系色彩自带深色形式和无妨碍下的变体

Dynamic System Color 能够为某类控件界说一组色彩,以主动习惯亮堂形式和深色形式。例如给标题设置一组色彩,那么整个 App 的一切标题亮堂形式时都是同一种色彩,切换到深色形式后色彩都会变成另一种色彩。

新增卡片风格的模态

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

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ Alert对话框

或许全屏的模态,经过导航栏的撤销或完结按钮退出模态。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 全屏的Modal View

其实在 iOS 13 之前,体系邮件 App 还供给介于对话框和全屏模态之间的模态款式,这种模态卡片既占有非常大的屏幕空间,又能经过卡片顶部模糊看到本来页面的导航栏,让用户意识到模态与之前页面的联络。iOS 13 更新后,卡片风格的模态被正式写入到 iOS 规划攻略中,信任今后会有越来越多的 App 选用这种风格。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容

△ 卡片风格的模态

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

躲藏大标题导航栏底部边框线,让标题和内容联络更严密,当然假如翻滚的时分底部边框线仍是会显现的,不然就分不清导航栏和内容的鸿沟了。

iOS 13 发布后,我收拾了这份苹果人机规划攻略更新内容
△ iOS 12比照iOS 13大标题导航栏

【修改引荐】

  1. IOS 13 新增8大功用,苹果又一产品再会...
  2. 白日不明白夜的黑!Android Q拿什么打赢iOS 13
  3. iOS 13 截图曝光 深色形式承认
  4. 运用发动快一倍!iOS 13必升:65项细节更新一览
  5. iOS 13新功用“苹果登录”强制性引发争议
【责任修改:未丽燕 TEL:(010)68476606】

点赞 0
共享:
咱们都在看
猜你喜爱

订阅专栏+更多

20个局域网建造改造事例

20个局域网建造改造事例

网络建立技巧
共20章 | 捷哥CCIE

364人订阅学习

WOT2019全球人工智能技能峰会

WOT2019全球人工智能技能峰会

通用技能、运用领域、企业赋能三大章节,13大技能专场,60+国内外一线人工智能精英大咖站台,共享人工智能的渠道东西、算法模型、语音视觉等技能主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

Spring Boot 爬虫查找轻松游

Spring Boot 爬虫查找轻松游

全栈式开发之旅
共4章 | 美码师

86人订阅学习

读 书 +更多

根据Project2003的项目办理

本书的上一版别《根据Project 2002的项目办理》上市今后得到了读者的欢迎,为了更好地将Project 2003新版别的运用介绍给读者,咱们从头进行...

订阅51CTO邮刊

点击这儿检查样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客