網(wǎng)站界面設(shè)計課件

信息工程學(xué)院

《web編程基礎(chǔ)綜合實踐》信息工程學(xué)院

《web編程基礎(chǔ)綜合實踐》1/1/2023網(wǎng)站界面設(shè)計主講人：常艷芬12/29/2022網(wǎng)站界面設(shè)計主講人：常艷芬1/1/2023網(wǎng)站界面設(shè)計概念(WebUserInterface)網(wǎng)站界面設(shè)計要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計與網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來；而網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿，按照W3C規(guī)范用html（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）將其制作成網(wǎng)頁格式。別名：網(wǎng)站建設(shè),網(wǎng)頁設(shè)計，網(wǎng)站策劃12/29/2022網(wǎng)站界面設(shè)計概念(WebUserIn1/1/2023UI設(shè)計師發(fā)展之路12/29/2022UI設(shè)計師發(fā)展之路1/1/202312/29/20221/1/2023WUI（WEB界面設(shè)計）模塊課程內(nèi)容目標(biāo)學(xué)時展示W(wǎng)UI軟件基礎(chǔ)Fireworks軟件的基本構(gòu)成、矢量工具和位圖工具、WUI用戶界面及廣告設(shè)計。了解WUI常用軟件工具、功能的使用；理解企業(yè)及客戶的基本要求；掌握WUI界面模塊的設(shè)計。72Dreamweaver建立站點、添加頁面元素、使用CSS樣式及交互行為。FlashFlash中的動畫制做原理與技巧，典型WUI商業(yè)廣告中的Flash技術(shù)與實現(xiàn)。WUI界面設(shè)計WEB界面設(shè)計WEB界面的分類，企業(yè)網(wǎng)站界面、門戶網(wǎng)站界面、專題活動界面的分析與設(shè)計。了解WUI標(biāo)準(zhǔn)設(shè)計規(guī)范及風(fēng)格；理解企業(yè)客戶對設(shè)計的需求和期望值；掌握網(wǎng)站及軟件界面設(shè)計的技能和技巧。24PC客戶端軟件界面設(shè)計PC客戶端軟件界面的類型，企業(yè)OA辦公軟件、觸摸屏管理展示系統(tǒng)界面的分析與設(shè)計。WEB標(biāo)準(zhǔn)化布局（X）HTML/HTML5語言HTML語法與常用標(biāo)簽的詳解，包括布局標(biāo)簽，表格標(biāo)簽，表單標(biāo)簽等。了解網(wǎng)站布局的三大核心部分：結(jié)構(gòu)標(biāo)簽，修飾語言和行為語言；理解CSS修飾的用途及意義；掌握基于WEB標(biāo)準(zhǔn)的網(wǎng)站結(jié)構(gòu)搭建、WEB界面外觀美化和主流瀏覽器兼容。48CSS樣式表CSS語法與常用屬性的詳解，使用CSS對網(wǎng)站中各個模塊進行修飾美化。布局技巧與瀏覽器兼容對頁面布局結(jié)構(gòu)進行深入的分析。系統(tǒng)的講解瀏覽器兼容的處理解決辦法，并帶領(lǐng)學(xué)生完成各種網(wǎng)站布局實訓(xùn)。階段實訓(xùn)中小型企業(yè)網(wǎng)站項目華為技術(shù)有限公司企業(yè)整站設(shè)計實訓(xùn)。了解實訓(xùn)方案及需求；理解實訓(xùn)對于學(xué)生就業(yè)的積極意義；掌握獨立完成企業(yè)級應(yīng)用項目的技能。3212/29/2022WUI（WEB界面設(shè)計）模塊課程內(nèi)容目標(biāo)講解提綱１、3C原則2、顏色的意義３、UI設(shè)計色彩搭配４、安全配色指南５、其它色彩理論６、建議與經(jīng)驗７、學(xué)習(xí)資料推薦1/1/2023講解提綱１、3C原則12/29/20221/1/20233Ｃ原則12/29/20223Ｃ原則1/1/2023網(wǎng)站界面設(shè)計3C原則

Concision(簡潔)

Coherence（一致性）

Contrast(對比度)12/29/2022網(wǎng)站界面設(shè)計3C原則Concisio1/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/2023顏色的意義12/29/2022顏色的意義1/1/2023紅色紅色是代表愛情和激情的顏色。紅色是很強勢的顏色，當(dāng)它和其他顏色相遇時，比如搭配黑色，可以創(chuàng)建非常強勢的感覺。12/29/2022紅色1/1/2023橙色

橙色代表了溫暖，但是并不像紅色那樣咄咄逼人。橙色能夠創(chuàng)建一個有趣的氛圍，因為它充滿了活力，而且橙色創(chuàng)造出的活躍氣氛并沒有危險的感覺。橙色可以與一些健康產(chǎn)品搭上關(guān)系，比如維生素C，畢竟橙子里也有很多維生素C。12/29/2022橙色1/1/2023黃色提到黃色，經(jīng)?？梢月?lián)想到太陽和溫暖。使用橙色的時候，可以創(chuàng)造出一種夏天的好玩的感覺，黃色則帶給人口渴的感覺，所以經(jīng)?？梢栽谫u飲料的地方看到黃色的裝飾。黃色也可以和懦弱與恐懼聯(lián)系起來，這個則是因為以前“yellow”這個詞也代表著這個意思。當(dāng)黃色與黑色搭配在一起時，十分吸引人的注意力，一個絕佳的例子就是很多國家的出租車都采用這種配色。12/29/2022黃色1/1/2023綠色在西方國家，綠色是錢的顏色，這與他們的文化和財富有關(guān)。因為大多數(shù)植物都是綠色的。綠色也代表著經(jīng)濟增長和健康。綠色經(jīng)常用作一些保健食品的LOGO，因為看起來就十分貼近自然。綠色還意味著利潤和收益。如果搭配上藍色，通常會給人健康、清潔、生活和自然的感覺。12/29/2022綠色1/1/2023藍色藍色是一個神奇的顏色，因為不同明度的藍色會給人不同的感受、想法和情緒。如下圖中所示，深藍色可以給人一種悲傷的感覺，讓人聯(lián)想起傷心時怎么聽都不夠的藍調(diào)音樂。而淺藍色則通常會讓人聯(lián)想起天空和水，給人以提神、自由和平靜的感覺。藍天永遠都是平靜的，水流可以沖走泥土，清洗傷口，所以藍色也代表著新鮮和更新。藍色給人冷靜的感覺，會幫助人放松下來。12/29/2022藍色1/1/2023紫色紫色總是讓人不禁想起皇室成員的長袍。紫色可以更多地與浪漫、親密、柔軟舒適的質(zhì)感產(chǎn)生聯(lián)系。紫色給人一種奢華的感覺，也有一種神秘感。下面這個葡萄酒網(wǎng)站就是極好的例子。12/29/2022紫色1/1/2023黑色黑色通常與死亡有關(guān)，尤其是在美國。它可以代表腐壞，因為很多食物腐壞變質(zhì)以后就是黑色的。黑色也代表邪惡，因為是白色的對立顏色，而白色通常代表著純潔美好善良。黑暗和未知也會給人焦慮的感覺。很多圖像中，黑色表達了抑郁、絕望和孤獨。雖然黑色有很多負面的含義，但是黑色也是一個萬能色彩，當(dāng)黑色遇上其他顏色的時候會產(chǎn)生其他的意義。比如當(dāng)黑色邂逅金黃色，就可以給人一種奢華、高檔的感覺；當(dāng)黑色偶遇銀灰色，則會給人一種成熟穩(wěn)重的感覺。下面的網(wǎng)站就完美詮釋了這一點。12/29/2022黑色1/1/2023白色白色通常與醫(yī)院聯(lián)系在一起，因為醫(yī)生們都是穿著白大褂的，而且醫(yī)院內(nèi)部的裝修通常也是白色的。此外，宗教繪畫有時候也是沒有色彩的，白色也代表著圣潔。白色通常給人干凈的感覺，比如白色的床單和衣服都讓人感覺很干凈。也可以代表棉花和柔軟的云朵。心理健康相關(guān)的事物也可以選用白色，白色也同樣適用于衛(wèi)生、清潔相關(guān)的設(shè)計。比如下面這個網(wǎng)站，就很好地利用了白色。12/29/2022白色1/1/2023總結(jié)作為一名設(shè)計師，了解色彩是一件必不可少的事兒。在設(shè)計的時候應(yīng)該慎重地考慮和選用顏色。通過不同的顏色，可以創(chuàng)造出不同感覺的圖像。合適的組合可以獲得關(guān)注，通過視覺傳達設(shè)計師所想，進一步拉近設(shè)計師與觀眾的距離，讓圖像更具力量。如果之前并不仔細考慮用色，現(xiàn)在開始，應(yīng)該培養(yǎng)對于色彩的感覺。相信客戶會看到一個不一樣的你，你的設(shè)計作品將會通過顏色建立聯(lián)想，更好地傳達信息。12/29/2022總結(jié)1/1/2023Page

