論網(wǎng)站頁(yè)面設(shè)計(jì)的一致性原則

1、論網(wǎng)站頁(yè)面設(shè)計(jì)的一致性原則華曉清（中國(guó)人民大學(xué) 信息管理與信息系統(tǒng)系 ，北 京 100872）摘 要 ：隨著網(wǎng)絡(luò)技術(shù)與電子商務(wù)的發(fā)展 ，網(wǎng)站頁(yè)面設(shè)計(jì)也越來(lái)越受重視 ，優(yōu)秀的網(wǎng)頁(yè)雖然各有特色 ，但都遵守最基本的原則即保證 頁(yè) 面 的 一 致 性 。 通過(guò)從頁(yè)面結(jié)構(gòu) 、色 彩 、導(dǎo) 航 欄以及頁(yè)面標(biāo)準(zhǔn)元素功能四個(gè)角度分析應(yīng)如何設(shè)計(jì)網(wǎng)站頁(yè)面 ，既保證頁(yè)面之間的一致 性 ，又使得讀者不會(huì)因頁(yè)面風(fēng)格過(guò)于一致而產(chǎn)生視覺(jué)疲勞 ，并在此基礎(chǔ)上提出了一個(gè)基本的保證頁(yè)面一致性的設(shè)計(jì)方法 。關(guān) 鍵 詞 ：頁(yè) 面 設(shè) 計(jì) ；一 致 性 原 則 ；頁(yè) 面 布 局 ；導(dǎo) 航 欄 ；留 白中 圖 分 類 號(hào) ：TP37文

2、獻(xiàn) 標(biāo) 識(shí) 碼 ：A文 章 編 號(hào) ：1009-3044(2009)21-5627-03Principle of the United Webpage DesignHUA Xiao-qing(Department of Information Management and Information System, Renmin University of China, Beijing 100872, China)Abstract: With the development of IT and e-commerce, the webpage design is becoming more and

3、more important. Several issues may be concerned with a good webpage design, while one of the most fundamental principles is to create united pages. Four aspects including page layout design, color design, guidance design and the design of the function of some standard elements on the page, are consi

4、dered for a united but also varied webpage design. Consistent pages are not always good because visual fatigue may happen. From the above discus- sions, essential understandings to the importance of united webpage principle are strengthened and lead to a united webpage design process.Key words: webp

5、age design; united webpage design principle; page layout; navigation bar; active white space近 些 年 ，隨著網(wǎng)絡(luò)技術(shù)的發(fā)展 ，電子商務(wù)的日趨成熟 ，網(wǎng) 站 作為信息傳播不可或缺的強(qiáng)大載體 ，已經(jīng)被各大企業(yè)與高校充分利 用 起 來(lái) 。 網(wǎng)站的頁(yè)面設(shè)計(jì)也不斷發(fā)生變化 ，其功能從局限于展示網(wǎng)站發(fā)布方所要表達(dá)的信息 ，到體現(xiàn)網(wǎng)站發(fā)布方的文化 、風(fēng) 格 ，進(jìn) 而 為用戶提供良好的 ，舒適的訪問(wèn)體驗(yàn) ，從滿足基本功能的需求到追求較高層次的需要 ，形成了一個(gè)循序漸進(jìn)的過(guò)程 。隨著網(wǎng)站頁(yè)面設(shè)計(jì)水平的提高 ，訪 問(wèn) 者

