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