当前位置:首页 > 电影解说文案 > 正文

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  温馨提示:这是一篇文章很长,阅读前请先做好心理准备。

  WWDC 2017 Keynote 结束没几天,相信很多对 UI 设计有兴趣的朋友应该很好奇 iOS 11 详细的设计变动有哪些,但是自己的手机又不方便装开发者版本,所以就让我替各位踩雷吧。

  两个版本分别是 iOS 10.3,以及 iOS 11 beta 1,而由于后者尚未正式推出,因此某些设计有问题的地方,Apple 可能会在后续版本变动或修正,不过整体来说应该不会有大改变了。

  本篇文章会从三个大方向来观察新设计,分别是:

功能与操作体验

设计语彙

产品策略

  并再细分成几个小主题,而剩下较零碎的比对就列在后面;太细微的变化我不会列出,毕竟要截出大量的相同画面真的很费工夫 ??

  对了,我只会列出不同的地方,并且推测其设计意图,不会有太多评论,我想这留给各位自行思考比较有趣。

  1. 功能与操作体验

  大幅简化的主画面结构

  从 iOS 7 到 iOS 10 以来,随著功能的增加,锁定画面、主画面、通知中心这三者的结构越来越複杂,其中的操作逻辑和视觉线索就产生了明显的矛盾,例如下面这是 iOS 10 的主画面结构:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  以上的画面有些非常相似,但出现的时机和细部功能又不太相同,而这点在 iOS 11 获得了明显改善,可以看到操作逻辑的结构变得简单多了:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  这设计一定是有变得更好、更合理,但我不确定这样大幅改变使用者的习惯是不是好事。

  以下的左右比较图都是「左旧右新」。

  解锁画面

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  解锁的数字键 base 变成实心,除了配合新的设计语言外(后面会详细分析),推测是避免框线和细字的搭配会干扰阅读。

  主画面

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  App 名称的字变粗,改进阅读体验。

  Dock 的 App 名称不见,逻辑应该是:「会放 Dock 代表使用者自己很清楚那是什麽」;且经过研究,我们记住 UI 的方式,是透过位置,而不是文字内容。

  控制中心

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  多页变成单页,可自订功能及排列

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  可使用 3D Touch 来展开详细设定的按钮更多了

  使用统一的矩形视觉元素来变化出不同的设定,这是我满喜欢的部份,如下面这些:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  横向 Tab bar 让出更多空间

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  横向的 Tab bar 排列方式有改变(上新下旧),争取更多垂直空间。这个设计在 iOS 10 的 iPad 版本「音乐」App 就有了,只是应用到了 iPhone 上。

  用字重来改善可读性

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  把过去字太细、太小的地方集体改进,上图以 Voice Memo 为例。

  键盘设计改变

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

数字键盘

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

方便单手打字的键盘

  数字键的按钮和文字键盘样式统一

  新增单手打字模式

  2. 设计语彙

  大量应用不同的层次区隔手法

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

App Store 的新设计

  「层次(Hierarchy)」是 UI 很重要的元素,让重要的、不重要的东西区隔开来,引导使用者的阅读动线。区分层次的手法有很多,如大小、粗细、颜色、间隔、形状、排列方式??等等。

  过去 iOS 较常使用分隔线和文字大小来做层次;而自从新版 Apple Music App 推出后,开始频繁使用新手法,如大面积阴影、字重等,如上图的 App Store 新设计。

  顺带一提,我不喜欢称这类手法叫「Card UI」,我觉得那是跟风且不精确的形容,矩形+阴影到哪裡都能见到,过去苹果在 Passbook 和提醒事项 App 就有这类设计了。

  细节风格更新

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

App 介绍页

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

