(樂購網專欄 作者：李學江)這個章節主要給大家講下B2B行業網站網頁各元素之間的距離，涉及文字與圖片距離、內容與邊框距離、頁面與屏幕距離等，這個部分其實說簡單也簡單，說復雜也復雜，因為在我們平時瀏覽網頁、報紙、書籍、期刊、電視等各種媒體的時候，對于文字與圖片、內容與邊框之間的距離也有一個基本的認識。如果給大家一個網頁，網頁上各種元素之間的距離太寬或太緊，大家也能體會到，并能提出修改意見。但是對于專業的產品經理、頁面設計制作人員、公司管理層，我們需要的是高度關注細節，對頁面每一個元素之間距離不對的地方，都要高度敏感，提出正確的修改方案。
1 網頁各種元素之間距離的基礎知識
這個小節是對下面講的各個元素之間的距離起到很好鋪墊，讓大家從本質上去理解頁面設計標準。
A 元素之間有一定距離才能利于閱讀：這個要從用戶閱讀行為去考慮，我們的視線在看不同的內容時，網頁各種元素之間有一定的距離，才能合理的區分和辨別出各個元素的不同點，更好的閱讀體驗。
B 一般各種元素之間的大致距離：這個很難有統一的標準，不過根據我對各種網頁排版的調查分析，一般都在8PX-20PX之間，比如：頁面標題欄與標題欄之間的距離，一般為10PX，導航頁信息鏈接與信息配圖之間的距離，一般在8PX-12PX之間，導航頁信息鏈接與邊框之間的距離，一般不小于10PX。具體的在后面做詳細講解，最少不能低于5PX，否則讀起來很累。
C 留白是設計的需要：打開一個網頁，用戶希望看到一些留白的空間，留白不是指白色，而是指僅顯示背景色，如果背景色是白色，留白指的就是白色。留白可以讓讀者注意到重點的內容，更有層次感，比如推薦的信息標題，周圍的空白比普通未推薦的內容周圍空間要多，這個是設計者故意而為之，目的是提醒用戶，這個是重點內容。
D 各種邏輯上相同的元素之間的距離也要相同：比如一個網頁，第一屏文字與邊框的距離為15PX，第二屏仍然要相同，不能下面就變成8PX，同一個表單輸入框，離左邊提示輸入內容的文字的距離也要一樣，比如都為10PX，不能有一些輸入框距離就大一些，這個就造成了不對齊，使頁面看起來雜亂無章，缺乏美感。
2 文字與圖片之間距離的一般標準
文字與圖片之間的距離分為幾種情況，一是導航頁圖片配圖與信息鏈接或導讀之間的距離，二是內容頁圖片與信息文字之間的距離，三是導航頁產品圖片或人物圖片與信息標題之間的距離。一般標準如下：
A 導航頁圖片配圖與信息鏈接或導讀之間的距離：8PX-10PX比較合理，這個距離不能太大，超過了10PX就覺得太寬了。
B 內容頁內容圖片與信息文字之間的距離：這個距離一般可以比較寬，一般空一行，20PX-25PX都可以，因為有很多空間可以使用。
C 導航頁產品圖片或人物圖片與信息標題之間的距離：這個距離一般比較窄，尤其是豎行排列的時候，可以更窄一些，5PX也是可以的，如果這個標題分兩行，行距一般比較窄，110%-120%之間最理想。
3 內容與邊框之間距離的一般標準
無論是圖片、還是文字，與邊框都必須要有一定的距離，在《B2B行業門戶網站設計開發實戰研究報告》里，我將頁面分為導航頁、內容頁、功能頁三種頁面，不同的頁面與邊框的距離有一定的不同。
A 導航頁內容與邊框的距離：由于導航頁空間比較小，每個地方都要分布不同的內容，越靠上、越靠左的內容越重要，內容與邊框的距離一般在10PX-15PX比較合理。
B 內容頁內容與邊框的距離：這個距離一般可以比較寬，從20PX—40PX都可以，因為有足夠的空間，新浪、阿里巴巴的新聞內容頁內容離邊框的距離就是4OPX，騰訊為30PX，中國服裝網為20PX，本研究報告認為，20PX-30PX是最合理的。
C 功能頁操作提示或輸入框與邊框的距離：由于這種頁面內容不多，以用戶操作為主，有更多的空間，比如：用戶注冊頁面、信息發布頁面等，這樣的距離不定，如果空間太多，可以居中對齊，左右的距離都是一樣的，根據實際情況而定。
圖(103) 阿里巴巴首頁商人社區截圖(截圖日期：2012-09-23)
如圖(103)所示為阿里巴巴首頁的截圖(本文是寫作報告是所寫，現在已改版)，內容與左邊邊框、上邊標題欄的距離為：15PX，離下面的距離為20PX，內容圖片與左邊文字的距離為：15PX，推薦標題與下面導讀的距離為20PX。基本符合我講的這些標準。如果我來設計，內容離下面邊框的距離，應該和離上面邊框的距離一樣高為最佳。
4 標題欄上文字與標題欄邊框的距離
標題欄一般由圖片和文字構成，圖片一般為背景，文字一般會加鏈接，分為標題名字，以及“更多>>”的鏈接，文字在標題欄上一般是上下居中對齊，標題欄名稱離左邊的距離一般為：15PX-20PX，“更多>>”離右邊的距離一般為：15PX-20PX，當然也有例外，但是大部分的情況下是這樣的。
整個頁面上的標題欄文字離左右的距離要統一，形成規范，才能不會雜亂無章。有一種情況也可以不一樣，就是標題欄的設計完全不一樣，為了排版需要，距離要設置成不一樣。
5 頁面與頂部、底部、左右的距離
A 與頂部距離：可以為零，也可以為5PX，都可以，本報告認為不要有距離最好，最高不超過5PX。
B 與左右的距離：雖然現在的電腦都是寬屏，尤其是新配的電腦，但是我們設計網頁還是要以1024分辨率為主(這一點，我在《B2B行業門戶網站策劃實戰研究報告》里也做過介紹)，頁面寬度最多可以到1002，即左右寬度為10PX，這樣可以沒有滾動條。我認為頁面使用995PX最合適，左右留13PX左右的距離。對于超過1024分辨率的寬屏顯示器，左右兩邊的距離是隨顯示器寬度而變化的。
C 與底部的距離：底部文字與頁面底部的距離在18PX-30PX之間比較合理，太高了，太粗糙，太低了影響閱讀，本研究報告認為，18PX是最合適的，正好是文章的標準行距，可以取得最好的閱讀體驗。
本章節就講到這里，雖然很簡單，但是細節很重要;雖然是技術知識，但是你無需懂技術，就能看的明白，就能指導技術按照本文的要求設計制作B2B行業網站。
推薦閱讀
阿里巴巴集團相關人士昨日在接受成都商報記者采訪時稱，“相比東部網商的發展速度，西部網商的確存在著差距被拉大的風險。”作為一個有317萬網商存在的省份。 今年以來，許多四川網商開始公開喊“累”，甚至出現了許>>>詳細閱讀
本文標題：B2B行業網站“頁面元素之間距離”的標準
地址：http://www.sdlzkt.com/a/b2b/20120918/85667.html
網友點評
精彩導讀
科技快報
品牌展示