iOS7在界面上最大的變化就是拋棄了蘋果使用了多年的擬物化設(shè)計(jì)，而轉(zhuǎn)投扁平化設(shè)計(jì)陣營(yíng)。一時(shí)間，業(yè)界評(píng)論褒貶不一，槽點(diǎn)多多亦不乏溢美之詞。我們先暫且不去評(píng)判新的圖標(biāo)和整體設(shè)計(jì)風(fēng)格的好壞，而是從其背后的設(shè)計(jì)理念的變化來(lái)思考蘋果的新設(shè)計(jì)。

形式追隨功能，UI服務(wù)內(nèi)容

蘋果在更新的iOS人機(jī)交互指南中最先提到的一點(diǎn)就是Defer to Content（尊重內(nèi)容）。無(wú)論UI如何變化，內(nèi)容始終是體驗(yàn)的核心，UI永遠(yuǎn)是服務(wù)于內(nèi)容而不能影響內(nèi)容的表現(xiàn)。這不禁讓人想起louis sullivan(易斯·沙里文)當(dāng)年的那句”Form follows the function”（形式追隨功能），蘋果的這次改變實(shí)際上是對(duì)設(shè)計(jì)本源的重新認(rèn)知。

從iOS7具體的設(shè)計(jì)表現(xiàn)來(lái)看，以下幾點(diǎn)對(duì)其設(shè)計(jì)理念做出了很好的詮釋。

?強(qiáng)調(diào)充分利用屏幕空間

iOS7強(qiáng)調(diào)讓內(nèi)容自然地延伸至整個(gè)屏幕，而不使用多余的視覺(jué)元素將內(nèi)容與操作區(qū)、信息區(qū)分開。一個(gè)最明顯的例子就是頂部狀態(tài)欄融入內(nèi)容，不再用線條分割開，使用戶在視覺(jué)上感覺(jué)內(nèi)容空間變大。

　　　　　　　　　　　　　　　iOS7的天氣和備忘錄

　　為了使屏幕主體內(nèi)容更加突出，更多地呈現(xiàn)給用戶，必要時(shí)會(huì)隱藏UI元素，將屏幕空間讓給內(nèi)容。iOS7在很多原生應(yīng)用中都是用了自動(dòng)隱藏上下狀態(tài)欄和導(dǎo)航欄的設(shè)計(jì)。地圖應(yīng)用中甚至連最頂端的狀態(tài)欄也一并隱藏了。

　　　　　　　　　　　　　iOS7地圖應(yīng)用

　　　　　　　　　　　　　　iOS7的safari

弱化控件視覺(jué)效果，以避免干擾內(nèi)容

這一點(diǎn)是iOS7最明顯的變化，也就是所謂的扁平化設(shè)計(jì)風(fēng)格。新的設(shè)計(jì)去除了iOS6系統(tǒng)控件的紋理和質(zhì)感表現(xiàn)，非必要時(shí)不再使用擬物化方法來(lái)表達(dá)。最明顯的例子是系統(tǒng)按鈕控件，不再使用擬物化的按鈕邊框及高光、陰影，取而代之的是簡(jiǎn)化的圖標(biāo)元素和操作內(nèi)容。

　　　　　　　　　　　　　　　iOS7和iOS6備忘錄

　　　　iOS6的按鈕被指示箭頭和文字所取代，而為了表達(dá)元素的可操作性，iOS7定義了關(guān)鍵色這一概念。在同一個(gè)app中，使用區(qū)別于內(nèi)容的一致的統(tǒng)一用色來(lái)表達(dá)可操作元素。在備忘錄中，使用的是黃色；而在系統(tǒng)設(shè)置中，則統(tǒng)一使用了藍(lán)色作為關(guān)鍵色。

