産品特色
編輯推薦
本係列是目前設計領域非常全麵的一套圖書,集中探討瞭配色設計的基礎知識和設計理念。並針對配色設計在不同領域的應用,通過案例詳細分析瞭設計的共性規律和設計技巧。
1.針對性強。針對設計師、專業學生、培訓機構等,編寫內容始終圍繞此類人群。
2.實用性強。注重引導設計師的思維模式、設計理念、創意創新,可以應對設計師日常工作中遇到的問題,及急需補充的知識。
3.版麵美觀。注重案例及精彩賞析的選擇,大量優秀作品讓本係列圖書更美觀大氣、更具設計感,采用銅版印刷更精美。
特色:
輕鬆學習配色法則,知識易懂、案例易學
本係列圖書全麵講解瞭服裝、網頁、海報招貼、平麵廣告、展示陳列、商品包裝、品牌形象、室內傢居領域內相關的配色原理、基礎知識、基礎色、設計風格和類型、時尚元素以及配色設計秘籍,讓讀者快速掌握配色設計的方法和規律。
配色方案精彩呈現,動手實踐、發散思維
每本書中都安排瞭案例解析、設計技巧、配色方案、設計欣賞、設計實戰、設計秘籍經典模塊,不僅豐富瞭服裝配色的內容,而且還增強瞭實用性,從而提升讀者的設計敏銳度以及對配色的判斷能力。
內容簡介
本書是一本全麵介紹網頁設計相關知識的圖書。
本書從學習網頁設計的基礎知識入手,循序漸進地為讀者呈現一個個精彩實用的知識、技巧。本書共分為7章,內容分彆為網頁的基礎知識,網頁設計的五大原則,網頁設計的基礎色,網頁的布局方式,不同行業的網頁色彩搭配,網頁色彩的視覺印象,網頁設計秘笈。在本書4~6章的每章後麵還特意安排瞭大型的設計實例,詳細地為讀者分析完整的綜閤設計的思路、擴展等。並且在多個章節中安排瞭案例解析、設計技巧、配色方案、設計欣賞、設計實戰、設計秘笈等經典模塊,在豐富本書結構的同時,也增強瞭實用性。
本書內容豐富、案例精彩、版式設計新穎,適閤網頁設計師、平麵設計師、初級讀者學習使用,可以作為大中專院校網頁設計專業、平麵設計專業及網頁設計培訓機構的教材,也非常適閤喜愛網頁設計的讀者朋友作為參考用書。
作者簡介
孫芳,視覺傳達設計講師、視覺設計師,曾任科創盛世傳媒設計主任、設計培訓機構藝術總監。多年緻力於研究視覺設計,有多年平麵設計、色彩設計、網頁設計等教學經驗,因教學方法獨特、講解細緻而得到廣大學員的認同。參與多個設計項目的策劃及製作,曾服務過國內多傢知名公司。
內頁插圖
精彩書摘
第2章
網頁設計的五大原則
網頁設計也是藝術類的錶現形式,視覺傳達設計開拓瞭新的網絡視覺文化空間。對於網頁設計師來說,打造非凡的交互體驗,設計一個可用性強的網站是大傢共同的目標。但是企業也有著自己的需求,因而這兩者經常會齣現衝突。所以在對網頁版式的設計中要遵循以下幾點原則。
(1)主題鮮明性原則。
(2)形式統一性原則。
(3)色彩和諧性原則。
(4)簡潔清晰性原則。
(5)界麵友好性原則。
2.1 主題鮮明性原則
網頁設計的主題是整個網站的靈魂所在,它起到對網站的整體風格和特色做齣定位、規劃網站的組織結構的作用。通常,設計師會通過視覺設計去錶現網頁的主題,這就要求設計師不但要以單純、簡練、清晰和精確的形式進行錶達,而且在強調藝術性的同時,更應該注重通過獨特的風格和強烈的視覺衝擊力來鮮明地突齣設計主題。可以通過以下三點做到網頁主題鮮明。
(1)對網頁構成元素運用藝術的形式美法則進行條理性處理,以便更好地營造符閤設計目的的視覺環境,從而起到使主題鮮明的作用。
(2)抓住訪客心理,按照視覺心理規律和形式將主題主動地傳達給訪客,以使主題在適當的環境中被訪客接受。
(3)網頁的效果力求簡潔,要點明確,以簡單明確的語言和畫麵來體現本站的主題,從而吸引訪客的注意。
主題鮮明的網頁設計
在製作網頁的初期,一定要為網頁設定一個明確的主題,尤其是個人網站。隻有明確網頁的主題,纔能在此基礎上更好地進行創意構思,從而形成總體的設計方案。
設計理念:在該網頁中,畫麵中的圖片都與食品相關聯,從而可以判定這是一個以食品為主題的網頁設計。該網頁結構並不復雜,內容一目瞭然。
色彩點評:該網頁整體呈現齣一種灰色調,是典型的“日式風格”配色。其中采用淺卡其色作為背景顔色,讓整體畫麵呈現柔和、樸素的效果。
導航欄位於網頁的左側,並將文字竪嚮排列,非常有民族特點。 畫麵中,宣傳圖中的灰色背景與淺卡其色的對比較弱,給人一種柔和、親切的感覺。
作為食品類的網頁設計,以綠色作為點綴色,給人一種健康、自然、美味的視覺效果。
CMYK=7,7,16,0 RGB=241,237,220
CMYK=71,48,100,7 RGB=94,117,10
CMYK=23,35,82,0 RGB=213,173,63
CMYK=3,51,66,0 RGB=248,155,87
CMYK=60,49,44,0 RGB=121,126,131
該網頁為運動主題的網頁,以白色搭配紅色,給人一種積極、奮進的視覺印象。該網頁布局簡約,以大幅圖片作為視覺中心,非常具有吸引力。
CMYK=78,72,69,39 RGB=58,58,58
CMYK=12,93,85,0 RGB=228,42,42
CMYK=19,15,14,0 RGB=213,213,213
CMYK=0,0,0,0 RGB=255,255,255
這是一個矢量插畫風格的網頁設計,畫麵中顔色簡單,配色效果鮮明,非常具有吸引力。該網頁以冰淇淋作為主題,它並沒有以實景圖片作為宣傳重點,這種另闢蹊徑的設計方式,給人留下深刻的印象。
CMYK=100,96,26,0 RGB=23,41,132
CMYK=11,96,17,0 RGB=230,0,126
CMYK=6,16,82,0 RGB=254,220,49
CMYK=45,11,92,0 RGB=164,196,47
提升網頁品質的技巧——留白
“留白”就是留下空白,它不是一個色彩概念,而是一種形式概念,它依存於整體布局結構關係中。利用留白這種手段,可以嚮訪客傳達齣設計者的訴求。
留白效果處理得當,整個畫麵會顯得整潔而有開放感,畫麵的主題往往更具吸引力。留白的錶現手法不隻應用於網頁設計,在其他領域也應用廣泛,例如版式設計、海報設計、繪畫等多個領域。
配色方案
雙色配色 三色配色 四色配色
2.2 形式統一性原則
形式統一性原則是指在整個網站中,每個網頁之間在內容上存在聯係、在錶現形式上相互呼應,做到整個畫麵風格統一、色彩統一、布局統一的效果。
在一個網站中會存在多個頁麵,當訪客從一個頁麵跳轉到另外一個頁麵時,兩個頁麵在風格、色彩和布局上要有一定的關聯,這樣纔能夠符閤形式統一性原則。如果違背瞭形式統一性原則,則設計齣來的作品不但沒有生氣,就連最基本的視覺設計和信息傳達功能也無法實現,甚至有可能會傳遞錯誤的信息,造成混亂。
形式統一的網頁設計
形式統一的網頁設計可以讓訪客更加快捷、精準、全麵地掌握網站的內容,並給人一種內部有機聯係、外部和諧完整的美感。通常可以從布局、色彩、風格三個方麵來構成形式上的統一。
設計理念:這是來自一個網站中的兩個頁麵之一,它們的布局、色彩和風格都是互相統一的。整個頁麵的布局非常簡單,中央的宣傳圖很好地介紹瞭商品,網頁Logo、標題和導航分彆位於圖片的左、上、右側,使用方法一目瞭然。
色彩點評:該網頁以白色作為主體顔色,整個畫麵看起來乾淨、清爽,在對比的作用下,黑色的文字變得非常突齣,易於訪客的閱讀和理解。 高度的形式統一可以讓整個網站看起來非常連貫,符閤人們的審美習慣。
網頁的布局彆齣心裁,將網頁Logo放置畫麵的左側,這樣的手法是比較少見的。
簡約的布局方式和白色調的配色,使整個頁麵看起來非常簡單、大方,可以給訪客留下極佳的印象。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=100,100,100,100 RGB=0,0,0
CMYK=0,96,95,0 RGB=255,0,0
該網頁以灰色作為主色調,整體給人一種內斂、儒雅的感覺,畫麵中,圖形以相同的形狀整齊擺放,在視覺上營造瞭一種平衡的感覺。商品的背景為統一的灰色,也形成瞭統一的視覺感受。
CMYK=78,70,64,27 RGB=66,70,74
CMYK=91,66,88,50 RGB=7,54,39
CMYK=19,14,14,0 RGB=214,214,214
CMYK=4,3,3,0 RGB=247,247,247
該網頁采用類似色的配色原理,青色為主色調,綠色為輔助色。整個頁麵給人清新、活潑的感覺。商品包裝中的綠色與綠色的草地相呼應,整個畫麵色彩協調統一。
CMYK=11,0,83,0 RGB=253,255,0
CMYK=83,43,17,0 RGB=0,128,182
CMYK=55,11,100,0 RGB=136,186,26
CMYK=56,4,85,0 RGB=130,195,75
CMYK=58,4,5,0 RGB=98,203,245
提升網頁品質的技巧——整個網站風格一緻
在網頁設計的過程中,盡管要融入很多創新元素,但是整個網站的風格要統一,這樣纔能使整個網站看起來是一個整體。我們可以通過按鈕、鏈接、導航欄等設計,讓整個網站的風格一緻。
配色方案
三色配色 四色配色 五色配色
網頁設計賞析
2.3 色彩和諧性原則
色彩是一種強有力的視覺語言,它甚至比網頁布局更具視覺影響力。色彩的搭配會影響整個網站的定位、風格、情感。通過不同的配色方案,可以給訪客帶來感官上的刺激,從而産生共鳴。
色彩和諧的網頁設計
每一種色彩都具有不同的情感,所以一個優秀的網頁設計,色彩的搭配是至關重要的。網頁中的色彩和諧,能給訪客一種心曠神怡的感覺,也能夠傳遞一種統一、正確的觀念,讓訪客覺得這個網站是認真、莊重的。
設計理念:該網頁采用海報型的布局方式,視覺效果強烈,利用全屏的圖片和簡潔的文案傳遞齣産品的氣質和理念,同時給人大方、舒展的感覺。
色彩點評:該網頁以粉色為主色調,以紅色、洋紅色作為點綴色。整體采用同類色的配色方案,畫麵色感和諧,多種點綴色讓畫麵顔色變得豐富。
該網頁主題明確,非常具有吸引 力和號召力。
以粉色調作為該網頁的主色調,非常貼切主題。
網頁中雖然內容豐富,但是條理清晰,非常易於訪客的理解和消化。
CMYK=14,99,76,0 RGB=224,8,54
CMYK=14,26,7,0 RGB=225,200,216
CMYK=19,100,100,0 RGB=215,5,18
CMYK=48,100,58,7 RGB=153,8,76
CMYK=63,69,45,2 RGB=119,92,114
在該網頁中,有彩色的部分主要來自於網頁中的圖片。我們可以看到,這兩幅圖片色調是非常相近的,這也是網頁色彩和諧的關鍵。
CMYK=38,23,13,0 RGB=171,186,207
CMYK=46,21,49,0 RGB=156,181,143
CMYK=25,13,19,0 RGB=202,211,206
CMYK=37,19,21,0 RGB=174,192,196
該網頁采用單色調的配色方案,紅色的配色與商品的顔色相協調,整個畫麵色彩統一、和諧。網頁中黑色的導航欄有穩定畫麵效果的作用,白色的文字在紅色背景的襯托下,顯得灑脫、率真,而且易於閱讀。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=59,76,52,6 RGB=126,79,98
CMYK=53,100,100,41 RGB=105,2,1
CMYK=28,100,100,1 RGB=199,1,0
提升網頁品質的技巧——主次分明的層級關係
視覺元素如果有清楚的瀏覽次序,那麼應該明確它們的層級關係。層級關係明確的網頁設計通常會按照順序去瀏覽網頁,網頁的主旨也會在短時間內精準地傳遞給訪客。
如果一個網頁層級關係不明確,那麼訪客在瀏覽網頁的過程中就會睏惑,甚至離開網頁。
例如在右圖中,標題文字與段落文字的字號存在著較大的差異,這就是層級關係的一種體現。
配色方案
三色配色 四色配色 五色配色
網頁設計賞析
2.4 簡潔清晰性原則
簡潔清晰性原則是指去除不重要的內容,而僅保留較少的重要內容,突齣網頁設計的主題信息。簡潔清晰的網頁設計通常主題突齣,中心思想明確,非常易於記憶和理解,而且簡潔、清晰、新穎的效果將更加深入人心。如今簡潔清晰的網頁設計越來越流行,縮短瞭人們觀看網頁的時間。大量的文字內容,會不利於突齣重點,滿屏的産品介紹,將導緻雜亂無章。而簡單的網頁設計更能直擊人心,快速傳遞情感。
簡潔清晰的網頁設計
簡潔清晰的網頁設計通常會減少設計元素的使用,或是在網頁中安排大量留白,這樣做的目的,在於將乾擾降至最低,以便用戶能夠專注於重要的內容。
設計理念:這是一個網站的首頁,大麵積的留白可以非常清晰地突齣主題,增強網頁的錶現效果。網頁的構圖十分簡單,內容簡練,易於訪客理解。
色彩點評:該網頁顔色非常簡單,首先映入眼簾的是大麵積的紅色,具有非常鮮明的視覺效果。
在該網頁中,大麵積的留白增加瞭網頁的空間感。 在精簡的布局方式下,畫麵中的商品具有很強的存在感。
紅色+白色的配色是十分經典的配色方案。在頁麵中,白色的文字和紅色的背景反差性很大,具有很強的視覺衝
擊力。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=16,88,91,0 RGB=221,62,36
CMYK=84,79,76,61 RGB=30,32,33
該網頁采用高明度的配色方案,畫麵屬於亮灰色調,視覺效果柔和、優雅。網頁的布局十分簡約,在很大程度上提升瞭用戶體驗。
CMYK=10,34,20,0 RGB=233,187,187
CMYK=16,52,49,1 RGB=120,120,120
CMYK=12,8,11,0 RGB=230,231,227
CMYK= 8,4,3,0 RGB=238,243,247
該網頁采用整張大圖作為背景,具備極強的視覺衝擊力,同時,可以有效地引導訪客駐足觀看,從而達到點擊網頁的目的。在該網頁中,網頁的布局也非常簡潔,半透明的按鈕,可以拉開網頁前景與背景的距離,使之産生更強烈的空間感。
CMYK=78,72,70,40 RGB=57,57,57
CMYK=69,96,37,2 RGB=113,44,108
CMYK=10,8,8,0 RGB=235,233,232
CMYK=38,42,45,0 RGB=174,151,134
CMYK=31,26,24,0 RGB=188,184,184
提升網頁品質的技巧——文字排列與字的色彩
文字與整個版式都息息相關,雖然字體有很多種,但是,真正能夠使用的也隻有一小部分,所以要盡可能地選擇網頁安全字。在字體的選擇上要符閤畫麵整體的氣氛,例如,有的字體體現嚴肅,有的字體體現幽默,有的字體體現力量感。也要根據信息的主次關係去選擇不同的字體及字號,而且要對文字的“字間距”與“行間距”進行調整。文字顔色的選擇也非常重要,因為色彩可以使文字不受位置的局限,加強或減弱文字的錶現強度。
配色方案
三色配色 四色配色 五色配色
2.5 界麵友好性原則
網頁設計的友好性原則包括三個方麵。
1. 對用戶友好
能夠充分滿足用戶的需要,以友好的信任感打動人心,從而提高網站的訪問量。
2. 對網絡環境友好
適閤搜索引擎進行檢索,便於積纍網絡營銷資源。
3. 對經營者友好
能夠使經營者的網站日常維護和管理更高效、方便、友好。
友好性原則
網頁設計的友好性原則通常錶現為打開網站後界麵美觀,便於使用,可用性高,給人以美觀、舒適、大方的感覺。
設計理念:該網頁采用海報式的布局方式,整體效果舒展大氣。在畫麵中央,利用色相的區彆,將版麵一分為二,形成瞭鮮明的對比。
色彩點評:該網頁采用類似色的配色方案,以青色與青綠色為主體色,以黃色和綠色為點綴色,整體色調輕鬆
活潑。
前景中的文字位於兩個版麵的中間,讓兩個版麵産生瞭緊密的聯係。 在背景中以人物剪影效果作為點綴,既豐富瞭畫麵的內容,又不會喧賓
奪主。
標題文字在字體的選擇上非常符閤整個畫麵的氣氛,黃色的字體在畫麵中效果也非常突齣。
CMYK=62,0,25,0 RGB=70,213,218
CMYK=54,0,39,0 RGB=106,232,191
CMYK=8,5,86,0 RGB=253,237,2
CMYK=75,3,100,0 RGB=0,178,0
該網頁以黃色作為主色調,綠色作為點綴色。我們可以看到,網站的Logo是一個綠色的仙人掌,而選擇黃色作為主色調是為瞭讓訪客聯想到沙漠。矢量插畫的風格設計方式給人一種幽默、有趣的感覺。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=71,13,93,0 RGB=73,170,66
CMYK= 7,17,88,0 RGB=253,217,0
這是一個網站的首頁設計,畫麵正中間的歡迎問候非常符閤網站的友好性原則。藏藍色的色調給人一種神秘、悠遠的感覺。采用俯拍手法的圖像,很好地將訪客的視綫集中到瞭畫麵中心位置的文字上,具有一定的視覺導嚮作用。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=47,51,69,1 RGB=156,130,91
CMYK=91,82,55,26 RGB=38,54,79
CMYK=96,93,74,68 RGB=4,10,26
提升網頁品質的技巧——導航欄(條)的設計
導航欄最明顯的作用就是指引用戶快速進入頁麵。閤理的導航條可以使得頁麵層次清晰,方便用戶使用。在導航欄的設計方麵,要考慮其擺放位置、風格、所用技術、可用性和網頁易讀性。
配色方案
雙色配色 三色配色 四色配色
……
前言/序言
《網頁配色設計手冊》是作者對自己多年從事網頁設計工作的一個總結,希望能成為讓讀者少走彎路、找到設計捷徑的經典手冊。書中包含瞭網頁設計必學的基礎知識及經典技巧。身處設計行業,你一定要知道“光說不練假把式”。本書不僅有理論,還有精彩的案例賞析,並用大量的模塊啓發你的頭腦,鍛煉你的設計能力。
希望讀者看完本書後,不會隻是說:“我
網頁配色設計手冊 寫給設計師的書 下載 mobi epub pdf txt 電子書