<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 【圖 文】讓按鈕更迷人的十種方法

    2014-10-29    用心設計

    藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

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

    現在很容易就能找到很多好心人免費分享的“UI類PSD模板“(其中當然也少不了Apple風格的按鈕)。但在你使用它們之前,你是否考慮過這些按鈕設計素材是否與你自己的設計風格相匹配呢?你是否想過自己也可以做出不同尋常的按鈕設計?



    利 用別人提供的免費按鈕并沒錯,但如果能花一點時間和心思去認真思索一下按鈕設計(無論是自己的還是別人的)的一些細節問題,不是更好嗎?這些按鈕是如何設 計出的?它們與互動界面/整體風格/目標品牌匹配嗎?有無可能再加入一些獨特的新元素?我設計的按鈕有突出位置嗎?我需要把按鈕分為不同級別嗎?這些按鈕 之間有很強的對比性嗎?它們在外觀上搶眼嗎?(搶眼一點沒關系,誰不想設計出看起來很酷的東西 呢?)


    下面的這十條建議,也是我自己在設計按鈕時始終會考慮的方面。在這里我并不想教大家如何在Photoshop中使用,只想提供一些簡單實用的建議,以便大家在按鈕設計和UI設計方面能做出最優化的選擇。



    1. 匹配品牌


    按 鈕設計非常重要的一點就是與它的使用環境相匹配。這意味著你的按鈕也許需要選擇特定的色彩,形狀或從目標品牌的設計理念及logo中汲取靈感。你需要以目 標品牌為依據來決定按鈕的形狀,材質和風格。例如,如果目標品牌的logo是圓形的,你或許也可以在你的按鈕中體現出這一點。

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



    2. 匹配風格


    這 其實在上面已經說過了:在使用網上的“UI類PSD素材”之前最好先想一想。使用別人預設好的素材固然可以節省不少時間,但它們是否就適用于你的設計呢? 按鈕設計不僅應該與目標品牌匹配,還應該與它的界面環境在風格上保持一致,你的素材符合這個要求嗎?還要注意,你使用的按鈕是否太“按鈕化”了?


    在移動設備或移動應用程序當中,按鈕做得顯著一點是有必要的,但在網站設計中,按鈕在外觀上還可以有不同的選擇。



    3. 突出對比度


    現 在許多界面的設計,尤其是網上的UI素材都極力模仿蘋果的OS風格,在這種情況下,按鈕設計的重要性便被有意無意地忽視了,按鈕的力量也因此而無法發揮。 這就需要設計師利用色彩,形狀,負空間,字體等不同元素,賦予按鈕獨特的視覺效果,使它們能與界面中的其他元素清晰地區別開來。



    4. 使用圓形或不規則圖形


    前面也說過,如果一個界面中有很多圓形的UI元素,你也不妨在按鈕設計中采用類似的設計,當然,也可以對形狀做相應的調整。這樣可以讓按鈕與界面形成一定的對比度,充分彰顯按鈕自身的獨特性。



    5. 削弱次要的UI元素


    如果你使用的是模仿蘋果OS風格的素材或網上預先設定好的PSD模板,那么其中的UI元素很可能都是角度圓滑的長方形。針對這種情況,你可以適當削弱這些元素的設計效果,讓他們看起來不那么“按鈕化”。

    例如,下拉式選擇菜單,自定義菜單和控件選項等元素在外觀上可能都是圓角長方形,但你可以利用減弱陰影,淡化邊緣,統一形狀和色調等手段來削弱它們的顯示效果,以便突出按鈕的風格。



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


    我 們見到的大多數按鈕都或多或少地使用了邊緣/描邊效果。一般說來,如果你設計的按鈕比背景色更暗,那么應使用暗色的邊緣效果,其色彩要與按鈕的顏色一致。 如果是相反的情形,那么應使用與背景色一致,但略微偏暗的色調作為按鈕的邊緣。如果你用第一種處理方式來處理較暗的背景,那么按鈕效果很可能給人一種“有 點臟”的感覺。我覺得這條規律也適用于其他與描邊/邊緣相關的網頁元素的設計。



    7. 慎用模糊陰影


    在 這么多年的設計生涯中我始終堅持自己制定的“陰影法則”。這個“陰影法則”的內容是:當某個元素的色調比背景更淡時,使用陰影有最佳效果。相反,當某個元 素的色調比背景色還要暗時,使用陰影效果就應該十分慎重。像我前面講到的按鈕與邊緣色彩的匹配原則,我認為這一“陰影法則”也適用于其他UI元素的設計。



    8. 小圖標 大不同


    為了把按鈕與其他形狀接近的UI元素區分開來,像“指示箭頭”這樣簡潔微小的圖標往往發揮意想不到的作用。

    例如,一個指向右邊的箭頭圖標可能會讓用戶覺得,點擊它會離開頁面或打開一個新頁面。而一個指向下方的箭頭則可能會給用戶這樣的信息,就是點擊它可以打開一個下拉菜單或查看隱藏的內容。



    9. 讓按鈕主次分明


    如果你設計的界面需要展示很多選項和功能,那么使用不同的視覺效果為按鈕劃分級別就顯得尤為必要。

    對最重要的按鈕應使用最強烈,最鮮艷的色彩,對其他的按鈕應按重要程度次第削弱色彩效果。在其它方面也一樣,對于二級,三級按鈕,應該在大小,負空間,字號和等方面做相應調整。



    10. 歡迎反饋


    這 個似乎無需多說,但卻是在按鈕設計接近收尾階段必須考慮的事項。一定要知道用戶實際使用按鈕的體驗如何,這是按鈕設計中非常核心的一點。在現實中,用戶使 用按鈕的環境各不相同,但什么樣的按鈕才更易于被用戶認可和接受,一定是有模式可循的。有時候,只是簡單地在CSS中對陰影,邊緣,色彩和其他元素做一下 微調,就能為用戶帶來完全不同的體驗!

    via:shijue.me

    創意 · 設計 · 靈感 · 資訊 

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 中文字幕精品一区二区三区视频| 亚洲AV永久无码精品网站在线观看 | 欧美肥屁VIDEOSSEX精品| 久久久国产精品网站| 色欲精品国产一区二区三区AV | 久久99精品久久久久子伦| 国内精品久久久久久麻豆| 国产欧美国产精品第一区| 日韩精品久久久肉伦网站| 欧洲精品一区二区三区在线观看 | 思思99热在线观看精品| 一本色道久久88综合日韩精品| 国产精品免费AV片在线观看| 在线人成精品免费视频| 国产精品精品自在线拍| 亚洲国产精品无码久久98| 婷婷成人国产精品| 精品午夜福利1000在线观看| 韩国精品欧美一区二区三区| 国内精品伊人久久久久av一坑| 国产成人精品亚洲精品| 久久精品国产99国产精偷| 高清免费久久午夜精品| 成人区人妻精品一区二区不卡网站| 亚洲国产精品嫩草影院| 国产精品美脚玉足脚交欧美| 久久久无码精品亚洲日韩按摩 | 久久亚洲精品无码观看不卡| 久久精品国产福利国产秒| 国产福利在线观看精品| 国产精品日韩AV在线播放| 午夜不卡久久精品无码免费| 亚洲国产精品人人做人人爱| 亚洲国产小视频精品久久久三级| 四虎国产精品永久地址99| 久久96国产精品久久久| 2020久久精品国产免费| 国产精品电影在线观看| 精品视频一区二区三区免费| 国产一区二区精品| 欧美精品天天操|