《用戶體驗(yàn)要素》將用戶體驗(yàn)的流程分為五個(gè)層次：戰(zhàn)略層鸵闪、范圍層檐晕、結(jié)構(gòu)層、框架層蚌讼、表現(xiàn)層辟灰。

戰(zhàn)略層確定了產(chǎn)品目標(biāo)和用戶需求；范圍層對(duì)用戶需求和產(chǎn)品功能進(jìn)行篩選篡石、分析芥喇、分類、定優(yōu)先級(jí)凰萨；接下來就是結(jié)構(gòu)層的信息架構(gòu)的設(shè)計(jì)了继控，也就是今天要說的內(nèi)容；確定了信息架構(gòu)和用戶的使用流程胖眷，框架層會(huì)解決導(dǎo)航設(shè)計(jì)武通、界面設(shè)計(jì)和信息設(shè)計(jì)；最后交給表現(xiàn)層珊搀，去完成產(chǎn)品視覺冶忱、觸覺、聽覺境析、嗅覺囚枪、味覺上的設(shè)計(jì)，互聯(lián)網(wǎng)產(chǎn)品主要集中在視覺方面的設(shè)計(jì)劳淆。

交互設(shè)計(jì)師涉及的工作主要集中在結(jié)構(gòu)層和框架層链沼，也會(huì)涉及到范圍層。對(duì)于戰(zhàn)略層和表現(xiàn)層影響較少沛鸵，戰(zhàn)略層是由公司管理層決定的忆植，而表現(xiàn)層由視覺設(shè)計(jì)師（UI設(shè)計(jì)師）決定。

言歸正傳谒臼，我們先來解決第一個(gè)問題朝刊，什么是信息架構(gòu)？打個(gè)比方蜈缤，有個(gè)投資方拾氓，要投資建立一個(gè)科技園區(qū)，得到一塊地之后底哥，在東邊建10個(gè)房子咙鞍，在西邊建20個(gè)房子...房官，房子挨著房子，這樣做是肯定不行的续滋。因?yàn)楸仨毜檬孪纫?guī)劃好翰守，設(shè)計(jì)好園區(qū)的道路，將園區(qū)進(jìn)行劃分疲酌，這塊地是用來建人造湖的蜡峰，旁邊的一塊地是綠化面積等等。園區(qū)建設(shè)中這個(gè)規(guī)劃的過程朗恳，就相當(dāng)于互聯(lián)網(wǎng)產(chǎn)品中的信息架構(gòu)設(shè)計(jì)湿颅。信息架構(gòu)包括組織系統(tǒng)、標(biāo)簽粥诫、導(dǎo)航油航、搜索系統(tǒng)這四個(gè)方面。

園區(qū)規(guī)劃圖

組織系統(tǒng)

世界分為生物和非生物怀浆；生物分為動(dòng)物谊囚、植物、微生物执赡；人屬于高級(jí)動(dòng)物秒啦，人又分為男人和女人；你身邊的人又被你分為熟人和陌生人搀玖，熟人里有朋友余境、戀人、親人灌诅。你從事的行業(yè)又分為互聯(lián)網(wǎng)行業(yè)和傳統(tǒng)行業(yè)芳来；互聯(lián)網(wǎng)行業(yè)里又有許多職位，產(chǎn)品經(jīng)理猜拾、交互設(shè)計(jì)師即舌、UI設(shè)計(jì)師、開發(fā)挎袜、運(yùn)營等等顽聂。

不知不覺中我們隊(duì)所有的信息都進(jìn)行了分類，因?yàn)橹挥胁粩嗟陌研畔⒎诸惗⒁牵拍芎喕@個(gè)世界紊搪，從而理解世界。分類是認(rèn)知世界的基本法則全景，如何分類甚至決定了我們的價(jià)值觀是什么耀石。

為了讓用戶更容易的理解產(chǎn)品，瀏覽需要的信息爸黄、完成要完成的任務(wù)滞伟，就必須對(duì)產(chǎn)品里涉及的所有信息進(jìn)行組織揭鳞、分類。組織系統(tǒng)包含兩個(gè)部分梆奈，一個(gè)是組織方式野崇，一個(gè)是組織結(jié)構(gòu)。

組織方式

①自上而下：

自上而下是從戰(zhàn)略層出發(fā)去考慮內(nèi)容分類亩钟。將能達(dá)成產(chǎn)品目標(biāo)和用戶需求的所有功能和內(nèi)容進(jìn)行邏輯上的分類乓梨，例如“一個(gè)”APP，分為了首頁径荔、閱讀、音樂脆霎、電影总处，接著再繼續(xù)往下細(xì)分出二級(jí)、三級(jí)信息睛蛛。從而完成產(chǎn)品的分類鹦马。

②自下而上：

