網(wǎng)頁(yè)設(shè)計(jì)色彩、UI設(shè)計(jì)與布局（課堂PPT）

1、網(wǎng)頁(yè)界面設(shè)計(jì)色彩搭配o色彩基本知識(shí)o色彩對(duì)比 o網(wǎng)頁(yè)色彩搭配方法 1 色彩基本知識(shí)2色彩的形成紅、綠、藍(lán)三種波長(zhǎng)的光是自然界所有顏色的基礎(chǔ)，光譜 中的所有顏色都是由這三種光的不同強(qiáng)度構(gòu)成。這三種光本身各自獨(dú)立，其中任何一種都不能由其余兩種光混合產(chǎn)生。所以我們把這三種顏色的光稱(chēng)為“色光三原色”“三原色”色彩是光照射在物體上而反射到人眼的一種視覺(jué)效應(yīng)。我們?nèi)粘Ｋ?jiàn)到的白光，實(shí)際是由紅、綠、藍(lán)三種波長(zhǎng)的光組成，物體經(jīng)光源照射，吸收和反射不同波長(zhǎng)的紅、綠、藍(lán)光，經(jīng)由人的眼睛，傳到大腦形成了我們看到的各種顏色，也就是說(shuō)，物體的顏色就是它們反射的光的顏色。3色彩的分類(lèi)4色彩的構(gòu)成元素色相 色彩的相貌，類(lèi)似

2、于人名，確切地表示某種顏色色別的名稱(chēng)。如：中國(guó)紅，軍綠色等明度 顏色明暗深淺表現(xiàn)，各種顏色的不同明度。黃色明度最高，藍(lán)紫色最低，紅色為中間明度 顏色越淺 明度越高 顏色越深 明度越低5色彩的構(gòu)成元素o純度（彩度、飽和度） 色彩的純凈程度，鮮艷程序，表示顏色中含有色部份的比例 純色+白色 明度 越高 飽和度越低 純色+黑色 明度越低 飽和度越低 純色+灰色 明度不變 飽和度越低o色調(diào)：色相、明度、飽和度結(jié)合 到一起,分有彩色、無(wú)彩色 純色+白色 淺色調(diào) 粉彩色調(diào) 純色+黑色 深色調(diào) 暗色調(diào) 純色+灰色 濁色調(diào) 淺灰色調(diào)6色相環(huán)o 色相環(huán)，是以三原色為基礎(chǔ)并把它做為主要色相，再兩兩混合成次要色相，

3、兩種次要色相混合，衍生而成（我們一般說(shuō)的12色相環(huán)和24色相環(huán)就是如此）7冷暖色系o 產(chǎn)生于人們生活經(jīng)驗(yàn)與直接聯(lián)想同一色相中 明度越高，越冷 明度越低，越暖色相環(huán) 暖色系： 紅橙黃 冷色系： 藍(lán)綠紫 中間色：黑白灰8同一色系o 同一色相 不同明度 飽合度呈現(xiàn)現(xiàn)的色彩（同一色系色彩進(jìn)行配色最安全配色）9色相環(huán)色相關(guān)系o 類(lèi)似色 30-60度間的色彩o 臨近色 左右相臨的色彩o 對(duì)比色 120-150度色彩 差異很明顯，注意顏色面積，比例，明 度，飽和度上的配置，才能顯現(xiàn)出活潑， 輕快的感覺(jué)o 互補(bǔ)色 180度對(duì)角位置 10色彩混合： 色混合是指某一色彩中混入另一種色彩。兩種不同的色彩混合，可獲得

