【正文】 戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加。 界面控制程序人員、用戶體驗人員提出合理統(tǒng)一使用的控件庫。 控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)。 根據(jù)需要，設(shè)計特殊操作控件，準(zhǔn)則為：簡化操作、達(dá)到一定功能目的。重復(fù)疊代上述工作。 強(qiáng)行界面設(shè)計者理解之，并作為開 發(fā)準(zhǔn)則。 二： (Color)顏色使用恰當(dāng)，遵循對比原則： 1：統(tǒng)一色調(diào)，針對軟件類型以及用戶工作環(huán)境選擇恰當(dāng)色調(diào)： 如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等。 3：色盲、色弱用戶，即使使用了特殊顏色表示重點(diǎn)或者特別的東西， 也應(yīng)該使用特殊指示符，如 !， ？ 著重號，以及圖標(biāo)等。 5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒有足夠反差，而藍(lán)色和白色反差很大。 6：整個界面色彩盡量少的使用類別不同的顏色。 色表的建設(shè)，對于美工在圖案設(shè)計、包裝設(shè)計上起著標(biāo)準(zhǔn)參考作用，對于程序界面設(shè)計人員設(shè)計控件、窗體調(diào)色起到有章可循的作用。 1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(biāo)準(zhǔn)，參考 itop 的 outlookbar 圖標(biāo)設(shè)計標(biāo)準(zhǔn)。 3：底圖應(yīng)該融于底圖，使用淺色 , 低對比，盡量少的使用顏色。 5：鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個手的形狀就有 4 鐘不同的樣子。 中文采用標(biāo)準(zhǔn)字體， “ 宋體 ” ，英文采用標(biāo)準(zhǔn) Microsoft Sans Serif 不考慮特殊字體 (隸書、草書等 ,特殊情況可以使用圖片取代 ),保證每個用戶使用起來顯示都很正常。 所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況。 系統(tǒng)大小字體屬性改變的處理。 但是由于常常方便使用點(diǎn)陣作為窗口設(shè)計單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。 2：全部采 用點(diǎn)陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。 五： (Text)文字表達(dá) 提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則： 1：口語化、客氣、多用您、請，不要用或少用專業(yè)術(shù)語，杜絕錯別字。 3：警告、信息、錯誤 使用對應(yīng)的表示方法。 5：根據(jù)用戶不同采用相應(yīng)的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。 六： (STYLE)控件風(fēng)格，不要使用錯誤控件，控件功能要專一 有設(shè)計好的同一風(fēng)格的控件，如果沒有能力設(shè)計出一套控件，則使用標(biāo)準(zhǔn)控件，絕對不能不倫不類，雜亂無章。 統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某 些動作，而同樣控件，雙擊卻沒有任何反映。 很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。 2:使用 TABLE 頁，給用戶很明顯的視覺變化。試驗結(jié)果 (Mayhew,1992 年 )屏幕 總體覆蓋度不應(yīng)該超過 40％，而分組鐘覆蓋度不應(yīng)該超過 62％。 整個項目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。 行與行之間間距相同，靠窗體 Border 距離應(yīng)大于行間間距 (間距加邊緣留空 )。 3：數(shù)據(jù)對齊要適當(dāng) 說明文字，中文版應(yīng)使用中文全角冒號，縱向?qū)R時，并按冒號右對其，如圖。并左對齊。 4：有效組合 邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合，以表示其關(guān)聯(lián)性，反之，任何不想光的項目應(yīng)當(dāng)風(fēng)格開，在項目集合間，用間隔對其進(jìn)行分組，或者使用方框劃分各自區(qū)域。以免用戶產(chǎn)生誤解。 BCB/DELPHI 的 VCL 中，大部分控件有布局屬性： 某些控件擁有 alignment 屬性，可以用來做布局調(diào)節(jié)： TcustomPanel， Tmemo等，考左靠右靠上靠下以及撐滿 (Client)屬性，用來根據(jù)版面自動調(diào)節(jié)。這個可以進(jìn)一步設(shè)計好排版工作。 窗體中控件的 Tab 按鍵激活順序， TabOrder,. BCB/DELPHI 中使用窗體設(shè)計右鍵菜單選擇 taborder 設(shè)置， VC 中窗體 RES 編輯區(qū)域使用 ctrl+D。 Acceleratoramp。 快捷鍵寫入幫助，特殊說明，并在使用培訓(xùn)時強(qiáng)調(diào)使用 2：加速鍵： 使用非破壞性缺省按鈕，回車、 ESC 鍵的正確使用 一個窗體，有默認(rèn)加速鍵，如回車表示激活當(dāng)前窗口設(shè)置為 default 的按鈕動作， esc 表示關(guān)閉窗口。當(dāng)用戶要提交很多數(shù)據(jù) 時，應(yīng)該屏蔽 esc，或者做退出提示，告誡用戶是否保存提交。A) 為結(jié)合鍵盤使用，可操作控件都應(yīng)該有加速鍵，加速鍵定義準(zhǔn)則，為英文單詞第一個字母，如果同一窗體重復(fù)則用第二個字母，以此類推，則加速方式為alt+這個加速鍵，用統(tǒng)一的方法標(biāo)識在界面中，如 XXX(A) 或者 wps 的 英文可直接在字母下標(biāo)識下劃線 Cancel。 3：彈出 菜單 輔助菜單必須在可視化界面上擁有對應(yīng)的按鈕或者菜單選項。無法清晰的顯示給用戶，所以對應(yīng)選項應(yīng)該可以通過別的途徑得到。 十： (ACTION)用戶交互 1： disable 而不是 not visible 要使一個功能有時允許有時不允許用戶使用，則這個控件的不能隨便隱藏，應(yīng)該使用 disable 屬性進(jìn)行表示，以免用戶發(fā)現(xiàn)控件失蹤后措手無策 2：窗口彈出 位置要明顯 點(diǎn)擊一個控件，彈出窗口或者菜單，應(yīng)該給人明顯提示，最低要求是覆蓋剛才點(diǎn)擊的位置，讓用戶輕松跳轉(zhuǎn)到新的界面。而且這個提示應(yīng)該行明顯，但不應(yīng)提示過長，可以有以下幾種方法： 當(dāng)用戶點(diǎn)擊按鈕等動作進(jìn)行一個工作時： 1：彈出交互對話框讓用戶點(diǎn)擊確認(rèn)。 ) 如：改變標(biāo)題欄字符串，顯示 “ 信息：提交成功 ”, 或者專門設(shè)置一個狀態(tài)欄、 TLable 等用來進(jìn)行提示。一般作為重 要提示的輔助。等等 ?? 十一： (HELP)聯(lián)機(jī)幫助： 什么時候要幫助，什么時候不要幫助 1：系統(tǒng)默認(rèn)、行業(yè)標(biāo)準(zhǔn)的控件操作不需要逐一描述，只需要對特殊控件加以描述 2：特殊操作、特殊功能 界面，在界面上加控件直接連接到對應(yīng)的 HELP 文件中 3：特殊設(shè)置詳細(xì)，應(yīng)該在界面上用簡潔明了的語句說明，或者是好用Tiptool，并由第二步幫助 幫助文檔： 結(jié)構(gòu)化，按功能模塊劃分。 幫助文件是幫助用戶更好的使用軟件，措辭要恰當(dāng)、簡捷、通俗易懂 ,每一句話都應(yīng)該有目的，幫用戶解決問題。描述公司信息目的是為了方便用戶在沒有辦法的情況下找到售后支持，網(wǎng)址連接、信箱地址、電話號碼絕對不允許無效 。 附錄： 美工何時參與進(jìn)來： 美工作為界面美化的主要人員，不但擁有藝術(shù)設(shè)計、包裝設(shè)計的才能，還應(yīng)該穿插整個項目，給界面程序設(shè)計人員提出系統(tǒng)參考意見。 2：界面原型設(shè)計過程中，與開發(fā)人員共同修改、商榷最終表現(xiàn)樣式，以及確立 UI 標(biāo)準(zhǔn)。 4：產(chǎn)品化方面，協(xié)助制作幫助文件、網(wǎng)站風(fēng)格以及參與制作，制作附帶宣傳圖片、動畫、產(chǎn)品包裝、海報等。確立界面標(biāo)準(zhǔn)的好處： 1. 便于用戶操作：戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能 2. 使用戶感覺到統(tǒng)一、規(guī)范，在使用軟件的過程中愉快輕松的完成操作，提高對軟件的認(rèn)知 3. 降低培訓(xùn)、支持成本，不必花費(fèi)較多的人力對客戶進(jìn)行逐個指導(dǎo) 二、 GUI布局的合理性 界面的合理性是指界面是否與軟件功能相 融洽，界面的顏色和布局是否協(xié)調(diào)等。 l 整個項目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。 l 當(dāng)屏幕有多個編輯 區(qū)域，要以視覺效果和效率來組織這些區(qū)域 邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合以表示其關(guān)聯(lián)性，反之，任何不相關(guān)的項目應(yīng)當(dāng)分隔開。綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時尚清新、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等。除非特殊場合，杜絕使用對比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色 同的顏色 、顯卡、操作系統(tǒng)等原因顯示出不同的色彩 、色弱用戶，可以使用特殊指示符 、顯卡、操作系統(tǒng)等原因顯示出不同的色彩 、色弱用戶，可以使用特殊指示符 三、 GUI風(fēng)格的一致性 界面的一致性既包括使用標(biāo)準(zhǔn)的控件，也指相同的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯誤信息等方面確保一致。 如所有窗口按鈕的位置和對齊方式要保持一致。 顏色的前后一致會使整個應(yīng)用軟件有同樣的觀感，反之會讓用戶覺得所操作的軟件雜亂無章，沒有規(guī)則或言。 、控件功能要專一 例如使用 Button 樣式做 Table 的功能，拿主菜單條顯示版權(quán)信息等 ，不復(fù)用 如果在特殊情況下出現(xiàn)復(fù)用的時候，可采用以下兩種方法解決： l 分組，使用雙份控件 l 使用 Table 頁，給用戶很明顯的視覺變化 如在提示、菜單和幫助中產(chǎn)生相同的術(shù)語。 如 Tab 鍵的習(xí)慣用法是閱讀順序從從左到右，從上到下。 四、 GUI界面操作可定制性 界面的可定制性大致可分為以下幾個特性： 允許用戶定義工具欄、狀態(tài)欄是否顯示，工具欄顯示在界面上的位置；允許用戶定義菜單的位置等。從外觀上來說，通常窗口是由標(biāo)題、邊框、菜單、工作區(qū)、滾動條等組成。先從左至右，再從上到下 ，正上方 1/4 處為易吸引用戶注意力的位。那么圖標(biāo)的設(shè)計當(dāng)中應(yīng)該著重考慮哪些問題呢，以下提供幾點(diǎn)可供參考： ，輪廓清晰的圖標(biāo)可保證圖像在不同背景色上都具有較好的效果 。這樣的圖標(biāo)可以使用 戶很輕松、容易地認(rèn)識圖標(biāo)的作用 ，用來說明圖標(biāo)所完成的功能 四、 GUI中控件的標(biāo)準(zhǔn) 軟件系統(tǒng)功能的實(shí)現(xiàn)與控件是密不可分的，各控件位置的擺放直接影響到軟件的使用，及其美觀程度。以下幾點(diǎn)標(biāo)準(zhǔn)可作為在軟件系統(tǒng)中鼠標(biāo)設(shè)計的參考： 過程中，可以識別鼠標(biāo)操作 ，仍能夠正確識別 ，能夠正確識別每個按鈕所要完成的功能 、處理指示器和識別指針隨操作恰當(dāng)?shù)母淖? ，鼠標(biāo)指針停留在選中內(nèi)容上，而不會滑動 ，如用水漏表示系統(tǒng)忙，用手型表示可以點(diǎn)擊等 ，取消右 鍵后該菜單隱藏 ，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況 六、 GUI文字的標(biāo)準(zhǔn) 文字在視覺上向用戶傳達(dá)各種信息，界面文字包括界面文字的字體和界面文字的用語兩個方面，那這兩方面都有哪些要求呢？以下分別闡述。但考慮到大多數(shù)用戶對于標(biāo)準(zhǔn)Windows 系統(tǒng)較熟悉，在界面設(shè)計中盡量兼容標(biāo) 準(zhǔn) Windows 界面的特征。因為位圖按鈕可在操作中實(shí)現(xiàn)高亮度、突起、凹陷等效果，使界面表現(xiàn)形式更靈活，同時可以方便用戶對控件的識別?？丶拇笮『烷g距盡量符合 Windows 界面推薦值的要求。因為灰色調(diào)在不同的光照條件下容易被識別，且避免了色盲用戶在使用窗體時帶來的不便。窗體中所有的控件依據(jù) Windows 界面設(shè)計標(biāo)準(zhǔn)采用左對齊的排列方式。 圖 1 典型的工控界 2．系統(tǒng)界面布局分析 人 機(jī)界面的布局設(shè)計根據(jù)人體工程學(xué)的要求應(yīng)該實(shí)現(xiàn)簡潔、平衡和風(fēng)格一致。該界面界面美觀，在屏幕上的對象左右達(dá)到平衡、不堆擠在某一處，無雜亂無章的感覺。界面的平衡原則推薦顯示屏幕總體性覆蓋度不超過 40％，而分組中屏幕覆蓋度不超過 20％?？刂瓢粹o組布置在顯示區(qū)的右側(cè)，一方面是考 慮到絕大多數(shù)操作者是右手操作用戶，按鈕區(qū)布置在最右側(cè)更加方便；另一方面是根據(jù)界面布局的主次原則，把用戶注意力最集中的左上區(qū)域留給圖形顯示區(qū)。各級按鈕的大小、凹凸效果和標(biāo)注字體、字號都保持一致，按鈕的顏色和界面底色保持一致。可將界面設(shè)計為循環(huán)或 FIFO 緩沖器，如圖 2 所示。選擇簡單而永久的結(jié)構(gòu)以便操作員能夠快速了解如何打開界面。為了在提供足夠的信息量的同時保證界面的簡明，在設(shè)計上采用了控件分級和分層的布置方式。用一級按鈕控制二級按鈕的彈出和隱藏保證了界面的簡潔。在使用某個按鈕彈出下級按鈕的同時對其他同級的按鈕實(shí)現(xiàn)隱藏，使邏輯關(guān)系更清晰。層面 1 是總覽界面。層面 2 是過程界面。該層面還顯示了報警對應(yīng)的設(shè)各對象。該層面提供各個設(shè)備對象的信息 ，例如控制器、控制閥、控制電機(jī)等，并顯示消息、狀 態(tài)和過程值。 4．文字的應(yīng)用 界面設(shè)計中常用字體有中文的宋體、楷體，英文的扭鍆等，因為這些字體容易辨認(rèn)、可讀性好考慮到一致性，控制臺軟件界面所有的文本都選用中文宋體，文字的大小根據(jù)控件的尺寸選用了大小兩種字號，使顯示信息清晰并保證風(fēng)格統(tǒng)一?？刂婆_人機(jī)界面中應(yīng)用的文本有兩類：標(biāo)注文本和交互文本。交互文本是人與計算機(jī)以及計算機(jī)與總控制臺等系統(tǒng)交互信息所需要的文本，