網(wǎng)頁美工—網(wǎng)頁色彩與布局設(shè)計(jì)-第6章--網(wǎng)頁色彩設(shè)計(jì)的趨勢(shì)

1、Web Color Tendency第六章 網(wǎng)頁色彩 的趨勢(shì)低度透明的色彩運(yùn)用分析Low-level Transparent Color Application Analysis1柔和鮮嫩的色彩運(yùn)用分析Solt And Tender Colors Application Analysis2偏灰的冷色系色彩運(yùn)用分析Analysis of Color Application of Grey And Cold Color3 用高亮色凸顯用戶交互Bright Colors Highlight Use Interactions4目 錄CONTENTS藍(lán)色是網(wǎng)頁的“基本款”Blue Is The Basi

2、c Design of Web Pages52低度透明的色彩運(yùn)用分析1PART3請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。低度透明的色彩運(yùn)用分析Low-level Transpa

3、rent Color Application Analysis6.1 低度透明的色彩運(yùn)用分析 透明度低的色彩很有可能成為2016年網(wǎng)頁設(shè)計(jì)的色彩趨勢(shì)。如圖6-1所示的網(wǎng)頁中，選用低透明度的色彩作為背景，與網(wǎng)頁整體協(xié)調(diào)，并且使用小塊的亮色突出主題。圖6-1 低透明度色彩網(wǎng)頁設(shè)計(jì)(1)4請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)

4、容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。6.1 低度透明的色彩運(yùn)用分析 圖6-2所示的網(wǎng)頁是黑暗系電影夜行者的官方網(wǎng)站，將電影中陰暗的劇情呈現(xiàn)在網(wǎng)頁上，簡(jiǎn)約現(xiàn)代的風(fēng)格處理，透明度低的色彩背景讓用戶可以更加專注于視頻和互動(dòng)本身。 圖6-2 低透明度色彩網(wǎng)頁設(shè)計(jì)(2)低度透明的色彩運(yùn)用分析Low-level Transparent Color Application Analysis5請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)

5、容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。6.1 低度透明的色彩運(yùn)用分析 圖6-3所示的是Union 的官網(wǎng)，雖然背景也采用了相對(duì)復(fù)雜的圖片，但降低了背景色彩的透明度，使得圖片、文字以及其他的裝飾元素之間的搭配對(duì)比控制的很好，有視覺重心又不會(huì)覺得有視覺干擾。圖6-2 低透明度色彩網(wǎng)頁設(shè)

6、計(jì)(3)低度透明的色彩運(yùn)用分析Low-level Transparent Color Application Analysis6柔和鮮嫩的色彩運(yùn)用分析2PART7網(wǎng)頁色彩應(yīng)用分析Solt And Tender Colors Application Analysis6.2 柔和鮮嫩的色彩運(yùn)用分析 扁平化網(wǎng)頁設(shè)計(jì)在2014年中的流行讓柔和色彩的用途變得越來越廣泛。這樣的色彩基調(diào)將在2015年和2016年得到進(jìn)一步的延續(xù)，其中馬卡龍色系也許會(huì)常常出現(xiàn)在網(wǎng)頁設(shè)計(jì)中。如圖6-4所示的是著名的網(wǎng)盤服務(wù)Dropbox的官方網(wǎng)站，該網(wǎng)站使用了柔和扁平的配色方案，矢量插畫與華麗的排版結(jié)合在一起，為用戶帶來可靠的

7、功能和絕佳的體驗(yàn)。圖6-4 柔和鮮嫩色彩網(wǎng)頁設(shè)計(jì)(1)86.2 柔和鮮嫩的色彩運(yùn)用分析 圖6-5所示的是一個(gè)個(gè)人作品展示的網(wǎng)頁，漂亮鮮嫩的偏平化色塊點(diǎn)綴在整個(gè)清爽的頁面上，充滿活力。圖6-5 柔和鮮嫩色彩網(wǎng)頁設(shè)計(jì)(2)網(wǎng)頁色彩應(yīng)用分析Solt And Tender Colors Application Analysis96.2 柔和鮮嫩的色彩運(yùn)用分析 圖6-6所示的是一個(gè)日本的音樂類網(wǎng)站，打開 Don-guri 的網(wǎng)站，會(huì)看到網(wǎng)頁中若干明亮的小色塊組合成文字，給人一種愉悅的視覺感受。這個(gè)音樂類項(xiàng)目能夠?qū)⒄芰砍錆M你的辦公室，幫你調(diào)整狀態(tài)，讓你精神充沛一整天。更重要的是，該網(wǎng)站不僅音樂主題明確，

