「這個控件叫什么」系列之小紅點+索引導航+分段控件 - 優設網 - UISDC

「這個控件叫什么」系列之小紅點+索引導航+分段控件

2017/03/23 22854評論區

@龍爪槐守望者?:鑒于國內交互設計名詞混亂不統一,很多設計師不知道如何用專業術語稱呼一個控件,因此我開了《這個控件叫什么》專題,梳理控件的名稱和使用事項,希望能為推動交互設計發展,做出一點微小的貢獻。

Badge/徽標/小紅點

「小紅點」是這個控件在國內最通俗的稱呼,正式的名稱為「Badge」(徽標),Badge是指通常出現在圖標或文字右上角的紅色圓點、數字或者文字,表示有新內容或者待處理的信息。

△ 形態各異的Badge(徽標)

如何使用

無數字和有數字Badge使用場景

Badge可以分為無數字和有數字兩類,一般來說,如果只需讓用戶了解有更新或新內容必然只有一條時,使用無數字Badge,例如微信公眾號更新和App版本更新采用無數字類型。如果需要讓用戶精確了解有多少條更新且新內容有多條,可使用有數字Badge,例如IM的未讀消息、郵箱的未處理郵件。有數字的Badge給用戶帶來的心理壓力會更大,也會更吸引用戶注意力。

△ 無數字和有數字

注意數字的長度和上限

對于有數字的Badge,由于界面顯示空間有限,因此要注意視場景和信息類型決定數字最長顯示多少位,如果數字達到上限該如何顯示。

謹慎在圖標內運用紅色圓點元素

紅色小圓點這個視覺元素已經成為一種社會性語義符號,即用戶看到紅色小圓點就會認為這代表著有新內容,因此圖標設計因謹慎使用紅色圓點,例如魅族Flyme社區App里「我的粉絲」圖標,紅色的心型元素與圖標主體間有留白,用戶會誤以為這表示有新的粉絲,實際上沒有,只是圖標本來的元素罷了。

△ Flyme社區圖標

相關資料

1. 為什么Android官方控件沒有Badge?

iOS最開始設計并沒有通知中心(iOS5.0之后才有通知中心),僅靠桌面圖標上的Badge表示App是否有新消息,而Android設計之初就有通知中心,可在通知中心內聚合查看所有App的通知,所以不需要額外的Badge提示用戶有新消息。

△ Android的通知中心

2. 手機QQ一鍵清除小紅點功能

Badge如果非常多出現頻次又很高,會對用戶產生一些情緒干擾,例如很多強迫癥用戶每次遇到Badge都會設法點擊消除掉,手機QQ以此為出發點,創造性的設計了一鍵拖拽清除小紅點的功能,得到用戶好評。

△ 一鍵清除小紅點動畫演示具體設計過程和總結請閱讀:《讓創意落地!QQ手機版5.0“一鍵下班”設計小結》

A-Z index/字母索引導航

A-Z index(字母索引導航)能將信息以首字母進行分類組織并提供導航。字母索引歷史悠久,早在我們的實體書籍如字典、詞典等就運用這種信息組織方式。正因如此,A-Z index是用戶非常熟悉的一種導航方式。

△ 拼音字典

在移動UI里,A-Z index通常以豎軸形式出現在屏幕右側,點擊字母能將內容滾動到該字母的錨點位置。

△ 餓了么的A-Z index

如何使用

A-Z index適用于對數據量為幾十到幾千之間的單詞、詞組或短語等類型的導航,且用戶能對這些數據的首字母進行精確回憶。例如:國家、省份或城市的名稱、姓名、昵稱等。

注意非字母開頭的內容

一些移動社交網絡的昵稱,可能會使用emoj表情或者數字作為首個字符。在公司黃頁里,有公司會采取在名稱前加空格或不可見特殊字符獲取最先的排名。一般來說可以通過在A-Z index末尾增加“#”,表示非字母開頭的內容。如果首字符非字母的內容太多,可以考慮采用其他數據類型的導航。

△ 首字符為數字

增加常用選項導航

A-Z index嚴格按照字母順序排序,但是在某些場景中,這并非是最高效的。例如在外賣App選擇城市的列表中,用戶選擇當前城市的可能性最大,因此可以在A-Z index最頂端增加當前GPS定位地理位置的導航。建議視業務和用戶需求在A-Z indx基礎上增加常用選項導航(例如定位、熱門和搜索)。

△ 大眾點評增加熱門

注意中文多音字問題

漢語特有多音字,例如“解”有(jiě)、(jiè)和(xiè) 三個拼音,“覃” 有(qín)和(tán)兩個讀音,可以根據數據的使用場景對多音字進行一些處理,例如錘子科技的Smartisan OS根據聯系人列表的需要,去掉了“姓氏讀音為主要讀音的多音字”和“多個讀音都是姓氏但首字母相同的字”。(這句話有點繞…)

△ 錘子科技的Smartisan OS相關資料

