UI設(shè)計規(guī)范說明書

1、 EMRS設(shè)計規(guī)手冊V1.020 / 20目 錄概要3登錄頁面41.啟動42.登錄頁面元素4導(dǎo)航菜單51.彈出框比例82.彈出框風(fēng)格83.彈出框邊界84.彈出元素對齊8整頁面10字體規(guī)11頁面元素15頁面色調(diào)18用戶界面行為19界面設(shè)計中保持界面的一致性。一致性既包括使用標(biāo)準(zhǔn)的控件，也指使用一樣的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯誤信息等方面確保一致。界面力求簡潔明了，保證系統(tǒng)功能設(shè)計的合理與明確，布局明確、交互操作合理、協(xié)調(diào)統(tǒng)一。功能要表現(xiàn)清楚，分類清晰有條理，避免過多的控件嵌套導(dǎo)致的視覺混亂；單一功能的操作目的明確，符合易用性原則，避免不必要的信息顯示而對用戶造成視覺干擾

2、；力求操作簡單，簡單的功能一步完成，比較復(fù)雜的功能三步之，復(fù)雜的功能操作使用操作向?qū)磔o助客戶完成。1. 啟動目前我們的pride 、EMRS系統(tǒng)首頁登錄都是以（圖1）的展現(xiàn)方式，有2個頁面，此法太過累贅，同時跳出框也把產(chǎn)品的logo信息給遮住，可以以一個頁面的方式來顯示 不需要2個頁面，類似（圖2）。（圖1）（圖2）2. 登錄頁面元素登錄頁面的基本元素包括：輸入框、按鈕、進度條。這樣的好處就是以一個頁面代替2個頁面，簡潔明了，登錄頁面都需要加入進度條，便于客戶等待頁面進度規(guī)1）菜單深度一般不要超過三層 2）菜單層次太多時應(yīng)給出返回主窗口、主分支的快捷。（圖3）導(dǎo)航如不是客戶特俗要求的定制，均

3、制成類似以上的導(dǎo)航（圖3），采用windows標(biāo)準(zhǔn)的定制導(dǎo)航界面，導(dǎo)航必需兼容1024*768、1280*800、1440*900 三個主流分辨率，其中默認(rèn)分辨率為1024*768。（圖4）（圖5）1標(biāo)題區(qū)：顯示當(dāng)前用戶、所屬科室。字體：15像素 ，黑色，加粗2工具欄區(qū)：可顯示二級菜單相應(yīng)欄目。字體9pt，不加粗 ，黑色，每個欄目必須有快捷鍵，欄目間的間距為20像素3二級菜單區(qū)：二級菜單字體為9pt，宋體，不加黑，行距10像素；所有的二級菜單欄目都應(yīng)該有相應(yīng)的圖標(biāo)設(shè)計。（圖5）4自定義欄目區(qū)：自定義醫(yī)生所需要顯示的快捷方式5最大、最小、關(guān)閉區(qū)： 按鈕必須醒目（操作習(xí)慣和風(fēng)格和PC window

4、s系統(tǒng)一致）、操作性強1）所有窗口最大化、最小化風(fēng)格要一致 2）報錯頁面的風(fēng)格一致，最好有統(tǒng)一的報錯頁面 3）類似功能的窗口打開的風(fēng)格要一致 4）一樣功能在不同模塊的名稱要一致 5）子窗體應(yīng)盡量在顯示在主窗體的左上或居中放置 6）彈出式窗口盡量在不借助滾動條的情況下顯示所有容 7）窗體最小化/最大化時，控件也要隨著窗體而縮放1. 詳細：（圖5）（圖6），右上角的關(guān)閉按鈕 最大 最小化按鈕，都統(tǒng)一改成系統(tǒng)彈出框的長、寬比例為3:12. 彈出框比例系統(tǒng)彈出框的長、寬比例為3:1，功能頁面彈出框長和寬的比例為5:43. 彈出框風(fēng)格所有的彈出框右上角的關(guān)閉按鈕 最大 最小化按鈕，都統(tǒng)一改成，彈出框四周

