上篇文章里面簡單介紹了一下關于交互設計分析的三維度，即框架、流程和狀態；這里就不做特殊介紹了，詳細內容請見《三個維度，解析產品的交互設計》。而本文作為交互設計總結篇的第一篇——框架布局篇，主要是系統地整理一下交互框架設計所需要考慮到的方方面面。

首先我們要先理解一個概念：什么是交互框架？（主要是指互聯網產品）

框架是整個或部分系統的可重用設計，表現為一組抽象構件及構件實例間交互的方法。

這是官方的定義，翻譯成人話就是搭建一個產品能夠使其可拓展，規范化，有條理，可快速迭代優化的方法。好像還是不好理解，讓我們舉一個通俗易懂的例子：假如我現在有個空房子，我要重新改造它，那么我首先要考慮的就是其房間結構（也就是框架），比如我要設計幾個臥室，幾個客廳，分別占多大面積，在什么位置等等（信息架構）；然后還要考慮如何設計門和窗戶，怎么能夠在不同房間互通（導航方式）；接著再思考每個房間里面分別需要怎么布局，分別需要哪些家居和電器，具體在什么位置（頁面結構）；然后再不停的細分下去，直到考慮全每個細節，那么一個產品完整的框架就基本上搭建出來了~

理解了框架的概念后，可能我們還是會有疑問：為什么要做框架設計？

還是上面房子的例子，假如我不考慮房間布局，隨心所欲地將我的家具和電器到處擺放，我將臥室放在房子的最里面， 我需要依次穿過客廳、廚房、洗手間才能到到達；我將馬桶放在臥室，把床放在客廳，把廚具放在洗手間，把衣柜放在陽臺，把洗衣機放在廚房……各位可以想象一下你的房子要是要被設計成這樣你還想住嗎？同理，一個框架結構混亂的產品你的用戶也是不會用的。但凡在行業里有些影響力的互聯網產品，其產品的框架和結構必定是由產品和設計人員精心思考并設計過的?？蚣苁且粋€產品的骨骼和經脈，它是一個產品能用與否的基礎所在，所以在開始產品設計之前先進行框架結構的梳理是非常非常重要的!

那么對于交互框架：我們又該如何去思考和設計呢？

我將其總結為3個步驟：

步驟1：信息架構

對于產品和設計來說，這個詞肯定是不陌生的，那么信息架構是個什么東西呢？

這就是某app產品的信息架構圖，通過不同級別的分類，將其所有的功能點展示出來的一個功能信息框架圖。一般來說這種架構圖主要是由產品產出，而有些比較專業的交互前期也會參與其中，下面還是以設計房子為案例來探究一下信息架構到底該怎么做。

首先我們要想清楚房子有幾個房間，分別需要哪些家居和設備（收集需求）

收集完需求后，我們需要開始對需求進行整理和分類，這里整理的規則可以參考卡片分類法和卡諾模型：

整理完成后最后產出信息架構圖：

信息架構完成后并沒有結束，你還需進一步思考：還有沒有其他問題呢？有沒有漏掉的功能？功能分類有沒有問題？這個框架拓展性如何？結構是否足夠扁平？等等……如果不考慮清楚那么就很有可能會出現馬桶被擺放在臥室這種情況了。

當信息架構確定好了之后開始思考第二步：

步驟2：導航

導航就像是房子里面的門，是貫穿整個產品的入口，導航做的好的能讓用戶快速達到目標，導航做的不好會讓用戶迷失在茫茫的信息海洋中不知所措，目前在app業內主要的導航模式有3種：選項卡式導航、抽屜式導航和跳板式導航。

• 選項卡導航：iOS上又叫Tab bar，典型代表像淘寶、微信，這類產品相對體量較大，產品結構和流程邏輯也都較為復雜多變；
• 抽屜式導航：代表如滴滴、摩拜等，這類產品都有一個很共性的特點就是“單線程”，即用戶目標明確，操作流程單一，屬于“強流程，弱框架”的類型；
• 跳板式導航：也叫9宮格式導航，典型代表如美圖，這類產品也有著比較鮮明的特點“多線程單流程”，即功能入口較多（一般5個以上），操作流程單一，常用于美圖類產品和一些B端類產品。

雖說不同的產品形態決定了其不同的導航模式，然而業內幾乎90%的app都是采用選項卡導航，選項卡式導航的確擁有非常顯著的優勢：結構簡潔清晰，操作便捷，拓展性強，穩定性好，確實是很多app首選的導航模式，然而并非一概而論，你所選擇的導航一定是跟你的產品類型和框架結構相互關聯的，滴滴采用抽屜式導航而非選項卡導航是由其產品本身屬性所決定，豆瓣一刻的導航采用抽屜式是因為本身產品框架結構較為簡單的原因。所以采用什么導航方式要靈活變通，沒有最好的只有最適合的，比如下面3個例子：

• 片刻使用的是駝式導航，是選項卡導航的一種變形，強化了某一個重要或高頻繁操作的功能，多用于博客類，直播類app中；
• 好奇心日報用了一種很罕見的懸浮導航，至于為什么會這么做，各位可以自己去思考；
• Hyperlapse更是大膽，它根本就沒有導航，這個產品全身上下就只有一個功能。

