2014-10-29 用心設計
藍藍設計( www.jghy.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
現(xiàn)在很容易就能找到很多好心人免費分享的“UI類PSD模板“（其中當然也少不了Apple風格的按鈕）。但在你使用它們之前，你是否考慮過這些按鈕設計素材是否與你自己的設計風格相匹配呢？你是否想過自己也可以做出不同尋常的按鈕設計？
利 用別人提供的免費按鈕并沒錯，但如果能花一點時間和心思去認真思索一下按鈕設計（無論是自己的還是別人的）的一些細節(jié)問題，不是更好嗎？這些按鈕是如何設 計出的？它們與互動界面/整體風格/目標品牌匹配嗎？有無可能再加入一些獨特的新元素？我設計的按鈕有突出位置嗎？我需要把按鈕分為不同級別嗎？這些按鈕 之間有很強的對比性嗎？它們在外觀上搶眼嗎？（搶眼一點沒關(guān)系，誰不想設計出看起來很酷的東西 呢？）
下面的這十條建議，也是我自己在設計按鈕時始終會考慮的方面。在這里我并不想教大家如何在Photoshop中使用，只想提供一些簡單實用的建議，以便大家在按鈕設計和UI設計方面能做出最優(yōu)化的選擇。
1. 匹配品牌
按 鈕設計非常重要的一點就是與它的使用環(huán)境相匹配。這意味著你的按鈕也許需要選擇特定的色彩，形狀或從目標品牌的設計理念及l(fā)ogo中汲取靈感。你需要以目 標品牌為依據(jù)來決定按鈕的形狀，材質(zhì)和風格。例如，如果目標品牌的logo是圓形的，你或許也可以在你的按鈕中體現(xiàn)出這一點。
如果一個界面的色彩非常淡雅，那么在其中使用大而華麗的蘋果風格的按鈕或許就不是很合適。如果可能的話，按鈕設計中可以嘗試不同的圖形，，顏色或其他元素，但一定要以彰顯品牌為中心原則。
2. 匹配風格
這 其實在上面已經(jīng)說過了：在使用網(wǎng)上的“UI類PSD素材”之前最好先想一想。使用別人預設好的素材固然可以節(jié)省不少時間，但它們是否就適用于你的設計呢？ 按鈕設計不僅應該與目標品牌匹配，還應該與它的界面環(huán)境在風格上保持一致，你的素材符合這個要求嗎？還要注意，你使用的按鈕是否太“按鈕化”了？
在移動設備或移動應用程序當中，按鈕做得顯著一點是有必要的，但在網(wǎng)站設計中，按鈕在外觀上還可以有不同的選擇。
3. 突出對比度
現(xiàn) 在許多界面的設計，尤其是網(wǎng)上的UI素材都極力模仿蘋果的OS風格，在這種情況下，按鈕設計的重要性便被有意無意地忽視了，按鈕的力量也因此而無法發(fā)揮。 這就需要設計師利用色彩，形狀，負空間，字體等不同元素，賦予按鈕獨特的視覺效果，使它們能與界面中的其他元素清晰地區(qū)別開來。
4. 使用圓形或不規(guī)則圖形
前面也說過，如果一個界面中有很多圓形的UI元素，你也不妨在按鈕設計中采用類似的設計，當然，也可以對形狀做相應的調(diào)整。這樣可以讓按鈕與界面形成一定的對比度，充分彰顯按鈕自身的獨特性。
5. 削弱次要的UI元素
如果你使用的是模仿蘋果OS風格的素材或網(wǎng)上預先設定好的PSD模板，那么其中的UI元素很可能都是角度圓滑的長方形。針對這種情況，你可以適當削弱這些元素的設計效果，讓他們看起來不那么“按鈕化”。
例如，下拉式選擇菜單，自定義菜單和控件選項等元素在外觀上可能都是圓角長方形，但你可以利用減弱陰影，淡化邊緣，統(tǒng)一形狀和色調(diào)等手段來削弱它們的顯示效果，以便突出按鈕的風格。
6. 色彩與描邊/邊緣保持一致
我 們見到的大多數(shù)按鈕都或多或少地使用了邊緣/描邊效果。一般說來，如果你設計的按鈕比背景色更暗，那么應使用暗色的邊緣效果，其色彩要與按鈕的顏色一致。 如果是相反的情形，那么應使用與背景色一致，但略微偏暗的色調(diào)作為按鈕的邊緣。如果你用第一種處理方式來處理較暗的背景，那么按鈕效果很可能給人一種“有 點臟”的感覺。我覺得這條規(guī)律也適用于其他與描邊/邊緣相關(guān)的網(wǎng)頁元素的設計。
7. 慎用模糊陰影
在 這么多年的設計生涯中我始終堅持自己制定的“陰影法則”。這個“陰影法則”的內(nèi)容是：當某個元素的色調(diào)比背景更淡時，使用陰影有最佳效果。相反，當某個元 素的色調(diào)比背景色還要暗時，使用陰影效果就應該十分慎重。像我前面講到的按鈕與邊緣色彩的匹配原則，我認為這一“陰影法則”也適用于其他UI元素的設計。
8. 小圖標 大不同
為了把按鈕與其他形狀接近的UI元素區(qū)分開來，像“指示箭頭”這樣簡潔微小的圖標往往發(fā)揮意想不到的作用。
例如，一個指向右邊的箭頭圖標可能會讓用戶覺得，點擊它會離開頁面或打開一個新頁面。而一個指向下方的箭頭則可能會給用戶這樣的信息，就是點擊它可以打開一個下拉菜單或查看隱藏的內(nèi)容。
9. 讓按鈕主次分明
如果你設計的界面需要展示很多選項和功能，那么使用不同的視覺效果為按鈕劃分級別就顯得尤為必要。
對最重要的按鈕應使用最強烈，最鮮艷的色彩，對其他的按鈕應按重要程度次第削弱色彩效果。在其它方面也一樣，對于二級，三級按鈕，應該在大小，負空間，字號和等方面做相應調(diào)整。
10. 歡迎反饋
這 個似乎無需多說，但卻是在按鈕設計接近收尾階段必須考慮的事項。一定要知道用戶實際使用按鈕的體驗如何，這是按鈕設計中非常核心的一點。在現(xiàn)實中，用戶使 用按鈕的環(huán)境各不相同，但什么樣的按鈕才更易于被用戶認可和接受，一定是有模式可循的。有時候，只是簡單地在CSS中對陰影，邊緣，色彩和其他元素做一下 微調(diào)，就能為用戶帶來完全不同的體驗！
via:shijue.me
創(chuàng)意 · 設計 · 靈感 · 資訊