• <acronym id="danlv"><form id="danlv"></form></acronym>
  • <dd id="danlv"><rt id="danlv"></rt></dd>
      <var id="danlv"><rt id="danlv"><big id="danlv"></big></rt></var>
      1. <code id="danlv"><ol id="danlv"></ol></code>
        <var id="danlv"><rt id="danlv"></rt></var>
          1. <code id="danlv"></code>
            返回首頁

            色彩搭配原理與技巧:界面設計配色三招(下)

            時間:2016-05-23 20:40來源:知行網www.n1979.com 編輯:麥田守望者

            色彩搭配原理與技巧第三刀:從對比色中找輔助色

              通常大家覺得只要色彩面積最多就是主色。其實不然,人們的閱讀心理是有差異的,如果顏色飽和度較低容易被相對面積少的高飽和度顏色搶眼,所以在定義界面主色的時候要懸著飽和度(純度)高的顏色作為主色會比較的穩定。
             
              在界面設計匯總使用互補色彩的對比是最為強烈的。這種色彩能使用戶的視覺產生強烈的刺激,情感濃烈,給人留下鮮明的印象。這種方式是最易于傳播的。適合在夸張的、張揚的場景下使用。但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。給人一種不安定的感覺。那么在使用這樣的搭配方式時需要控制使用的位置和信息的面積了,核心的地方可以這樣去使用。
             
              主要的三對互補色:紅綠、藍橙、黃紫
             
              我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色:番茄快點、QQ空間、相機360
            界面設計顏色搭配 
            色彩搭配原理與技巧
             
            UI教程
             
              色彩中還會運用到冷暖對比:冷暖對比色是自然平衡的規律,可以在設計中大量使用,這樣的配色會使作品非常的出彩,不顯單調。
            UI設計 
              我們先看看一下幾款APP的icon設計:

               下面這款APP的名稱叫KOI,很喜歡這款應用配色,運用到了冷暖配色,起了非常好的點綴效果,看起來靈動而醒目。
            APP的名稱叫KOI
             
              Tweetbot的icon也用到了冷暖顏色的對比,是不是醒目又可愛啊,大家可以去試試這種搭配,百試百靈。
             
              Seedling Comic Studio,這款icon運用到了冷暖搭配顯得由為的精彩,視線里面集中到了中心點上。
            Seedling Comic Studio 
              在設計中,冷色與暖色的對比是界面設計中最為廣泛的使用方法,效果也非常的出眾。
             
              色彩好比就是陰陽太極,冷與暖的兩級平衡還原了生活中的和諧。用這樣的配色效果讓用戶感覺舒服平和。

              冷暖色彩搭配的方法基本沒有啥缺點,使用在設計中,技巧性比較多,對設計的細膩感受要求比較高。

              雖然支付寶的主圖標發生了改變,變成了簡潔的藍色支付寶,但主頁面中還是利用到了冷色與暖色的搭配,很好的區分了分類,并且讓頁面中豐富的分類變得不是那么得零散。很多設計師每次碰到滿版分類圖標的時候很頭大,處理的時候容易把頁面搞花了,建議使用冷暖的方式去調整,將頁面平衡好。
            支付寶的主圖標
             
               當時米醋哥在設計360防丟器的時候就用了兩個色,紅色和藍色的冷暖搭配。將360字體樣式融入到建筑中取用了暖紅色,而尋找位置的大頭針運用了冷藍色。
             
              好了,先寫到這里。回顧一下今天我們講的知識點。
             
              1.色不過三
              2.主色的定義,及面積
              3.找輔助色,還記的有那幾對輔助色嗎?

              今天和大家分享的這不僅是運用在界面中,更是選擇顏色時至為重要的三個點!實用性極高!看似簡單,大家運用起來還要多加分析哦~
            ------分隔線----------------------------
            標簽(Tag):色彩搭配原理 色彩搭配技巧 界面設計配色
            ------分隔線----------------------------
            推薦內容
            猜你感興趣
            日韩在线av免费视久久