UI設計網(wǎng)頁規(guī)范

1、，、頁面信息規(guī)范1、頁面命名每個頁面都要有與之模塊對應的名稱。2、頁面兼容性(1)頁面大小兼容o自適應1366*768px及以上的分辨率o默認窗口設置下，不應出現(xiàn)水平滾動條，避免出現(xiàn)垂直滾動條(當內容過多時允許滾動條)(2)彈窗、彈頁要保證768高度的分辨率顯示正常，同時能移動查看 彈出框內容。彈出框高度為不超過450Px ,且顯示在內容頁面相對水平、 垂 直相對居中位置。(3)瀏覽器兼容兼容Chrome、Firefox、Safari、IE8及以上主流瀏覽器。o文字文字用系統(tǒng)自帶的常規(guī)字體，且分一級標題、二級標題、主內容文字、 次內容文字、輔助文字(說明或引導性文字，提醒性文字)，分別用不同的

2、 字號、顏色。具體字號大小和顏色參考 UI設計效果圖。o內容圖片內容圖片均帶1px描邊；內容圖片未加載出來時顯示系統(tǒng)默認圖片。信息交互規(guī)范1、數(shù)據(jù)操作顯示數(shù)據(jù)(表格)(1)表頭：字體加粗、且比單無格內容字體大一號，且體字體大小參 照UI效果圖。(2)單無格：文字圖片內容左對齊，數(shù)字、金額內容右對齊。(3)操作內容原則上均用文字表達，如“編輯-刪除”(4)鼠標劃過表格單行時，顏色高亮。(5)原則上每頁顯示15-20條數(shù)據(jù)，實際顯示條數(shù)據(jù)可按設計排列效 果而定。(6)表格中不定長的字段，固定顯示寬度，超出內容用“”顯示光 標停留后，在浮動層顯示詳細內容。選中數(shù)據(jù)(1)勾選全選則選中當頁所有記錄(2

3、)去掉當頁某個記錄的勾選，則全選也去掉勾選。(3)翻頁后，自動去掉已勾選的記錄及全選的勾選。(4)翻頁后是否進行選擇記錄的保留應試具體業(yè)務而定。(5)刷新頁面后，自動去掉已勾選的記錄及全選的勾選新增數(shù)據(jù)(1)新增的記錄必須排在新增頁的首行；(2)所有列表頁面默認按數(shù)據(jù)新增時間倒序排列。(3)提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內容以便再 次提交。(4)提交成功后自動回到數(shù)據(jù)列表頁。(5)提交時需對主要標識字段進行重復值、空值(空格)判斷。修改數(shù)據(jù)(1)修改完成后必須回到原記錄所在位置，且刷新顯示修改后的值。(2)提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內容以便再 次提交。(3)

4、在查詢條件下修改返回后，保留原有查詢條件，且修改后的數(shù)據(jù) 如果不滿足查詢條件則不顯示。(4)提交時需對主標識字段進行重復值、空值(空格)判斷。查詢數(shù)據(jù)(1)把所有查詢條件全部顯示出來，并放在查詢列表上方位置。(2)每個查詢條件必須有預置文案。(3)每次查詢后保留當前輸入的查詢條件。(4)當未查詢到任何記錄時，需給予未查找到相關記錄的提示信息。(5)除了用戶明確要求不需要外，需提供模糊查詢功能。(6)必須要有條件“重置”功能，重置后恢復到初始狀態(tài)。刪除數(shù)據(jù)(1)必須有確認刪除的提示信息。(2)刪除成功后刷新不顯示刪除的記錄。(3)刪除成功后返回到原記錄所在頁面，而當原記錄所在頁不存在時， 則返回

5、上一頁。(4)當被刪除的記錄與其他記錄存在關聯(lián)時，請示需求界面給予不允 許刪除、更明細提示等信息。提交/上傳數(shù)據(jù)(1)當提交所費的時間較長時，需給出等待的提示，如：沙漏、菊花、 進度條等。(2)提交時需對主標識字段進行重復值、空值(空格)判斷。(3)提交成功后不可重復提交，有列表展示提交內容的直接返回到展 示頁面。(4)必須要有“取消或返回”功能。分頁(1)當對查詢結果進行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；(2)當頁數(shù)較多時，允許輸入具體頁數(shù)進行查詢；取消(1)取消必須給予提示。(2)取消操作后須返到原記錄所在狀態(tài)。返回(1)當從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返 回按

