網(wǎng)頁版面設計技巧

第頁網(wǎng)頁版面設計技巧網(wǎng)頁版面〔制定〕技巧

以下就是網(wǎng)頁版面制定技巧等等的介紹，希望為您帶來幫助。

1.頁面尺寸：頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給你的頁面范圍就變得越來越小。一般，分辨率在1024768的狀況下，頁面的顯示尺寸為1007600;分辨率在800600的狀況下，頁面的顯示尺寸為780428個象素;分辨率在640480的狀況下，頁面的顯示尺寸則為620311個象素。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因，目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄和關(guān)閉全部工具欄時，頁面的尺寸是不一樣的。

在網(wǎng)頁制定過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。但我想提醒大家，除非你能肯定站點的內(nèi)容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果必須要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，以方便訪問者瀏覽。

2.整體造型：什么是造型，造型就是創(chuàng)造出來的物體形象。頁面的整體形象，應該是一個整體，圖形與文本的接合應該層疊有序，有機統(tǒng)一。雖然，顯示器和瀏覽器都是矩形，但關(guān)于頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

關(guān)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型;圓形代表著柔和，團結(jié)，溫暖，安全等，許多時尚站點喜愛以圓形為頁面整體造型;三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點為顯示它的權(quán)威性常以三角形為頁面整體造型;菱形則代表著平衡，協(xié)調(diào)，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是結(jié)合多個形狀加以制定，其中又以某種形狀為主。

3.頁頭：頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什么內(nèi)容。頁頭是整個頁面制定的關(guān)鍵，它將涉及到下面的更多制定和整個頁面的協(xié)調(diào)性。頁頭常放置站點名字的圖片或公司標志以及旗幟廣告等。

4.文本：文本在頁面中多數(shù)以"行'或者"塊'(段落)出現(xiàn)，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面制作技術(shù)的局限，文本放置位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。

5.頁腳：頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳則是放置制或者公司信息的地方。你能看到，許多此類信息都是放置在頁腳的。

6.圖片：圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。

7.多媒體：除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是常常能被利用到，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也變得更重要起來。

網(wǎng)頁排版制定的學習技巧

空間共享式文字排版

這種空間共享式排版是一種相當容易識別的制定手法。實際上，在一些海報和明信片制定中，也可以采納這樣的制定。它的最典型的特征是，文字或者相似的元素橫跨多個圖層、模塊或者區(qū)塊。

從廣泛意義上來講，這個制定手法的核心概念是某個元素和其他的元素共享空間，橫跨不同區(qū)域，元素互相疊加。這種制定經(jīng)常被視作為分屏制定的一種延伸。

圖片和文本的混排

美麗的排版和精美的圖片總能相輔相成。許多制定師都喜愛在使用共享空間式排版的時候，采納垂直定向的圖片(不過由于各種屏幕的高寬比不同，這種技術(shù)使用的比例并不高。)。

這樣的制定有一個好處，由于文本必須要跨越不同的區(qū)域，配色不用堅持完全的統(tǒng)一，依據(jù)文字四周的背景色進行調(diào)整，這樣的制定簡單而容易上手。難的地方在于文本內(nèi)容的分拆和合并的狀態(tài)下，表達的含義是否都合適。

減少不同類型字體的使用

使用超過3種不同的字體讓網(wǎng)站看起來沒有結(jié)構(gòu)且不專業(yè)。記住，太多的尺寸類型和風格也可能破壞任何布局。一般來說，將字體數(shù)量限制在最小限度(兩個很充足，通常一個就足夠了)，并粘貼相同的字體到整個網(wǎng)站。如果使用多個字體，請保證字體系基于字符寬度互相補充。

行間距的重要性

在排版中，我們有一個特別術(shù)語，用于兩行文本之間的間距(或行高)。通過增加行高，可以增加文本行之間的垂直空白空間，通常提升可讀性以換取屏幕空間。作為一個規(guī)則，行高應該是字符高度的30%，以提升可讀性。

沿著視覺流向排布

沿著視覺流一直排布信息是一項重要的技巧。文字與圖片發(fā)生邏輯關(guān)系，兩者相輔相承，所以此時文字不能覆蓋到圖片的主體部分比如必須要展示的人物，或者產(chǎn)品本身。信息按照視覺流向排布的時候，圖片中的主體會引導你去觀看文字信息。

擴大

當你不知道要怎么處理素材的時候，試著擴大吧。這不僅僅針對圖片，它還適用于文字的處理，擴大的元素更容易抓住用戶的眼球。正如上述的兩個案例，擴大的咖啡豆強化了對比，擴大的文字則極具沖擊力。

極簡網(wǎng)頁制定思路

制定師在進行簡約風格網(wǎng)頁制定時，也必須要銘記一些簡單的制定思路，簡化整個制定過程

首先，先復雜，再逐個簡化

為了防止漏掉某些制定元素或功能，制定師可以通過先將所有必須要的制定一一添加到界面中，然后再逐個依據(jù)必須要簡化的思路，準確而穩(wěn)步的進行優(yōu)化。

