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

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

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

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

4、s系統(tǒng)一致）、操作性強(qiáng)1）所有窗口最大化、最小化風(fēng)格要一致 2）報(bào)錯(cuò)頁面的風(fēng)格一致，最好有統(tǒng)一的報(bào)錯(cuò)頁面 3）類似功能的窗口打開的風(fēng)格要一致 4）一樣功能在不同模塊的名稱要一致 5）子窗體應(yīng)盡量在顯示在主窗體的左上或居中放置 6）彈出式窗口盡量在不借助滾動(dòng)條的情況下顯示所有容 7）窗體最小化/最大化時(shí)，控件也要隨著窗體而縮放1. 詳細(xì)：（圖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. 彈出框邊界病人基本信息顯示：床號(hào)、病人ID、住院號(hào)、性別、年齡、身份、費(fèi)別、出生地、證件號(hào)、入院日期、入院方式、入院診斷、預(yù)交金、過敏史、檢查檢驗(yàn)結(jié)果總覽。（圖6）彈出框邊界要與背景有區(qū)分，邊界要清楚（圖6）所有彈出框最大化不要遮住 windows任務(wù)欄（圖6）5. 彈出元素對(duì)齊彈出框的文字要有對(duì)齊（圖7）如（圖7）彈出框的文字輸入框都沒有對(duì)齊，給人感覺比較混亂，不規(guī)。當(dāng)不同長度文字的排版出現(xiàn)對(duì)對(duì)齊不一致的時(shí)候，上下文字必須統(tǒng)一右對(duì)齊， 輸入框統(tǒng)一左對(duì)齊。如（圖8）（圖8）如（圖10）彈出框的文字元素彈出框元素比較混亂，

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

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

8、）。一個(gè)表格文字不能有大有小。如（圖14）那樣就不合理，文字大小太混亂如（圖15）標(biāo)題欄目的文字有大有小，應(yīng)該統(tǒng)一為10.5pt；tab選項(xiàng)卡的文字偏小，文字應(yīng)該為10.5pt，便于客戶體驗(yàn)操作如（圖16）表格的文字當(dāng)出現(xiàn)3個(gè)或者2個(gè)的時(shí)候2個(gè)文字的字體必須中間有空格，與三個(gè)文字的兩邊都對(duì)齊，（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ī)生、護(hù)士長時(shí)間操作部視覺疲勞，表格分為標(biāo)題部分，主體容部分，標(biāo)題部分應(yīng)該用相應(yīng)的顏色加以區(qū)別，表格隔行應(yīng)用不同的顏色加以區(qū)別。表格選中行應(yīng)用色調(diào)區(qū)分，表格的行高為25像素。表格四周的文字要有空隙padding屬性2px。不同表格之間必須有對(duì)齊。如（圖19）三個(gè)表格之間表格的頂部、 底部都應(yīng)該有對(duì)齊，表格之間應(yīng)有空隙，空隙。8像素（圖18）（圖19）3輸入框：必輸項(xiàng) 1）必輸項(xiàng)中不可為空，不可輸入空格 2）必輸項(xiàng)給出必輸項(xiàng)標(biāo)識(shí)（*） 字段長度 超過數(shù)據(jù)庫規(guī)定長度時(shí)不允許輸入 格式校驗(yàn) 1）號(hào)、E-MAIL、等特定字段的格式要符合需求的規(guī)定 日期格式 1）日期顯示

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

11、字符數(shù)標(biāo)識(shí) 附件 1）可正常添加符合格式的附件 2）附件可正常打開和保存，附件名較長時(shí)可正常操作 3）直接輸入錯(cuò)誤的附件地址，保存時(shí)應(yīng)給出提示信息 4）附件打開/保存到本地時(shí)，文件名要顯示原文件文件名 密碼輸入 1）需在需求中定義密碼是否允許為空或空格；密碼是否允許特殊字符；是否區(qū)分大小寫，密碼的可輸入長度 2）程序中應(yīng)給出文字說明密碼的可輸入長度入無效；對(duì)于多行文本框給出最大字符數(shù)標(biāo)頁面色調(diào)以現(xiàn)有的銀灰調(diào)為準(zhǔn)，避免客戶視覺疲勞，避免出現(xiàn)大面積純度高亮的顏色選項(xiàng)卡背景顏色（圖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)為不可點(diǎn)擊狀態(tài)時(shí)顯示箭頭，可點(diǎn)擊狀態(tài)顯示手型；系統(tǒng)忙時(shí)顯示沙漏形狀 系統(tǒng)響應(yīng)時(shí)間系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過長，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過快也會(huì)影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：響應(yīng)時(shí)間長度界面設(shè)計(jì)：1）0-5秒鼠標(biāo)顯示成為沙漏；2）5秒以上顯示處理窗口，或顯示進(jìn)度條；3）一個(gè)長時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。光標(biāo)定位 1）打開新增（修改）頁面時(shí)，光標(biāo)初始定位在第一個(gè)待輸入的文本區(qū) 2）因輸入不正確提示用戶重新輸入時(shí)，光標(biāo)默認(rèn)focus在出錯(cuò)的輸入?yún)^(qū)，并高亮全選該錯(cuò)誤輸入 3）若必輸項(xiàng)未填寫完畢就提