8、而且網(wǎng)站色彩的設(shè)計(jì)也清新明快，過目難忘。圖6-6 柔和鮮嫩色彩網(wǎng)頁設(shè)計(jì)(3)網(wǎng)頁色彩應(yīng)用分析Solt And Tender Colors Application Analysis10偏灰的冷色系色彩運(yùn)用分析3PART11偏灰的冷色系色彩運(yùn)用分析Analysis of Color Application of Grey And Cold Color 偏灰的冷色系色彩是一種看起來比較百搭的顏色，但是實(shí)際上，要將這類顏色使用的恰如其分卻并不是一件容易的事情。這類色彩表現(xiàn)的比較中性，所以搭配任何顏色都不會(huì)顯得突兀，但也不算出挑，而要讓色彩之間真正融合，應(yīng)該選擇清淡的粉色系，讓網(wǎng)頁看起來清新脫俗。6.3

9、 偏灰的冷色系色彩運(yùn)用分析12 如圖6-7所示，Dior的網(wǎng)頁設(shè)計(jì)走的是優(yōu)雅精致的路線，時(shí)尚的寫真和華麗的視頻，配合美妙的粉色色彩，富有張力的排版和藝術(shù)化的風(fēng)格，絕對(duì)是優(yōu)秀設(shè)計(jì)的典范。6.3 偏灰的冷色系色彩運(yùn)用分析圖6-7 偏灰的冷色系粉色網(wǎng)頁設(shè)計(jì)(1)偏灰的冷色系色彩運(yùn)用分析Analysis of Color Application of Grey And Cold Color13 圖6-8所示的是Quechua企業(yè)的官網(wǎng)，它一直是以獨(dú)特原創(chuàng)的網(wǎng)站設(shè)計(jì)而聞名，Quechua最近一次改版后，網(wǎng)頁加入了大圖背景、精致的圖標(biāo)、扁平化的設(shè)計(jì)以及粉色系色彩，吸引用戶的關(guān)注。6.3 偏灰的冷色系色彩運(yùn)

10、用分析圖6-8 偏灰的冷色系粉色網(wǎng)頁設(shè)計(jì)(2)偏灰的冷色系色彩運(yùn)用分析Analysis of Color Application of Grey And Cold Color14 圖6-9所示的是一個(gè)美食相關(guān)的網(wǎng)站世界烘培日。借助插畫、矢量圖形和大膽的個(gè)性化裝飾字體以及粉色系色彩，網(wǎng)站設(shè)計(jì)師無所不用其極地試圖勾起你的食欲，抓住用戶的眼球。6.3 偏灰的冷色系色彩運(yùn)用分析圖6-9 偏灰的冷色系粉色網(wǎng)頁設(shè)計(jì)(3)偏灰的冷色系色彩運(yùn)用分析Analysis of Color Application of Grey And Cold Color15用高亮色凸顯用戶交互4PART16用高亮色凸顯用戶交互B