2512/29/2022Page251/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/2023初學(xué)者的6條網(wǎng)頁設(shè)計安全配色指南12/29/2022初學(xué)者的6條網(wǎng)頁設(shè)計安全配色指南1/1/20231.配色方案是畫布，不是畫網(wǎng)頁設(shè)計中最基本的原則之一是，不管你花多長時間創(chuàng)造一個華麗的設(shè)計，其最終的角色都是這場秀中真正的明星——內(nèi)容的襯托。網(wǎng)頁設(shè)計中不應(yīng)該讓配色比內(nèi)容展示更加“熱鬧”。你的設(shè)計應(yīng)該是在后臺的，幫助將網(wǎng)站的內(nèi)容推向前臺。12/29/20221.配色方案是畫布，不是畫網(wǎng)頁設(shè)計1/1/202312/29/20221/1/20232.從簡單的灰度模式開始你可以為你的主背景和文本從無數(shù)的色彩組合中進行挑選。然而，我的建議是先掌握最簡單的，白色或淺灰色背景搭配深灰色的文本。這種組合你基本保證了為訪客提供可讀性，并允許基于內(nèi)容的文本和圖像進入前景。利用一些示例內(nèi)容制定一個基本的灰度布局，例如：12/29/20222.從簡單的灰度模式開始你可以為你1/1/2023建議：一般來說，你應(yīng)該避免使用純黑的文本，深灰色相對來說更易閱讀。一個相對舒適的范圍是#333333至#666666?；谏鲜?，在任何文本主體下，最保險的背景色是全白#FFFFFF。對于其他的背景元素，背景色的范圍可以從#FFFFFF至#CCCCCC.再次聲明，這些并不是你必須使用的顏色準(zhǔn)則，僅僅只是你可以開始安全設(shè)計的一些指南。12/29/2022建議：一般來說，你應(yīng)該避免使用純黑的文本1/1/20233.只選擇一種強調(diào)色配色方案出錯的最常見的地方就是顏色使用過多。你使用的顏色越多，你想要將它們都保持在控制中就越困難。所以一開始，在灰度基礎(chǔ)之上只添加一種額外的顏色來強調(diào)諸如鏈接、某些標(biāo)題、菜單、按鈕等等元素是很有用的。你的強調(diào)色可以是藍色、綠色、紅色或其它任何你喜歡的顏色。12/29/20223.只選擇一種強調(diào)色配色方案出錯的1/1/2023通常做法：開始在你的基礎(chǔ)圖上拉一個強調(diào)色的矩形框，這樣你可以衡量顏色是否與頁面上所有的元素匹配。然后打開顏色選擇器，選擇在顏色面板右上角四分之一中心位置的顏色。12/29/2022通常做法：開始在你的基礎(chǔ)圖上拉一個強調(diào)色1/1/2023色相的選擇：上下移動滑塊，選擇一個你認(rèn)為適合你設(shè)計的顏色。至此，你已經(jīng)使用了三種基本顏色：背景色，文本色，以及一種強調(diào)色。

