做好信息架構(gòu)是每個(gè)交互設(shè)計(jì)師必須掌握的一門技能，信息架構(gòu)是產(chǎn)品的骨架，決定了一個(gè)產(chǎn)品的生長方向、產(chǎn)品的布局，以及用戶對一個(gè)產(chǎn)品的初步印象和整體體驗(yàn)。由于信息架構(gòu)的復(fù)雜性，需要交互設(shè)計(jì)師擁有非常強(qiáng)的邏輯思維能力和完善的整體思考能力。所以，為了完成一套完整的信息架構(gòu)，須掌握一門科學(xué)的設(shè)計(jì)方法。

從2018年10月發(fā)布交互筆記（上）到現(xiàn)在已經(jīng)快9個(gè)月了，畢業(yè)、工作So many things to do啊，好吧，還是有拖延癥……終于整理了之前的學(xué)習(xí)筆記，希望通過分享的方式，使自己形成系統(tǒng)化的交互知識體系。切入正題，信息架構(gòu)可從準(zhǔn)備和產(chǎn)出兩個(gè)階段來進(jìn)行設(shè)計(jì)。

1. 信息架構(gòu)設(shè)計(jì)的前期工作

1.1?尋找：產(chǎn)品的共性（要遵循的用戶習(xí)慣）+差異（設(shè)計(jì)機(jī)會(huì)點(diǎn)）

首先和用研團(tuán)隊(duì)了解用戶（Persona）和用戶場景（如何使用產(chǎn)品），提取用戶的習(xí)慣。

設(shè)計(jì)信息架構(gòu)時(shí)，一方面須尊重用戶的習(xí)慣，不要在不必要的地方體現(xiàn)差別。

• 思考用戶用產(chǎn)品做什么事；
• 用戶用這類產(chǎn)品最關(guān)心的是什么；
• 用戶有哪些思維定式；
• 用戶用過什么類似的產(chǎn)品等。

如圖片社交類產(chǎn)品存在一些共性，發(fā)布自己喜歡的圖片，關(guān)注朋友的動(dòng)態(tài)并結(jié)交朋友是用戶要做的事和最關(guān)心的事情，所以剛進(jìn)入APP都會(huì)定位在關(guān)注這一模塊，關(guān)注的人往往是最重要的東西。底部導(dǎo)航中間都會(huì)設(shè)置發(fā)布按鈕，雖然樣式不同，但都起到強(qiáng)化發(fā)布的作用。由于用戶的思維定式（用戶覺得應(yīng)該有什么），都有消息和個(gè)人中心的存在。

另一方面要考慮創(chuàng)新。

如在發(fā)現(xiàn)（或廣場）這一頁，產(chǎn)品有較大的區(qū)別，有的直接把圖片鋪出來，有的體現(xiàn)內(nèi)容，有的體現(xiàn)標(biāo)簽，因?yàn)樵谶@一頁，不同產(chǎn)品可能有不同側(cè)重點(diǎn)，所以會(huì)做出不一樣的設(shè)計(jì)。這就是產(chǎn)品的差異，可以創(chuàng)新的地方，設(shè)計(jì)時(shí)想那些是可以創(chuàng)新的，哪些需要遵循用戶的習(xí)慣，其實(shí)創(chuàng)新也是和習(xí)慣相關(guān)的，只有了解用戶習(xí)慣后，才能在不妨礙用戶的情況下做出合理的創(chuàng)新。

1.2 輸出物：競品信息架構(gòu)樹狀圖（3個(gè)）+用戶信息架構(gòu)樹狀圖（用戶心智模型）

調(diào)研競品的信息架構(gòu)是產(chǎn)品設(shè)計(jì)中非常重要的成分，便于交互設(shè)計(jì)師了解現(xiàn)在所面臨的市場和面對的目標(biāo)用戶等。

設(shè)計(jì)信息架構(gòu)前，可以找3-5個(gè)同類競品，分析并用Mindmap（思維導(dǎo)圖）整理他們的信息架構(gòu)，制作思維導(dǎo)圖的工具有很多，如Mindmanager、X-Mind、Mindline等，可以做出如圖所示的樹狀圖。

樹是體現(xiàn)信息架構(gòu)的最佳形式，拼多多APP由首頁、推薦、搜索、聊天和個(gè)人中心組成，在每一模塊下又可分裂出其他的元素，這樣層層展開是最好的體現(xiàn)信息架構(gòu)的方式。

得到3-5個(gè)競品的信息架構(gòu)樹狀圖后，需分析共性和差異。找到競品在哪些地方存在共同點(diǎn)（和之前了解用戶習(xí)慣一樣），就是交互設(shè)計(jì)師需要遵循的用戶習(xí)慣。因?yàn)楦偲房赡苁褂脩粜纬闪肆?xí)慣，一旦改變會(huì)使用戶不適，如所有的通訊軟件都有消息和聯(lián)系人，并放在重要的部分，因?yàn)榘l(fā)消息、尋找聯(lián)系人是產(chǎn)品的重中之重。

