對(duì)于大部分缺乏經(jīng)驗(yàn)的初級(jí)交互設(shè)計(jì)師而言，拿到需求文檔以后，很容易按照固有的僵化思維，著手最容易感知的部分而忽略主次，未經(jīng)思考就直接畫線框圖，然后隨意添加無(wú)邏輯關(guān)聯(lián)的交互動(dòng)畫，試圖用繁雜手法遮掩空虛的內(nèi)涵。其實(shí)這時(shí)最該做的是從用戶角度考量信息架構(gòu)，構(gòu)建良好的用戶體驗(yàn)。如果作為設(shè)計(jì)師忽略掉這些細(xì)枝末節(jié)，那么產(chǎn)品的用戶體驗(yàn)可想而知。

在這里，筆者希望各位同行都明確一個(gè)觀點(diǎn)：在這個(gè)動(dòng)不動(dòng)就用AI說(shuō)事的時(shí)代，可量化的工作總有一天被人工智能代替，淪為“線框仔”的交互設(shè)計(jì)師，終將被行業(yè)淘汰。

所以拿到需求之后，針對(duì)需求搭建思維框架，遠(yuǎn)遠(yuǎn)勝于上手畫原型圖。原型圖只是思維的展現(xiàn)方式，只要能將思維明確地表現(xiàn)出來(lái)，甚至可以用手繪代替。在日常工作中，思考和原型圖的精力分配大致是7:3，而杰出的設(shè)計(jì)師，這個(gè)比例甚至可以達(dá)到8:2。

如果我們將產(chǎn)品設(shè)計(jì)中各個(gè)環(huán)節(jié)按照權(quán)重大小進(jìn)行排列的話，那么從大到小可以排列為：信息架構(gòu)設(shè)計(jì)、功能結(jié)構(gòu)設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)。所以這一章需要解決的恰恰是如何設(shè)計(jì)信息架構(gòu)，而不是上手線框圖。

一、用戶體驗(yàn)五要素

在開始了解信息架構(gòu)前，先來(lái)回顧一個(gè)大名鼎鼎的模型吧——用戶體驗(yàn)五要素。

筆者更喜歡將其稱為產(chǎn)品設(shè)計(jì)五要素，這是因?yàn)樗粌H讓我們對(duì)產(chǎn)品有了初步的整體認(rèn)識(shí)，在后續(xù)工作中還能對(duì)細(xì)節(jié)進(jìn)行分解。在交互設(shè)計(jì)師的眼中，也許最先看到、優(yōu)先著力的是局部設(shè)計(jì)，比如結(jié)構(gòu)層和框架層。

當(dāng)你既能把握好整體布局，又能優(yōu)化局部體驗(yàn)時(shí)，設(shè)計(jì)作品可以將點(diǎn)、線、面連成一體由零到整再化整為零，那么你才是一位可以從用戶體驗(yàn)的角度掌控產(chǎn)品的優(yōu)秀交互設(shè)計(jì)師。

二、信息來(lái)源

既然是信息架構(gòu)設(shè)計(jì)，巧婦難為無(wú)米之炊，那么米（信息）是從哪里來(lái)呢？

1.戰(zhàn)略層-產(chǎn)品信息的方向

筆者戲稱這一層稱為“老板層”，因?yàn)橥ǔ＿@一層的決策者是老板，而非產(chǎn)品經(jīng)理，于是會(huì)出現(xiàn)以下趣味場(chǎng)景：（以筆者所在的互聯(lián)網(wǎng)金融行業(yè)為例）老板突發(fā)奇想、大手一揮決定公司未來(lái)要賣基金，產(chǎn)品經(jīng)理有了新的工作內(nèi)容——做基金產(chǎn)品。這時(shí)候，產(chǎn)品經(jīng)理開始琢磨了，老板想要的到底是個(gè)啥？我需要得到老板準(zhǔn)確的需求呀！所以一個(gè)合格的產(chǎn)品經(jīng)理，要從老板嘴里套出兩個(gè)基本要素：

1. 用戶能從這個(gè)產(chǎn)品獲得什么？
2. 公司能從這個(gè)產(chǎn)品獲得什么？

這里需要插一句，當(dāng)時(shí)的背景是這樣的：公司的理財(cái)產(chǎn)品缺少債權(quán)，大量用戶無(wú)法將手中的錢進(jìn)行投資、也無(wú)法獲得收益，因此產(chǎn)品的用戶流失率很高。

如果公司新上線的基金產(chǎn)品運(yùn)作得當(dāng)?shù)脑挘脩舨坏梢詼p小資金站崗風(fēng)險(xiǎn)，還能獲取適當(dāng)收益。同時(shí)，對(duì)于公司而言，產(chǎn)品線擴(kuò)展，豐富業(yè)務(wù)領(lǐng)域，可拉攏用戶投資獲得利潤(rùn)，還增加了公司在行業(yè)的影響力，差異化的服務(wù)使公司在行業(yè)競(jìng)爭(zhēng)中更具優(yōu)勢(shì)。

