通過iOS人機(jī)交互指南的變化看iOS7的設(shè)計理念

0 評論 2322 瀏覽 3 收藏 12 分鐘

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

 

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

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

從iOS7具體的設(shè)計表現(xiàn)來看,以下幾點對其設(shè)計理念做出了很好的詮釋。

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

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

               iOS7的天氣和備忘錄

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

ios7地圖

             iOS7地圖應(yīng)用

ios7-safari

              iOS7的safari

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

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

ios6和7備忘錄

               iOS7和iOS6備忘錄

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

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

 

ios6和7日歷

                iOS7和iOS6日歷

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

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

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

ios7日歷

        iOS7日歷

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

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

image012

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

通過視差動畫營造縱深感

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

下圖是iOS7主屏在手機(jī)不同傾斜角度的截圖。可以看到在不同角度背景層與前面圖標(biāo)的位置關(guān)系是不同的。

ios7主屏

                iOS7主屏

大量使用半透明UI元素

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

ios7控制中心

       iOS7控制中心

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

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

 

ios7時間選擇器

 

iOS7時間選擇器

ios6時間選擇器

               iOS6時間選擇器

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

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

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

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

ios6和7文件夾

               iOS7與iOS6的文件夾

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

ios6和7日歷對比

               iOS7與iOS6的日歷

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

ios7圖片

               iOS7圖片

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

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

VIA:騰訊CDC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!