如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

什么是信息架構(gòu)？怎么理解用戶體驗(yàn)五要素？本文用大量的案例和插圖幫你輕松掌握這個(gè)基礎(chǔ)知識(shí)。

今天想要跟大家聊一聊關(guān)于 UX 和 IA 的話題。其實(shí)在寫(xiě)今天這次分享的題目的時(shí)候我修改了很多次，為什么會(huì)修改很多次？這要從我在 medium 看的一篇文章說(shuō)起，這篇文章的標(biāo)題是《6 Tips How to Apply Information Architecture in UX Design》，翻譯過(guò)來(lái)的意思是在用戶體驗(yàn)設(shè)計(jì)中如何建立信息架構(gòu)的6點(diǎn)建議。

當(dāng)時(shí)讀完文章，雖然覺(jué)得文章里講的一些散碎的概念迷迷糊糊可以理解，但這些概念就像蓋房子的磚塊一樣，我完全不知道這些磚塊該怎樣才能蓋成一棟大樓，或者我就站在樓下而因?yàn)樽约阂曇坝邢尥耆恢肋@棟大樓到底長(zhǎng)什么樣子，所以因?yàn)檫@個(gè)原因我一直苦惱于該如何去清晰的表達(dá)想要分享的內(nèi)容，思來(lái)想去決定這次分享不能僅僅是我對(duì)某篇文章的翻譯，想要弄清楚這篇文章到底在講什么，先要弄明白文章里的知識(shí)，當(dāng)我們了解清楚了這些信息之后再來(lái)理解這篇文章就會(huì)輕松容易得多，下面就將我總結(jié)出來(lái)的內(nèi)容分享給大家。

一、UX & IA

UX 即 user experience，譯為用戶體驗(yàn)。

IA 即 information architecture，譯為信息架構(gòu)。

他們的關(guān)系可以簡(jiǎn)單理解為良好的信息架構(gòu)是用戶體驗(yàn)的基礎(chǔ)。

我們平時(shí)聽(tīng)到了太多關(guān)于用戶體驗(yàn)的東西，大家都以為用戶體驗(yàn)就跟交互設(shè)計(jì)差不多。我之前確實(shí)也是這么理解的，但是最近發(fā)現(xiàn)我的這個(gè)想法是有些過(guò)于片面了。

我們可以把用戶體驗(yàn)的工作分解成五個(gè)組成要素，分別為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。

它們都是自下而上起作用的，每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來(lái)決定的，所以表現(xiàn)層由框架層來(lái)決定，框架層則建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層的設(shè)計(jì)基于范圍層，范圍層是根據(jù)戰(zhàn)略層來(lái)制定的。每一個(gè)層面的決定都會(huì)影響到它之上層面的可用選項(xiàng)，信息架構(gòu)只是用戶體驗(yàn)結(jié)構(gòu)層的一部分而已。

二、什么是IA

IA 即 information architecture，解釋出來(lái)就是合理的組織信息的展現(xiàn)形式。

主要任務(wù)是為信息與用戶認(rèn)知之間搭建一座暢通的橋梁，是信息直觀表達(dá)的載體，通俗點(diǎn)說(shuō)就是信息架構(gòu)不僅僅是設(shè)計(jì)信息的組織結(jié)構(gòu)，還需要研究信息的表達(dá)和傳遞。

這么說(shuō)也許還有些抽象，舉個(gè)簡(jiǎn)單易懂的例子：

我們來(lái)看這個(gè)商場(chǎng)的平面解析圖，通過(guò)這個(gè)圖我們可以很清楚的了解商場(chǎng)的結(jié)構(gòu)，從而快速定位自己的位置還能順利找到自己想要購(gòu)買(mǎi)的產(chǎn)品。信息架構(gòu)對(duì)于一款產(chǎn)品來(lái)說(shuō)就相當(dāng)于商場(chǎng)的平面解析圖，就像現(xiàn)在我們看到的這幅圖一樣，商場(chǎng)的每一層都有相對(duì)應(yīng)的分類(lèi)區(qū)塊來(lái)指導(dǎo)消費(fèi)者。試想如果一個(gè)商場(chǎng)沒(méi)有對(duì)商品進(jìn)行有序的分類(lèi)，那么我們?cè)诠渖虉?chǎng)的時(shí)候就很難順利挑選出自己所需要的商品，面對(duì)各種無(wú)序且數(shù)量繁多的商品我們一定會(huì)崩潰，這樣的情況對(duì)于男士來(lái)說(shuō)絕對(duì)是場(chǎng)災(zāi)難，但對(duì)于女性來(lái)說(shuō)也許會(huì)是一個(gè)充滿未知探索的挑選過(guò)程吧。