6、鈕2、鏈接(1)鏈接文字或圖片當鼠標劃過時會變成點擊手形。(2)本窗口打開：查詢結果、上下翻頁、新增、修改等操作在本窗口 打開。(3)新窗口打開：各類詳情、預覽頁面等采用新窗口打開。3、提示信息預先信息提示(1)內容提交類：每個輸入項、條件選選項(包括時間選擇)均需要 給出提示信息。該提示信息可放置在輸入框內或者控件尾部(如密碼要多少 多少位。搜索框提示用戶輸入什么內容等。)(2)謹慎類操作：針對不可修改、重要操作選擇等操作屬于謹慎類操 作，均需給出提示信息。如審核是否通過操作、退款申請操作、價格輸入等。操作信息提示(1)確認提示：修改設置、刪除數(shù)據(jù)等操作時需要彈出提示框，用戶 需要選擇后方可

7、執(zhí)行。(2)錯誤提示：當用戶的操作不符合規(guī)則、輸入數(shù)據(jù)不符合規(guī)則需要 給出操作提示。比如輸入數(shù)值不符系統(tǒng)規(guī)定，則進行提示。(3)錯誤提示分為：即時提示、提交后提示。本系統(tǒng)這里統(tǒng)一用即時 提示。(4)讀取提示：涉及到大量信息讀取緩慢的時候應該進行提示。比如 進入后臺查看商品列表時，由于網(wǎng)絡、數(shù)據(jù)量大等原導致載入緩慢，應該顯 示讀取提示信息，已避免用戶過度重復點擊操作。結果信息提示(1)保存結果提示：當進行商品添加/修改此類涉及到數(shù)據(jù)保存的操作， 不管是否成功均需給出提示。統(tǒng)一用 Toast提示，內容為“保存成功！”原 則上保存之后直接顯示結果頁(也可視具體情況定)。(2)查詢結果提示：任何信息列

8、表、查詢結果，當對應信息結果的時 候需要給出有無結果狀態(tài)提示。不得使用空白信息。三、通用組件規(guī)范1、導航菜單導航欄(1)導航路徑：原則上不超過三級就能到達用戶想要的主要頁面，且 隨時能返回。(2)導航菜單：各級別的菜單寬高一致，樣式一致。鼠標劃過或點擊 選中菜單模塊時會有突出(比如高亮)狀態(tài)顯示。(3)有子菜單的模塊默認不顯示子菜單，點擊后顯示子菜單，再次點 擊時可收起。當前位置導航(1)原則上每個頁均有“當前位置導航”，但彈出頁、預覽頁等特殊 頁面無需當前導航。(2)若當前位置導航有多個層級，則當前層級的前面層級均可鏈接到 相應頁面。(3)當前位置導航位置固定，具體位置參考 UI設計效果圖。

9、2、表單(1)表單輸入框由 表單字段名稱：+輸入框組成，字段名稱原則上 2-4個漢字。(2)預置文案：輸入框內均需有預置文案，且光標進入輸入框獲得焦 點時文案自動消失，若輸入框失去焦點且未輸入任何文字時恢復預置文案。(3)下拉選擇框中內容有多級時，只顯示一級，其他級呈灰色不可用 狀態(tài)，選擇一級后才會激活第二級，以此類推。如：部門作為查詢條件時， 點擊下拉框，默認只有一級部門可用，點擊一級部門再激活開顯示二級部門(4)界面的必填項以紅色*號標識出來，且標識在“表單字段名稱”前面。存在必填項未填寫時，輸入框失去焦點即時提示，輸入框紅色描邊，且輸入框下方左有相應紅色提示文案。 輸入框未曾獲得過焦點直

10、接提交時， 同 樣輸入框紅色描邊+紅色提示文案提醒。(5)單行輸入框：在未限制字數(shù)情況下，當輸入文字比前輸入框長時，最先輸入的文字隱藏，光標和最后一個輸入的文字顯示在輸入框尾部。(6)多行輸入框：需要有“當前已輸入字數(shù)/最多可輸入字數(shù)”(如：50/100 )。(7)與限制條件不符的費法輸入應即時提醒。(8)只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；3、按鈕(1)按鈕種類：優(yōu)先操作按鈕，次要按鈕，不可用按鈕。(2)按鈕狀態(tài)：默認顯示狀態(tài)，鼠標經(jīng)過狀態(tài)，點擊狀態(tài)。(3)按鈕位置：按windows交互習慣先優(yōu)先后次要(左確定，右取消)。(4)按鈕樣式：可直接寫文字，或文字+圖標(具體方案參照UI設計效果圖)，原則上按鈕上文字為 2-4個漢字。4、加載當數(shù)據(jù)獲取較慢，或網(wǎng)絡狀況不佳時，要有統(tǒng)一的加載方案圖示告訴用 戶”數(shù)據(jù)正在加載中”如：漏斗、菊花、進度條等具體圖文可參與 UI 設計效果。5、失敗/空頁面當頁面沒有數(shù)據(jù)、