Facebook加入
LINE加入
2021/12/25
通過iOS人機交互指南的變化看iOS7的設計理念
這一次的教學是屬於設計理論領域中的設計理論的相關教學。
文章出處是來自優設的設計理論類文章，寫教學的作者是騰訊，感謝騰訊提供設計理論的實作教學。
教學大綱:
iOS7在界面上最大的變化就是拋棄了蘋果使用了多年的擬物化設計，而轉投扁平化設計陣營。一時間，業界評論褒貶不一，槽點多多亦不乏溢美之詞。我們先暫且不去評判新的圖標和整體設計風格的好壞，而是從其背後的設計理念的變化來思考蘋果的新設計。
設計理論教學開始
iOS7在界面上最大的變化就是拋棄了蘋果使用了多年的擬物化設計，而轉投扁平化設計陣營。一時間，業界評論褒貶不一，槽點多多亦不乏溢美之詞。我們先暫且不去評判新的圖標和整體設計風格的好壞，而是從其背後的設計理念的變化來思考蘋果的新設計。
形式追隨功能，UI服務內容
蘋果在更新的iOS人機交互指南中最先提到的一點就是Defer to Content(尊重內容)。無論UI如何變化，內容始終是體驗的核心，UI永遠是服務於內容而不能影響內容的表現。這不禁讓人想起louis sullivan(易斯·沙里文)當年的那句”Form follows the function”(形式追隨功能)，蘋果的這次改變實際上是對設計本源的重新認知。
從iOS7具體的設計表現來看，以下幾點對其設計理念做出了很好的詮釋。
強調充分利用屏幕空間
iOS7強調讓內容自然地延伸至整個屏幕，而不使用多餘的視覺元素將內容與操作區、信息區分開。一個最明顯的例子就是頂部狀態欄融入內容，不再用線條分割開，使用戶在視覺上感覺內容空間變大。
iOS7的天氣和備忘錄
為了使屏幕主體內容更加突出，更多地呈現給用戶，必要時會隱藏UI元素，將屏幕空間讓給內容。iOS7在很多原生應用中都是用了自動隱藏上下狀態欄和導航欄的設計。地圖應用中甚至連最頂端的狀態欄也一併隱藏了。
iOS7地圖應用
iOS7的safari
弱化控件視覺效果，以避免干擾內容
這一點是iOS7最明顯的變化，也就是所謂的扁平化設計風格。新的設計去除了iOS6系統控件的紋理和質感表現，非必要時不再使用擬物化方法來表達。最明顯的例子是系統按鈕控件，不再使用擬物化的按鈕邊框及高光、陰影，取而代之的是簡化的圖標元素和操作內容。
iOS7和iOS6備忘錄
iOS6的按鈕被指示箭頭和文字所取代，而為了表達元素的可操作性，iOS7定義了關鍵色這一概念。在同一個app中，使用區別於內容的一致的統一用色來表達可操作元素。在備忘錄中，使用的是黃色;而在系統設置中，則統一使用了藍色作為關鍵色。
整體視覺效果上的變化，日曆的例子最為明顯，可以看到iOS7與iOS6兩種截然不同風格的日曆表達方式，iOS7的日曆，內容更加突出，操作元素被弱化;而iOS6的日曆，極具操控感，屏幕上每個內容元素和操作元素都是可交互的。
iOS7和iOS6日曆
優化內容元素，使其清晰可見
我們知道，在設計中運用留白可以使得要表現的主體內容和功能更加突出。在iOS人機交互指南中，是這樣描述留白的：空白可以向用戶傳遞寧靜和安寧的感覺，讓app顯得更專註，更有效率。
iOS7的日曆是一個留白運用的經典例子，空白空間的使用使得iOS7的日曆內容更加突出，並不在有iOS6日曆的擁擠和緊迫感。
iOS7日曆
構建全新的層次空間，建立新的視覺秩序
iOS7引入了全新的視覺層次的概念，這種分層界面有助於營造縱深感，建立層次結構和秩序，並幫助用戶理解屏幕元素間的物理關係。
iOS7界面分層結構圖
通過視差動畫營造縱深感
在主屏上，由於圖標層與背景層的分離，iOS7利用加速感應器檢測用戶視線角度的變化，控制不同層的位移速度，巧妙營造了視差動畫，從而屏幕元素活躍起來，營造了立體縱深感。
下圖是iOS7主屏在手機不同傾斜角度的截圖。可以看到在不同角度背景層與前面圖標的位置關係是不同的。
iOS7主屏
大量使用半透明UI元素
半透明效果能夠幫助用戶儘可能多的了解到被遮擋的內容，並使用戶理解層與層之間的物理關係。
iOS7控制中心
相對於安卓的控制中心界面，採用同樣的拉出的方式，iOS7半透明的設計能夠讓用戶了解到控制面板和後面界面的層次關係，表達清晰，而安卓的面板，則更容易迷失。
在iOS6中，時間選擇器採用了非常逼真的擬物化效果，模擬了撥輪進行時間設置。IOS7則去除了撥輪的質感和紋理，將其扁平化，通過透視原理和半透明玻璃效果表現了一個扁平化的撥輪。值得注意的一點是，iOS7的玻璃效果處理得非常逼真到位，選擇時間的中間狀態里，體現出了玻璃的折射效果。這一點在iOS6中並沒有見到。
iOS7時間選擇器
iOS6時間選擇器
鼓勵採用深度層次的信息結構
在信息結構上，iOS7更鼓勵採用深度層次來與用戶交流，並要求隱喻更加符合物理世界。
iOS7的文件夾摒棄了iOS6的屏幕裂開效果，而是採用了置於主屏之上的毛玻璃效果。這與系統整體的層次關係是相呼應的，在iOS7的層級秩序里，背景層始終是處於最底層的，其他表現層則置於其上。那麼文件夾的打開則理應是懸浮於主屏之上，並採用毛玻璃的效果表達其層次關係。
同時，iOS7一致性的應用/文件夾打開動畫，也體現出了這種深度層次關係。與iOS6的打開動畫不同，iOS7的打開動畫是以被點擊的應用/文件夾為中心，向四周放大的形式打開，表現出一個非常合理的深度層次關係。而iOS6則無論被點擊應用/文件夾位置，均是以屏幕中心點為中心，向四周放大打開。從這一動畫方式的改變可以看出，iOS7更注重動畫與真實物理世界規則的對應，而不僅是流於形式。
iOS7與iOS6的文件夾
iOS7的日曆應用採用了年、月、日3個深度層級的信息結構，這較之iOS6的日曆，是一個很大的變化。IOS6的日曆應用強調扁平化的信息結構，整個應用只有一個深度層級，月、日的切換通過TAB切換來實現，其他所有操作功能也都在這個一個層級中進行。深度的層級設計能夠有效減少每個層級界面中的操作元素，是的界面更乾淨、整潔，內容元素突出。與這種深度層級配合的轉場動畫與前面提到的系統打開應用/文件夾的動畫一致，均已用戶點擊出為中心點進行放大，向用戶傳達出與深度層級相對應的縱深感。
iOS7與iOS6的日曆
同樣的深度層級結構也運用到了圖片應用中，圖片的四個層級一次是年度、精選時刻和單圖。
iOS7圖片
通過蘋果最新的iOS人機交互指南我們可以看出，蘋果在對待所謂”扁平化”設計風格上是有着自己獨到的設計理念的。正如蘋果官網所說的那樣，”人們常常將簡約等同於極簡主義。但是，真正的簡約遠不止刪除矯飾和去除雜亂那麼簡單。而是因應你的需要，因地、因時恰到好處地展現每一方面。刪繁就簡，事事有序，以及確保所做的每一件事總是”行之有效”。當你第一次上手使用，就對它所能做的瞭然於胸時，那就是簡約。”
但好的設計理念，仍需不斷打磨，經過千錘百鍊的設計來表現。從本次發布的iOS7 beta的很多細節不難看出，本次iOS7的發布是倉促的，許多設計還有很多值得推敲的地方，因此也引來眾多吐槽。不過，相信未來，隨着新設計風格的不斷完善，蘋果還會是果粉心目中的那個蘋果。
–本文轉載自 http://www.missyuan.net 教學網 —
熱門推薦
留言回覆
