六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

交互深耕-B端設(shè)計(jì)師要懂的信息架構(gòu)

2022-3-1    純純

網(wǎng)上關(guān)于信息架構(gòu)的知識(shí)內(nèi)容參差不齊,在學(xué)習(xí)與探究的過程中查閱了很多資料,反復(fù)修改多次,盡量用直白的語言結(jié)合實(shí)例來闡述信息架構(gòu)。目錄如下:





1.1 前言

這篇文章的起源,來源于最近看到的話題“B端設(shè)計(jì)師會(huì)被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時(shí)代,很多頁面設(shè)計(jì)依靠組件庫就能夠快速搭建。


那么在這種情況下,B端設(shè)計(jì)師存在的意義和價(jià)值到底體現(xiàn)在哪里呢?其實(shí)B端設(shè)計(jì)的重點(diǎn)并不在頁面的視覺上,視覺只是作為設(shè)計(jì)師最終輸出成果的一小部分。個(gè)人認(rèn)為B端設(shè)計(jì)師工作重心體現(xiàn)在做「正確的設(shè)計(jì)」,比如以下幾個(gè)方面:

1.這個(gè)設(shè)計(jì)能否完成對應(yīng)的商業(yè)目標(biāo)和產(chǎn)品目標(biāo);

2.我們的信息呈現(xiàn)是否合理以及能否解決當(dāng)前需求;

3.用戶能否在頁面上快速找到想要的信息;

而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發(fā)現(xiàn)其論述本質(zhì)上都逃離不了「信息架構(gòu)」這個(gè)概念。因此我認(rèn)為設(shè)計(jì)師都需要對這個(gè)概念有充分的認(rèn)知,這能夠幫助我們做出正確且出色的設(shè)計(jì)。


1.2信息架構(gòu)概念

關(guān)于信息架構(gòu)的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構(gòu)拆分為信息與架構(gòu)去理解。

信息指的是內(nèi)容的載體,常見的文字、圖像等都是信息;架構(gòu)的含義則形容對應(yīng)的組織和結(jié)構(gòu)。那么信息架構(gòu)就是將信息通過一定的形式組織起來,然后呈現(xiàn)出來。其本質(zhì)就是研究信息的表達(dá)與傳遞。

通俗點(diǎn)講,信息架構(gòu)就是讓用戶可以更容易的理解我們的產(chǎn)品,讓用戶在使用我們的產(chǎn)品時(shí)可以更順利、更自然。因此信息架構(gòu)沒有一個(gè)具體的呈現(xiàn)形式,它更多的是體現(xiàn)在產(chǎn)品設(shè)計(jì)的各方面。具體主要表現(xiàn)為組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)和搜索系統(tǒng)。





為什么需要信息架構(gòu)?我們都知道B端產(chǎn)品設(shè)計(jì)的核心是「降本提效」,在設(shè)計(jì)這一側(cè)的可以將其理解為降低認(rèn)知成本,提升使用效率。

降低認(rèn)知成本需要我們更好的表達(dá)信息,讓用戶能看明白我們的產(chǎn)品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


而信息架構(gòu)從本質(zhì)上來講也正是研究信息的表達(dá)和傳遞。因此我們需要通過它來幫助我們更好的完成B端產(chǎn)品設(shè)計(jì)。如果沒有信息架構(gòu)來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產(chǎn)品陷入難以上手或者不知道怎么用的尷尬境地。

一個(gè)強(qiáng)大信息架構(gòu)是產(chǎn)品質(zhì)量的保證,是作為設(shè)計(jì)支撐點(diǎn)的骨架,它會(huì)減少可用性問題,提升整體導(dǎo)航行,創(chuàng)造對用戶友好的體驗(yàn)。比如舉一個(gè)工具層面的例子:

PS的工具欄堆疊在界面各個(gè)部分,而Figma的工具欄則集中在右側(cè)且只出現(xiàn)當(dāng)前需要的功能。很明顯Figma在信息架構(gòu)中的信息組織部分做得更為友好,PS則會(huì)顯得遜色一些。這也是我們在學(xué)習(xí)PS的時(shí)候會(huì)顯得比較吃力的原因之一。