怎樣選擇“色相”？簡而言之，色相就是一種基本色。當(dāng)你上下移動滑塊的時候你就會看到你顏色選擇器中的“H”值在不斷變化。

“H代表色相，一旦你選擇強調(diào)色，文本框中數(shù)值就是色相的值。12/29/2022色相的選擇：上下移動滑塊，選擇一個你認(rèn)為1/1/2023４.如果有疑問，選擇藍色如果你對選擇什么強調(diào)色有任何疑問，請使用藍色。藍色通常是最靈活的顏色，適合多數(shù)的網(wǎng)站類型。如果你要選擇特別的藍色，你可以選擇深藍色（H值235）至淺綠色（H值190）的范圍以保證自己在安全的領(lǐng)地。紫色和黃色之類的顏色可以是很活潑的，但是如果使用不當(dāng)?shù)脑?，立馬會變得很花哨。12/29/2022４.如果有疑問，選擇藍色如果你對選1/1/2023假如你在按鈕或任何其他有文字的區(qū)域使用了強調(diào)色，也要相應(yīng)地改變文本的顏色。在這個例子中，將強調(diào)色區(qū)域之上的文字改成了白色。

在下面的布局示例中，選擇值為205的色相。當(dāng)你已經(jīng)選定了強調(diào)色，將它添加到任何你認(rèn)為必需的位置。12/29/2022假如你在按鈕或任何其他有文字的區(qū)域使1/1/2023５.為強調(diào)色添加變化一旦選定了強調(diào)色，將色相（H）滑條位置保持不變。做法：在顏色選擇器上強調(diào)色周圍拖動選色點來創(chuàng)建變色。12/29/2022５.為強調(diào)色添加變化一旦選定了強調(diào)1/1/2023在以下這些元素上使用變色：懸停效果邊框強調(diào)色上的文本漸變光和陰影的效果12/29/2022在以下這些元素上使用變色：懸停效果邊框強1/1/2023６.避開調(diào)色面板右上角的位置顏色選擇器上右上角的位置是高純度的顏色。最好去嘗試使用更緩和的顏色。這就是為什么在第三點讓你選擇右上角四分之一中心位置的顏色，以確保以一種相對柔和的顏色開始。為了說明這一點，看一下假如只改變設(shè)計的色相，不再動顏色選擇器，會是什么效果。12/29/2022６.避開調(diào)色面板右上角的位置顏色選擇1/1/2023遵循一般的指南避開顏色面板上右上角的位置來進行調(diào)色。12/29/2022遵循一般的指南避開顏色面板上右上角的位置1/1/2023色彩理論的其它方面12/29/2022色彩理論的其它方面1/1/2023１、飽和度和明度當(dāng)你在顏色選擇器上拖動選色點的時候，你會看到“S”和“B”的值在改變，這分別代表“飽和度”和“亮度”。同時你會也看到色相的值保持不變。所以你是通過改變基礎(chǔ)色的飽和度和亮度來創(chuàng)建變色的。

