解構《Web信息架構》——標記系統(tǒng)

初讀《Web信息架構》之后亿眠,覺得原書表達方式實在晦澀難懂糠赦,對于信息架構的基本原理部分進行分析解構会傲,總結有4篇文章,分別就標記系統(tǒng)拙泽、元數(shù)據(jù)受控詞表及敘詞表淌山、導航系統(tǒng)、搜索系統(tǒng)四個方面進行闡述顾瞻。關于原書中對組織系統(tǒng)的相關介紹泼疑,由于本人資歷尚淺未能參悟,歡迎各位留言討論荷荤。

本文對標記系統(tǒng)的解構退渗,分為三個部分:
1.標記系統(tǒng)的含義移稳、分類、特性(What?)
2.設計標記的原則和方法(How?)
3.標記系統(tǒng)在產(chǎn)品設計實踐中的使用(How in practice?)

1.What?

1.1 含義

標記(label)在Web設計中会油,指頁面可見的所有起說明和引導作用的單排文字个粱,通常是詞語或詞組,設計標記文本的過程稱為命名翻翩。例如“聯(lián)系我們”都许、“登錄”,這些就是典型的常用標記嫂冻,一個網(wǎng)站所有的標記組成了它的標記系統(tǒng)(labeling systems)胶征。

用更形象的例子來說明,各位產(chǎn)品設計者桨仿,請打開axure使用其自帶組件的label睛低,就是那個短短的默認無邊框的文本條。

請注意:原書中的label被譯為“標簽”蹬敲,但現(xiàn)在行業(yè)內(nèi)更多的采用“標記”這種說法以便于與tag區(qū)分暇昂。label與tag的區(qū)別詳見:
Web設計中的三個易混淆概念——label,tag,category

1.2 分類

情景式鏈接:指向其他網(wǎng)頁中大塊信息的超鏈接,或者指向同一張網(wǎng)頁中的另一個位置伴嗡。
標題:描述后面或下方的內(nèi)容急波,類似文檔標題。
導航系統(tǒng)選項:代表導航系統(tǒng)中某個選項的標記瘪校。
索引術語:供應搜索或瀏覽的澄暮,代表內(nèi)容的關鍵詞和標題詞。

1.3 特性

AcFun導航標記實例

下面主要用A站(www.acfun.tv)及相關網(wǎng)站的對比實例來講解標記的特性:

-符合用戶期望
標記設計會充分來考慮信息架構基礎三要素(內(nèi)容阱扬、情境泣懊、用戶)中最重要的一環(huán):用戶。在A站的全局導航標記中麻惶,我們可以看到在靠后的位置有“影視”一項馍刮。而在一般的視頻網(wǎng)站(如優(yōu)酷、愛奇藝)中窃蹋,我們看看該詞出現(xiàn)的位置和展現(xiàn)形式卡啰。

優(yōu)酷導航標記實例

優(yōu)酷、愛奇藝等面向大眾的視頻網(wǎng)站警没,在標記分級上更為符合常理匈辱,“影視”一般代指“電影、電視劇”杀迹,描述的是視頻的來源或原始體裁亡脸,而“科技”、“體育”則是描述視頻內(nèi)容題材、主題分類浅碾。上圖中優(yōu)酷的實例大州,影視占了如此重要的地位,以至于被拆分為兩個標記及穗,而AcFun中處于同樣重要地位的動漫摧茴,在優(yōu)酷中則排在后面,并且位于下一個等級(該導航用字號加以區(qū)分)埂陆。再看看A站中的“動漫”一項苛白,被拆分為“番劇”、“動畫”焚虱、“舞蹈”這三個與動漫強相關但屬于動漫之下的概念购裙,分別位于前四標記中的3個,占據(jù)著核心位置鹃栽。

用戶點開A站時躏率,他是二次元患者、年輕人民鼓。
用戶點開優(yōu)酷時薇芝,他是普通用戶,而數(shù)據(jù)告訴我們丰嘉,普通用戶中大部分行為集中在找影視內(nèi)容夯到。