可以說良好的信息架構(gòu)是高效用戶體驗(yàn)的基礎(chǔ)。視覺元素,功能,交互和導(dǎo)航都是在信息架構(gòu)的基礎(chǔ)上構(gòu)建的。因此想要做出體驗(yàn)好且合理的頁面設(shè)計(jì),我們就需要參與到信息架構(gòu)這個(gè)過程中來,和產(chǎn)品一起完成對應(yīng)架構(gòu)的梳理。而不是只完成從原型到頁面這個(gè)部分。


如果想要搭建一個(gè)好的建筑,我們需要知道其建造的目的,是按照什么樣的結(jié)構(gòu)搭建,內(nèi)部有哪些系統(tǒng),以及最后呈現(xiàn)的模樣。


那么信息架構(gòu)也同理,我們首先需要知道信息是為了什么目標(biāo)服務(wù),然后我們通過怎樣的結(jié)構(gòu)來組織這些信息,以及過程中會(huì)用到的信息元素,最后如何呈現(xiàn)它們。這都是我們在搭建信息架構(gòu)中需要進(jìn)行的必要步驟。如果某些環(huán)節(jié)沒有做好或者沒有了解透徹,那么在輸出信息架構(gòu)時(shí)往往會(huì)出現(xiàn)方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現(xiàn)的。


3.1 信息獲取:先理解業(yè)務(wù),再談架構(gòu)

B端行業(yè)對于業(yè)務(wù)理解的要求是比較高的,只有在理解業(yè)務(wù)的基礎(chǔ)上,將業(yè)務(wù)需求轉(zhuǎn)化為對應(yīng)的設(shè)計(jì)目標(biāo),我們才能夠輸出合理的信息架構(gòu)方案。

個(gè)人認(rèn)為理解業(yè)務(wù)的基礎(chǔ),就是能夠用一句話講清楚當(dāng)前設(shè)計(jì)的產(chǎn)品。這句話可以描述為:誰在什么地方想要完成什么目標(biāo)。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產(chǎn)品服務(wù)。


雖然看上去這句話很簡單,但其中包括了三個(gè)要素:用戶、場景和目標(biāo)。因此我們在分析和梳理業(yè)務(wù)的過程中首先要弄清楚的就是這三個(gè)要素。


3.1.1用戶:分清購買者與使用者

用戶永遠(yuǎn)是排在第一位的,也是我們首先需要弄清楚的。在B端設(shè)計(jì)中,本質(zhì)上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業(yè)微信,購買客戶是企業(yè),實(shí)際用戶是員工。

對于企業(yè):「我想要有一款軟件可以更好的管理員工」

對于員工:「我想要這款軟件能夠更好地提高工作效率」

客戶決定了我們產(chǎn)品的購買(部分情況下也兼顧使用),而用戶則決定了后續(xù)產(chǎn)品的復(fù)購率。因此在業(yè)務(wù)理解中,我們需要弄清楚當(dāng)前產(chǎn)品所處的服務(wù)階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產(chǎn)品的使用體驗(yàn)又會(huì)偏向于用戶。


因此我們首先需要弄清楚的就是當(dāng)前產(chǎn)品是為哪些「目標(biāo)用戶」服務(wù),這也就決定了我們在設(shè)計(jì)信息架構(gòu)時(shí)對應(yīng)的不同側(cè)重點(diǎn)。


3.1.2場景:需求源于場景

場景是指需求產(chǎn)生的某種條件,這個(gè)條件包括但不限于環(huán)境、時(shí)間、地點(diǎn)、空間等,只有上述條件滿足,這個(gè)需求才能成立。這里可以把場景理解為產(chǎn)生該問題的原因。

比如當(dāng)用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因?yàn)橥饨绛h(huán)境冷。這兩種場景涉及到的解決方案是完全不一樣的。


在平日的工作中我們可以通過以下兩種方式來更好的了解業(yè)務(wù)場景:

1.通過業(yè)務(wù)方文檔進(jìn)行業(yè)務(wù)背景的初步理解。業(yè)務(wù)文檔中一般都會(huì)包括需求背景,我們可以通過文檔進(jìn)行初步了解。