但不管怎么說(shuō)在這里設(shè)計(jì)師需要做的就是規(guī)劃好這些樓層信息層級(jí)，主要做的工作就是：分類(lèi)、層級(jí)梳理等。簡(jiǎn)單的說(shuō)就是規(guī)劃好每一層有什么商品，同一層商品怎么分布等等信息。

所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中：設(shè)計(jì)師梳理信息架構(gòu)，其實(shí)和剛才說(shuō)的梳理商場(chǎng)樓層架構(gòu)的概念是差不多的。

三、IA的作用

一個(gè)好的信息架構(gòu)一定是會(huì)滿足兩個(gè)維度的需求，即用戶需求和產(chǎn)品目標(biāo)。

從用戶的角度出發(fā)它可以讓用戶在一定的信息規(guī)劃下更容易找到自己想要的「東西」。

從產(chǎn)品目標(biāo)角度來(lái)看它能通過(guò)「信息架構(gòu)設(shè)計(jì)」去教育、說(shuō)服、通知用戶。

所以用最簡(jiǎn)單的兩個(gè)字來(lái)說(shuō)其實(shí)信息架構(gòu)就是在做分類(lèi)。

再回到剛才那個(gè)例子想一想，把商場(chǎng)里的商品分類(lèi)其實(shí)對(duì)于我們產(chǎn)品而言就是在給我們產(chǎn)品中的信息分類(lèi)，以方便用戶能更好的使用我們的產(chǎn)品，而不會(huì)想要把產(chǎn)品卸載，從而使產(chǎn)品達(dá)到易用好用想用的目的。就跟我們逛商場(chǎng)一樣，當(dāng)我們能夠根據(jù)指示順利買(mǎi)到自己所需的商品的時(shí)候我們就不會(huì)因?yàn)檎也坏轿覀兿胭I(mǎi)的商品而失望的離開(kāi)商場(chǎng)。

那么問(wèn)題來(lái)了，我們?cè)撊绾芜M(jìn)行信息架構(gòu)分類(lèi)呢？也就是信息架構(gòu)的分類(lèi)方法是什么呢？

四、IA分類(lèi)方法

這里給大家介紹2種方法，從「產(chǎn)品目標(biāo)」出發(fā)我們可以采用「從上到下」的分類(lèi)方法；從「內(nèi)容和功能需求分析」出發(fā)就可以用「從下到上」的方法進(jìn)行分類(lèi)。下面來(lái)跟大家分享一下這兩種方法的具體做法。

剛才說(shuō)了從上到下是以產(chǎn)品目標(biāo)即戰(zhàn)略層出發(fā)的分類(lèi)方法，所以最開(kāi)始就是先從最廣泛的、可能滿足決策目標(biāo)的內(nèi)容與功能開(kāi)始進(jìn)行分類(lèi)，然后再按邏輯細(xì)分出次級(jí)分類(lèi)，這樣的「主要分類(lèi)」和「次級(jí)分類(lèi)」就構(gòu)成了「一個(gè)個(gè)空槽」，將想要的內(nèi)容和功能按順序一一填入即可。

我們以微信為例：首先根據(jù)產(chǎn)品目標(biāo)將「主要分類(lèi)」即一級(jí)架構(gòu)分為「最近會(huì)話（微信）」、「通訊錄」、「發(fā)現(xiàn)」和「我」；然后再進(jìn)行「次級(jí)分類(lèi)」分類(lèi)，比如「發(fā)現(xiàn)」下再分「朋友圈」、「掃一掃」、「搖一搖」等等；最后將相應(yīng)的功能（如朋友圈feeds、發(fā)朋友圈、朋友圈消息等）填入到相應(yīng)的「朋友圈」分類(lèi)中。

這樣就像是先有了大概的框架我們?cè)俑鶕?jù)這些框架往上面加?xùn)|西的感覺(jué)是一樣的。

接下來(lái)我們?cè)賮?lái)說(shuō)一說(shuō)從下到上的方法：

剛才說(shuō)了從下到上是由范圍層驅(qū)動(dòng)從產(chǎn)品的功能和內(nèi)容層面出發(fā)的，所以我們就要先把已有的所有內(nèi)容，放在層級(jí)分類(lèi)中，然后再將他們分別歸屬到較高一級(jí)的類(lèi)別。這種分類(lèi)方法其實(shí)就是在做「歸類(lèi)」。

其實(shí)從下到上的信息架構(gòu)方法也包括了主要分類(lèi)和次級(jí)分類(lèi)，但它是根據(jù)對(duì)內(nèi)容和功能需求的分析而來(lái)的。先從已有的資料開(kāi)始，我們把這些資料統(tǒng)統(tǒng)放到級(jí)別的分類(lèi)中，然后再將它們分別歸屬到較高一級(jí)的類(lèi)別，從而逐漸構(gòu)建出能反應(yīng)我們的產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。

