[網頁設計] 網頁設計藝術處理

網頁的設計主要是網頁制作軟件的操作與技術應用的問題。但是，要使網頁設計、制作得漂亮，必然離不開對網頁進行藝術的加工和處理，這就要涉及到美術的一些基本常識。本文將介紹一些網頁設計中經常涉及到的藝術處理原則，供各位在進行網頁制作的時候參考。

　　一、風格定位

　　網頁的美化首先要考慮風格的定位。任何網頁都要根據主題的內容決定其風格與形式，因為只有形式與內容的完美統一，才能達到理想的宣傳效果。目前網頁的應用范圍日益擴大，幾乎包括了所有的行業，包羅萬象，但歸納起來大體有這么幾個大類：新聞機構、ZF機關、科教文化、娛樂藝術、電子商務、網絡中心等。對于不同性質的行業，應體現出不同的主頁風格，就像穿著打扮，應依不同的性別以及年齡層次而異一樣。例如：ZF部門的網頁風格一般應比較莊重，而娛樂行業則可以活潑生動一些；文化教育部門的主頁風格應該高雅大方，而商務主頁則可以貼近民俗，使大眾喜聞樂見。

　　網頁風格的形成主要依賴于網頁的版式設計，依賴于頁面的色調處理，還有圖片與文字的組合形式等。這些問題看似簡單，但往往需要網頁的設計和制作者具有一定的美術素質和修養。

　　還有，動畫效果也不宜在網頁設計中濫用，特別是一些內容比較嚴肅的網頁。網頁畢竟主要依靠文字和圖片來傳播信息，它不是動畫片，更不是電視或電影。至于在網頁中適當鏈接一些影視作品，那是另外一回事。

　　二、版面編排

　　網頁的設計首先涉及到的是頁面的版面編排問題。"版面編排"實際上就是中國古代畫論中的"經營位置"。網頁作為一種版面，既有文字，又有圖片。文字有大有小，還有標題和正文之分；圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時展示給觀眾，總不能簡單地羅列在一個頁面上，這樣往往會搞得雜亂無章。因此必須根據內容的需要，將這些圖片和文字按照一定的次序進行合理的編排和布局，使它們組成一個有機的整體，展現給廣大的觀眾�？梢砸罁�如下幾條來做：

　　1.主次分明，中心突出。在一個頁面上，必然考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內容，這樣在頁面上就突出了重點，做到了主次有別123。

　　2.大小搭配，相互呼應。較長的文章或標題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。

　　3.圖文并茂，相得益彰。文字和圖片具有一種相互補充的視覺關系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使網頁有豐富的內容，大家可以看一下http://www.code-123.com網，做的很不錯。

　　三、線條和形狀

　　文字、標題、圖片等的組合，會在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構成了網頁的總體藝術效果。必須注意藝術地搭配好這些線條和形狀，才能增強頁面的藝術魅力。

　　1.直線（矩形）的應用。直線條的藝術效果是流暢、挺拔、規矩、整齊，所謂有輪有廓。直線和矩形在頁面上的重復組合可以呈現井井有條、涇渭分明的視覺效果。一般應用于比較莊重、嚴肅的主頁題材。

　　2.曲線（弧形）的應用。曲線的效果是流動、活躍，具有動感。曲線和弧形在頁面上的重復組合可以呈現流暢、輕快，富有活力的視覺效果。一般應用于青春、活潑的主頁題材。

　　3.曲、直線（矩形、弧形）的綜合應用。把以上兩種線條和形狀結合起來運用，可以大大豐富主頁的表現力，使頁面呈現更加豐富多彩的藝術效果。這種形式的主頁，適應的范圍更大，各種主題的主頁都可以應用。但是，在頁面的編排處理上，難度也會相應大一些，處理得不好會產生凌亂的效果。最簡單的途徑是，在一個頁面上以一種線條（形狀）為主，只在局部的范圍內適當用一些其它線條（形狀）。

　　四、色彩處理

　　色彩是人的視覺最敏感的東西。網頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應用原則應該是"總體協調，局部對比"，也就是：網頁的整體色彩效果應該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據主頁內容的需要，分別采用不同的主色調。因為色彩具有象征性，例如：嫩綠色、翠綠色、金**、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業的標志色，例如：軍警的橄欖綠，醫療衛生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進、退的效果等。另外，色彩還有民族性，各個民族由于環境、文化、傳統等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術內涵，從而提升網頁的文化品位。下面介紹幾種常用的配色方案：

　　1.暖色調。即紅色、橙色、**、赭色等色彩的搭配。這種色調的運用，可使主頁呈現溫馨、和煦、熱情的氛圍。

　　2.冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用，可使主頁呈現寧靜、清涼、高雅的氛圍。

　　3.對比色調。即把**完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色彩的搭配，可以產生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。當然，對比色調如果用得不好，會適得其反，產生俗氣、刺眼的不良效果。這就要把握"大調和，小對比"這一個重要原則，即總體的色調應該是統一和諧的，局部的地方可以有一些小的強烈對比。

　　最后，還要考慮網頁底色（背景色）的深、淺，很多網頁制作教程忽略了這點，我們這里借用攝影中的一個術語，就是"高調"和"低調"。底色淺的稱為高調；底色深的稱為低調。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內容（文字或圖片）。這種深淺的變化在色彩學中稱為"明度變化"。有些主頁，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，讀者在閱覽時，眼睛就會感覺很吃力，影響了閱讀效果。當然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強，同樣也會使讀者的眼睛受不了