明確了這兩個(gè)問(wèn)題，也就完成了戰(zhàn)略層的最基本任務(wù)。所有產(chǎn)品的出發(fā)點(diǎn)都須基于這兩點(diǎn)：即用戶痛點(diǎn)和解決方案，二者的契合度高低決定產(chǎn)品是否成功。

2.范圍層-產(chǎn)品信息的產(chǎn)生

有了產(chǎn)品方向，接下來(lái)就會(huì)涉及到這個(gè)產(chǎn)品會(huì)完成什么功能，提供什么信息，所以我們將范圍層比作兩個(gè)筐：一個(gè)功能筐，另一個(gè)是信息筐。二者之間互相交叉，并沒(méi)有明顯的界線。

（1）功能筐

筆者將功能筐分為兩部分，常規(guī)功能，如注冊(cè)和登錄等，和體驗(yàn)友好型功能，比如篩選、排序。需要強(qiáng)調(diào)的一點(diǎn)，產(chǎn)品經(jīng)理的需求文檔可能不會(huì)關(guān)注到體驗(yàn)友好型功能，很多情況下是交互設(shè)計(jì)師通過(guò)競(jìng)品分析、用戶調(diào)研、甚至是場(chǎng)景腦補(bǔ)出來(lái)的。

（2）信息筐

信息筐則來(lái)自于三部分：

• 首先，從功能來(lái)的信息，比如登錄會(huì)涉及手機(jī)號(hào)和密碼等信息。
• 其次，本身存在的信息，例如幫助信息。
• 以及體驗(yàn)友好型信息，同樣是來(lái)自于交互設(shè)計(jì)師的設(shè)計(jì)。

拿筆者做的基金產(chǎn)品舉例，功能筐包括下載、注冊(cè)等功能。信息筐包含基金名稱、基金代碼、凈值，漲跌幅等一系列繁多且無(wú)序的信息，如下圖。此時(shí)就需要設(shè)計(jì)一種結(jié)構(gòu)讓信息元更易查看、且更高效有序。

既然是信息架構(gòu)信息架構(gòu)設(shè)計(jì)主要研究“信息的呈現(xiàn)”，即用戶認(rèn)知信息。不同的信息組合和選擇，對(duì)應(yīng)不同的理解成本。如何讓展現(xiàn)給用戶的信息更加合理且有意義，就是信息架構(gòu)的意義。同時(shí)信息架構(gòu)的設(shè)計(jì)還會(huì)向下呼應(yīng)戰(zhàn)略層的策略：

1. 滿足用戶需求。讓用戶可以在一定的“信息規(guī)劃”下更易找到想要的“東西”。
2. 滿足產(chǎn)品目標(biāo)。通過(guò)“信息架構(gòu)設(shè)計(jì)”教育、說(shuō)服、通知用戶使用產(chǎn)品，以到達(dá)盈利的目標(biāo)。

3.信息架構(gòu)設(shè)計(jì)流程

有了米之后，那煮飯的完整流程是什么呢？擁有完整信息元后，主要分為信息處理和信息檢索兩個(gè)部分。具體步驟是決定信息元之間的關(guān)系分類（組織系統(tǒng)），制定合理的類別標(biāo)簽（標(biāo)簽系統(tǒng)）。

通過(guò)邏輯順序組合成有意義的路徑（導(dǎo)航系統(tǒng)），最后給核心信息設(shè)計(jì)快捷查找的方式（搜索系統(tǒng)）。

三、組織系統(tǒng)（Organization Systems）

組織系統(tǒng)是信息架構(gòu)的核心，尋找信息元之間的關(guān)聯(lián)，并進(jìn)行分類。分類涉及到分類依據(jù)、分類方式、分類結(jié)果。

1.分類依據(jù)

組織體系（Organization Schemes）即分類的依據(jù)，分為精確性組織體系（Exact Organization Schemes）和模糊性組織體系（Ambiguous Organization Schemes）。具體的分類依據(jù)有很多，比如地理位置、時(shí)間是精確性組織體系，主題、用戶群、任務(wù)是模糊性組織體系。

在基金項(xiàng)目中是操作和按照主題分類的，細(xì)化為登錄注冊(cè)、基金主題、個(gè)人信息主題、安全主題等等。

2.分類方式

分類的方式又叫組織方式，共分為三種。

（1）自下而上（Top-Down）

通常應(yīng)用于ToC類的產(chǎn)品。在實(shí)際的設(shè)計(jì)中，可以采用卡片分類法（Card Sorting），即將所有的信息元用一張張卡片寫下來(lái)，讓“目標(biāo)用戶”參與到信息分類中并且給出分類的依據(jù)，以此作為產(chǎn)品設(shè)計(jì)師梳理信息架構(gòu)時(shí)的參考。