整體視覺(jué)效果上的變化，日歷的例子最為明顯，可以看到iOS7與iOS6兩種截然不同風(fēng)格的日歷表達(dá)方式，iOS7的日歷，內(nèi)容更加突出，操作元素被弱化；而iOS6的日歷，極具操控感，屏幕上每個(gè)內(nèi)容元素和操作元素都是可交互的。

　　　　　　　　　　　　　　　　iOS7和iOS6日歷

?優(yōu)化內(nèi)容元素，使其清晰可見

我們知道，在設(shè)計(jì)中運(yùn)用留白可以使得要表現(xiàn)的主體內(nèi)容和功能更加突出。在iOS人機(jī)交互指南中，是這樣描述留白的：空白可以向用戶傳遞寧?kù)o和安寧的感覺(jué)，讓app顯得更專注，更有效率。

iOS7的日歷是一個(gè)留白運(yùn)用的經(jīng)典例子，空白空間的使用使得iOS7的日歷內(nèi)容更加突出，并不在有iOS6日歷的擁擠和緊迫感。

　　　　　　　　iOS7日歷

構(gòu)建全新的層次空間，建立新的視覺(jué)秩序

iOS7引入了全新的視覺(jué)層次的概念，這種分層界面有助于營(yíng)造縱深感，建立層次結(jié)構(gòu)和秩序，并幫助用戶理解屏幕元素間的物理關(guān)系。

　　　　　　　　　　　　　　　iOS7界面分層結(jié)構(gòu)圖

通過(guò)視差動(dòng)畫營(yíng)造縱深感

在主屏上，由于圖標(biāo)層與背景層的分離，iOS7利用加速感應(yīng)器檢測(cè)用戶視線角度的變化，控制不同層的位移速度，巧妙營(yíng)造了視差動(dòng)畫，從而屏幕元素活躍起來(lái)，營(yíng)造了立體縱深感。

下圖是iOS7主屏在手機(jī)不同傾斜角度的截圖?？梢钥吹皆诓煌嵌缺尘皩优c前面圖標(biāo)的位置關(guān)系是不同的。

　　　　　　　　　　　　　　　　iOS7主屏

大量使用半透明UI元素

半透明效果能夠幫助用戶盡可能多的了解到被遮擋的內(nèi)容，并使用戶理解層與層之間的物理關(guān)系。

　　　　　　　iOS7控制中心

　　相對(duì)于安卓的控制中心界面，采用同樣的拉出的方式，iOS7半透明的設(shè)計(jì)能夠讓用戶了解到控制面板和后面界面的層次關(guān)系，表達(dá)清晰，而安卓的面板，則更容易迷失。

在iOS6中，時(shí)間選擇器采用了非常逼真的擬物化效果，模擬了撥輪進(jìn)行時(shí)間設(shè)置。IOS7則去除了撥輪的質(zhì)感和紋理，將其扁平化，通過(guò)透視原理和半透明玻璃效果表現(xiàn)了一個(gè)扁平化的撥輪。值得注意的一點(diǎn)是，iOS7的玻璃效果處理得非常逼真到位，選擇時(shí)間的中間狀態(tài)里，體現(xiàn)出了玻璃的折射效果。這一點(diǎn)在iOS6中并沒(méi)有見到。

iOS7時(shí)間選擇器

　　　　　　　　　　　　　　　iOS6時(shí)間選擇器

鼓勵(lì)采用深度層次的信息結(jié)構(gòu)

在信息結(jié)構(gòu)上，iOS7更鼓勵(lì)采用深度層次來(lái)與用戶交流，并要求隱喻更加符合物理世界。

iOS7的文件夾摒棄了iOS6的屏幕裂開效果，而是采用了置于主屏之上的毛玻璃效果。這與系統(tǒng)整體的層次關(guān)系是相呼應(yīng)的，在iOS7的層級(jí)秩序里，背景層始終是處于最底層的，其他表現(xiàn)層則置于其上。那么文件夾的打開則理應(yīng)是懸浮于主屏之上，并采用毛玻璃的效果表達(dá)其層次關(guān)系。