當然，為對比前后效果，也可使用Mockplus將它們快速的制作成交互原型，逐個測試修改前后界面制定的有用性和有效性。而且其提供的8種預覽和分享方式，關(guān)于制定師依據(jù)必須要，及時收集制定反饋和建議，作用也不容小覷。

其次，注意微調(diào)

簡約制定風格，一定程度上講，就是制定師細節(jié)制定的優(yōu)化和競爭，所以，一定要注意網(wǎng)頁界面細節(jié)的微調(diào)，再微調(diào)。

然后，注意把握全局

注意細節(jié)的同時，也不要忘記整體網(wǎng)頁或軟件應用在色彩，主題以及功能等方面的全局統(tǒng)一性。太過獨立的頁面制定，關(guān)于軟件或網(wǎng)頁頁面的連貫性，以及用戶使用時的流暢性，非常不利。所以，制定過程中，注意把握全局進行制定，做到胸有成足。

最后，原型測試必不可少

無論制定師的制定如何新穎獨特，抑或簡約直觀，如假設無法得到用戶的認可，一切都只是紙上談兵。所以，制定師在制定的同時，也必須要選擇優(yōu)質(zhì)好用的原型工具(比如功能強大的Mockplus)，及時地將簡約的網(wǎng)頁制定轉(zhuǎn)化成交互性原型，測試其實際效用和可行性。

例如Mockplus的強大組件庫和樣式庫，關(guān)于制定師添加，收藏，復用和分享必須要的組或組件制定，功能龐大。而其超過3000個的矢量圖標庫，關(guān)于制定師添加和制定簡約的圖標，按鈕和logo，也是非常方便。此外，其新增的團隊和企業(yè)版本的團隊管理和協(xié)作功能，關(guān)于提升簡約網(wǎng)頁制定的團隊協(xié)作效率也是非常有用。

網(wǎng)頁制定中文字排版制定的技巧

行長

我們隨手拿起一本書或者一份報紙，數(shù)一數(shù)每行的文字，一般狀況下都不會超過40個漢字。這是因為如果每行文字過長，讀者會不停的轉(zhuǎn)動脖子，感到疲憊的同時也會降低閱讀效率;目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節(jié)奏。這點同樣適用于網(wǎng)頁上的文章閱讀。由于顯示器是橫向的，我們更要注意劃分閱讀區(qū)域。文本寬度控制在450-700px為宜，此范圍內(nèi)參照字號大小;英文每行80-100個字母(空格算一個字母)為宜;中文每行30-40個漢字為宜。

行寬

我們可以想象一下：如果一行文字過長，視線移動距離長，很難讓人注意到段落起點和終點，閱讀比較困難;如果一行文字過短，眼睛要不停來回掃視，破壞閱讀節(jié)奏。因此我們可以讓內(nèi)容區(qū)的每一行承載合適的字數(shù)，來提升易讀性。傳統(tǒng)圖書排版每行最正確字符數(shù)是5575，實際在網(wǎng)頁上每行字符7585更流行。中文在14號字體時，建議3545個文字。

間距

通過設置間距，我們就可以控制文字的密度。網(wǎng)頁制定中，如果每行間距太小，與文字過長一樣，讀者瀏覽文章時也容易串行;如果行距過寬，閱讀時就會感覺文章不夠連貫。間距沒有固定的值，通常是依據(jù)字體大小來定義的。在word里我們?？吹诫p倍行距、單倍行距和1.5倍行距的選項。網(wǎng)頁上行距的單位常用em來表示，不管是中文網(wǎng)站還是英文網(wǎng)站，大家多喜愛用1.5em-1.8em的行距。以1.6em的行距為例，字號16px的字，行距就是25.6px。

關(guān)于段距，我們要合計一下具體實際狀況。比如文章篇幅較短，就不必須要很寬的段距;二文章篇幅很長，特別是那些偏學術(shù)的比較枯燥的文章，就要多利用段距把握文章的節(jié)奏，給閱讀者喘息和思索的機會，且使文章更有層次和可讀性。如(圖)所示，1.5-1.8em的行距確實是非常適于閱讀的文字密度。

另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非經(jīng)常見的。比如簡書16號字體，行間距27px/段間距36px=75%。文字字號本身比較大，所以行間距也不必須要嚴格按照11.5倍的比例設置，不過行間距和段間距的比例符合75%，看起來很不錯，這樣的視覺效果讓人在閱讀時堅持一種節(jié)奏感，這就是在實際狀況中將規(guī)范的靈活應用。

行對齊

排版中很重要的一個規(guī)范就是把應該對其的地方對齊，比如每個段落行的位置對齊。

不管哪種視覺效果，精美的、正式的、有趣的還是嚴正的，一般都可以應用一種明確的對齊來達到目的。

通常狀況下，建議在頁面上只是用一種文本對齊，盡量避免兩端對齊。

文字留白

在排版文字時，在版面必須要留出空余空間，留白面積從小到大應該遵循的順序是：字間距、行間距、段間距。此外，在排版內(nèi)容區(qū)之前，必須要依據(jù)頁面實際狀