? ? ? ?本篇分析對比是基于各自官網最新的Material design與iOS Human Interface Guidelines文檔，官方文檔地址以及作者聯系方式將在文末給出，供各位交流學習。

1. 規范目標與原則

? ? ? ?Material Design（以下簡稱MD）是谷歌設計的一套視覺語言設計規范，也是Android Design演進的一種設計規范。在MD開篇，谷歌公司就表達了自己的期望：創造一種視覺語言，能夠將經典的設計原則與創新的科學技術結合起來；開發一個能夠跨平臺使用的底層系統，保證用戶在不同平臺上都能夠擁有統一的體驗。與此相適應的MD規范的設計原則是：

1. Material是一種隱喻（Material is the metaphor）

2. 醒目，圖像，刻意（Bold, graphic, intentional）

3. 運動是有意義的（Motion provides meaning）

? ? ? ?iOS Human Interface Guidelines（以下簡稱HIG）是蘋果公司針對iOS設計的一套人機交互指南，目的是為了使運行在iOS上的應用都能遵從一套特定的視覺以及交互特性，從而能夠在風格上進行統一。iOS HIG規范的設計原則是：

1. 審美的完整性

2. 一致性

3. 操作的直接性

4. 有反饋

5. 采用隱喻

6. 用戶行為可控

2. 文檔結構的對比

? ? ? ?本章主要從文檔結構角度對兩份官方文檔進行對比分析。希望能夠從全局視角出發，分析兩份設計規范編寫過程中的側重點。

? ? ? ?從圖1中的文檔結構中我們可以看出，在側重點上兩者是存在一定差異的，MD側重于規范軟件的視覺表現效果而HIC側重于最大化利用系統原生資源。

? ? ? ?MD文檔中共有10個一級目錄，其中動態效果，風格，布局，要素以及模式這5個方面從本質而言都是對軟件的視覺表現效果進行約束。例如動態效果中，文檔對material變形的動態效果就作出了嚴格規定，輻射變換適用于圓形至方形而不能用于兩個相似的形狀。而在HIC文檔的11個一級目錄中，僅在“視覺設計”，“bar”，“視圖”與“控制”這四個主題中存在著對軟件的視覺表現效果進行規范。在其余的部分，文檔更多的是在介紹該部分有哪些系統原生的功能與設計可以滿足對應的需求，在鼓勵重用原生資源的同時，也支持設計師進行原創。

3. 設計細節對比

? ? ? ?本章選擇從按鈕這個基本元素入手，通過比較同一項目中具體的差異來分析兩者在設計思路上的差異。

3.1 MD中的按鈕

? ? ? ?整體來看，MD中對按鈕進行了非常詳細的規范，即在一個確定的場景中以什么樣的方式使用哪一種按鈕是已經確定了的。在文檔中，如圖2所示，按鈕依據表現形式（高度，形狀）被分為3類標準按鈕：Floating action buttons、Flat buttons以及Raised buttons。在全局范圍內，文檔首先對按鈕的風格進行了規范，包括文字形式，按鈕可達性要求，按鈕邊角弧度要求，密集度以及大小，具體詳見表1。而后在詳細介紹中，文檔對按鈕的的用途，透明度，行為又再次進行了規范。

3.2 HIG中按鈕

相較于MD中對按鈕的規范，HIG中的規范則更為寬松，在我看來甚至不能稱之為規范。在一開始文檔便說明了系統提供了非常多的預制按鈕樣式足以應付大多數的情況，同時也支持設計人員對按鈕樣式進行設計。隨后在具體介紹部分，文檔選擇了三個圖標進行了說明。下面以系統按鈕（System button）作為示例進行說明。

? ? ? ?經過整理，我們將規范以表2的形式展現出來。對內容進行分析我們可以發現：HIG更側重功能性。在按鈕的規范中，文檔對外形并未做過多要求，僅僅在第四條對其邊界與背景的有無作了建議。于此同時，值得注意的是文檔對按鈕所承載的文字內容作了3條規范：動詞，大寫，簡短。這也意味著在按鈕設計的時候我們無需過多考慮按鈕的是否足夠美觀，形狀設計是否與系統相適應，而應該側重于用戶是否能夠直觀地理解每一個按鈕背后代表的操作與操作帶來的結果。

3.3 對比分析

? ? ? ?按鈕除了觸發交互動作的顯性功能外，更重要是他具有的隱性作用：信息傳達，當然，它同時也應該兼具修飾功能。引用MD中對按鈕的定義“Buttons communicate the action that will occur when the user touches them”，我們可以知道按鈕主要的作用是對將會發生的事件進行預告，告訴用戶按了以后會發生什么。

? ? ? ?在隱性的修飾功能和信息傳達功能中，MD規范顯然更注重修飾功能的規范，對于每一個按鈕的大小，形式所處層級以及用途都有一個明確的規定，它希望通過一致的設計規范使按鈕這個元素能夠分工明確，表現統一。這樣一種設計最終能減少用戶在不同應用和設備間切換時的學習成本，進而增加了這種設計語言的易用性。

? ? ? ?而HIG規范則相對而言更注重信息傳達的效率。在設計theme中第一位的是clarity，在按鈕這個元素中，這樣一種設計思想帶來的結果就是注重信息傳達效率，減少不必要的設計元素的干擾：慎用邊框與背景，放個清清楚楚的字在那里告訴用戶這是干嘛的就好了。

4. 結論