自下而上是從底層信息開始，將最底層的信息歸屬到較高一層級(jí)忆肾，再將這一層級(jí)歸屬為更高一級(jí)荸频，自上而下可以理解為是在做分解，而自下而上可以理解為在做歸類客冈。

最常用的自下而上分析方法就是卡片分類法旭从，即將最底層的所有標(biāo)簽給目標(biāo)用戶，讓目標(biāo)用戶去自己歸類场仲，從而得出產(chǎn)品的信息架構(gòu)和悦。

卡片分類法

組織結(jié)構(gòu)：

①層級(jí)結(jié)構(gòu)

這種結(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í)亦鳞，直到將所有信息都包括進(jìn)來馍忽。

層級(jí)結(jié)構(gòu)

②矩形結(jié)構(gòu)

將信息從多個(gè)維度進(jìn)行分類，這種組織結(jié)構(gòu)能夠幫助不同的目標(biāo)用戶找到各自需要的內(nèi)容燕差。淘寶搜索結(jié)果頁對(duì)商品的篩選就是矩形結(jié)構(gòu)遭笋。

矩形結(jié)構(gòu)

③自然結(jié)構(gòu)

現(xiàn)實(shí)生活中，很多信息是雜亂無章毫無規(guī)律的徒探，它們之間找不到嚴(yán)格意義上的邏輯關(guān)系坐梯，這就是自然結(jié)構(gòu)。整個(gè)互聯(lián)網(wǎng)就是一個(gè)自然結(jié)構(gòu)刹帕，你平時(shí)用電腦瀏覽信息吵血，從這個(gè)鏈接跳到另一個(gè)鏈接谎替，從這個(gè)網(wǎng)站去到別的網(wǎng)站，這個(gè)瀏覽結(jié)構(gòu)就是自然結(jié)構(gòu)蹋辅。

自然結(jié)構(gòu)

④線性結(jié)構(gòu)

有一種結(jié)構(gòu)钱贯，沒有分叉信息，一個(gè)標(biāo)簽連著另一個(gè)標(biāo)簽侦另，這就是線性結(jié)構(gòu)秩命。我們用互聯(lián)網(wǎng)產(chǎn)品完成某一個(gè)任務(wù)時(shí)，多數(shù)都是線性結(jié)構(gòu)褒傅。例如：你去淘寶購物弃锐，先搜索商品——瀏覽商品——選擇商品——下單付款——等待收貨——確定收貨——評(píng)價(jià)訂單，完成一個(gè)任務(wù)就相當(dāng)于走過了一個(gè)線性結(jié)構(gòu)殿托。

線性結(jié)構(gòu)

具體到某個(gè)互聯(lián)網(wǎng)產(chǎn)品上霹菊，產(chǎn)品的主結(jié)構(gòu)基本上是層級(jí)結(jié)構(gòu)，而自然結(jié)構(gòu)最不常見支竹，矩形結(jié)構(gòu)和線性結(jié)構(gòu)多用于產(chǎn)品局部的功能和內(nèi)容的組織旋廷。理解了組織系統(tǒng)，就相當(dāng)于在大局上把握了產(chǎn)品的信息架構(gòu)礼搁，這樣設(shè)計(jì)出來的產(chǎn)品就不會(huì)給人凌亂和散的感覺饶碘。打開你常用的APP去看看，它們都是些什么結(jié)構(gòu)馒吴。

標(biāo)簽系統(tǒng)

我們利用自上而下或自下而上的方式確定了產(chǎn)品的組織結(jié)構(gòu)扎运，具體這些結(jié)構(gòu)里的節(jié)點(diǎn)該如何命名？如何按照用戶容易接受的方式去命名饮戳？這就是接下來標(biāo)簽系統(tǒng)要解決的問題绪囱。

經(jīng)過幾十年互聯(lián)網(wǎng)的發(fā)展，很多標(biāo)簽已經(jīng)被用戶廣泛接受莹捡，遵循這些已經(jīng)占據(jù)用戶心智的標(biāo)簽是一個(gè)重要原則鬼吵。

例如：首頁、搜索篮赢、站點(diǎn)地圖齿椅、聯(lián)系方式、關(guān)于我們等等启泣。

多去和目標(biāo)用戶溝通涣脚，看看目標(biāo)用戶對(duì)標(biāo)簽的理解是不是符合他們的心理模型（關(guān)于心理模型的概念，可以查看往期文章《為什么用戶覺得你的產(chǎn)品不好用寥茫？》）遣蚀，例如簡書會(huì)實(shí)時(shí)保存作者所寫的文章，它所使用的標(biāo)簽是保存中、已保存芭梯、保存這些险耀，如果換成歸檔中、已歸檔玖喘、歸檔呢甩牺？這樣作者就會(huì)覺得迷惑。