12/29/2022１、飽和度和明度1/1/2023２、飽和度和色彩飽和度生動地表達了你的顏色。舉個例子來說，想象一下“我的白襯衫被溢出的紅酒滲透了”。在顏色選擇器上，飽和度取決于有多少的白色與你的基本色進行混合。白色越少，飽和度越高。當(dāng)你向右拖動選色點的時候，你減少了白色的量，提高了飽和度，因此“S”值上升了。當(dāng)你向左拖動選色點的時候，你增加了白色的量，降低了飽和度，因此“S”值下降了。

這種將基本色與白色混合的方式也叫做創(chuàng)建一種“色彩”。這個詞來自于顏料混合，就是將白色的顏料與彩色的顏料進行混合。12/29/2022２、飽和度和色彩1/1/2023３、亮度與色度亮度是往你的顏色中混合多少黑色。黑色越少，亮度越大。當(dāng)你向上拖動選擇點的時候，你減少了黑色的量，提高了亮度，因此，拾色器上的“B”值就上升了。當(dāng)向下拖動選擇點的時候，你增加了黑色，“B”值就下降了。

這種將基本色與黑色混合的方式也叫做創(chuàng)建“色度”。這同樣來自于顏料混合，就是將黑色的顏料與彩色的顏料進行混合。12/29/2022３、亮度與色度1/1/2023４、色調(diào)

當(dāng)你用灰色混合基本色時就創(chuàng)建了“色調(diào)”。當(dāng)你從色板的右上角挪出的時候，你同時降低了飽和度和亮度，也就是同時增加了白色和黑色（灰色），也就創(chuàng)建了色調(diào)。因此基本上任何時候只要你的飽和度和亮度都不到100%，這就是一種色調(diào)。同樣，這個術(shù)語來自于顏料混合，將灰色顏料與一種彩色顏料混合。這也就是詞語“調(diào)淡”的由來。12/29/2022４、色調(diào)1/1/2023５、單色配色方案

“單色”配色方案是使用基本色以及基于基本色調(diào)整顏色的濃淡、陰影及色調(diào)來進行擴展。因此通過挑選一種強調(diào)色以及它的變色，實際上已經(jīng)創(chuàng)建了單色的配色方案。

