Badge/徽標(biāo)/小紅點(diǎn)
「小紅點(diǎn)」是這個(gè)控件在國(guó)內(nèi)網(wǎng)站建設(shè)最通俗的稱呼,正式的名稱為「Badge」(徽標(biāo)),Badge是指通常出現(xiàn)在圖標(biāo)或文字右上角的紅色圓點(diǎn)、數(shù)字或者文字,表示有新網(wǎng)站內(nèi)容或者待處理的信息。
△ 形態(tài)(pattern)各異的Badge(徽標(biāo))
如何使用
無數(shù)字和有數(shù)字Badge使用場(chǎng)景
Badge可以分為無數(shù)字和有數(shù)字兩類,一般來說,如果只需讓用戶了解有更新或新網(wǎng)站內(nèi)容必然只有一條時(shí),使用無數(shù)字Badge,例如微信公眾號(hào)更新和App版本更新采用無數(shù)字類型。如果需要讓用戶精確了解有多少條更新且新內(nèi)容有多條,可使用有數(shù)字Badge,例如IM的未讀消息、郵箱的未處理郵件。有數(shù)字的Badge給用戶帶來的心理壓力(mental press)會(huì)更大,也會(huì)更吸引用戶注意力。
△ 無數(shù)字和有數(shù)字
注意(attention)數(shù)字的長(zhǎng)度和上限
對(duì)于有數(shù)字的Badge,由于界面顯示空間有限,因此要注意視場(chǎng)景和信息類型決定數(shù)字最長(zhǎng)顯示多少位,如果數(shù)字達(dá)到上限該如何顯示。
謹(jǐn)慎在圖標(biāo)內(nèi)運(yùn)用紅色圓點(diǎn)元素
紅色小圓點(diǎn)這個(gè)視覺元素已經(jīng)成為一種社會(huì)性語(yǔ)義符號(hào),即用戶看到紅色小圓點(diǎn)就會(huì)認(rèn)為這代表著有新內(nèi)容,因此圖標(biāo)設(shè)計(jì)因謹(jǐn)慎使用紅色圓點(diǎn),例如魅族Flyme社區(qū)App里「我的粉絲」圖標(biāo),紅色的心型元素與圖標(biāo)主體間有留白,用戶會(huì)誤以為這表示有新的粉絲,實(shí)際上沒有,只是圖標(biāo)本來的元素罷了。
△ Flyme社區(qū)圖標(biāo)
相關(guān)資料
1. 為什么Android官方控件(對(duì)數(shù)據(jù)和方法的封裝)沒有Badge?
iOS最開始設(shè)計(jì)并沒有通知中心(iOS5.0之后才有通知中心),僅靠桌面圖標(biāo)上的Badge表示App是否有新消息,而Android設(shè)計(jì)之初就有通知中心,可在通知中心內(nèi)聚合查看所有App的通知,所以不需要額外(extra)的Badge提示用戶有新消息。
△ Android的通知中心
2. 手機(jī)QQ一鍵清除小紅點(diǎn)功能
Badge如果非常多出現(xiàn)頻次又很高,會(huì)對(duì)用戶產(chǎn)生一些情緒干擾,例如很多強(qiáng)迫癥用戶每次遇到Badge都會(huì)設(shè)法點(diǎn)擊消除掉,手機(jī)QQ以此為出發(fā)點(diǎn),創(chuàng)造性的設(shè)計(jì)了一鍵拖拽清除小紅點(diǎn)的功能,得到用戶好評(píng)。
△ 一鍵清除小紅點(diǎn)動(dòng)畫演示具體設(shè)計(jì)過程和總結(jié)請(qǐng)閱讀:《讓創(chuàng)意落地!QQ手機(jī)版5.0“一鍵下班”設(shè)計(jì)小結(jié)》
A-Z index/字母索引導(dǎo)航
A-Z index(字母索引網(wǎng)址導(dǎo)航)能將信息以首字母進(jìn)行分類組織并提供導(dǎo)航。字母索引歷史悠久,早在我們的實(shí)體書籍如字典、詞典等就運(yùn)用這種信息組織方式。正因如此,A-Z index是用戶非常熟悉的一種導(dǎo)航方式。
△ 拼音字典
在移動(dòng)UI里,A-Z index通常以豎軸形式出現(xiàn)在屏幕右側(cè),點(diǎn)擊字母能將網(wǎng)站內(nèi)容滾動(dòng)到該字母的錨點(diǎn)位置。
△ 餓了么的A-Z index
如何使用
A-Z index適用于對(duì)數(shù)據(jù)(data)量為幾十到幾千之間的單詞、詞組或短語(yǔ)等類型的網(wǎng)址導(dǎo)航,且用戶能對(duì)這些數(shù)據(jù)的首字母進(jìn)行精確回憶。例如:國(guó)家、省份或城市的名稱、姓名、昵稱等。
注意(attention)非字母開頭的內(nèi)容
一些移動(dòng)社交網(wǎng)絡(luò)的昵稱,可能會(huì)使用emoj表情或者數(shù)字作為首個(gè)字符。在公司黃頁(yè)里,有網(wǎng)站建設(shè)公司會(huì)采取在名稱前加空格或不可見特殊字符獲取最先的排名。一般來說可以通過在A-Z index末尾增加“#”,表示非字母開頭的網(wǎng)站內(nèi)容。如果首字符非字母的內(nèi)容太多,可以考慮采用其他數(shù)據(jù)(data)類型的導(dǎo)航。
△ 首字符為數(shù)字
增加常用選項(xiàng)導(dǎo)航
A-Z index嚴(yán)格按照字母順序排序,但是在某些場(chǎng)景中,這并非是最高效(指效能高的)的。例如在外賣App選擇城市的列表中,用戶選擇當(dāng)前城市的可能性(Possibility)最大,因此可以在A-Z index最頂端增加當(dāng)前GPS定位地理位置的導(dǎo)航。建議視業(yè)務(wù)和用戶需求在A-Z indx基礎(chǔ)上增加常用選項(xiàng)導(dǎo)航(例如定位、熱門和搜索)。
△ 大眾點(diǎn)評(píng)增加熱門
注意中文多音字問題
漢語(yǔ)特有多音字,例如“解”有(jiě)、(jiè)和(xiè) 三個(gè)拼音,“覃” 有(qín)和(tán)兩個(gè)讀音,可以根據(jù)數(shù)據(jù)(data)的使用場(chǎng)景對(duì)多音字進(jìn)行一些處理,例如錘子科技的Smartisan OS根據(jù)聯(lián)系人列表的需要,去掉了“姓氏讀音為主要讀音的多音字”和“多個(gè)讀音都是姓氏但首字母相同的字”。
蘇州做網(wǎng)站需要網(wǎng)站虛擬空間、域名以及動(dòng)態(tài)網(wǎng)站的數(shù)據(jù)庫(kù)這三個(gè)最基本的條件。網(wǎng)站虛擬空間是用來存放網(wǎng)站文件,如:圖片信息,html文件,php文件等,相當(dāng)于一個(gè)硬盤空間,域名即指訪問網(wǎng)站的地址。(這句話有點(diǎn)繞…)
△ 錘子科技的Smartisan OS相關(guān)資料
相關(guān)(related)資料
1. 可用性專家尼爾森認(rèn)為字母索引過時(shí)了
雅各布·尼爾森(Jakob Nielsen),可用性專家,著名的尼爾森十大可用性原則的提出者。尼爾森發(fā)文稱:按照重要性或頻次的順序序列,邏輯結(jié)構(gòu),時(shí)間線或優(yōu)先級(jí)排序通常優(yōu)于字母索引。
詳情請(qǐng)閱讀: https://www.nngroup.com
2. 錘子科技Smartisan OS對(duì)A-Z index的創(chuàng)新
除了上文中提到的多音字優(yōu)化,錘子科技Smartisan OS 3.0對(duì)A-Z index進(jìn)行一系列提升辦公效率的創(chuàng)新,例如A-Z index可以從右至左拉出,擴(kuò)展單個(gè)字母的點(diǎn)擊區(qū)域,可大幅度減少因A-Z index點(diǎn)擊區(qū)域過小造成的誤觸。長(zhǎng)按字母可以顯示該字母下所有的姓氏,更符合中文單首字母多漢字的特性。
△ 錘子科技Smartisan OS
3. 飛常準(zhǔn)App提升字母點(diǎn)擊準(zhǔn)確率
字母索引導(dǎo)航單個(gè)字母的點(diǎn)擊區(qū)域非常小,很容易點(diǎn)錯(cuò),錘子科技Smartisan OS從右至左拉出擴(kuò)展字母點(diǎn)擊區(qū)域雖然準(zhǔn)確率很高,但是操作較為繁瑣(fán suǒ),可見性不高。飛常準(zhǔn)App提供了另外一種思路,長(zhǎng)按字母索引導(dǎo)航,會(huì)放大字母,上下滑動(dòng)切換字母,松手之后跳轉(zhuǎn)到對(duì)應(yīng)字母的錨點(diǎn)位置。
△ 非常準(zhǔn)
Segment Controls/分段控件(附錄與Tabs的區(qū)別)
△ Segment Controls
Segment Controls(分段控件/分段選擇器/分段選擇控件)是iOS原生控件之一,Segment Controls是一組分段(segment )的線性集合,每一個(gè)分段的作用是互斥的,即點(diǎn)擊某分段使之處于觸發(fā)狀態(tài),那么同一個(gè)Segment Controls的其他分段將恢復(fù)正常狀態(tài),所以Segment Controls本質(zhì)上是一個(gè)單選組件。橫向排布所有選項(xiàng),相比于下拉菜單( drop-down menu)有更好的可見性。
如何使用
Segment Controls通常用于切換不同的視圖,或者在表單中作為單選組件使用。
△ 表單中的Segment Controls
限制分段數(shù)量控制在5個(gè)以內(nèi)
較寬的分段更容易點(diǎn)擊,為了提高可用性,建議在手機(jī)屏幕上每個(gè)Segment Controls的分段控制(control)在5個(gè)以內(nèi)。因此分段的文案長(zhǎng)度需要精簡(jiǎn),建議每個(gè)分段控制在2-4個(gè)漢字。
不要在同一個(gè)Segment Controls中混用文字和圖標(biāo)
一個(gè)分段就像是一個(gè)按鈕,按鈕內(nèi)當(dāng)然可以使用文字或者圖標(biāo)代表其含義,但是請(qǐng)不要在同一個(gè)Segment Controls中混用文字和圖標(biāo),避免讓用戶覺得混亂和不一致。
△ 文字分段和圖標(biāo)分段
盡量保持各分段大小一致
同一個(gè)Segment Controls內(nèi),所有分段都應(yīng)該具有相等的寬度。如果其中某些分段比其他分段寬,會(huì)讓整個(gè)控件看起來不協(xié)調(diào),缺少一致性。
Tabs和Segment Controls的區(qū)別:
△ 左為Tabs,右為Segment Controls
經(jīng)常國(guó)內(nèi)發(fā)現(xiàn)App把Tabs和Segment Controls弄混的情況,給用戶帶來困擾,其實(shí)這兩個(gè)控件(對(duì)數(shù)據(jù)和方法的封裝)有諸多不同。
1)來源不同
Tabs來自Android標(biāo)準(zhǔn),早在Android 2.0時(shí)代,官方的通訊錄App就使用頂部Tab網(wǎng)址導(dǎo)航,之前Android 4.0規(guī)范和最新的Material Design都將Tabs作為推薦的導(dǎo)航形式。而Segment Controls則來源于iOS規(guī)范。
2)操作控制方式不同
Segment Controls只能通過點(diǎn)擊控件本身的分段來進(jìn)行操作控制,而Tabs除了點(diǎn)擊控件本身外,還可以通過屏幕內(nèi)左右滑動(dòng)切換不同的視圖。蘇州做網(wǎng)站通俗的來說就是網(wǎng)站通過頁(yè)面結(jié)構(gòu)定位,合理布局,圖片文字處理,程序設(shè)計(jì),數(shù)據(jù)庫(kù)設(shè)計(jì)等一系列工作的總和,也是將網(wǎng)站設(shè)計(jì)師的圖片用HTML方式展示出來,屬于前臺(tái)工程師的一項(xiàng)任務(wù),前臺(tái)工程師任務(wù)包括:網(wǎng)站設(shè)計(jì)、網(wǎng)站用戶體驗(yàn)、網(wǎng)站JAVA效果、網(wǎng)站制作等工作。網(wǎng)站制作是策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁(yè)設(shè)計(jì)等崗位,應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)技術(shù),為企事業(yè)單位、公司或個(gè)人在全球互聯(lián)網(wǎng)上建設(shè)站點(diǎn),并包含域名注冊(cè)和主機(jī)托管等服務(wù)的總稱。常熟網(wǎng)站建設(shè)前期準(zhǔn)備包括了前期網(wǎng)站定位、內(nèi)容差異化、頁(yè)面溝通等戰(zhàn)略性調(diào)研,這些確立后,再去注冊(cè)域名、租用空間、網(wǎng)站風(fēng)格設(shè)計(jì)、網(wǎng)站代碼制作五個(gè)部分,這個(gè)過程需要網(wǎng)站策劃人員、美術(shù)設(shè)計(jì)人員、WEB程序員共同完成。網(wǎng)站是企業(yè)展示自身形象、發(fā)布產(chǎn)品信息、聯(lián)系網(wǎng)上客戶的新平臺(tái)、新天地,進(jìn)而可以通過電子商務(wù)開拓新的市場(chǎng),以極少的投入獲得極大的收益和利潤(rùn)。
3)適用場(chǎng)景不同
Segment Controls除了適用于表單的單選組件,其作為視圖切換控制(control)時(shí),一般來說,起到的是分割和篩選同類數(shù)據(jù)的作用。例如App Store的排行榜,[總排行榜]這個(gè)長(zhǎng)列表數(shù)據(jù)集,通過Segment Controls把長(zhǎng)列表分割成付費(fèi)的、免費(fèi)的和暢銷的幾個(gè)子列表數(shù)據(jù)集。
再比如「設(shè)置」中的電池用量,Segment Controls把開機(jī)后[所有時(shí)間耗電的App]篩選出[過去24小時(shí)]和[過去4天]這一部分?jǐn)?shù)據(jù)。所以說Segment Controls本質(zhì)上和下拉菜單一樣,只是有更好的可見性罷了。
△ Segment Controls本質(zhì)是篩選,和下拉菜單一樣而Tabs沒有這種限制,Tabs里Tab呈現(xiàn)的內(nèi)容可以有很大的差別,當(dāng)然Tabs不能作為表單的單選組件。
4)數(shù)量限制不同
在手機(jī)屏幕里,Segment Controls分段限制(limit)在5個(gè)以內(nèi),而Tabs可以通過Scrollable tabs這種形式,擴(kuò)展更多的Tab數(shù)量。
△ Scrollable tabs
這30款網(wǎng)站和工具,讓網(wǎng)站設(shè)計(jì)效率(efficiency)提升一大截 2017 網(wǎng)站設(shè)計(jì)中的色彩技巧,創(chuàng)造更優(yōu)質(zhì)的用戶訪問體驗(yàn)