6、 對(duì) 于網(wǎng)站頁(yè)面的要求也越來(lái)越高 ，他們并不關(guān)心具體的理論評(píng)價(jià)標(biāo)準(zhǔn) ，而是憑借直觀印 象及使用情況做出判斷 ，如 圖 1、圖 2 所 示 ：圖 1紐 曼 產(chǎn) 品 頁(yè) 面圖 2蘋 果 產(chǎn) 品 頁(yè) 面圖 1 是紐曼公司網(wǎng)站下的兩類類產(chǎn)品頁(yè)面 ，圖 2 是蘋果公司網(wǎng)站下的兩類產(chǎn)品頁(yè)面 ，就其頁(yè)面目標(biāo)而言 ，都是為了展示產(chǎn)品信 息 ；就其結(jié)構(gòu)層次而言 ，都是屬于具體的內(nèi)容頁(yè)面 ，層 次 一 致 。 但 在 訪 問(wèn) 者 眼 中 ，左側(cè)頁(yè)面風(fēng)格混亂 ，形 象 差 異 過(guò) 大 ，給 瀏 覽 帶 來(lái) 障 礙 ，而且會(huì)產(chǎn)生是否還在同一網(wǎng)站中的疑問(wèn) ，而右側(cè)頁(yè)面結(jié)構(gòu)清晰 ，層 次 分 明 ，內(nèi) 容 完 整 ，給瀏

7、覽帶來(lái)方便與順暢 。 孰 優(yōu) 孰 劣 ，一 目 了然 。 對(duì)于網(wǎng)站的設(shè)計(jì)者而言 ，遵循相關(guān)頁(yè)面設(shè)計(jì)原則 ，保證網(wǎng)站頁(yè)面一致性 ，將有助于訪問(wèn)者瀏覽網(wǎng)站內(nèi)容并獲得愉悅的體驗(yàn) 。1 文獻(xiàn)回顧保持頁(yè)面的一致性 ，既能強(qiáng)化風(fēng)格定位所 帶 來(lái) 的 作 用 ，又能在瀏覽體驗(yàn)上給瀏覽者帶來(lái)方便和順暢 。 如果頁(yè)面不一致 ，既 會(huì) 給 網(wǎng)站的形象帶來(lái)混亂 ，又會(huì)給瀏覽者帶來(lái)不便 。 舉 個(gè) 例 子 來(lái) 說(shuō) ，假如每個(gè)網(wǎng)頁(yè)上的導(dǎo)航排列或者顏色不同 ，那么瀏覽者進(jìn)入不同頁(yè) 面之后就會(huì)無(wú)所適從 ，難以找到他要找的信息 。在之前的研究中 ，關(guān)于如何設(shè)計(jì)頁(yè)面以保證頁(yè)面一致性原則 ，有 過(guò) 許 多 陳 述 ，如 ：收 稿

8、 日 期 ：2009-03-10作 者 簡(jiǎn) 介 ：華 曉 清 （1989-），女 ，湖 北 松 滋 人 ，主要研究方向?yàn)榫W(wǎng)站設(shè)計(jì)與開(kāi)發(fā) 。Computer Knowledge and Technology 電腦知識(shí)與技術(shù)第 5 卷 第 21 期 (2009 年 7 月)設(shè) 計(jì) 網(wǎng) 站 時(shí) ，規(guī)劃一個(gè)統(tǒng)一的主題與風(fēng)格 可以使所有的頁(yè)面緊緊聯(lián)系在一起 。 對(duì)于網(wǎng)頁(yè)上顏色 、字 體 、圖片以及頁(yè)面布局的選 擇用該像訪問(wèn)者傳遞一個(gè)一致的視覺(jué)上的主題 ，而這個(gè)主題也應(yīng)與網(wǎng)站發(fā)布方所要表達(dá)的內(nèi)容相一致 。在網(wǎng)站的各個(gè)頁(yè)面中 ，涉及到的文字的字型 、字 號(hào) ，前后翻轉(zhuǎn)用到的按鈕 ，以及裝飾用的點(diǎn) 、線 、面