5、的邊距為13像素,（圖5）風(fēng)格上和windows操作習(xí)慣盡可能一致。4. 彈出框邊界病人基本信息顯示：床號、病人ID、住院號、性別、年齡、身份、費別、出生地、證件號、入院日期、入院方式、入院診斷、預(yù)交金、過敏史、檢查檢驗結(jié)果總覽。（圖6）彈出框邊界要與背景有區(qū)分，邊界要清楚（圖6）所有彈出框最大化不要遮住 windows任務(wù)欄（圖6）5. 彈出元素對齊彈出框的文字要有對齊（圖7）如（圖7）彈出框的文字輸入框都沒有對齊，給人感覺比較混亂，不規(guī)。當(dāng)不同長度文字的排版出現(xiàn)對對齊不一致的時候，上下文字必須統(tǒng)一右對齊， 輸入框統(tǒng)一左對齊。如（圖8）（圖8）如（圖10）彈出框的文字元素彈出框元素比較混亂，

6、界面上沒有對其，如果文字對其空間不夠，可考慮換行（圖10）檢驗結(jié)果窗口中，點“導(dǎo)出excel”按鈕，可將結(jié)果數(shù)據(jù)導(dǎo)出來，保存為excel文件存放到本地。檢驗結(jié)果窗口中，選擇某個報告項目后，點擊“趨勢力”按鈕，檢驗結(jié)果會以圖例的方式顯示某個時間段的變化情況。整頁區(qū)分于彈出頁面，包含導(dǎo)航 主頁 不是以彈出的形式來顯示頁面，整頁必須兼容1024*768 1280*800 1440*900 等三個主流的分辨率 其中默認(rèn)分辨率應(yīng)該為1024*768。規(guī)：UI字體、色彩要一致 整體色彩搭配要融為一體，起提示作用的部分要清楚醒目 不可修改的字段，統(tǒng)一使用灰色文字顯示頁面標(biāo)題: （圖11）14號加粗宋體，黑色

7、，字體間距默認(rèn)（圖11）主菜單：（圖12）12號字體，宋體，字體間距默認(rèn)，菜單之間的間距為20像素，每個菜單項目都必須有快捷鍵（圖12）下拉菜單：（圖12）下拉菜單采用9pt、宋體、黑色、 文字行距10像素。（圖12）頁面tab切換按鈕：Tab切換按鈕采用10.5pt、 宋體、 黑色（圖13）Tab頁面的選項卡偏小，對用戶體驗感覺不好，推薦大?。?16*32像素標(biāo)題菜單：（圖14）菜單標(biāo)題文字一般采用10.5pt，間距默認(rèn)。（圖14）表格文字：表格文字標(biāo)題部分統(tǒng)一采用10.5pt黑色宋體字，表格容采用9pt字體。其中標(biāo)題文字都采用居中對齊的方式，表格的文字采用左對齊或者右對齊的方法（視情況而定

8、）。一個表格文字不能有大有小。如（圖14）那樣就不合理，文字大小太混亂如（圖15）標(biāo)題欄目的文字有大有小，應(yīng)該統(tǒng)一為10.5pt；tab選項卡的文字偏小，文字應(yīng)該為10.5pt，便于客戶體驗操作如（圖16）表格的文字當(dāng)出現(xiàn)3個或者2個的時候2個文字的字體必須中間有空格，與三個文字的兩邊都對齊，（14）不合理（15）不合理（圖16）1、 按鈕：按鈕風(fēng)格一樣，大小相似，字體一致 無效按鈕要屏蔽。如（圖17）高：24像素，寬：根據(jù)文字長度定；按鈕的文字居中，字體統(tǒng)一大小10.5pt，上、右、下、左的邊距分別為：13px,11px,13px,11px 按鈕之間的間距統(tǒng)一為8px（圖17）2、表格：（圖

