『轉貼』小型軟體的通用界面設計製作指南
本文提供了小型軟體的通用界面設計製作的一些方法和原則,以及相關問題的解決方案。
一:遵循一致的準則,確立標準並遵循
無論是控件使用,提示信息措辭,還是顏色、窗口佈局風格,遵循統一的標準,做到真正的一致。
這樣得到的好處:
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鍾不同的樣子。
四:(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
color]
[ 本帖最後由 蔡逸竹 於 2007-3-25 02:48 編輯 ]