9、 等 的 圖 形 ，都應(yīng)該有比較統(tǒng)一 的 樣 式 。 讓瀏覽者在瀏覽你的網(wǎng)站時(shí) ，不至于感覺(jué)是進(jìn)入了許多不同的網(wǎng)站 。結(jié)構(gòu)的一致性在網(wǎng)站營(yíng)銷中占重要地位 ，具體包括網(wǎng)站布局 、文 字 排 版 、裝 飾 性元素出現(xiàn)的位置 、導(dǎo) 航 的 統(tǒng) 一 、圖 片 的 位 置 等 等 。制 作 網(wǎng) 站 之 前 ，對(duì)每個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)布局 、色 彩 基 調(diào) 、字 體 字 號(hào) 、圖片運(yùn)用都要有統(tǒng)一的構(gòu)思與規(guī)劃 。但是當(dāng)網(wǎng)站頁(yè)面過(guò)于 一 致 時(shí) ，訪問(wèn)者會(huì)因其頁(yè)面缺少變化而 感 到 厭 煩 ，重 復(fù) 性 的 、類 似 的 頁(yè) 面 容易使訪問(wèn)者疲勞 ，進(jìn) 而 失 去 對(duì) 網(wǎng)站的興趣而離開(kāi) 。 對(duì)于如何權(quán)衡網(wǎng)頁(yè)一致性與網(wǎng)

10、頁(yè)之間的變化 兩 個(gè) 因 素 ，使得頁(yè)面既和諧統(tǒng)一 ，又 同 中 有 變 ，將是我們下面所要 具體討論的問(wèn)題 。下文首先介紹了如何 通過(guò)頁(yè)面元素的控制來(lái)實(shí)現(xiàn)頁(yè)面的一 致 性 ，繼而詳細(xì)介紹了如何利用一致性原則及表格 、 留 白 等 方 法 來(lái)具體實(shí)現(xiàn)網(wǎng)站的設(shè)計(jì) ，并對(duì)一致性原則的局限性進(jìn)行解釋 。2 頁(yè)面一致性原則一個(gè)網(wǎng)站之內(nèi)各頁(yè)面風(fēng)格統(tǒng)一 ， 設(shè) 計(jì) 一 致 ， 會(huì)給瀏覽者帶來(lái) 極高的視覺(jué)享受 。 保證頁(yè)面一致性主要可從結(jié)構(gòu) 、色 彩 、導(dǎo) 航 欄 的設(shè)計(jì)以及頁(yè)面元素功能四個(gè)角度出發(fā) ，從 整 體 到 局 部 ，進(jìn)一步細(xì)化保證頁(yè)面一致性的設(shè)計(jì)方法 。2.1 結(jié) 構(gòu) 一 致 性頁(yè)面結(jié)構(gòu)包括頁(yè)面

11、布局 、文字排版以及標(biāo)志性元素的位置等 ，頁(yè)面結(jié)構(gòu)設(shè)計(jì)是保證頁(yè)面一致性的重要手段 。2.1.1 頁(yè) 面 布 局頁(yè)面布局大致可分為 “國(guó) ”字 型 、拐 角 型 、標(biāo) 題 正 文 型 、左 右 框 架 型 等 。 不同的網(wǎng)站根據(jù)其內(nèi)容及面向的對(duì)象選擇不同的布局 ，例 如 “國(guó) ”字型頁(yè)面布局多用于大型網(wǎng)站 ，而 左 右 框架型多用于大型論壇 ，因其結(jié)構(gòu)非常清晰 。 一 般 而 言 ，一個(gè)網(wǎng)站內(nèi)所有頁(yè)面均采取 同一種頁(yè)面布局以保證頁(yè)面一致性 ，但是對(duì)于特殊的頁(yè)面也可采取些變化 ，避免頁(yè)面結(jié)構(gòu)單一 ，影響訪問(wèn)者瀏覽 。 具 體 說(shuō) 來(lái) ，譬 如 對(duì)于 采 用 “國(guó) ”字形的大型商業(yè)網(wǎng)站頁(yè)面 ，其注冊(cè)

