界面設計指南

一：遵循一致的準則，確立標準并遵循
無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統一的標準，做到真正的一致。
這樣得到的好處：

1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能，語句理解也不需要費神理解
2：降低培訓、支持成本，支持人員不會行費力逐個指導。
3：給用戶統一感覺，不覺得混亂，心情愉快，支持度增加

做法：
項目組有經驗人士，確立UI規范：
?美工提供色調配色方案，提供整體配色表
?界面控制程序人員、用戶體驗人員提出合理統一使用的控件庫。參考標準界面使用規范：

控件功能遵循行業標準，windows平臺參見《Microsoft 用戶體驗》(MSDN中有，中文已經翻譯發行，項目組必須有一本)
控件樣式在允許的范圍內可以統一修改其樣式、色調
參考其他軟件先進操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。
根據需要，設計特殊操作控件，準則為：簡化操作、達到一定功能目的

?界面實施人員與美工商榷控件可實現性,(如不實行此步驟，將會導致各自對對方工作不滿意，也會產生不一致的混亂)。重復疊代上述工作。
?建立合理化文檔《UI標準》描述上述規范，
?強行界面設計者理解之，并作為開發準則，
?SQA人員進行監控開發人員是否遵循，及時告誡開發人員。

二：(Color)顏色使用恰當，遵循對比原則：
1：統一色調，針對軟件類型以及用戶工作環境選擇恰當色調：
如：安全軟件，根據工業標準，可以選取黃色，綠色體現環保，藍色表現時尚、紫色表現浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等
2：如果沒有自己的系列界面，采用標準界面則可以少考慮此方面，做到與操作系統統一，讀取系統標準色表
3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特別的東西，也應該使用特殊指示符，如"!"，"?"著重號，以及圖標等
4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現每臺機器都不一樣，應該經過嚴格測試，不同機器進行顏色測試
5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒有足夠反差，而藍色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產生憎惡感的顏色。
6：整個界面色彩盡量少的使用類別不同的顏色
itop色表
具體標準參考美術學統計學術標準。
色表的建設，對于美工在圖案設計、包裝設計上起著標準參考作用，對于程序界面設計人員設計控件、窗體調色起到有章可循的作用。

三：(Resource)資源
一個多姿多彩的人機交互界面，少不了精美的鼠標光標、圖標以及指示圖片、底圖等。

1：也需要遵循統一的規則，包括上述顏色表的建立，圖標的建立步驟也應該盡可能的形成標準，參考itop的outlookbar圖標設計標準
2：有標準的圖標風格設計，有統一的構圖布局，有統一的色調、對比度、色階，以及圖片風格
3：底圖應該融于底圖，使用淺色, 低對比，盡量少的使用顏色。
4：圖標、圖像應該很清晰的表達出意思，遵循常用標準，或者用戶機器容易聯想的到物件，絕對不允許畫出默認奇妙的圖案。
5：鼠標光標樣式統一，盡量使用系統標準，杜絕出現重復的情況，例如某些軟件中一個手的形狀就有4鐘不同的樣子。
如：《如何創建XP圖標》http://www.microsoft.com/china/msdn.../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：斷句逗號句號頓號分號的用法，\r\n 提示信息比較多的話，應該分段，
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：產品化方面，協助制作幫助文件、網站風格以及參與制作，制作附帶宣傳圖片、動畫、產品包裝、海報等。