web頁面設計規範
目錄1 引言 2
2 web頁面框架內容 2
2.1 頁面框架 2
2.2 頁面布局 3
2.2.1 布局原則 3
2.2.2 布局要求 4
2.3 如果能給使用者提供自定義介面風格，則由使用者自己選擇顏色、字型等； 6
2.4 頁面字型 6
2.5 邊距 6
2.6 ** 6
2.7 段落排版 7
2.8 frame 7
2.9 其他頁面元素 8
3 頁面風格 8
3.1 風格分類 8
4 web頁面互動 8
4.1 頁面元素焦點切換 8
4.1.1 資訊填寫 8
4.1.2 滑鼠互動響應 9
4.2 頁面資訊互動 10
4.2.1 操作結果確認 10
4.2.2 其他規則 10
4.3 頁面資訊提示 10
4.4 鍵盤響應支援 12
5 其他快捷鍵的支援，需要根據專案的實際情況來定義。 13
6 web頁面通用規範 13
6.1 一般頁面功能 13
6.1.1 新增 13
6.1.2 修改 13
6.1.3 刪除 13
6.1.4 查詢 13
6.1.5 取消 13
6.1.6 儲存 13
6.1.7 重置 14
6.1.8 返回 14
6.1.9 分頁 14
6.1.10 全選 14
6.2 一般頁面規則 14
6.2.1 預設值 14
6.2.2 單選按組鈕預設值 14
6.2.3 表單元素選擇 14
6.2.4 必填值 14
6.2.5 介面傳遞 14
6.2.6 視窗巢狀 14
6.2.7 輸入框操作 15
6.2.8 **幫助功能 15
6.2.9 選單功能要求 15
6.2.10 快捷鍵功能 16
6.2.11 快捷鍵的限制 16
6.2.12 頁面的規範性 16
6.2.13 系統易用性 17
6.2.14 輸入安全性要求 17
6.2.15 獨特性要求 18
6.2.16 多視窗的應用與系統資源 18
7 盡量防止對系統的獨佔使用； 18
8 頁面程式設計技術使用規範 18
8.1 頁面元素命名 18
9 頁面資源規格說明 20
9.1 圖示 20
9.2 ** 20
9.3 多** 21
本文用於規範我們所開發的商業軟體中對於web頁面的設計工作，明確在設計中所要遵循的準則和方法，web頁面中各個元素的規格要求，確保所實現的web頁面在風格、結構和功能上的統一，提公升商業軟體的外在品質。
web的頁面框架是指構成完整頁面的組織結構。通常是由以下三部分構成：head，main，foot，有些時候出於布局的需要，在「head」下面還會加上用於頁面功能導航的「menu」。
如圖：布局原則
對於web應用來說，頁面布局是和web應用的功能區相對應的，並且對於頁面中各個部分之間的切分比例也需要遵守一定的規則。
頁面布局的設計，首先需要考慮使用者在瀏覽web頁面時視覺流向上的要求：
圖 2從視覺流向上看，使用者首先看到的是頁面「head」部分的左面，通常那裡是標識這個web應用的logo；然後是陳列web應用主要功能的「menu」來用於頁面導航；接下來使用者將看的是處於頁面左側的「sidebar」，通常這裡也是用於頁面功能導航的，和「menu」出的選擇相呼應，這裡的內容可以通過類似樹狀結構的方式展示更為詳細的功能；接下來是處於頁面中心位置的內容部分，最後使用者的視線落在web頁面的底部。
布局要求
以上面圖示的布局方式為例，按照通常web頁面設計時所遵循的方法，並結合**分割比例的方法：
● 首先，將頁面按照3*3的方式進行分割，如下圖：
● 在高度方向上，對上部1/3區域按照**分割的方法分出head和menu的區域；
● 在寬度方向上，對中部左邊1/3區域按照**分割的方法分出sidebar的區域，剩下的空間留給content區域；
頁面的布局中，各個區域大小的定義方式是不同的，請見下圖：
圖 3在頁面布局中，對各個功能區域的切分是按照「畫素」和「比例」方式來進行的，以1024*768的解析度做為基準，其中：
● head區域，寬度是按照比例方式設定的，寬度按照100%設定，高度採用所佔的固定畫素值來確定的，一般佔？px，如果有menu區，則調整為？px；
● menu區域，和「head」的配置要求是一樣的，寬度按照100%設定，高度結合「head」的高度設定來確定，一般佔？px；
● sidebar區域，寬度是結合與「content」之間的**切分比例，按照固定畫素的方式確定的，一般佔？px；高度是按照比例方式來設定的；
● content區域，高度和寬度方向布局都是按照比例方式來設定的；
對於頁面布局來說，除了上述要求外，還需要考慮如下要求：
● 能自適應1024*768、800*600兩種解析度；
● 介面層次不超過3層；
● 預設視窗設定下，不應出現水平、垂直滾動條；
當介面內容超出顯示區域時，以浮動層的形式顯示；
還有，對於使用者的感官而言，螢幕對角線相交的位置是使用者直視的地方，而頁面正上方四分之一處為易吸引使用者注意力的位置，所以在放置頁面時要注意利用這兩個位置。
要求：● 父頁面或主頁面的中心位置應該設計在對角線焦點附近；
● 子頁面的位置應該靠近主窗體的左上角或正中；
● 需要多個子頁面彈出時，應該依次向右下方偏移，以顯示窗體出標題為宜；
介面應該大小適合美學觀點，感覺協調舒適，能在有效的範圍內吸引使用者的注意力。
建議和要求：
● 長寬接近**點比例，切忌長寬比例失調、或寬度超過長度；
● 布局要合理，不宜過於密集，也不能過於空曠，合理的利用空間；
● 同一頁面上的按鈕大小應該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；
● 按鈕的大小要與介面的大小和空間要協調；
● 避免空曠的介面上放置很大的按鈕；
● 放置完控制項後介面不應有很大的空缺位置；
● 字型的大小要與介面的大小比例協調， 通常使用的字型12px；
● 前景與背景色搭配合理協調，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用windows介面色調；
● 大型系統常用的主色有"#e1e1e1"、"#efefef"、"#c0c0c0"等；
● 介面風格要保持一致，字的大小、顏色、字型要相同，需要藝術處理或有特殊要求的地方建議使用**表現；
● 如果窗體支援最大化或放大時，窗體上的控制項也要隨著窗體而縮放；切忌只放大窗體而忽略控制項的縮放；
● 系統對話方塊頁面不應該支援縮放，即右上角只有關閉功能；
● 通常父窗體支援縮放時，子窗體沒有必要縮放；
頁面字型屬性的設定在相應的css中進行定義，頁面文字編碼要求是utf-8，在規定字型屬性時，需要設定：中文採用「宋體」，英文採用「arial」或「verdana」，css檔案中的font-family裡面必須保證有「宋體」。
對於頁面屬性中字型大小的設定，需要內容的不同級別來設定，通常：
「head」中標題文字，20px；
「menu」中的導航文字，14px；
「sidebar」中的文字，12px；
「content」中的正文，12px或14px，標題；
Web頁面設計規範
編號 版本號 受控狀態 作者 分發號 文件修改歷史記錄 文件修改記錄 文件審核記錄 引言目的 本文用於規範我公司所開發的商業軟體中對於web頁面的設計工作，明確在設計中所要遵循的準則和方法，web頁面中各個元素的規格要求，確保所實現的web頁面在風格 結構和功能上的統一，提公升商業軟體的外在品質。範...
頁面設計規範
編號 版本號 受控狀態 作者 分發號 文件修改歷史記錄 文件修改記錄 文件審核記錄 目錄1 引言 5 1.1 目的 5 1.2 範圍 5 1.3 縮略術語 5 1.4 參考資料 5 2 web頁面框架內容 5 2.1 頁面框架 5 2.2 頁面布局 6 2.2.1 布局原則 6 2.2.2 布局要求...
土地開發整理專案規劃設計規範
td t1012 2000 前言 為規範土地開發整理專案規劃設計 以下簡稱 規劃設計 工作，提高規劃設計的科學性以及更好地實施土地開發整理規劃，根據 中華人民共和國土地管理法 等有關法律 法規 規章制定本標準。省 自治區 直轄市土地行政主管部門可根據需要制定本標準的補充規定，報國土資源部備案。補充規...