藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://mp.weixin.qq.com/s?__biz=MjM5NTgwNDc4MA==&mid=201762189&idx=2&sn=d9eb120fd1e188ecc0f6e36cbd7852e1#rd

現(xiàn)在很容易就能找到很多好心人免費(fèi)分享的“UI類(lèi)PSD模板“（其中當(dāng)然也少不了Apple風(fēng)格的按鈕）。但在你使用它們之前，你是否考慮過(guò)這些按鈕設(shè)計(jì)素材是否與你自己的設(shè)計(jì)風(fēng)格相匹配呢？你是否想過(guò)自己也可以做出不同尋常的按鈕設(shè)計(jì)？

利 用別人提供的免費(fèi)按鈕并沒(méi)錯(cuò)，但如果能花一點(diǎn)時(shí)間和心思去認(rèn)真思索一下按鈕設(shè)計(jì)（無(wú)論是自己的還是別人的）的一些細(xì)節(jié)問(wèn)題，不是更好嗎？這些按鈕是如何設(shè) 計(jì)出的？它們與互動(dòng)界面/整體風(fēng)格/目標(biāo)品牌匹配嗎？有無(wú)可能再加入一些獨(dú)特的新元素？我設(shè)計(jì)的按鈕有突出位置嗎？我需要把按鈕分為不同級(jí)別嗎？這些按鈕 之間有很強(qiáng)的對(duì)比性嗎？它們?cè)谕庥^上搶眼嗎？（搶眼一點(diǎn)沒(méi)關(guān)系，誰(shuí)不想設(shè)計(jì)出看起來(lái)很酷的東西 呢？）

下面的這十條建議，也是我自己在設(shè)計(jì)按鈕時(shí)始終會(huì)考慮的方面。在這里我并不想教大家如何在Photoshop中使用，只想提供一些簡(jiǎn)單實(shí)用的建議，以便大家在按鈕設(shè)計(jì)和UI設(shè)計(jì)方面能做出最優(yōu)化的選擇。

1. 匹配品牌

按 鈕設(shè)計(jì)非常重要的一點(diǎn)就是與它的使用環(huán)境相匹配。這意味著你的按鈕也許需要選擇特定的色彩，形狀或從目標(biāo)品牌的設(shè)計(jì)理念及l(fā)ogo中汲取靈感。你需要以目 標(biāo)品牌為依據(jù)來(lái)決定按鈕的形狀，材質(zhì)和風(fēng)格。例如，如果目標(biāo)品牌的logo是圓形的，你或許也可以在你的按鈕中體現(xiàn)出這一點(diǎn)。

如果一個(gè)界面的色彩非常淡雅，那么在其中使用大而華麗的蘋(píng)果風(fēng)格的按鈕或許就不是很合適。如果可能的話，按鈕設(shè)計(jì)中可以嘗試不同的圖形，，顏色或其他元素，但一定要以彰顯品牌為中心原則。

2. 匹配風(fēng)格

這 其實(shí)在上面已經(jīng)說(shuō)過(guò)了：在使用網(wǎng)上的“UI類(lèi)PSD素材”之前最好先想一想。使用別人預(yù)設(shè)好的素材固然可以節(jié)省不少時(shí)間，但它們是否就適用于你的設(shè)計(jì)呢？ 按鈕設(shè)計(jì)不僅應(yīng)該與目標(biāo)品牌匹配，還應(yīng)該與它的界面環(huán)境在風(fēng)格上保持一致，你的素材符合這個(gè)要求嗎？還要注意，你使用的按鈕是否太“按鈕化”了？

在移動(dòng)設(shè)備或移動(dòng)應(yīng)用程序當(dāng)中，按鈕做得顯著一點(diǎn)是有必要的，但在網(wǎng)站設(shè)計(jì)中，按鈕在外觀上還可以有不同的選擇。

3. 突出對(duì)比度

現(xiàn) 在許多界面的設(shè)計(jì)，尤其是網(wǎng)上的UI素材都極力模仿蘋(píng)果的OS風(fēng)格，在這種情況下，按鈕設(shè)計(jì)的重要性便被有意無(wú)意地忽視了，按鈕的力量也因此而無(wú)法發(fā)揮。 這就需要設(shè)計(jì)師利用色彩，形狀，負(fù)空間，字體等不同元素，賦予按鈕獨(dú)特的視覺(jué)效果，使它們能與界面中的其他元素清晰地區(qū)別開(kāi)來(lái)。

4. 使用圓形或不規(guī)則圖形

