Web頁面設計規範

編號：版本號：

受控狀態：

作者：分發號：

文件修改歷史記錄

文件修改記錄

文件審核記錄

引言目的

本文用於規範我公司所開發的商業軟體中對於web頁面的設計工作，明確在設計中所要遵循的準則和方法，web頁面中各個元素的規格要求，確保所實現的web頁面在風格、結構和功能上的統一，提公升商業軟體的外在品質。

範圍本規範適用於公司所有的商業軟體產品。

縮略術語

dhmlx：web頁面的ui控制項

參考資料

web頁面框架內容

頁面框架

web的頁面框架是指構成完整頁面的組織結構。通常是由以下三部分構成：head，main，foot，有些時候出於布局的需要，在「head」下面還會加上用於頁面功能導航的「menu」。

如圖：圖 1頁面布局

布局原則

對於web應用來說，頁面布局是和web應用的功能區相對應的，並且對於頁面中各個部分之間的切分比例也需要遵守一定的規則。

頁面布局的設計，首先需要考慮使用者在瀏覽web頁面時視覺流向上的要求：

圖 2從視覺流向上看，使用者首先看到的是頁面「head」部分的左面，通常那裡是標識這個web應用的logo；然後是陳列web應用主要功能的「menu」來用於頁面導航；接下來使用者將看的是處於頁面左側的「sidebar」，通常這裡也是用於頁面功能導航的，和「menu」出的選擇相呼應，這裡的內容可以通過類似樹狀結構的方式展示更為詳細的功能；接下來是處於頁面中心位置的內容部分，最後使用者的視線落在web頁面的底部。

布局要求

頁面分割

以上面圖示的布局方式為例，按照通常web頁面設計時所遵循的方法，並結合**分割比例的方法：

首先，將頁面按照3*3的方式進行分割，如下圖：

在高度方向上，對上部1/3區域按照**分割的方法分出head和menu的區域；

在寬度方向上，對中部左邊1/3區域按照**分割的方法分出sidebar的區域，剩下的空間留給content區域；

在高度方向上，對下部1/3區域按照**分割的方法分出foot的區域；

頁面結構

頁面的布局中，各個區域大小的定義方式是不同的，請見下圖：

圖 3在頁面布局中，對各個功能區域的切分是按照「畫素」和「比例」方式來進行的，以1024*768的解析度做為基準，其中：

head區域，寬度是按照比例方式設定的，寬度按照100%設定，高度採用所佔的固定畫素值來確定的，一般佔？px，如果有menu區，則調整為？px；

menu區域，和「head」的配置要求是一樣的，寬度按照100%設定，高度結合「head」的高度設定來確定，一般佔？px；

sidebar區域，寬度是結合與「content」之間的**切分比例，按照固定畫素的方式確定的，一般佔？px；高度是按照比例方式來設定的；

content區域，高度和寬度方向布局都是按照比例方式來設定的；

foot區域，寬度按照100%設定，高度採用所佔的固定畫素值來確定的，一般佔？px；

頁面展現

對於頁面布局來說，除了上述要求外，還需要考慮如下要求：

能自適應1024*768、800*600兩種解析度；

介面層次不超過3層；

預設視窗設定下，不應出現水平、垂直滾動條；

當介面內容超出顯示區域時，以浮動層的形式顯示；

還有，對於使用者的感官而言，螢幕對角線相交的位置是使用者直視的地方，而頁面正上方四分之一處為易吸引使用者注意力的位置，所以在放置頁面時要注意利用這兩個位置。

要求：父頁面或主頁面的中心位置應該設計在對角線焦點附近；

子頁面的位置應該靠近主窗體的左上角或正中；

需要多個子頁面彈出時，應該依次向右下方偏移，以顯示窗體出標題為宜；

在頁面上方四分之一處放置使用者的logo、主要功能導航和一些系統操作功能；

頁面美化

介面應該大小適合美學觀點，感覺協調舒適，能在有效的範圍內吸引使用者的注意力。

建議和要求：

長寬接近**點比例，切忌長寬比例失調、或寬度超過長度；

布局要合理，不宜過於密集，也不能過於空曠，合理的利用空間；

