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

首先我們要先理解一個概念：什么是交互框架？（主要是指互聯(lián)網(wǎng)產(chǎn)品）

框架是整個或部分系統(tǒng)的可重用設(shè)計(jì)，表現(xiàn)為一組抽象構(gòu)件及構(gòu)件實(shí)例間交互的方法。

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

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

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

那么對于交互框架：我們又該如何去思考和設(shè)計(jì)呢？

我將其總結(jié)為3個步驟：

步驟1：信息架構(gòu)

對于產(chǎn)品和設(shè)計(jì)來說，這個詞肯定是不陌生的，那么信息架構(gòu)是個什么東西呢？

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

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

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

整理完成后最后產(chǎn)出信息架構(gòu)圖：

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

當(dāng)信息架構(gòu)確定好了之后開始思考第二步：

步驟2：導(dǎo)航

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

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

雖說不同的產(chǎn)品形態(tài)決定了其不同的導(dǎo)航模式，然而業(yè)內(nèi)幾乎90%的app都是采用選項(xiàng)卡導(dǎo)航，選項(xiàng)卡式導(dǎo)航的確擁有非常顯著的優(yōu)勢：結(jié)構(gòu)簡潔清晰，操作便捷，拓展性強(qiáng)，穩(wěn)定性好，確實(shí)是很多app首選的導(dǎo)航模式，然而并非一概而論，你所選擇的導(dǎo)航一定是跟你的產(chǎn)品類型和框架結(jié)構(gòu)相互關(guān)聯(lián)的，滴滴采用抽屜式導(dǎo)航而非選項(xiàng)卡導(dǎo)航是由其產(chǎn)品本身屬性所決定，豆瓣一刻的導(dǎo)航采用抽屜式是因?yàn)楸旧懋a(chǎn)品框架結(jié)構(gòu)較為簡單的原因。所以采用什么導(dǎo)航方式要靈活變通，沒有最好的只有最適合的，比如下面3個例子：

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

結(jié)合自己產(chǎn)品類型和框架結(jié)構(gòu)，靈活選擇導(dǎo)航，不要拘泥于形式，多嘗試多思考，總會發(fā)現(xiàn)最合適的那個。

完成導(dǎo)航設(shè)計(jì)后，來到最后一個步驟：

步驟3：頁面結(jié)構(gòu)

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

那么一個優(yōu)秀的頁面布局具備哪些特點(diǎn)呢？

1、主次分明，結(jié)構(gòu)清晰

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

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

2、化繁為簡，引導(dǎo)清晰

特別是移動端產(chǎn)品，手機(jī)屏幕尺寸有限，如何在最短的時間里吸引用戶的眼球，設(shè)計(jì)師需要做的是做減法，刪除干擾用戶的不必要的內(nèi)容，強(qiáng)化核心的操作流程，快速引導(dǎo)用戶達(dá)成目標(biāo)。

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

3、操作方便

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

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

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

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

雖然都是互聯(lián)網(wǎng)金融產(chǎn)品，也都是展示首頁，然而可以看到每個產(chǎn)品的首頁展示形態(tài)完全不同，有的主推產(chǎn)品和收益，有的引導(dǎo)登錄購買，有的主推運(yùn)營活動，有的主打社區(qū)互動，究其背后形態(tài)各異的原因跟其產(chǎn)品定位與運(yùn)營策略有重要的關(guān)聯(lián)，設(shè)計(jì)師們分析產(chǎn)品的時候不僅僅需要從設(shè)計(jì)本身出發(fā)，還要思考更多背后潛在的原因，從而達(dá)到真正意義上的“閉環(huán)”。

好了說了這么多，最后總結(jié)一下，產(chǎn)品交互框架設(shè)計(jì)需要經(jīng)歷的3個步驟：

1. 信息架構(gòu)：功能需求的篩選與分類，根據(jù)不同權(quán)重和屬性進(jìn)行級別的劃分；
2. 導(dǎo)航模式：根據(jù)產(chǎn)品屬性和產(chǎn)品架構(gòu)來選擇最為合適的導(dǎo)航方式；
3. 頁面結(jié)構(gòu)：結(jié)構(gòu)主次分明、結(jié)構(gòu)清晰、引導(dǎo)明確以及操作方便是一個優(yōu)秀的頁面結(jié)構(gòu)的必要條件。

框架是死的，人是活的，設(shè)計(jì)的思維大多都是發(fā)散的，合適的方法論確實(shí)能夠在關(guān)鍵的時候提供思考的方向，但不可固步自封，設(shè)計(jì)師需要不停地學(xué)習(xí)、思考、交流、總結(jié)、創(chuàng)新，因?yàn)檫@才是設(shè)計(jì)本身最重要的意義~

（待續(xù)……）

本文由 @小米渣和大冬瓜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。