幾步讓你的網站精美亮瞎眼：佈局加強篇

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

在上一篇文章中我們著重對網站的佈局結構進行了一些視覺上的探討，但是因為篇幅的關係，我們並沒有將佈局上的問題講完整，如果您還沒有閱讀上一篇文章，我們建議您去閱讀上一篇文章《幾步讓你的網站精美亮瞎眼：佈局篇》， 在那篇文章中我們主要講了佈局的橫向視覺，今天我們將就佈局視覺的問題繼續探討下去，今天我們主要從網頁佈局的縱向來進行講解。

網頁的縱向佈局在設計時一般都是自我調整高度的，但即使是這樣，我們最好還是能精確的計算每個模組的高度及整個頁面的高度。

因為這麼做有以下幾點好處：

1.首先限制住了高度可以很好的相容ie6，大家都常常為ie6不相容css而大傷腦筋，在其他瀏覽器下觀看挺正常的一個網站，但在ie6下就很有可能嚴重錯位了，這是一件很鬱悶的事情，但我們其實有一個比較笨但很有效的方法去解決， 這就是將每個模組的高度和寬度固定死，特別是當我們使用了float屬性時，限制高度和寬度往往是最快也最有效的方法，而且限制高度及寬度後，雙倍行距和間距的問題也會消失了;

2.限制高度可以使我們的頁面看起來更整潔，頁面的佈局視覺可以牢牢的掌控在我們自己的手中，但為了限制固定高度，我們不得將字體考慮在內，大家都應該知道宋體、微軟雅黑以及楷體在網頁上所占的行高是差別很大的， 如果我們以微軟雅黑作為標準來進行設計，那麼最後如果流覽者的顯示器上顯示的是宋體或楷體的話，我們原有的固定高度就很有可能空出一大塊出來或者被撐破，由此限制高度非但沒有使頁面變得整潔，反而使頁面看起來很不專業、很淩亂了;

3.限制行高，更方便我們進行視覺佈局，因為有了行高的固定限制，那麼我們在設計頁面時完全可以很精確的設計出psd範本，然後根據這個範本將各個模組切出來，在排版佈局的時候也要嚴格按照每個模組的大小進行限制， 這樣我們設計出來的東西才能更精確的與我們的初始設計完全吻合，而且也不易出現錯位的現象;

好了，我們上面講的這個細節問題僅僅是給大家一點小經驗，下面我們才會從視覺的角度出發去探討一下佈局的秘密。

一、縱向佈局太長的話會讓流覽者萌生膽怯心理

很多設計師中都流行著這麼一種說法，說是頁面的縱向長度最好是保持在7個拉屏以內，也就是說我們用滑鼠的中鍵每滾一下，螢幕所下拉的高度就算是一屏，七屏就是我們用滑鼠中間滾七下。 這種說法雖然有失偏頗，但不得不說還是有一定的道理的。

縱向佈局太長的話很容易讓人產生煩悶的心理，而人的忍耐性似乎也只有滾動滑鼠中鍵7下所用的時間，倘若超出了這個時間，哪怕是多滾動了一下都會瞬間讓人失去繼續流覽的興趣，雖然說很多頁面並沒有7屏的高度， 但流覽者會產生每個頁面都是那麼長的錯覺，從而產生了膽怯的心理，因此我們也就失去了讀者的粘度，對一個網站的長期發展絕對會造成很不好的影響。

二、越是想表達產品豐富越容易墮入低檔之列

特別是一些購物網站和一些做淘寶客的網站，總想將佈局排的滿滿的長長的，總想在一個頁面上儘量的放很多的東西，以向流覽者炫耀自己的網站是多麼的豐富，自己的產品是多麼的豐富......

但事實上真的是這樣嗎?我可以說這僅僅是設計者和經營者在自己YY自己，他們並沒有站在客戶的角度上去看待問題。

大家對雜貨鋪的印象應該都不是太好，因為那裡太擁擠，太狹隘，從而使我們留下了這樣一個印象：那就是一個賣便宜貨的地方!

三、明白「愛屋及烏」是人之共性

很多國外的購物網站的經營理念和設計理念卻與我們大不相同，他們總將自己最為滿意的東西放在了最顯眼的位置，可能僅僅是一個一件衣服就要佔據了一整個螢幕的大小。 其他的商品也僅僅是挑選很少一部分放在下面，每個都給留出足夠大的展示空間。 雖然在一個頁面上展示的東西少了，但那種大面積留白的寬鬆佈局很容易讓人心情舒暢，讓人感覺到一種寬鬆、大方的氣場，由此流覽者能將更多的精力放在那幾個不多但很精緻的產品上面。 大家還不明白麼?只要顧客對你的一件產品產生興趣、對你的一件產品產生好感的話，那麼他就會愛屋及烏的喜歡上你這個品牌，他的心理就會產生一種近似獵奇的心理，他甚至會迫不及待的去流覽你的其他產品...... 這就是一個良性迴圈，在做品牌形象的同時也賺足了流覽者的眼球!