9、18）表格整體色調(diào)采用灰調(diào)，便于醫(yī)生、護士長時間操作部視覺疲勞，表格分為標(biāo)題部分，主體容部分，標(biāo)題部分應(yīng)該用相應(yīng)的顏色加以區(qū)別，表格隔行應(yīng)用不同的顏色加以區(qū)別。表格選中行應(yīng)用色調(diào)區(qū)分，表格的行高為25像素。表格四周的文字要有空隙padding屬性2px。不同表格之間必須有對齊。如（圖19）三個表格之間表格的頂部、 底部都應(yīng)該有對齊，表格之間應(yīng)有空隙，空隙。8像素（圖18）（圖19）3輸入框：必輸項 1）必輸項中不可為空，不可輸入空格 2）必輸項給出必輸項標(biāo)識（*） 字段長度 超過數(shù)據(jù)庫規(guī)定長度時不允許輸入 格式校驗 1）號、E-MAIL、等特定字段的格式要符合需求的規(guī)定 日期格式 1）日期顯示

10、格式一致，如 ：yyyy-mm-dd 2）使用日期控件，盡量不是手工錄入 特殊字符 1）輸入?yún)^(qū)域輸入特殊字符，插入數(shù)據(jù)庫時不出錯或提示不允許輸入特殊字符。特殊字符包括：'"=$%￥&#等 英文輸入 英文輸入不區(qū)分大小寫，不可輸入漢字、數(shù)字與特殊字符 數(shù)值字段 只能輸入+ - 09與功能鍵(BackSpace 光標(biāo)) 字符字段 1）如果支持日文字，則要判斷全角假名/半角假名 單行文本框/多行文本框 1) 長度合適，可以容納相應(yīng)文字，但不能超過數(shù)據(jù)庫該字段長度，最好將可以輸入的最大字符數(shù)標(biāo)在旁邊。建議單行文本框中當(dāng)輸入的字符超過一定長度時再輸入無效；對于多行文本框給出最大

11、字符數(shù)標(biāo)識 附件 1）可正常添加符合格式的附件 2）附件可正常打開和保存，附件名較長時可正常操作 3）直接輸入錯誤的附件地址，保存時應(yīng)給出提示信息 4）附件打開/保存到本地時，文件名要顯示原文件文件名 密碼輸入 1）需在需求中定義密碼是否允許為空或空格；密碼是否允許特殊字符；是否區(qū)分大小寫，密碼的可輸入長度 2）程序中應(yīng)給出文字說明密碼的可輸入長度入無效；對于多行文本框給出最大字符數(shù)標(biāo)頁面色調(diào)以現(xiàn)有的銀灰調(diào)為準(zhǔn)，避免客戶視覺疲勞，避免出現(xiàn)大面積純度高亮的顏色選項卡背景顏色（圖20）：R：222 G：227 B：227（圖20）通用表格色調(diào)（圖21）表格標(biāo)題色調(diào)： R：200 G：203 B：2

12、10表格主體色調(diào)： R：238 G：238 B：238表格選中條顏色：R：116 G：132 B：155（圖21）鼠標(biāo) 1）鼠標(biāo)為不可點擊狀態(tài)時顯示箭頭，可點擊狀態(tài)顯示手型；系統(tǒng)忙時顯示沙漏形狀 系統(tǒng)響應(yīng)時間系統(tǒng)響應(yīng)時間應(yīng)該適中，響應(yīng)時間過長，用戶就會感到不安和沮喪，而響應(yīng)時間過快也會影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯誤。因此在系統(tǒng)響應(yīng)時間上堅持如下原則：響應(yīng)時間長度界面設(shè)計：1）0-5秒鼠標(biāo)顯示成為沙漏；2）5秒以上顯示處理窗口，或顯示進度條；3）一個長時間的處理完成時應(yīng)給予完成警告信息。光標(biāo)定位 1）打開新增（修改）頁面時，光標(biāo)初始定位在第一個待輸入的文本區(qū) 2）因輸入不正確提示用戶重新輸入時，光標(biāo)默認(rèn)focus在出錯的輸入?yún)^(qū)，并高亮全選該錯誤輸入 3）若必輸項未填寫完畢就提