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