網頁設計平衡

1、如何運用網頁設計中對齊原則

西安UIpark
視覺上遵從保持尺寸和邊緣的一致性。

對齊可以讓一個網站頁面看起來比較規范整齊。對齊一般有三種方式：左對齊、居中對齊、右對齊。
在網頁當中運用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現的頻率不高，小部分的出現還是有的。不管是哪種方式的對齊，網頁中對齊後的文本一定要考慮可讀性的問題，千萬不要本末倒置。
對齊在網頁中的運用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區塊布局的對齊。
1、元素對齊
元素的對齊指的是網頁中的一些按鈕、圖標、搜索框等網頁中的元素統一採用一種對齊方式對齊。

用主頁來舉例，可以看到圖標部分都是居左對齊的，元素上的對齊分布讓整個界面看起來整齊簡潔，內容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽。

一個網頁當中，會有很多元素，而元素的對齊可以讓整個界面變得井然有序，元素過於隨意擺放沒有規律，會讓界面雜亂無章。

2、文字的對齊

文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現在文章詳情的標題部分，右對齊文字出現的頻率小一點，不會以大篇幅出現，大部分在登陸注冊或是產品詳情界面中常見。

左對齊的方式適合人們的閱讀習慣，在網頁中也比較常見，這里不多講了。

居中對齊是進幾年隨著html5流行起來，越來越多設計師用居中對齊作為一些區塊內容展示的方式。

可以看到，蘋果官網在產品介紹頁面，文字用得比較多的是這種居中對齊。這樣的對齊方式有個好處就是讓瀏覽者的視線集中在該區塊內容上，其次從樣式上的不對稱感可以增加界面的層次感和設計感。但是文字居中對齊不適用於文字內容太多的區塊。

右對齊常見到的是在一些小的細節中，比如登陸注冊界面、底部導航區塊等，仔細看看還是可以發現有一些地方用到了右對齊。

惠普商城注冊界面中輸入框提示文字全部都是居右對齊，讓提示信息和輸入框看起來更為整體和舒服。在注冊界面上的設計，大部分設計都是提示信息居右對齊，包括蟬知注冊界面也是這樣的設計方式，不信可以打開網站看看。

3、圖片的對齊

圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要根據網頁想表達的內容去做對齊，以達到好的視覺展示效果。所以在不同的情況下，可以採用不同的對齊方式。

在當當的圖書展示頁中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側。

在大圖展示方式下，可以看到產品圖是居中展示的。所以就算是同一個網站也不會只用一種對齊方式，對齊比較靈活，就算是同個頁面，也可能為了視覺效果而採用兩種或三種對齊方式，這個根據整個界面的效果而定。

4、區塊布局的對齊

上面講的小元素對齊重要，那大的區塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應的內容。小元素不對齊會顯得亂，大區塊不對齊會讓整個界面沒有秩序感。

這樣的情況最常出現在一些產品展示的網站當中，設計這個網頁的設計師說他們刻意追求不對稱感。按鈕的不對齊，和區塊的不對齊，讓整個界面顯得很粗糙。在不是瀑布流的情況下，這種區塊大幅度出現在界面當中的時候，對瀏覽者來說就是一種折磨。

說到區塊的對齊，不得不提的柵格系統，柵格系統可以讓一個網站看起來有秩序感。很多人不喜歡柵格系統，覺得限制他們自己的創意。

事實上，柵格的運用可以很靈活，分多少欄全看設計師的設計。

用當當的登陸界面給大家總體分析一下，在當當網的界面當中，有左對齊、居中對齊和右對齊，其實這些概念大家都懂，就是不知道怎麼合理的運用到各個網頁當中。

可以看到整個界面的層次區分圖，這是人視覺停留的內容層次圖，通過層級關系的分析，我們可以找到一定的規律：

第一眼是居中顯示的，當視線提留到1區時，1區的內容是右對齊，視線轉移到2區時，2區內容是左對齊。3區則是為了平衡界面有左對齊也有右對齊。

因此可見，對齊也是有層次的，不同層次內容可以採用不同的對齊方式。

對齊相比較之前的其他設計原則來說，會比較簡單也好理解，但是在具體的實踐過程中，還需要設計師們去思考和設計。對齊，不僅可以在信息層級上一致，而且會更有氣勢。

