Top Ad unit 728 × 90

Breaking News

軟體下載

通過iOS 人機交互指南的變化看Apple iOS7的設計理念

通過iOS 人機交互指南的變化看iOS7的設計理念

iOS7在介面上最大的變化就是拋棄了Apple使用了多年的擬物化設計,而轉投扁平化設計陣營。一時間,業界評論褒貶不一,槽點多多亦不乏溢美之詞。我們先暫且不去評判新的圖示和整體設計風格的好壞,而是從其背後的設計理念的變化來思考Apple的新設計。


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

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






1.強調充分利用螢幕空間


通過iOS 人機交互指南的變化看iOS7的設計理念

iOS7強調讓內容自然地延伸至整個螢幕,而不使用多餘的視覺元素將內容與操作區、資訊區分開。一個最明顯的例子就是頂部狀態列融入內容,不再用線條分割開,使使用者在視覺上感覺內容空間變大。



2.iOS7地圖應用


通過iOS 人機交互指南的變化看iOS7的設計理念

為了使螢幕主體內容更加突出,更多地呈現給使用者,必要時會隱藏UI元素,將螢幕空間讓給內容。iOS7在很多原生應用中都是用了自動隱藏上下狀態列和巡覽列的設計。地圖應用中甚至連最頂端的狀態列也一併隱藏了。




3.弱化控制項視覺效果,以避免干擾內容

通過iOS 人機交互指南的變化看iOS7的設計理念

這一點是iOS7最明顯的變化,也就是所謂的扁平化設計風格。新的設計去除了iOS6系統控制項的紋理和質感表現,非必要時不再使用擬物化方法來表達。最明顯的例子是系統按鈕控制項,不再使用擬物化的按鈕邊框及高光、陰影,取而代之的是簡化的圖示元素和操作內容。




4.iOS7和iOS6備忘錄

通過iOS 人機交互指南的變化看iOS7的設計理念

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

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




5.iOS7和iOS6日曆

通過iOS 人機交互指南的變化看iOS7的設計理念

優化內容元素,使其清晰可見

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

iOS7的日曆是一個留白運用的經典例子,空白空間的使用使得iOS7的日曆內容更加突出,並不在有iOS6日曆的擁擠和緊迫感。




6.iOS7日曆


通過iOS 人機交互指南的變化看iOS7的設計理念

構建全新的層次空間,建立新的視覺秩序


iOS7引入了全新的視覺層次的概念,這種分層介面有助於營造縱深感,建立層次結構和秩序,並説明使用者理解螢幕元素間的物理關係。




7.iOS7介面分層結構圖

通過iOS 人機交互指南的變化看iOS7的設計理念

通過視差動畫營造縱深感


在主屏上,由於圖示層與背景層的分離,iOS7利用加速感應器檢測使用者視線角度的變化,控制不同層的位移速度,巧妙營造了視差動畫,從而螢幕元素活躍起來,營造了立體縱深感。

上圖是iOS7主屏在手機不同傾斜角度的截圖。可以看到在不同角度背景層與前面圖示的位置關係是不同的。




8.iOS7主螢幕

通過iOS 人機交互指南的變化看iOS7的設計理念

大量使用半透明UI元素

半透明效果能夠説明使用者盡可能多的瞭解到被遮擋的內容,並使使用者理解層與層之間的物理關係。





9.iOS7控制中心


通過iOS 人機交互指南的變化看iOS7的設計理念

相對於Android的控制中心介面,採用同樣的拉出的方式,iOS7半透明的設計能夠讓使用者瞭解到控制台和後面介面的層次關係,表達清晰,而安卓的面板,則更容易迷失。

在iOS6中,時間選擇器採用了非常逼真的擬物化效果,類比了撥輪進行時間設置。IOS7則去除了撥輪的質感和紋理,將其扁平化,通過透視原理和半透明玻璃效果表現了一個扁平化的撥輪。值得注意的一點是,iOS7的玻璃效果處理得非常逼真到位,選擇時間的中間狀態裡,體現出了玻璃的折射效果。這一點在iOS6中並沒有見到。




10.iOS7時間選擇器 vs iOS6時間選擇器

通過iOS 人機交互指南的變化看iOS7的設計理念


通過iOS 人機交互指南的變化看iOS7的設計理念

鼓勵採用深度層次的資訊結構

在資訊結構上,iOS7更鼓勵採用深度層次來與使用者交流,並要求隱喻更加符合物理世界。

iOS7的資料夾摒棄了iOS6的螢幕裂開效果,而是採用了置於主屏之上的毛玻璃效果。這與系統整體的層次關係是相呼應的,在iOS7的層級秩序裡,背景層始終是處於最底層的,其他表現層則置於其上。那麼資料夾的打開則理應是懸浮于主屏之上,並採用毛玻璃的效果表達其層次關係。

同時,iOS7一致性的應用/資料夾打開動畫,也體現出了這種深度層次關係。與iOS6的打開動畫不同,iOS7的打開動畫是以被點擊的應用/資料夾為中心,向四周放大的形式打開,表現出一個非常合理的深度層次關係。而iOS6則無論被點擊應用/資料夾位置,均是以螢幕中心點為中心,向四周放大打開。從這一動畫方式的改變可以看出,iOS7更注重動畫與真實物理世界規則的對應,而不僅是流於形式。




11.iOS7與iOS6的資料夾


通過iOS 人機交互指南的變化看iOS7的設計理念

iOS7的日曆應用採用了年、月、日3個深度層級的資訊結構,這較之iOS6的日曆,是一個很大的變化。IOS6的日曆應用強調扁平化的資訊結構,整個應用只有一個深度層級,月、日的切換通過TAB切換來實現,其他所有操作功能也都在這個一個層級中進行。深度的層級設計能夠有效減少每個層級介面中的操作元素,是的介面更乾淨、整潔,內容元素突出。與這種深度層級配合的轉場動畫與前面提到的系統打開應用/資料夾的動畫一致,均已使用者點擊出為中心點進行放大,向使用者傳達出與深度層級相對應的縱深感。




12.iOS7與iOS6的日曆


通過iOS 人機交互指南的變化看iOS7的設計理念

同樣的深度層級結構也運用到了圖片應用中,圖片的四個層級一次是年度、精選時刻和單圖。




13.iOS7圖片


通過iOS 人機交互指南的變化看iOS7的設計理念

通過Apple最新的iOS人機交互指南我們可以看出,Apple在對待所謂「扁平化」設計風格上是有著自己獨到的設計理念的。正如Apple官網所說的那樣,「人們常常將簡約等同于極簡主義。但是,真正的簡約遠不止刪除矯飾和去除雜亂那麼簡單。而是因應你的需要,因地、因時恰到好處地展現每一方面。刪繁就簡,事事有序,以及確保所做的每一件事總是「行之有效」。當你第一次上手使用,就對它所能做的了然于胸時,那就是簡約。」

但好的設計理念,仍需不斷打磨,經過千錘百煉的設計來表現。從本次發佈的iOS7 Beta的很多細節不難看出,本次iOS7的發佈是倉促的,許多設計還有很多值得推敲的地方,因此也引來眾多吐槽。不過,相信未來,隨著新設計風格的不斷完善,Apple還會是果粉心目中的那個Apple





(資料來源:人人小站)

通過iOS 人機交互指南的變化看Apple iOS7的設計理念 Reviewed by Whoops SEO on 10:06 上午 Rating: 5
All Rights Reserved by TechRoomage | 科技空間 © 2014 - 2015
Designed by TechRoomage

聯絡表單

名稱

以電子郵件傳送 *

訊息 *

技術提供:Blogger.