4、第三種色彩。色彩意象及傳達(dá)： 色彩在人們的生活中都是有豐富的感情和含義的。 11 色彩的感覺(jué)o色彩冷暖感覺(jué) 明度越高 越冷 如 粉紅深藍(lán) 清涼 也與配色面積有關(guān) 較小黃配冷 冷 較小黃配暖色 暖色彩的聯(lián)想，可以是具體的，也可以想象的，因每個(gè)人生活的經(jīng)歷等不同產(chǎn)生的聯(lián)想也不同，以大多數(shù)人的聯(lián)想為依據(jù)，這樣所產(chǎn)生的形象誤差會(huì)比較小聯(lián)想所產(chǎn)生的心理感覺(jué) 比如冷 、熱（以大多數(shù)人為主）12色彩的感覺(jué)色彩輕重感覺(jué) 明度越高 越輕 明度越低 越重 明度高，飽和度越低 越輕 明度低，飽和度越高 越重 冷輕- 暖重 女性網(wǎng)站 輕 溫柔可愛(ài) 男性網(wǎng)站 重 穩(wěn)重可靠色彩爽朗郁悶感覺(jué) 暖 爽朗 冷 郁悶 明度 越高

5、 爽朗 明度 越低 郁悶 白色 爽朗 黑色 郁悶 13色彩的感覺(jué)o 色彩興奮沉積感 興奮感覺(jué) 讓心情沉穩(wěn) 暖興奮 冷 沉穩(wěn) 明度越高 越興奮 越低越沉穩(wěn) 飽和度越高 越興奮 越低越沉穩(wěn)o 色彩華麗樸實(shí)感 飽和度越低越樸實(shí) 越高越華麗 色調(diào) 低明度暗色調(diào)與深 色調(diào) 樸實(shí) 高明度純色調(diào)為主 華麗o 色彩酸甜苦辣14色彩的感覺(jué)o 色彩的酸甜苦辣 酸：藍(lán)、綠、黃、橙黃 甜：黃、橙、粉紅 、乳白 苦： 棕色、黑褐色、灰黑色 辣：紅，黃、黃綠、綠15色彩的意向紅色是最具有視覺(jué)沖擊力的色彩；暗示速度和動(dòng)態(tài)；可以刺激心跳速度、加快呼吸、刺激食欲；紅色的衣服使人身形顯大；紅色的車(chē)最容易被偷紅色的具象聯(lián)想紅色的具

6、象聯(lián)想火焰、鮮血、性、西紅柿、西瓜瓤、太陽(yáng)、紅旗、口紅、中國(guó)國(guó)旗。紅色的正面聯(lián)想紅色的正面聯(lián)想激情、愛(ài)情、鮮血、能量、熱心、激動(dòng)、熱量、力量、熱情、活力。紅色的負(fù)面聯(lián)想紅色的負(fù)面聯(lián)想侵略性、憤怒、戰(zhàn)爭(zhēng)、革命、殘忍、不道德、危險(xiǎn)、幼稚、卑俗。紅色的文化域紅色的文化域在非洲，紅色代表死亡。 在法國(guó)，紅色代表雄性。 在亞洲，紅色代表婚姻、繁榮、快樂(lè)。 在印度，紅色是士兵的顏色。 在南非，紅色是喪服的色彩。16色彩的意向紅色：熱情、活潑、熱鬧、革命、溫暖、吉祥、進(jìn)取、活力、忠誠(chéng)、危險(xiǎn)、警示、引起注意、禁止等。 色相：大紅、桃紅、玫瑰紅、磚紅橙色：光明、華麗、興奮、活力、快樂(lè)、警示、提醒等。 色相：大黃

7、、檸檬黃、土黃、柳丁黃、米黃綠色：和平、寧?kù)o、環(huán)保、通暢、正確、柔和、青春、安全、理想等。 色相：大綠、草綠、翠綠、橄欖綠、墨綠藍(lán)色：專(zhuān)業(yè)、睿智、科技、深遠(yuǎn)、永恒、城市 、樸實(shí)、寒冷、歷練等。 色相：湖藍(lán)、普藍(lán)、天藍(lán)、深藍(lán)17色彩的意向紫色：高貴、神秘、優(yōu)雅、魅力、傲慢、柔軟。 色相：正紫、耦合、貴族紫、葡萄紫、深紫白色：純結(jié)、天真、空靈、明快、弱小、樸素、神圣、恐怖、無(wú)味等。 灰色：質(zhì)樸、睿智、大氣、謙遜、平凡、中庸、寂寞、猶豫、消極等。 色相：淺灰、中灰、深灰、老鼠灰、藍(lán)灰黑色：神秘、嚴(yán)肅、崇高、堅(jiān)實(shí)、詭異、黑暗、沉默、絕望、死亡、罪惡等。褐色：古樸、典雅、原始、古老、陳舊、穩(wěn)重、厚重等

