通用介面規範

一：遵循一致的準則，確立標準並遵循
無論是控制項使用，提示資訊措辭，還是顏色、視窗布局風格，遵循統一的標準，做到真正的一致。
這樣得到的好處：

1：使使用者使用起來能夠建立起精確的心裡模型，使用熟練了一個介面後，切換到另外一個介面能夠很輕鬆的推測出各種功能，語句理解也不需要費神理解

2：降低培訓、支援成本，技術服務人員不會行費力逐個指導。

3：給使用者統一感覺，不覺得混亂，心情愉快，支援度增加

做法：

項目組有經驗人士，確立UI規範：

·美工提供色調色彩配置，提供整體配色表

·介面控製程序人員、使用者體驗人員提出合理統一使用的控制項陳列庫。參考標準介面使用規範：

控制項功能遵循行業標準，windows平台參見《Microsoft 使用者體驗》(MSDN中有，中文已經翻譯發行，項目組必須有一本)

控制項樣式在允許的範圍內可以統一修改其樣式、色調

參考其他軟體先進操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。

根據需要，設計特殊操作控制項，準則為：簡化操作、達到一定功能目的

·介面實施人員與美工商榷控制項可實現性,(如不實行此步驟，將會導致各自對對方工作不滿意，也會產生不一致的混亂)。重複疊代上述工作。

·建立合理化文檔《UI標準》描述上述規範，

·強行介面設計者理解之，並作為開發準則，

·SQA人員進行監控開發人員是否遵循，及時告誡開發人員。

二：(Color)顏色使用恰當，遵循對比原則：
1：統一色調，針對軟體類型以及使用者工作環境選擇恰當色調：

如：安全軟體，根據工業標準，可以選取黃色，綠色體現環保，藍色表現時尚、紫色表現浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等

2：如果沒有自己的系列介面，採用標準介面則可以少考慮此方面，做到與作業系統統一，讀取系統標準色表

3：色盲、色弱使用者，即使使用了特殊顏色表示重點或者特別的東西，也應該使用特殊指示符，?quot;!，?著重號，以及表徵圖等

4：顏色方案也需要測試，常常由於顯示器、顯卡的問題，色彩表現每台機器都不一樣，應該經過嚴格測試，不同機器進行顏色測試

5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒有足夠反差，而藍色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產生憎惡感的顏色。 6：整個介面色彩盡量少的使用類別不同的顏色

itop色表

具體標準參考美術學統計學術標準。 色表的建設，對於美工在圖案設計、封裝設計上起著標準參考作用，對於程式介面設計人員設計控制項、表單調色起到有章可循的作用。

三：(Resource)資源
一個多姿多彩的人機互動介面，少不了精美的滑鼠游標、表徵圖以及指示圖片、底圖等。

1：也需要遵循統一的規則，包括上述顏色表的建立，表徵圖的建立步驟也應該儘可能的形成標準，參考itop的outlookbar表徵圖設計標準

2：有標準的表徵圖風格設計，有統一的構圖布局，有統一的色調、對比、色階，以及圖片風格

3：底圖應該融於底圖，使用淺色, 低對比，盡量少的使用顏色。

4：表徵圖、映像應該很清晰的表達出意思，遵循常用標準，或者使用者機器容易聯想的到物件，絕對不允許畫出預設奇妙的圖案。

5：滑鼠游標樣式統一，盡量使用系統標準，杜絕出現重複的情況，例如某些軟體中一個手的形狀就有4鐘不同的樣子。

如：《如何建立XP表徵圖》http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

附件：Itop outlook howto.doc 描述itop項目中，outlookxp風格表徵圖的製作方法

四：(Font)字型
使用統一字型，字型標準的選擇依據作業系統類型決定。

中文採用標準字型，“宋體”，英文採用標準 Microsoft Sans Serif 不考慮特殊字型(隸書、草書等,特殊情況可以使用圖片取代),保證每個使用者使用起來顯示都很正常。

字型大小根據系統標準字型來，例如 MSS字型8磅，宋體的小五號字(9磅）五號字（10.5磅)。

所有控制項盡量使用大小統一的字型屬性，除了特殊提示資訊、加強顯示等例外情況

ITop採用BCB，所有控制項預設使用 parent font，不允許修改，這樣有利於統一調整。

·系統大小字型屬性改變的處理。

Windows系統有個案頭設定，設定大字型屬性，很多介面設計者常常為這個惱火，如果設計時遵循微軟的標準，全部使用相對大小作為控制項的大小設定，當切換大小字型的時候，相對不會有什麼特殊問題。

但是由於常常方便使用點陣作為視窗設計單位，導致改變大字型後，出現版面混亂的問題。

這個情況下，應該做相應處理：

