界面是軟件與用戶交互的最直接的層,界面的好壞決定用戶對軟件的第一印象。設計良好的界面可以引導用戶本身完成相應操做,起到嚮導做用。數據庫
界面設計主要是爲了達到如下目的:佈局
1) 以用戶爲中心。設計由用戶控制的界面,而不是界面控制用戶。字體
2) 清楚一致的設計。全部界面的風格保持一致,全部具備相同含義的術語保持一致,且易於理解和使用。spa
3) 擁有良好的直覺特徵。以用戶所熟悉的現實世界事務的抽象來給用戶暗示和隱喻,來幫助用戶能迅速學會軟件的使用。設計
4) 較快的響應速度。事務
5) 簡潔、美觀。ci
如下規則應該重視:字符串
界面風格一致性io |
操做項社區 |
基本規範 |
UI色彩與字體 |
1) UI 字體,色彩要一致。 2) 總體色彩搭配要融爲一體,同時諸如Caption,Button 起提示、提交做用的部分要清楚,醒目。 3) 不可修改的字段,統一使用灰色文字顯示。(例:瀏覽頁面、刪除頁面均需顯示灰色) |
|
窗口風格 |
1) 全部窗口最大化、最小化風格要一致。 2) 報錯頁面的風格一致,最好有統一的報錯頁面。 3) 相似功能的窗口打開的風格要一致。 4) 相同功能在不一樣模塊的名稱要一致。 5) 子窗體應儘可能在顯示在主窗體的左上或居中放置。 6) 彈出式窗口應儘可能在不借助水平和垂直滾動條的狀況下顯示全部內容。 7) 窗體支持最小化和最大化或放大時,窗體上的控件也要隨着窗體而縮放;不能只放大窗體而忽略控件的縮放。 8) 父窗體支持縮放時,子窗體沒必要縮放。 9) 實現自定義界面風格(可參考電子社區系統) |
|
佈局與間距(待定) |
1) 窗體控件佈局和間距儘可能與Windows標準保持一致。 2) 按鈕與窗體上、下、左、右之間的間距爲 3) 按鈕之間的間距爲 4) …… |
|
菜單深度 |
1) 菜單深度通常不要超過三層 2) 菜單層次太多時,應給出返回主窗口、主分支的快捷連接。 |
|
按 鈕 |
1) 按鈕風格相同,大小類似,標題字體保持一致,在整個系統中的顯示位置要統一。 2) 無效按鈕要屏蔽。 |
|
控 件 |
1) 各複選框和選項框按選擇概率的高低而前後排列。 2) 複選框和選項框要有默認選項,並支持Tab選擇。 3) 界面空間較小時使用下拉框而不用選擇框。 4) 選項數較少時使用選項框,相反使用下拉列表框。 |
|
文本框輸入 |
操做項 |
基本規範 |
必 輸 項 |
1)必輸項中不可爲空,不可輸入空格 2)必輸項給出必輸項標識(*)。 3)非必輸項字段,Null 插入數據庫時不會出錯,在數據庫中設置默認值。 |
|
字段長度 |
超過數據庫規定長度時不容許輸入,自動截斷超長部分(注:2字符=1字) |
|
格式校驗 |
1)身份證號、E-MAIL、郵箱等特定字段的格式要符合需求的規定。 |
|
日期格式 |
1) 日期顯示格式一致,爲 :yyyy-mm-dd。 2) 使用日期控件,則不可手工錄入。 3) 若容許手工輸入:需作格式校驗。不可輸入字符串、漢字、特殊字符。 4) 若容許手工輸入:對於日期段,需在截止日期小於開始日期時給出提示。 |
|
特殊字符 |
1)輸入區域輸入特殊字符,插入數據庫時不出錯或提示不容許輸入特殊字符。特殊字符包括:‘ 「 = @ ` ~ $ % ^ % ¥ & # @等 |
|
英文輸入 |
英文輸入不區分大小寫,不可輸入漢字、數字及特殊字符 |
|
數值字段 |
只能輸入+ ,— ,0~9及功能鍵(BackSpace 光標) 。數值不能爲負數。 |
|
字符字段 |
字符字段中只能輸入字符,非法字符如單引號、數字均不可輸入 |
|
單行文本框/多行文本框 |
1) 長度合適,能夠容納相應文字,但不能超過數據庫該字段長度,最好將能夠輸入的最大字符數標在旁邊。建議單行文本框中當輸入的字符超過必定長度時再輸入無效;對於多行文本框給出最大字符數標識 |
|
附件 |
1) 可正常添加符合格式的附件。 2) 附件可正常打開和保存,附件名較長時可正常操做。 3) 直接輸入錯誤的附件地址,保存時應給出提示信息。 4) 附件打開和保存到本地時,文件名要顯示原文件的文件名。 |
|
密碼輸入 |
1) 需在需求中定義密碼是否容許爲空或空格;密碼是否容許特殊字符;是否區分大小寫,密碼的可輸入長度。 2) 程序中應給出文字說明密碼的可輸入長度。 |
|
用戶界面行爲 |
操做項 |
基本規範 |
鼠 標 |
1)鼠標爲不可點擊狀態時顯示箭頭,可點擊狀態顯示手型;系統忙時顯示沙漏形狀 |
|
光標定位 |
1) 打開新增(修改)頁面時,光標初始定位在第一個待輸入的文本區 2) 因輸入不正確提示用戶從新輸入時,光標默認focus在出錯的輸入區,並高亮全選該錯誤輸入。 3) 若必輸項未填寫完畢就提交,應給出說明信息並能自動得到焦點; 4) 可寫控件檢測到非法輸入後應給出說明並能自動得到焦點 |
|
TAB鍵 |
1) 界面支持鍵盤自動瀏覽按鈕功能。即TAB的自動切換功能。 2) Tab鍵的順序與控件排列順序要一致,通常狀況下整體從上到下,同時行間從左到右的方式。 |