? ? ? ?縱觀MD規范與HIG規范，我們會發現按鈕這一個元素所呈現出來的兩者的不同其實非常有代表性。如果說MD像一個事無巨細的媽媽，各個元素的分類，使用場景，大小，弧度，顏色風格都設計地清清楚楚，那么HIG則更像是一個神經大條的爸爸，我這有挺多東西你拿去用，差不多就是這樣做，但你別那樣做。這是非常明顯的區別，但下面我將從設計思路以及設計目標的角度來說明兩者的不同。

4.1 從設計思路的角度而言，兩者的設計思路是不一樣的

? ? ? ?MD規范是一種對設備內虛擬世界的隱喻。它認為手機是一個盒子，里面裝載了一個虛擬的三維世界，每一個物件都是以一種名為material的形式存在的，它具有長度，寬度，厚度，同時也占據著一定的空間，同時通過光效投影的效果來表現不同物件的層級關系。這樣一種模擬是MD規范的設計基礎，也是其必須遵循的物理法則。在設備中，我們所有的操作都是在對Material進行操作：切換一個Material，滑動一個Material，按壓會使某些Material的高度發生變化，但始終不會穿過它下層的Material。這樣種模擬在交互體驗上會給人一種非常自然的感覺，仿佛手機里面的東西就是真實存在的，就像辦公桌上的一疊疊紙一樣，我平時挪動文件的時候會發生什么事情，在這里面就會發生什么事情。

? ? ? ?HIG規范最初也是采用了擬物的思路，但目前它似乎讓設計回歸到了語言的本質——傳遞信息，雖然也保存了暗喻這一原則。在HIG規范中，符號設計不再是對現實實物的精準模擬，而是設計成象形文字一樣來暗示用戶符號所代表的意義。這樣一種思路的好處是在有限的用戶界面中減少了符號設計帶來的干擾信息，凸顯了應用需要傳達的主要信息。在網上也看到有人說HIG的設計趨勢是“大而簡，簡而精”，對此我表示非常贊同。從App Store的改版中就能發現符號設計已經被弱化或者說是簡化，而且與此同時還增加了留白，增大了字體，使主要關注點都集中在了主要信息上。

4.2 從設計目標的角度而言，兩者都追求著一種一致性

? ? ? ?雖說兩者都追求著一種一致性，但在我看來兩者的一致性擁有不同的含義。MD規范的一致性意味著不同設備間的一致性，這種一致性體現在視覺表現上。而HIG除了能保證視覺表現的一致性以外，更多是考慮應用與系統間的一致性，這種一致性體現在功能上。

? ? ? ?就MD而言，細致的規則能保證不同設備上視覺的一致性。在我看來，細致的規范要求就是為了應對不同的設備間的差異。通過精確地相對位置和大小規定來保證在不同設備上同一個應用能夠有相對一致的表現，不至于同一個應用在兩個設備間表現差距過大而破壞了這種視覺上的一致性。

? ? ? ?對HIG而言，有限的設備型號與統一風格的預制符號保證了應用在視覺上能保持一致性，這包括了兩方面，一是設備間的一致性，二是應用與系統間的一致性。相較與MD規范而言，HIG規范本身針對的設備型號數量是有限的，其實從顯示屏的尺寸規格的角度上來講其實也就那么幾種屏幕尺寸，在布局上也不會相差太多，這為保證設備間的視覺一致性提供了基礎。同時，HIG也提供了較多的與系統符號風格相一致的預制符號，這在一定程度上保證了應用與系統間也能夠有一個較好的視覺表現一致性。

? ? ? ?HIG規范也追求著應用與系統在功能上保持一致性。HIG規范中著重介紹了各種系統原生功能與技術，同時推薦設計師在任何能夠用到原生功能和技術的時候應用他們，比如指紋識別，面部識別，蘋果支付等。這就使得應用與系統之間能夠在功能上保持一致性，例如我們用指紋解鎖應用和用指紋解鎖系統在操作體驗上是一樣的。

4.3 內容側重不同，導致面向對象也存在輕微差距

? ? ? ?MD規范側重于視覺效果上的表達，所以更多的面向UI設計師以及視覺設計師。而HIG除了基本的視覺與交互規范，還有對功能和技術的介紹與引導。面向的則是程序設計師。如果將產品比作一座商場，MD關注的是商場的柜臺、海報怎么布置好看，而HIG除此之外還涉及我的扶梯你應該用在哪，我的觀光電梯你應該用在哪。

? ? ? ?最后談一談對兩者各自價值觀的理解。

? ? ? ?從我的理解而言，MD的價值觀是自然，統一，和諧。他最初對手機內部空間的模擬追求的是一種自然展現，在用戶第一次使用的時候就不會感覺到異樣，第一次使用就能接受他應該是這樣，因為他和我們現實世界遵循著同一套物理法則。在兼容上它追求著應用間與設備間的統一，不希望用戶因為硬件設備的不同而導致學習成本的增加，對同一個應用產生陌生感。最后在藝術設計上，MD通過精確的數值保證了應用的元素在設計出來后都能有一種和諧的美感。無論是顏色搭配還是層級設置，亦或是大小分配，都能給用戶一種欣賞藝術品般的體驗。

? ? ? ?HIG的價值觀則是簡和精。簡：減少設計帶來的干擾，凸顯主要功能與信息的價值，同時推進系統原生功能在應用內的使用來簡化某些步驟。精：聚焦于信息傳遞與邏輯呈現，讓用戶用最少的時間與精力理解他做了什么，在哪里，將會到哪。

5. 文檔地址與聯系方式

Material design：https://material.io/guidelines/material-design/introduction.html#introduction-principles

iOS Human Interface Guidelines:?https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

作者聯系方式

WeChat： huanggeng95

郵? ? ?箱：huanggeng_95@163.com

歡迎各位產品小白一起交流觀點！