網(wǎng)站建設(shè)中把按鈕設(shè)計(jì)做到最好的建議發(fā)布者：本站 時(shí)間：2021-02-04 11:02:55
01. 按鈕設(shè)計(jì)強(qiáng)弱表現(xiàn)
在整個(gè)產(chǎn)品網(wǎng)站建設(shè)過程中設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級對按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異。按鈕設(shè)計(jì)可以通過大小、填充、描邊、色相、飽和度等的不同來進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級：行動觸發(fā)、主要、次要、輔助、禁用等。
02. 圓角設(shè)置要合理
對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對較少，會顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內(nèi)（僅為個(gè)人參考，并非絕對值）。
03. 投影設(shè)置要用對色彩關(guān)系
給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺效果，提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會顯得更加干凈清爽。
04. 投影的使用勿過度泛濫
雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
05. 給按鈕文字一點(diǎn)呼吸感
按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn)，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，也許會讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。
06. 按鈕設(shè)計(jì)別讓用戶思考
按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作，而不是讓用戶對其產(chǎn)生困惑。按鈕設(shè)計(jì)別讓用戶思考這是啥，是否可以點(diǎn)擊，需要簡潔明了的對此操作進(jìn)行指引。用戶已經(jīng)養(yǎng)成對按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會產(chǎn)生疑惑，影響使用體驗(yàn)。
07. 樣式表達(dá)的一致性
當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們在設(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會使得我們的設(shè)計(jì)可用性更強(qiáng)。
08. 箭頭運(yùn)用不是字符輸入
一些初入職場的設(shè)計(jì)師會偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。
09. 按鈕設(shè)計(jì)主次分明
通過信息對比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。
10. 按鈕設(shè)計(jì)不要讓用戶誤解
在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后，不要在其它場景運(yùn)用其樣式特征或者類似的風(fēng)格特征，這樣會讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無用的操作。
11. 按鈕文本表達(dá)要言簡意賅
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡意賅，只要能夠準(zhǔn)確傳達(dá)信息識別度即可。有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強(qiáng)。
12. 按鈕文本設(shè)置切勿換行
單行文字的可讀性更高，如果出現(xiàn)換行就會降低可讀性。我們在設(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示，如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡。
13. 特殊場景要靈活轉(zhuǎn)變
底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機(jī)型，由于底部需要預(yù)留主頁控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗(yàn)。
14. 按鈕大小要便于點(diǎn)擊
按鈕需要方便用戶進(jìn)行點(diǎn)擊操作，如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來的按鈕交互熱區(qū)都會滿足點(diǎn)擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)