編排設計頁面編排原則

時間：2023-07-03 17:12:01 | 來源：營銷百科

時間：2023-07-03 17:12:01 來源：營銷百科

編排設計頁面編排原則：　　原則上，一個 HTML 網頁頁面的配置，能夠加強作者所企圖表達的概念與目的。頁面上的每一個元素，都會影響讀者對頁面上其他元素的解讀，在看一個頁面時，我們應該把整個組合看做是一個統一的整體，而非許多小單位的集合。在進行版面配置時，應把焦點放在版面的平衡與留白空間的處理，設計者應該根據圖像與背景的關系、對比的關系、類似的原理、以及比例的關系，將整個空間以最有效的方式加以分配、組織。

　　1、版面留白量

　　設計者可以很容易地改變背景顏色，因此，當我們提到'空白'時，所指的就是背景顏色，或是所謂圖像與背景的關系的背景部分。在一個頁面的組合中，留白的部分和被置于其上的元素同樣重要。就像樂章中的休止符，讓聽者能據知對音樂達成理解與鑒賞一樣，留白的空間讓頁面有了格式，因此，千萬不要忽略留白的重要性。在早期的 HTML 版本中，要隨心所欲地安排版面配置還很困難，由于在處理行列與對齊上的技術困難，使得版面常常陷入一種不平衡的局面。你必須考慮到所有的留白，這并不是說你得填滿所有的空白，而是，你必須把這些留白也一起納入考慮，達成頁面的平衡。

　　2、視覺平衡的考量

　　在安排頁面上的諸元素時，你應該考慮每個元素之間的視覺比重，這個比重可以由物件的大小、亮度﹝深色物件比淺色物件重﹞、以及紋路或內文的密度。視覺對比也很重要，如果加以有效地運用，對比可以很快地抓住讀者的注意力。但是如果元素之間的對比過大，則容易造成反效果，使整體失去和諧與平衡。另外，視覺上的諧調和對比一樣重要，你必須考慮物件之間大小比例的關系，將每一個元素對其他元素作相對的評估，比如說，一個很大的物件如果跟一個小物件放在一起，它會顯得更大，而影響到整體的平衡。

　　3、對稱式的平衡

　　在設計一個 HTML 頁面時，有許多方法可以達成平衡，其中最簡單的就是那種規(guī)規(guī)矩矩或是對稱的版面，比如說左右兩半或是上下部分彼此相似，甚至有些設計者把頁面上的每個元素向中央對齊。在某些情況下，這種設計方式可以有不錯的效果，但是通常內文的易讀性就會大大地降低。一般而言，一個對稱式的平衡是屬于靜態(tài)的，而無法引導讀者的目光去搜尋頁面上的其他元素。另外還有一種平衡的方式則是非制式且不對稱的。

　　4、不對稱的平衡

　　一個不對稱的頁面結構必須藉由技巧性地安排不同視覺比重的各種元素來達成。例如，一段很長的文字就可以用一個深色的圖形來平衡，一系列的小元素可以用一個大的元素來平衡。其變化的可能性是有很多的。一個不對稱的平衡頁面有時是經由設計者的天賦巧思所設計出來的，有時則是經過仔細的計算。初學者可藉由格線的輔助來設計頁面的平衡。一個不對稱或是非制式的組合方式可以使頁面在視覺上顯得較生動活潑。

　　5、缺乏平衡的問題

　　一般而言，一個頁面會出現不平衡的情況，若不是因為技術上的限制，就是因為設計者缺乏慨念。目前軟體的技術已能符合大部分格式設計的要求，因此很快地，設計者就必須為失敗的設計負起全責。有時候設計者的意圖是要制造出一種讓人感到不安、不穩(wěn)定的感覺，這時一個不平衡的頁面也許就可以適當地傳達出這種概念或感覺，但如果這種不平衡不是出于故意的安排，那么，這樣一個頁面會讓你的網站功效大打折扣。

　　6、網頁設計前后的一致性

