交互設計之扁平化

其實在「扁平化」這個詞流行以前，咱們一直都在強調交互的易用性和創造優質用戶體驗，並一直在往這方面去作。

在我看來，「扁平化」這個詞，是一種設計風格，將來的趨勢，扁平、簡約、天然...

那麼到底怎麼樣才能作到扁平化設計呢？

1.結構層級減小－高效

從字面上理解交互的扁平化，與之遙相呼應的便是「結構層級」，頁面結構、流程結構，用戶要達到某個目的，所須要的步驟，

一般咱們都是想用戶最少的操做步驟來達成某個目的。參考下圖可更好理解什麼是層級結構：

從圖中能夠看出來，這個是一個樹形結構，在樹形結構中

連接的層數被稱爲深度（z軸），最底層頁面包含的頁面總數被稱爲連接的廣度（x軸）。縱向（y軸）不少狀況下都只有一層，放的多都是一些消息提醒和快捷方式。

以PC端淘寶web界面爲例，最底層頁面就是他的首頁（X軸），包含的東西很是豐富，從廣度來說覆蓋面很是之大。

來看深度

從服裝內衣 > 到應季女裝 > 到針織開衫各類類型 

web界面很注重深廣度的平衡。

若是是到手機端，顯然把它直接搬過去是行不通的。

因爲手機設備的限制，淘寶的手機主界面的廣度大大減弱，信息深度更爲明顯。

pc上咱們能夠用麪包屑路徑或者各類導航清晰的表現出層級結構，讓用戶不在複雜的層級機構中迷路。

可是在移動設備上顯示區域有限，沒有足夠的地方用來放這樣的路徑，更多的時候咱們只能用back。

因此這也印證了前面所說的扁平化來勢洶洶的趨勢。

咱們怎樣才能作到在移動端減小結構層級從而精簡交互步驟。總結了如下幾種方法，也歡迎你們參與討論。

1)並列

 將並列同層級的信息顯示在同一個界面中，減小頁面的跳轉。

以win8爲例，什麼天氣、郵件，幾乎都是在同一個界面中顯示，並列的結構，方便用戶更快捷的操做

2)快捷方式

以IOS7爲例，只要從下往上滑動，並可呼出快捷菜單，方便開啓關閉手電筒、wifi、藍牙等

IOS6裏面要打開wifi，必須先打開設置，在到wifi選擇網絡

對比步驟：

IOS7：底部上滑 》 打開wifi

IOS6：點擊設置 》 選擇wifi 》開啓wifi 

層級結構的減小，用戶無需在一層一層的點到設置裏面去按，提升效率的同時也使層級結構變得清晰可見。

3)有限的空間，顯示關鍵的信息

咱們來看豆瓣電影

首頁列表顯示當前上映的電影海報、電影名字、影迷評分，詳情頁面展現該電影的簡介、預告片、用戶評論，選座購票的按鈕極爲突出，便於

用戶點擊，進去以後顯示具體的影院、價格、剩餘場次及是否能夠購票的狀態。

4)減小點按

仍是以IOS7爲例，關閉後臺程序時，只需用手指輕輕往上一滑就關閉了

對比IOS6，雙擊home，長按APP圖標，逐個點X關閉。

2.表達方式直白－準確

就是要小白用戶都能輕鬆上手，毫無壓力，記得某產品經理說過，「若是你的功能還須要解釋的話，那是個失敗的功能」

例：」微信搖一搖「

看到這個圖標，憑本能反應，小白都知道搖晃手機便可。

3.信息直觀－有序

在現在這個信息大爆炸的時代，若是從信息海洋裏面找到本身想要的，尤爲如今是小屏幕盛行，

咱們更須要減小過分複雜的交互界面設計，讓信息更直觀的展現。

分類，分類，分類！這是爲何小白用戶這麼喜歡hao123的緣由，他把大多數用戶用到的網站進行分類整理

讓人很直觀的就能找到想去的網站，例以下列網站：

 

乾淨整潔有序，永遠比雜亂無章更讓人賞心悅目。

其餘

響應和反饋，也是扁平化中比較重要的一點，界面應該提醒到用戶，當他做了某個操做，以便知道

到底發生了什麼，是成功仍是不成功，出錯了應該怎麼作，不然用戶不知所措，必然的會選擇離開。

小結：

有效的整理信息、減小層級結構，功能表達方式直白等等都是使交互扁平化的手段。