12、頁(yè)面就可以采用標(biāo)題正文型 ，如 圖 4 所 示 。2.1.2 文 字 排 版頁(yè)面版面由于面積大 ，字 數(shù) 多 ，會(huì)給讀者帶來(lái)視覺(jué)疲勞 ，所 以 頁(yè) 面 文 字 將 分 欄 、分 塊 展 現(xiàn) ，正文通常以宋體 、新 宋 體 居 多 .有時(shí)也根據(jù)不同的讀 者和設(shè)計(jì)需要換用其他字體 ，字體字號(hào)選擇以文章整體統(tǒng)一為原則 ，字 體種類少的頁(yè)面設(shè)計(jì)比較文靜 ，雅 致 ，字體種類多的頁(yè)面設(shè)計(jì)會(huì)給人豐 富 的 視 覺(jué) 效 果 ，但同一頁(yè)面上字體的種類最好不要超過(guò)三種 ，字 體 太 多 會(huì) 顯 得 雜 亂 ，無(wú)法形成統(tǒng)一風(fēng)格 。 頁(yè) 面 設(shè) 計(jì) 中 ，標(biāo)準(zhǔn)字體即用于標(biāo)志 、標(biāo) 題 、主 菜 單 的 特 有 字

13、體 ，是體現(xiàn)頁(yè)面一致性的重要元素 ，不同頁(yè)面選用相同的 標(biāo) 準(zhǔn) 字體給訪問(wèn)者以和諧統(tǒng)一的感覺(jué) ，為了體現(xiàn)頁(yè)面的特有風(fēng)格 ，也 可 以 根 據(jù) 需要選擇一些特別字體 ，例 如 ，為 了體現(xiàn)專業(yè)可以使用粗仿宋體 ，體 現(xiàn) 設(shè)計(jì)精美可以用廣告體 ，體現(xiàn)親切隨意可以用手寫體等等 。2.1.3 標(biāo)致性元素的位置 強(qiáng)調(diào)頁(yè)面標(biāo)志性元素 ，即 網(wǎng) 站 或 公 司 名 稱 、網(wǎng) 站 或 企 業(yè) Logo、導(dǎo) 航 及 輔助導(dǎo)航的形式及位置 、公司聯(lián)系信息等的一致性 ，這是目前網(wǎng)站普 遍 采用 的 結(jié) 構(gòu), 一方面減少設(shè)計(jì) 、 開(kāi) 發(fā) 的 工 作 量, 同時(shí)更有利于以后的網(wǎng)站維 護(hù) 與 更 新 。圖 3如何實(shí)現(xiàn)一致

14、性的網(wǎng)站設(shè)計(jì) 圖 4 標(biāo) 題 正 文 型(淘 寶 注 冊(cè) 頁(yè) 面)2.2 色 彩 一 致 性網(wǎng)站頁(yè)面給人的第一印象來(lái)至視覺(jué)沖擊 ，頁(yè)面的標(biāo)準(zhǔn)色彩設(shè)計(jì)是相當(dāng)重要的一個(gè)影響因素 ，不同的色彩搭配產(chǎn)生不同的效果 ，并可能影響到訪問(wèn)者的情緒 。 例 如 IBM 的 深 藍(lán) 色 ，肯德基的紅色條形 ，Windows 視窗標(biāo)志上的紅藍(lán)黃綠色塊 ，都使我們覺(jué)得很貼切 ， 很 和 諧 。 標(biāo)準(zhǔn)色彩主要用于網(wǎng)站的標(biāo)志 ，標(biāo) 題 ，主菜單和主色塊 ，來(lái)保證頁(yè)面的一致性 。 標(biāo)準(zhǔn)色彩確定后, 還可以選擇一到兩種輔助 色 配 合 使 用, 整個(gè)網(wǎng)頁(yè)的色彩最好控制在三色以內(nèi) 。 如果整個(gè)網(wǎng)頁(yè)采用單色調(diào), 即只用一種色相