同一頁面上的按鈕大小應該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；

按鈕的大小要與介面的大小和空間要協調；

避免空曠的介面上放置很大的按鈕；

放置完控制項後介面不應有很大的空缺位置；

字型的大小要與介面的大小比例協調，通常使用的字型12px；

前景與背景色搭配合理協調，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用windows介面色調；

大型系統常用的主色有"#e1e1e1"、"#efefef"、"#c0c0c0"等；

介面風格要保持一致，字的大小、顏色、字型要相同，需要藝術處理或有特殊要求的地方建議使用**表現；

如果窗體支援最大化或放大時，窗體上的控制項也要隨著窗體而縮放；切忌只放大窗體而忽略控制項的縮放；

系統對話方塊頁面不應該支援縮放，即右上角只有關閉功能；

通常父窗體支援縮放時，子窗體沒有必要縮放；

如果能給使用者提供自定義介面風格，則由使用者自己選擇顏色、字型等；

頁面字型

頁面字型屬性的設定在相應的css中進行定義，頁面文字編碼要求是utf-8，在規定字型屬性時，需要設定：中文採用「宋體」，英文採用「arial」或「verdana」，css檔案中的font-family裡面必須保證有「宋體」。

對於頁面屬性中字型大小的設定，需要內容的不同級別來設定，通常：

「head」中標題文字，20px；

「menu」中的導航文字，14px；

「sidebar」中的文字，12px；

「content」中的正文，12px或14px，標題；

「foot」中的文字，12px或10px；

有關頁面字型屬性的具體設定參見附錄中的css示例。

邊距web頁面和其中的**都應該設定邊距，避免頁面元素緊貼邊沿的情況發生，最小邊距值為「**x」，預設邊距值應在css中設定。

例如：圖 4

**對於**，其屬性的設定同樣在css中進行定義。

**使用最多的情況是顯示裝在的資料，由於有很多表項需要在頁面中完整顯示，因此原則上對於**各個單元格寬度的設定應採用百分比方式來進行，這樣**不僅能夠將資料完整地顯示，而且還能夠適應不同解析度的情況。但由於**中存在不定長的內容，所以為了保證**的寬度不被擠變形，對於不定長的內容，可固定顯示寬度，當超出此顯示寬度後，以……顯示，游標停留後，詳細內容再在浮動層顯示。

其他要求：

表頭中的資料應水平/垂直居中對齊。

表單中內容如為定長，則為居中顯示；如為不固定的中英文內容，則為居左顯示；如為數值形式，則為居右顯示。

**的表頭應採用不同於**內容的背景顏色，並要求對比明顯；

**表頭的文字應採用加粗，或不同於**內容的字型；

**中相鄰行需要通過兩種有一定對比差異的淺色作為背景色；

各個頁面的**邊框風格需要統一，建議設定細邊框；

**中存在的鏈結文字需要採用不同於其他內容的顏色或字型顯示；

對於**的巢狀盡量控制在三層以內，並且禁止使用**來進行頁面布局。

有關**屬性的具體設定請參見附錄中的css示例。

段落排版

在web頁面中，「content」部分是展示頁面正文的區域，當段落是由純文字構成時：

正文一行字數最好不超過50，首頁的標題文字以8-20字為佳。

行距建議用百分比來定義，常用的兩個行距的值是line-height:120%或150%；

對於一段文字，尤其是正文部分，保證左右至少有15px的留白，便於使用者換行時不受到干擾。

文字和背景對比要足夠明顯，保證最弱文字的可讀性。

在使用標籤，需要對應有

，並且要求設定margin，使得段落文字的前後左右能夠有合適的空白區。可在css中設定：p，分別定義了上、右、下、左的空白區大小。

首行縮排時，禁止使用「」，而是在css中設定text-indent，例如：p 。

在一段完整的文字中請盡量不要使用

來人工干預分段；

左-右、上-下，tb-rl是指上-下、右-左。

Web頁面設計規範

WEB頁面設計規範整理ok

頁面設計規範

醫院設計規範

Web頁面設計規範

WEB頁面設計規範 整理ok

頁面設計規範

醫院設計規範

相關推薦

WEB頁面設計規範整理ok