-情境與情境繼承
標記在設計的時候,會考慮使用情境饮亏。比如A站導航標記中耍贾,位于左邊排頭的標記是二次元人群最喜聞樂見的;而中間放置一些訪問量上漸漸過渡的二次元屬性較弱的題材標記路幸;再后荐开,將其余題材,根據(jù)男性简肴、女性用戶的特定興趣取向晃听,分為“彼♀女”、“魚♂塘”砰识;最后是“文章”杂伟、“合輯”、“更多”等這些游覽性質(zhì)更強仍翰,目的性更弱的內(nèi)容標記。從左到右观话,符合用戶使用時予借,從關鍵信息搜尋,到漫無目的瀏覽的情境。

標記高度融于網(wǎng)站的使用情境之中灵迫,這樣使得某些層級較深的標記秦叛,可以通過情境繼承省略掉一些定語修飾,從而在寬度和規(guī)模上滿足頁面設計要求瀑粥。還是舉個A站的例子(見本文第一張圖)挣跋,“文章”這個一級標記分類下,“動漫文化”狞换、“游戲”這兩個子導航標記避咆,如果獨立于其他頁面,完全可以作為與“文章”同類同級的標記修噪,而在此情境下查库,用戶是在瀏覽文章中的動漫和游戲類內(nèi)容,該子導航標記繼承了父級標記“文章”的情境黄琼,因此可以不用命名為“動漫文化文章”樊销、“游戲文章”,同時也不能脫離父級標記獨立存在脏款。概括的說围苫,這樣也解釋了為什么在不同網(wǎng)站中同樣命名的標記,擁有完全不同的含義撤师,然而用戶并沒有被誤導的情形剂府,這種情況和在英國搜索伯明翰,不會搜索到美國東南部那個同名城市是一個道理丈氓。

-等級性
上文中提到了繼承的概念周循,也同時說明,標記具有嚴格的等級性万俗。就像書籍一樣湾笛,書籍的標題幫助我們區(qū)分章與節(jié),而Web中標記幫助我們區(qū)分類別與子類別闰歪。在Web中的標記嚎研,為了便于標記文字內(nèi)容的正確理解,通常在視覺層面做出區(qū)別輔助用戶判斷库倘。就像書籍標題之間的等級關系临扮,無論是大標題、小標題或是同層次的標題教翩,通常是用統(tǒng)一的編號杆勇、字號、樣式和顏色饱亿、空白和縮排蚜退,或者是這些組合起來建立的闰靴。在視覺層上傳達出的等級區(qū)分,會讓一組沒有意義的標記立刻井井有條钻注。

-命名唯一性
標記們組成全網(wǎng)站的標記系統(tǒng)時蚂且,在命名時的擁有全局唯一性。如幅恋,A站中“體育”標記杏死,不會在某個地方出現(xiàn)近義詞“運動”這個同指向的標記。我自己在設計過程中捆交,也會著重注意這點淑翼,因為命名不規(guī)范、一致零渐,不僅會影響用戶窒舟,在這之前就已經(jīng)會給設計和開發(fā)造成麻煩。

2.How?

2.1 設計標記的通用原則

-窄化范圍
如果我們將網(wǎng)站鎖定在更加明確的用戶上诵盼,就能減少某個標記可能的意義范圍惠豺。專注少數(shù)幾個具體的主題領域,可以得到更明確而有效的表達效果风宁。這樣的做法在保證內(nèi)容不消減的情況下洁墙,增加了標記數(shù)量特別是同一個父標簽中的子類數(shù)目,通常也會伴生出扁平化的架構設計戒财。

-一致性——版面形式热监、粒度、語言風格饮寞、語法
在同一等級內(nèi)的標記孝扛,通常在樣式和排布上完全一致。但是除了視覺可見的元素幽崩,更不能忽略的是粒度上的一致苦始。粒度一致的標記,是對正確劃分標記等級的印證慌申,否則會誤導用戶陌选。試想,在A站“動畫”蹄溉、“音樂”標記之后咨油,出現(xiàn)一個本應該為子標記的“vocaloid”標記的錯亂感。

語言風格和語法也是不可忽略的兩個命名標準柒爵。風格混搭的兩個標記排布于同一位置役电,會讓人有錯亂、出戲的感覺棉胀,影響瀏覽體驗的延續(xù)性法瑟。不同詞性的詞組在一起排列囱晴,從標記所指代的內(nèi)容上判斷,本身就是不合理的設計瓢谢,“下訂單”不可能和“商品信息”排在一起祖搓,應該是“訂單”翼虫、“商品信息”狗唉,或者“下訂單”宵呛、“查看商品”淮菠。

