建站
咨詢
售后
建站咨詢
新聞中心
編者按：一個合格的 UI 按鈕到底需要具備什么樣的素質(zhì)?在很多設(shè)計師眼里似乎并不是一個太大的問題的，但是在實際設(shè)計的時候，UI 按鈕的細(xì)節(jié)處理不到位的情況卻比比皆是。來自資深設(shè)計師 Taras Bakusevych 的這篇文章《Button Design — UI component series》 ，詳細(xì)拆解了一個設(shè)計良好的 UI 按鈕，應(yīng)該有哪些「自我修養(yǎng)」。
為了更好地設(shè)計交互界面，有的時候，我們需要重新回顧一下歷史。想要設(shè)計好一個按鈕，也許我們不用完整地回溯整個 UI 界面的發(fā)展歷史，但是至少要回到數(shù)字界面誕生之前看一看。
按鈕很重要。按鈕很棒。
在沒有圖形化界面的年代，使用按鈕來實現(xiàn)復(fù)雜的命令，將算法和功能隱藏在一個按鈕背后，讓電器、汽車或者系統(tǒng)發(fā)揮作用。在《Power Button》一書中，Rachel Plotnick 回溯了如今整個按鈕文化的起源，在書中，他認(rèn)為是按鈕推動了數(shù)字技術(shù)，讓復(fù)雜的命令得以以輕松、便捷且防呆的方式，在我們的生活中普及。
「你只需要按一下按鈕，剩下的交給我們?！埂逻_(dá)相機(jī)通過這種醒目的Slogan吸引潛在的消費者。
即使在今天，足夠便捷的按鈕設(shè)計，也是吸引用戶的原因。比如 iPhone 的 home 鍵。通過簡單的觸摸、按下來完成任務(wù)，讓人享受到強(qiáng)烈的即時滿足感。盡管成千上萬的數(shù)字產(chǎn)品和家電開始加上觸摸屏，但是物理按鈕還沒有消失，而虛擬的按鈕更是交互的基礎(chǔ)設(shè)施。實體按鈕在過去一個世紀(jì)里所塑造的體驗和認(rèn)知根深蒂固，它所塑造的習(xí)慣、認(rèn)知和文化影響著設(shè)計的直觀性和易用性。
按鈕和鏈接的差別
按鈕傳達(dá)給用戶的是直接的可執(zhí)行性的操作，它們通常會存在于整個 UI 界面體系當(dāng)中，從各種對話框、窗口到工具欄。按鈕和鏈接在某些功能體驗上很接近，但是兩者之間的區(qū)別是很重要的：
- 導(dǎo)航到另外一個位置的時候使用鏈接。比如「查看全部」頁面，用戶「Roger Wright」的個人資料，等。
- 執(zhí)行特定操作的時候的按鈕。比如「上傳」、「新建」、「合并」等等。
按鈕會將它的狀態(tài)告訴用戶
創(chuàng)建按鈕需要使用正確的樣式，而用來昭示按鈕狀態(tài)的不同樣式設(shè)計，是按鈕設(shè)計過程中繞不過的工作。每種狀態(tài)都必須有明確的「可供性」，這樣才能讓它和其他的元素、布局區(qū)分開來。但是，差異化的設(shè)計又不能造成喧賓奪主的效果，制造視覺噪音。
- 正常狀態(tài)——表示按鈕是可交互的，并且可用的。
- 聚焦?fàn)顟B(tài)——通過高亮的形式告訴用戶，它已經(jīng)被鍵盤或者其他的方式所選中
- 懸停狀態(tài)——當(dāng)用戶使用光標(biāo)或者其他的元素，置于其上方的時候，顯示這樣的狀態(tài)
- 激活狀態(tài)——表示用戶已經(jīng)按下按鈕(且還未結(jié)束按按鈕的動作)
- 加載狀態(tài)——表示操作正在加載中，組件正在反映，但是操作還未完成
- 禁用狀態(tài)——表示當(dāng)前組件處于非交互狀態(tài)，但是之后可以被啟用
按鈕有各種不同的色彩、形狀和大小
圓角矩形的按鈕是最常見的按鈕，這些按鈕被置于輸入框旁邊，非常易于識別，特別常見。但是按鈕的樣式、大小變化范疇非常大，使用什么樣的樣式，取決于你要做什么，所用的平臺，以及需要遵循的規(guī)范。下面是一些最常用的、受歡迎的樣式：
樣式可以用來呈現(xiàn)按鈕的重要性
樣式優(yōu)先級是用來區(qū)分按鈕和操作重要性的。通過樣式，可以區(qū)分出代表背后操作的重要性層級，從而指引用戶進(jìn)行多方面的選擇。通常，你可以讓最重要的按鈕使用優(yōu)先級最高的樣式，這種按鈕通常是「主按鈕」，同時搭配幾個次優(yōu)先級的按鈕，而其他很少使用、優(yōu)先級不高、不推薦使用的按鈕，則使用第三級的樣式。
有時按鈕沒有「默認(rèn)狀態(tài)」
通常，我們會將用戶最常用到的按鈕使用「默認(rèn)」?fàn)顟B(tài)，也就是常說的聚焦?fàn)顟B(tài)，或者是主樣式，這樣可以幫助用戶更快完成任務(wù)，指引正確的方向。但是也有例外的情況，比如所有選擇都是平級、對等的情況下，或者說所有的操作都是有潛在風(fēng)險的情況下，這個時候，你可能會使用兩個次優(yōu)先級的按鈕樣式來呈現(xiàn)所有按鈕。
「不要讓我思考」
「Don’t Make Me Think」 是可用性大師 Steve Krug 經(jīng)典的設(shè)計入門書中所提到的一種設(shè)計精神，它涉及到許多要點，但是核心思想是要讓設(shè)計顯而易見，不要讓用戶感到迷惑。這是基于多年橫跨多設(shè)備、各種產(chǎn)品設(shè)計之后沉淀下來的經(jīng)驗。我們對于按鈕的功能和體驗是有期望和基礎(chǔ)認(rèn)知的，與我們通常所見的按鈕差別太大，會讓人感到困惑。
避免對交互式和非交互式的元素使用相同的顏色，否則用戶會很難判斷到底哪里可以被點擊。
一致性設(shè)計可以提高交互準(zhǔn)確度和效率
「一致性是非常強(qiáng)大的可用性原則：當(dāng)事物的表現(xiàn)和反饋保持一致的時候，用戶不會擔(dān)心會有意外發(fā)生?！埂狫akob Nielsen
一致性提高了用戶交互的速度和準(zhǔn)確性，有助于避免錯誤。這在很大程度上讓設(shè)計具備了可預(yù)測性，用戶能夠清楚自己能夠做到什么。當(dāng)你創(chuàng)建三種不同層級的樣式的時候，請盡量使用相對一致、具有延續(xù)性的設(shè)計，按鈕在整套體系內(nèi)部是高度一致的，并且要兼顧到其他可能會用到它的平臺。
讓按鈕足夠大，確保交互可靠性
按下按鈕應(yīng)該是一個簡單的任務(wù)，如果用戶無法成功地輕點按鈕，或者在操作過程中無從旁邊的元素，這會帶來負(fù)面的體驗，并且浪費時間。
對于絕大多數(shù)平臺，請盡量讓按鈕的大小在 48×48 dp 以上(最早 iOS 上按鈕的最小尺寸為 44×44 dp)。無論屏幕大小如何，觸摸按鈕控件的物理觸摸尺寸應(yīng)該至少為 9 mm ，觸摸屏幕上，按鈕控件的可視尺寸應(yīng)該在 7~10 mm 這個范疇內(nèi)。
對于圖標(biāo)按鈕，盡量讓它的觸摸尺寸大于它的可視尺寸，這不僅適用于移動端觸摸屏，對于普通的網(wǎng)頁和桌面端 UI 也是一樣。
無障礙設(shè)計
對于每個組件，都應(yīng)該保持足夠的可訪問性，嚴(yán)格意義上來說，就是遵循 WCAG 的標(biāo)準(zhǔn)，在色彩、布局等細(xì)節(jié)上，確保有視覺障礙的用戶可以輕松地使用他們。有大量的在線的工具可以幫你測試設(shè)計的可訪問性，確保無障礙。
設(shè)計師應(yīng)當(dāng)和開發(fā)者緊密合作，確保按鈕可以和屏幕閱讀器可以配合使用，添加 role = “button” 到代碼當(dāng)中，確保元素可以調(diào)用屏幕閱讀控件，讓視障用戶可以使用這一切。
記得兼顧手勢操作
手勢交互如今已經(jīng)是觸摸交互的基礎(chǔ)了。諸如滑動、雙擊、長按這樣的交互已經(jīng)被用戶廣泛接受，并且每天都在高頻度地使用。但是對于普通用戶而言，它們依然不是很明顯，因為手勢是默認(rèn)「隱形」的。我建議對于手勢交互提供支持，但是不作為唯一的交互方式，依然以顯性的按鈕交互作為基礎(chǔ)。
優(yōu)秀的按鈕標(biāo)簽?zāi)軌虼龠M(jìn)用戶操作
按鈕上的標(biāo)簽文本和它的視覺外觀一樣重要。使用錯誤的標(biāo)簽文本會讓人感到困惑，會浪費時間，會帶來問題。
這也是為什么微文案的重要性在如今被一再提高。好的按鈕文本同樣是被精心設(shè)計出來的。最好使用動詞提供趨勢引導(dǎo)，并且標(biāo)注出它的實際功能。就像按鈕在問用戶「您要(將商品)添加購物車嗎?」或者「(您要)確認(rèn)訂單嗎?」
避免使用「是」和「否」這樣可能會存在歧義的、簡單的文本。
「取消/確認(rèn)」還是「確認(rèn)/取消」?都可以
「確認(rèn)」和「取消」到底哪個在左，哪個在右?有的設(shè)計師可能會花費好幾個小時來糾結(jié)和確認(rèn)。
- 將「確認(rèn)」置于首位。如果我們知道「確認(rèn)」可能是多數(shù)情況下的選擇，并且這樣的放置能夠節(jié)省用戶交互時間，那么可以這么放。
- 將「確認(rèn)」置于末位。有人認(rèn)為將「確認(rèn)」置于末位能夠促進(jìn)用戶去點擊。更多的時候，置于這樣的位置可能會促進(jìn)用戶衡量和思考是否要點擊。蘋果的設(shè)計當(dāng)中，「確認(rèn)」常常被置于末位。
其實哪種使用方式都有良好的論據(jù)支撐，并且任何選擇都不會是災(zāi)難性的。我個人傾向于將「確認(rèn)」置于末位(這可能是因為我是一個 Mac 用戶)。
禁用按鈕令人抓狂
每個人都或多或少會碰到這樣的情況，被卡在頁面上好一陣子，想搞清楚到底表單哪里填錯了導(dǎo)致無法推進(jìn)。禁用狀態(tài)下的按鈕令人抓狂，雖然后續(xù)如果正確觸發(fā)可以啟用，但是此刻是讓人糟心的。結(jié)合信息引導(dǎo)和錯誤說明，讓按鈕保持正常狀態(tài)，讓「可點擊」的狀態(tài)呈現(xiàn)出來，會讓用戶更舒適。
我建議盡量避免使用按鈕的禁用狀態(tài)。
結(jié)語
按鈕的使用有很多技巧，但是這里只是最常用也最容易忽略的一部分。在 UI 控件的設(shè)計和使用上，這么些年已經(jīng)逐步地完善成為了一套成型的「設(shè)計禮儀」，在設(shè)計的時候需要多加注意。
本文題目：一個UI按鈕的自我修養(yǎng)
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/djjhijs.html