總之，在做網站的時候要以內容為主旨，界面設計一定是要方便用戶快速找到他們想要的。其次使用正確的對齊方式，讓界面更為整齊，信息更為明確。

2、網頁設計中要注意什麼？

網頁設計要注意以下幾個方面：
1、網站設計內容問題
內容是所有網站的靈魂，也是客戶關心的東西，打開網際網路看看企業網站，我們很容易發現，大多數中小企業網站欄目劃分趨於一致：公司簡介、產品介紹、聯系方式等，在版式設計上也基本上是上下分欄、左右分欄等方式，在內容上要從客戶考慮，要了解客戶想從你頁面上了解些什麼，總之要貼近客戶。
2、網站設計技術問題
首先應該說明的是，我們並非鼓動企業在自己的網站中加大技術含量。實際上，最重要的是所使用技術在多大程度上實現了預期的功能，或者說所要的功能需要什麼樣的技術實現比較經濟劃算。而我們在與企業接觸中，常常碰到這種情況：網站中使用了先進的技術，當然進行了大筆的投資，但實際上所實現的功能通過其他方式，很低的投入就可以實現！但是企業並不了解這些。
3、網站設計交互問題
您的網站是否實現了與客戶的交互，在多大程度上實現了這一功能，值得您仔細考慮，在我們接觸的客戶中，甚至有的客戶抱怨：他的信箱至今還沒有收到mail！經過我們的檢查，是因為留言簿中有關信息提交的設置有問題！使得與客戶之間的交流出現很大的問題，這也是很多企業應該注意的問題。另外在設計上應注意什麼
1，對每一個超級鏈接點擊之後採用新開窗口還是直接跳轉，必須認真對待。如果用戶點擊一個link之後是要放棄當前頁面開始新的體驗，則應用直接跳轉。如果用戶點擊link是要了解更多的信息，但是當前頁面的信心仍然有用，則應新開窗口。
2，在每一個用戶可能需要幫助的地方提供幫助信息或幫助按鈕。完善的幫助系統是一個產品，網站成功很重要的因素。
3，承諾問題，不要輕易對你的用戶承諾什麼，但是一旦承諾了，就要盡最大努力去兌現。在首頁規劃和網站設計中最為突出的問題是：1）首頁規劃和欄目設置不合理。主要表現在欄目設置有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息。2）重要信息不完整問題。企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，但為數不少的企業對這些重要信息不完整，尤其是產品介紹過於簡單，有些甚至沒有公布任何聯系方式；上述幾個問題只是企業網站設計問題中的部分問題，還有考慮瀏覽目標群體，從營銷方式設計都應該是現在企業網站所在考慮的問題。每一個細微的不足和問題，都有可能失去用戶，或者根本無法獲得被用戶發現的機會，結果最明顯的表現就是訪問量很小，或者由於得不到有價值的信息和服務，訪問者的轉化率很低，無法取得最終的收益。

3、如何進行合理的網頁布局

關於布局也許是大家最不放在眼裡的地方，其地位如同文字的排版一樣，隨便可布，布即隨便。但是看過我上篇《網頁設計技巧》的朋友也許就會清楚，其實文字排版是一種不起眼但卻非常重要的細節。做好了會讓作品更為精細漂亮，做不好也許就成為作品失改的重要原因。其實布局也是一樣，需要我們足夠的重視起來。下面我要講的不是網頁布置成「左中右」、「左右」、「上中下」之類的問題。而是講位置的重心與位置之間的對比關系。

眾所周知，國外有一種叫黃金分割率的概念。下面我引用一段非常專業的解釋：「黃金分割最早見於古希臘和古埃及。黃金分割又稱黃金率、中外比，即把一根線段分為長短不等的a、b兩段，使其中長線段的比（即a+b）等於短線段b對長線段a的比，列式即為a:(a+b)=b:a，其比值為0.6180339……這種比例在造型上比較悅目，因此，0.618又被稱為黃金分割率。」大家也看清楚了什麼叫黃金分割。我們中國也有一種類似於這樣的概念叫九宮格。這個也許就有一些朋友不清楚了，這是一種用以臨寫碑帖的一種界格紙。基本形是一個長方形等分九格。在這個九宮格中中間部分就產生了四個交叉點，這四個交叉點就是視覺中心點。

圖示：九宮格

