標記系統(tǒng)設(shè)計總結(jié)
我之前寫的文章都是關(guān)于某一個組件或者設(shè)計元素的使用總結(jié),今天這篇文章是對產(chǎn)品中的標記系統(tǒng)做的一個整理分析,里面涉及到的內(nèi)容比較雜,希望可以幫助到大家。
標記系統(tǒng)
寫這篇文章的緣由是我最近經(jīng)常在“餓了么”里點外賣,我發(fā)現(xiàn)一個店鋪有很多“標簽”,每個標簽帶有不同的意思?!靶隆贝磉@家店是剛開的;“減”代表有滿減優(yōu)惠;“首”代表新用戶下單會立減消費金額;“保”代表該店鋪參加了“外賣?!庇媱?,食品安全有保障;“票”代表該商家支持開發(fā)票等等。非常的復(fù)雜,我就問我自己:如果我做的產(chǎn)品中有這么多的標簽,我應(yīng)該怎么展示呢?為了解決這個問題,我覺得有必要梳理一下產(chǎn)品中的標記系統(tǒng)。
從這個角度來說大家不知道標記系統(tǒng)這很正常,因為這只是我為了表述方便而起的一個名字,你完全可以有自己的叫法。設(shè)計其實是一個包容性很強的行業(yè),沒有所謂的非黑即白,非對即錯。同樣的一個設(shè)計理念,每個人都有不同的叫法和理解。我所理解的標記系統(tǒng)是為了滿足營銷宣傳需要或者狀態(tài)發(fā)生變更而對特定內(nèi)容進行標記讓用戶能夠感知。如果你看不懂,沒關(guān)系,下面有詳細的介紹。
標記系統(tǒng)里的幾個常見的設(shè)計元素有角標、標簽、紅點和印章。
角標
角標主要用于營銷宣傳期間,提升用戶點擊率。例如最近圣誕節(jié)快到了,你要想重點宣傳一個產(chǎn)品,你可以使用角標來吸引用戶注意力,加上“爆款”“折扣”“熱銷”等字眼。
在我看來,角標是表現(xiàn)力最強的標記元素。因為角標一般會出現(xiàn)在界面的左上方和右上方,左上方的居多,而根據(jù)用戶的“Z”型瀏覽習慣,角標很容易被用戶感知到,而且角標一般都是面狀,更是可以很好的達到吸引用戶注意力的目的。
角標的缺點在于一次只能出現(xiàn)一個,如果你的產(chǎn)品具有“爆品”“加價購”“APP特惠”等多個賣點的時候,使用角標就不太合適了。
當然你如果非要用角標來展示也不是不行,但是太過于擁擠。這個就涉及到信息優(yōu)先級排布的問題,以上面的“餓了么”為例,如果我是這個平臺的設(shè)計師,我也會把“新店”做成角標。因為角標的對用戶的吸引力要更強一點,而我們必須通過這種強有力的宣傳來幫助新店度過剛開張的時期。如果沒有這種保護措施,新店存活不下去,沒有新鮮血液注入,這個平臺早晚會玩完。
標簽
標簽Tag,主要用于標記和選擇。標簽與角標相比表現(xiàn)力會弱點,但是它的優(yōu)勢在于可以同時展示多個,我剛才說的那個例子就可以用標簽來完成。而且不同的標簽我們可以設(shè)置不同的背景色來加以區(qū)分。
此外用戶可以進行點擊選擇,快速找到帶有同一標簽的其他產(chǎn)品。所以標簽不僅可以完成標記任務(wù),還可以起到一個信息篩選和分類的作用。
但是并不是每一個標簽都是可以點擊的,因為用戶通過標簽去查看該分類的其他信息不一定通過點擊標簽自身來完成,也可以通過其他篩選途徑來完成。
此外“可點擊”標簽為了避免用戶誤操作必然會擠占更多的界面空間,所以說不可點擊的標簽是有存在意義的。而標簽的樣式又跟按鈕很像,怎么設(shè)計出讓用戶知道“這是不可點擊”的標簽是一個難題,我之前采用的方法是采用斷線,但是感覺效果不太好有更好想法的朋友可以留言交流。
紅點
我們俗稱的“(數(shù)字)紅點”其實專業(yè)術(shù)語是Badge,主要出現(xiàn)在按鈕、圖標旁的數(shù)字或者狀態(tài)標記。
紅點的最基礎(chǔ)的用法就是來展示新消息的數(shù)量,當然你也可以自定義顯示數(shù)字以外的文本內(nèi)容。
我們還可以不加任何文本內(nèi)容,直接展示一個小紅點表示當前狀態(tài)或者內(nèi)容發(fā)生變更。
其實對于小紅點的使用,我們一定要慎重。因為小紅點的工作原理就在于用戶心中對于和諧統(tǒng)一界面的追求,突然這里出現(xiàn)了一個紅點,所以總是會忍不住的想去點擊。我們可以適當?shù)慕档托〖t點的尺寸,或者使用一些微動效來緩解用戶的內(nèi)心對于這個小紅點的煩躁心理。
印章
印章主要用于表單內(nèi)信息的標記。表單內(nèi)一般文本信息比較多,為了進行凸顯我們可以使用印章樣式,而且因為現(xiàn)實生活中的印章所帶來的隱喻,用戶也很容易接受。
?組件層級
即使在同一款產(chǎn)品中,因為使用場景和信息層級的不同,相同的組件會有多種不同的展示樣式。
以使用場景為例,同樣的一個群消息提醒,是否開啟了免打擾模式的小紅點的樣式是不一樣的,這里主要的不同是背景色。
以信息層級為例,同樣的標簽,在列表頁的樣式是面狀而詳情頁是線狀。關(guān)于這點我是這樣理解的,在產(chǎn)品列表頁面,你得通過這些“誘人”的標簽把用戶吸引過來,當用戶點擊進入到詳情頁后,就沒有必要突出這些標簽了。
總結(jié)
最后我們可以從使用場景的角度對這四個元素進行一個梳理:
- 角標:表現(xiàn)力最強,適合展示信息層級最高或者最重要的功能;
- 標簽:常規(guī)標記元素,適合展示不太重要且數(shù)目較多的功能;
- 小紅點:著重于展示狀態(tài)的變更;
- 印章:表單類多文本信息的標記首選。
以上就是我對標記系統(tǒng)做的一個總結(jié),希望可以幫助到大家。
#專欄作家#
王M爭(微信公眾號:王M爭),人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 unsplash,基于 CC0 協(xié)議
細小出感悟,受教了
很小的東西,但是把它總結(jié)到一起,很棒的分享
蟹蟹分享,深入淺出了。
??
寫的很棒,