计算机

  边角更圆润

  空心变实心(色块感变重)

  空心变实心的特点刚刚在解锁画面有出现过,而上图的计算机让我想到初代 iPhone OS 向经典致敬(?)的设计。(ET66表示:你又来了??)

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  全新的 Navigation Bar

  去年(2016)在新版 Apple Music 让大家耳目一新的大字 Nav Bar,苹果在这次 iOS 11 也大量使用在各个 App 裡(见下图);另外也终于开放 API 让大家使用了,以后设计师们可以放心做这类大标题,不必担心造成开发者的麻烦:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  就跟以前 iOS 7 大量使用高斯模糊,结果过整整一年才开放 Blur API 一样,苹果真的很小气 ??????

  图像(Graphic)与符号

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  App Icons

  计算机的新 icon 配重用色皆恰到好处,我满喜欢的。

  iTunes Store icon 整个换掉,可能是因为音乐、电影都具备「明星」这个要素。

  App Store 也跟著拿掉外围圆框。

  日曆字变粗,跟随整体设计调性。

  iCloud Drive 变成 Files,这个是产品性质和策略变更。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  System Icons

  Status Bar 讯号强度从 ????? 改回阶梯式

  电量 icon 的线面比例变得更均衡一些

  Tab bar icons 从空心/实心两态变成全实心粗线条设计,是配合整体设计调性,但对色盲患者有点小不利。

  想一想:为什麽「Games」是用火箭,而不是用游戏手把来做 icon?

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  Siri

  从左右分列的对话式变成全靠左设计,意图不明。

  Siri icon 重新设计,我觉得挺有「细胞、生命体、灵魂」的概念,个人认为是非常优秀的设计。

  顺便看一下 Siri 的变脸史,Alan Dye 真是个善变的男人:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  你这样一直改一直改一直改??

  3. 产品设计策略

  从 Apple 把哪些部分变明显、哪些部分隐藏,就可以知道哪些地方是最赚钱、最有发展力的。

  App Store

  主页改成「Today」,与消费者的对话变得更重质一点,因为现在问题已经不是早期的「有没有得下载?」,而是「我为什麽要下载?」了。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  至于以前的「整个 App Store」,现在变成只有一个 tab 的份量,在导航系统裡整整下降一级。

  以下是 App Store 的新旧设计细节比较:

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

排行榜

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

分类

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

搜寻

  档案 App

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  另一个产品策略改变是,iOS 终于有可见的档案系统了(其实严格来说还称不上)

  其他设计比较

  接下来的这些画面,就几乎就是以上分析的组合应用,玩一下大家来找碴,顺便欣赏苹果对细节的用心吧!

  Widget 管理画面

  调整间隔和字重,Nav bar buttons 的 padding-x 内缩少许。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  照片

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  行事曆

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  特别要说的是,这个画面左上角的「Jun 2017」是一个低级的文案设计错误,竟然现在才修正。

  Podcasts

  让视觉和操作体验与 Apple Music 统一,等好久了。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  家庭

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  天气

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  Wallet

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  电话

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  音乐

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  主页几乎没变。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  我好奇到底有谁会用那两颗按钮,可能我音乐太多了。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  播放器本身几乎没变(但还是有喔,找找看)。

  Safari

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  URL Bar 变高,满奇怪的决定;另外,网页卷动的摩擦力明显降低,应该是考量到现在 RWD 的超长网页越来越多。

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  Tabs 加上圆角

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  好读模式的 typography 有改善

  相机

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  右下角的 icon 参考了 MacBook Pro 的 Touch bar 设计规范,变成双 opacity 的设计

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  我觉得套用滤镜的 UI 原本做得比较好。

  FaceTime

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  Status bar 黑色我猜应该是 bug。

  Find My iPhone

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  邮件

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  

iOS 10 vs 11:完整 UI 比較分析-ios10和11哪个好

  以上就是 iOS 11 几个比较明显的设计变更,至于 iPad 的部份也差不多,比较明显的不同是 iPad + iOS 11 更强化了「拖/放」与「分割画面」的功能,那些 Apple 官网都有介绍了。

  除了玩大家来找碴以外,其实 Apple 的设计改版一向都是非常难得的学习和思考机会,因为这几乎等同是给你最佳解,你只要思考「为什麽这是最佳解」就好了,建议刚入门的朋友利用这机会多看多想。

  原文地址:https://medium.com/uxabc/ios11-design-diff-7cbf8f38369f

  作者地址:https://fb.me/chihyueh.hu

  作者:Taylor Hu

本周热文

高考借势营销海报,杜蕾斯绝对有诚意!

薛之谦拍了一支神经病广告!

月薪30000的文案,都在高三教室的墙上

上海地铁惊现史上最长长长长长长长长长长长长长文案

相关文章:

  • 考研路上 你被安利过这样的资料书吗?-考研资料哪个好2025-02-20 03:01:05
  • 苹果11看片会不会变卡(iOS11新功能让你尽情看片,设计不在反人类!)2025-02-20 03:01:05
  • 考研英语大作文万能模板11套_2017考研:英语作文万能模板(全)2025-02-20 03:01:05
  • 江苏射阳县属于哪个市_人民日报:江苏射阳一小学积极开展社会活动寓教于乐2025-02-20 03:01:05
  • 小米和苹果哪个品牌好_李叫兽:苹果小米FB这些品牌,为什么现在不酷了?2025-02-20 03:01:05
  • 威尼斯华语片零入围 解读:像奥斯卡前哨战-威尼斯是哪个国家的2025-02-20 03:01:05
  • 小米和快手哪个公司前景好_城市与乡村,白领与蓝领,看透快手、小米公司兴衰2025-02-20 03:01:05
  • 中央社会工作会议11月5日至6日在京召开_11月4-6日上海站-创造之旅,一堂震撼身心灵魂的生命旅程!欢迎您!2025-02-20 03:01:05
  • 文章已关闭评论!