-內(nèi)容的寬度和規(guī)模
標記作為文字內(nèi)容赚瘦,命名時同時要考慮語義可理解性和版本設計感苔悦。盡量用同樣或相近的字數(shù)介时,在視覺上不會誤導用戶狂魔。同時蒜埋,如果發(fā)現(xiàn)某個標記無法跟同類標簽共享一個寬度,這時要考慮該標記所放置的層級是否出錯最楷,如果是整份,則放入下一個層級便可以使用情境繼承的特性縮減文字。

-帶圖形標記
現(xiàn)代Web中常見的帶圖形標記籽孙,通常都已經(jīng)使用多年烈评,被用戶廣泛接受,甚至有部分可以不需要文本犯建,演化為圖標讲冠,如返回、關閉等适瓦。設計新的圖形標記通常要慎之又慎竿开,考慮圖形是否會造成理解偏差,考慮用戶的學習成本玻熙。

知乎中“同意”和“反對”

上圖為知乎Web端中否彩,使用向上向下箭頭圖標表示對該回答同意和反對的例子。實際上這個圖標是經(jīng)過了相當長一段時間的接受揭芍、演化和再接受的胳搞,最初從論壇、貼吧評論的“頂”称杨、“倒”發(fā)源肌毅,當時的圖標分別是“豎起大拇指”,“大拇指朝地面”姑原。在經(jīng)歷十多年的習慣之后悬而,形象簡化為向上、向下箭頭并省略文字锭汛,并無不妥笨奠。

2.2 設計標記系統(tǒng)的方法

標記不是孤立的袭蝗,一般成組、結對出現(xiàn)般婆。也就是說到腥,要設計某個網(wǎng)站的標記,應該是一個全局層面的活蔚袍,即設計該網(wǎng)站的標記系統(tǒng)乡范。這個系統(tǒng)需要一個框架(表達方式)來把內(nèi)容(命名及信息)依據(jù)一定的規(guī)則(層級、組織)粘合起來啤咽。當然晋辆,這只是最初的整理,能確定到標記命名這個粒度宇整,接下來還有一些視覺上如何落實的活瓶佳,不在本文的討論范圍之內(nèi)。

2.2.1 表達方式

設計鳞青、表達一個內(nèi)容系統(tǒng)霸饲,用表格的形式再合適不過:

用表格整理標記系統(tǒng)

依據(jù)上表,首先理清標記系統(tǒng)的層級盼玄、類別贴彼、每個標記的指向、指向頁的title(如果跳轉)埃儿,在全局的視角審驗是否合乎前文所講的特性及規(guī)則器仗。上圖中沒有很好的體現(xiàn)標記與子標記之間的從屬關系,可以改進為類似樹狀結構的表格童番。

2.2.2 命名與組織

你現(xiàn)在清楚了標記系統(tǒng)的表達式精钮,那么怎樣填充內(nèi)容呢?下文按照設計標記系統(tǒng)的依據(jù)來源差異剃斧,分為兩部分闡述完成標記系統(tǒng)表格的方法轨香。

(1)來源于現(xiàn)有規(guī)則
大部分情況,你的網(wǎng)站涉足的領域都不是一片未知而混沌的原初世界幼东。大量現(xiàn)有的規(guī)則已經(jīng)支撐這個古老的行業(yè)百十年以上臂容,初創(chuàng)者所生造出的行話、定義根蟹,已經(jīng)被收錄進標準詞條脓杉。這些詞條和詞條的含義,至少在業(yè)內(nèi)已經(jīng)深入人心简逮,新造詞條會強迫用戶再次學習球散,亂用詞條會使用戶感到迷惑不解∩⑹基于這點蕉堰,我們需要盡可能多的利用現(xiàn)有的標準化的規(guī)則凌净。