基金項(xiàng)目的主組織方式就是采用的自下而上，如下圖，將所有的信息元按照組織體系分類后，會(huì)形成很多父類節(jié)點(diǎn)，父類節(jié)點(diǎn)間也存在著某種關(guān)聯(lián)，進(jìn)而形成新的父類節(jié)點(diǎn)。依此類推，最終會(huì)匯集到頂級(jí)節(jié)點(diǎn)，即戰(zhàn)略層的決策。

（2）自上而下（Bottom-Up）

通常應(yīng)用于ToB的產(chǎn)品。最先從最廣泛的、可能滿足決策目標(biāo)的內(nèi)容與功能開始進(jìn)行分類，然后在按邏輯細(xì)分出次級(jí)分類，這樣的“主要分類”和“次級(jí)分類”就構(gòu)成了“一個(gè)個(gè)空槽”，再設(shè)想各種內(nèi)容和功能按順序一一填入。

自上而下組織后的層級(jí)多是從戰(zhàn)略層出發(fā)，與戰(zhàn)略目標(biāo)緊密相連，與目標(biāo)用戶看著并不那么關(guān)聯(lián)緊密，所以很多To B產(chǎn)品都需要向用戶宣導(dǎo)。而自下而上恰恰相反，先有基于用戶需求的內(nèi)容和功能，再逐層往上分類組織，所以To C產(chǎn)品通常學(xué)習(xí)成本更低。

（3）超文本（Hypertext）

超文本是一種非線性的方式，通常不作為一種主組織方式，只作為彌補(bǔ)自下而上和自上而下兩種方式不足的一種輔助方式，用來(lái)建立非同類或非同級(jí)信息元之間的關(guān)聯(lián)，為組織結(jié)構(gòu)的多樣性創(chuàng)造可能，并提供更高的靈活性。

基金項(xiàng)目中對(duì)于綁卡、實(shí)名等操作都采用了超文本的組織方式，比如添加超文本方式后的組織系統(tǒng)。

添加超文本方式后的組織系統(tǒng)

3.分類結(jié)果

采用一種或多種分類方式，會(huì)輸出對(duì)應(yīng)的分類結(jié)果，包括以下幾種類型：

（1）層級(jí)結(jié)構(gòu)（Hierarchical Structure）

這種結(jié)構(gòu)是最常用的結(jié)構(gòu)，幾乎所有產(chǎn)品的主結(jié)構(gòu)都是層級(jí)結(jié)構(gòu)。層級(jí)結(jié)構(gòu)可以視作是一種父子級(jí)關(guān)系，一個(gè)父級(jí)可以有幾個(gè)子級(jí)，子級(jí)還有它的子級(jí)，直至包含了所有信息。而構(gòu)成層級(jí)結(jié)構(gòu)的方式也就是從上而下和從下而上為主。

基金項(xiàng)目的主結(jié)構(gòu)很顯然就是層級(jí)結(jié)構(gòu)。

（2）自然結(jié)構(gòu)（Organic Structures）

得益于超文本方式，很多信息元可以從多個(gè)路徑獲得，所以自然結(jié)構(gòu)沒(méi)有太強(qiáng)烈的分類概念。

其通常被應(yīng)用于探索行為，比如訪問(wèn)視頻A和C后，系統(tǒng)都同樣推薦了視頻B，那么對(duì)于視頻B，就會(huì)有至少兩種探索路徑：一種來(lái)自視頻A，一種來(lái)自視頻C。

很顯然，自然結(jié)構(gòu)不適合作為主組織結(jié)構(gòu)。如果任何信息元都以探索的方式獲得，那么對(duì)于任務(wù)型用戶來(lái)說(shuō)，查詢的成本會(huì)大大增加，相應(yīng)的用戶體驗(yàn)也會(huì)很差，所以自然結(jié)構(gòu)多作為輔助結(jié)構(gòu)出現(xiàn)。

從組織系統(tǒng)看，基金項(xiàng)目還有部分采用自然結(jié)構(gòu)，比如實(shí)名的路徑就有兩種。

（3）矩形結(jié)構(gòu)（Matrix Structures）

矩形結(jié)構(gòu)同樣來(lái)自于超文本方式，它的信息元的來(lái)源路徑有多種。但是與自然結(jié)構(gòu)不同的是，矩形結(jié)構(gòu)更具規(guī)律，每一條來(lái)源路徑有固定的操作，而非自然結(jié)構(gòu)那樣不可控。

有個(gè)經(jīng)典的例子，如果某些用戶想通過(guò)顏色來(lái)找到某個(gè)產(chǎn)品，而另一些用戶希望通過(guò)尺寸搜尋，若使用矩陣結(jié)構(gòu)就可以同時(shí)兼容這兩種不同的用戶需求。

