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