12/29/2022５、單色配色方案1/1/2023接下來呢？………12/29/2022接下來呢？………1/1/2023第一：在灰度基礎(chǔ)上繼續(xù)練習(xí)你的單色配色方案直到你已經(jīng)非常自信。試著用不同的色相作為你的強調(diào)色來進行創(chuàng)作，嘗試在使用中改變飽和度和亮度。12/29/2022第一：1/1/2023第二：當(dāng)你覺得得心應(yīng)手的時候，繼續(xù)添加一個額外的強調(diào)色。建議你在第一次嘗試的時候使用橙色和藍色，因為它們是相處最和諧的“二人組”。然后嘗試綠色和藍色，在我的經(jīng)驗中，這是第二簡單的。這些組合是最容易打動客戶的。12/29/2022第二：1/1/2023推薦網(wǎng)址：/sheji12/29/2022推薦網(wǎng)址：http://www.hao11/1/2023《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》《超贊！設(shè)計師完全自學(xué)指南》《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》推薦博文網(wǎng)站：12/29/2022《從菜鳥到高手！PHOTOSHOP摳圖全1/1/20231在網(wǎng)絡(luò)上查找網(wǎng)站策劃書，熟悉規(guī)劃書的結(jié)構(gòu)及內(nèi)容，寫報告時參考。２、參考”網(wǎng)站結(jié)構(gòu)分析-參考（可從5－>課程資源－>web綜合實踐課程資源菜單下下載）”文件，自行策劃某網(wǎng)站，撰寫網(wǎng)站結(jié)構(gòu)分析，學(xué)號+中文姓名壓縮上傳到5，截止本周日。３、根據(jù)所學(xué)的WUI知識完成網(wǎng)站主頁和內(nèi)容頁的效果圖制作（.psd），下周日之前上傳到5。作業(yè)：12/29/20221在網(wǎng)絡(luò)上查找網(wǎng)站策劃書，熟悉規(guī)劃書的1/1/202312/29/2022謝謝！謝謝！信息工程學(xué)院

《web編程基礎(chǔ)綜合實踐》信息工程學(xué)院

