阿贾克斯对热刺 www.utsvcz.com.cn

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

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]

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

點贊
收藏 97
繼續閱讀相關文章

發表評論 已發布 4

還可以輸入 800 個字
 
 
載入中....
4 收藏