從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?

2015-9-15    用心設(shè)計(jì)

一、信息架構(gòu)初識(shí)

之前知乎上有這么一個(gè)問(wèn)題:怎樣理解信息架構(gòu)?,@Mr湯進(jìn)er當(dāng)時(shí)以“商場(chǎng)信息導(dǎo)視圖”為例,回答了這個(gè)問(wèn)題,比較適合“入門小白”去理解信息架構(gòu)、流程圖和頁(yè)面布局,其中針對(duì)“信息架構(gòu)”的回答如下:

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖1:商場(chǎng)信息導(dǎo)視圖

女生MM肯定愛(ài)逛商城對(duì)吧?那信息架構(gòu)有些類似:商場(chǎng)信息導(dǎo)視圖(如上圖)

地下一層:動(dòng)感休閑地帶;商場(chǎng)一樓:國(guó)際名牌世界;商場(chǎng)二樓:名媛衣裝天地;商場(chǎng)三樓:少女時(shí)尚驛站;商場(chǎng)四樓:溫馨親子家園……

進(jìn)一步:可能一樓國(guó)際名牌世界又包括

A區(qū):名牌手表;B區(qū):名牌珠寶……

這樣的樓層架構(gòu)便于你更好的去找到自己想買的東東,至少是很清晰的知道每一層有什么商品,同一層商品怎么分布等等信息。在這里,設(shè)計(jì)師的作用就是規(guī)劃好這些樓層信息層級(jí),主要做的工作就是:分類、層級(jí)梳理等

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中:產(chǎn)品經(jīng)理or設(shè)計(jì)師梳理信息架構(gòu),其實(shí)和上述梳理商場(chǎng)樓層架構(gòu)是異曲同工之妙。

二、信息架構(gòu)入門

1、信息架構(gòu)到底是用來(lái)干嘛的?

那么在產(chǎn)品設(shè)計(jì)過(guò)程中,信息架構(gòu)到底是用來(lái)做什么的呢?其實(shí),通過(guò)上面“商城信息導(dǎo)視圖”的例子,我們已經(jīng)可以初步了解到了一個(gè)目的:讓用戶可以在一定 的“信息規(guī)劃”下更容易的找到自己想要的“東西”。那么除此以外,信息架構(gòu)還有什么作用呢?那就是出于“產(chǎn)品目標(biāo)”通過(guò)“信息架構(gòu)設(shè)計(jì)”去教育、說(shuō)服、通 知用戶。

信息架構(gòu)的作用總結(jié)如下:

A、【滿足用戶需求】:讓用戶可以在一定的“信息規(guī)劃”下更容易的找到自己想要的“東西”

B、【滿足產(chǎn)品目標(biāo)】:出于“產(chǎn)品目標(biāo)”通過(guò)“信息架構(gòu)設(shè)計(jì)”去教育、說(shuō)服、通知用戶

2、信息架構(gòu)設(shè)計(jì)到底是在做什么?

信息架構(gòu)梳理到底是在做什么呢?如果用一個(gè)詞回答的話,那肯定是“分類”。分類是為了更好的信息傳達(dá),為了更好的傳遞信息,需要對(duì)信息進(jìn)行選擇和組織。

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖2:引用自《微信背后的產(chǎn)品觀---張小龍》的PPT整理

3、信息架構(gòu)設(shè)計(jì)到底該怎么做?(或者說(shuō)“分類”怎么做?)

《用戶體驗(yàn)要素》一書中,給出了信息架構(gòu)分類體系:從上到下或從下到上

從下到上(如下圖3):這種分類方法是根據(jù)“內(nèi)容和功能需求的分析”而來(lái)的,先把已有的所有內(nèi)容,放在層級(jí)分類中,然后再將他們分別歸屬到較高一級(jí) 的類別。這種分類方法其實(shí)就是在做“歸類”,比如@Mr湯進(jìn)er在曾經(jīng)的項(xiàng)目過(guò)程中就會(huì)運(yùn)用“卡片分類法”去梳理信息架構(gòu),首先將所有的功能點(diǎn)用一張張卡 片寫下來(lái),然后讓“目標(biāo)用戶”參與到信息分類中,并反饋相關(guān)分類標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計(jì)師去梳理信息架構(gòu)的參考。實(shí)際實(shí)踐過(guò)程中,可能更需要設(shè)計(jì)師或者產(chǎn)品 經(jīng)理本身有一定的信息篩選、梳理、分類的能力,進(jìn)一步通過(guò)用戶測(cè)試去檢驗(yàn)分類的信息傳達(dá)有效性。

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖3:從下到上的架構(gòu)方法

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖4:卡片分類法在“從下到上”信息架構(gòu)梳理過(guò)程中的應(yīng)用——@Mr湯進(jìn)er項(xiàng)目過(guò)程照片

從上到下(如下圖5):這種分類方法從“戰(zhàn)略層”(產(chǎn)品目標(biāo))出發(fā)去考慮內(nèi)容分類。從最廣泛的、可能滿足決策目標(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)的“朋友圈”分類中。

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖5:從上到下的架構(gòu)方法