好了，我們為什麼要講這兩個概念呢？是因為這兩個概念是設計的決竅之所在。我們很多時間喜歡把重要的東西放在正中心，表示重視想吸引目光注意。但是我要告訴大家。正中心屬於盲點區。也就是說按人的視覺習慣來講正中心是常常被忽視的。並且放在正中心也不會引起視覺刺激。用句玩笑話來侃一下：兩眼中間是看不清楚的。不信拿你的手指指著鼻尖看你的手。那什麼地方是視覺中心點呢，這就要用到上面的概念了。不過什麼a:(a+b)=b:a都太麻煩了誰會那麼細致的去算呢。這里用中國的九宮格原理就清楚得多了。四個視覺中心點很顯然大家也清楚是什麼位置了。

那麼在實際應用中我們要怎麼用呢。這點很重要，實戰意義要比空談概念重要得多。下面我們就來說一下實戰中的應用，這里雖說是《網頁設計技巧》不過同樣可以應用在平面設計與攝影或是其它的設計中，但是必竟是講網頁設計這里主要還是舉網頁例。我們先從大布局來談，然後再講小布局，最後講設計圖片的布局。

大布局 基本上網頁的布局分為，上中下、左中右、左右、上下、與上下左右之混合幾類。同時我們還要思考的是解析度與網頁大小的關系。現在大部分的機器都是1024以上的解析度了，那我們的寬度是不是一定也要順應變得寬一點呢。個人觀點是大可不必。因為網頁本身也會與瀏覽器產生視覺對比。如果塞得太滿勢必也不是很好看。如果留下空隙網面與留出來的空白也可形成一定的對比，其比例也較接近黃金分割率。所以我覺得還是不要塞滿瀏覽器為好，給網頁一個可以呼吸的空間。那網頁自身的上下左右布局呢？同樣的，如只是上下或是左右結構我們不能把上下或是左右平分，而是最好採用黃金分割比來進行劃分。如果是上中下或是左中右呢。我們同樣不能平分，我們我們要注意三者之間的關系，比如上中下結構，我們很清楚中間是主要內容需要大一點的空間，那麼中空間的部分會盡量的點有大比例，一般來講我們會讓中間佔大約百分之六十。而上面佔百分之三十，下面佔百分之十。那也就是說，下面是上面的三分之一，上面是中間的三分一。這樣的分割就會比平面看起來要舒服很多。但是左中右的結構就不能這么分了。因為百分之十的寬度會很難放得下什麼內容。一般左中右結構會有另一種分法：左佔百分之四十，中右各佔百分之三十。或是左右佔百份之三十，中間佔百分之四十。也可以進行532、622、442、的分配。也就是說大布局上要盡量避免平分的局面。

小布局 也可以說是細節上的布局。我們可以把網頁看成是由很多個小塊組合而成的。通常要注意的就是標題與內容的關系以及這些塊放置的位置。比如最核心的內容不要放在最頂、最後、或是最中間。而是頂部與中間的中部位置，有些人喜歡排位，並且會把最重要的放在最上面，其實不然啊，放在最上面的未必是最核心的位置。比如我們看一下各大門戶網站的頭條新聞的位置，是不是沒有放在最頂部的？當然由於解析度的問題目，這些頭條可能位置也會有所變化。在800下頭條是偏下的，而1024是居中一點，1600就偏上一點。但是從瀏覽器的大角度來看，這些頭條也都是處於視覺中心點的。

圖片 我們在處理圖片的時候也會用到布局，比如我們的文字放在什麼地方，標志放在什麼地方這些都是布局的范疇。這里也要應用上述的概念，重要的要核心不要放在正中或是過於偏向角落。當然也會遇到重心的東西很大，基本上都占滿了畫面，下面讓大家來看一張招貼：

大家看這圖的重點是那個MP4，但是這個對象很大，不過沒關系，把這個MP4的圖做得有透視性，左右的重量就不一樣了。這樣向左去一點，那麼重心就向左去了，再加上MP4偏上，這個MP4就正好在視覺中心點上了。而主要的信息文字同樣也處在視覺中心的位置上。而一些不重要的文字都放在了角度去冷落他。

好了，關於布局就說這么多，這里總覺得這里還少些東西，細想可能是視覺平衡方面的問題。這里講得很多了，視覺平衡方面的問題目就再想想過些日子再整理出來。