相關資料

1. 可用性專家尼爾森認為字母索引過時了

雅各布·尼爾森(Jakob Nielsen),可用性專家,著名的尼爾森十大可用性原則的提出者。尼爾森發文稱:按照重要性或頻次的順序序列,邏輯結構,時間線或優先級排序通常優于字母索引。

詳情請閱讀: https://www.nngroup.com

2. 錘子科技Smartisan OS對A-Z index的創新

除了上文中提到的多音字優化,錘子科技Smartisan OS 3.0對A-Z index進行一系列提高效率的創新,例如A-Z index可以從右至左拉出,擴展單個字母的點擊區域,可大幅度減少因A-Z index點擊區域過小造成的誤觸。長按字母可以顯示該字母下所有的姓氏,更符合中文單首字母多漢字的特性。

△ 錘子科技Smartisan OS

3. 飛常準App提升字母點擊準確率

字母索引導航單個字母的點擊區域非常小,很容易點錯,錘子科技Smartisan OS從右至左拉出擴展字母點擊區域雖然準確率很高,但是操作較為繁瑣,可見性不高。飛常準App提供了另外一種思路,長按字母索引導航,會放大字母,上下滑動切換字母,松手之后跳轉到對應字母的錨點位置。

△ 非常準

Segment Controls/分段控件(附錄與Tabs的區別)

△ Segment Controls

Segment Controls(分段控件/分段選擇器/分段選擇控件)是iOS原生控件之一,Segment Controls是一組分段(segment )的線性集合,每一個分段的作用是互斥的,即點擊某分段使之處于觸發狀態,那么同一個Segment Controls的其他分段將恢復正常狀態,所以Segment Controls本質上是一個單選組件。橫向排布所有選項,相比于下拉菜單( drop-down menu)有更好的可見性。

如何使用

Segment Controls通常用于切換不同的視圖,或者在表單中作為單選組件使用。

△ 表單中的Segment Controls

限制分段數量控制在5個以內

較寬的分段更容易點擊,為了提高可用性,建議在手機屏幕上每個Segment Controls的分段控制在5個以內。因此分段的文案長度需要精簡,建議每個分段控制在2-4個漢字。

不要在同一個Segment Controls中混用文字和圖標

一個分段就像是一個按鈕,按鈕內當然可以使用文字或者圖標代表其含義,但是請不要在同一個Segment Controls中混用文字和圖標,避免讓用戶覺得混亂和不一致。

△ 文字分段和圖標分段

盡量保持各分段大小一致

同一個Segment Controls內,所有分段都應該具有相等的寬度。如果其中某些分段比其他分段寬,會讓整個控件看起來不協調,缺少一致性。

Tabs和Segment Controls的區別:

△ 左為Tabs,右為Segment Controls

經常國內發現App把Tabs和Segment Controls弄混的情況,給用戶帶來困擾,其實這兩個控件有諸多不同。

1)來源不同

Tabs來自Android規范,早在Android 2.0時代,官方的通訊錄App就使用頂部Tab導航,之前Android 4.0規范和最新的Material Design都將Tabs作為推薦的導航形式。而Segment Controls則來源于iOS規范。

2)操作方式不同

Segment Controls只能通過點擊控件本身的分段來進行操作,而Tabs除了點擊控件本身外,還可以通過屏幕內左右滑動切換不同的視圖。

3)適用場景不同

Segment Controls除了適用于表單的單選組件,其作為視圖切換控制時,一般來說,起到的是分割和篩選同類數據的作用。例如App Store的排行榜,[總排行榜]這個長列表數據集,通過Segment Controls把長列表分割成付費的、免費的和暢銷的幾個子列表數據集。

再比如「設置」中的電池用量,Segment Controls把開機后[所有時間耗電的App]篩選出[過去24小時]和[過去4天]這一部分數據。所以說Segment Controls本質上和下拉菜單一樣,只是有更好的可見性罷了。

△ Segment Controls本質是篩選,和下拉菜單一樣而Tabs沒有這種限制,Tabs里Tab呈現的內容可以有很大的差別,當然Tabs不能作為表單的單選組件。

4)數量限制不同

在手機屏幕里,Segment Controls分段限制在5個以內,而Tabs可以通過Scrollable tabs這種形式,擴展更多的Tab數量。

△ Scrollable tabs

本節先更新3個小科普,后面優設會持續更新,想提前學習的可以關注作者的微信公眾號:

「新人科普好文系列」

  1. 交互原型丨《術語小科普!聊聊線框稿、視覺稿與原型的區別》
  2. 移動端尺寸丨《通俗易懂!超全面的移動端尺寸基礎知識科普指南》
  3. 字體規范丨《界面設計必備!全方位科普常用的字體規范(附神器)》

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網阿贾克斯对热刺“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航://hao.uisdc.com/book/。
設計微博:擁有粉絲量190萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航://hao.www.utsvcz.com.cn

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/badge-az-index-segment-controls

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里