具體工作中我們可以將所有的功能點(diǎn)用一張張卡片寫(xiě)下來(lái)，然后讓目標(biāo)用戶參與到信息分類(lèi)中，并反饋相關(guān)分類(lèi)標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計(jì)師去梳理信息架構(gòu)的參考。實(shí)踐過(guò)程中，更需要設(shè)計(jì)師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類(lèi)的能力，進(jìn)一步通過(guò)用戶測(cè)試去檢驗(yàn)分類(lèi)的信息傳達(dá)有效性。

其實(shí)就好像我們?nèi)粘Ｉ钪惺占{衣服，我們會(huì)根據(jù)不同標(biāo)準(zhǔn)去收納，比如我們可以根據(jù)季節(jié)分類(lèi)，也可以根據(jù)顏色分類(lèi)，或者是根據(jù)款式分類(lèi)，每個(gè)人都會(huì)有不同的分類(lèi)習(xí)慣，所以這里歸結(jié)到工作中才會(huì)讓目標(biāo)用戶參與到信息分類(lèi)中，畢竟我們的產(chǎn)品是服務(wù)于用戶，所以還原用戶使用習(xí)慣和使用心理也是我們同樣要注意到的，這樣可以給我們提供一些有效的分類(lèi)信息幫助我們更好的做出清楚的信息架構(gòu)。

當(dāng)然這兩種方法都有一定的局限，從上到下的架構(gòu)方法有時(shí)可能導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略，而從下到上的方法則可能導(dǎo)致架構(gòu)過(guò)于的反應(yīng)了現(xiàn)有的內(nèi)容，因此不能靈活地容納未來(lái)內(nèi)容的變動(dòng)或增加，所以在實(shí)際運(yùn)用中是需要我們將這兩種方式結(jié)合起來(lái)靈活運(yùn)用。

這兩種方法雖然有不同的視角但其實(shí)最終目的都是讓我們的產(chǎn)品易用好用最終達(dá)到想用的目的，所以讓這兩種方法對(duì)接、交匯、融合之后得出的結(jié)果才應(yīng)該是我們理想中的產(chǎn)品信息架構(gòu)。

五、影響IA的因素

剛才提到用戶體驗(yàn)的5個(gè)層級(jí)是自下而上對(duì)其上面一層起作用的，信息架構(gòu)位于用戶體驗(yàn)要素第3層結(jié)構(gòu)層，剛才說(shuō)了結(jié)構(gòu)層的設(shè)計(jì)基于范圍層之上，所以這里遇到的影響因素我們還要返回到范圍層面去尋找，范圍層又包含兩個(gè)維度，功能和內(nèi)容，在從范圍層到結(jié)構(gòu)層這個(gè)過(guò)程中我們會(huì)遇到很多影響因素，所以把這些影響因素總結(jié)起來(lái)我們還是要從用戶層面（內(nèi)容）和產(chǎn)品層面（功能）兩個(gè)維度來(lái)理解。

從用戶的角度出發(fā)，理解能力、操作習(xí)慣、目標(biāo)內(nèi)容使用頻率等等這些都會(huì)成為影響因素。

從產(chǎn)品角度來(lái)看，產(chǎn)品的核心價(jià)值、主線功能、特色功能等才是影響信息梳理的因素。

這兩個(gè)層面當(dāng)然也不是完全割裂的，在做信息架構(gòu)的時(shí)候可以先從一個(gè)層面出發(fā)得出一個(gè)結(jié)論之后再用另外一個(gè)層面去驗(yàn)證得到的答案，然后再不斷優(yōu)化在驗(yàn)證過(guò)程中遇到的問(wèn)題。

不同人會(huì)有不同的分類(lèi)結(jié)果，因?yàn)楦鶕?jù)不同情況我們所需要關(guān)注的側(cè)重點(diǎn)會(huì)有不同，我們根據(jù)不同的影響因素會(huì)得出不同的答案。每個(gè)人都會(huì)得出不一樣的分類(lèi)結(jié)果，沒(méi)有哪個(gè)結(jié)果是完全正確或者說(shuō)是完全相同的，就像數(shù)學(xué)中的排列組合一樣，內(nèi)容越多我們得到的結(jié)果就會(huì)越豐富，但是這些結(jié)果當(dāng)然不是全都合理的，所以就需要設(shè)計(jì)師根據(jù)自己的經(jīng)驗(yàn)結(jié)合產(chǎn)品層和用戶層的需求找到合理的解決方案。我們都知道在產(chǎn)品設(shè)計(jì)中想要設(shè)計(jì)出來(lái)一款完美不需要迭代優(yōu)化的產(chǎn)品幾乎是不可能的，所以我們能做的只能是結(jié)合各方面的影響因素和自己的經(jīng)驗(yàn)理解一直優(yōu)化產(chǎn)品讓它接近于完美的狀態(tài)。