注:實(shí)際應(yīng)用中,其實(shí)兩種方式是結(jié)合起來(lái)進(jìn)行的,需要產(chǎn)品經(jīng)理和設(shè)計(jì)師有效的平衡運(yùn)用,多多實(shí)踐吧~

三、信息架構(gòu)進(jìn)階

1、信息架構(gòu)梳理的依據(jù)是什么?

首先,我們需要明白,信息架構(gòu)受到哪些因素的影響。從大的方面可以分為兩點(diǎn):“用戶需求”和“產(chǎn)品目標(biāo)”,與上述的A和B兩點(diǎn)作用有著對(duì)應(yīng)關(guān)系。具體實(shí)踐中,可能受到的影響因素包括:

A、用戶層面的思考:用戶的理解能力;用戶的熟悉程度(已有心理模型、操作習(xí)慣等);目標(biāo)內(nèi)容的使用頻率(低頻高級(jí)功能一般會(huì)“藏”的比較深);內(nèi)容的數(shù)量;內(nèi)容信息的語(yǔ)義等等

B、產(chǎn)品層面的思考:產(chǎn)品的核心價(jià)值、產(chǎn)品的主線功能、特色功能等

舉一個(gè)例子,之前在知乎上看到一個(gè)問(wèn)題:為什么微信朋友圈這么高密度使用的功能要放到二級(jí)菜單?

我想這個(gè)問(wèn)題不同人一定有不同的理解和回答,而且都是有道理的(例如有匿名回答:還記得商場(chǎng)樓層的劃分方式么?如果朋友圈放在一級(jí)菜單,你還會(huì)天天看到 掃一掃、搖一搖、購(gòu)物、游戲這些入口么?便于使用,并不是布局的全部。)關(guān)于這個(gè)問(wèn)題,我從《微信背后的產(chǎn)品觀---張小龍》(張小龍騰訊內(nèi)部長(zhǎng)達(dá)8小時(shí) 20分的產(chǎn)品講演)一文中找到了如下一條關(guān)于“架構(gòu)梳理”的產(chǎn)品觀:

保持主干清晰,枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼,它應(yīng)該盡量保持簡(jiǎn)單、明了,不可以輕易變更,讓用戶無(wú)所適從。次要功能豐富主干,不可以喧賓奪主,盡量隱藏起來(lái),而不要放在一級(jí)頁(yè)面。——依據(jù)張小龍演講整理

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖6:引用自《微信背后的產(chǎn)品觀---張小龍》的PPT整理

通過(guò)這個(gè)例子@Mr湯進(jìn)er想說(shuō),正真去梳理一個(gè)好的架構(gòu),還是很考驗(yàn)產(chǎn)品經(jīng)理和設(shè)計(jì)師的能力和思考的。多思考,多實(shí)戰(zhàn)~

2、一個(gè)好的信息架構(gòu)設(shè)計(jì)應(yīng)該具備哪些特點(diǎn)?

以下幾點(diǎn)是@Mr湯進(jìn)er總結(jié)的可以用來(lái)檢驗(yàn)自己的信息架構(gòu)梳理是否正確、合理,但正在適合自己的產(chǎn)品信息架構(gòu)是很微妙的,需要自己多多去思考和實(shí)踐。

A、與“產(chǎn)品目標(biāo)”和“用戶需求”相對(duì)應(yīng);

B、具有一定的延展性;

C、保證分類標(biāo)準(zhǔn)的一致性、相關(guān)性和獨(dú)立性;

D、有效平衡信息架構(gòu)的“廣度”和“深度”

E、使用“用戶語(yǔ)言”,同時(shí)需避免“語(yǔ)義歧義或不解”

下面詳細(xì)闡述上面幾點(diǎn)檢驗(yàn)標(biāo)準(zhǔn):

A、與“產(chǎn)品目標(biāo)”和“用戶需求”相對(duì)應(yīng);

直接舉例子:新聞資訊類應(yīng)用,經(jīng)常以實(shí)踐順序組織信息架構(gòu),因?yàn)橛脩粜枨笾?,?duì)于“新聞”的時(shí)效性的要求是唯一的重要要素,同時(shí),對(duì)于產(chǎn)品本身,只有提 供的資訊才能在競(jìng)爭(zhēng)中獲得優(yōu)勢(shì)。再如,同樣是資訊類應(yīng)用,“今日頭條”的產(chǎn)品目標(biāo)是針對(duì)不同用戶進(jìn)行針對(duì)性推送資訊,因此除了以“時(shí)間”維度組織信息 架構(gòu)以為,它還通過(guò)算法推送,以“推薦”的方式組織資訊內(nèi)容,針對(duì)性推送的資訊,減低了用戶“挑選”資訊的門檻,增加了用戶資訊獲取效率。

B、具有一定的延展性;

一個(gè)延展性好的信息架構(gòu),能把新的內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來(lái)(下左圖),也可以把新內(nèi)容當(dāng)做一個(gè)完整的新部分加入(下右圖),舉個(gè)例子:微信的“發(fā)現(xiàn)”就具有一定的延展性,陸續(xù)有“游戲”、“購(gòu)物”等內(nèi)容被納入其中。

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖7:一個(gè)延展性好的信息架構(gòu)圖示