4、網頁設計中有哪些平衡原則

1、對稱平衡

對稱平衡是以網頁中心線上的點作為支點，通過對左右兩側的顏色尺寸、密度、亮度等元素進行合理穩定布局，從而實現整體網頁的一致、統一的平衡感。

2、非對稱平衡
非對稱平衡是在畫面中呈現出的一種不均衡狀態，而通過對元素進行布局帶來視覺對比的效果，從而達到一種平衡。在設計中，這通常表現在某一區域有大面積顏色或者元素分布密度極高從而獲得明顯的佔主導的視覺效果，而另一區域則是視覺上相對較輕的設計元素。非對稱平衡是一種更高層次的「平衡」，布局精妙則增強了頁面的活潑性，而把握不好則會使頁面閑的雜亂無章。
3、輻射平衡
簡而言之，輻射平衡即是指頁面中的元素以某一個點為中心而展開的，這種平衡原則又叫徑向平衡。
4、馬賽克平衡
顧名思義眾多元素看上去像馬賽克一樣雜亂，通過散亂排列而創造出的平衡。
在設計中，影響視覺效果的元素主要有尺寸大小、色彩、密度、亮度，設計師通過對這些元素的處理即可實現網頁整體追求的效果。

5、如何設計有效的網頁布局？麻煩告訴我

什麼是布局？ 「布局」是指頁面內容的尺寸、間距及位置。有效的布局對於幫助用戶快速找到他們想要的內容至關重要，並可以在結構外觀上令用戶感到舒服。如何設計有效的布局？1.具有清晰的視覺層次。布局應當讓頁面各元素之間的關系和重要性一目瞭然。你可以通過適當使用下列屬性來實現視覺層次：焦點：指用戶首先關注的區域。形式上被賦予焦點屬性的UI元素一定要表達重要的內容。視覺流：指用戶關注區域的順序。可以根據任務邏輯和用戶的瀏覽習慣來設計恰當的視覺流。好的視覺流應該清晰、合理、順暢、自然。02020202020202
020202020202020202
關聯：在邏輯上相關的UI元素應具有清晰的視覺關系。0202020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。對齊：使頁面工整，信息呈現有序，便於用戶掃視。02020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 沒有對齊影響了頁面效果且不便於用戶掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現。強調：可以根據UI元素間的相對重要程度進行強調。2.針對用戶的閱讀模式來設計布局。大部分人的閱讀習慣是從左向右，至上而下。閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在於理解，後者在於定位。02020202020202
020202020202020202
瀏覽網站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時才仔細閱讀大量文本。針對掃視的布局設計可以適當強調主要的UI元素，弱化次要的。包括：020202020202020202020202 1)將主UI元素放在掃視路徑上。
020202020202020202020202 2)避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控制項上。
020202020202020202020202 3)考慮使用漸進展開方式來隱藏次要的UI元素。
020202020202020202020202 4)將任務相關的重要信息要直接表現在控制項上。用戶更傾向於關注交互控制項上的標簽，而不是輔助型的靜態文本。
錯誤：
02020202020202020202020202 02020202 用戶必須閱讀輔助型文本後才能明確「確定」按鈕的作用。02 正確：
直接將按鈕的作用描述作為控制項標簽，便於用戶理解。02020202020202 5）不要展示大段文本，去除不必要的文本。多文本時格式化展示。註：常規模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規律。此模式的目的在於幫助你做出更好的決定，而不是精準的描述用戶行為。3.合理利用頁面空間。保持頁面的視覺平衡。避免擁擠和對空間的浪費。確保關鍵數據沒有被截斷，除非數據特別長。02020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。控制項的尺寸和間距恰當，沒有不必要的滾動。一個任務盡量在一屏內完成。實際情況中，我們用戶的頁面空間要小於屏幕解析度，它會因各種因素而壓縮，如：非全屏操作（彈出窗口和對比瀏覽），瀏覽器本身及各種輔助欄對屏幕的佔用等，設計中要考慮這些情況。02020202020202
020202020202020202
4.不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）。減少內容和展現上的嵌套層級。減少控制項不同尺寸的數量，例如，在界面上只使用一兩種按鈕寬度。採用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。使用盡量少的對齊線。5.選擇與頁面類型相匹配的版式。在設計之初，應充分考慮頁面承載的內容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務的完成效率。標准和規范：1.柵格化：我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統來源於平面柵格系統，它以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。柵格化可以使信息呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴展性強。022.以8px為橫向柵格單位：以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於J-PEG圖片）的渲染速度（基於計算機內部二進制的運算機制）。其在擴展和兼容性上也有一定優勢。在阿里巴巴中文站中，布局間距的最小單位為8px，布局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統：02020202020202 32px:適用於市場、社區等相關頁面
02020202020202
02020202020202 24px:適用於旺鋪相關頁面
3.頁面定寬：自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為用戶水平方向的聚焦范圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結果），自適應則會導致布局變形和內容錯亂。給頁面規定寬度可以避免這些問題。在綜合考慮當下主流解析度情況、瀏覽器外觀對顯示空間的佔用、人機工程學中對水平視角和聚焦范圍的規定以及8px單位等多種因素後，我們認為960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。更多