2.通過業(yè)務(wù)溝通進(jìn)一步加深業(yè)務(wù)背景的理解。由于很多B端業(yè)務(wù)離設(shè)計(jì)師本身的生活比較遠(yuǎn)。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業(yè)務(wù)方或產(chǎn)品多次溝通來挖掘最底層的背景。

畢竟需求背景是理解業(yè)務(wù)的重要步驟,我們只有知道需求產(chǎn)生的原因,才能夠針對性的給出解決方案。


3.1.3目標(biāo):業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)

目標(biāo)決定了我們的產(chǎn)品最終的方向。我們首先接觸到的一般都是業(yè)務(wù)目標(biāo),而我們要做的就是將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為我們此次的設(shè)計(jì)目標(biāo)。


A.業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)就是此次業(yè)務(wù)想要解決的實(shí)際問題,它通常是一個(gè)宏觀上的描述。比如打車軟件的業(yè)務(wù)目標(biāo)簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標(biāo)。


B.設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)是我們基于業(yè)務(wù)目標(biāo)而給出的設(shè)計(jì)策略,是一種更具體的實(shí)現(xiàn)方式。比如我們要讓用戶快速的打到車,那么這個(gè)時(shí)候我們的設(shè)計(jì)目標(biāo)就是通過將用戶位置和司機(jī)位置進(jìn)行快速匹配,并通過超時(shí)補(bǔ)貼紅包的方案來降低用戶焦慮。從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。而這一過程涉及到的信息點(diǎn)就有:司機(jī)位置、乘客位置、等車時(shí)間、補(bǔ)貼金額等元素,并需要思考它們之間的關(guān)系和呈現(xiàn)方式。


可以發(fā)現(xiàn)從業(yè)務(wù)目標(biāo)轉(zhuǎn)化到設(shè)計(jì)目標(biāo)這個(gè)過程,實(shí)際上就是在確定功能和信息點(diǎn)的過程。這樣才能讓我們更好地設(shè)計(jì)信息架構(gòu)。


3.2信息架構(gòu)核心:信息組織

從前文可以看出我們會(huì)在整體設(shè)計(jì)過程中出現(xiàn)很多的信息元素。如果不經(jīng)過對應(yīng)的組織和處理,直接堆疊在一起,那么信息含義會(huì)比較亂且難以調(diào)用。比如下方:

而右側(cè)圖片信息的組織過程可以理解為通過將零散的數(shù)據(jù)信息進(jìn)行分類再以某種結(jié)構(gòu)化的形式將它們重新組合排布的過程,直白一點(diǎn)就是先分類,再結(jié)構(gòu)化呈現(xiàn)。我用一張圖來表明這個(gè)過程:

那么這個(gè)過程中「信息組織」和「結(jié)構(gòu)呈現(xiàn)」到底應(yīng)該怎么做,也就是接下來要講的組織方式和結(jié)構(gòu)類型。


3.2.1組織方式:模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會(huì)利用物體本身物理屬性來進(jìn)行分類,比如位置、字母表、時(shí)間、類別、層級(jí)等方式進(jìn)行組織。一些工具類應(yīng)用例如滴答清單內(nèi)容信息都是按照時(shí)間來進(jìn)行組織的:

而模糊分類則是按照更為主觀的邏輯對信息進(jìn)行分類, 如主題、任務(wù)、用戶、隱喻等來進(jìn)行歸類,比如我們常用的APP商城是按照不同的主題類別來進(jìn)行區(qū)分的。

但在很多時(shí)候,產(chǎn)品傾向于將兩種組織方式結(jié)合起來形成復(fù)合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習(xí)慣。比如藍(lán)湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時(shí)間等)。

其實(shí)在大部分B端產(chǎn)品中,大都按照模糊分類來進(jìn)行處理,比如按照任務(wù)、流程等方式。而精確分類更多用于在頁面內(nèi)的局部信息模塊,比如創(chuàng)建時(shí)間和文件大小等。


歸根結(jié)底,我們分類方式的選擇需要結(jié)合我們前面提到的用戶、場景和目標(biāo),這樣才能讓我們的分類更具說服力。


3.2.2組織結(jié)構(gòu):選擇合適的結(jié)構(gòu)類型

當(dāng)信息按照分類維度組織后,我們接下來就是把整體信息進(jìn)行結(jié)構(gòu)化,這樣才可以將信息整體連接起來并呈現(xiàn)出來。一般分為以下四種組織方式:


