嵐海網絡信息技術有限公司官方博客

隨著智能手機、PAD甚至是各種智能穿戴設備的普及，交互設計理念也變得更為多樣化，而從以往傳統PC的左鍵點擊、右鍵點擊、雙擊等逐漸簡成單擊和滑動兩個動作后，很顯然，扁平化的交互設計比其他設計方式更能符合現在的移動互聯網或者智能設備多樣化的適用需求。同時，一款產品通常會在多平臺進行來供用戶操作，也只有扁平化的交互設計才能最大程度滿足多平臺的應用。

其實在所謂“扁平化”這個概念流行起來以前，嵐海一直都在強調以易用、強調用戶體驗為設計的中心思想，（推薦閱讀：麗江客棧網之我的設計思路 - 設計需要以用戶體驗為中心）并也一直在往這個方向而努力著，而現在看來，扁平化的流行只不過是將我們以往的思想和理念名詞化，或者是更規范化而已。言歸正傳，下面我我們就來分享一些如何將交互扁平化的方法：

一、減少層級關系

所謂減少層級關系顧名思義就是指盡可能的簡化設計的層級結構，比如網站的導航設計，產品的分類設計、或者是軟件應用的設置層級設計等。我們看下圖：

圖乍一看有點復雜，其實不然，Y軸為縱向軸，在這圖種只有一層，我們可以把這張圖理解為導航中的一條分枝線。Z周為深度軸，比如說從首頁到分類到具體應用這樣的流程深度。那么X自然就是廣度軸，比如從首頁上有5個分類這樣子。

理解了結構，我們來看具體案例：

首先我們看首頁，從廣度來講，他的導航非常的廣，涉及到各種類別的商品。

我們再看深度，那是想要多深有多深啊，一個服裝分類里還有各種2級分類和3級分類。

這是淘寶PC端的截圖，可以看出，PC端因為屏幕尺寸夠大，可以很從容的體現出所需的廣度和深度，那么如果是在移動客戶端上，我們如何來表達出這種需求呢？那就得用到我們本文所講的交互設計扁平化了。

從交互設計角度而言，如何做到扁平化，或者是說如何來精簡用戶的操作流程，我們總結出以下方法。

1.1 并列設計

這是WIN8的界面，我們以往在win的其他產品中想看天氣啊，照片啊，地圖啊什么的都得進入到相應的目錄才可以看到，現在在同一個界面中我們就可以查看到這些內容。

1.2 快捷方式

這是IOS7的界面，只要屏幕往上滑動就可以出現這個界面，以往我們常用的什么wifi開啟、手電筒、計算器、照相機不都得進入項目的目錄才可以打開嗎，現在在這個界面上一應俱全，同時鬧鐘、音量和飛行模式等同樣常用的功能也都被歸納到了這個界面中，是不是更為方便了？

再看看IOS6，要開個wifi有多麻煩相比大家都知道。

我們在來看前文提到的淘寶手機版本界面，不管你現在在看什么，在操作什么，只需要點擊一下右下角的快捷圖標就可以回到你想去的位置，而不需要一層一層的往上返回。

1.3 顯示關聯內容

這是某電影購票手機客戶端的用戶界面截圖，在顯示電影院名稱的同時還列出了最低價的電影票及剩下的場次等信息。在這個流程中，用戶既然已經開始選擇了電影院，代表著用戶已經有了購買意向，此時想用戶推薦出最便宜的價格和余下的場次使得用戶在選擇起來更為方便，而不需要再一家一家的去尋找滿意的電影票了，節約了用戶的購買時間和流程。

4）減少操作次數

在IOS7中，想要關閉一個后臺程序，只需要往上一滑就可以實現

而IOS6則需要先長按，然后再點擊需要關閉的應用，不但比IOS7多了一個步驟，用戶還多付出了長按的時間。

不過這里我需要注意的是，由于滑動操作在設計表達上沒有直接點擊那么明顯，所以我們在設計帶有滑動效果的功能時一定要有足夠的提示度，否則很容易讓用戶現在不知道應該做什么。

二、使用直白的表達方式

俗話說得好，設計得先把用戶當傻子..不知道這是哪來的俗話，確實是太股過于俗氣，那么我們換個文雅的方式來說則可以表達為：我們需要設計出一樣就能讓用戶看明白怎么操作的功能。比如：

微信的搖妹功能相比是無人不知無人不曉吧...開個玩笑...這個界面應該連小孩子都可以做到，一看就知道是只需要搖動手機可以能實現這個界面所提供的功能了。

三、信息羅列需井然有序

互聯網中到底有多少信息？這不是能用個簡單的數字能夠能量的，在如今的移動互聯網時代，如何能讓用戶快速的找到自己所需的信息，通過用戶簡易的操作，更直觀的將所需的信息展示給用戶是我們需要做的事情。我們來看下圖：

我們來看個例子：

這是傳說中的好123，我非常理解作為互聯網“高玩”的你對這個網站是多么的不屑，但他的商業價值是無法忽視的，當年那么多人愛用他可以理解，時至今日互聯網已經飛速發展了那么多年，我們看到他的Alexa排名現在依舊保持在前20位，為什么那么多小白現在還是愛用他呢？因為其中一個原因就是他無論從設計還是交互上都能很好的詮釋扁平化的含義。

小結：

合理的整理內容信息，科學的減少層級關系，恰當的精簡操作步驟，明了的傳達操作意圖。這可謂是做好扁平化交互設計的方法與精髓。扁平化設計是一個概念，是一種思想，更是一種設計精神，為了能在環境和需求日益多變的情況下依舊能夠高效的提高用戶體驗，我們一直在努力著、探索著。

嵐海網絡公司官方博客 http://www.onceandalwaysarunner.com/blog/