6、在網頁製作中出現不均衡的head標簽的錯誤,應該怎麼辦?

請說具體一點，沒聽說過不均衡的Head標簽。

7、設計網頁時如何使網頁達到色彩平衡?

1．用一種色彩。這里是指先選定一種色彩，然後調整透明度或者飽和度，產生新的色彩，用於網頁。這樣的頁面看起來色彩統一，有層次感。 2．用兩種色彩。先選定一種色彩，然後選擇它的對比色。
3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記一些誤區：
1．不要將所有顏色都用到，盡量控制在三種色彩以內。
2．背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。

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

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

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

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

8、如何設計有效的網頁布局？

1.具有清晰的視覺層次。布局應當讓頁面各元素之間的關系和重要性一目瞭然。你可以通過適當使用下列屬性來實現視覺層次： 焦點：指用戶首先關注的區域。形式上被賦予焦點屬性的UI元素一定要表達重要的內容。視覺流：指用戶關注區域的順序。可以根據任務邏輯和用戶的瀏覽習慣來設計恰當的視覺流。好的視覺流應該清晰、合理、順暢、自然。關聯：在邏輯上相關的UI元素應具有清晰的視覺關系。 錯誤：邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。對齊：使頁面工整，信息呈現有序，便於用戶掃視。 錯誤：沒有對齊影響了頁面效果且不便於用戶掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現。強調：可以根據UI元素間的相對重要程度進行強調。2.針對用戶的閱讀模式來設計布局。大部分人的閱讀習慣是從左向右，至上而下。閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在於理解，後者在於定位。瀏覽網站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時才仔細閱讀大量文本。針對掃視的布局設計可以適當強調主要的UI元素，弱化次要的。包括： 1)將主UI元素放在掃視路徑上。 2)避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控制項上。3)考慮使用漸進展開方式來隱藏次要的UI元素。4)將任務相關的重要信息要直接表現在控制項上。用戶更傾向於關注交互控制項上的標簽，而不是輔助型的靜態文本。錯誤：用戶必須閱讀輔助型文本後才能明確「確定」按鈕的作用。 正確：直接將按鈕的作用描述作為控制項標簽，便於用戶理解。 5）不要展示大段文本，去除不必要的文本。多文本時格式化展示。 註：常規模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規律。此模式的目的在於幫助你做出更好的決定，而不是精準的描述用戶行為。3.合理利用頁面空間。保持頁面的視覺平衡。避免擁擠和對空間的浪費。確保關鍵數據沒有被截斷，除非數據特別長。 錯誤：邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。控制項的尺寸和間距恰當，沒有不必要的滾動。一個任務盡量在一屏內完成。實際情況中，我們用戶的頁面空間要小於屏幕解析度，它會因各種因素而壓縮，如：非全屏操作（彈出窗口和對比瀏覽），瀏覽器本身及各種輔助欄對屏幕的佔用等，設計中要考慮這些情況。4.不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）。減少內容和展現上的嵌套層級。減少控制項不同尺寸的數量，例如，在界面上只使用一兩種按鈕寬度。採用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。使用盡量少的對齊線。5.選擇與頁面類型相匹配的版式。在設計之初，應充分考慮頁面承載的內容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務的完成效率。 標准和規范：1.柵格化：我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統來源於平面柵格系統，它以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。柵格化可以使信息呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴展性強。 2.以8px為橫向柵格單位：以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於J-PEG圖片）的渲染速度（基於計算機內部二進制的運算機制）。其在擴展和兼容性上也有一定優勢。在阿里巴巴中文站中，布局間距的最小單位為8px，布局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統： 32px:適用於市場、社區等相關頁面24px:適用於旺鋪相關頁面3.頁面定寬：自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為用戶水平方向的聚焦范圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結果），自適應則會導致布局變形和內容錯亂。給頁面規定寬度可以避免這些問題。在綜合考慮當下主流解析度情況、瀏覽器外觀對顯示空間的佔用、人機工程學中對水平視角和聚焦范圍的規定以及8px單位等多種因素後，我們認為960px是一個相對更加合理的頁面寬度。