A.層級(jí)結(jié)構(gòu)(最重要的結(jié)構(gòu))

這是信息架構(gòu)中最為常見的結(jié)構(gòu),也是比較符合用戶認(rèn)知的結(jié)構(gòu)。有時(shí)也稱為「樹狀結(jié)構(gòu)」。以子父節(jié)點(diǎn)的形式一層一層延展。

層級(jí)結(jié)構(gòu)的優(yōu)勢就在于可以承載復(fù)雜的多層級(jí)內(nèi)容,通過層級(jí)遞進(jìn)的方式將復(fù)雜的多層級(jí)拆解得更簡潔。


但我們需要把控好內(nèi)容的廣度和深度,廣度指的是在層級(jí)結(jié)構(gòu)中每一層的數(shù)目,最好控制在7個(gè)以內(nèi)。如果廣度太寬意味著每個(gè)頁面會(huì)給用戶展示太多的信息,增加尋找內(nèi)容的負(fù)擔(dān)。深度為縱向結(jié)構(gòu),建議一般3層,最多不超過5層。過深的層級(jí)會(huì)讓用戶點(diǎn)擊很多次,且不容易被用戶發(fā)現(xiàn)。比如飛書的基本信息架構(gòu)也是主要以層級(jí)結(jié)構(gòu)來進(jìn)行的。


B.矩陣結(jié)構(gòu)(多維度結(jié)構(gòu))

矩陣結(jié)構(gòu)是各個(gè)節(jié)點(diǎn)都相互連接的一種信息架構(gòu)方式,通俗來講就是用戶既可以通過多個(gè)維度去觸達(dá)同一信息,也可以從單個(gè)維度連接多種信息。

這種結(jié)構(gòu)其實(shí)就更類似于我們在做相關(guān)功能時(shí):比如當(dāng)你進(jìn)入電影全屏?xí)r想要退出時(shí),既可以通過點(diǎn)擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點(diǎn)觸達(dá)同一操作。


又比如我們的聯(lián)系人功能,我們既可以通過輸入數(shù)字撥打電話,也可以查找聯(lián)系人進(jìn)行撥打,還可以查詢電話記錄進(jìn)行回?fù)堋?

矩陣結(jié)構(gòu)最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


C.自然結(jié)構(gòu)(隨機(jī)性)

自然結(jié)構(gòu)不遵循任何一致的模式,節(jié)點(diǎn)都是被逐一連接起來的。

自然結(jié)構(gòu)一般都具有隨機(jī)性和不確定性。這種更傾向于泛娛樂化的C端應(yīng)用。比如我們常見視頻網(wǎng)站的在推薦流都是應(yīng)用的自然結(jié)構(gòu)。比如打開B站等視頻平臺(tái),你很難猜到剛進(jìn)入看到的是什么。

但一般自然結(jié)構(gòu)不會(huì)單獨(dú)存在,比如B站在自然結(jié)構(gòu)中也綁定了層級(jí)結(jié)構(gòu)來進(jìn)行層級(jí)上的劃分。


D.線性結(jié)構(gòu)(單一性)

線性結(jié)構(gòu)是非常單一的一個(gè)結(jié)構(gòu),整體是一層一層向下遞進(jìn)。比較強(qiáng)調(diào)先后順序的一種結(jié)構(gòu)。


這種結(jié)構(gòu)通常用于我們常見的軟件安裝程序等,也可以用于部分功能結(jié)構(gòu),比如網(wǎng)站的視頻發(fā)布,一般都是經(jīng)過上傳-編輯-發(fā)布這三個(gè)步驟來依次進(jìn)行。

大家可以發(fā)現(xiàn)在進(jìn)行信息架構(gòu)時(shí),我們在很多情況下可能會(huì)運(yùn)用多種組織結(jié)構(gòu)方式,我們需要根據(jù)對應(yīng)的用戶決策場景來考慮讓最適合的幾種方式相結(jié)合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


3.2.3注意事項(xiàng):關(guān)注用戶心智模型