11、right Colors Highlight Use Interactions 大片的高亮色設(shè)計(jì)一定會(huì)造成用戶的視覺疲勞，令人很反感，但小部分的高亮色設(shè)計(jì)卻能起到突出重點(diǎn)的作用，既能將內(nèi)容有效的區(qū)分開來，又能保證與整體色調(diào)保持一致，還可以讓用戶進(jìn)行很好地交互體驗(yàn)。 如圖6-10所示，這個(gè)有關(guān)音樂的網(wǎng)站，沒有鋪天蓋地的設(shè)計(jì)元素，也沒有精妙絕倫的創(chuàng)意，但是良好的瀏覽體驗(yàn)和細(xì)膩的處理令整個(gè)網(wǎng)站脫穎而出，利用亮色吸引用戶并進(jìn)行體驗(yàn)。6.4.用高亮色凸顯用戶交互圖6-10 高亮色網(wǎng)頁設(shè)計(jì)(1)17 圖6-11所示的是一個(gè)日本萬國學(xué)生藝術(shù)展覽祭的官網(wǎng)網(wǎng)站Gakuten，網(wǎng)站設(shè)計(jì)清爽，細(xì)節(jié)排版精致到位，作為

12、一個(gè)大型設(shè)計(jì)展的官網(wǎng)，網(wǎng)站和展覽本身緊密關(guān)聯(lián)，美觀與功能都兼顧到了。當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航欄菜單時(shí)會(huì)變成鮮艷的綠色，巧妙地體現(xiàn)用戶的交互性。6.4.用高亮色凸顯用戶交互圖6-11 高亮色網(wǎng)頁設(shè)計(jì)(2)用高亮色凸顯用戶交互Bright Colors Highlight Use Interactions18 圖6-12所示的是一個(gè)獨(dú)特的線上購物網(wǎng)站的設(shè)計(jì)方案。和其他堆砌產(chǎn)品的電商網(wǎng)站相比，它更富有活力，感覺更活潑，巧妙地運(yùn)用高亮的紅色視覺刺激，更好的激發(fā)用戶的購物欲望。6.4.用高亮色凸顯用戶交互圖6-12 高亮色網(wǎng)頁設(shè)計(jì)(3)用高亮色凸顯用戶交互Bright Colors Highlight Use

13、Interactions19藍(lán)色是網(wǎng)頁的“基本款”5PART20 藍(lán)色在網(wǎng)頁設(shè)計(jì)中屬于不會(huì)出錯(cuò)的顏色，當(dāng)你舉棋不定或是在色彩上產(chǎn)生困惑的時(shí)候，你可以用藍(lán)色嘗試一下，也許能順利化解你的問題。如圖6-13所示， 網(wǎng)站以非侵略式的方式呈現(xiàn)出來自世界各地的人們的笑容，配合網(wǎng)格式布局，平衡而自然。網(wǎng)頁匯總藍(lán)色的元素和平鋪的內(nèi)容也提升了網(wǎng)頁的設(shè)計(jì)感。6.5.藍(lán)色是網(wǎng)頁的“基本款”圖6-13 藍(lán)網(wǎng)頁設(shè)計(jì)(1)藍(lán)色是網(wǎng)頁的“基本款”Blue Is The Basic Design of Web Pages21 圖6-14所示的是Blu Homes的官方網(wǎng)站，其首頁在文案設(shè)計(jì)和視覺設(shè)計(jì)之間找到了平衡點(diǎn)，兼顧了視

14、覺和閱讀體驗(yàn)。此外，自然的動(dòng)效和精心選取的以藍(lán)色調(diào)為主的圖片作為背景，為整個(gè)網(wǎng)站營造出溫馨的氛圍。6.5.藍(lán)色是網(wǎng)頁的“基本款”圖6-14 藍(lán)網(wǎng)頁設(shè)計(jì)(2)藍(lán)色是網(wǎng)頁的“基本款”Blue Is The Basic Design of Web Pages22 圖6-15所示的是Pollen London的官方網(wǎng)站，這個(gè)網(wǎng)頁所有內(nèi)容都是圍繞著時(shí)尚之美來的。利用藍(lán)色清晰時(shí)尚的大圖作為背景，充滿識(shí)別度的品牌展示，為整個(gè)網(wǎng)站定下了基調(diào)。6.5.藍(lán)色是網(wǎng)頁的“基本款”圖6-15 藍(lán)網(wǎng)頁設(shè)計(jì)(3)藍(lán)色是網(wǎng)頁的“基本款”Blue Is The Basic Design of Web Pages23藍(lán)色是網(wǎng)頁的“基本款”B