iOS 10 vs 11:完整UI比较分析

iOS 11的新UI,有哪些改变?这些改变背后的想法又是什么?


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

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

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

1 功能与操作体验

2 设计语汇

3 产品策略

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

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

功能与操作体验

大幅简化的主画面结构

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


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


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

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

解锁画面


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

主画面


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

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

控制中心


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


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

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



横向Tab bar让出更多空间


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

用字重来改善可读性


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

键盘设计改变


数字键盘


方便单手打字的键盘

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

新增单手打字模式

设计语汇

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


App Store的新设计

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

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

顺带一提,我不喜欢称这些手法叫“卡牌UI”,我觉得那就如同把一堆明显不同的设计语言全都冠上平设计一样,是跟风且不精确的形容(唯一好处就是对外行解释比较方便),矩形+阴影到哪里都能见到,过去苹果在Passbook和提醒事项App就有这类设计了。

细节风格更新


应用介绍页


计算机

边角更圆润

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

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


全新的导航栏

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




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

图像(图形)与符号


应用程式图示

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

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

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

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

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


系统图标

状态栏讯号强度从•••••改回阶梯式

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

标签栏图标从空心/实心两态变成全实心粗线条设计,是配合整体设计调性,但对色盲有点小不利。

想一想:为什么“游戏”是用火箭,而不是用游戏手把来做图标?


Siri的

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

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

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


3.产品设计策略

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

应用商店


主页改成「今天」,与消费者的对话变得更重质一点,因为现在使用者心里的声音已经不是早期的「有没有得下载?」,而是「我为什么要下载?」了。


至于以前的“整个App Store”,现在变成只有一个选项卡的份数,在导航系统里整整下降一级。

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


排行榜


分类


搜寻

档案应用


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

其他设计比较

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

Widget管理画面

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


照片




行事历



这个画面左上角的“2017年6月”变成“2017”,原本以为是功能,因为把nav button当成nav标题用不太合理;但经网友指出,这样一来会变成没有显示当前月份,易造成混淆。我觉得挺有道理的,苹果应该不会为了改善一个缺点而制造更多缺陷,因此想一想是bug的可能性较大。

播客

让视觉和操作体验与苹果音乐统一,等好久了。





家庭


天气


钱包


电话




音乐




苹果浏览器


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

标签加上圆角

好读模式的排版有改善

相机


右下角的图标参考了MacBook Pro的Touch Bar设计规范,变成双opacity的设计

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

视频对话


状态栏黑色我猜应该是bug。

查找我的iPhone


邮件



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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,444评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 面对那些嘴贱的人 要么就不理 要么就大胆还击 人生这么短暂 老娘凭什么委屈自己去取悦你
    麦子lol阅读 177评论 0 0
  • 2017.03.26 1.感恩父母帮助照顾孩子。 2.感恩儿子让我享受到幸福。 3.感恩先生的关心,为家努力付出。...
    冯梓源阅读 196评论 0 0
  • 本文参加#青春不一YOUNG#征稿活动,本人承诺,文章内容为原创,且未在其他平台发表过。 18岁的我们,如柿子一般...
    浅唱爱忧伤阅读 580评论 1 6