8、色相：卡其、象牙白、可可、麥芽、焦炭、原木、茶色18色彩對(duì)比1920 21 22 明度對(duì)比明度基調(diào)23 明度對(duì)比明度基調(diào)24 明度對(duì)比明度基調(diào)25 網(wǎng)頁(yè)色彩搭配26顏色在網(wǎng)站中的運(yùn)用顏色在網(wǎng)站中的運(yùn)用o 顏色能賦予網(wǎng)站以意義。無(wú)論你是否打算為他們加上某種意義，顏色本身就有許多特定的印象。用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)，顏色幫助轉(zhuǎn)移用戶(hù)的視線，指引用戶(hù)怎么去瀏覽一個(gè)頁(yè)面。、o 在許多企業(yè)的網(wǎng)站中可以看出，顏色表達(dá)了情感和價(jià)值觀，向用戶(hù)展示著他們的公司是怎樣的、他們所售賣(mài)的產(chǎn)品是怎樣的。o 配對(duì)色的運(yùn)用能改變一個(gè)網(wǎng)站的意義。給以柔和的藍(lán)色為色調(diào)的、表達(dá)出平靜網(wǎng)站配上明亮的橙色，就能讓它變成讓人更多感受到興奮和趣味

9、的網(wǎng)站。27網(wǎng)頁(yè)色彩搭配原理o 色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目o 色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的印象強(qiáng)烈o 色彩的合適性。就是說(shuō)色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。o 色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想。藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。28色彩使用技巧o黑白灰色彩的應(yīng)用 灰色是萬(wàn)能色，可以根任意一種色彩搭配， 對(duì)一些明度較高的網(wǎng)站，配以黑色，可以適當(dāng)?shù)亟档兔鞫取?白色是網(wǎng)站用的最普遍的一種顏色。很多網(wǎng)站甚至留出大塊的白色空間，作為網(wǎng)站的一個(gè)組成總部份。這就是留白藝術(shù)。很多設(shè) 計(jì)性網(wǎng)站較多運(yùn)用留

10、白藝術(shù)。留白，給人一個(gè)遐想空間，恰當(dāng)?shù)牧舭讓?duì)于協(xié)調(diào)頁(yè)面的均衡起到相當(dāng)大的作用。 29色彩使用技巧o確定主題色 一個(gè)網(wǎng)站不可能單一的運(yùn)用一種顏色，讓人感覺(jué)單調(diào)、乏味；但是也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，讓人感覺(jué)輕浮，花哨。一個(gè)網(wǎng)站必須有一種或兩種主題色，不到于讓客戶(hù)迷失方向，也不至于單調(diào)、乏味。所以確定網(wǎng)站的主題色也是必需考慮的問(wèn)題之一 30色彩使用技巧用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽合度（將色彩加深或減淡），產(chǎn)生新的色彩。用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感31色彩使用技巧o 用兩種色彩。先選定一種色彩，然后先擇它的對(duì)比色。比如藍(lán)色與黃色。這樣搭配可以使整個(gè)

11、頁(yè)面色彩豐富但不花哨o 用一個(gè)色系。簡(jiǎn)單的來(lái)說(shuō)就是一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠，或者土黃，土灰，土藍(lán)。o 用黑色各一種顏色。比如：大紅的字體配黑色的邊框感覺(jué)很“跳”。32色彩使用忌諱o 不要將所有顏色都用到，盡量控制在三種色彩以?xún)?nèi)o 背景和前文對(duì)比盡量要大，絕對(duì)不要用花紋繁復(fù)的圖案作背景，以便主要文字內(nèi)容o 根據(jù)文化背景適當(dāng)?shù)倪x擇顏色： 黃色在信仰基督教的國(guó)家是下 等色。 33大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 耐克耐克耐克常常更新他們的網(wǎng)站，但通常還是黑色和灰色的色調(diào)，它通常是暗。黑色顯示著他們產(chǎn)品中的力量，留給大家他們向愛(ài)運(yùn)動(dòng)的顧客出售優(yōu)質(zhì)產(chǎn)品的印象。34大