同時(shí)，iOS7一致性的應(yīng)用/文件夾打開動(dòng)畫，也體現(xiàn)出了這種深度層次關(guān)系。與iOS6的打開動(dòng)畫不同，iOS7的打開動(dòng)畫是以被點(diǎn)擊的應(yīng)用/文件夾為中心，向四周放大的形式打開，表現(xiàn)出一個(gè)非常合理的深度層次關(guān)系。而iOS6則無(wú)論被點(diǎn)擊應(yīng)用/文件夾位置，均是以屏幕中心點(diǎn)為中心，向四周放大打開。從這一動(dòng)畫方式的改變可以看出，iOS7更注重動(dòng)畫與真實(shí)物理世界規(guī)則的對(duì)應(yīng)，而不僅是流于形式。

　　　　　　　　　　　　　　　iOS7與iOS6的文件夾

?　　iOS7的日歷應(yīng)用采用了年、月、日3個(gè)深度層級(jí)的信息結(jié)構(gòu)，這較之iOS6的日歷，是一個(gè)很大的變化。IOS6的日歷應(yīng)用強(qiáng)調(diào)扁平化的信息結(jié)構(gòu)，整個(gè)應(yīng)用只有一個(gè)深度層級(jí)，月、日的切換通過(guò)TAB切換來(lái)實(shí)現(xiàn)，其他所有操作功能也都在這個(gè)一個(gè)層級(jí)中進(jìn)行。深度的層級(jí)設(shè)計(jì)能夠有效減少每個(gè)層級(jí)界面中的操作元素，是的界面更干凈、整潔，內(nèi)容元素突出。與這種深度層級(jí)配合的轉(zhuǎn)場(chǎng)動(dòng)畫與前面提到的系統(tǒng)打開應(yīng)用/文件夾的動(dòng)畫一致，均已用戶點(diǎn)擊出為中心點(diǎn)進(jìn)行放大，向用戶傳達(dá)出與深度層級(jí)相對(duì)應(yīng)的縱深感。

　　　　　　　　　　　　　　　iOS7與iOS6的日歷

　　同樣的深度層級(jí)結(jié)構(gòu)也運(yùn)用到了圖片應(yīng)用中，圖片的四個(gè)層級(jí)一次是年度、精選時(shí)刻和單圖。

　　　　　　　　　　　　　　　iOS7圖片

?　　通過(guò)蘋果最新的iOS人機(jī)交互指南我們可以看出，蘋果在對(duì)待所謂“扁平化”設(shè)計(jì)風(fēng)格上是有著自己獨(dú)到的設(shè)計(jì)理念的。正如蘋果官網(wǎng)所說(shuō)的那樣，“人們常常將簡(jiǎn)約等同于極簡(jiǎn)主義。但是，真正的簡(jiǎn)約遠(yuǎn)不止刪除矯飾和去除雜亂那么簡(jiǎn)單。而是因應(yīng)你的需要，因地、因時(shí)恰到好處地展現(xiàn)每一方面。刪繁就簡(jiǎn)，事事有序，以及確保所做的每一件事總是“行之有效”。當(dāng)你第一次上手使用，就對(duì)它所能做的了然于胸時(shí)，那就是簡(jiǎn)約?！?/p>

但好的設(shè)計(jì)理念，仍需不斷打磨，經(jīng)過(guò)千錘百煉的設(shè)計(jì)來(lái)表現(xiàn)。從本次發(fā)布的iOS7 beta的很多細(xì)節(jié)不難看出，本次iOS7的發(fā)布是倉(cāng)促的，許多設(shè)計(jì)還有很多值得推敲的地方，因此也引來(lái)眾多吐槽。不過(guò)，相信未來(lái)，隨著新設(shè)計(jì)風(fēng)格的不斷完善，蘋果還會(huì)是果粉心目中的那個(gè)蘋果。

VIA:騰訊CDC