其次是找到哪些地方存在差異，這些差異就是設(shè)計(jì)機(jī)會(huì)點(diǎn)，也就是創(chuàng)新點(diǎn)，如社交產(chǎn)品的發(fā)現(xiàn)頁，有非常多的做法，可以突出不一樣的元素或做不一樣的組織架構(gòu)，每個(gè)產(chǎn)品都可以發(fā)揮自己的創(chuàng)意。

了解競品后，可用卡片分類法進(jìn)一步了解用戶的心智模型，即讓用戶對功能卡片進(jìn)行分類、組織，并給相應(yīng)功能的集合重新定義名稱的一種自下而上的整理方法。簡言之，是用戶對功能卡片進(jìn)行歸類的方法，站在用戶的角度，理解用戶如何認(rèn)定這些功能的。

需要準(zhǔn)備的東西和執(zhí)行整個(gè)流程如圖所示，其中需注意功能卡片的提取，是功能或界面的名字，如聯(lián)系人名片、對話窗口，來自于現(xiàn)有信息架構(gòu)樹的樹葉（無子樹部分，避免發(fā)生包含關(guān)系）。不要過度細(xì)分，如不細(xì)分列表單元格內(nèi)的元素?？ㄆ瑪?shù)量少于30張，卡片分類法結(jié)束后，整理并輸出符合用戶心智模型的信息架構(gòu)樹狀圖。

2. 產(chǎn)出產(chǎn)品信息架構(gòu)設(shè)計(jì)

利用Mindmap整合前期調(diào)研信息和結(jié)果，對功能進(jìn)行重要性分級，再將整合的信息翻譯到Axure站點(diǎn)地圖中，考慮信息架構(gòu)和交互構(gòu)圖的關(guān)系。

輸出物：自己產(chǎn)品的樹狀圖（層與度的平衡）+重要性分級+Axure站點(diǎn)地圖

在了解用戶習(xí)慣，競品信息架構(gòu)和用戶心智模型的基礎(chǔ)上，根據(jù)共性和差異，進(jìn)行信息組織和功能整合，用Mindmap產(chǎn)出自己的信息架構(gòu)樹狀圖，要注意的是尋找層和度的平衡。

• 層=信息架構(gòu)樹的深度（剛進(jìn)入產(chǎn)品到找到一個(gè)功能需要幾個(gè)頁面），一般不超過5個(gè)層級，否則會(huì)使用戶操作困難；
• 度=某一節(jié)點(diǎn)子節(jié)點(diǎn)的數(shù)量（一級導(dǎo)航下功能數(shù)），如果某一層級（頁面）有過多的內(nèi)容，會(huì)增加用戶認(rèn)知成本，找不到想找的內(nèi)容。

整合完大量信息和功能后，還要對信息架構(gòu)做重要性分級，跟PM討論哪些功能是重要的，哪些是次要的，通過數(shù)字對每一層級功能的重要性進(jìn)行分級。在落地到頁面設(shè)計(jì)時(shí)，可以明確哪些功能應(yīng)該突出設(shè)計(jì)，哪些可以設(shè)計(jì)相對比較次要。

如微博首頁（第一層級）的信息和功能非常多，有搜索、側(cè)邊欄（熱門、特別關(guān)注、好友圈等來體現(xiàn)不同的微博內(nèi)容）、發(fā)布內(nèi)容、廣告、個(gè)人信息、明星勢力榜等等。

但這些內(nèi)容的層次和主次不一樣，有些部分放的非常大，如關(guān)注的人所發(fā)布的微博和自己發(fā)布內(nèi)容的發(fā)布框。而有些內(nèi)容相對比較次要，放的比較靠邊，如個(gè)人信息和明星勢力榜。所以，在做信息架構(gòu)時(shí)，雖然這些內(nèi)容放置在同一層級，但它的重要性是不一樣的。

3. 總結(jié)

信息架構(gòu)設(shè)計(jì)的關(guān)鍵是對產(chǎn)品骨架的思考，在尊重用戶習(xí)慣的前提下，尋找產(chǎn)品的創(chuàng)新點(diǎn)。構(gòu)建信息樹時(shí)注意層與度的平衡，區(qū)分重要性?？捎肁xure站點(diǎn)地圖來體現(xiàn)信息架構(gòu)，Axure是常用的交互設(shè)計(jì)工具，一層包一層的結(jié)構(gòu)非常符合樹狀圖的需求。

所以，將整合的信息（思維導(dǎo)圖）翻譯到Axure站點(diǎn)地圖中，能幫助交互設(shè)計(jì)師更好地在Axure里完成產(chǎn)品的頁面設(shè)計(jì)。

相關(guān)閱讀

交互設(shè)計(jì)筆記（上）：設(shè)計(jì)需求分析

本文由 @產(chǎn)品負(fù)一歲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議