12、公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 白宮白宮白宮的網(wǎng)站主要是白色和淺灰色，再加上一些藍(lán)色和紅色作強(qiáng)調(diào)色。白色象征著希望和自由，顯露出平安和純潔的價(jià)值。紅色和藍(lán)色當(dāng)然是美國(guó)的代表色，紅色代表著熱情和能量，藍(lán)色則代表著穩(wěn)定與和平。35大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 亞馬遜亞馬遜亞馬遜的網(wǎng)站大多是白色的，白色有著最佳的對(duì)比度和可讀性。它還顯露出整潔性，讓用戶(hù)能自由地瀏覽網(wǎng)站。以橙色和藍(lán)色的強(qiáng)調(diào)色則讓用戶(hù)能感到安定、興奮，也讓他們期望找到最滿(mǎn)意的采購(gòu)。36大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o Verizon公司公司紅色是Veriz

13、on的企業(yè)品牌主色調(diào)，也是貫穿整個(gè)網(wǎng)站的顏色。紅色有助于刺激用戶(hù)的興奮性，展示出一個(gè)出售讓人興奮和快速更新的產(chǎn)品的公司形象。白色背景的運(yùn)用與亞馬遜類(lèi)似，通過(guò)一個(gè)整潔有序的界面來(lái)幫助用戶(hù)閱讀這個(gè)網(wǎng)站。37大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 百思買(mǎi)百思買(mǎi)百思買(mǎi)的網(wǎng)站的色調(diào)是深藍(lán)色，顯露出他們?cè)陔娮邮袌?chǎng)中的穩(wěn)定和實(shí)力。顧客在百思買(mǎi)上的大量采購(gòu)使得他們需要安全感與平和感。黃色散發(fā)的快樂(lè)氣氛讓他們?cè)诓少?gòu)時(shí)感覺(jué)到興奮與趣味。38大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 嘉信理財(cái)嘉信理財(cái)嘉信理財(cái)是一家投資公司，在不穩(wěn)定的市場(chǎng)環(huán)境下他們需要讓消費(fèi)者在他們的網(wǎng)站上感受到

14、平和。他們使用柔和的深藍(lán)色調(diào)來(lái)實(shí)現(xiàn)這一點(diǎn)，并建立起一種平靜、祥和的氣氛。中性的棕色則是另一種幫助協(xié)調(diào)偏激的用戶(hù)感受的企業(yè)色彩。橙色作為強(qiáng)調(diào)色，能讓用戶(hù)在買(mǎi)股票時(shí)產(chǎn)生興奮感，同時(shí)也為網(wǎng)站帶來(lái)了幸福感。39大公司的網(wǎng)站中顏色運(yùn)用的例子大公司的網(wǎng)站中顏色運(yùn)用的例子o 道奇道奇道奇的網(wǎng)站大多是黑色系，能讓網(wǎng)站上的圖片凸顯出來(lái)。他們使用一種鮮艷的紅色作為強(qiáng)調(diào)色。黑色給網(wǎng)站帶來(lái)力量感，在一種精致與陽(yáng)剛的氛圍下展示他們的產(chǎn)品。黑色是一種不錯(cuò)的顏色，它能使產(chǎn)品看起來(lái)珍貴、有價(jià)值。紅色則表達(dá)出激情和興奮，是希望能讓消費(fèi)者認(rèn)為他們是從一個(gè)值得信任、質(zhì)量有保障的公司購(gòu)買(mǎi)到的車(chē)輛。40色彩搭配原則色彩搭配原則 o 色