　　一般而言，你不會只設計一頁網頁[1]，而是將許多頁面以一個主題為中心相互連結起來，因此，在開始設計時，你必須將整個 WWW 網站的方案做全盤考量。由于超媒體的便利性，我們都習慣只需用滑鼠輕輕一點，就能從某一頁跳到另一頁，而在這種情形下，視覺上的改變可能會讓讀者認為我們已從一個網站跳到另一個網站，通常我們當然不希望讀者在我們的網站中，從一頁跳到另一頁時產生這種錯覺。因此，你就得在你的頁面之間建立一個統一性，例如使用一個固定的標題圖示、一種特別的版面安排、或是一組特定的色系。記住，在考慮如何讓你的頁面具有一致性時，對這一致性做一點點的變化，會使你的網站更具有視覺趣味，并且使讀者更有興趣去瀏覽它。有時你也許會想要對你的頁面設計作變化，讓它不那么枯燥無聊，有時你也可能想要建立一個版面規(guī)格讓每一頁的內容配置都能保有一致性。

　　7、紙上設計與網頁設計的比較

　　在設計 WWW 時，我們應記住的是，電腦的熒幕通常是寬大于高，這使得我們很難同時在電腦上和紙上作設計，幾年前，有人預言一個無紙的時代即將來臨，但到了今日，看起來我們的用紙量比過去有過之而無不及，無論電腦多么方便，人們還是習慣把網頁列印出來看，如果你是以水平而非垂直的方向在擴展你的網頁，那就會有些列印上的問題。有些瀏覽器會在列印前先把頁面重新安排過，但是通常這也會破壞所有有趣的頁面設計。因此，你必須了解，有些材料最好是以垂直的格式來表現，這樣比較便于列印。

　　8、使用設計參考格線

　　在設計版面時，利用格線來安置物件的位置是一個蠻不錯的建議。格線就像是隱形的路標，有助于在網站的頁面中建立組織化的單元。許多的桌面排版軟體中都附有標線以便于物件的對齊，有些編寫網頁的工具也會提供這類的工具，但一般的文書編輯器則沒有。在這種情況下，你可以為你的頁面畫一個草圖，一但你決定了所依據的格線，你就可以用這個架構去對齊你的圖像與文字，讓你的頁面達到平衡。HTML 的分割頁框的功能，則可以讓你在頁面上定義出不同的區(qū) 塊，這使你只需更新有改變的元素即可，而不用每次都重新修改一整頁。有些人可能會覺得使用格線會讓畫面的整體設計變得單調無趣，但其實如果運用得當的話，并不會如此。一但你建立了網頁的架構，你就可以在這個格線架構下衍生出許多種安排物件的方式，并且每頁之間在元素排列上的變化是非常重要的。一個元素可以占據一個或兩個、甚至更多個區(qū)域，文字也可以放在一塊本來被拿來放圖像的區(qū)塊，你可以為一個網站準備兩個或以上的格線，然后依照每一頁的內容做不同的應用，通常當一個網站中使用多個格線模式時，是為了要在頁面轉換之間，創(chuàng)造出視覺上的韻律感。

　　9、視覺焦點的安排

　　在完成了一個頁面的編寫之后，用瀏覽器開啟它，往后站一步來看。不要讀內文的文字，把你的眼睛閉上幾秒鐘，然后打開，看著你的 WWW 網頁。頁面上的哪個部分最吸引你的眼光？你目光的下一個目標又是哪里？試著去追溯你的眼睛瀏覽整個頁面的軌跡。作為一個設計者，也許你會有些偏見，所以你可以找別人來幫你看看你的焦點與瀏覽路徑是否適當。如果你的焦點在顏色對比、大小、密度或是色值上太過強勢，那么讀者的目光就會很難從上面移開，而其他的部份就會被認為是不重要的。但如果頁面上的所有元素看起來都差不多，那們讀者就很容易被搞糊涂，不知道該從哪里看起，也不知道下一步要看哪一項。無論如何，不管設計者是否是有意識地考慮到讀者的目光，你都要記得，目光瀏覽的路徑，也會影響到讀者對這個網頁的滿意度與閱讀經驗。