交互设计之扁平化
其實在“扁平化”這個詞流行之前，我們一直都在強調交互的易用性和創造優質用戶體驗，并一直在往這方面去做。
在我看來，“扁平化”這個詞，是一種設計風格，未來的趨勢，扁平、簡約、自然...
那么到底怎么樣才能做到扁平化設計呢？
1.結構層級減少－高效
從字面上理解交互的扁平化，與之遙相呼應的即是“結構層級”，頁面結構、流程結構，用戶要達到某個目的，所需要的步驟，
通常我們都是想用戶最少的操作步驟來達成某個目的。參考下圖可更好理解什么是層級結構：
從圖中可以看出來，這個是一個樹形結構，在樹形結構中
鏈接的層數被稱為深度（z軸），最底層頁面包含的頁面總數被稱為鏈接的廣度（x軸）?？v向（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的原因，他把大多數用戶用到的網站進行分類整理
讓人很直觀的就能找到想去的網站，例如下列網站：
?
干凈整潔有序，永遠比雜亂無章更讓人賞心悅目。
其他
響應和反饋，也是扁平化中比較重要的一點，界面應該提醒到用戶，當他作了某個操作，以便知道
到底發生了什么，是成功還是不成功，出錯了應該怎么做，否則用戶不知所措，必然的會選擇離開。
小結：
有效的整理信息、減少層級結構，功能表達方式直白等等都是使交互扁平化的手段。
?
?
轉載于:https://www.cnblogs.com/FireRivers/p/3550591.html
總結
- 上一篇： break 和 continue 的区别
- 下一篇： 经纬恒润又获奖啦！