網(wǎng)站建設中把按鈕設計做到最好的建議發(fā)布者：本站     時(shí)間：2021-02-04 11:02:55

01.  按鈕設計強弱表現 
在整個(gè)產(chǎn)品網(wǎng)站建設過(guò)程中設計中我們要根據信息傳遞的優(yōu)先級對按鈕設計進(jìn)行主次區分，設計表達要有強弱差異。按鈕設計可以通過(guò)大小、填充、描邊、色相、飽和度等的不同來(lái)進(jìn)行強弱差異，不同強弱的差異表現出按鈕的等級：行動(dòng)觸發(fā)、主要、次要、輔助、禁用等。


02.  圓角設置要合理 
對于按鈕邊框來(lái)說(shuō)，我們通常采用全圓角和小圓角居多，這樣顯得穩重大氣。而大圓角按鈕并非不可用，只是相對較少，會(huì )顯得按鈕不方不圓的，設計表現顯得不夠成熟。

全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以?xún)龋▋H為個(gè)人參考，并非絕對值）。

 
 03.  投影設置要用對色彩關(guān)系 
給一個(gè)有彩色系按鈕設置投影時(shí)，選擇無(wú)彩色系（比如黑色）也能達到效果，只是為了得到更好的視覺(jué)效果，提高用戶(hù)感官體驗。我們也可以嘗試基于按鈕本身色相來(lái)確定投影顏色，這樣得到的效果會(huì )顯得更加干凈清爽。


 04.  投影的使用勿過(guò)度泛濫 
雖然投影的運用可以使按鈕更有層次感，但是也需要根據具體情況慎用。比如對于一些淺色按鈕來(lái)說(shuō)也許投影反而會(huì )降低按鈕的識別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。


 05.  給按鈕文字一點(diǎn)呼吸感 
按鈕文字和邊框的設計要預留一定的留白，不要做“舍不得”的設計，使得按鈕給人感覺(jué)很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經(jīng)驗，看看文字大小和負空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運用到按鈕設計中，也許會(huì )讓你的設計顯得更加成熟穩重。


06.  按鈕設計別讓用戶(hù)思考 
按鈕的存在是為了引導用戶(hù)進(jìn)行引導式操作，而不是讓用戶(hù)對其產(chǎn)生困惑。按鈕設計別讓用戶(hù)思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對此操作進(jìn)行指引。用戶(hù)已經(jīng)養成對按鈕外觀(guān)和功能的行為習慣，如果你設計的按鈕樣式與“標準”差異太大，用戶(hù)就會(huì )產(chǎn)生疑惑，影響使用體驗。


 07.  樣式表達的一致性 
當設計元素規范統一時(shí)，用戶(hù)操作過(guò)程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們在設計按鈕的時(shí)候要注意樣式表達的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì )使得我們的設計可用性更強。


 08.  箭頭運用不是字符輸入 
一些初入職場(chǎng)的設計師會(huì )偷懶直接字符輸入形成按鈕內部所需箭頭，這樣的表達方式自然顯得粗糙些。箭頭要當成圖標來(lái)進(jìn)行設計，控制好箭頭的粗細和文字筆畫(huà)的粗細值接近，這樣顯得更有細節和態(tài)度。



09.  按鈕設計主次分明 
通過(guò)信息對比才能形成主次之分，按鈕設計需要在風(fēng)格上進(jìn)行區分，達到層次結構的視覺(jué)提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺(jué)效果，更好的引導用戶(hù)根據設定的軌跡進(jìn)行操作。



10.  按鈕設計不要讓用戶(hù)誤解 
在整個(gè)項目設計規范中，我們需要避免讓用戶(hù)把非按鈕狀態(tài)的內容進(jìn)行誤判。在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運用其樣式特征或者類(lèi)似的風(fēng)格特征，這樣會(huì )讓用戶(hù)產(chǎn)生錯誤的認知，因而進(jìn)行無(wú)用的操作。



11.  按鈕文本表達要言簡(jiǎn)意賅 
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數量，內容表達言簡(jiǎn)意賅，只要能夠準確傳達信息識別度即可。有時(shí)候也不一定需要文本，圖標可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強。



12.  按鈕文本設置切勿換行 
單行文字的可讀性更高，如果出現換行就會(huì )降低可讀性。我們在設計按鈕的時(shí)候，確保文本內容在一行之內顯示，如果設計空間不足要考慮文本內容的精簡(jiǎn)。



13.  特殊場(chǎng)景要靈活轉變 
底部按鈕的運用并非固定不變，不同機型或者特殊場(chǎng)景的考慮需要靈活轉變。比如 iPhone X 等類(lèi)型的機型，由于底部需要預留主頁(yè)控制器的位置，所以在設計按鈕的時(shí)候需要考慮上中下的過(guò)渡銜接，這樣才能帶給用戶(hù)更好的感官體驗。


14.  按鈕大小要便于點(diǎn)擊 
按鈕需要方便用戶(hù)進(jìn)行點(diǎn)擊操作，如果用戶(hù)點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì )帶給用戶(hù)不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現出來(lái)的按鈕交互熱區都會(huì )滿(mǎn)足點(diǎn)擊需求。

如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區能夠滿(mǎn)足點(diǎn)擊區域要求。