網頁設計中，字號多大才合適？   本站整理   wangchuan   2009-06-29   點擊： 189   字體：大 中 小  我要評論 在這個顯示器百花齊放的時代，網頁設計師往往需要考慮不同客戶端的瀏覽體驗。
-
在這個顯示器百花齊放的時代，網頁設計師往往需要考慮不同客戶端的瀏覽體驗。

文字大小，是用戶體驗中的一個重要部分。不同的分辨率，不同的顯示器尺寸，不同的DPI，乃至不同的瀏覽器設置，都會對最終展現的文字大小帶來影響。雖然現在很多瀏覽器已經可以方便地縮放頁面，但用戶每次光臨都要重新縮放，總歸麻煩，何況還有許多用戶不知道如何縮放頁面。最好還是根據用戶的分辨率給用戶一個比較體貼的默認字號，那這個字號多大合適呢？

12px？14px？15px？16px？ 還是壓根就不應該使用px這個單位呢？

問題的根源，在于屏幕上的一切字號單位（px，pt，em）都是相對單位，單憑它們并不能確定文字的實際大小。何況人對文字大小的根本感知在于眼睛的視角，這不僅取決于文字的物理尺寸，還取決于它到人眼的距離。

物理尺寸

首先假定一個我們希望達到的文字物理尺寸，例如設定為17寸1280 * 1024顯示器上的16px，計算可得它的高度約是4.32mm，我們計劃讓網頁文字在大部分顯示器上都比較接近這個大小，那么在不同分辨率下應該顯示成多大的字號呢？

第一步：統計用戶主要的分辨率和對應的屏幕大小。

要在物理尺寸和分辨率之間換算，首先要統計分辨率和對應的屏幕尺寸。用戶分辨率的分布情況可以從網站的統計日志里獲得。由于每個分辨率設置可能對應好幾個不同尺寸的屏幕，而屏幕尺寸又無法通過網頁獲得，只好對現在的顯示器市場進行統計分析：針對某一分辨率，統計可能的屏幕尺寸范圍，從最小到最大，相對主流的是多大（或使用該范圍的中間值作為主流尺寸）。

電腦顯示器市場（產品種類繁多，難免掛一漏萬，數據僅供參考）

第二步：計算每個分辨率主流屏幕尺寸的物理寬度

現在的顯示器長寬比不僅有4：3的標準屏，16：10的寬屏，還有更多不規則比例，為了在不同長寬比的顯示器之間進行比較，統一使用橫向分辨率來統計。用主流尺寸和長寬比（假設像素的長和寬相同）計算出屏幕寬度（英寸），再換算成公制（毫米），將其一一對應就可看出屏幕大小的趨勢。再結合各分辨率的用戶分布，結果如下圖所示（圖片中每個點對應一個分辨率，橫軸為屏幕橫向的像素數，縱軸為該屏幕的物理寬度，氣泡大小表示使用該分辨率的用戶人數。其中藍色氣泡表示標準屏，紫色表示寬屏）：最大的三個氣泡分別是1024*768，1280*1024，1280*800。

第三步：計算不同顯示器上的字號大小

用屏幕的物理寬度除以像素寬度，就可以得到每個像素的寬度。然后用指定的文字物理大小除以這個數，就可以得到在不同分辨率下所需的字號。例如要顯示4.32mm見方的文字，各分辨率下分別需要如下的字號（對筆記本和臺式機分別統計）：

不同分辨率下需要的字號

可以看出筆記本和臺式機的尺寸相差很大，為方便使用，使用各分辨率的主流尺寸或平均尺寸計算出指定字號在每個分辨率下所需的字號。（下圖去掉了基本只用在筆記本上的那些分辨率），以4.32mm、3.77mm、3.25mm為例（17寸1280*1024分辨率下的16、14和12號字）：

為保持固定物理尺寸，各主流顯示器下所需字號與分辨率的關系

由于在未開啟cleartype的情況下，一些中文字體在非偶數字號下的顯示效果欠佳，所以一般建議使用12、14、16、18、22px等偶數字號。也就是對某個分辨率選擇離它最近的偶數字號。例如：屏幕橫向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此類推。

到人眼的距離

雖然筆記本的字號遠小于臺式機，可是實際并沒有給我們帶來那么大的不便，這是因為：一般使用筆記本時人眼到屏幕的距離比使用臺式機時要近一些。當上網本越來越小時（極端的例子就是手機），人們使用的時候可能會拿的更近，這樣視角更大。反之，當顯示器越來越大時（24寸甚至更大），出于整體視角等方面考慮，人們也可能離屏幕遠些，從而減小了視角。

定量來說：由于文字大小h（4~5mm）相對人眼到文字的距離d（30~60cm）非常小，可近似認為視角θ正比于h，并與d成反比（θ≈tgθ=h/d）。也就是說，同樣大小的文字，距離二尺時看到的只有距離一尺時的一半大小。

也就是說，顯示器只能傳達一個大概的尺寸，每個用戶在具體操作時仍會通過不自覺地調節到屏幕的距離來調整所看到的實際效果。面對越來越多的筆記本用戶（請參照上一篇：筆記本電腦的市場份額），前端設計師們只能給出一個針對筆記本和臺式機平均尺寸的頁面效果，具體就靠用戶去自我調整了。

用JS實現不同分辨率下自動調整字號

例如網頁正文所在div的id為content——

注：為保證各瀏覽器下文字均可縮放，字號單位使用em而不是px，一般來說，瀏覽器默認1em=16px，0.875em\1em\1.125em即為14\16\18px。

使用字號縮放時請注意：對該div內的標題等字號單位最好使用百分比，而不是固定字號，以便隨正文同步縮放。

不過字號的大小也是因人而異，所以有的網站會作出 大中小切換這樣的功能，用戶可以按自己的喜好來調整大小。