如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
什么是信息架構(gòu)？怎么理解用戶體驗(yàn)五要素？本文用大量的案例和插圖幫你輕松掌握這個(gè)基礎(chǔ)知識(shí)。今天想要跟大家聊一聊關(guān)于 UX 和 IA 的話題。其實(shí)在寫今天這次分享的題目的時(shí)候我修改了很多次，為什么會(huì)修改很多次？這要從我在 medium 看的一篇文章說起，這篇文章的標(biāo)題是《6 Tips How to Apply Information Architecture in UX Design》，翻譯過來的意思是在用戶體驗(yàn)設(shè)計(jì)中如何建立信息架構(gòu)的6點(diǎn)建議。
當(dāng)時(shí)讀完文章，雖然覺得文章里講的一些散碎的概念迷迷糊糊可以理解，但這些概念就像蓋房子的磚塊一樣，我完全不知道這些磚塊該怎樣才能蓋成一棟大樓，或者我就站在樓下而因?yàn)樽约阂曇坝邢尥耆恢肋@棟大樓到底長什么樣子，所以因?yàn)檫@個(gè)原因我一直苦惱于該如何去清晰的表達(dá)想要分享的內(nèi)容，思來想去決定這次分享不能僅僅是我對(duì)某篇文章的翻譯，想要弄清楚這篇文章到底在講什么，先要弄明白文章里的知識(shí)，當(dāng)我們了解清楚了這些信息之后再來理解這篇文章就會(huì)輕松容易得多，下面就將我總結(jié)出來的內(nèi)容分享給大家。
一、UX & IA
UX 即 user experience，譯為用戶體驗(yàn)。
IA 即 information architecture，譯為信息架構(gòu)。
他們的關(guān)系可以簡單理解為良好的信息架構(gòu)是用戶體驗(yàn)的基礎(chǔ)。
我們平時(shí)聽到了太多關(guān)于用戶體驗(yàn)的東西，大家都以為用戶體驗(yàn)就跟交互設(shè)計(jì)差不多。我之前確實(shí)也是這么理解的，但是最近發(fā)現(xiàn)我的這個(gè)想法是有些過于片面了。
我們可以把用戶體驗(yàn)的工作分解成五個(gè)組成要素，分別為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
它們都是自下而上起作用的，每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來決定的，所以表現(xiàn)層由框架層來決定，框架層則建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層的設(shè)計(jì)基于范圍層，范圍層是根據(jù)戰(zhàn)略層來制定的。每一個(gè)層面的決定都會(huì)影響到它之上層面的可用選項(xiàng)，信息架構(gòu)只是用戶體驗(yàn)結(jié)構(gòu)層的一部分而已。
二、什么是IA
IA 即 information architecture，解釋出來就是合理的組織信息的展現(xiàn)形式。
主要任務(wù)是為信息與用戶認(rèn)知之間搭建一座暢通的橋梁，是信息直觀表達(dá)的載體，通俗點(diǎn)說就是信息架構(gòu)不僅僅是設(shè)計(jì)信息的組織結(jié)構(gòu)，還需要研究信息的表達(dá)和傳遞。
這么說也許還有些抽象，舉個(gè)簡單易懂的例子：
我們來看這個(gè)商場(chǎng)的平面解析圖，通過這個(gè)圖我們可以很清楚的了解商場(chǎng)的結(jié)構(gòu)，從而快速定位自己的位置還能順利找到自己想要購買的產(chǎn)品。信息架構(gòu)對(duì)于一款產(chǎn)品來說就相當(dāng)于商場(chǎng)的平面解析圖，就像現(xiàn)在我們看到的這幅圖一樣，商場(chǎng)的每一層都有相對(duì)應(yīng)的分類區(qū)塊來指導(dǎo)消費(fèi)者。試想如果一個(gè)商場(chǎng)沒有對(duì)商品進(jìn)行有序的分類，那么我們?cè)诠渖虉?chǎng)的時(shí)候就很難順利挑選出自己所需要的商品，面對(duì)各種無序且數(shù)量繁多的商品我們一定會(huì)崩潰，這樣的情況對(duì)于男士來說絕對(duì)是場(chǎng)災(zāi)難，但對(duì)于女性來說也許會(huì)是一個(gè)充滿未知探索的挑選過程吧。
但不管怎么說在這里設(shè)計(jì)師需要做的就是規(guī)劃好這些樓層信息層級(jí)，主要做的工作就是：分類、層級(jí)梳理等。簡單的說就是規(guī)劃好每一層有什么商品，同一層商品怎么分布等等信息。
所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中：設(shè)計(jì)師梳理信息架構(gòu)，其實(shí)和剛才說的梳理商場(chǎng)樓層架構(gòu)的概念是差不多的。
三、IA的作用
一個(gè)好的信息架構(gòu)一定是會(huì)滿足兩個(gè)維度的需求，即用戶需求和產(chǎn)品目標(biāo)。
從用戶的角度出發(fā)它可以讓用戶在一定的信息規(guī)劃下更容易找到自己想要的「東西」。
從產(chǎn)品目標(biāo)角度來看它能通過「信息架構(gòu)設(shè)計(jì)」去教育、說服、通知用戶。
所以用最簡單的兩個(gè)字來說其實(shí)信息架構(gòu)就是在做分類。
再回到剛才那個(gè)例子想一想，把商場(chǎng)里的商品分類其實(shí)對(duì)于我們產(chǎn)品而言就是在給我們產(chǎn)品中的信息分類，以方便用戶能更好的使用我們的產(chǎn)品，而不會(huì)想要把產(chǎn)品卸載，從而使產(chǎn)品達(dá)到易用好用想用的目的。就跟我們逛商場(chǎng)一樣，當(dāng)我們能夠根據(jù)指示順利買到自己所需的商品的時(shí)候我們就不會(huì)因?yàn)檎也坏轿覀兿胭I的商品而失望的離開商場(chǎng)。
那么問題來了，我們?cè)撊绾芜M(jìn)行信息架構(gòu)分類呢？也就是信息架構(gòu)的分類方法是什么呢？
四、IA分類方法
這里給大家介紹2種方法，從「產(chǎn)品目標(biāo)」出發(fā)我們可以采用「從上到下」的分類方法；從「內(nèi)容和功能需求分析」出發(fā)就可以用「從下到上」的方法進(jìn)行分類。下面來跟大家分享一下這兩種方法的具體做法。
剛才說了從上到下是以產(chǎn)品目標(biāo)即戰(zhàn)略層出發(fā)的分類方法，所以最開始就是先從最廣泛的、可能滿足決策目標(biāo)的內(nèi)容與功能開始進(jìn)行分類，然后再按邏輯細(xì)分出次級(jí)分類，這樣的「主要分類」和「次級(jí)分類」就構(gòu)成了「一個(gè)個(gè)空槽」，將想要的內(nèi)容和功能按順序一一填入即可。
我們以微信為例：首先根據(jù)產(chǎn)品目標(biāo)將「主要分類」即一級(jí)架構(gòu)分為「最近會(huì)話（微信）」、「通訊錄」、「發(fā)現(xiàn)」和「我」；然后再進(jìn)行「次級(jí)分類」分類，比如「發(fā)現(xiàn)」下再分「朋友圈」、「掃一掃」、「搖一搖」等等；最后將相應(yīng)的功能（如朋友圈feeds、發(fā)朋友圈、朋友圈消息等）填入到相應(yīng)的「朋友圈」分類中。
這樣就像是先有了大概的框架我們?cè)俑鶕?jù)這些框架往上面加?xùn)|西的感覺是一樣的。
接下來我們?cè)賮碚f一說從下到上的方法：
剛才說了從下到上是由范圍層驅(qū)動(dòng)從產(chǎn)品的功能和內(nèi)容層面出發(fā)的，所以我們就要先把已有的所有內(nèi)容，放在層級(jí)分類中，然后再將他們分別歸屬到較高一級(jí)的類別。這種分類方法其實(shí)就是在做「歸類」。
其實(shí)從下到上的信息架構(gòu)方法也包括了主要分類和次級(jí)分類，但它是根據(jù)對(duì)內(nèi)容和功能需求的分析而來的。先從已有的資料開始，我們把這些資料統(tǒng)統(tǒng)放到級(jí)別的分類中，然后再將它們分別歸屬到較高一級(jí)的類別，從而逐漸構(gòu)建出能反應(yīng)我們的產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。
具體工作中我們可以將所有的功能點(diǎn)用一張張卡片寫下來，然后讓目標(biāo)用戶參與到信息分類中，并反饋相關(guān)分類標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計(jì)師去梳理信息架構(gòu)的參考。實(shí)踐過程中，更需要設(shè)計(jì)師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類的能力，進(jìn)一步通過用戶測(cè)試去檢驗(yàn)分類的信息傳達(dá)有效性。
其實(shí)就好像我們?nèi)粘Ｉ钪惺占{衣服，我們會(huì)根據(jù)不同標(biāo)準(zhǔn)去收納，比如我們可以根據(jù)季節(jié)分類，也可以根據(jù)顏色分類，或者是根據(jù)款式分類，每個(gè)人都會(huì)有不同的分類習(xí)慣，所以這里歸結(jié)到工作中才會(huì)讓目標(biāo)用戶參與到信息分類中，畢竟我們的產(chǎn)品是服務(wù)于用戶，所以還原用戶使用習(xí)慣和使用心理也是我們同樣要注意到的，這樣可以給我們提供一些有效的分類信息幫助我們更好的做出清楚的信息架構(gòu)。
當(dāng)然這兩種方法都有一定的局限，從上到下的架構(gòu)方法有時(shí)可能導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略，而從下到上的方法則可能導(dǎo)致架構(gòu)過于的反應(yīng)了現(xiàn)有的內(nèi)容，因此不能靈活地容納未來內(nèi)容的變動(dòng)或增加，所以在實(shí)際運(yùn)用中是需要我們將這兩種方式結(jié)合起來靈活運(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)層，剛才說了結(jié)構(gòu)層的設(shè)計(jì)基于范圍層之上，所以這里遇到的影響因素我們還要返回到范圍層面去尋找，范圍層又包含兩個(gè)維度，功能和內(nèi)容，在從范圍層到結(jié)構(gòu)層這個(gè)過程中我們會(huì)遇到很多影響因素，所以把這些影響因素總結(jié)起來我們還是要從用戶層面（內(nèi)容）和產(chǎn)品層面（功能）兩個(gè)維度來理解。
從用戶的角度出發(fā)，理解能力、操作習(xí)慣、目標(biāo)內(nèi)容使用頻率等等這些都會(huì)成為影響因素。
從產(chǎn)品角度來看，產(chǎn)品的核心價(jià)值、主線功能、特色功能等才是影響信息梳理的因素。
這兩個(gè)層面當(dāng)然也不是完全割裂的，在做信息架構(gòu)的時(shí)候可以先從一個(gè)層面出發(fā)得出一個(gè)結(jié)論之后再用另外一個(gè)層面去驗(yàn)證得到的答案，然后再不斷優(yōu)化在驗(yàn)證過程中遇到的問題。
不同人會(huì)有不同的分類結(jié)果，因?yàn)楦鶕?jù)不同情況我們所需要關(guān)注的側(cè)重點(diǎn)會(huì)有不同，我們根據(jù)不同的影響因素會(huì)得出不同的答案。每個(gè)人都會(huì)得出不一樣的分類結(jié)果，沒有哪個(gè)結(jié)果是完全正確或者說是完全相同的，就像數(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ì)出來一款完美不需要迭代優(yōu)化的產(chǎn)品幾乎是不可能的，所以我們能做的只能是結(jié)合各方面的影響因素和自己的經(jīng)驗(yàn)理解一直優(yōu)化產(chǎn)品讓它接近于完美的狀態(tài)。
現(xiàn)在我們來思考一個(gè)問題：為什么微信朋友圈這么高密度使用的功能要放到二級(jí)菜單呢？
微信的創(chuàng)始人張小龍是這樣解釋的：
- 微信是個(gè)社交軟件，核心功能是社交，是溝通，是好友，所以一級(jí)菜單只能跟這個(gè)相關(guān)。（產(chǎn)品功能層面）
- 當(dāng)朋友圈為二級(jí)tab 時(shí)，掃一掃，搖一搖，附近的人，漂流瓶，購物這些功能的曝光度就會(huì)下降，不利于微信功能的拓展。（產(chǎn)品功能層面）
- 也許會(huì)造成各個(gè)模塊分配不平衡，而且發(fā)現(xiàn)里的功能與其他模塊的功能屬性混在一起也許會(huì)不恰當(dāng)，微信為了不讓用戶被過多的信息打擾把公共號(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)該盡量保持簡單、明了，不可以輕易變更，讓用戶無所適從。次要功能豐富主干，不可以喧賓奪主，盡量隱藏起來，而不要放在一級(jí)頁面。
舉這個(gè)簡單的小例子供大家了解信息架構(gòu)這個(gè)概念，體會(huì)一下如何用一個(gè)更全面更發(fā)展的眼光去看待產(chǎn)品結(jié)構(gòu)這個(gè)抽象的問題。
總結(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)航（框架層）
- 注意視覺層次在內(nèi)容的視覺表現(xiàn)中的重要作用（表現(xiàn)層）
所以我們繞了一大圈來看，在 UX 中建立良好的 IA 的5個(gè)關(guān)鍵點(diǎn)其實(shí)最后還是回歸到了用戶體驗(yàn)的5個(gè)要素。再回到剛開始分享提到的那句話，從上到下表現(xiàn)層是由框架層來決定，框架層建立在結(jié)構(gòu)層基礎(chǔ)之上，結(jié)構(gòu)層基于范圍層，范圍層根據(jù)戰(zhàn)略層制定。這里每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來決定的，相當(dāng)于把用戶體驗(yàn)要素每一層需要做的事情從另一個(gè)維度又解釋了一遍。
當(dāng)然這里要注意一點(diǎn)，這些層級(jí)都不是完全割裂的，如果你要求每個(gè)層面的工作在下一個(gè)層面可以開始之前完成，那樣一定會(huì)導(dǎo)致你和你的用戶都不滿意的結(jié)果，而相反的，應(yīng)該規(guī)劃好你的項(xiàng)目，讓任何一個(gè)層面中的工作都不能在其下層面的工作完成之前結(jié)束。這里最重要的一條是，在我們知道基本形狀之前，不能為房屋加上房頂。 不管我們是在這5個(gè)層級(jí)的哪一層，我們不能忘記的就是要把這些連成一個(gè)整體去理解，他們一定是相輔相成互相影響的。
藍(lán)藍(lán)設(shè)計(jì)( m.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。