NOTE：本篇文章討論的標(biāo)簽系統(tǒng)設(shè)計(jì)和設(shè)計(jì)一套數(shù)據(jù)庫標(biāo)簽系統(tǒng)是不同的酷愧，本文針對(duì)的是UI/UE設(shè)計(jì)為基礎(chǔ)設(shè)計(jì)標(biāo)簽，注重的是標(biāo)簽的表現(xiàn)形式和標(biāo)簽界面如何和用戶進(jìn)行交互滓侍。不同于設(shè)計(jì)數(shù)據(jù)庫標(biāo)簽系統(tǒng)绍傲，是注重標(biāo)簽之前的以及表的管理的邏輯關(guān)系憾儒。閱讀本文的時(shí)候需要注意這一點(diǎn)规哲。
什么是標(biāo)簽跟啤？
舉個(gè)簡單的例子，在自然語言當(dāng)中，當(dāng)我們提起“名片”這個(gè)詞的時(shí)候隅肥，就會(huì)主動(dòng)聯(lián)想到帶有一個(gè)人的電話信息关顷，公司信息，姓名等個(gè)人信息的90X54mm的紙質(zhì)卡片武福。“名片”就可以稱之為這個(gè)紙質(zhì)卡片的標(biāo)簽痘番。當(dāng)標(biāo)簽和內(nèi)容捉片，物品，事物關(guān)系變得復(fù)雜的時(shí)候我們就需要一個(gè)標(biāo)簽系統(tǒng)了汞舱。
我們?yōu)槭裁匆O(shè)計(jì)標(biāo)簽系統(tǒng)伍纫？
接著上面名片的例子，如果我們向另外一個(gè)人詢要名片的時(shí)候我們肯定不會(huì)說：“您能給我一張帶有您的姓名昂芜，電話信息以及公司信息的卡片嗎莹规？”我們肯定會(huì)說：“您能給我一張您的名片嗎？”由此看出泌神，標(biāo)簽作為一種代詞良漱，可以大大的縮減溝通成本。我們將這些已經(jīng)提前封裝和制作好的內(nèi)容或者物品欢际，貼上一張標(biāo)簽母市，就可以方便我們的日常溝通和交流了。比如一本書损趋，一個(gè)電視節(jié)目或者一個(gè)網(wǎng)站他們都會(huì)有一個(gè)或者更多的標(biāo)簽患久，方便在我們想提起他們的時(shí)候有一個(gè)準(zhǔn)確的名字稱呼他們。
值得注意的是浑槽，我們?nèi)伺c人交流的時(shí)候會(huì)使用一些代詞作為標(biāo)簽蒋失，這是在人與人面對(duì)面交流的情境下成立的，因?yàn)槲覀兛梢酝ㄟ^觀察對(duì)方的表情桐玻，聽取對(duì)方的語氣來判斷對(duì)方說的是什么東西篙挽，同時(shí)我們也可以通過自身的反饋來告知對(duì)方自己是否理解他的意思，整個(gè)對(duì)話交流的過程是連續(xù)的畸冲。然而當(dāng)人與機(jī)器界面進(jìn)行交互的時(shí)候這個(gè)過程就是時(shí)常中斷的嫉髓，因?yàn)闄C(jī)器沒有表情和語氣的反饋，機(jī)器也更加不會(huì)知道我們是否理解它所表述的東西邑闲，所以在進(jìn)行界面設(shè)計(jì)的時(shí)候我們十分有必要討論一下我們的標(biāo)簽系統(tǒng)應(yīng)該如何設(shè)計(jì)算行，通過設(shè)計(jì)來降低人與機(jī)器溝通中斷所帶來的影響。
標(biāo)簽系統(tǒng)的合理性標(biāo)準(zhǔn)應(yīng)該是什么苫耸？
這里以豆瓣圖書熱門標(biāo)簽為例州邢，說明標(biāo)簽系統(tǒng)設(shè)計(jì)過程當(dāng)中幾個(gè)需要注意的關(guān)鍵點(diǎn)。
每一個(gè)標(biāo)簽都要有足夠的代表性
每一個(gè)標(biāo)簽都應(yīng)該有足夠的代表性，比如說“小說”我們就知道這個(gè)分類下面的圖書內(nèi)容都是故事情節(jié)很強(qiáng)的圖書量淌，“傳記”我們就知道這一分類的圖書都是關(guān)于一個(gè)人物的生平記事的內(nèi)容骗村。
標(biāo)簽要做區(qū)分
豆瓣當(dāng)中有很多標(biāo)簽，所以我們需要對(duì)標(biāo)簽進(jìn)行區(qū)分呀枢，把有相似性的標(biāo)簽組織在一起胚股，這樣用戶更加容易識(shí)別和辨認(rèn)。比如豆瓣圖書熱門標(biāo)簽里就對(duì)不同的標(biāo)簽詞匯進(jìn)行了分類裙秋，方便用戶快速瀏覽琅拌。
是否應(yīng)該使用特別專業(yè)的詞匯？
這是一個(gè)關(guān)乎用戶摘刑，需要將思考點(diǎn)放在进宝，用戶，內(nèi)容枷恕，情景三個(gè)方面進(jìn)行分析的問題党晋。如果選用的標(biāo)簽詞匯和面向的用戶群體差距過大，及用戶不知道這個(gè)標(biāo)簽表達(dá)的內(nèi)容是什么徐块。這樣就會(huì)給用戶造成很大的困惑未玻，導(dǎo)致標(biāo)簽系統(tǒng)的設(shè)計(jì)失誤。
標(biāo)簽需要讓用戶留下好的印象
印象是相對(duì)玄學(xué)的東西胡控，當(dāng)用戶點(diǎn)擊你設(shè)計(jì)的標(biāo)簽的時(shí)候應(yīng)該讓用戶了解和意識(shí)標(biāo)簽背后是他真正想要的東西深胳，標(biāo)簽背后所展示的內(nèi)容應(yīng)該是和用戶心里想的一樣的。比如當(dāng)我們點(diǎn)擊“小說”標(biāo)簽的時(shí)候铜犬，豆瓣總是可以推薦給我們這個(gè)世界上最優(yōu)秀的小說作品舞终。
界面設(shè)計(jì)上都有哪些標(biāo)簽的表現(xiàn)形式呢？
標(biāo)簽的形式一般分成兩種癣猾，一種常用的是文字型的敛劝，另外一種是圖標(biāo)型的。相對(duì)來說文字型標(biāo)簽在web界面上比較常見纷宇，圖標(biāo)型的標(biāo)簽在現(xiàn)在的移動(dòng)端上比較常見夸盟。這里我們討論常用的文子型標(biāo)簽，因?yàn)閳D標(biāo)型標(biāo)簽像捶，在應(yīng)用的過程當(dāng)中有一定的局限性上陕，比如古代的時(shí)候各個(gè)軍隊(duì)會(huì)有不同的圖騰和旗幟，如果以姓氏作為旗幟很容易被自己人和敵軍辨認(rèn)拓春，但是使用圖騰作為旗幟释簿，如果你是個(gè)新設(shè)計(jì)的旗幟別人肯定很難知道你是誰。關(guān)于圖標(biāo)型標(biāo)簽一般會(huì)和文字性標(biāo)簽混合使用硼莽，我們?nèi)蘸笤儆懻撍膽?yīng)用庶溶。
情景鏈接式的標(biāo)簽
我認(rèn)為最具代表性的就是百度百科的標(biāo)簽了，這類標(biāo)簽常常在文章的內(nèi)容當(dāng)中，他們作為一個(gè)單獨(dú)的詞匯可以在不同的詞條當(dāng)中建立鏈接偏螺，這種標(biāo)簽很易于讓用戶留在網(wǎng)站當(dāng)中跳轉(zhuǎn)和瀏覽行疏。只是當(dāng)跳轉(zhuǎn)次數(shù)太多的時(shí)候，我們就很難再回到最初的位置了套像。
標(biāo)題
是的酿联，標(biāo)題就是一個(gè)很明顯的標(biāo)簽，當(dāng)我們寫一篇文章那個(gè)的時(shí)候夺巩，它的標(biāo)題就可以準(zhǔn)確的代表這篇文章的內(nèi)容货葬。
導(dǎo)航系統(tǒng)
標(biāo)簽系統(tǒng)可以有效的組織網(wǎng)站的信息內(nèi)容，比如像亞馬遜這種電子商務(wù)網(wǎng)站擁有眾多的產(chǎn)品類目劲够，為了方便瀏覽就會(huì)設(shè)計(jì)導(dǎo)航系統(tǒng)。
索引術(shù)語
搜索一些內(nèi)容所使用到的關(guān)鍵詞和搜索詞休傍。比如我們在淘寶搜索“襪子”那么淘寶就會(huì)返回給我們所有關(guān)于襪子的產(chǎn)品征绎，我們將這樣的關(guān)鍵詞稱之為索引術(shù)語。（相對(duì)專業(yè)的說法）
我們應(yīng)該如何設(shè)計(jì)標(biāo)簽系統(tǒng)了磨取？
前面啰嗦了很多是希望各位閱讀者可以了解標(biāo)簽系統(tǒng)的概念和目的人柿，這樣才更加容易理解我們下面想要說的內(nèi)容。
一些基本原則
標(biāo)簽代表的范圍不要太廣泛
標(biāo)簽代表的范圍應(yīng)該窄一些忙厌，比如男士襪子就會(huì)比襪子代表的內(nèi)容更加窄凫岖，這樣更加便于檢索獲得更好的結(jié)果。
標(biāo)簽需要有一致性
比如在我使用zol在線的篩選器去檢索手機(jī)的時(shí)候逢净，篩選器上提供的標(biāo)簽都是和手機(jī)的參數(shù)相關(guān)的哥放，這些標(biāo)簽一定都是和手機(jī)相關(guān)的代詞。這樣用戶查看和使用的時(shí)候才不會(huì)困惑爹土。
標(biāo)簽的版面與樣式
比如說價(jià)格標(biāo)簽甥雕，我們在設(shè)計(jì)價(jià)格標(biāo)簽的時(shí)候從1000-1500元 使用相同的連接線，而不應(yīng)該500——1000元或者1000-1500元胀茵。同時(shí)標(biāo)簽的字體社露，字號(hào)，顏色琼娘，間距都應(yīng)該保持一定的規(guī)范峭弟。
語法問題
比如體育項(xiàng)目“打籃球”，“踢足球”這樣的分類脱拼，如果是動(dòng)詞+名詞的形式那么所有的標(biāo)簽內(nèi)容就都應(yīng)該是這種形式瞒瘸，標(biāo)簽系統(tǒng)是“籃球”，“踢足球”這樣詞語組成形式不準(zhǔn)確的是錯(cuò)誤的熄浓，這么錯(cuò)很難統(tǒng)一規(guī)范還會(huì)對(duì)用戶識(shí)別造成困擾挨务。
很難注意的粒度問題
首先解釋一下粒度這個(gè)詞，粒度是用來衡量礦物質(zhì)顆粒直徑大小的一個(gè)詞，（嗯谎柄，我是地質(zhì)大學(xué)畢業(yè)的~~~）我們用它來描述標(biāo)簽詞匯的長短問題丁侄。比如叫外賣的標(biāo)簽：“餐廳”，“中國餐廳”朝巫，“必勝客”鸿摇，“西式餐廳”將這些意義相近粒度不同的詞匯放在一起的時(shí)候，就會(huì)感覺很奇怪劈猿，其實(shí)這些詞好像并沒有擠在一起的必要拙吉。
我們看豆瓣電影的標(biāo)簽，只會(huì)在標(biāo)簽下面表明“1994/美國/犯罪/劇情”只要抓取關(guān)鍵字就可以了揪荣，完全沒有必要說明這是1994年的電影筷黔，美國電影，犯罪電影仗颈，劇情電影佛舱。我們只要表達(dá)，簡潔的詞匯就可以挨决，“中餐”请祖，“西餐”
這樣就可以了。
理解性和用戶
這里我們需要再次強(qiáng)調(diào)脖祈，只要和信息架構(gòu)設(shè)計(jì)相關(guān)的內(nèi)容肆捕，比如標(biāo)簽系統(tǒng)設(shè)計(jì)，我們就需要考慮到用戶盖高，內(nèi)容慎陵，情景的問題，將自己帶入到這個(gè)場景當(dāng)中去判斷喻奥，用戶是否可以理解我們設(shè)計(jì)的標(biāo)簽的詞匯荆姆。
標(biāo)簽都放在網(wǎng)站的什么地方？
頁頭
中間內(nèi)容
頁腳
幾乎涵蓋網(wǎng)站整個(gè)頁面映凳，不過他們主要還是出現(xiàn)在頭尾和內(nèi)容檢索位置胆筒。這些關(guān)鍵的標(biāo)簽信息應(yīng)該在開始和結(jié)束的位置不對(duì)嗎？
簡單的標(biāo)簽系統(tǒng)設(shè)計(jì)方法
表格設(shè)計(jì)法
我們可以將標(biāo)簽的名稱诈豌，點(diǎn)擊標(biāo)簽跳轉(zhuǎn)到的頁面的標(biāo)題以及標(biāo)簽頁面html里面的<title>的內(nèi)容提取出來制作一個(gè)表格仆救。
這樣我們就可以知道，點(diǎn)擊不同的標(biāo)簽從那個(gè)頁面跳轉(zhuǎn)到那個(gè)頁面矫渔，并且這個(gè)頁面的標(biāo)題內(nèi)容是怎樣的彤蔽。除了讓用戶使用的時(shí)候更加清晰，也比較有益于SEO的優(yōu)化庙洼。
類似網(wǎng)站競爭對(duì)手參考
如果你的業(yè)務(wù)和類似的網(wǎng)站或者競爭對(duì)手的網(wǎng)站分類方式相近顿痪，直接參考他們的設(shè)計(jì)方案好了镊辕，簡單、高效蚁袭、明確易于用戶理解和學(xué)習(xí)征懈，比如京東商城，淘寶天貓揩悄，亞馬遜卖哎，他們的分類導(dǎo)航幾乎都是一樣的。
電商類網(wǎng)站借鑒這些用戶普遍接受的標(biāo)簽設(shè)計(jì)可能會(huì)是一種很好的選擇删性，標(biāo)新立異才會(huì)有風(fēng)險(xiǎn)亏娜。
使用專業(yè)詞匯表
比如zol在線手機(jī)頁面，上面所有的標(biāo)簽都是數(shù)據(jù)的詳細(xì)參數(shù)蹬挺，經(jīng)常來查看數(shù)據(jù)的用戶肯定都是對(duì)手機(jī)有一定了解的用戶维贺，直接使用描述手機(jī)配置的專業(yè)詞匯進(jìn)行分類篩選會(huì)是一種很好的選擇。
自己創(chuàng)建新的標(biāo)簽系統(tǒng)
很遺憾巴帮，如果你設(shè)計(jì)的網(wǎng)站分類標(biāo)簽系統(tǒng)和其他網(wǎng)站都不相似溯泣，并且你是獨(dú)一份，那么你何有可能就需要自己去設(shè)計(jì)這些分類系統(tǒng)了晰韵。
首先我們應(yīng)該先制作一個(gè)詞匯表，這個(gè)詞匯表詞匯來源于對(duì)網(wǎng)站信息內(nèi)容的分析熟妓、內(nèi)容作者的提供雪猪、以及用戶代言人提供的建議。
網(wǎng)站內(nèi)容分析
現(xiàn)在有很多程序可以根據(jù)文章內(nèi)容自動(dòng)抓取分類信息起愈，提取網(wǎng)頁內(nèi)容的關(guān)鍵字作為分類標(biāo)簽會(huì)是一個(gè)不錯(cuò)的選擇只恨。
內(nèi)容作者提供
內(nèi)容作者提供標(biāo)簽是一個(gè)不錯(cuò)的選擇，比較符合SNS的觀念抬虽，所有的內(nèi)容都由用戶提供的官觅，這個(gè)老概念恐怕很多人都忘記了，這很有效阐污。
比如我在segementfault上提問的時(shí)候休涤，我就可以為我的問題創(chuàng)建標(biāo)簽，或者使用系統(tǒng)已經(jīng)創(chuàng)建好的標(biāo)簽笛辟，因?yàn)樵诖蟮恼Z言認(rèn)知范圍內(nèi)功氨，我們很有可能會(huì)有重復(fù)的認(rèn)知標(biāo)簽，這就讓很多松散的用戶找到了共同點(diǎn)手幢。
用戶代言人提供的建議
這個(gè)其實(shí)更加類似需求分析的方法捷凄，假設(shè)你想了解學(xué)生的需求，你可以不去問學(xué)生围来，而去問老師跺涤，因?yàn)閷W(xué)生不一定了解自己真正的需求而老師可能會(huì)了解匈睁。自己制作標(biāo)簽系統(tǒng)是一樣的道理。我們可以詢問一些用戶的代理人桶错，來獲得標(biāo)簽詞匯表航唆。
總結(jié)
標(biāo)簽系統(tǒng)設(shè)計(jì)的過程當(dāng)中要有基本的準(zhǔn)則和規(guī)范才能設(shè)計(jì)出良好的標(biāo)簽系統(tǒng)，另外值得注意的時(shí)候標(biāo)簽系統(tǒng)的目的是讓機(jī)器和人建立良好的溝通機(jī)制牛曹，人的認(rèn)知是會(huì)變化的佛点，所以我們的標(biāo)簽系統(tǒng)也應(yīng)該跟隨人的認(rèn)知一起去更新和變化才會(huì)有適合用戶的標(biāo)簽系統(tǒng)產(chǎn)生。