C、保證分類標(biāo)準(zhǔn)的一致性、相關(guān)性和獨(dú)立性;

一個(gè)好的架構(gòu)分類,應(yīng)該有一套準(zhǔn)確的分類標(biāo)準(zhǔn),并且對(duì)于用戶而言是可以被準(zhǔn)確理解和學(xué)習(xí)的。其中“一致性”體現(xiàn)在標(biāo)準(zhǔn)的唯一,不能有多套標(biāo)準(zhǔn),也就是說(shuō) 要保證功能入口是唯一的(快捷方式入口除外),這樣的好處就是,用戶在使用過(guò)程中,不會(huì)因?yàn)橛刑嗟臉?biāo)準(zhǔn)而摸不清相應(yīng)的功能入口(這一點(diǎn)感覺(jué)爭(zhēng)議比較多, 但@Mr湯進(jìn)er認(rèn)為有必要堅(jiān)持入口的唯一性);“相關(guān)性”是指上下層級(jí)以及層級(jí)中內(nèi)容必須具有相關(guān)性的,不能把“足球新聞”欄目納入到“時(shí)政要聞”層級(jí) 下,因?yàn)樗鼈兊臎](méi)有關(guān)聯(lián)性(例子比較low,但意思大家懂的);最后一點(diǎn)是獨(dú)立性,獨(dú)立性體現(xiàn)在同一層級(jí)分類應(yīng)該是相互獨(dú)立的,不能同一層級(jí)的兩個(gè)分類存 在交集或包含關(guān)系。

D、有效平衡信息架構(gòu)的“廣度”和“深度”

在處理信息架構(gòu)“廣度”和“深度”問(wèn)題上,說(shuō)實(shí)話沒(méi)有 統(tǒng)一的標(biāo)準(zhǔn)。曾經(jīng)聽過(guò)有同學(xué)說(shuō)“層級(jí)不能超過(guò)3層,如果超過(guò)三層,這個(gè)架構(gòu)就是不好的”這樣的論斷,其實(shí)@Mr湯進(jìn)er認(rèn)為,不能簡(jiǎn)單的看“深度”,而是 看用戶的實(shí)際體驗(yàn)。那“廣度”和“深度”各自有哪些優(yōu)缺點(diǎn)呢?主要體現(xiàn)在“寬而淺”的架構(gòu)用戶可以用較少的點(diǎn)擊完成相應(yīng)的任務(wù)目標(biāo),問(wèn)題在于每層的“信息 分類標(biāo)準(zhǔn)”太多,增加用戶每一層級(jí)的分類尋找難度。(參見(jiàn)@Mr湯進(jìn)er的另一篇文章《設(shè)計(jì)法則:Hick's law》選項(xiàng)增多,做出決定的時(shí)間就是會(huì)增加!)。而“窄而深”的信息架構(gòu)好處是減少了用戶選項(xiàng),問(wèn)題在于增加了用戶操作步驟如下圖9,用戶從A頁(yè)到B頁(yè) 需要6步之多。

如何平衡“廣度”和“深度”需要考慮的因素很多(大小屏幕等硬件特性、產(chǎn)品功能目標(biāo)、用戶使用頻次等等)。建議大家多多實(shí)踐,靈活應(yīng)用,多從用戶使用角度做思考。

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖8:寬而淺

從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?,優(yōu)界網(wǎng)

圖9:窄而深

E、使用“用戶語(yǔ)言”,同時(shí)需避免“語(yǔ)義歧義或不解”

這一點(diǎn)雖然是個(gè)小點(diǎn),但往往也容易被很多設(shè)計(jì)師忽略。第一是要用“用戶語(yǔ)言”進(jìn)行分類和功能描述,用戶是看不懂“專業(yè)術(shù)語(yǔ)”(行業(yè)應(yīng)用除外)的,可以通 過(guò)“用戶測(cè)試”來(lái)檢驗(yàn)用戶對(duì)于分類和功能“名稱表述”的理解能力。同時(shí),好的“名稱”應(yīng)該是沒(méi)有歧義或者會(huì)造成用戶不解的。

四、信息架構(gòu)總結(jié)

整篇文章深入淺出,層層遞進(jìn)的闡述了對(duì)于“信息架構(gòu)”的知識(shí)整理和理解。主要解決了三個(gè)大問(wèn)題:信息架構(gòu)是什么?怎么做?怎么評(píng)判?歡迎大家針對(duì)“信息 架構(gòu)”與@Mr湯進(jìn)er交流討論(微信公共號(hào):chuangshe_space,個(gè)人博客:www.tangjinweb.com,簡(jiǎn)書or微博:@Mr 湯進(jìn)er),共同進(jìn)步。

本文為原創(chuàng),允許轉(zhuǎn)載,但請(qǐng)注明出處:

微信公共號(hào)“創(chuàng)設(shè)空間”:chuangshe_space

并附帶本文簡(jiǎn)書鏈接:http://www.jianshu.com/p/06885fd7958f


分享本文至:

日歷

鏈接

個(gè)人資料

存檔