UX筆記#01 |按鈕用圖標還是文字?

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! 死理性的處女座可以安心睡覺去了~

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末挨队,一起剝皮案震驚了整個濱河市谷暮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瞒瘸,老刑警劉巖坷备,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件熄浓,死亡現(xiàn)場離奇詭異情臭,居然都是意外死亡,警方通過查閱死者的電腦和手機赌蔑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門俯在,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人娃惯,你說我怎么就攤上這事跷乐。” “怎么了趾浅?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵愕提,是天一觀的道長。 經(jīng)常有香客問我皿哨,道長浅侨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任证膨,我火速辦了婚禮如输,結果婚禮上,老公的妹妹穿的比我還像新娘央勒。我一直安慰自己不见,他們只是感情好,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布崔步。 她就那樣靜靜地躺著稳吮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪井濒。 梳的紋絲不亂的頭發(fā)上盖高,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天,我揣著相機與錄音眼虱,去河邊找鬼喻奥。 笑死,一個胖子當著我的面吹牛捏悬,可吹牛的內(nèi)容都是我干的撞蚕。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼过牙,長吁一口氣:“原來是場噩夢啊……” “哼甥厦!你這毒婦竟也來了纺铭?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤刀疙,失蹤者是張志新(化名)和其女友劉穎舶赔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谦秧,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡竟纳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了疚鲤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锥累。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖集歇,靈堂內(nèi)的尸體忽然破棺而出桶略,到底是詐尸還是另有隱情,我是刑警寧澤诲宇,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布际歼,位于F島的核電站,受9級特大地震影響姑蓝,放射性物質發(fā)生泄漏鹅心。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一它掂、第九天 我趴在偏房一處隱蔽的房頂上張望巴帮。 院中可真熱鬧,春花似錦虐秋、人聲如沸榕茧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽用押。三九已至,卻和暖如春靶剑,著一層夾襖步出監(jiān)牢的瞬間蜻拨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工桩引, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缎讼,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓坑匠,卻偏偏與公主長得像血崭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容