-類似網(wǎng)站或競品
在看到這些標準用語之前,在你的心里已經(jīng)有一個大概的印象屋讶,只是在用詞上沒有一個確信的答案冰寻。綜合多家類似的甚至是競爭對手的網(wǎng)站,不難得出該領域的大部分標簽的標準命名皿渗,這是一種久經(jīng)考驗的業(yè)界標準性雄,并且該領域的用戶經(jīng)過長期的瀏覽,已經(jīng)培養(yǎng)出了一套固化的認知羹奉。

-受控詞表、敘詞表
如果設計中的網(wǎng)站约计,是信息檢索類大型網(wǎng)站诀拭,或者說需要使用搜索引擎,那么就需要有更加專業(yè)而系統(tǒng)的工具煤蚌,來保證信息的可尋性耕挨。受控詞表、敘詞表是由該領域?qū)<抑朴單咀罹邫嗤瑫r也能被大眾認可的標簽來源筒占。這一方面說開涉及到的內(nèi)容太多并且專業(yè)性很強,在本文中不作贅述蜘犁。

(2)來源于用戶
使用分析方法或者用戶研究方法翰苫,創(chuàng)造一套新的標簽系統(tǒng)。

-內(nèi)容分析
這個方法適用于信息內(nèi)容(文本这橙、圖片奏窑、音視頻)豐富的網(wǎng)站。讀惹(查看埃唯、觀看)網(wǎng)站中有代表性的內(nèi)容,為每份文件速記一些用于描述的關鍵詞鹰晨。焦點放在內(nèi)容上最具代表性的數(shù)據(jù)墨叛,如標題、總結和摘要模蜡,可以節(jié)省這項工作所需要的巨量時間漠趁。

-用戶代表
直接對話產(chǎn)品的核心用戶,選擇少數(shù)幾個用戶代表并讓他們來決定哩牍。越是專業(yè)性強的網(wǎng)站棚潦,越需要使用這個方法。核心用戶對于自己的信息需求非常明確膝昆,也知道一些關鍵用語中易混淆或是有分歧的地方丸边,并可以給出最標準的解釋叠必。

-卡片分類法
開放式卡片分類是讓用戶將寫好功能點或者特性的卡片先憑經(jīng)驗分類,再對每一類命名妹窖,每一類即成為每一個標簽纬朝,它的命名也就是標簽命名。這個方法不僅可以解決標簽的命名的問題骄呼,因為其分類特性共苛,還可以理清標簽之間的歸屬關系,對標簽系統(tǒng)的設計也能發(fā)揮作用蜓萄。簡單的描述就是以下過程:

用戶:
已知粒度較小的(功能點隅茎、特性或內(nèi)容分類);
求這些碎片的組合方式嫉沽;
求這些碎片的組合體名稱辟犀。

設計者:
統(tǒng)計多個用戶的組合方式,順從“多數(shù)人”绸硕;
統(tǒng)計“多數(shù)人”用戶的標簽命名堂竟,再次順從其中的多數(shù)人。

現(xiàn)實中可能會在產(chǎn)品設計團隊難以判斷玻佩、出現(xiàn)分歧時出嘹,采用這個方法。該方法是從下到上確定局部標簽系統(tǒng)設計的咬崔,因此在這之前先要劃定整個方法需要確定的局部范圍税稼。制作卡片內(nèi)容的時候,第一垮斯,要注意娶聘,每一張卡片粒度必須盡可能的小,可視為信息的最基本單元甚脉。比如丸升,我們在網(wǎng)站上提供網(wǎng)站所屬公司信息的時候的時候,通常會有公司簡介牺氨、新媒體地址狡耻、公司新聞、創(chuàng)始人介紹猴凹、企業(yè)文化夷狰、團隊榮譽、信用資質(zhì)郊霎、用戶保障協(xié)議沼头、聯(lián)系客服、商業(yè)合作等多個方面的內(nèi)容,上述這些內(nèi)容雖然層級可能不盡相同进倍,但粒度基本最小土至,可視為基本單元寫在卡片上。第二猾昆,要明確一點陶因,自己寫在卡片上的這些內(nèi)容,一定是不要用上述的這些高度概括的詞語垂蜗,最好用陳述句說得清楚透徹楷扬,否則已經(jīng)是在創(chuàng)造標簽了。