《web編程基礎(chǔ)綜合實踐》1/1/2023網(wǎng)站界面設(shè)計主講人：常艷芬12/29/2022網(wǎng)站界面設(shè)計主講人：常艷芬1/1/2023網(wǎng)站界面設(shè)計概念(WebUserInterface)網(wǎng)站界面設(shè)計要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計與網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來；而網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿，按照W3C規(guī)范用html（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）將其制作成網(wǎng)頁格式。別名：網(wǎng)站建設(shè),網(wǎng)頁設(shè)計，網(wǎng)站策劃12/29/2022網(wǎng)站界面設(shè)計概念(WebUserIn1/1/2023UI設(shè)計師發(fā)展之路12/29/2022UI設(shè)計師發(fā)展之路1/1/202312/29/20221/1/2023WUI（WEB界面設(shè)計）模塊課程內(nèi)容目標(biāo)學(xué)時展示W(wǎng)UI軟件基礎(chǔ)Fireworks軟件的基本構(gòu)成、矢量工具和位圖工具、WUI用戶界面及廣告設(shè)計。了解WUI常用軟件工具、功能的使用；理解企業(yè)及客戶的基本要求；掌握WUI界面模塊的設(shè)計。72Dreamweaver建立站點、添加頁面元素、使用CSS樣式及交互行為。FlashFlash中的動畫制做原理與技巧，典型WUI商業(yè)廣告中的Flash技術(shù)與實現(xiàn)。WUI界面設(shè)計WEB界面設(shè)計WEB界面的分類，企業(yè)網(wǎng)站界面、門戶網(wǎng)站界面、專題活動界面的分析與設(shè)計。了解WUI標(biāo)準(zhǔn)設(shè)計規(guī)范及風(fēng)格；理解企業(yè)客戶對設(shè)計的需求和期望值；掌握網(wǎng)站及軟件界面設(shè)計的技能和技巧。24PC客戶端軟件界面設(shè)計PC客戶端軟件界面的類型，企業(yè)OA辦公軟件、觸摸屏管理展示系統(tǒng)界面的分析與設(shè)計。WEB標(biāo)準(zhǔn)化布局（X）HTML/HTML5語言HTML語法與常用標(biāo)簽的詳解，包括布局標(biāo)簽，表格標(biāo)簽，表單標(biāo)簽等。了解網(wǎng)站布局的三大核心部分：結(jié)構(gòu)標(biāo)簽，修飾語言和行為語言；理解CSS修飾的用途及意義；掌握基于WEB標(biāo)準(zhǔn)的網(wǎng)站結(jié)構(gòu)搭建、WEB界面外觀美化和主流瀏覽器兼容。48CSS樣式表CSS語法與常用屬性的詳解，使用CSS對網(wǎng)站中各個模塊進行修飾美化。布局技巧與瀏覽器兼容對頁面布局結(jié)構(gòu)進行深入的分析。系統(tǒng)的講解瀏覽器兼容的處理解決辦法，并帶領(lǐng)學(xué)生完成各種網(wǎng)站布局實訓(xùn)。階段實訓(xùn)中小型企業(yè)網(wǎng)站項目華為技術(shù)有限公司企業(yè)整站設(shè)計實訓(xùn)。了解實訓(xùn)方案及需求；理解實訓(xùn)對于學(xué)生就業(yè)的積極意義；掌握獨立完成企業(yè)級應(yīng)用項目的技能。3212/29/2022WUI（WEB界面設(shè)計）模塊課程內(nèi)容目標(biāo)講解提綱１、3C原則2、顏色的意義３、UI設(shè)計色彩搭配４、安全配色指南５、其它色彩理論６、建議與經(jīng)驗７、學(xué)習(xí)資料推薦1/1/2023講解提綱１、3C原則12/29/20221/1/20233Ｃ原則12/29/20223Ｃ原則1/1/2023網(wǎng)站界面設(shè)計3C原則

Concision(簡潔)

Coherence（一致性）

Contrast(對比度)12/29/2022網(wǎng)站界面設(shè)計3C原則Concisio1/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/2023顏色的意義12/29/2022顏色的意義1/1/2023紅色紅色是代表愛情和激情的顏色。紅色是很強勢的顏色，當(dāng)它和其他顏色相遇時，比如搭配黑色，可以創(chuàng)建非常強勢的感覺。12/29/2022紅色1/1/2023橙色

橙色代表了溫暖，但是并不像紅色那樣咄咄逼人。橙色能夠創(chuàng)建一個有趣的氛圍，因為它充滿了活力，而且橙色創(chuàng)造出的活躍氣氛并沒有危險的感覺。橙色可以與一些健康產(chǎn)品搭上關(guān)系，比如維生素C，畢竟橙子里也有很多維生素C。12/29/2022橙色1/1/2023黃色提到黃色，經(jīng)?？梢月?lián)想到太陽和溫暖。使用橙色的時候，可以創(chuàng)造出一種夏天的好玩的感覺，黃色則帶給人口渴的感覺，所以經(jīng)?？梢栽谫u飲料的地方看到黃色的裝飾。黃色也可以和懦弱與恐懼聯(lián)系起來，這個則是因為以前“yellow”這個詞也代表著這個意思。當(dāng)黃色與黑色搭配在一起時，十分吸引人的注意力，一個絕佳的例子就是很多國家的出租車都采用這種配色。12/29/2022黃色1/1/2023綠色在西方國家，綠色是錢的顏色，這與他們的文化和財富有關(guān)。因為大多數(shù)植物都是綠色的。綠色也代表著經(jīng)濟增長和健康。綠色經(jīng)常用作一些保健食品的LOGO，因為看起來就十分貼近自然。綠色還意味著利潤和收益。如果搭配上藍色，通常會給人健康、清潔、生活和自然的感覺。12/29/2022綠色1/1/2023藍色藍色是一個神奇的顏色，因為不同明度的藍色會給人不同的感受、想法和情緒。如下圖中所示，深藍色可以給人一種悲傷的感覺，讓人聯(lián)想起傷心時怎么聽都不夠的藍調(diào)音樂。而淺藍色則通常會讓人聯(lián)想起天空和水，給人以提神、自由和平靜的感覺。藍天永遠都是平靜的，水流可以沖走泥土，清洗傷口，所以藍色也代表著新鮮和更新。藍色給人冷靜的感覺，會幫助人放松下來。12/29/2022藍色1/1/2023紫色紫色總是讓人不禁想起皇室成員的長袍。紫色可以更多地與浪漫、親密、柔軟舒適的質(zhì)感產(chǎn)生聯(lián)系。紫色給人一種奢華的感覺，也有一種神秘感。下面這個葡萄酒網(wǎng)站就是極好的例子。12/29/2022紫色1/1/2023黑色黑色通常與死亡有關(guān)，尤其是在美國。它可以代表腐壞，因為很多食物腐壞變質(zhì)以后就是黑色的。黑色也代表邪惡，因為是白色的對立顏色，而白色通常代表著純潔美好善良。黑暗和未知也會給人焦慮的感覺。很多圖像中，黑色表達了抑郁、絕望和孤獨。雖然黑色有很多負面的含義，但是黑色也是一個萬能色彩，當(dāng)黑色遇上其他顏色的時候會產(chǎn)生其他的意義。比如當(dāng)黑色邂逅金黃色，就可以給人一種奢華、高檔的感覺；當(dāng)黑色偶遇銀灰色，則會給人一種成熟穩(wěn)重的感覺。下面的網(wǎng)站就完美詮釋了這一點。12/29/2022黑色1/1/2023白色白色通常與醫(yī)院聯(lián)系在一起，因為醫(yī)生們都是穿著白大褂的，而且醫(yī)院內(nèi)部的裝修通常也是白色的。此外，宗教繪畫有時候也是沒有色彩的，白色也代表著圣潔。白色通常給人干凈的感覺，比如白色的床單和衣服都讓人感覺很干凈。也可以代表棉花和柔軟的云朵。心理健康相關(guān)的事物也可以選用白色，白色也同樣適用于衛(wèi)生、清潔相關(guān)的設(shè)計。比如下面這個網(wǎng)站，就很好地利用了白色。12/29/2022白色1/1/2023總結(jié)作為一名設(shè)計師，了解色彩是一件必不可少的事兒。在設(shè)計的時候應(yīng)該慎重地考慮和選用顏色。通過不同的顏色，可以創(chuàng)造出不同感覺的圖像。合適的組合可以獲得關(guān)注，通過視覺傳達設(shè)計師所想，進一步拉近設(shè)計師與觀眾的距離，讓圖像更具力量。如果之前并不仔細考慮用色，現(xiàn)在開始，應(yīng)該培養(yǎng)對于色彩的感覺。相信客戶會看到一個不一樣的你，你的設(shè)計作品將會通過顏色建立聯(lián)想，更好地傳達信息。12/29/2022總結(jié)1/1/2023Page

