這種方法更專業!設計網頁時選擇配色的八個要點 - 優設-UISDC

                                        這種方法更專業!設計網頁時選擇配色的八個要點

                                        2016/06/26 14094評論區

                                        website-color-matching-key-points-1

                                        編者按:選擇和品牌一致的顏色、導航菜單欄用對比色、不要同時用大量紅色和綠色……?今天@喪心病狂十六夜貓?這篇好文,科普了8個簡單實用的網頁配色要點,一起來收!

                                        喜好不同,有人喜歡單色也有人喜歡鮮艷的配色,解決的方法也隨著喜好變化,在挑選顏色時要進行深刻的檢討,并不是因為顏色看起來很棒所以選它、而是要在設計的戰略性上考慮,約束自己的個人情感。

                                        這個筆記,主要講述的是網頁制作的配色選擇的八個要點。

                                        01. 決定品牌形象

                                        在很多建設網站的理由中,傳遞出特定的感情這一信息是很常見的。所以在這時,選擇好顏色就顯得尤為重要。你想傳遞出什么樣的感情,不用通過閱讀內容,用戶都能很好的理解。

                                        在以生態為基礎的公司的網站上,配色的靈感就來自于自然;如果是以銷售玩具為主的公司、就需要選擇有趣,鮮艷的配色。每一個被使用的顏色,在它背后所包含的意義是十分重要的。

                                        你可以通過這個系列的好文了解色彩的情緒:

                                        1. 紅色篇:《設計師的讀書筆記!帶你重新全面認識色彩系列之紅色篇》
                                        2. 橙色篇:《深入淺出學配色!帶你重新全面認識色彩系列之橙色篇》
                                        3. 黃色篇:《深入淺出學配色!帶你重新全面認識色彩系列之黃色篇》
                                        4. 綠色篇:《深入淺出學配色!帶你重新全面認識色彩系列之綠色篇》
                                        5. 藍色篇:《深入淺出學配色!帶你重新全面認識色彩系列之藍色篇》
                                        6. 紫色篇:《深入淺出學配色!帶你重新全面認識色彩系列之紫色篇》

                                        color201606263

                                        在品牌推廣時使用的顏色要和公司LOGO設計的顏色要是相同的,這一點非常重要。對于網頁設計師來說,在線銷售的銷售額增加,讓人聯想到什么樣的傳統或者概念,如何利用有效果的照片都是值得思考的一件事情。

                                        雖然有很多種方法可以讓用戶在網頁上進行購買時也能獲得和在實體店一樣的感覺,但網站的運營者則需要讓網頁設計師也注意到這一點,革新的新型網頁也同樣,或者說可以獲得在這之上的購物體驗。

                                        最終的目標、就是給用戶提供舒適的感覺。因此,在更新最新信息的時候,一定要注意要具有統一的品牌意識。

                                        02. 決定你要傳遞的信息

                                        color201606264

                                        給消息使用華美的顏色,或者讓它變得特別有吸引力,在單獨比較的時候又有獨特的魅力,給用戶提供這樣有趣的體驗。如果你已經知道你面向的是那些用戶、考慮它們的喜好就不是很難、這也算是一個非常好的消息了。

                                        03. 直觀的導航菜單欄

                                        當你看到一個網站的時候,或許你會有很多很棒的點子,但你也需要遵守導航菜單的一些規則。用戶是一個接一個、按照順序直觀的去觀看的,除去基本的動作之外,要防止出現讓用戶感到迷惑的動作。

                                        想引導用戶到達特定的區域,有好幾種視覺效果可供選擇,用配色方案來凸顯出對比效果就是典型的方法。利用對角線上的布局,被稱為對角線平衡(英: Diangonal Balance)、它特別慣用于從上到下的布局、我們可以在右上角的基本設定菜單中找到它,這在歐洲和美國的網頁中經常用到的技術。

                                        利用相反的配色,讓每個選項的層次感凸顯出來,用戶在這些項目中就知道可以點擊什么。

                                        04. 決定什么是重點

                                        color201606265

                                        用戶可不知道,你有什么重要的情報和消息。在這種情況下你就需要在屏幕的中間,使用鮮艷的顏色來告訴它們。這么做的話,用戶就會嘗試著優先去看這一部分。

                                        為了讓用戶去關注它們,也有用白色背景上使用黑色文字這樣布局的網站。為了打破單調的外觀,如果你利用了強調色,那將變得非常簡單。也有這樣的原因,為了表現出文本和超鏈接、使用非常鮮艷的顏色,這也是現在非常流行的設計趨勢。

                                        05. 考慮信息的重要性

                                        在網站中、我們希望將【注冊】或者【購買】這樣的要素突出。而類似【取消】這樣的按鈕則希望用戶盡可能的不去注意到它,因為它們并不是主要的要素、用一些通常的設置來控制它們就可以了。

                                        color201606267

                                        我們可以用字體很小的文字或者和照片顏色相接近的自然的配色來設計按鈕,從而讓用戶不去注意【取消】。如果將原本在右上角的【注冊】按鈕放在屏幕的正中間,那它所達成的效果也自不必說。通過調整按鈕的大小,以及明確的寫出它們的做用,用戶就能很準確的理解你所表達的意思。

                                        同時,為了突出主要要素按鈕,你需要去注意它們的大小和顏色的對比,這樣可以防止用戶忘記按下按鈕。

                                        06.考慮圖片的顏色。

                                        color201606269

                                        為了給用戶界面提供更加亦可賽艇的體驗,你也可以將配色同圖片相結合。從填滿整個屏幕的背景圖、到你想出售的的產品的縮略圖、將它們考慮到構圖之中,將用戶的視線集中起來。(例圖的配色和那些OX□Δ讓我差點將它當成了PS4的宣傳網頁)

                                        事實上,更加專業、精致大氣的網站上,紅色和綠色還有藍色最好不要使用。由單色制作出來的網站,信息的傳遞往往會更好,這也作為一個特殊的效果,被很多網頁設計師所采用。

                                        07. 限制使用顏色的數量

                                        color2016062610

                                        如你所見、有些用戶的眼睛是弱視的,而有些則是什么顏色都看不見的。而大多數情況下,色盲中紅綠色盲居多,如果你的設計作品中運用了大量的紅色和綠色,就會讓它們感到混亂。

                                        從這個設計師可以看出、在這個界面設計中它是以大量的紅色作為主要要素,這樣就可以避免紅色和綠色難以區分這一問題。

                                        08. 決定什么是最重要的

                                        color201606266

                                        例如代表國家或者宗教的符號,顏色所代表的意思,因為各地的文化不同而不同。作為設計師,首先應該了解自己所面向的用戶是那一類、在考慮配色的時候,應當要考慮到這些問題,從而確保傳達出的意思不會被誤解。

                                        有時、顏色的意思相近(在中國紅色代表幸運(英: Luck),在美國則代表了愛(英: Love))就顯得不是那么重要,但像白色或者黑色這樣因為宗教的原因而導致的意思不同,就會將你的設計從整體上破壞,這一點請務必注意。

                                        最后

                                        color201606268

                                        正如我們這次所看到的、理解配色的意思是十分重要的。不管是創建一個直觀的界面、還是將它利用在品牌上,您都可以準確的傳達出它的意思。正確的利用顏色,就好像魔法一般,將你的設計準確的反映出來。

                                        如果想要了解顏色的意思,則需要長時間的學習,當然這也會更好的讓用戶了解到你的設計作品中所包含的趣味。

                                        「優設優秀教程合集」

                                        地圖圖標教程:
                                        《PS教程!手把手教你打造一個配色小清新的地圖圖標》

                                        卡通動物肖像:
                                        《AI教程!教你繪制六個扁平化風格的卡通小動物肖像》

                                        卡通人物肖像:
                                        《AI教程!教你繪制扁平化風格的卡通人物肖像(四人組合篇)》

                                        原文地址:?photoshopvip
                                        優設譯者:@喪心病狂十六夜貓

                                        yestone-uisdc-2

                                        【優設網 原創文章 投稿郵箱:[email protected]

                                        ================關于優設網================
                                        “優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
                                        【特色推薦】
                                        設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
                                        設計微博:擁有粉絲量130萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
                                        設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

                                        優設大課堂

                                        非特殊說明,本文版權歸原作者所有,轉載請注明出處
                                        本文地址:http://www.ndwc.tw/website-color-matching-key-points

                                        發表評論 加載中....

                                        評論加載中....

                                        uisdc

                                        評論區都快餓癟了,看看我期盼的小眼神...

                                        sketch 優設大課堂 轉場動效 界面設計 設計師 扁平化設計 交互設計師 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 設計流程 配色 web前端開發 用戶體驗設計 AI教程 海報設計 設計理論 神器下載 字體下載 設計規范 設計趨勢 psd下載 動效設計 圖標設計 產品設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
                                        wechat

                                        優設官方微信

                                        50萬設計師關注

                                        微信號:youshege

                                        把好文章收藏到微信

                                        打開微信,掃碼分享
                                        學設計 優設網 在這里

                                        江苏11选5开奖结果