15、, 可以調(diào)節(jié)其明度或純度, 也 就 是 說(shuō) 將色彩變深或變淡, 產(chǎn) 生 新 的 色 彩 。2.3 導(dǎo)航欄的一致性 網(wǎng) 站 的 導(dǎo) 航 ，包 括 頂 部 、底部和側(cè)面的導(dǎo)航欄都應(yīng)該盡可能地對(duì) 訪 問(wèn) 者 友 好 、易 用 ，保 證 訪 問(wèn) 者 “想 ”看到的在盡可能的顯眼位 置 ，導(dǎo)航欄里的各要素應(yīng)該反映出各個(gè)目錄和子目錄 ，以及各個(gè)主題之間的邏輯性 、相 關(guān) 性 ，幫助訪問(wèn)者找到主要相關(guān)內(nèi)容 。在屏幕上的一個(gè)網(wǎng)頁(yè)實(shí)際上可以有五個(gè)基本區(qū)域來(lái)放置導(dǎo)航元素 ：頂 部 、底 部 、左 側(cè) 、右 側(cè) 和 中 央 。 各個(gè)位置都有其優(yōu)缺點(diǎn) 。 一般 而 言 ，主導(dǎo)航欄的位置應(yīng)該在接近頂部或網(wǎng) 頁(yè) 左 側(cè)

16、的 位 置 ，如果因?yàn)閮?nèi)容過(guò)多需要輔助導(dǎo)航時(shí) ，要讓訪問(wèn)者容易地分辨出哪個(gè)是 主 導(dǎo) 航 欄 ，哪個(gè)是輔助導(dǎo)航欄 。不管為導(dǎo)航欄選擇了哪種位置 ，即 便 是 幾 乎所有的位置都使用了 ，對(duì)不同頁(yè)面而言 ，各頁(yè)面間的導(dǎo)航欄也必須保持一致性 。 如 果主導(dǎo)航欄在上部 ，輔助導(dǎo)航欄在左部 ，就 仍 保 持 原 樣 。 在標(biāo)志頁(yè)和其他頁(yè)間 ，導(dǎo)航欄的變換是可能的 ，但一般來(lái)講仍應(yīng)充分考慮穩(wěn) 計(jì)算機(jī)網(wǎng)絡(luò)與信息安全本欄目責(zé)任編輯：馮蕾5628第 5 卷 第 21 期 (2009 年 7 月)Computer Knowledge and Technology 電腦知識(shí)與技術(shù)定 性 和 一 致 性 ，不能有太

17、大的跳躍 。2.4 面元素功能的一致性 一個(gè)網(wǎng)站內(nèi)各個(gè)頁(yè)面間 ，完成同樣的功能應(yīng)該盡量使用相同的元素 。 例如在某一頁(yè)面中 ，用標(biāo)題來(lái)建立鏈接 ，想要了解詳細(xì)的 ， 深層次的內(nèi)容直接點(diǎn)擊標(biāo)題即可 ；那么在這一網(wǎng)站下的所有頁(yè)面 ，如 要建立關(guān)于詳細(xì)內(nèi)容的鏈接 ，都需通過(guò)標(biāo)題來(lái)做 ，而 不 是 其 他 方 法 ，例 如 建 立 More 的 鏈 接 。3 遵循頁(yè)面一致性原則的設(shè)計(jì)方法3.1 設(shè)計(jì)一個(gè)統(tǒng)一的主題與結(jié)構(gòu) 一個(gè)統(tǒng)一的主題與結(jié)構(gòu)可以將單個(gè)的頁(yè)面 整合成一個(gè)有序的網(wǎng)站 ，對(duì) 于 色 彩 、文 字 排 版 、圖像以及頁(yè)面布局的選擇傳遞給訪問(wèn) 者一個(gè)視覺(jué)上的主題 ，而這個(gè)主題所傳遞的 正是網(wǎng)站發(fā)

