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

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

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

　　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(這些并不是標準尺寸，為了說明問題，我們暫時就使用這幾個尺寸吧!)，那我們現在就來看一下，怎么來針對這三個尺寸來做網站的第一個屏(也就是一打開頁面完整顯示在瀏覽者面前的部分)，為了能讓大家看的更明白，我們做了一個示例圖出來供大家參考：