在信息的組織過程中,我們需要注意用戶的心智模型。比如當(dāng)我們看到紅點(diǎn)就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯(lián)網(wǎng)產(chǎn)品在無形中給用戶建立的底層習(xí)慣認(rèn)知。用戶目前對于普遍產(chǎn)品的一些基礎(chǔ)布局、功能名稱和交互邏輯都形成了一定的習(xí)慣,這都屬于用戶的心智模型的內(nèi)容。


因此我們在組織信息時(shí)盡可能不要去打破用戶常見的心智模型,否則必然會(huì)導(dǎo)致用戶的不習(xí)慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會(huì)隱藏在「+」號(hào)里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

這樣會(huì)導(dǎo)致用戶難以發(fā)現(xiàn)該功能。因?yàn)橛脩艚佑|新的信息時(shí),會(huì)以最初接觸的局部信息為依據(jù)展開并形成初步認(rèn)知,用戶認(rèn)知中的信息組織邏輯和實(shí)際信息的吻合度越高, 他在進(jìn)一步查看或?qū)ふ倚畔⒌倪^程中體驗(yàn)會(huì)更順暢, 反之, 若一開始形成的認(rèn)知與實(shí)際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個(gè)吻合程度其實(shí)就是用戶心智模型。


雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業(yè)術(shù)語,我們需要通過靈活有效的提示(比如標(biāo)記注釋等)來引導(dǎo)用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應(yīng)用場景其實(shí)是用于抖音官網(wǎng)后臺(tái)登錄,且在后臺(tái)登錄時(shí)已經(jīng)給出了對應(yīng)提示,那么這樣的設(shè)計(jì)也是合理的。


3.3信息架構(gòu)支撐:標(biāo)簽、導(dǎo)航和搜索

當(dāng)經(jīng)過上面的信息組織,其實(shí)我們已經(jīng)能夠歸納出一個(gè)大體的信息架構(gòu)框架。但在信息組織之外,我們還需要關(guān)注以下三點(diǎn):標(biāo)簽、導(dǎo)航和搜索。這對于信息架構(gòu)的完整性也有非常重要的意義。


3.3.1 標(biāo)簽系統(tǒng):讓信息識(shí)別更通用

標(biāo)簽系統(tǒng),通俗來講就是要我們對當(dāng)前整個(gè)系統(tǒng)信息節(jié)點(diǎn)的命名,從而讓信息的呈現(xiàn)更容易識(shí)別。拿個(gè)最簡單的例子來進(jìn)行說明:

可以看到左側(cè)和右側(cè)關(guān)于衛(wèi)生間的信息標(biāo)示,可能左邊你能一眼區(qū)分,右邊可能就需要反應(yīng)半天才能猜出到底代表什么含義了。


這其實(shí)就是關(guān)于我們的信息命名是否能夠被大多數(shù)用戶所接受的場景,也就是我們標(biāo)簽作用所起的作用。標(biāo)簽可以分為圖片和文字標(biāo)簽,都需要考慮用戶對該信息命名的認(rèn)知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標(biāo)簽名稱呢,這里需要注意2個(gè)方面:


A.優(yōu)先選用被行業(yè)廣泛接受的詞或圖標(biāo)

在進(jìn)行標(biāo)簽定義的時(shí)候,盡量選擇已經(jīng)被用戶所熟知的詞語,比如「工作臺(tái)」「通訊錄」等已經(jīng)被運(yùn)用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設(shè)計(jì)軟件中,很多圖標(biāo)和功能名稱都是通用的:

這樣做能夠很大程度減少用戶的學(xué)習(xí)成本。因此在B端設(shè)計(jì)中我們也需要注意到我們所在的行業(yè),哪些名詞已經(jīng)達(dá)成了共識(shí),就無需再造新名詞。


B.不確定的詞語可以參考競品或調(diào)研來決策

當(dāng)某類功能或場景的標(biāo)簽難以確定時(shí),我們就可以嘗試去找一下競品是否有類似功能,或者找該行業(yè)的領(lǐng)頭羊(比如聊天工具的巨頭微信),那么在進(jìn)行標(biāo)簽定義的時(shí)候,可以參考它的命名體系。因?yàn)樗呀?jīng)替我們教育了一部分用戶,會(huì)間接降低學(xué)習(xí)成本。


