網(wǎng)頁視覺設(shè)計的問題
由于網(wǎng)頁是視覺讀取的對象，因此瀏覽者需要注目讀取才能獲得網(wǎng)站的信息，因此，網(wǎng)頁需要簡約、生動的界面才能引起讀者的注意和留存，在視覺設(shè)計中需要注意圖文結(jié)合以及動態(tài)因素的利用。下面介紹網(wǎng)頁視覺設(shè)計的問題，希望對您有幫助。
[圖片0]
一、頁面視覺設(shè)計的基本特性
(一)直觀性。網(wǎng)頁是互聯(lián)網(wǎng)時代的特殊產(chǎn)物，根據(jù)其視覺瀏覽的需求特征，使頁面的設(shè)計具有視覺上的直觀性能，即人們常常在不需要仔細(xì)深入了解具體網(wǎng)站的內(nèi)容時，可以從打開的頁面有一個最直接的感受，因此網(wǎng)頁的色彩、圖片、布局設(shè)計都決定著瀏覽者的第一印象。
(二)注目性。由于網(wǎng)頁是視覺讀取的對象，因此瀏覽者需要注目讀取才能獲得網(wǎng)站的信息，因此，網(wǎng)頁需要簡約、生動的界面才能引起讀者的注意和留存，在視覺設(shè)計中需要注意圖文結(jié)合以及動態(tài)因素的利用。
(三)選擇性。網(wǎng)站的頁面上往往包含大量的信息，但是并不是所有信息都是瀏覽者所需要的，瀏覽者在獲取信息時具有選擇性，因而在頁面的視覺設(shè)計中，需要注意網(wǎng)站主題特色，把握住各部分信息的主次關(guān)系，安排其排列位置和視覺沖擊強(qiáng)度，便于讀者快速選取。
二、視覺設(shè)計的基本元素
(一)文字。對于絕大多數(shù)網(wǎng)頁而言，文字是信息構(gòu)成的主體，它與圖片容易造成歧義不同，具有直接準(zhǔn)確傳遞信息的特性，使瀏覽者可以準(zhǔn)確地、方便地接受信息。但是文字過多，給人長篇累牘的感覺，讓人心中生厭，影響瀏覽者的閱讀情緒，所以在視覺設(shè)計中，要對文字采取一定的格式處理和藝術(shù)加工。所謂的格式處理，就是指對文字的字體、粗細(xì)、字號、顏色等加以處理，使之格式多樣、變化豐富，打破呆板、累贅的形象。藝術(shù)加工是指對頁面的文字，根據(jù)其所處位置和作用地位的差異，來加以圖像化、風(fēng)格化的藝術(shù)手段處理，讓文字更具有個性風(fēng)格，顯得更加生動形象，易于讀者輕松接受。
(二)色彩。在網(wǎng)頁的視覺設(shè)計中，色彩設(shè)計主要有五個部分組成，即標(biāo)準(zhǔn)色彩、圖片主色彩、邊框色彩、背景色彩和文字鏈接的色彩。由于人們的審美特點各有不同，不可能使頁面的視覺效果完全滿足所有人的瀏覽需求，但是就主色調(diào)方面而言，人們通常易于接受的色彩基本是一致的。頁面的使用者在瀏覽頁面的第一印象就是界面的色彩主體構(gòu)成，它直接關(guān)系到瀏覽者是否有繼續(xù)瀏覽下去的興趣。所以頁面的色彩選擇必須符合當(dāng)前人們的審美習(xí)慣，在確定頁面主體的色調(diào)時，既要尊重受眾的心理需求又要符合網(wǎng)站自身的主題定位。網(wǎng)站頁面的色彩既不能太過于單一，也不能色彩斑斕，這就需要把握一個適中標(biāo)準(zhǔn)。在確定主體色調(diào)以后，按照主次、輕重關(guān)系，對圖片、標(biāo)題、邊框、文字鏈接的色彩做出有層次的選擇，絕對不能喧賓奪主，要處理好各部分之間的關(guān)系以及各部分與整體之間的關(guān)系，色彩種類也不宜過多，以免瀏覽者產(chǎn)生視覺疲勞。
(三)圖片。在頁面的組成部分中，圖片是除文字以外最重要的構(gòu)成要素，也是最早引用到網(wǎng)絡(luò)中的多媒體對象。文字的特點是能夠直觀、準(zhǔn)確地傳遞信息，而圖片則可以打破純文字界面的枯燥、平淡的格局，為頁面增添活力，圖文并茂，使網(wǎng)頁生動形象，充滿感情色彩。一般情況下，網(wǎng)頁中使用的圖片分辨率不需要太高，因為過高的分辨率勢必使圖片的容量加大，會影響到網(wǎng)頁的瀏覽速度。在網(wǎng)頁設(shè)計中，圖片的大小、位置和方向都會影響到信息的表達(dá)，在整體編排中，應(yīng)該分清重點和主次，對引用到的所有圖片先做整體上的布局處理，然后使圖片之間、圖片和文字之間的關(guān)系和諧，頁面整體布局和諧統(tǒng)一。
(四)版面。版面設(shè)計是在有限的屏幕空間界面對所有多媒體元素進(jìn)行有機(jī)整合，使整體頁面布局合理得到，感官效果好，便于受眾接受。版面設(shè)計的成功與否，影響到網(wǎng)頁核心信息的傳遞價值和瀏覽者的視覺留存時間，是網(wǎng)頁整體感的直觀傳遞。在進(jìn)行版面設(shè)計時，主要利用點、線、面的依存關(guān)系，對頁面的所有組成要素進(jìn)行空間位置的排列，這一過程需要在網(wǎng)頁自身價值表達(dá)的需求下，充分挖掘各多媒體因素的相互關(guān)系，使這些要素在視覺感受中體現(xiàn)出均衡、調(diào)和、律動的視覺效果，讓整個界面生動起來，不平淡、不呆板。在版面的視覺處理上，需要把握好主題與素材、整體與個體之間的關(guān)系，在統(tǒng)一之中尋求變化，在不對稱中尋找均衡點，促成頁面整體的和諧效果。
三、頁面的視覺設(shè)計原則
(一)風(fēng)格的確定
在對網(wǎng)站頁面進(jìn)行頁面設(shè)計之前，一定要確定好基本的主體風(fēng)格，使其與網(wǎng)站的主題側(cè)重點保持一致，只有內(nèi)容與形式和諧統(tǒng)一，才能使網(wǎng)站的宣傳到達(dá)理想效果。在確定主體風(fēng)格的過程中，還要充分考慮網(wǎng)站受眾面的群體特征，即瀏覽者的大眾需求和審美偏好。
(二)色彩的處理
對于視覺沖擊而言，色彩是給人最直觀的視覺體會，和諧適當(dāng)?shù)纳拾才趴梢詩Z人眼球，吸引瀏覽者的注意力。因此在色彩的設(shè)計中，應(yīng)該首先確定與主題風(fēng)格相統(tǒng)一的主打色調(diào)，可以是暖色調(diào)、冷色調(diào)或者采用對比色調(diào)描述網(wǎng)頁設(shè)計的一般步驟，這個完全要根據(jù)頁面信息傳遞的需要而定。然后分清主次，分別對背景色、圖片顏色、文字顏色等等做出具體的處理，注意色彩的使用層次，不可喧賓奪主。
(三)版面的編排
網(wǎng)頁的視覺設(shè)計屬于交叉學(xué)科范疇，在版面的布局安排上基本和平面媒體的設(shè)計有異曲同工之處。在有限的屏幕界面內(nèi)對構(gòu)成要素做出編排，需要充分考慮各要素之間的依存關(guān)聯(lián)和信息內(nèi)容的輕重，通過空間上的排列組合，使整個界面和諧統(tǒng)一，生動形象。如何做到科學(xué)合理的版面設(shè)計，需要從三個大的方面考慮:一是主次分明，讓瀏覽者可以輕松判別信息的價值，便于快速選取核心信息;二是圖文并茂，相得益彰，注意文字與圖片的結(jié)合;三是錯落搭配，具有動態(tài)感，對要素的位置、大小、方向的處理要錯落有致，并把握整體的動態(tài)感，使之生動有氣息。
網(wǎng)頁色彩的設(shè)計方法
網(wǎng)頁色彩設(shè)計得好，可以為網(wǎng)站錦上添花，收到事半功倍的傳播效果。在網(wǎng)頁色彩設(shè)計中，要充分利用色彩的色相、明度、純度、遠(yuǎn)近、冷暖、輕重等對比關(guān)系，強(qiáng)化網(wǎng)頁的視覺效果。
1.確定網(wǎng)站的主角調(diào)及輔助色
網(wǎng)頁中可以采用多種色彩，但一個網(wǎng)頁中只能有一個主色調(diào)。主色調(diào)就好比樂曲中的主旋律，對網(wǎng)頁起著主導(dǎo)作用。
選擇主色調(diào)時，應(yīng)首先確定網(wǎng)站的主題、服務(wù)對象和所要表達(dá)的氣氛，以及利用色彩所希望達(dá)到的目的，如樹立形象、推廣產(chǎn)品、娛樂大眾、傳播信息等。不同的網(wǎng)站定位，會延伸出不同的色彩取向，該色彩取向決定了這個網(wǎng)站的風(fēng)格，或嚴(yán)肅、或活潑、或前衛(wèi)等。
主色調(diào)主導(dǎo)著整個網(wǎng)頁的風(fēng)格和意境，而輔助色的面積雖小，卻起著緩沖和強(qiáng)調(diào)的作用。輔助色能讓頁面有生氣、有趣味，使主色調(diào)流暢。輔助色與主色調(diào)搭配合理，可使整個頁面特色鮮明，引人注目。網(wǎng)頁的輔助色可用主調(diào)色的鄰近色，也可用對比色。一般情況下，可選擇一兩種輔助色配合使用，整個網(wǎng)頁的色彩最好控制在三種顏色之內(nèi)。網(wǎng)頁也可以采用單色調(diào)，以形成一種醒目的風(fēng)格，需要注意的是，應(yīng)在網(wǎng)頁的局部采用少量小面積的對比色，以達(dá)到豐富頁面的效果。
在色調(diào)的使用方面，采用高飽和度的色彩，如黃色、紅色作為網(wǎng)頁的主色調(diào)，能展現(xiàn)活潑、樂觀、希望、充滿生命力的氣氛，具有強(qiáng)烈的視覺吸引力;采用具有中、低明度和飽和度的復(fù)合色或消色如淺灰、藍(lán)灰、暗綠、棗紅等，作為網(wǎng)頁的主色調(diào)，既不炫目，也不黯淡，對眼睛的刺激適中，可傳達(dá)嚴(yán)肅、優(yōu)雅、穩(wěn)重、富有內(nèi)涵的氛圍;以粉彩等柔和色調(diào)為主色調(diào)的網(wǎng)頁，則可傳達(dá)明朗、輕松、歡快的氣氛，如粉紅、檸檬黃、天藍(lán)、新綠等。
2.確定文字、配圖的色彩效果
作品內(nèi)容的表現(xiàn)是通過造型、色彩、構(gòu)圖、文字等多種形式共同完成的，內(nèi)容與形式的統(tǒng)一是色彩協(xié)調(diào)成功的條件。不同的內(nèi)容需要不同的色彩來表現(xiàn)。
網(wǎng)頁以文字信息為主，網(wǎng)頁文字要有良好的可讀性與清晰度，除了考慮文字的字體、大小、字距、行距等以外，還必須重視文字色彩與背景色彩的配合。背景與文本的色彩對比要盡量大(一般明度對比為3∶1~5∶1)，以便突出文字內(nèi)容，但文字色彩不要過于亮麗，以免造成過強(qiáng)的視覺刺激。
對于圖形感較強(qiáng)烈的頁面，首先要將底色與圖形色的反差拉開。如使用一些在色相、明度、飽和度上具有強(qiáng)對比關(guān)系的色彩，這樣既能起到烘托主題圖形的作用，也可使得頁面色彩主次分明。其次，要結(jié)合圖形的面積情況處理底色和圖形色:如果圖形大，則圖形色可以使用主色調(diào);如果圖形小，則圖形色可配置鮮艷的色彩。
此外，還要注意超鏈接翻轉(zhuǎn)效果。當(dāng)前超鏈接及已訪問過的超鏈接的文本色彩與其他文本的色彩要有差別，以利于瀏覽者進(jìn)一步鏈接。翻轉(zhuǎn)頁的色彩也應(yīng)與超鏈接頁面色彩有所不同，這樣可以突出已選到的超鏈接;但已訪問的超鏈接頁面色彩與超鏈接頁面色彩，可以相同，也可以不同。
3.網(wǎng)頁色彩的配置
主調(diào)色、輔助色、文字色、底色、圖形色都是網(wǎng)頁設(shè)計中不可缺少的色彩，但網(wǎng)頁的色彩品種不宜過多，否則會過于花哨，喧賓奪主。主調(diào)色、輔助色、文字色等不一定要采用不同的色相，有時網(wǎng)頁色彩簡單明了更能突出主題，產(chǎn)生舒適的視覺效果。合理選配網(wǎng)頁色彩，形成主色調(diào)為主小色塊為輔、既對比又調(diào)和的色彩畫面，會賦予網(wǎng)頁以活力和個性描述網(wǎng)頁設(shè)計的一般步驟，最大限度地吸引網(wǎng)民的視線。
(1)同種色的配置。同種色指色相相同而明度、純度不同的顏色。網(wǎng)頁設(shè)計忌用單一色彩以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和度與透明度也可以使單一色彩產(chǎn)生豐富的變化。
(2)類似色的配置。類似色指在色輪上鄰近的色組。采用類似色來設(shè)計網(wǎng)頁，可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。
(3)對比色的配置。一是補(bǔ)色配置，最強(qiáng)的對比色配置。如紅與綠、黃與紫等。二是次對比色配置。合理使用對比色會產(chǎn)生強(qiáng)烈的視覺效果，能夠使網(wǎng)站特色鮮明、重點突出。在設(shè)計網(wǎng)頁色彩時，一般以一種顏色為主色調(diào);對比色作為點綴，可以起到畫龍點睛的作用。
(4)黑、白色的配置。黑、白色雖然不如彩色那樣張揚(yáng)、奔放，但它含蓄、沉穩(wěn)、淡雅的色彩特征更符合都市人的氣質(zhì)，更能展現(xiàn)濃郁的人文氣息與高雅的審美情趣。黑色是一種特殊的顏色，如果使用恰當(dāng)、設(shè)計合理，往往產(chǎn)生很強(qiáng)烈的藝術(shù)效果。
(5)綜合配置。綜合配置指以上諸方法的組合。
4.正確使用圖像及其色彩
圖像在網(wǎng)頁中起著畫龍點睛的作用，不但能裝飾頁面，還能表達(dá)風(fēng)格與情感。但網(wǎng)頁如果圖片過多或色彩使用不當(dāng)，會導(dǎo)致瀏覽、下載的速度變慢，從而使網(wǎng)頁的點擊率下降。所以要正確使用圖像及其色彩。
(1)位圖與矢量圖。以文件數(shù)據(jù)的組織特征進(jìn)行分類，可將眾多的圖像分為兩類:位圖格式;矢量圖格式。位圖又稱為光柵圖文格式，是以像素點的形式來描述圖像。常見的圖像格式有:JPEG格式、BMP格式、PNG格式、TIFF格式等。位圖的色彩豐富逼真，但縮放時會產(chǎn)生失真現(xiàn)象而且所占空間較大。若要向網(wǎng)頁中添加照片或者色彩逼真的圖片，則可以選用位圖。矢量圖是用數(shù)學(xué)方式描述的一種由線段和幾何元素組成的圖形圖像。常用的格式有:AI格式、CDR格式、EPS格式等。矢量格式的圖形在縮放時不失真而且所占空間較小。若要為網(wǎng)頁增加動態(tài)效果，可使用矢量圖，通常采用Flash動畫形式。此外，在進(jìn)行網(wǎng)頁圖片設(shè)計時，應(yīng)該對用戶的帶寬有充分的估計。在帶寬較小的情況下，應(yīng)該權(quán)衡網(wǎng)頁對圖片色彩以及傳輸速度的要求，以決定其主次位置。
(2)保存合適的圖像文件格式。Web瀏覽器內(nèi)部支持多種圖片格式，現(xiàn)在通常使用GIF、JPEG和PNG三種圖片格式。GIF格式是最流行的格式，其特點是所占空間小、下載速度快，較適用于具有簡單色塊的標(biāo)志、圖案，一般不用于保存真彩色的圖像文件，在圖片動畫方面只采用GIF格式，因為JPEG、PNG格式不允許一個文件中有多幅圖像。JPEG格式是一種24位色、高壓縮比的圖像文件格式，通過有損壓縮方式可將圖像文件壓縮到原圖的10%，不適合放大觀看，也不適合印刷，適用于新聞圖片、照片或美術(shù)作品的傳輸。PNG格式使用無損壓縮方式，可以通過不同的儲存方式、以不同的色彩數(shù)目來存儲文件，具有很大彈性。
(3)Web安全色。計算機(jī)提供了一些色彩模式:RGB模式、CMYK模式、Index Color模式、LAB模式等。在網(wǎng)頁色彩設(shè)計中常用RGB模式。RGB模式是計算機(jī)顯示器默認(rèn)的顯示模式，用RGB模式制作出圖像后，經(jīng)處理成為Web圖像就可在網(wǎng)上使用了。當(dāng)超過顯示能力時，計算機(jī)的色彩管理系統(tǒng)會盡力使用最接近的顏色來代替，但效果往往不如人意。為避免色彩被扭曲可使用Web安全調(diào)色板，它支持216種顏色。如果在設(shè)計網(wǎng)頁時使用這些顏色，則無論在何種瀏覽器或平臺上都可達(dá)到相同的色彩效果。所以，設(shè)計師通常選擇Web安全色來設(shè)定網(wǎng)頁背景、文字、表格的顏色，以及色彩簡單的標(biāo)題、動畫、圖形等。當(dāng)然Web安全色也有自身的局限性，如會出現(xiàn)顏色偏暗的問題等。因此，在設(shè)計網(wǎng)頁的色彩時，一方面要考慮色彩的安全問題，另一方面也要考慮色彩的需求問題。
網(wǎng)頁設(shè)計流程是什么
對于網(wǎng)站設(shè)計每個前端工程師都有自己的 一套方法論。就我個人而言，找到適合自己的方法需要大量的實戰(zhàn)演練。
1.效果圖分析。當(dāng)一張psd圖呈現(xiàn)在桌面前時，你需要的，只是冷靜地思考。仔細(xì)地觀察和分析，那些是主，那些是輔，理順各個頁面的組成元素和他們之間的關(guān)系是開頭最最重要的。
[圖片1]
2.布局切圖。通過上一步，對效果圖有一個整體輪廓的印象，下面開始布局規(guī)劃。頁面是三行兩列式還是兩行一列式，需要考慮到網(wǎng)站今后可能改版遇到的某種情況(當(dāng)然，這需要經(jīng)驗)其他網(wǎng)頁的需求，最好考慮到代碼重用和網(wǎng)站的靈活性。如果對頁面的構(gòu)成已經(jīng)相當(dāng)清晰，那就動手吧。切割圖片。那個屬于表現(xiàn)層圖片，那個屬于內(nèi)容層圖片。
3.網(wǎng)站文件規(guī)劃。(有的同學(xué)喜歡把這個步驟放到最后做)我個人喜歡早做 嘻嘻。合理地組織網(wǎng)站文件結(jié)構(gòu)將會讓網(wǎng)站以后的更新與維護(hù)更加方便。包括后續(xù)的開發(fā)。
編碼。這部分每個人的做法還真是不同，我個人，首先打好框架，再分別細(xì)化，填充內(nèi)容。
組建網(wǎng)頁。之所以把第四步和第五步分開，就是為了說明一個道理:內(nèi)容與表現(xiàn)的分離。上一步我們往往做的很沮喪因為我們還看不到實際的效果圖，我們只是單純地想表達(dá)內(nèi)容，這一步就是我們豐富內(nèi)容的時候了。
完成以上步驟，網(wǎng)站終于有個樣子了，下來就是調(diào)整啦，網(wǎng)頁重構(gòu)啦，讓網(wǎng)站更加 。
1、網(wǎng)站策劃負(fù)責(zé)前期收集實際業(yè)務(wù)部門需求及分析市場動態(tài)，確定網(wǎng)站定位;結(jié)合用戶體驗及技術(shù)實現(xiàn)的可能性，確定頁面原型。
2、網(wǎng)站設(shè)計師負(fù)責(zé)根據(jù)頁面原型，設(shè)計成為平面頁面;
3、網(wǎng)站制作(部分公司或團(tuán)隊因架構(gòu)不一致，此處工作也可能由網(wǎng)站設(shè)計師承擔(dān))負(fù)責(zé)將平面頁面切圖，并
網(wǎng)站設(shè)計流程按照SEO優(yōu)化等標(biāo)準(zhǔn)生成html靜態(tài)頁面;
4、網(wǎng)站技術(shù)開發(fā)部門或網(wǎng)站開發(fā)師開發(fā)相關(guān)前、后臺代碼，并完成html頁面的代碼嵌套工作;
5、網(wǎng)站進(jìn)入內(nèi)測、公測及BUG修復(fù)流程;
6、發(fā)布網(wǎng)站并上線(其中包括運(yùn)維工程師的服務(wù)器環(huán)境搭建、部署等工作)。
如何自學(xué)網(wǎng)頁設(shè)計
先學(xué)一學(xué)HTML，找本自己能看懂的教材，瀏覽為主，不用記住所有的概念，只要記住使用原理就行了，這一階段，估計三天就夠了;然后用兩天時間學(xué)CSS，方法同上;進(jìn)而再花些時間了解一下。
然后就可以用記事本嘗試寫幾個網(wǎng)頁，記住這時千萬不要用那些可視化工具，比如、(那些以后再學(xué))。
有一個提高自己“寫網(wǎng)頁”的捷徑，就是上各大網(wǎng)站，把網(wǎng)頁保存下來(什么?你說你不會保存網(wǎng)頁?就是“文件→另存為”)，然后打開保存下來的網(wǎng)頁，點擊右鍵→查看源文件，看看人家的網(wǎng)頁是怎么寫的，然后模仿他們的寫法，不斷規(guī)范自己的代碼。嘿嘿，這個方法不錯吧。先好好模仿一下吧。
接下來該學(xué)一下了。建議一開始就到網(wǎng)上找些實例教程，這些實例教程一般都介紹得很詳細(xì)，跟著它一步一步做下來，每學(xué)會一個實例就掌握了幾項操作，而且也有了自己的作品，很有成就感的，長期積累下來對自己的提高很有幫助。學(xué)主要是學(xué)圖片處理，比如加一些效果，還有很重要的就是切圖，這對于初學(xué)者是很重要的。
這時還可以結(jié)合進(jìn)行學(xué)習(xí)，你就可以體會到和的無縫集成了。利用這些工具多做幾個網(wǎng)頁，你就可以達(dá)到一定水平了。
要是想讓你的網(wǎng)頁多一些炫目的效果，建議你學(xué)一下Flash，難度并不大，而且要是前面的基礎(chǔ)打得好的話，學(xué)到Flash中時，你會有一種似曾相識的感覺，因為這兩種語法幾乎是一模一樣的。
到這時，相信你就可以真正領(lǐng)會到“網(wǎng)頁三劍客”的威力了。
在實踐中不斷提高
要是每天能拿出兩個小時來學(xué)習(xí)，完成以上這些學(xué)習(xí)估計只要20天就差不多了。要是天賦高的話(比如說像我這樣的，呵呵)，那需要的時間就更少了。接下來該實習(xí)了，找個地方鍛煉一下自己，比如可以去一些公司干干兼職，或是給自己的單位設(shè)計一下主頁等。
最好是能進(jìn)入一個正規(guī)的開發(fā)團(tuán)隊，你就會學(xué)會如何以團(tuán)隊合作的方式開發(fā)網(wǎng)站，特別是怎樣和程序組合作，把頁面與后臺程序數(shù)據(jù)庫配合起來。可能你會擔(dān)心自己是新手，人家會嫌棄你，沒關(guān)系，只要努力去找，總會有機(jī)會的。
到此，你就基本可以稱作是一個“準(zhǔn)Web ”了，不過要從根本上提高自己，最好去學(xué)學(xué)美術(shù)，這是當(dāng)一個網(wǎng)頁設(shè)計師的基本功。