起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識如何在 UX 中建立良好的信息架構(gòu)？
信息架構(gòu)的主要任務(wù)是為信息與用戶認(rèn)知之間搭建一座暢通的橋梁，是信息直觀表達(dá)的載體。通俗點說就是信息架構(gòu)不僅僅是設(shè)計信息的組織結(jié)構(gòu)，還需要研究信息的表達(dá)和傳遞。那么，我們要如何在 UX 中建立良好的信息架構(gòu)？
其實在寫今天這次分享的題目的時候我修改了很多次，為什么會修改很多次這要從我在medium看的的一篇文章說起，這篇文章的標(biāo)題是《6 Tips How to Apply Information Architecture in UX Design》，翻譯過來的意思是在用戶體驗設(shè)計中如何建立信息架構(gòu)的6點建議。
當(dāng)時讀完文章，雖然覺得文章里講的一些散碎的概念迷迷糊糊可以理解，但這些概念就像蓋房子的磚塊一樣，我完全不知道這些磚塊該怎樣才能蓋成一棟大樓，或者我就站在樓下而因為自己視野有限完全不知道這棟大樓到底長什么樣子。
所以因為這個原因我一直苦惱于該如何去清晰的表達(dá)想要分享的內(nèi)容，思來想去決定這次分享不能僅僅是我對某篇文章的翻譯，應(yīng)該是由這篇文章衍生出來的各種想要弄清楚這篇文章到底在講什么而先要弄明白的知識。當(dāng)我們了解清楚了這些信息之后再來理解這篇文章就會輕松容易的多了，下面就將我總結(jié)出來的內(nèi)容分享給大家。
UX &IA
- UX 即 user experience譯為用戶體驗；
- IA 即 information architecture譯為信息架構(gòu)。
他們的關(guān)系可以簡單理解為良好的信息架構(gòu)是高效用戶體驗的基礎(chǔ)。
我們平時聽到了太多關(guān)于用戶體驗的東西，什么做產(chǎn)品就是要重視用戶體驗啦，這個產(chǎn)品用戶體驗不好啦等等，大家都以為用戶體驗就跟交互設(shè)計差不多，最多就是再多個UI設(shè)計？
我之前確實也是這么理解的，但是最近發(fā)現(xiàn)我的這個想法是有些過于片面了。（用戶體驗是一個龐大的系統(tǒng)性課題，這里只做簡單介紹，想要深入研究的同學(xué)建議讀下《用戶體驗要素》）
我們可以把用戶體驗的工作分解成五個組成要素，分別為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。（記住這個圖很重要?。?/p>
它們都是自下而上起作用的，每一個層面都是根據(jù)它下面的那個層面來決定的。所以表現(xiàn)層由框架層來決定，框架層則建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層的設(shè)計基于范圍層，范圍層是根據(jù)戰(zhàn)略層來制定的。每一個層面的決定都會影響到它之上層面的可用選項，信息架構(gòu)只是用戶體驗結(jié)構(gòu)層的一部分而已。
什么是IA
IA 即 information architecture，解釋出來就是合理的組織信息的展現(xiàn)形式。
主要任務(wù)是為信息與用戶認(rèn)知之間搭建一座暢通的橋梁，是信息直觀表達(dá)的載體，通俗點說就是信息架構(gòu)不僅僅是設(shè)計信息的組織結(jié)構(gòu)，還需要研究信息的表達(dá)和傳遞。
這么說也許還是有些抽象，舉個簡單易懂的例子：
我們來看這個商場的平面解析圖，通過這個圖我們可以很清楚的了解商場的結(jié)構(gòu)從而快速定位自己的位置，還能順利找到自己想要購買的產(chǎn)品。信息架構(gòu)對于一款產(chǎn)品來說就相當(dāng)于商場的平面解析圖，就像現(xiàn)在我們看到的這幅圖一樣，商場的每一層都有相對應(yīng)的分類區(qū)塊來指導(dǎo)消費者。
試想如果一個商場沒有對商品進(jìn)行有序的分類，那么我們在逛商場的時候就很難順利挑選出自己所需要的商品，面對各種無序且數(shù)量繁多的商品我們一定會崩潰。這樣的情況對于男士來說絕對是場災(zāi)難，但對于女性來說也許會是一個充滿未知探索的挑選過程吧。
但不管怎么說在這里設(shè)計師需要做的就是規(guī)劃好這些樓層信息層級，主要做的工作就是：分類、層級梳理等。簡單的說就是規(guī)劃好每一層有什么商品，同一層商品怎么分布等等信息。
所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計中：設(shè)計師梳理信息架構(gòu)，其實和剛才說的梳理商場樓層架構(gòu)的概念是差不多的。
IA的作用
一個好的信息架構(gòu)一定是會滿足兩個維度的需求即用戶需求和產(chǎn)品目標(biāo)。
- 從用戶的角度出發(fā)它可以讓用戶可以在一定的信息規(guī)劃下更容易的找到自己想要的“東西”。
- 從產(chǎn)品目標(biāo)角度來看它能通過“信息架構(gòu)設(shè)計”去教育、說服、通知用戶。
所以用最簡單的兩個字來說其實信息架構(gòu)就是在做分類！?。。。。。?/p>
再回到剛才那個例子來想一想，把商場里的商品分類其實對于我們產(chǎn)品而言，就是在給我們產(chǎn)品中的信息分類，以方便用戶能更好的使用我們的產(chǎn)品，而不會想要把產(chǎn)品卸載從而使產(chǎn)品達(dá)到易用好用想用的目的。就跟我們逛商場一樣，當(dāng)我們能夠根據(jù)指示順利買到自己所需的商品的時候，我們就不會因為找不到我們想買的商品而失望的離開商場。
那么問題來了，我們該如何進(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ì)分出次級分類，這樣的“主要分類”和“次級分類”就構(gòu)成了“一個個空槽”，將想要的內(nèi)容和功能按順序一一填入即可。
我們以微信為例：首先根據(jù)產(chǎn)品目標(biāo)將“主要分類”即一級架構(gòu)分為“最近會話（微信）”、“通訊錄”、“發(fā)現(xiàn)”和“我”；然后再進(jìn)行“次級分類”分類，比如：“發(fā)現(xiàn)”下再分“朋友圈”、“掃一掃”、“搖一搖”等等；最后將相應(yīng)的功能（如朋友圈feeds、發(fā)朋友圈、朋友圈消息等）填入到相應(yīng)的“朋友圈”分類中。
這樣就像是先有了大概的框架我們再根據(jù)這些框架往上面加?xùn)|西的感覺是一樣的。
接下來我們再來說一說從下到上的方法：
剛才說了從下到上是由范圍層驅(qū)動從產(chǎn)品的功能和內(nèi)容層面出發(fā)的，所以我們就要先把已有的所有內(nèi)容，放在最低層級分類中，然后再將他們分別歸屬到較高一級的類別。這種分類方法其實就是在做“歸類”。
其實從下到上的信息架構(gòu)方法也包括了主要分類和次級分類，但它是根據(jù)對內(nèi)容和功能需求的分析而來的。先從已有的資料開始，我們把這些資料統(tǒng)統(tǒng)放到最低級別的分類中，然后再將它們分別歸屬到較高一級的類別，從而逐漸構(gòu)建出能反應(yīng)我們的產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。
具體工作中我們可以將所有的功能點用一張張卡片寫下來，然后讓目標(biāo)用戶參與到信息分類中，并反饋相關(guān)分類標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計師去梳理信息架構(gòu)的參考。實際實踐過程中，更需要設(shè)計師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類的能力，進(jìn)一步通過用戶測試去檢驗分類的信息傳達(dá)有效性。
其實就好像我們?nèi)粘Ｉ钪惺占{衣服，我們會根據(jù)不同標(biāo)準(zhǔn)去收納，比如：我們可以根據(jù)季節(jié)分類，也可以根據(jù)顏色分類，或者是根據(jù)款式分類，每個人都會有不同的分類習(xí)慣。所以這里歸結(jié)到工作中才會讓目標(biāo)用戶參與到信息分類中，畢竟我們的產(chǎn)品是服務(wù)于用戶。
所以還原用戶使用習(xí)慣和使用心理也是我們同樣要注意到的，這樣可以給我們提供一些有效的分類信息幫助我們更好的做出清楚的信息架構(gòu)。
當(dāng)然這兩種方法都有一定的局限，從上到下的架構(gòu)方法有時可能導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略，而從下到上的方法則可能導(dǎo)致架構(gòu)過于精確的反應(yīng)了現(xiàn)有的內(nèi)容。因此不能靈活地容納未來內(nèi)容的變動或增加，所以在實際運用中是需要我們將這兩種方式是結(jié)合起來靈活用運用。
這兩種方法雖然有不同的視角，但其實最終目的都是一樣，就是讓我們的產(chǎn)品易用好用最終達(dá)到想用的目的。所以讓這兩種方法對接、交匯、融合之后得出的結(jié)果，才應(yīng)該是我們理想中的產(chǎn)品信息架構(gòu)。
影響IA的因素
剛才提到用戶體驗的5個層級是自下而上對其上面一層起作用的，信息架構(gòu)位于用戶體驗要素第3層結(jié)構(gòu)層。剛才說了結(jié)構(gòu)層的設(shè)計基于范圍層之上，所以這里遇到的影響因素我們還要返回到范圍層面去尋找。
范圍層又包含兩個維度：功能和內(nèi)容。
在從范圍層到結(jié)構(gòu)層這個過程中我們會遇到很多影響因素，所以把這些影響因素總結(jié)起來我們還是要從用戶層面（內(nèi)容）和產(chǎn)品層面（功能）兩個維度來理解：
- 從用戶的角度出發(fā)，理解能力、操作習(xí)慣、目標(biāo)內(nèi)容使用頻率等等這些都會成為影響因素。
- 從產(chǎn)品角度來看，產(chǎn)品的核心價值、主線功能、特色功能等才是影響信息梳理的因素。
這兩個層面當(dāng)然也不是完全割裂的，在做信息架構(gòu)的時候可以先從一個層面出發(fā)得出一個結(jié)論之后，再用另外一個層面去驗證得到的答案，然后再不斷優(yōu)化在驗證過程中遇到的問題。
不同人會有不同的分類結(jié)果，因為根據(jù)不同情況我們所需要關(guān)注的側(cè)重點會有不同，我們根據(jù)不同的影響因素會得出不同的答案。每個人都會得出不一樣的分類結(jié)果，沒有哪個結(jié)果是完全正確或者說是完全相同的。就像數(shù)學(xué)中的排列組合一樣，內(nèi)容越多我們得到的結(jié)果就會越豐富。
但是這些結(jié)果當(dāng)然不是全都合理的，所以就需要設(shè)計師根據(jù)自己的經(jīng)驗，結(jié)合產(chǎn)品層和用戶層的需求找到合理的解決方案。我們都知道在產(chǎn)品設(shè)計中想要設(shè)計出來一款完美不需要迭代優(yōu)化的產(chǎn)品，幾乎是不可能的，所以我們能做的只能是結(jié)合各方面的影響因素和自己的經(jīng)驗理解，一直優(yōu)化產(chǎn)品讓它接近于完美的狀態(tài)。
現(xiàn)在我們來思考一個問題：為什么微信朋友圈這么高密度使用的功能要放到二級菜單呢？
微信的創(chuàng)始人張小龍是這樣解釋的：
- 微信是個社交軟件，核心功能是社交、是溝通、是好友，所以一級菜單只能跟這個相關(guān)（產(chǎn)品功能層面）；
- 當(dāng)朋友圈為二級tab時，掃一掃、搖一搖、附近的人、漂流瓶、購物這些功能的曝光度就會下降，不利于微信功能的拓展（產(chǎn)品功能層面）；
- 也許會造成各個模塊分配不平衡，而且發(fā)現(xiàn)里的功能與其他模塊的功能屬性混在一起也許會不恰當(dāng)，微信為了不讓用戶被過多的信息打擾把公共號打包放在一起，那么朋友圈隨著聯(lián)系人增多，分享動態(tài)也會增加，而且內(nèi)容都是一些生活中的瑣事，多少也會像公共號一樣打擾到用戶。（用戶角度）
- 設(shè)計并不是對用戶有求必應(yīng)，而是應(yīng)該在產(chǎn)品發(fā)展戰(zhàn)略的指導(dǎo)下平衡各功能。如果將朋友圈兒提升為一級入口，很明顯微信的社交分享功能將得到強化，那么相應(yīng)的其他功能將會被弱化，這與微信鏈接一切的發(fā)展戰(zhàn)略是相違背的。（產(chǎn)品層面）
保持主干清晰，枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼，它應(yīng)該盡量保持簡單、明了，不可以輕易變更，讓用戶無所適從。次要功能豐富主干，不可以喧賓奪主，盡量隱藏起來，而不要放在一級頁面。
這個只是舉了一個簡單的小例子供大家了解信息架構(gòu)這個概念，體會一下如何用一個更全面更發(fā)展的眼光去看待產(chǎn)品結(jié)構(gòu)這個抽象的問題。
總結(jié)
要在UX中建立良好的IA我們需要特別注意的5個關(guān)鍵點：
- 在建立信息架構(gòu)之前確定產(chǎn)品目標(biāo)（戰(zhàn)略層）；
- 進(jìn)行用戶研究預(yù)測用戶對產(chǎn)品可能產(chǎn)生的反應(yīng)（范圍層）；
- 合理運用認(rèn)知心理學(xué)原理預(yù)測用戶對產(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個關(guān)鍵點其實最后還是回歸到了用戶體驗的5個要素。再回到剛開始分享提到的那句話，從上到下表現(xiàn)層是由框架層來決定，框架層建立在結(jié)構(gòu)層基礎(chǔ)之上，結(jié)構(gòu)層基于范圍層，范圍層根據(jù)戰(zhàn)略層制定。這里每一個層面都是根據(jù)它下面的那個層面來決定的，相當(dāng)于把用戶體驗要素每一層需要做的事情從另一個維度又解釋了一遍。
當(dāng)然這里要注意一點，這些層級都不是完全割裂的，如果你要求每個層面的工作在下一個層面可以開始之前完成，那樣一定會導(dǎo)致你和你的用戶都不滿意的結(jié)果。而相反的，應(yīng)該規(guī)劃好你的項目，讓任何一個層面中的工作都不能在其下層面的工作完成之前結(jié)束。
這里最重要的一條是，在我們知道基本形狀之前，不能為房屋加上房頂。不管我們是在這5個層級的哪一層，我們不能忘記的就是要把這些連成一個整體去理解，他們一定是相輔相成互相影響的。
后記
由于是視覺設(shè)計師出身，當(dāng)了解一個自己陌生概念的時候，不知不覺就會從這個概念分支出好多東西需要學(xué)習(xí)了解。
就像起初我只是好奇不明白信息架構(gòu)到底是個什么東西，知道它是用戶體驗中的一部分，才又開始思考它跟用戶體驗之間到底是何種關(guān)系。知道了它是用戶體驗5要素中位于中間第3層級的一部分內(nèi)容，我又納悶這個層級跟其他層級的關(guān)系，又了解到除了結(jié)構(gòu)層之外的其他4個層級的內(nèi)容，然后不知不覺我居然就把用戶體驗要素了解了一遍。
想想也是挺好玩兒的一個過程，希望能帶給大家一些實質(zhì)性的幫助，我之前一直害怕分享因為我怕自己講錯東西。但后來有人告訴我分享其實就是把自己對一些東西的理解拿出來跟大家討論，又不是講課，根本不用擔(dān)心講的對錯，最主要的是分享是否能引起別人的共鳴。
如果有共鳴證明自己的觀點是能得到認(rèn)可的，如果被吐槽也不是壞事，至少知道哪一方面知識是需要加強的，所以也希望大家可以多多給我提意見互動。
作者：Wendy，公眾號：FTDesign（ID：JDFFTD）
來源：https://mp.weixin.qq.com/s/1_zv_HsbyuIqSXebx9pcfQ
本文由 @Wendy 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
好棒，邏輯清晰，文章易懂。