封閉式卡片分類是設計者先做不同類主題的命名贴见,然后在向用戶講清楚每個主題的定義烘苹,并讓用戶將寫好內(nèi)容的卡片分類。比之開放式少了命名的環(huán)節(jié)片部,用途局限但專注于分類螟加。用戶能準確理解分類主題的定義,是效果好壞的關鍵吞琐。

-自由列表法
這個方法主要用于局部標簽的命名。讓用戶記錄下關于一個主題的瞬間聯(lián)想或者頭腦風暴內(nèi)容然爆,并從所有用戶的結果統(tǒng)計中站粟,找出最多次使用的詞語,并找出這些詞語的結構曾雕。

-搜索分析法
獲得用戶的搜索記錄奴烙,使用字符串中出現(xiàn)頻率最高的詞語,作為相關內(nèi)容標簽的命名剖张。

-tag分析法
分析其他網(wǎng)站或者數(shù)據(jù)資料中切诀,用戶生成的tags,取最高頻的詞匯作為你的標簽。注意避免tag與label所翻譯過來的“標簽”混淆搔弄。這些tags是其他網(wǎng)站使用通俗標記法(folksonomy幅虑,也譯作“分眾分類法”,是指“群眾”自發(fā)性定義的平面非等級標簽分類顾犹,由自定義標簽(tag)演變而來倒庵。)獲得的。

3.How In Practice?

3.1 時機

在實際設計中炫刷,其實大家就算沒有刻意單獨關注標簽系統(tǒng)擎宝,也在設計產(chǎn)品結構的時候順帶做了,這其實是比較正確的時機浑玛。也就是說绍申,標簽系統(tǒng)的設計最好在已經(jīng)確定總體需求之后,原型設計之前。需求確定保證了標簽系統(tǒng)的范圍可控极阅。理清標簽層級胃碾,能為結構和導航設計提供依據(jù);確定標簽命名涂屁,能讓之后的原型书在、文檔擁有提前統(tǒng)一的詞匯參考。

3.2 用法與價值?

做這件事情拆又,主要目的是為團隊在設計時提供參考和指南儒旬,所整理出標簽系統(tǒng)表格的讀者也是設計團隊。而因為提前有了一個綱領性的表格帖族,最后在產(chǎn)品結構圖栈源、高保真原型、需求文檔中處處都會直接參考標簽系統(tǒng)表格中設定的層級和用語竖般。比如UI甚垦、前端在考慮頁面title、標簽指向涣雕、樣式設計的時候艰亮,處處都會依照標簽系統(tǒng)中的已設定的信息,并且由于標簽系統(tǒng)囊括了網(wǎng)站頁面所要展示的所有信息挣郭,比導航系統(tǒng)展示的更加全面而且形象迄埃,更容易腦補出整個頁面,所以在預估頁面數(shù)量兑障、預估工期上也比參照產(chǎn)品結構圖更為精確侄非。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市流译,隨后出現(xiàn)的幾起案子逞怨,更是在濱河造成了極大的恐慌,老刑警劉巖福澡,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叠赦,死亡現(xiàn)場離奇詭異,居然都是意外死亡革砸,警方通過查閱死者的電腦和手機眯搭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來业岁,“玉大人鳞仙,你說我怎么就攤上這事”适保” “怎么了棍好?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我借笙,道長扒怖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任业稼,我火速辦了婚禮盗痒,結果婚禮上,老公的妹妹穿的比我還像新娘低散。我一直安慰自己俯邓,他們只是感情好,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布熔号。 她就那樣靜靜地躺著稽鞭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪引镊。 梳的紋絲不亂的頭發(fā)上朦蕴,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天,我揣著相機與錄音弟头,去河邊找鬼吩抓。 笑死,一個胖子當著我的面吹牛赴恨,可吹牛的內(nèi)容都是我干的疹娶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼嘱支,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了挣饥?” 一聲冷哼從身側響起除师,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎扔枫,沒想到半個月后汛聚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡短荐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年倚舀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片忍宋。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡痕貌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糠排,到底是詐尸還是另有隱情舵稠,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站哺徊,受9級特大地震影響室琢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜落追,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一盈滴、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧轿钠,春花似錦巢钓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至继谚,卻和暖如春烈菌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背花履。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工芽世, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人诡壁。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓济瓢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親妹卿。 傳聞我的和親對象是個殘疾皇子旺矾,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容