從iOS 10設(shè)計(jì)指南變化看設(shè)計(jì)的新趨勢(shì)
2016-12-15 17:04:54
9月7日，Apple將會(huì)召開(kāi)本年度的秋季發(fā)布會(huì)，發(fā)布的新產(chǎn)品包括新款的MacBook Pro、iPhone 7以及Apple Watch 2。但是我更加關(guān)注的是隨著iPhone 7一起發(fā)布的iOS 10正式版，因?yàn)樵谥?月份的WWDC 2016大會(huì)上，Apple就宣稱(chēng)iOS 10是「The biggest iOS release ever」，這次正式版的發(fā)布，Apple應(yīng)該會(huì)對(duì)iOS 10給予重大的期望。
在iOS 10正式發(fā)布前夕，本文主要針對(duì)已經(jīng)發(fā)布的iOS 10的人機(jī)界面設(shè)計(jì)指南（Human Interface Guidelines，簡(jiǎn)稱(chēng)HIG）來(lái)對(duì)比分析新老版本的iOS系統(tǒng)在設(shè)計(jì)上究竟有哪些改變，有哪些設(shè)計(jì)趨勢(shì)值得我們注意。
改變：越來(lái)越像給設(shè)計(jì)師用的「設(shè)計(jì)指南」
首先，我們先來(lái)看一下iOS 10之前的HIG歷史版本記錄，了解一下在以前的版本中Apple都做了些什么：
圖1 iOS HIG Revision History
自從iOS 7開(kāi)始，每個(gè)版本的HIG都是在同一個(gè)框架中進(jìn)行維護(hù)的，而且維護(hù)頻率之低改動(dòng)幅度之小令人發(fā)指（當(dāng)然跟Apple一貫的嚴(yán)謹(jǐn)風(fēng)格有關(guān)）
而針對(duì)設(shè)計(jì)部分的內(nèi)容一共也只有兩次改動(dòng)，這種情況一直持續(xù)到iOS 9，如果你愿意把iOS 7、8、9三個(gè)版本的HIG拿出來(lái)一起看，簡(jiǎn)直就是在玩找茬游戲。
然后，我們?cè)倌胕OS 9 和 iOS 10 的HIG結(jié)構(gòu)框架進(jìn)行一下對(duì)比：
圖2 iOS HIG版本對(duì)比
幾乎是完全不同的結(jié)構(gòu)框架！
歷經(jīng)三年以及三個(gè)版本都沒(méi)動(dòng)過(guò)的框架被開(kāi)了刀，我相信Apple的設(shè)計(jì)師絕對(duì)不是因?yàn)殚e的無(wú)聊才干出這種事的。
對(duì)于Apple這種嚴(yán)謹(jǐn)且強(qiáng)迫癥的公司來(lái)說(shuō)，做每一件事必然有其原因，這里面?zhèn)鬟f出了一個(gè)信號(hào)：iOS 10的設(shè)計(jì)會(huì)發(fā)生「重大改變」，而Apple也期望通過(guò)設(shè)計(jì)的改變來(lái)獲取更多的用戶(hù)。
讓我們把視角再深入到具體的章節(jié)中，看看都有些什么變化：
1）增加了之前沒(méi)有過(guò)的Interaction章節(jié) (主要內(nèi)容為軟硬件與用戶(hù)的交互）
2）原來(lái)的Icon and Image Design章節(jié)(主要內(nèi)容為系統(tǒng)中不同情境下的icon設(shè)計(jì)定義）改名為Graphics章節(jié)并且優(yōu)先級(jí)上浮
3）原來(lái)的iOS Technologies章節(jié)（系統(tǒng)中的新技術(shù)）改名為T(mén)echnologies章節(jié)且優(yōu)先級(jí)下移
4）原來(lái)UI Design Basics章節(jié)中的動(dòng)畫(huà)/品牌/色彩/布局/字體的內(nèi)容專(zhuān)門(mén)提取出來(lái)生成新的Visual Design章節(jié)
5）原來(lái)的UI Elements一級(jí)目錄被取消，其中的二級(jí)目錄全部成為了一級(jí)目錄
圖4 iOS HIG版本對(duì)比
6）增加了新的Resources章節(jié)，提供了PSD Templates、San Francisco Fonts和Xcode Projects的下載！這是讓我覺(jué)得最有誠(chéng)意的部分了！你什么時(shí)候見(jiàn)過(guò)Apple爸爸這么貼心了！
Apple的設(shè)計(jì)師對(duì)內(nèi)部的細(xì)節(jié)內(nèi)容也進(jìn)行了翻新和擴(kuò)建，在這里就不贅述了，但是確實(shí)值得大家細(xì)細(xì)去研究一番的，傳送門(mén)在此：The world’s most advanced mobile OS offers everything you need to design beautiful, engaging apps that radiate power and simplicity.
我個(gè)人的感覺(jué)是，以前的HIG像是寫(xiě)給非設(shè)計(jì)人士/個(gè)人開(kāi)發(fā)者的，使當(dāng)年的他們?cè)谌狈?zhuān)業(yè)設(shè)計(jì)師的條件下也能保證產(chǎn)品的基礎(chǔ)體驗(yàn)；現(xiàn)在的HIG更像是寫(xiě)給專(zhuān)業(yè)設(shè)計(jì)師的，說(shuō)明了移動(dòng)互聯(lián)網(wǎng)整個(gè)行業(yè)已經(jīng)成熟，職業(yè)分工越來(lái)越細(xì)，職業(yè)化程度越來(lái)越高，而用戶(hù)和行業(yè)對(duì)設(shè)計(jì)的要求、設(shè)計(jì)對(duì)于產(chǎn)品的重要性也達(dá)到了一個(gè)新的高度。
而重視設(shè)計(jì)的Apple變的更加關(guān)注設(shè)計(jì)，試圖像當(dāng)年iOS 7一樣，在設(shè)計(jì)和體驗(yàn)上帶一波新的節(jié)奏。
P.S. 在這個(gè)方向上走在前列的是早在14年就發(fā)布了Material Design的Google
趨勢(shì)：大而簡(jiǎn)，簡(jiǎn)而精
在HIG最最最重要的設(shè)計(jì)原則的部分，仍然是萬(wàn)年不變的Deference/Clarity/Depth。
但是不知道大家有沒(méi)有注意，其中有了一個(gè)非常細(xì)微的變化，就是萬(wàn)年老二的Clarity（清晰）原則，這次成了老大。具體原因也只有Apple的設(shè)計(jì)師知道了（貌似是來(lái)自于用戶(hù)吐槽），但是就結(jié)果來(lái)說(shuō)，「清晰」這一設(shè)計(jì)準(zhǔn)則應(yīng)當(dāng)會(huì)是以后的設(shè)計(jì)趨勢(shì)和重點(diǎn)
另外，對(duì)于設(shè)計(jì)原則的解釋的內(nèi)容也增多了，不要以為Apple突然抽風(fēng)從冰山美人變成了話(huà)癆，增多的內(nèi)容恰恰告訴了我們Apple重視的究竟是什么。
圖6 新老設(shè)計(jì)三原則對(duì)比
在Clarity（清晰）原則中，增加了一段解釋?zhuān)毫舭?、色彩、字體、圖形和界面元素要強(qiáng)調(diào)重要內(nèi)容并且對(duì)交互進(jìn)行指引。
我們抽取一下其中的關(guān)鍵字，內(nèi)容、留白、色彩、字體、界面元素，從描述來(lái)看，界面的內(nèi)容將成為Apple關(guān)注的重點(diǎn)，其他關(guān)鍵字都是為內(nèi)容的傳達(dá)而服務(wù)的。但是，具體到底是怎么實(shí)施的呢？
實(shí)際上在WWDC 2016大會(huì)上展示的Apple Music已經(jīng)告訴了我們答案：
圖7 Apple Music改版
答案就是：加大字號(hào)！加粗字體！加多留白！減少頁(yè)面的視覺(jué)層級(jí)！
另外還有……加大控件?。?！在鎖屏播放界面中，播放和音量的控件都被明顯放大了，并且控件之間的間距也被加大了，大大降低了被誤觸的概率。
圖8 鎖屏播放改版
以及給重要控件賦予色彩。新的控制中心的按鈕都有了不同的顏色，從而讓他們具有更明顯的區(qū)分度以及視覺(jué)注意度，同樣的，按鈕也被加大了不少，Night Shift、AirPlay和AirDrop更是被獨(dú)立了出來(lái)。
圖9 Control Center改版
這樣的優(yōu)化出現(xiàn)在更多的界面中，再以新版的地圖為例：
首先是控件位置的變化，原來(lái)的“開(kāi)始”從底部移動(dòng)到了規(guī)劃路線的右側(cè)，變的更加明顯并且與路線本身產(chǎn)生更強(qiáng)的關(guān)聯(lián)性；集中在頂部的操作也全部被移動(dòng)到了底部，在大屏手機(jī)下的用戶(hù)操作變的更加便捷，手指不用上下來(lái)回移動(dòng)也能完成所有的操作了。
然后是控件形式的變化，原來(lái)的“開(kāi)始”由純文字Label變成了一個(gè)綠色的按鈕，對(duì)用戶(hù)產(chǎn)生了更強(qiáng)的視覺(jué)指引，還有個(gè)細(xì)節(jié)就是文案也由原來(lái)的「Start（開(kāi)始）」 變成了 「Go（出發(fā)）」
圖10 Apple Map改版
這些改進(jìn)具有一些共同點(diǎn)：
1. 通過(guò)對(duì)字體大小和粗細(xì)的調(diào)整以及更多的留白來(lái)幫助用戶(hù)理解界面的層級(jí)架構(gòu)，取代了之前使用平面元素的分割和分層來(lái)構(gòu)建界面架構(gòu)的方式，從而讓界面變的更加扁平，內(nèi)容更加突出。另外，讓具有一定程度視覺(jué)障礙的用戶(hù)（色盲/色弱/老年人）也能夠無(wú)障礙的使用。
2. 放大按鈕的尺寸、改變按鈕的布局、賦予按鈕不同的色彩來(lái)提高用戶(hù)對(duì)可操作內(nèi)容的認(rèn)知，降低點(diǎn)擊操作的難度，使界面與用戶(hù)的交互行為變的更友好。引用Apple在它的Accessibility Guideline（無(wú)障礙指南）中的描述就是「You view what you can do」 和「We make it easy to push all the right buttons」
當(dāng)然，這些變化解決了一些問(wèn)題，但是帶來(lái)了一些新的問(wèn)題，比如在Apple Music中，內(nèi)容展示效率的下降，原來(lái)能夠展示6張專(zhuān)輯的界面，現(xiàn)在只能放下3張。不過(guò)目前發(fā)布的仍然是Beta版，不知道在正式版中是否會(huì)Fix這些問(wèn)題。
但是，「The biggest iOS release ever」，iOS 10名至實(shí)歸。
比Apple Music做的更早更徹底的Airbnb
似乎不光是Apple一家在試圖進(jìn)行這樣的改進(jìn)，這種趨勢(shì)已經(jīng)開(kāi)始蔓延。比如Airbnb在Apple今年4月份上線的新設(shè)計(jì)，幾乎完全舍棄了原來(lái)以圖片襯底為主的設(shè)計(jì)，換成了大面積的留白和加粗加大的文字，底tab的高度也加高了不少，當(dāng)然，按鈕也加大了一圈。
全新的設(shè)計(jì)去掉了任何可能會(huì)給用戶(hù)帶來(lái)視覺(jué)干擾的東西，變的極度的純粹。
圖11 Airbnb改版
本人的好友JJ-Ying也在前段時(shí)間的博文「后扁平化時(shí)代」的 i18n 和 L10n中詳細(xì)的分析了Airbnb的這次改版，引用文章內(nèi)一個(gè)有趣的描述Airbnb的新設(shè)計(jì)是「比交互稿還交互稿」，不過(guò)他在文中更多關(guān)注的問(wèn)題是：在這樣的趨勢(shì)下，字體設(shè)計(jì)與產(chǎn)品品牌的關(guān)系以及在進(jìn)行本地化與國(guó)際化設(shè)計(jì)時(shí)設(shè)計(jì)師所遇到的挑戰(zhàn)。
另外一個(gè)搭上這班車(chē)的公司就是Instagram
幾乎是緊接著Airbnb的步伐Instagram就發(fā)布了他們的新LOGO和新設(shè)計(jì)。對(duì)于褒貶不一的新LOGO我們暫且放在一邊，主要還是看看UI的變化：
Ins去掉了頭欄和底欄的顏色，通過(guò)加粗文字的方式來(lái)區(qū)分內(nèi)容結(jié)構(gòu)，取代了之前通過(guò)給文字添加顏色的方式（如：用戶(hù)昵稱(chēng)、獲贊數(shù)）。
圖12 Instagram改版
Ins的設(shè)計(jì)總監(jiān)Ian在Medium上對(duì)于這次改版的說(shuō)明是：“我們的新icon已經(jīng)足夠colorful了（確實(shí)非常colorful……），所以我們更希望App內(nèi)的顏色是來(lái)自于用戶(hù)上傳的照片和視頻，然后我們就把影響用戶(hù)內(nèi)容展現(xiàn)的干擾給干掉了。”
結(jié)語(yǔ)
總結(jié)成一句話(huà)來(lái)形容這股趨勢(shì)就是「大而簡(jiǎn)，簡(jiǎn)而精」。
在這股趨勢(shì)下，未來(lái)的設(shè)計(jì)將更注重產(chǎn)品的內(nèi)容和操作體驗(yàn)，降低其他因素對(duì)用戶(hù)使用上的干擾，這對(duì)設(shè)計(jì)師來(lái)說(shuō)，是不小的挑戰(zhàn)，因?yàn)樵胶?jiǎn)單的東西越難設(shè)計(jì)，特別是如何在界面設(shè)計(jì)中去把握「大」和「簡(jiǎn)」的程度以及如何通過(guò)更有限的手段和空間來(lái)傳達(dá)更多的信息和指引用戶(hù)來(lái)達(dá)到「精」的目標(biāo)，這是我們?cè)谖磥?lái)需要不斷考慮、探索和解決的問(wèn)題。
