UX筆記是什么匹耕?
我的關于體驗設計的個人心得聚请,每次只解決一個體驗設計上的小問題。文章長了相信你也沒心思看完稳其,我也沒心思寫完驶赏。
Problem:
在設計按鈕時,經(jīng)常會糾結是用文字還是圖標既鞠,還是文字+圖標煤傍?
蘋果的系統(tǒng)APP也是同一個界面文字和圖標混用的,那究竟是他們是怎樣想的呢嘱蛋?帶著問題蚯姆,于是我又翻查了下蘋果的人機界面指南。我發(fā)現(xiàn)洒敏,指南里并沒有一個明確的規(guī)則去指引什么時候用圖標什么時候用文字龄恋,只是在不同的地方隱約提到一些設計思想,于是我試圖把這些只言片語收集起來桐玻,總結出規(guī)則來篙挽。
“To help you decide whether to use text or icons in the navigation bar or toolbar in your app, consider how many icons are visible onscreen at one time.Too many icons on a screen can make an app seem difficult to decode.”
就是說荆萤,在同一個界面里避免同時出現(xiàn)多個圖標镊靴,否則會給用戶難用的感覺铣卡,因為圖標一般比文字難以解讀。(死理性的處女座會問:多少個算多偏竟?我只能說煮落,根本沒必要糾結,并不是所有東西都能量化的)
“Use icons if you need to put more than three items in a toolbar.Because text-titled buttons typically use more space than icons, it can be difficult to keep the titles from running together.”
在工具欄(如上圖界面下部的條)里踊谋,超過三個按鈕則使用圖標蝉仇,否則可用文字。理由是文字一般比較長殖蚕,靠的太近就會首尾相接轿衔,雖然iOS是可以自動縮小字號來避免工具欄或導航欄上的文字首尾相接,但如果超過3個按鈕睦疫,就很有可能怎么都排不下了害驹。
“iOS provides a lot of small icons—representing common tasks and types of content—for use in tab bars, toolbars, navigation bars, and Home screen quick actions. It’s a good idea to use the built-in icons as much as possible because users already know what they mean.”
這些iOS自帶的圖標,能用則用蛤育,因為大部分用戶已經(jīng)熟知他們的意思宛官。(死理性的處女座這時又會跳出來問:這種標準icon風格和我的設計根本不搭啊瓦糕?底洗!我只能說,根本沒必要糾結咕娄,視覺風格是可以改變的亥揖,只要圖形意義一樣,誰會注意你的垃圾桶icon是長的還是扁的圣勒,只要像個垃圾桶就行)
“Embrace borderless buttons.By default, all bar buttons are borderless. In content areas, a borderless button uses context, color, and a call-to-action title to indicate interactivity. And when it makes sense, a content-area button can display a thin border or tinted background that makes it distinctive.”
在內(nèi)容區(qū)域(就是不在導航欄和工具欄)添加文字按鈕時徐块,要注意可交互性Interactivity,就是按鈕看起來是可以點的灾而,否則會和內(nèi)容文字混淆胡控,區(qū)分方法有三個:
一是上下文場景,一個按鈕放在電話號碼旁邊很可能就是撥打電話的按鈕旁趟;
二是顏色區(qū)分昼激,和正文使用不同的顏色,通常是APP的主色調(diào)锡搜;
三是命名橙困,采用動作本身來命名按鈕;(很多人喜歡用狀態(tài)來命名按鈕耕餐,這很容易產(chǎn)出混淆的凡傅,如果當前界面不能看到按鈕的結果,這樣的設計幾乎一定會被誤解)
四肠缔,雖然不推薦夏跷,但如果真上面三種方式都行不通哼转,就加一個邊框或背景表明它是一個按鈕。
安卓系統(tǒng)還有第五種方法槽华,采用字幕全大寫來表明是一個按鈕壹蔓,死理性的處女座肯定會問:中文怎么弄?確實沒法弄了...
最后補充一條指南里沒有提到的考慮因素猫态,文字雖然能準確表達避免歧義佣蓉,但在識別效率上不及圖標。因為人識別圖形比文字要快亲雪,因為文字的視覺差異要比圖標要小勇凭。當然,也有些時候是用簡短的文字也是難以表達準確的义辕,不過總體來說文字的表達比圖標表達還是更準確表達的套像,畢竟日常交流人類都使用通用的語言系統(tǒng),但通用的視覺圖標系統(tǒng)沒有那么常用终息。再往下挖因該要到語義學和符號學的范圍了夺巩。
以上就是指南里面全部相關內(nèi)容,那回到我們最初的問題周崭,“用文字還是圖標柳譬?”,考慮的因素大致有以下3個:
1. 圖標是否能準確表達续镇?
能用圖標美澳,不能用文字
2. 空間是否緊張?
緊張用圖標摸航,不緊張用文字或文字加圖標制跟。空間緊張程度其實并不一定指界面面積的大小酱虎,而是根據(jù)界面對信息密度的要求雨膨,例如有些界面要求信息密度很低(如駕車導航頁面不能顯示很多信息),即使有很大的界面面積但是空間仍然是緊張的读串。
3. 是否需要快速識別聊记?
需要使用圖標或圖標加文字,不需要的話可用純文字恢暖。
使用圖標加文字時排监,圖標和文字的大小比例也是可以調(diào)整的,可以以圖標為主杰捂,如Tab bar上面的大圖標小文字舆床,也可以以文字為主,如系統(tǒng)設置里小圖標大文字。
OK, Problem solved! 死理性的處女座可以安心睡覺去了~