如果某些標(biāo)簽在上述過程中還是無法確定,那么我們結(jié)合自己經(jīng)驗(yàn)或者與咨詢業(yè)務(wù)相關(guān)人員來進(jìn)行討論,在必要時(shí)候可以在標(biāo)簽旁邊添加注釋來進(jìn)一步說明。


3.3.2 導(dǎo)航系統(tǒng):讓用戶不迷路

導(dǎo)航系統(tǒng)其實(shí)應(yīng)該是大家比較熟知的一個(gè)系統(tǒng)了。就像使用導(dǎo)航系統(tǒng)來規(guī)劃行程一樣,導(dǎo)航系統(tǒng)都會(huì)存在于每個(gè)網(wǎng)站中。比如我們常見的側(cè)邊導(dǎo)航、頂部導(dǎo)航等。

因?yàn)榫W(wǎng)上關(guān)于導(dǎo)航系統(tǒng)已經(jīng)有很多資料的講解了,在這里闡述下四類導(dǎo)航的含義:

1.全局導(dǎo)航:位于頁面最上層的導(dǎo)航,用戶幾乎在頁面的每個(gè)地方都可以看見,是最高層級(jí)的導(dǎo)航系統(tǒng);

2.局部導(dǎo)航:位于最高導(dǎo)航的下級(jí)子類導(dǎo)航,子類導(dǎo)航并不是必須的導(dǎo)航,根據(jù)場景進(jìn)行取舍;

3.情景式導(dǎo)航:通過點(diǎn)擊文字鏈接進(jìn)行跳轉(zhuǎn)的導(dǎo)航,比如在個(gè)人資料里面植入其它網(wǎng)站的鏈接地址;

4.輔助導(dǎo)航:這里包括網(wǎng)站地圖,網(wǎng)站索引,網(wǎng)站指南等輔助類型的導(dǎo)航。


輔助導(dǎo)航的網(wǎng)站指南包括新手引導(dǎo)和演示教程等?,F(xiàn)階段更巧妙的功能引導(dǎo),是當(dāng)用戶在進(jìn)行某些功能的操作時(shí)及時(shí)進(jìn)行提示,這樣不僅達(dá)到了為用戶引導(dǎo)的效果,還減少了一連串的新手引導(dǎo)對于用戶的打擾。比如figma在進(jìn)行組件更新后,只有當(dāng)你調(diào)用組件功能時(shí),才會(huì)及時(shí)進(jìn)行提醒。


3.3.3 搜索系統(tǒng):讓用戶輕松找信息

搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進(jìn)行信息的檢索。雖然搜索功能非常重要,但并不是每個(gè)系統(tǒng)每個(gè)頁面都需要搜索。我們決策是否添加搜索時(shí)需要考慮下列三點(diǎn):

1:內(nèi)容復(fù)雜度:當(dāng)前頁面承載的內(nèi)容復(fù)雜度如果較少,對于簡單內(nèi)容頁面往往不需要搜索;

2:內(nèi)容性質(zhì):當(dāng)前頁面的性質(zhì)是偏向于用戶瀏覽還是查找,根據(jù)用戶行為來決定是否需要搜索;

3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內(nèi)容很復(fù)雜,我們還可以搜索結(jié)合篩選來更好的查找信息;


上述3點(diǎn)決定了我們是否需要考慮搜索功能。而關(guān)于搜索的其他細(xì)節(jié)點(diǎn),比如搜索規(guī)則和搜索結(jié)果等,在這里不做進(jìn)一步的闡述。在這篇文章中更重要的是弄清楚我們何時(shí)需要搜索功能。


3.4信息架構(gòu)表達(dá):視覺化你的架構(gòu)

我們通過上述方法已經(jīng)知道如何梳理信息架構(gòu)了,那么我們應(yīng)該如何呈現(xiàn)它呢。這部分其實(shí)也是很多資料中比較模糊的點(diǎn)。

在學(xué)習(xí)的過程中,發(fā)現(xiàn)部分資料認(rèn)為信息架構(gòu)就是單純的指思維導(dǎo)圖,但實(shí)際上信息架構(gòu)并不能單純只用思維導(dǎo)圖就能夠完全表示。

因?yàn)樾畔⒓軜?gòu)包含了很多部分的內(nèi)容。只能說思維導(dǎo)圖可以是信息架構(gòu)的一種表現(xiàn)形式,其可以幫助我們在思考階段梳理整體產(chǎn)品的信息構(gòu)成。