15、彩的鮮明性 o 色彩的獨(dú)特性 o 色彩的藝術(shù)性 o 色彩搭配的合理性 41網(wǎng)頁(yè)色彩搭配方法網(wǎng)頁(yè)色彩搭配方法 o 同種色彩搭配：同種色彩搭配是指首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，而產(chǎn)生新的色彩，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，具有層次感。 42網(wǎng)頁(yè)色彩搭配方法網(wǎng)頁(yè)色彩搭配方法o 鄰近色彩搭配 ：鄰近色是指在色環(huán)上相鄰的顏色 ，采用鄰近色搭配可以里是網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面和諧統(tǒng)一的效果。43網(wǎng)頁(yè)色彩搭配方法網(wǎng)頁(yè)色彩搭配方法o對(duì)比色彩搭配 ：對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺(jué)效果。 44網(wǎng)頁(yè)色彩搭配方法網(wǎng)頁(yè)色彩搭配方法o 有主色的混合色彩搭配 ：有主色的混合色彩搭配是指

16、以一種顏色作為主要顏色，同色輔以其他色彩混合搭配，形成繽紛而不雜亂的搭配效果。 45紅色系紅色系o 朱紅色朱紅色46深紅深紅47對(duì)比色：橙紅色對(duì)比色：橙紅色+藍(lán)色藍(lán)色 48配色：紅色配色：紅色+黑色黑色+灰色灰色 49黃色系黃色系 o 黃色系分析黃色系分析 50黃色同類(lèi)色分析黃色同類(lèi)色分析 51黃綠色調(diào)分析黃綠色調(diào)分析 52黃色鄰近色（黃色黃色鄰近色（黃色 紅色）分析紅色）分析 53黃色配色（黃色黃色配色（黃色 藍(lán)色）分析藍(lán)色）分析 54黑色系黑色系o 明度對(duì)比：黑色明度對(duì)比：黑色+ +白色白色 55黑色系分析：黑色背景黑色系分析：黑色背景56黑色配色：黑色黑色配色：黑色+橙色橙色57橙色系橙

17、色系 o 橙色系分析橙色系分析 58橙色同類(lèi)色分析：橙色同類(lèi)色分析：59鄰近色（黃色鄰近色（黃色+橙色橙紅色）分析橙色橙紅色）分析 60 橙色系對(duì)比（橙色橙色系對(duì)比（橙色+綠色）分析綠色）分析 61藍(lán)色系分析藍(lán)色系分析o 同類(lèi)色：淺藍(lán)色同類(lèi)色：淺藍(lán)色 62藍(lán)色鄰近配色：藍(lán)色綠色藍(lán)色鄰近配色：藍(lán)色綠色 63藍(lán)色系強(qiáng)對(duì)比：藍(lán)色紅色藍(lán)色系強(qiáng)對(duì)比：藍(lán)色紅色64綠色系綠色系 o 綠色系分析綠色系分析 65高純度配色：綠色高純度配色：綠色+對(duì)比色組合對(duì)比色組合66鄰近色配色：綠色鄰近色配色：綠色+藍(lán)色藍(lán)色67對(duì)比色配色：綠色對(duì)比色配色：綠色+紅色紅色68紫色系紫色系 o 紫色系分析：淺紫色紫色系分析：淺紫

18、色 69紫色配色：紫色綠色紫色配色：紫色綠色70紫色配色：紫色紫色配色：紫色+紅色紅色71低純度配色：紫色低純度配色：紫色+綠色綠色72網(wǎng)站設(shè)計(jì)73什么是 UI o UI的本意是用戶(hù)界面，在人和機(jī)器的互動(dòng)過(guò)程中，最重要的一個(gè)方面就是我們所說(shuō)的界面大致界面可分為感覺(jué)（視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等）和情感兩個(gè)層次。o 用戶(hù)界面設(shè)計(jì)的三大原則是：置界面于用戶(hù)的控制之下；減少用戶(hù)的記憶負(fù)擔(dān)；保持界面的一致性。74三大原則o 用戶(hù)研究：使得網(wǎng)站界面的設(shè)計(jì)更容易被人接受、使用和記憶；發(fā)掘用戶(hù)的潛在需求。對(duì)于設(shè)計(jì)師來(lái)說(shuō)就是研究如何使自己的網(wǎng)站頁(yè)面更收瀏覽者的歡迎 o 交互設(shè)計(jì)：如何使瀏覽者在使用網(wǎng)站時(shí)可以輕松自如的找

