掌握這5個關(guān)鍵點,零基礎也能建立信息架構(gòu)

2018-11-23    資深UI設計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

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

今天想要跟大家聊一聊關(guān)于 UX 和 IA 的話題。其實在寫今天這次分享的題目的時候我修改了很多次,為什么會修改很多次?這要從我在 medium 看的一篇文章說起,這篇文章的標題是《6 Tips How to Apply Information Architecture in UX Design》,翻譯過來的意思是在用戶體驗設計中如何建立信息架構(gòu)的6點建議。

當時讀完文章,雖然覺得文章里講的一些散碎的概念迷迷糊糊可以理解,但這些概念就像蓋房子的磚塊一樣,我完全不知道這些磚塊該怎樣才能蓋成一棟大樓,或者我就站在樓下而因為自己視野有限完全不知道這棟大樓到底長什么樣子,所以因為這個原因我一直苦惱于該如何去清晰的表達想要分享的內(nèi)容,思來想去決定這次分享不能僅僅是我對某篇文章的翻譯,想要弄清楚這篇文章到底在講什么,先要弄明白文章里的知識,當我們了解清楚了這些信息之后再來理解這篇文章就會輕松容易得多,下面就將我總結(jié)出來的內(nèi)容分享給大家。

一、UX & IA

UX 即 user experience,譯為用戶體驗。

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

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

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

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

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

二、什么是IA

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

主要任務是為信息與用戶認知之間搭建一座暢通的橋梁,是信息直觀表達的載體,通俗點說就是信息架構(gòu)不僅僅是設計信息的組織結(jié)構(gòu),還需要研究信息的表達和傳遞。

這么說也許還有些抽象,舉個簡單易懂的例子:

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

但不管怎么說在這里設計師需要做的就是規(guī)劃好這些樓層信息層級,主要做的工作就是:分類、層級梳理等。簡單的說就是規(guī)劃好每一層有什么商品,同一層商品怎么分布等等信息。

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

三、IA的作用

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

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

從產(chǎn)品目標角度來看它能通過「信息架構(gòu)設計」去教育、說服、通知用戶。

所以用最簡單的兩個字來說其實信息架構(gòu)就是在做分類。

再回到剛才那個例子想一想,把商場里的商品分類其實對于我們產(chǎn)品而言就是在給我們產(chǎn)品中的信息分類,以方便用戶能更好的使用我們的產(chǎn)品,而不會想要把產(chǎn)品卸載,從而使產(chǎn)品達到易用好用想用的目的。就跟我們逛商場一樣,當我們能夠根據(jù)指示順利買到自己所需的商品的時候我們就不會因為找不到我們想買的商品而失望的離開商場。

那么問題來了,我們該如何進行信息架構(gòu)分類呢?也就是信息架構(gòu)的分類方法是什么呢?

四、IA分類方法

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

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

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

這樣就像是先有了大概的框架我們再根據(jù)這些框架往上面加東西的感覺是一樣的。

接下來我們再來說一說從下到上的方法:

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

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

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

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

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

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

五、影響IA的因素

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

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

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

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

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

現(xiàn)在我們來思考一個問題:為什么微信朋友圈這么高密度使用的功能要放到二級菜單呢?

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

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

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

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

總結(jié)

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

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

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

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

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