9、網頁設計中要遵循哪些原則

每個網頁設計師在 設計網頁的時候都有自己的一套思路和方法，但是不管怎麼樣，都遵循了幾個最基本的設計原則，我大概總結了主要有如下幾點：
一、對稱與均衡
對稱分為左右對稱、上下對稱、重復對稱、旋轉對稱等形式。對稱的造型在大自然中比比皆是，同時也是版式設計常用的構成形式。對稱的形式給人以穩定平衡的感覺，但也容易流於刻板、單調。為打破這種局面，設計上往往採用均衡來代替對稱。均衡與對稱的區別在於各元素與軸心的分布排列不等，呈不規則狀態，從形式上是對稱的破壞，然而兩邊在視覺上的分量的相等的。整個畫面還是處於勢的平衡中，給人以後總動中有靜或靜中有動的動態美，富於變化和趣味。我們稱之為：對等不對稱，等量不等形。
二、重復、相似和變異
一個形體的反復出現，會加強對受眾的視覺刺激。這是最簡單的節奏，好像某幾個音節在樂章中的反復出現，會加深聽眾的印象。在平面設計中有時也把近似的形象並置在一起，大道重復的效果，這稱為相似。但有的時候，我們又把很有規律的一段樂章其中的一個或幾個音符加以變化，使之產生強烈的反差，這就是變異。變異可以理解為對規律的破壞，這種表現手法更容易吸引人的注意力，引發瀏覽者的興趣。
三、節奏與韻律
節奏、韻律是來自音樂的概念。在構成中，形體有規律的排列和變化就形成了視覺的節奏與韻律。它會帶給受眾舒適的視覺感受。除了前面提到的重復，還有形的漸變，包括大小、長短、明暗、形狀、位置等方面的變化，這些構成上的變化會使畫面產生和諧的藝術效果。這些形式上的美，如果賦予頁面的主題、個性和情感，就有了韻律感，好像音樂中飯的旋律，不但有了節奏，還有情調，有意境。它能增強頁面中的感染力和藝術表現力。
四、網頁中的對比
對比就是利用異質元素的並置產生差異，更鮮明地突出各元素的個性特性。缺乏對比的畫面的平淡、乏味的，是沒有吸引力的；而對比會產生強烈的矛盾和沖突，從而對觀者產生視覺刺激。
五、網頁中的調和
調和是指通過網頁中各要素之間存在的共性所構成的頁面統一性。調和是產生和諧與穩定的前提，我們可以通過保持畫面造型元素的某種特徵的一致性，如形狀，色彩等，形成調和。另外前面講到的對稱、均衡、漸變、重復等構成方式也會形成調和的頁面效果。以調和為基調的頁面中各部分之間保持一種內在的統一和協調，從而加強頁面的整體性和完整性。調和的構成中，要注意局部的對比效果。避免頁面產生模糊。
　我們一般採用三種方式進行頁面的調和：
大小調和：使頁面的元素麵積大小相近，或者使一種元素麵積大於其它元素，並佔有絕對優勢，保證其在頁面中起主導作用。
形狀調和：頁面中的造型元素保持相似的外形，並且把這種外形特徵貫穿於整個網站。
色彩調和：通過頁面中的元素色彩的一致性，進行頁面調和。
網頁設計師在其設計思路中都遵循以上幾個網站設計原則，所以特別是對剛學網頁設計的新手來說深刻理解並遵循設計原則是必要的，甚至決定了你網頁設計的成敗！ 東莞匯鑫--企業郵箱，網站建設