01. 按鈕設(shè)計強弱表現(xiàn)
在整個產(chǎn)品設(shè)計中我們要根據(jù)信息傳遞的優(yōu)先級對按鈕設(shè)計進(jìn)行主次區(qū)分,設(shè)計表達(dá)要有強弱差異。按鈕設(shè)計可以通過大小、填充、描邊、色相、飽和度等的不同來進(jìn)行強弱差異,不同強弱的差異表現(xiàn)出按鈕的等級:行動觸發(fā)、主要、次要、輔助、禁用等。
02. 圓角設(shè)置要合理
對于按鈕邊框來說,我們通常采用全圓角和小圓角居多,這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用,只是相對較少,會顯得按鈕不方不圓的,設(shè)計表現(xiàn)顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半,而小圓角的圓角值我們通常控制在 1/4H(高度值的四分之一)以內(nèi)(僅為個人參考,并非絕對值)。
03. 投影設(shè)置要用對色彩關(guān)系
給一個有彩色系按鈕設(shè)置投影時,選擇無彩色系(比如黑色)也能達(dá)到效果,只是為了得到更好的視覺效果,提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色,這樣得到的效果會顯得更加干凈清爽。
04. 投影的使用勿過度泛濫
雖然投影的運用可以使按鈕更有層次感,但是也需要根據(jù)具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度,使得按鈕配色環(huán)境顯得不夠干凈清爽。
05. 給按鈕文字一點呼吸感
按鈕文字和邊框的設(shè)計要預(yù)留一定的留白,不要做“舍不得”的設(shè)計,使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗,看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個比例關(guān)系運用到按鈕設(shè)計中,也許會讓你的設(shè)計顯得更加成熟穩(wěn)重。
06. 按鈕設(shè)計別讓用戶思考
按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作,而不是讓用戶對其產(chǎn)生困惑。按鈕設(shè)計別讓用戶思考這是啥,是否可以點擊,需要簡潔明了的對此操作進(jìn)行指引。用戶已經(jīng)養(yǎng)成對按鈕外觀和功能的行為習(xí)慣,如果你設(shè)計的按鈕樣式與“標(biāo)準(zhǔn)”差異太大,用戶就會產(chǎn)生疑惑,影響使用體驗。
07. 樣式表達(dá)的一致性
當(dāng)設(shè)計元素規(guī)范統(tǒng)一時,用戶操作過程中的理解成本最低,一致性也因此成為最有力的可用性原則之一。我們在設(shè)計按鈕的時候要注意樣式表達(dá)的一致性,比如:按鈕形狀、色彩定義、風(fēng)格特征等,這樣會使得我們的設(shè)計可用性更強。
08. 箭頭運用不是字符輸入
一些初入職場的設(shè)計師會偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭,這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來進(jìn)行設(shè)計,控制好箭頭的粗細(xì)和文字筆畫的粗細(xì)值接近,這樣顯得更有細(xì)節(jié)和態(tài)度。
09. 按鈕設(shè)計主次分明
通過信息對比才能形成主次之分,按鈕設(shè)計需要在風(fēng)格上進(jìn)行區(qū)分,達(dá)到層次結(jié)構(gòu)的視覺提示。主要的按鈕需要和次要的、輔助的形成差異,最大化突出主按鈕的視覺效果,更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。
10. 按鈕設(shè)計不要讓用戶誤解
在整個項目設(shè)計規(guī)范中,我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后,不要在其它場景運用其樣式特征或者類似的風(fēng)格特征,這樣會讓用戶產(chǎn)生錯誤的認(rèn)知,因而進(jìn)行無用的操作。
11. 按鈕文本表達(dá)要言簡意賅
在進(jìn)行按鈕文本思考的時候,盡量減少字符和單詞的數(shù)量,內(nèi)容表達(dá)言簡意賅,只要能夠準(zhǔn)確傳達(dá)信息識別度即可。有時候也不一定需要文本,圖標(biāo)可以傳遞的信息可以考慮文本的減少,也許可以讓界面的呼吸感更強。
12. 按鈕文本設(shè)置切勿換行
單行文字的可讀性更高,如果出現(xiàn)換行就會降低可讀性。我們在設(shè)計按鈕的時候,確保文本內(nèi)容在一行之內(nèi)顯示,如果設(shè)計空間不足要考慮文本內(nèi)容的精簡。
13. 特殊場景要靈活轉(zhuǎn)變
底部按鈕的運用并非固定不變,不同機型或者特殊場景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機型,由于底部需要預(yù)留主頁控制器的位置,所以在設(shè)計按鈕的時候需要考慮上中下的過渡銜接,這樣才能帶給用戶更好的感官體驗。
14. 按鈕大小要便于點擊
按鈕需要方便用戶進(jìn)行點擊操作,如果用戶點擊失敗或者誤點到周邊元素,就會帶給用戶不友好的體驗。若是帶有文本的按鈕,只要文字大小不要小于極限值,通常實現(xiàn)出來的按鈕交互熱區(qū)都會滿足點擊需求。
如果是純 icon 的按鈕,除了按鈕大小需要控制合適以外,也要確保交互熱區(qū)能夠滿足點擊區(qū)域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內(nèi)的按鈕設(shè)計,我們可以通過按鈕的強弱來體現(xiàn)層級關(guān)系,不要讓按鈕大小不一,這樣視覺平衡會受到影響。
16. 按鈕設(shè)計考慮文本最大值
稍微注意細(xì)節(jié)的設(shè)計師也不會讓文本的長度超過按鈕寬度,這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的,幾個字即可表達(dá)的意思卻使用了過多修飾詞。在進(jìn)行按鈕文本思考的時候,要根據(jù)最佳的視覺效果設(shè)定一個最大值,不要任其無限制發(fā)揮,這樣會使得最終的視覺效果大打折扣,甚至影響用戶感官體驗。
17. 保持按鈕可讀性
按鈕設(shè)計需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。現(xiàn)在很多產(chǎn)品都適配了深色主題模式,按鈕的配色不能只考慮白色或者淺色背景下的運用,需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時候,始終保持按鈕與背景的高對比度和可讀性。
18. 按鈕去文本是否合理
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識別性和準(zhǔn)確性,雖然純圖標(biāo)顯得設(shè)計簡潔大方,但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義,不會讓用戶出現(xiàn)誤解或者錯誤的認(rèn)知。所以,按鈕去文本需要根據(jù)文案代表的含義來判斷,如果不需要輔助解釋也能判斷出按鈕的意思,那么更為簡潔的設(shè)計表達(dá)效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設(shè)計中是最直觀的體現(xiàn),不同的顏色會傳遞不同的性格,帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮,需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色,遇到一些需要差異化的按鈕會選擇輔助色來表達(dá),紅色或者橙色多為行動刺激作用,不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性,需要酌情選擇。
20. 按鈕位置結(jié)合用戶體驗
引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊,根據(jù)操作系統(tǒng)的不同也引起了設(shè)計師們的爭議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊,而蘋果系統(tǒng)卻選擇了放在右邊,用戶運用系統(tǒng)的習(xí)慣會影響其行為的適應(yīng)度。不過要是在移動端個人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊,更有利于用戶點擊(特殊人群這里需要除外)。
有時候為了防止用戶誤操作,我們會將確認(rèn)操作的按鈕放在左邊,通過助力設(shè)計讓用戶再次確認(rèn)。所以,一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣,另一方面也要結(jié)合用戶習(xí)慣,將按鈕放在最合適的位置,便于用戶操作。
小結(jié)
作為設(shè)計師來說,對每一個細(xì)小的元素進(jìn)行深入思考和總結(jié),才能讓我們設(shè)計出更好的解決方案。一枚小小的按鈕設(shè)計,其背后也有很多需要探索的東西,本文為大家總結(jié)了 20 條經(jīng)驗,相信還有更多值得梳理的細(xì)節(jié),期待更多設(shè)計伙伴去挖掘。
作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(m.axecq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計的小編 http://m.axecq.cn