前面也說(shuō)過(guò)，如果一個(gè)界面中有很多圓形的UI元素，你也不妨在按鈕設(shè)計(jì)中采用類(lèi)似的設(shè)計(jì)，當(dāng)然，也可以對(duì)形狀做相應(yīng)的調(diào)整。這樣可以讓按鈕與界面形成一定的對(duì)比度，充分彰顯按鈕自身的獨(dú)特性。

5. 削弱次要的UI元素

如果你使用的是模仿蘋(píng)果OS風(fēng)格的素材或網(wǎng)上預(yù)先設(shè)定好的PSD模板，那么其中的UI元素很可能都是角度圓滑的長(zhǎng)方形。針對(duì)這種情況，你可以適當(dāng)削弱這些元素的設(shè)計(jì)效果，讓他們看起來(lái)不那么“按鈕化”。

例如，下拉式選擇菜單，自定義菜單和控件選項(xiàng)等元素在外觀上可能都是圓角長(zhǎng)方形，但你可以利用減弱陰影，淡化邊緣，統(tǒng)一形狀和色調(diào)等手段來(lái)削弱它們的顯示效果，以便突出按鈕的風(fēng)格。

6. 色彩與描邊/邊緣保持一致

我 們見(jiàn)到的大多數(shù)按鈕都或多或少地使用了邊緣/描邊效果。一般說(shuō)來(lái)，如果你設(shè)計(jì)的按鈕比背景色更暗，那么應(yīng)使用暗色的邊緣效果，其色彩要與按鈕的顏色一致。 如果是相反的情形，那么應(yīng)使用與背景色一致，但略微偏暗的色調(diào)作為按鈕的邊緣。如果你用第一種處理方式來(lái)處理較暗的背景，那么按鈕效果很可能給人一種“有 點(diǎn)臟”的感覺(jué)。我覺(jué)得這條規(guī)律也適用于其他與描邊/邊緣相關(guān)的網(wǎng)頁(yè)元素的設(shè)計(jì)。

7. 慎用模糊陰影

在 這么多年的設(shè)計(jì)生涯中我始終堅(jiān)持自己制定的“陰影法則”。這個(gè)“陰影法則”的內(nèi)容是：當(dāng)某個(gè)元素的色調(diào)比背景更淡時(shí)，使用陰影有最佳效果。相反，當(dāng)某個(gè)元 素的色調(diào)比背景色還要暗時(shí)，使用陰影效果就應(yīng)該十分慎重。像我前面講到的按鈕與邊緣色彩的匹配原則，我認(rèn)為這一“陰影法則”也適用于其他UI元素的設(shè)計(jì)。

8. 小圖標(biāo) 大不同

為了把按鈕與其他形狀接近的UI元素區(qū)分開(kāi)來(lái)，像“指示箭頭”這樣簡(jiǎn)潔微小的圖標(biāo)往往發(fā)揮意想不到的作用。

例如，一個(gè)指向右邊的箭頭圖標(biāo)可能會(huì)讓用戶(hù)覺(jué)得，點(diǎn)擊它會(huì)離開(kāi)頁(yè)面或打開(kāi)一個(gè)新頁(yè)面。而一個(gè)指向下方的箭頭則可能會(huì)給用戶(hù)這樣的信息，就是點(diǎn)擊它可以打開(kāi)一個(gè)下拉菜單或查看隱藏的內(nèi)容。

9. 讓按鈕主次分明

如果你設(shè)計(jì)的界面需要展示很多選項(xiàng)和功能，那么使用不同的視覺(jué)效果為按鈕劃分級(jí)別就顯得尤為必要。

對(duì)最重要的按鈕應(yīng)使用最強(qiáng)烈，最鮮艷的色彩，對(duì)其他的按鈕應(yīng)按重要程度次第削弱色彩效果。在其它方面也一樣，對(duì)于二級(jí)，三級(jí)按鈕，應(yīng)該在大小，負(fù)空間，字號(hào)和等方面做相應(yīng)調(diào)整。

10. 歡迎反饋

這 個(gè)似乎無(wú)需多說(shuō)，但卻是在按鈕設(shè)計(jì)接近收尾階段必須考慮的事項(xiàng)。一定要知道用戶(hù)實(shí)際使用按鈕的體驗(yàn)如何，這是按鈕設(shè)計(jì)中非常核心的一點(diǎn)。在現(xiàn)實(shí)中，用戶(hù)使 用按鈕的環(huán)境各不相同，但什么樣的按鈕才更易于被用戶(hù)認(rèn)可和接受，一定是有模式可循的。有時(shí)候，只是簡(jiǎn)單地在CSS中對(duì)陰影，邊緣，色彩和其他元素做一下 微調(diào)，就能為用戶(hù)帶來(lái)完全不同的體驗(yàn)！

via:shijue.me

創(chuàng)意 · 設(shè)計(jì) · 靈感 · 資訊