淺談網(wǎng)頁按鈕設計的十條基本準則發(fā)布者：本站     時間：2021-12-24 11:12:06

設計按鈕的方法有很多，但是基本準則卻只有那么幾種。你在瀏覽一些圖庫的時候會發(fā)現(xiàn)，大多數(shù)按鈕的設計大同小異，只有少數(shù)那么幾個做到了仔細推敲、反復打磨的用心。

不管用什么工具，首先，我們要了解按鈕這一元素的基本。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

正文開始前呢，優(yōu)設哥送您一個非常不錯的網(wǎng)站，國外的知名資源站點–按鈕之家。顧名思義，全是與按鈕有關(guān)的設計資源喲。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

網(wǎng)上是不是充斥著一些”UI套件打包下載”?而且是免費的?但是即便下載也沒多大用，這些套件用來研究學習效果更佳，如果直接拿來就用，效果便不是很好，因為你沒有考慮到上下文的關(guān)系!沒有考慮到按鈕是否和內(nèi)容相符!也沒有考慮到按鈕的布局與頁面的整體布局是否匹配，是否符合一致性!

因此，與其拿來主義，不如花點時間坐下來思考，什么才是適合你設計的按鈕。應該怎樣設計?按鈕應該怎樣與整個界面、上下文、品牌相匹配?能否打造獨一無二的效果?我還需要主要、次要、第三重要的按鈕嗎?那么他們應該怎樣彼此區(qū)分?

這里有十條基本準則，每當我設計按鈕的時候就會考慮到這幾點，我不會貼出我的圖層樣式，但不要總以為這是空泛說教，好的設計師對于設計的理解是超越PS，超越套件的，因為他有自己的設計思維。

1.要與品牌相符

按鈕要和品牌一致，顏色、視覺風格要和Logo差不太多。你可以從Logo中借鑒形狀、材質(zhì)、風格等等。如果Logo是圓形的，那么按鈕也可以試試圓形以及其他能夠引起行為召喚的形狀。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

形狀、色彩、材質(zhì)、圖案、字體，都能影響到用戶瀏覽的體驗。

如果一款界面扁平化色彩占主導，那么盡量不要使用擬物風格的按鈕。當然，如果你基本功過關(guān)，可以試試進行風格混合，色彩、形狀、效果、各種裝飾手段都可以試一試。

2. 要與上下文內(nèi)容相符

跟上一條其實差不多，快別再用”套件PSD”了，雖然它們看起來效果很棒，但那是別人的設計，放在你的界面中可能有點”驢唇不對馬嘴”了!要記住，界面中”內(nèi)容為王”，可不是”為了按鈕漂亮而進行設計”!

3. 確保按鈕用于足夠的對照

很多界面設計深受蘋果影響，很多UI套件一看便知，按鈕在其中可能會顯得不甚顯眼。補救措施是利用色彩、大小、留白、字體來提高按鈕的視覺表現(xiàn)力，從而引導用戶交互。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

重要的按鈕需要做出強調(diào)

4. 可以考慮圓角或者直角的按鈕

如果界面元素中很多都是圓角的，那么按鈕不妨做成直角的，這樣對照感就會很強烈，能夠引起行為召喚。

5. 次要的UI元素可稍微削弱

一些次要的UI元素或者按鈕可以通過減少裝飾性的方式進行削弱，以突出主要按鈕。

更少的陰影效果，更不明顯的斜面和見面，這樣就能突出主要元素了。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

削弱其他UI元素=突出主要元素(超級按鈕)

6. 按鈕的邊框

我們看到的大多數(shù)按鈕都有邊框。如果你的按鈕比背景顏色深，那么使用深色邊框會顯得非常好看/可愛，無邊框效果也不錯。如果按鈕比背景顏色淺，那么無邊框會顯得特別雜亂，唯有使用深色的邊框才能讓按鈕看起來”精神飽滿”。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

深色背景：有邊框=優(yōu)美 沒邊框=優(yōu)美

淺色背景：有邊框(深色)=優(yōu)美 沒邊框=雜亂

7. 要謹慎對待模糊的陰影

我個人有一條”陰影定律”，講的是：當元素比背景顏色淺的時候，投影效果最佳，元素比背景顏色深的時候，那么陰影要慎重使用。

這跟邊框有點像。這條定律很好用，其他UI元素也適用。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

模糊的陰影在淺色背景下效果較好，深色背景下陰影效果都不錯。

8. 多利用符號/圖標

就比如說箭頭，絕對要比文字的描述更直觀。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

箭頭朝右，可能意味著離開此頁。箭頭朝下，可能意味著打開下面的內(nèi)容，或者打開下面的菜單。

9. 分清主、次、第三重要

如果你的界面功能點很多，那么就很有必要設計一套主要、次要、第三重要的按鈕。

主要按鈕視覺表現(xiàn)力最強，次要稍弱，第三重要按鈕比次要還要差一點?？梢孕薷倪@些樣式：顏色、陰影、大小、留白、裝飾手段等等。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

10. 按鈕一定要有反饋狀態(tài)

這一點很容易被忽略，那就是按鈕在操作中一定要有反饋，讓用戶明白發(fā)生了什么。因為用戶會按照真實生活建立認知模型，如果你的按鈕反應不似真實用戶，用戶會感到失落。

通過一些簡單的CSS調(diào)整，諸如陰影，邊框、漸變便能實現(xiàn)反饋效果。

淺談網(wǎng)頁按鈕設計的十條基本準則,PS教程,

默認狀態(tài)、懸停狀態(tài)、點擊狀態(tài)、忙碌狀態(tài)、失效狀態(tài)

結(jié)論

別光會點頭說，嗯，說的不錯，自己琢磨出來的道理才有效。

最后想說的是：使用UI套件是不錯，確實節(jié)省時間，但是一味使用跟死記硬背是一個道理，讓你的設計”活”一點兒，別離開了套件便不會設計。