這里拋出一個(gè)很有意思的觀點(diǎn),那就是「功能結(jié)構(gòu)圖」和「信息架構(gòu)圖」到底什么關(guān)系,這里用兩張圖示例:

可以看到,功能結(jié)構(gòu)圖更多體現(xiàn)的形式是功能闡述,一般形式為名詞+動(dòng)詞,比如頭像設(shè)置;而信息架構(gòu)圖重點(diǎn)呈現(xiàn)的應(yīng)該都為信息元素,一般為名詞,比如頭像圖片。

但在大多數(shù)時(shí)候我們看到的產(chǎn)品架構(gòu)圖,其實(shí)更偏向于功能結(jié)構(gòu)圖和信息架構(gòu)圖的結(jié)合。因?yàn)樵诤芏鄷r(shí)候闡述信息構(gòu)成時(shí)需要依賴功能進(jìn)行輔助說明。


因此這篇文章講述的信息架構(gòu)更偏向于基于產(chǎn)品的整體架構(gòu)。其實(shí)信息架構(gòu)對于呈現(xiàn)形式并沒有特別的限制,只要能夠幫助你清晰表達(dá)產(chǎn)品整體結(jié)構(gòu)就行。《信息架構(gòu):超越web設(shè)計(jì)》第4版中其實(shí)也并沒有對表現(xiàn)形式這一塊進(jìn)行嚴(yán)苛的定義,其用「顯示信息元素間的關(guān)系——站點(diǎn)地圖」的說法概括了信息架構(gòu)的呈現(xiàn)形式,其表達(dá)如下:

可以看到其表達(dá)形式包括思維導(dǎo)圖和流程圖等形式:思維導(dǎo)圖的優(yōu)勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優(yōu)勢則更能夠表達(dá)整體的邏輯關(guān)系。


因此信息架構(gòu)的呈現(xiàn)需要根據(jù)你的產(chǎn)品場景選擇合適的視覺框架表達(dá)。不必讓形式限制了我們的發(fā)揮,而是應(yīng)該形式追隨于我們的架構(gòu)表達(dá)。其只是一個(gè)信息梳理結(jié)構(gòu)的說明結(jié)果(類似于中間態(tài)),我們需要借助它來更好的闡述思路與溝通想法。


3.5信息架構(gòu)之后:讓信息具像化

在輸出信息架構(gòu)之后,其實(shí)這里想聊一聊頁面的呈現(xiàn)。因?yàn)楫?dāng)梳理好大的框架后,剩余的頁面細(xì)節(jié)其實(shí)都需要通過原型圖來進(jìn)行體現(xiàn)。這個(gè)過程是從框架到頁面的階段,其實(shí)對于設(shè)計(jì)師來說也是很重要的部分。在這里根據(jù)自己的理解列出了以下幾方面的注意點(diǎn):

A.頁面能夠讓用戶看懂

這其實(shí)就是涉及到我們的信息組織和標(biāo)簽系統(tǒng)。如果當(dāng)我們的某個(gè)頁面不能讓用戶第一時(shí)間獲取到該頁面表達(dá)的信息,反思一下是在哪個(gè)方面做得不好。是標(biāo)簽系統(tǒng)含義模糊呢,還是信息的組織分類方式不對。從頁面呈現(xiàn)倒推信息架構(gòu)。