18、布方所要表達(dá)的內(nèi)容 。 根據(jù)網(wǎng)站的性質(zhì)與使命選擇設(shè)計(jì)一個(gè)統(tǒng)一的主題與 結(jié) 構(gòu) ，在此基礎(chǔ)上逐步展開(kāi) ，添 加 頁(yè) 面 內(nèi) 容 ，構(gòu)建一個(gè)個(gè)單獨(dú)的頁(yè)面 。3.2 網(wǎng)站層次規(guī)劃與一致性頁(yè)面設(shè)計(jì) 一個(gè)頁(yè)面雖是一個(gè)單獨(dú)的實(shí)體 ，但 也 是 一 個(gè)網(wǎng)站的組成部分 ，其設(shè)計(jì)既有獨(dú)特之處 ，又必須符合整個(gè)網(wǎng)站的風(fēng)格 。 各 個(gè) 頁(yè) 面 之 間的跳轉(zhuǎn)鏈接要結(jié)構(gòu)清晰 ，內(nèi) 容 過(guò) 渡 平 穩(wěn) ，避免格式上突然的隨機(jī)的變化 。 對(duì)網(wǎng)站的結(jié)構(gòu)進(jìn)行分析 ，劃 分 層 次 ，并依次鏈接其各個(gè)頁(yè) 面 ，形成一個(gè)統(tǒng)一的網(wǎng)站 。3.3 運(yùn)用表格劃分頁(yè)面板塊 通過(guò)表格將頁(yè)面內(nèi)容分塊 ，規(guī)范化頁(yè)面結(jié)構(gòu) ，但也可以打破此類格局以顯

19、多樣性 ，并著重強(qiáng)調(diào)重要信息 。 瀏覽者對(duì)于頁(yè)面的不 同位置的關(guān)注程度是不一樣的 ，運(yùn)用表格劃分區(qū)域 ，并根據(jù)其重要性安排內(nèi)容 ，是頁(yè)面設(shè)計(jì)的一個(gè)重要方法 。3.4 利用留白增加頁(yè)面可讀性 留 白 或 是 Active White Space 即頁(yè)面的空白區(qū)域 ，在頁(yè)面中尤其是個(gè)分塊的內(nèi)容間適當(dāng)運(yùn)用留白可使頁(yè)面結(jié)構(gòu)更加明晰 ，有 助 于訪問(wèn)者的瀏覽 。 此留白并不一定是白色 ，而是與背景色融合在一起 。4 局限性網(wǎng)站頁(yè)面是典型的人機(jī)交互平臺(tái) ，網(wǎng) 站頁(yè)面設(shè)計(jì)也是人機(jī)界面設(shè)計(jì)的典型應(yīng)用 。 自美國(guó)的認(rèn)知心理學(xué)界在 20 世 紀(jì) 80 年 代 中 期 首 先 提 出 了 “對(duì) 用 戶 友 好 ”的

20、 設(shè) 計(jì) 觀 念 ，人們的設(shè)計(jì)價(jià)值觀念也在 一 直 改 變 ，使計(jì)算機(jī)在人機(jī)界面上適應(yīng)人的思維特性和行動(dòng)特 性 ，即 “以 人 為 本 ”的人機(jī)界面設(shè)計(jì)思想 ，網(wǎng)站頁(yè)面設(shè)計(jì)也要遵循這一理念 ，以 人 為 本 ，面 向 用 戶 。網(wǎng)站的使命及目標(biāo)用戶決定了頁(yè)面的基本風(fēng)格 ，面 向 少 數(shù)人的個(gè)人網(wǎng)站 、面向消費(fèi)者的電子商務(wù)網(wǎng)站以及面向?qū)W生的電子教 務(wù) 網(wǎng) 站 ，他們的風(fēng)格是完全不同的 ；網(wǎng)站建設(shè)者所關(guān)心的內(nèi)容 ，與 用 戶所關(guān)心的內(nèi)容也是有差異的 ，譬如說(shuō)網(wǎng)站建設(shè)者可能更關(guān)心 圖片的質(zhì)量與動(dòng)畫的使用 ，而用戶所強(qiáng)調(diào)的是多久他們才能從頁(yè)面中找到所需要的信息 。之前所討論的頁(yè)面一致性原則雖然應(yīng)用廣泛 ，但也有其局限性 ，不能生硬的套用 ，應(yīng)該在充分考慮分析用戶需求的情況下加以 改 進(jìn) 與 調(diào) 整 ，才能使它更好的發(fā)揮作用 。5 結(jié)束語(yǔ)綜 上 所