- 控件 元件
- 窗口 視窗
- 支持成本 維護成本
- 支持人員 維護人員
- 用戶 使用者
- 項目 專案
- 鼠標光標 滑鼠指標
- 信息 資訊
- 菜單 選單
一：遵循一致的準則，確立標準並遵循
無論是控件使用，提示信息措辭，還是顏色、窗口佈局風格， 遵循統一的標準，做到真正的一致。
這樣得到的好處：
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：產品化方面，協助製作幫助文件、網站風格以及參與製作 ，製作附帶宣傳圖片、動畫、產品包裝、海報等。
沒有留言:
張貼留言