綜合來說就是設(shè)計(jì)時(shí)的排列要考慮用戶的心智模型(比如網(wǎng)頁的常規(guī)排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產(chǎn)品想要完全避免學(xué)習(xí)成本是不可能的,但我們可以盡量減少其學(xué)習(xí)成本。


B.考慮用戶的視覺動(dòng)線

當(dāng)我們在進(jìn)行信息排列時(shí),這時(shí)需要思考的就是用戶的視覺動(dòng)線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動(dòng)線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實(shí)就是在使用場景上,對于內(nèi)容頁面來說F模型會(huì)更為合適(比如文章或者搜索結(jié)果),適合文本類的內(nèi)容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設(shè)計(jì)跟蹤了人眼掃描頁面時(shí)的路線——從左到右,從上到下,能夠更好引導(dǎo)用戶的視線。


C.掌控好適度的信息層級(jí)

B端由于在視覺的發(fā)揮空間不多,那么相對來說保持良好的信息層級(jí)能夠讓整體的體驗(yàn)變得更為良好。

不管是原型圖還是視覺,整體的視覺層級(jí)要體現(xiàn)得更為清晰。按理說最好的視覺層級(jí)控制在三級(jí)左右。如果發(fā)現(xiàn)視覺層級(jí)過多,需要考慮是不是因?yàn)樾畔⒓軜?gòu)設(shè)計(jì)時(shí)縱向?qū)蛹?jí)過深,通過調(diào)整架構(gòu)的形式來更好的呈現(xiàn)信息。以及對同頁面的信息進(jìn)行重要程度分級(jí)。


當(dāng)我們做完或者聽別人闡述對應(yīng)的信息架構(gòu)時(shí),該如何評(píng)判呢,到底怎樣的信息架構(gòu)才算優(yōu)秀呢。個(gè)人認(rèn)為可以從3方面去進(jìn)行判斷:

業(yè)務(wù)層:

1.設(shè)計(jì)目標(biāo)合理:能平衡商業(yè)目標(biāo)和用戶的目標(biāo),保證客戶和用戶都有較為良好的體驗(yàn);

2.核心任務(wù)目標(biāo):能夠讓用戶順利完成產(chǎn)品的核心任務(wù),需要通過用戶測試來進(jìn)行驗(yàn)證

結(jié)構(gòu)層:

1.平衡廣度和深度:在進(jìn)行功能使用時(shí)不會(huì)隱藏的太深而找不到,是否有冗余步驟

2.保證拓展性:當(dāng)前信息架構(gòu)在面對未來新增或者刪減信息時(shí)能夠穩(wěn)定拓展

體驗(yàn)層:

1.保證易讀性:用戶不經(jīng)過介紹,通過頁面信息呈現(xiàn)能夠看懂該產(chǎn)品是用來做什么的

2.保證易查找性:用戶在需要某個(gè)功能時(shí)能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


合理的信息架構(gòu)需要具備以上條件,我們需要在做設(shè)計(jì)呈現(xiàn)時(shí)也盡量保證以上條件。但在很多情況下其實(shí)并不能完全滿足,這個(gè)時(shí)候我們需要根據(jù)業(yè)務(wù)目標(biāo)的重要性來選擇某些點(diǎn)進(jìn)行滿足。


梳理一下整體文章的架構(gòu),其實(shí)是按照「是什么-為什么-怎么做」的形式來進(jìn)行拆分的:

這篇文章想要表達(dá)的觀點(diǎn),不是讓設(shè)計(jì)師獨(dú)立去梳理整體信息架構(gòu),而是讓設(shè)計(jì)師擁有信息架構(gòu)意識(shí),了解其是如何進(jìn)行并產(chǎn)生的。這樣你在看到整體架構(gòu)時(shí),有足夠的理論支撐去判斷它的好壞,并通過自己的理論認(rèn)知去理解和改進(jìn)不好的地方。


當(dāng)我們對信息架構(gòu)有足夠的認(rèn)知時(shí),我們在設(shè)計(jì)頁面時(shí)才能有合理的思考方向,做出「正確的設(shè)計(jì)」,避免成為無情的作圖機(jī)器。信息架構(gòu)作為產(chǎn)品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗(yàn)才能夠有本質(zhì)上的提升。


注:文章中不可避免會(huì)存在不足之處,如果對文章中內(nèi)容有更好建議,歡迎隨時(shí)交流。


  參考資料:

《web信息架構(gòu)》第四版

《信息焦慮》

《用戶體驗(yàn)要素》

《信息架構(gòu)設(shè)計(jì)》

「從設(shè)計(jì)前/設(shè)計(jì)中階段,了解信息架構(gòu)知識(shí)點(diǎn)」

「互聯(lián)網(wǎng)產(chǎn)品如何搭建信息架構(gòu)」

文章來源:進(jìn)擊的M(站酷)
作者:進(jìn)擊的M

轉(zhuǎn)載請注明:交互深耕-B端設(shè)計(jì)師要懂的信息架構(gòu)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