聯 系 人:李總
聯系電話:13759574266
在線 QQ:89417157
郵箱:13759574266@qq.com
微信號:ynlongtou
地址:昆明市滇緬大道旁昆建路5號108智庫空間A座4樓
本文分享一條教你怎樣避免在網頁設計中的第一次“試水”不要變得 “慘不忍睹”的安全配色指南。
1. 配色方案是畫布,不是畫
網頁設計中最基本的原則之一是,不管你花多長時間創造一個華麗的設計,其最終的角色都是這場秀中真正的明星——內容的襯托。網頁設計中不應該讓配色比內容展示更加“熱鬧”。你的設計應該是在后臺的,幫助將網站的內容推向前臺。
用Photoshop或者Sketch等軟件設計網站的時候,創建設計的過程往往是相互獨立的。有些設計單個看起來很不錯,也能被你的客戶所接受,但是當它真正被設計成網頁的時候,不適當的配色往往會分散訪客的注意力。事實上,網頁設計過程與內容是緊密聯系在一起的,但有許多高質量的網站設計卻幾乎空無內容。
這是一個好主意——將你希望出現在這個位置的內容樣例在設計軟件里或直接在代碼里先擺放出來,然后圍繞它做設計。尤其是在與特定風格的照片或圖像有關的時候,這樣你可以確保你的設計與它們搭配和諧。想象一下,你的網站內容是一個獨特的個體,你必須為它設計一個完美的配件。
2. 從簡單的灰度模式開始
你可以為你的主背景和文本從無數的色彩組合中進行挑選。然而,我的建議是先掌握最簡單的,白色或淺灰色背景搭配深灰色的文本。
如果你觀察流行的網站所選擇的模板或主題,你會發現它們中的大多數都是使用深灰色的文字搭配白色或淺灰背景,這是有充分的理由的。這種組合你基本保證了為訪客提供可讀性,并允許基于內容的文本和圖像進入前景。
一般來說,你應該避免使用純黑的文本,深灰色相對來說更易閱讀。一個相對舒適的范圍是#333333至#666666。
基于上述,在任何文本主體下,最保險的背景色是全白#FFFFFF。對于其他的背景元素,背景色的范圍可以從#FFFFFF至#CCCCCC.
再次聲明,這些并不是你必須使用的顏色準則,僅僅只是你可以開始安全設計的一些指南。
3. 只選擇一種強調色
配色方案出錯的最常見的地方就是顏色使用過多。你使用的顏色越多,你想要將它們都保持在控制中就越困難。所以一開始,在灰度基礎之上只添加一種額外的顏色來強調諸如鏈接、某些標題、菜單、按鈕等等元素是很有用的。你的強調色可以是藍色、綠色、紅色或其它任何你喜歡的顏色。
開始在你的基礎圖上拉一個強調色的矩形框,這樣你可以衡量顏色是否與頁面上所有的元素匹配。然后打開顏色選擇器,選擇在顏色面板右上角四分之一中心位置的顏色。
上下移動滑塊,選擇一個你認為適合你設計的顏色。
至此,你已經使用了三種基本顏色:你的背景色,文本色,以及一種強調色。將來你可以,也應該使用多個強調色,但是現在最好只是想一想。如今你已經使用三種顏色了,請熟悉這三種顏色,當你更自信的時候,你可以添加更多的顏色。
你已經學會了:
你學會了怎樣選擇“色相”。簡而言之,色相就是一種基本色。當你上下移動滑塊的時候你就會看到你的顏色選擇器中的“H”值在不斷變化。
“H”代表色相,一旦你選擇強調色,文本框中數值就是色相的值。
4. 如果有疑問,使用藍色
如果你對選擇什么強調色有任何疑問,請使用藍色。藍色通常是最靈活的顏色,適合多數的網站類型。紫色和黃色的顏色可以是很活潑的,但是如果使用不當的話,會變得很花哨。
另一方面,你可以在以藍色為強調色的基礎上隨意發揮,但你也不能走的太遠。如果你不知道從哪里開始學習或者在項目中使用什么顏色的時候,就用藍色就對了。如果你要選擇特別的藍色,你可以選擇深藍色(H值235)至淺綠色(H值190)的范圍以保證自己在安全的領地。
5. 為強調色添加變化
一旦你選定了強調色,將色相(H)滑條位置保持不變。你現在需要為你的設計添加額外的顏色,不過為了讓事情變得更簡單,這些顏色都是你已經選擇的強調色的變色。
在顏色選擇器上強調色周圍拖動選色點來創建變色。
6. 避開調色面板右上角的位置
顏色選擇器上右上角的位置是高純度的顏色。右上角的顏色像一級方程式賽車,它們的執行力驚人,并且非常吸引人,但是我們一般需要足夠的經驗才能很好地駕馭它們。如果沒有經驗的話,它們可能會造成事故,所以最好去嘗試使用更緩和的顏色。
這就是為什么我在本教程的第三節讓你選擇右上角四分之一中心位置的顏色,以確保以一種相對柔和的顏色開始。
更多云南龍頭科技有限公司網站案例請查看:http://www.www.charti.com.cn/case.asp?id=3
云南龍頭科技有限公司憑借多年的網站建設經驗,堅持以“幫助中小企業實現網絡營銷化”為宗旨,成功幫助多家中小企業實現互聯網信息化建設,得到了客戶的一致好評。如你有任何關于網站建設的疑問,請立即點擊咨詢云南龍頭科技有限公司資深營銷專家或撥打咨詢熱線:13759574266,我們會詳細為你一一解答你心中的疑難。

掃描關注官方微信