1：寫程式自動調節大小，點陣值乘以一個相應比例

2：全部採用點陣作為單位，不理會系統字型的調節，這樣可以減少調節大字型帶來的麻煩。BCB/DELPHI中多採用這種方法，但是必然結果是和系統不統一。

五：(Text)文字表達
提示資訊、協助文檔文字表達遵循以下準則：

1：口語化、客氣、多用您、請，不要用或少用專業術語，杜絕錯別字

2：斷句逗號句號頓號分號的用法， 提示資訊比較多的話，應該分段，

3：警告、資訊、錯誤 使用對應的表示方法

4：使用統一的語言描述，例如一個關閉功能按鈕，可以描述為退出、返回、關閉，則應該統一規定。

5: 根據使用者不同採用相應的詞語語氣語調，如專用軟體，可以出現很多專業屬於，使用者為兒童：這可以語氣親切和藹，老年使用者則應該成熟穩重。制定標準遵循之。

六：(STYLE)控制項風格，不要使用錯誤控制項，控制項功能要專一
有設計好的同一風格的控制項，如果沒有能力設計出一套控制項，則使用標準控制項，絕對不能不倫不類，雜亂無章

·不要錯誤使用控制項，例如：

使用Button樣式做TTable的功能，拿主菜單條顯示著作權資訊，

·統一類型的控制項操作方式相同，例如一個控制項雙擊可以執行某些動作，而同樣控制項，雙擊卻沒有任何反映

·一個控制項只做單一功能，不複用

很多人為了寫程式方便，喜歡把一個控制項在不同情況下做不同功能用，這些對使用者初次理解增加難度，只有使用者熟悉後才能理解。 例如

改變紅色選項，左邊的參數代表不同的設定，可能由於為了節省控制項或者編程量，但是只有熟練使用者才回使用，這種情況下解決方案：

1:分組，使用雙份控制項.

2：使用TABLE頁，給使用者很明顯的視覺變化

七：(ALIGN)控制項布局，視窗不擁擠，按功能群組控制項
1：螢幕不能擁擠

擁擠的螢幕讓人難以理解，因而難以使用。實驗結果(Mayhew,1992年)螢幕總體覆蓋度不應該超過40％，而分組鐘覆蓋度不應該超過62％。

讓人看上去，不能太擁擠，也不能太鬆散。

整個項目，採用統一的控制項間距，通過調整表單大小達到一致，即使在表單大小不變的情況下，寧可留空部分地區，也不要破壞控制項間的行間距。

2：地區排列

一行控制項，縱向中對齊, 控制項間距基本保持一致

行與行之間間距相同，靠表單Border距離應大於行間間距(間距加邊緣留空)。

當螢幕有多個編輯地區，要以視覺效果和效率來組織這些地區。

3：資料對齊要適當

解說文字，中文版應使用中文全形冒號，縱向對齊時，並按冒號右對其，。 縱向控制項寬度盡量保持相通。並靠左對齊。

例如金額等字元穿應根據小數點對齊，或者靠右對齊

4：有效組合

邏輯上相關聯的控制項應當加以組合，以表示其關聯性，反之，任何不想光的項目應當風格開，在項目集合間，用間隔對其進行分組，或者使用方框劃分各自地區。

例如： 以下介面，選擇搜尋方式來判斷號碼範圍是表示主叫號碼範圍還是被叫號碼範圍，和入帳方式無關，

則應該修改為： 搜尋方式和入帳方式調換位置。以免使用者產生誤解。

5：視窗縮放時，控制項位置、布局：

為了使介面不出現跑版或者難看的局面，解決方案：

1：固定視窗大小，不允許改變尺寸，
2：改變尺寸的視窗，在Onsize的時候做控制項位置、大小的相應改變。

BCB/DELPHI的VCL中，大部分控制項有布局屬性：

某些控制項擁有alignment屬性，可以用來做布局調節：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撐滿(Client)屬性，用來根據版面自動調節。

大部分控制項有屬性Anchors，裡面上下左右akLeft, akTop等如果為true，則表示相對各個邊緣的距離是否改變。這個可以進一步設計好排版工作。

八：(TAB ORDER)TAB順序
習慣用法，讀取順序，從從左至右，從上到下

表單中控制項的Tab按鍵啟用順序，TabOrder,. BCB/DELPHI中使用表單設計右鍵菜單選擇taborder設定，VC中表單RES編輯地區使用ctrl+D

九：(ShortcutKey & Accelerator& PopMenu)快速鍵、加速鍵和快顯功能表
·快速鍵：

1：全域快速鍵菜單中加以描述 CTRL+XXX 併入協助列表。

2：快速鍵寫入協助，特殊說明，並在使用培訓時強調使用

