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