四、于細節處求突破

在縱向上，我們要做到錯落有致。 這種錯落都是經過我們細細的推敲而確定的，在大的方向上，我們還是要保持整齊的。 也就是說我們要給流覽者這樣一個印象：整個頁面第一眼看上去十分整潔、乾淨，但仔細去看時，每個地方的細節又會有所區別，這就會讓流覽者感覺到你的認真、你的真誠、你的文化、你的內涵，因為你會帶給他一些視覺上的小驚喜， 那麼也就相當於給他一個產品也會給他帶來小驚喜的期盼。

我們最好還是將頁面的高度控制在4屏以內，你可以將你的整個頁面截圖下來並縮小，如果整個頁面的截圖顯得太長了，那麼你就該調整一下了，這也是最簡單的辦法。 一般來說頁面的長度不要高於寬度的2.5倍，否則就給人一種視覺失衡的感覺了。

當然了，很多人還是很偏愛那種單屏的頁面，但隨著流覽終端尺寸越來越複雜，我們很難保證你所要展示的頁面在其他頁面上也能正好以滿屏來顯示，因此這樣的處理方式也顯得落伍了。

五、具體實例解析

那麼我們怎麼能處理的更好呢?方法其實是有的，我以前碰到過一個國外的網站，顯然那個網站很細心的注意到了每一個細節，並且很完美了將不同顯示下的矛盾都通過靈巧的心思和佈局給化解了。 他們肯定是先統計了目前市場上大多數流行顯示終端的顯示尺寸，然後在設計時將這些尺寸全部用線框拉起來標明界限，然後在這種大框套小框的佈局中進行設計。 因為有了這些大小不一的線框限制，他們很容易就知道在不同螢幕上顯示他們的頁面究竟是什麼樣子。

比如說，如果我們在1600*900的顯示幕上來進行創作的話，我們肯定至少要考慮更小一點的尺寸，比如說傳統的1024*768的顯示幕。 那麼我們先要獲知大多數的瀏覽器的實際顯示高度是多少，也就是說我們將這個頁面做到多高才不會出現縱向的捲軸，像是1024*768的顯示幕不會出現縱向捲軸的尺寸大概在560至600之間(這主要是針對ie瀏覽器來說的， 很可能有些人會在網址列下添加很多外掛程式，這樣螢幕顯示的高度就少了許多)。 哦，為了方便我們的講解，我們就暫且將1024*768的有效網頁顯示高度定為600吧，而1600*900的顯示幕的顯示高度為720,22寸顯示幕的有效顯示高度是900(這些並不是標準尺寸，為了說明問題， 我們暫時就使用這幾個尺寸吧!)，那我們現在就來看一下，怎麼來針對這三個尺寸來做網站的第一個屏(也就是一打開頁面完整顯示在流覽者面前的部分)，為了能讓大家看的更明白，我們做了一個示例圖出來供大家參考：

從上圖中我們總共化分了三個區域，每個區域代表著一種顯示器所能顯示的部分，最外層的綠色代表著1920*1080解析度的顯示器，洋紅代表著1600*1400解析度的顯示器，而藍色則代表1024*768解析度的瀏覽器， 顯然這個頁面是經過仔細的推敲和思考的，它目前至少在這三種顯示器下都能展示很好的效果。 在1024*768解析度下，它剛好將焦點banner展示完整，而且還留下那麼一些空白，因此畫面會顯得很完整，即使它的下面再沒有任何內容了，我們也不會覺得很殘缺和突兀;再看1600*900解析度下，剛好將那幾個圖示包括在內 ，而且下面還有富餘的一些空白，因此展現的頁面效果也是完整的;最後是1920*1080解析度下的顯示，又是剛好將那幾塊分列的文字包含在內，畫面依然是完整舒服的!

網站的細節也就是指的這裡了，這就叫巧思，這就叫用心設計，這就叫總能把最好的東西展現給流覽者。 如這樣巧思佈局的網站怎麼能不讓流覽者流連忘返呢?

網頁的佈局絕對是門大學問，很多還需要我們細細的分析與比較，那些大師之所以能成為大師，並不是他們擅長使用花哨的特效，也不是他們擅長絢麗的視覺表現，也不是他們擅長極致的質感表現，而是他們總能帶給人最大的美感及驚喜， 因為他們始終將使用者體驗當做評判網頁設計優劣的唯一標準!

原文作者：子寒互動視覺

原文位址：HTTP://www.xmlas.com/web-visual-talk-hallowly-3.html(子寒互動視覺原創文章，轉載請保留連結位址)