19、到自己想要的資源o 界面設(shè)計(jì) ：俗稱(chēng)為“美工”。一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與電腦的距離，為網(wǎng)站創(chuàng)造賣(mài)點(diǎn)。75界面構(gòu)成要素o 文字：文字元素作為網(wǎng)站內(nèi)容傳達(dá)的主體，文字有著其他任何元素?zé)o法取代的重要作用。o 圖形：圖形往往能引起人們的注意，并激發(fā)閱讀興趣，合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。o 視頻、音頻、動(dòng)畫(huà)：。這些是界面構(gòu)成中最吸引人的元素，好的多媒體元素不但可以增加網(wǎng)站的活力還可以有效的提高網(wǎng)站與瀏覽者之間的互動(dòng)交流。 76三、網(wǎng)站界面布局三、網(wǎng)站界面布局o 網(wǎng)頁(yè)設(shè)計(jì)源于平面設(shè)計(jì)但又與平面設(shè)計(jì)有所區(qū)別不同，相同的是在設(shè)計(jì)中多運(yùn)用平面構(gòu)成的基本原理，不同

20、的是它的大小比較固定，傳載的媒體只限于電子顯示器（包括手機(jī)、PDA等），這樣就為設(shè)計(jì)者提出了更為苛刻的要求。77（一）頁(yè)面尺寸（一）頁(yè)面尺寸o 由于網(wǎng)頁(yè)的瀏覽多是基于顯示器實(shí)現(xiàn)的，所以顯示器的分辨率就決定了網(wǎng)頁(yè)設(shè)計(jì)者設(shè)計(jì)網(wǎng)站頁(yè)面的大小，目前比較流行的顯示器的尺寸為o 800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024o 而目前主流設(shè)計(jì)網(wǎng)站頁(yè)面的大小一般為o 600*300、760*420、995*436 78 有效可視區(qū)域（單位：有效可視區(qū)域（單位：px）屏幕一二三800600102476812801024IE6.077

21、9(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168) IE7.0779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148) Firefox2.0783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Opera9.0781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139) 79原則o 一般情況下寬度是一定的，但可以根據(jù)內(nèi)容的多少而進(jìn)行調(diào)整o 1. 最保守而最

22、有兼容性的一屏大小是：779432 o 2. 最廣泛的一屏大小是：1003600 o 3. 適合目前國(guó)內(nèi)的情況，一屏大小是995*43680（二）視覺(jué)順序o 網(wǎng)頁(yè)是通過(guò)視覺(jué)元素的引人注目而實(shí)現(xiàn)信息內(nèi)容的傳達(dá)，因此，設(shè)計(jì)時(shí)應(yīng)該研究各種視覺(jué)造型元素之間的距離、位置、面積和視覺(jué)流程的問(wèn)題。視覺(jué)總有一種自然的流動(dòng)習(xí)慣，先看什么，后看什么，再看什么。平面的視覺(jué)影響力上方強(qiáng)于下方，左側(cè)強(qiáng)于右側(cè)。上部和中上部被稱(chēng)為“最佳視域”，在網(wǎng)頁(yè)設(shè)計(jì)中一些突出的信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個(gè)位置。81視覺(jué)順序：在布局設(shè)計(jì)中多使用平面的設(shè)計(jì)規(guī)律如“九分法”等82（三）布局步驟o 草圖草圖：簡(jiǎn)單的用畫(huà)筆在白紙上將創(chuàng)意的大致輪廓畫(huà)出來(lái)。o 粗略布局粗略布局：將紙上的輪廓在電腦上體現(xiàn)出來(lái)，對(duì)畫(huà)面進(jìn)行分割，也可以用色塊進(jìn)行填充，確定好