8912/29/2022Page251/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/202312/29/20221/1/2023初學(xué)者的6條網(wǎng)頁設(shè)計安全配色指南12/29/2022初學(xué)者的6條網(wǎng)頁設(shè)計安全配色指南1/1/20231.配色方案是畫布，不是畫網(wǎng)頁設(shè)計中最基本的原則之一是，不管你花多長時間創(chuàng)造一個華麗的設(shè)計，其最終的角色都是這場秀中真正的明星——內(nèi)容的襯托。網(wǎng)頁設(shè)計中不應(yīng)該讓配色比內(nèi)容展示更加“熱鬧”。你的設(shè)計應(yīng)該是在后臺的，幫助將網(wǎng)站的內(nèi)容推向前臺。12/29/20221.配色方案是畫布，不是畫網(wǎng)頁設(shè)計1/1/202312/29/20221/1/20232.從簡單的灰度模式開始你可以為你的主背景和文本從無數(shù)的色彩組合中進行挑選。然而，我的建議是先掌握最簡單的，白色或淺灰色背景搭配深灰色的文本。這種組合你基本保證了為訪客提供可讀性，并允許基于內(nèi)容的文本和圖像進入前景。利用一些示例內(nèi)容制定一個基本的灰度布局，例如：12/29/20222.從簡單的灰度模式開始你可以為你1/1/2023建議：一般來說，你應(yīng)該避免使用純黑的文本，深灰色相對來說更易閱讀。一個相對舒適的范圍是#333333至#666666。基于上述，在任何文本主體下，最保險的背景色是全白#FFFFFF。對于其他的背景元素，背景色的范圍可以從#FFFFFF至#CCCCCC.再次聲明，這些并不是你必須使用的顏色準(zhǔn)則，僅僅只是你可以開始安全設(shè)計的一些指南。12/29/2022建議：一般來說，你應(yīng)該避免使用純黑的文本1/1/20233.只選擇一種強調(diào)色配色方案出錯的最常見的地方就是顏色使用過多。你使用的顏色越多，你想要將它們都保持在控制中就越困難。所以一開始，在灰度基礎(chǔ)之上只添加一種額外的顏色來強調(diào)諸如鏈接、某些標(biāo)題、菜單、按鈕等等元素是很有用的。你的強調(diào)色可以是藍色、綠色、紅色或其它任何你喜歡的顏色。12/29/20223.只選擇一種強調(diào)色配色方案出錯的1/1/2023通常做法：開始在你的基礎(chǔ)圖上拉一個強調(diào)色的矩形框，這樣你可以衡量顏色是否與頁面上所有的元素匹配。然后打開顏色選擇器，選擇在顏色面板右上角四分之一中心位置的顏色。12/29/2022通常做法：開始在你的基礎(chǔ)圖上拉一個強調(diào)色1/1/2023色相的選擇：上下移動滑塊，選擇一個你認(rèn)為適合你設(shè)計的顏色。至此，你已經(jīng)使用了三種基本顏色：背景色，文本色，以及一種強調(diào)色。