（4）線性結(jié)構(gòu)（Sequential Structures）

線性結(jié)構(gòu)非常好理解，平時(shí)我們看的h5頁(yè)面基本上都是線性結(jié)構(gòu)，用戶不能進(jìn)行跳轉(zhuǎn)，只能一步一步按順序找到所要的信息元。

基金項(xiàng)目中，評(píng)測(cè)部分采用的就是線性結(jié)構(gòu)，用戶需要一步一步完成評(píng)測(cè)，無(wú)法跳轉(zhuǎn)。

四、標(biāo)簽系統(tǒng)（Labeling Systems）

確立了組織系統(tǒng)，父類節(jié)點(diǎn)又該如何命名？怎樣按照用戶容易接受的方式命名？這就是接下來(lái)標(biāo)簽系統(tǒng)要解決的問(wèn)題。

互聯(lián)網(wǎng)經(jīng)過(guò)幾十年發(fā)展，很多標(biāo)簽已經(jīng)形成固定模板，比如“首頁(yè)”、“搜索”、“登錄”、“注冊(cè)”、“關(guān)于我們”等等，這些都成為了用戶心理模型的一部分，按照慣例命名是標(biāo)簽系統(tǒng)的首要原則。

除此之外，為了確保標(biāo)簽?zāi)軌蚋弑磉_(dá)力，在設(shè)計(jì)標(biāo)簽的時(shí)候，需要注意以下幾點(diǎn)：

1.盡量使用用戶語(yǔ)言

非用戶語(yǔ)言通常會(huì)出現(xiàn)在一些專業(yè)性很強(qiáng)的產(chǎn)品上。筆者所做的基金類產(chǎn)品中有很多專業(yè)術(shù)語(yǔ)，對(duì)于非專業(yè)人士來(lái)說(shuō)很難理解，所以在設(shè)計(jì)標(biāo)簽系統(tǒng)的時(shí)候，盡量使用用戶易理解的表述。

當(dāng)遇到無(wú)法替代的專業(yè)詞匯時(shí)，比如認(rèn)購(gòu)和申購(gòu)，那就需要做好注釋，不能讓用戶因?yàn)闃?biāo)簽的問(wèn)題而茫然。

2.保持一致性

標(biāo)簽的一致性代表著可預(yù)測(cè)性。對(duì)于同樣的標(biāo)簽，用戶會(huì)產(chǎn)生相同的認(rèn)知，用戶學(xué)習(xí)成本大大降低的同時(shí)，也能快速理解其背后對(duì)應(yīng)的操作或信息。

五、導(dǎo)航系統(tǒng)（Navigation Systems）

在信息架構(gòu)的概念里，導(dǎo)航就像大海里的燈塔，可以照亮來(lái)時(shí)的路，也可以指引前往的方向，所以導(dǎo)航系統(tǒng)是指從頂端節(jié)點(diǎn)到某個(gè)信息的路徑。

需要注意的是結(jié)構(gòu)層的導(dǎo)航系統(tǒng)和框架層的導(dǎo)航設(shè)計(jì)不完全相同：結(jié)構(gòu)層導(dǎo)航系統(tǒng)還局限在組織結(jié)構(gòu)的層面；而框架層導(dǎo)航設(shè)計(jì)是可視化設(shè)計(jì)，即界面設(shè)計(jì)，主要表現(xiàn)為標(biāo)簽和頁(yè)面的跳轉(zhuǎn)。結(jié)構(gòu)層導(dǎo)航系統(tǒng)可以視為框架層導(dǎo)航設(shè)計(jì)的跳轉(zhuǎn)路徑；但在框架層的導(dǎo)航設(shè)計(jì)時(shí)，仍然會(huì)根據(jù)實(shí)際頁(yè)面情況反向優(yōu)化結(jié)構(gòu)層導(dǎo)航系統(tǒng)。

結(jié)合框架層的導(dǎo)航設(shè)計(jì)，可以將導(dǎo)航系統(tǒng)分為兩部分：

1.嵌入式導(dǎo)航系統(tǒng)

包括全站、區(qū)域和情景式導(dǎo)航：

• 全站導(dǎo)航：即無(wú)論用戶走到哪里都可以看到的導(dǎo)航標(biāo)簽，也是最高級(jí)父類節(jié)是查看所有信息的路徑起點(diǎn)。
• 區(qū)域?qū)Ш剑?/strong>是用戶在某次級(jí)父類節(jié)點(diǎn)下瀏覽的子類導(dǎo)航，其影響的只是該次級(jí)父類節(jié)點(diǎn)一下的信查看路徑。
• 情景式導(dǎo)航：即超文本的鏈接，是嵌入在信息元的導(dǎo)航。