現(xiàn)在我們來(lái)思考一個(gè)問(wèn)題：為什么微信朋友圈這么高密度使用的功能要放到二級(jí)菜單呢？

微信的創(chuàng)始人張小龍是這樣解釋的：

• 微信是個(gè)社交軟件，核心功能是社交，是溝通，是好友，所以一級(jí)菜單只能跟這個(gè)相關(guān)。（產(chǎn)品功能層面）
• 當(dāng)朋友圈為二級(jí)tab 時(shí)，掃一掃，搖一搖，附近的人，漂流瓶，購(gòu)物這些功能的曝光度就會(huì)下降，不利于微信功能的拓展。（產(chǎn)品功能層面）
• 也許會(huì)造成各個(gè)模塊分配不平衡，而且發(fā)現(xiàn)里的功能與其他模塊的功能屬性混在一起也許會(huì)不恰當(dāng)，微信為了不讓用戶被過(guò)多的信息打擾把公共號(hào)打包放在一起，那么朋友圈隨著聯(lián)系人增多，分享動(dòng)態(tài)也會(huì)增加，而且內(nèi)容都是一些生活中的瑣事，多少也會(huì)像公共號(hào)一樣打擾到用戶。（用戶角度）
• 設(shè)計(jì)并不是對(duì)用戶有求必應(yīng)，而是應(yīng)該在產(chǎn)品發(fā)展戰(zhàn)略的指導(dǎo)下平衡各功能。如果將朋友圈提升為一級(jí)入口，很明顯微信的社交分享功能將得到強(qiáng)化，那么相應(yīng)的其他功能將會(huì)被弱化，這與微信鏈接一切的發(fā)展戰(zhàn)略是相違背的。（產(chǎn)品層面）

保持主干清晰，枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼，它應(yīng)該盡量保持簡(jiǎn)單、明了，不可以輕易變更，讓用戶無(wú)所適從。次要功能豐富主干，不可以喧賓奪主，盡量隱藏起來(lái)，而不要放在一級(jí)頁(yè)面。

舉這個(gè)簡(jiǎn)單的小例子供大家了解信息架構(gòu)這個(gè)概念，體會(huì)一下如何用一個(gè)更全面更發(fā)展的眼光去看待產(chǎn)品結(jié)構(gòu)這個(gè)抽象的問(wèn)題。

總結(jié)

要在 UX 中建立良好的 IA 我們需要特別注意的5個(gè)關(guān)鍵點(diǎn)：

• 在建立信息架構(gòu)之前確定產(chǎn)品目標(biāo)（戰(zhàn)略層）
• 進(jìn)行用戶研究預(yù)測(cè)用戶對(duì)產(chǎn)品可能產(chǎn)生的反應(yīng)（范圍層）
• 合理運(yùn)用認(rèn)知心理學(xué)原理預(yù)測(cè)用戶對(duì)產(chǎn)品可能產(chǎn)生的反應(yīng)（結(jié)構(gòu)層）
• 根據(jù)產(chǎn)品信息結(jié)構(gòu)去規(guī)劃導(dǎo)航（框架層）
• 注意視覺(jué)層次在內(nèi)容的視覺(jué)表現(xiàn)中的重要作用（表現(xiàn)層）

所以我們繞了一大圈來(lái)看，在 UX 中建立良好的 IA 的5個(gè)關(guān)鍵點(diǎn)其實(shí)最后還是回歸到了用戶體驗(yàn)的5個(gè)要素。再回到剛開(kāi)始分享提到的那句話，從上到下表現(xiàn)層是由框架層來(lái)決定，框架層建立在結(jié)構(gòu)層基礎(chǔ)之上，結(jié)構(gòu)層基于范圍層，范圍層根據(jù)戰(zhàn)略層制定。這里每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來(lái)決定的，相當(dāng)于把用戶體驗(yàn)要素每一層需要做的事情從另一個(gè)維度又解釋了一遍。

當(dāng)然這里要注意一點(diǎn)，這些層級(jí)都不是完全割裂的，如果你要求每個(gè)層面的工作在下一個(gè)層面可以開(kāi)始之前完成，那樣一定會(huì)導(dǎo)致你和你的用戶都不滿意的結(jié)果，而相反的，應(yīng)該規(guī)劃好你的項(xiàng)目，讓任何一個(gè)層面中的工作都不能在其下層面的工作完成之前結(jié)束。這里最重要的一條是，在我們知道基本形狀之前，不能為房屋加上房頂。 不管我們是在這5個(gè)層級(jí)的哪一層，我們不能忘記的就是要把這些連成一個(gè)整體去理解，他們一定是相輔相成互相影響的。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。