論網(wǎng)站頁面設計的一致性原則

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

2、獻 標 識 碼 ：A文 章 編 號 ：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)絡技術的發(fā)展 ，電子商務的日趨成熟 ，網(wǎng) 站 作為信息傳播不可或缺的強大載體 ，已經(jīng)被各大企業(yè)與高校充分利 用 起 來 。 網(wǎng)站的頁面設計也不斷發(fā)生變化 ，其功能從局限于展示網(wǎng)站發(fā)布方所要表達的信息 ，到體現(xiàn)網(wǎng)站發(fā)布方的文化 、風 格 ，進 而 為用戶提供良好的 ，舒適的訪問體驗 ，從滿足基本功能的需求到追求較高層次的需要 ，形成了一個循序漸進的過程 。隨著網(wǎng)站頁面設計水平的提高 ，訪 問 者

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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