鑒于國(guó)內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一癞埠,很多設(shè)計(jì)師不知道如何用專(zhuān)業(yè)術(shù)語(yǔ)稱(chēng)呼一個(gè)控件,因此我開(kāi)了《這個(gè)控件叫什么》專(zhuān)題,梳理控件的名稱(chēng)和使用事項(xiàng)冻押,希望能為推動(dòng)交互設(shè)計(jì)發(fā)展,做出一點(diǎn)微小的貢獻(xiàn)摘盆。
「小紅點(diǎn)」是這個(gè)控件在國(guó)內(nèi)最通俗的稱(chēng)呼翼雀,正式的名稱(chēng)為「Badge」(徽標(biāo)),Badge是指通常出現(xiàn)在圖標(biāo)或文字右上角的紅色圓點(diǎn)孩擂、數(shù)字或者文字狼渊,表示有新內(nèi)容或者待處理的信息。
如何使用
- 無(wú)數(shù)字和有數(shù)字Badge使用場(chǎng)景
Badge可以分為無(wú)數(shù)字和有數(shù)字兩類(lèi)类垦,一般來(lái)說(shuō)狈邑,如果只需讓用戶(hù)了解有更新或新內(nèi)容必然只有一條時(shí),使用無(wú)數(shù)字Badge蚤认,例如微信公眾號(hào)更新和App版本更新采用無(wú)數(shù)字類(lèi)型米苹。如果需要讓用戶(hù)精確了解有多少條更新且新內(nèi)容有多條,可使用有數(shù)字Badge砰琢,例如IM的未讀消息蘸嘶、郵箱的未處理郵件。有數(shù)字的Badge給用戶(hù)帶來(lái)的心理壓力會(huì)更大陪汽,也會(huì)更吸引用戶(hù)注意力训唱。
- 注意數(shù)字的長(zhǎng)度和上限
對(duì)于有數(shù)字的Badge,由于界面顯示空間有限挚冤,因此要注意視場(chǎng)景和信息類(lèi)型決定數(shù)字最長(zhǎng)顯示多少位况增,如果數(shù)字達(dá)到上限該如何顯示。
-
謹(jǐn)慎在圖標(biāo)內(nèi)運(yùn)用紅色圓點(diǎn)元素
紅色小圓點(diǎn)這個(gè)視覺(jué)元素已經(jīng)成為一種社會(huì)性語(yǔ)義符號(hào)训挡,即用戶(hù)看到紅色小圓點(diǎn)就會(huì)認(rèn)為這代表著有新內(nèi)容澳骤,因此圖標(biāo)設(shè)計(jì)因謹(jǐn)慎使用紅色圓點(diǎn),例如魅族Flyme社區(qū)App里「我的粉絲」圖標(biāo)澜薄,紅色的心型元素與圖標(biāo)主體間有留白为肮,用戶(hù)會(huì)誤以為這表示有新的粉絲,實(shí)際上沒(méi)有肤京,只是圖標(biāo)本來(lái)的元素罷了颊艳。
相關(guān)資料
-
為什么Android官方控件沒(méi)有Badge
iOS最開(kāi)始設(shè)計(jì)并沒(méi)有通知中心(iOS5.0之后才有通知中心),僅靠桌面圖標(biāo)上的Badge表示App是否有新消息,而Android設(shè)計(jì)之初就有通知中心籽暇,可在通知中心內(nèi)聚合查看所有App的通知温治,所以不需要額外的Badge提示用戶(hù)有新消息。
- 手機(jī)QQ一鍵清除小紅點(diǎn)功能
Badge如果非常多出現(xiàn)頻次又很高戒悠,會(huì)對(duì)用戶(hù)產(chǎn)生一些情緒干擾熬荆,例如很多強(qiáng)迫癥用戶(hù)每次遇到Badge都會(huì)設(shè)法點(diǎn)擊消除掉,手機(jī)QQ以此為出發(fā)點(diǎn)绸狐,創(chuàng)造性的設(shè)計(jì)了一鍵拖拽清除小紅點(diǎn)的功能卤恳,得到用戶(hù)好評(píng)。
具體設(shè)計(jì)過(guò)程和總結(jié)請(qǐng)閱讀騰訊ISUX博客:https://isux.tencent.com/qq-mobile-off-duty.html
《這個(gè)控件叫什么》專(zhuān)題
這個(gè)控件叫:A-Z index/字母索引導(dǎo)航
這個(gè)控件叫:Segment Controls/分段控件(附錄與Tabs的區(qū)別)
這個(gè)控件叫:Skeleton Screen/加載占位圖
這個(gè)控件叫:Page Indicator/Page Controls/頁(yè)面指示器
這個(gè)控件叫:Stepper/步進(jìn)器
這個(gè)控件叫:Switch/開(kāi)關(guān)/滑動(dòng)開(kāi)關(guān)/切換開(kāi)關(guān)
Toast(吐司提示)的曾經(jīng)寒矿、現(xiàn)在與未來(lái)
這個(gè)控件叫:Picker/選擇器/拾取器
這個(gè)控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤(pán)/虛擬鍵盤(pán)
這個(gè)控件叫:Action Sheet/動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表
這個(gè)控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件叫:Text fields/輸入框/文本框
這個(gè)控件可能叫:Notice Bar/通告欄