·加速鍵：

1：使用非破壞性預設按鈕，斷行符號、ESC鍵的正確使用 一個表單，有預設加速鍵，如斷行符號表示啟用當前視窗設定為default的按鈕動作，esc表示關閉視窗。

在調用default按鈕動作和關閉動作時候，不應該做有破壞性的操作，避免使用者錯誤操作產生危害程度，例如不能把刪除資料等功能的按鈕作為預設按鈕。當使用者要提交很多資料時，應該屏蔽esc，或者做退出提示，告誡使用者是否儲存提交。

2：可接收動作控制項必須擁有加速鍵，統一加速鍵描述(&A)

為結合鍵盤使用，可操作控制項都應該有加速鍵，加速鍵定義準則，為英文單詞第一個字母，如果同一表單重複則用第二個字母，以此類推，則加速方式為alt+這個加速鍵，用統一的方法標識在介面中，如XXX(A) 或者wps的 A.XXX 英文可直接在字母下標識底線 Cancel，

對於無法像button一樣顯示快速鍵的Edit等控制項，則在Edit描述的Label中顯示快速鍵。

·快顯功能表

輔助菜單必須在可視化介面上擁有對應的按鈕或者菜單選項。

由於輔助菜單由使用者點擊滑鼠左右鍵或者別的動作才能調出來顯示給使用者。無法清晰的顯示給使用者，所以對應選項應該可以通過別的途徑得到,例如介面上有相應控制項或彈出右鍵菜單的按鈕等。

十：(ACTION)使用者互動
1：disable而不是not visible

要使一個功能有時允許有時不允許使用者使用，則這個控制項的不能隨便隱藏，應該使用disable屬性進行表示，以免使用者發現控制項失蹤後措手無策

2：視窗彈出位置要明顯

點擊一個控制項，快顯視窗或者菜單，應該給人明顯提示，最低要求是覆蓋剛才點擊的位置，讓使用者輕鬆跳轉到新的介面。

3：執行動作要提示

給使用者一個視覺感受的同時，寫程式的時候應該注意使用者的互動感受，UI作為人機對話的工具，使用者做了任何動作，應該給使用者一個視覺或者聽覺、觸覺提示。而且這個提示應該行明顯，但不應提示過長，可以有以下幾種方法：

當使用者點擊按鈕等動作進行一個工作時：

1：彈出互動對話方塊讓使用者點擊確認。

2：改變UI中控制項參數提示：(處理不用使用者確認的提示，有一定延時，或者使用者按鍵後自動清除。)

如：改變標題列字串，顯示“資訊：提交成功”,或者專門設定一個狀態列、TLable等用來進行提示。

3：聽覺提示：

在確定有音效卡，使用者可以聽到聲音的時候，發出特殊聲音提示。一般作為重要提示的輔助。聲音不應過長，緊急錯誤提示應該短促，頻率較高，成功提示應該舒緩，輕鬆。等等……

十一：(HELP)線上說明：
什麼時候要協助，什麼時候不要協助

1：系統預設、行業標準的控制項操作不需要逐一描述，只需要對特殊控制項加以描述 2：特殊操作、特殊功能介面，在介面上加控制項直接連接到對應的HELP檔案中

3：特殊設定詳細，應該在介面上用簡潔明了的語句說明，或者是好用Tiptool，並由第二步協助

協助文檔：

結構化，按功能模組劃分

必須闡述功能通過什麼方法可以在軟體中實現

協助檔案是協助使用者更好的使用軟體，措辭要恰當、簡捷、通俗易懂,每一句話都應該有目的，幫使用者解決問題

協助檔案不是廣告、商業軟體不允許打廣告。描述公司資訊目的是為了方便使用者在沒有辦法的情況下找到售後支援，網址串連、信箱地址、電話號碼絕對不允許無效。

十二：發行時闡明規則
對統一的東西進行逐一闡述，並加以典型描述，放入HELP和使用者手冊中，同時加有詞彙表

附錄：
美工何時參與進來：

美工作為介面美化的主要人員，不但擁有藝術設計、封裝設計的才能，還應該穿插整個項目，給介面程式設計人員提出系統參考意見。

1：軟體設計前期，美工參與需求瞭解，分析同類軟體介面有缺點，提出主色調、典型介面風格、以及構思整個美術封裝等。

2：介面原型設計過程中，與開發人員共同修改、商榷最終表現樣式，以及確立UI標準。

3：程式開發過程中，提供標準風格的資源檔（icon,cur,bmp等），並總結出統一風格的資源的設計過程，形成規範文檔* .

4：產品化方面，協助製作協助檔案、網站風格以及參與製作，製作附帶宣傳圖片、動畫、產品封裝、海報等。