怎樣選擇“色相”？簡而言之，色相就是一種基本色。當(dāng)你上下移動滑塊的時候你就會看到你顏色選擇器中的“H”值在不斷變化。

“H代表色相，一旦你選擇強調(diào)色，文本框中數(shù)值就是色相的值。12/29/2022色相的選擇：上下移動滑塊，選擇一個你認(rèn)為1/1/2023４.如果有疑問，選擇藍色如果你對選擇什么強調(diào)色有任何疑問，請使用藍色。藍色通常是最靈活的顏色，適合多數(shù)的網(wǎng)站類型。如果你要選擇特別的藍色，你可以選擇深藍色（H值235）至淺綠色（H值190）的范圍以保證自己在安全的領(lǐng)地。紫色和黃色之類的顏色可以是很活潑的，但是如果使用不當(dāng)?shù)脑?，立馬會變得很花哨。12/29/2022４.如果有疑問，選擇藍色如果你對選1/1/2023假如你在按鈕或任何其他有文字的區(qū)域使用了強調(diào)色，也要相應(yīng)地改變文本的顏色。在這個例子中，將強調(diào)色區(qū)域之上的文字改成了白色。

在下面的布局示例中，選擇值為205的色相。當(dāng)你已經(jīng)選定了強調(diào)色，將它添加到任何你認(rèn)為必需的位置。12/29/2022假如你在按鈕或任何其他有文字的區(qū)域使1/1/2023５.為強調(diào)色添加變化一旦選定了強調(diào)色，將色相（H）滑條位置保持不變。做法：在顏色選擇器上強調(diào)色周圍拖動選色點來創(chuàng)建變色。12/29/2022５.為強調(diào)色添加變化一旦選定了強調(diào)1/1/2023在以下這些元素上使用變色：懸停效果邊框強調(diào)色上的文本漸變光和陰影的效果12/29/2022在以下這些元素上使用變色：懸停效果邊框強1/1/2023６.避開調(diào)色面板右上角的位置顏色選擇器上右上角的位置是高純度的顏色。最好去嘗試使用更緩和的顏色。這就是為什么在第三點讓你選擇右上角四分之一中心位置的顏色，以確保以一種相對柔和的顏色開始。為了說明這一點，看一下假如只改變設(shè)計的色相，不再動顏色選擇器，會是什么效果。12/29/2022６.避開調(diào)色面板右上角的位置顏色選擇1/1/2023遵循一般的指南避開顏色面板上右上角的位置來進行調(diào)色。12/29/2022遵循一般的指南避開顏色面板上右上角的位置1/1/2023色彩理論的其它方面12/29/2022色彩理論的其它方面1/1/2023１、飽和度和明度當(dāng)你在顏色選擇器上拖動選色點的時候，你會看到“S”和“B”的值在改變，這分別代表“飽和度”和“亮度”。同時你會也看到色相的值保持不變。所以你是通過改變基礎(chǔ)色的飽和度和亮度來創(chuàng)建變色的。

12/29/2022１、飽和度和明度1/1/2023２、飽和度和色彩飽和度生動地表達了你的顏色。舉個例子來說，想象一下“我的白襯衫被溢出的紅酒滲透了”。在顏色選擇器上，飽和度取決于有多少的白色與你的基本色進行混合。白色越少，飽和度越高。