結合自己產品類型和框架結構，靈活選擇導航，不要拘泥于形式，多嘗試多思考，總會發現最合適的那個。

完成導航設計后，來到最后一個步驟：

步驟3：頁面結構

頁面結構即頁面布局，是針對單個頁面不同控件和元素的布局展示關系，就像房子的房間大小位置都設計好了，那么接下來就考慮每個房間里面該怎么添置家居了，比如臥室里面的床，衣柜，臺燈，空調等等這些東西該怎么布置，分別放在什么方位，具體占多大位置，這樣擺有什么影響等等，房間里面布局的好壞影響空間的運用，也影響了房間的美觀整潔和整個房子的格局風格，同理，頁面的布局好壞就決定了用戶的使用和閱讀體驗，決定了整個產品的調性和品位，最終影響了產品的轉化。

那么一個優秀的頁面布局具備哪些特點呢？

1、主次分明，結構清晰

結構清晰的頁面各個元素和控件處理的非常得當，相反結構混亂的用戶的關注沒有焦點，看了很長時間都不知道你的頁面想表達什么，也不知道該如何操作，下面看兩個例子：

12306的首頁結構看起來似乎毫無層次感，頁面結構就像是隨意的信息排列，再看看智行的首頁，卡片式結構視覺焦點更清晰，信息的排版和布局也更有層次感。

2、化繁為簡，引導清晰

特別是移動端產品，手機屏幕尺寸有限，如何在最短的時間里吸引用戶的眼球，設計師需要做的是做減法，刪除干擾用戶的不必要的內容，強化核心的操作流程，快速引導用戶達成目標。

讓我們再看一下上面12306的首頁，可以發現它的查詢頁面包含了出發點、目的地、出發日期、出發時間、席位、車次篩選和添加乘客。也就是說，用戶需要瀏覽這些信息后然后再進行一步步的操作選擇，等這些全部設置好了之后估計票早都搶完了，而智行就機智了很多，它將出發時間，席位，添加乘客等非重要信息進行了刪減，就連車次篩選也只是用了開關設置，所以大大提升了用戶的查詢效率。操作指引方面，出發時間是一個非常重要的必填操作，智行對于時間選擇有比較強的引導，而12306的出發時間根本看不出來是可以點擊操作的。

3、操作方便

這里操作方便更多適用于移動端，特別是現在手機尺寸普遍越來越大，用戶單手操作越來越困難，所以我們在設計頁面結構布局的時候也是要考慮到人體工程學的，特別是某些特殊場景使用的app，比如地圖類應用，用戶使用場景多在戶外（步行、騎行、公交車），用戶單手操作的場景非常之多，如下圖所示：

左圖是用戶單手操作的觸摸區域圖，從圖中可以看出界面的左上區域屬于觸摸困難區，下方是舒適觸摸區，所以在處理頁面信息布局的時候就可以考慮將重要展示類信息放在頁面的頭部和中部，而需要操作類的控件和按鈕可以考慮放在下方用戶容易操作到的區域。

我們再看右圖，是高德的首頁，我們可以看到高德的頭部有個搜索框，是屬于重要按鈕控件，然而卻放在了頭部用戶難操作的區域，那么高德當然也意識到了這個問題，于是乎他們在頁面的底部放了一個“路線”入口，能夠讓用戶在單手操作的情況下同樣也能快速完成路線查詢。

其實關于頁面結構，設計師們要考慮的點很多，也不僅僅單純地用幾個點就能完全涵蓋進去的，不同的產品屬性會決定其框架和導航，也決定了其頁面的展示布局，比如網易新聞和淘寶的信息展示方式就完全不同，一個是瀏覽，一個是逛，兩者間的使用場景和用戶心理是完全不一樣的。即使是同一屬性的產品其頁面結構和布局也是千差萬別的，比如下面4個例子：

雖然都是互聯網金融產品，也都是展示首頁，然而可以看到每個產品的首頁展示形態完全不同，有的主推產品和收益，有的引導登錄購買，有的主推運營活動，有的主打社區互動，究其背后形態各異的原因跟其產品定位與運營策略有重要的關聯，設計師們分析產品的時候不僅僅需要從設計本身出發，還要思考更多背后潛在的原因，從而達到真正意義上的“閉環”。

好了說了這么多，最后總結一下，產品交互框架設計需要經歷的3個步驟：

1. 信息架構：功能需求的篩選與分類，根據不同權重和屬性進行級別的劃分；
2. 導航模式：根據產品屬性和產品架構來選擇最為合適的導航方式；
3. 頁面結構：結構主次分明、結構清晰、引導明確以及操作方便是一個優秀的頁面結構的必要條件。

框架是死的，人是活的，設計的思維大多都是發散的，合適的方法論確實能夠在關鍵的時候提供思考的方向，但不可固步自封，設計師需要不停地學習、思考、交流、總結、創新，因為這才是設計本身最重要的意義~

（待續……）

本文由 @小米渣和大冬瓜 原創發布于人人都是產品經理。未經許可，禁止轉載。