導(dǎo)航系統(tǒng)

一提到導(dǎo)航累奈，第一想到的是車載導(dǎo)航贬派、手機(jī)里的導(dǎo)航軟件，導(dǎo)航能幫我們用最快的時(shí)間到達(dá)正確的地方澎媒。同樣搞乏，互聯(lián)網(wǎng)產(chǎn)品中的導(dǎo)航系統(tǒng)，也起著這樣的作用：防止你在產(chǎn)品中迷路戒努，告訴你現(xiàn)在所處的位置请敦，能去哪，如何去柏卤。

導(dǎo)航分為三類：全局導(dǎo)航冬三；局部導(dǎo)航匀油；情景式導(dǎo)航缘缚。

全局導(dǎo)航在一般會(huì)常駐在界面當(dāng)中，像web網(wǎng)站的頂部敌蚜、APP端的標(biāo)簽欄桥滨，就屬于全局導(dǎo)航。

Apple官網(wǎng)全局導(dǎo)航

微信APP的全局導(dǎo)航

一個(gè)產(chǎn)品往往只有一個(gè)全局導(dǎo)航弛车，但是會(huì)有多個(gè)局部導(dǎo)航來補(bǔ)充齐媒。

錘子手機(jī)官網(wǎng)在全局導(dǎo)航下的局部導(dǎo)航

除了全局導(dǎo)航和局部導(dǎo)航，其他內(nèi)嵌在產(chǎn)品內(nèi)容中的鏈接或者可點(diǎn)擊的元素纷跛，都被稱為情景式導(dǎo)航喻括，情景式導(dǎo)航能讓用戶實(shí)現(xiàn)產(chǎn)品內(nèi)容直接的跳轉(zhuǎn)，從而完成用戶目標(biāo)贫奠。

移動(dòng)端導(dǎo)航是我們平時(shí)接觸最多的產(chǎn)品導(dǎo)航唬血，下一篇文章會(huì)詳細(xì)描述，包括標(biāo)簽式導(dǎo)航唤崭、抽屜式導(dǎo)航拷恨、網(wǎng)格式導(dǎo)航、列表式導(dǎo)航谢肾、菜單式導(dǎo)航腕侄、點(diǎn)聚式導(dǎo)航等等。

搜索系統(tǒng)

1994年楊致遠(yuǎn)和大衛(wèi)-費(fèi)羅夢(mèng)想著將整個(gè)互聯(lián)網(wǎng)下載下來，從而創(chuàng)立了雅虎網(wǎng)站冕杠，最開始是把所有的網(wǎng)站名稱和鏈接放在一起微姊，供人們查閱使用，隨著網(wǎng)站的增加拌汇，他們?cè)O(shè)立了分類柒桑，用戶可以利用導(dǎo)航目錄來查詢網(wǎng)站≡胍ǎ互聯(lián)網(wǎng)發(fā)展速度日新月異魁淳，新建立的網(wǎng)站越來越多，單單的目錄分類已經(jīng)不能滿足用戶查找信息的需求与倡，搜索便應(yīng)運(yùn)而生界逛。用戶只需要搜索關(guān)鍵詞，就能在搜索結(jié)果里面找到自己想要的內(nèi)容纺座。直接展示內(nèi)容→將內(nèi)容分類建立目錄索引→搜索引擎的加入息拜，便是互聯(lián)網(wǎng)產(chǎn)品內(nèi)容查找的發(fā)展過程。

產(chǎn)品需不需要搜索功能净响；入口放在哪少欺；搜索界面該如何布局；搜索結(jié)果頁該如何設(shè)計(jì)馋贤；搜索結(jié)果該如何排序赞别；要不要提供結(jié)果頁的篩選條件；需不需要提供搜索范圍...這些都是設(shè)計(jì)搜索系統(tǒng)時(shí)設(shè)計(jì)師該思考的問題配乓。

信息架構(gòu)設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中處于承上啟下的作用仿滔，它上面連接著戰(zhàn)略層和范圍層，下面影響著框架層和表現(xiàn)層犹芹，可以說是整個(gè)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)流程中的核心崎页，產(chǎn)品或者交互設(shè)計(jì)師一定要知道，一個(gè)優(yōu)秀的信息架構(gòu)能幫助公司達(dá)成產(chǎn)品目標(biāo)腰埂，也能滿足用戶需求飒焦，提高用戶體驗(yàn)。

END.

我是鄒志楠屿笼，一枚交互設(shè)計(jì)師牺荠。知識(shí)改變命運(yùn)，文字溫暖人心刁卜。當(dāng)你走的足夠遠(yuǎn)志电、爬得足夠高時(shí)，你再往回看蛔趴，回路挑辆，什么都沒有，前程，才是一片坦途鱼蝉。