頁(yè)面編排網(wǎng)頁(yè)設(shè)計(jì)與頁(yè)面編排原則

時(shí)間：2023-02-18 23:14:01 | 來(lái)源：營(yíng)銷(xiāo)百科

時(shí)間：2023-02-18 23:14:01 來(lái)源：營(yíng)銷(xiāo)百科

頁(yè)面編排網(wǎng)頁(yè)設(shè)計(jì)與頁(yè)面編排原則：原則上，一個(gè) HTML 網(wǎng)頁(yè)頁(yè)面的配置，能夠加強(qiáng)作者所企圖表達(dá)的概念與目的。頁(yè)面上的每一個(gè)元素，都會(huì)影響讀者對(duì)頁(yè)面上其他元素的解讀，在看一個(gè)頁(yè)面時(shí)，我們應(yīng)該把整個(gè)組合看做是一個(gè)統(tǒng)一的整體，而非許多小單位的集合。在進(jìn)行版面配置時(shí)，應(yīng)把焦點(diǎn)放在版面的平衡與留白空間的處理，設(shè)計(jì)者應(yīng)該根據(jù)圖像與背景的關(guān)系、對(duì)比的關(guān)系、類(lèi)似的原理、以及比例的關(guān)系，將整個(gè)空間以最有效的方式加以分配、組織。

n1、版面留白量

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

n2、視覺(jué)平衡的考量

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

n3、對(duì)稱(chēng)式的平衡

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

n4、不對(duì)稱(chēng)的平衡

n一個(gè)不對(duì)稱(chēng)的頁(yè)面結(jié)構(gòu)必須藉由技巧性地安排不同視覺(jué)比重的各種元素來(lái)達(dá)成。例如，一段很長(zhǎng)的文字就可以用一個(gè)深色的圖形來(lái)平衡，一系列的小元素可以用一個(gè)大的元素來(lái)平衡。其變化的可能性是有很多的。一個(gè)不對(duì)稱(chēng)的平衡頁(yè)面有時(shí)是經(jīng)由設(shè)計(jì)者的天賦巧思所設(shè)計(jì)出來(lái)的，有時(shí)則是經(jīng)過(guò)仔細(xì)的計(jì)算。初學(xué)者可藉由格線的輔助來(lái)設(shè)計(jì)頁(yè)面的平衡。一個(gè)不對(duì)稱(chēng)或是非制式的組合方式可以使頁(yè)面在視覺(jué)上顯得較生動(dòng)活潑。

n5、缺乏平衡的問(wèn)題

n一般而言，一個(gè)頁(yè)面會(huì)出現(xiàn)不平衡的情況，若不是因?yàn)榧夹g(shù)上的限制，就是因?yàn)樵O(shè)計(jì)者缺乏慨念。目前軟體的技術(shù)已能符合大部分格式設(shè)計(jì)的要求，因此很快地，設(shè)計(jì)者就必須為失敗的設(shè)計(jì)負(fù)起全責(zé)。有時(shí)候設(shè)計(jì)者的意圖是要制造出一種讓人感到不安、不穩(wěn)定的感覺(jué)，這時(shí)一個(gè)不平衡的頁(yè)面也許就可以適當(dāng)?shù)貍鬟_(dá)出這種概念或感覺(jué)，但如果這種不平衡不是出於故意的安排，那麼，這樣一個(gè)頁(yè)面會(huì)讓你的網(wǎng)站功效大打折扣。

n6、網(wǎng)頁(yè)設(shè)計(jì)前後的一致性

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

n7、紙上設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的比較

n在設(shè)計(jì) WWW 時(shí)，我們應(yīng)記住的是，電腦的螢?zāi)煌ǔＪ菍挻箪陡?，這使得我們很難同時(shí)在電腦上和紙上作設(shè)計(jì)，幾年前，有人預(yù)言一個(gè)無(wú)紙的時(shí)代即將來(lái)臨，但到了今日，看起來(lái)我們的用紙量比過(guò)去有過(guò)之而無(wú)不及，無(wú)論電腦多麼方便，人們還是習(xí)慣把網(wǎng)頁(yè)列印出來(lái)看，如果你是以水平而非垂直的方向在擴(kuò)展你的網(wǎng)頁(yè)，那就會(huì)有些列印上的問(wèn)題。有些瀏覽器會(huì)在列印前先把頁(yè)面重新安排過(guò)，但是通常這也會(huì)破壞所有有趣的頁(yè)面設(shè)計(jì)。因此，你必須了解，有些材料最好是以垂直的格式來(lái)表現(xiàn)，這樣比較便於列印。

n8、使用設(shè)計(jì)參考格線

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

n9、視覺(jué)焦點(diǎn)的安排

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