一些界面標準規範

 
一:遵循一致的準則,確立標準並遵循
無論是控件使用,提示信息措辭,還是顏色、窗口布局風格,遵循統一的標準,做到真正的一致。
這樣得到的好處:
1:使用戶使用起來能夠建立起精確的心裏模型,使用熟練了一個界面後,切換到另外一個界面能夠很輕鬆的推測出各種功能,語句理解也不需要費神理解
2:降低培訓、支持成本,支持人員不會行費力逐個指導。
3:給用戶統一感覺,不覺得混亂,心情愉快,支持度增加
做法:
項目組有經驗人士,確立UI規範:
·美工提供色調配色方案,提供整體配色表
·界面控制程序人員、用戶體驗人員提出合理統一使用的控件庫。參考標準界面使用規範:
控件功能遵循行業標準,windows平臺參見《Microsoft 用戶體驗》(MSDN中有,中文已經翻譯發行,項目組必須有一本)
控件樣式在允許的範圍內可以統一修改其樣式、色調
參考其他軟件先進操作,提取對本項目有用的功能,以使用,絕對不能盲從,漫無目的。
根據需要,設計特殊操作控件,準則爲:簡化操作、達到一定功能目的
·界面實施人員與美工商榷控件可實現性,(如不實行此步驟,將會導致各自對對方工作不滿意,也會產生不一致的混亂)。重複疊代上述工作。
·建立合理化文檔《UI標準》描述上述規範,
·強行界面設計者理解之,並作爲開發準則,
·SQA人員進行監控開發人員是否遵循,及時告誡開發人員。

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

三:(Resource)資源
一個多姿多彩的人機交互界面,少不了精美的鼠標光標、圖標以及指示圖片、底圖等。
1:也需要遵循統一的規則,包括上述顏色表的建立,圖標的建立步驟也應該儘可能的形成標準,參考itopoutlookbar圖標設計標準
2:有標準的圖標風格設計,有統一的構圖佈局,有統一的色調、對比度、色階,以及圖片風格
3:底圖應該融於底圖,使用淺色, 低對比,儘量少的使用顏色。
4:圖標、圖像應該很清晰的表達出意思,遵循常用標準,或者用戶機器容易聯想的到物件,絕對不允許畫出默認奇妙的圖案。
5:鼠標光標樣式統一,儘量使用系統標準,杜絕出現重複的情況,例如某些軟件中一個手的形狀就有4鐘不同的樣子。
附件: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/DELPHIVCL中,大部分控件有佈局屬性:
某些控件擁有alignment屬性,可以用來做佈局調節:TcustomPanelTmemo等,考左靠右靠上靠下以及撐滿(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:產品化方面,協助製作幫助文件、網站風格以及參與制作,製作附帶宣傳圖片、動畫、產品包裝、海報等。
 
界面設計測試規範
================================================================================================================
界面設計測試規範
界面測試
界面測試(紅鬃野馬)作者:flowingice

我在工作中總結了一些有關界面設計與測試的規範,與大家共享。界面設計與測試規則
界面是軟件與用戶交互的最直接的層,界面的好壞決定用戶對軟件的第一印象。而且設計良好的界面能夠引導用戶自己完成相應的操作,起到嚮導的作用。同時界面如同人的面孔,具有吸引用戶的直接優勢。設計合理的界面能給用戶帶來輕鬆愉悅的感受和成功的感覺,相反由於界面設計的失敗,讓用戶有挫敗感,再實用強大的功能都可能在用戶的畏懼與放棄中付諸東流。目前界面的設計引起軟件設計人員的重視的程度還遠遠不夠,直到最近網頁製作的興起,才受到專家的青睞。而且設計良好的界面由於需要具有藝術美的天賦而遭拒絕。
目前流行的界面風格有三種方式:多窗體、單窗體以及資源管理器風格,無論那種風格,以下規則是應該被重視的。
1:易用性:
按鈕名稱應該易懂,用詞準確,屏棄沒楞兩可的字眼,要與同一界面上的其他按鈕易於區分,能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能並進行相關的正確*作。
易用性細則:
1):
完成相同或相近功能的按鈕用Frame框起來,常用按鈕要支持快捷方式。
2):
完成同一功能或任務的元素放在集中位置,減少鼠標移動的距離。
3):
按功能將界面劃分局域塊,用Frame框括起來,並要有功能說明或標題。
4):
界面要支持鍵盤自動瀏覽按鈕功能,即按Tab鍵的自動切換功能。
5):
界面上首先應輸入的和重要信息的控件在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。
6):
同一界面上的控件數最好不要超過10個,多於10個時可以考慮使用分頁界面顯示。
7):
分頁界面要支持在頁面間的快捷切換,常用組合快捷鍵Ctrl+Tab
8):
默認按鈕要支持Enter及選操作,即按Enter後自動執行默認按鈕對應操作。
9):
可寫控件檢測到非法輸入後應給出說明並能自動獲得焦點。
10):Tab
鍵的順序與控件排列順序要一直,目前流行總體從上到下,同時行間從左到右的方式。
11):
複選框和選項框按選擇機率的高底而先後排列。
12):
複選框和選項框要有默認選項,並支持Tab選擇。
13):
選項數相同時多用選項框而不用下拉列表框。
14):
界面空間較小時使用下拉框而不用選項框。
15):
選項數叫少時使用選項框,相反使用下拉列表框。
16):
專業性強的軟件要使用相關的專業術語,通用性界面則提倡使用通用性詞眼。
2
規範性:
通常界面設計都按Windows界面的規範來設計,即包含菜單條、工具欄、工具廂、狀態欄、滾動條、右鍵快捷菜單的標準格式,可以說:界面遵循規範化的程度越高,則易用性相應的就越好。小型軟件一般不提供工具廂。
規範性細則:
1):
常用菜單要有命令快捷方式。
2):
完成相同或相近功能的菜單用橫線隔開放在同一位置。
3):
菜單前的圖標能直觀的代表要完成的操作。
4):
菜單深度一般要求最多控制在三層以內。
5):
工具欄要求可以根據用戶的要求自己選擇定製。
6):
相同或相近功能的工具欄放在一起。
7):
工具欄中的每一個按鈕要有及時提示信息。
8):
一條工具欄的長度最長不能超出屏幕寬度。
9):
工具欄的圖標能直觀的代表要完成的操作。
10):
系統常用的工具欄設置默認放置位置。
11):
工具欄太多時可以考慮使用工具廂。
12):
工具廂要具有可增減性,由用戶自己根據需求定製。
13):
工具廂的默認總寬度不要超過屏幕寬度的1/5
14):
狀態條要能顯示用戶切實需要的信息,常用的有:
目前的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息等,如果某一操作需要的時間較長,還應該顯示進度條和進程提示。
15)
:滾動條的長度要根據顯示信息的長度或寬度能及時變換,以利於用戶瞭解顯示信息的位置和百分比。
16)
:狀態條的高度以放置五好字爲宜,滾動條的寬度比狀態條的略窄。
17)
:菜單和工具條要有清楚的界限;菜單要求凸出顯示,這樣在移走工具條時仍有立體感。
18)
:菜單和狀態條中通常使用5號字體。工具條一般比菜單要寬,但不要寬的太多,否則看起來很不協調。
19):
右鍵快捷菜單採用與菜單相同的準則。

3
:幫助設施:
系統應該提供詳盡而可靠的幫助文檔,在用戶使用產生迷惑時可以自己尋求解決方法。
幫助設施細則:
1)
:幫助文檔中的性能介紹與說明要與系統性能配套一致。(我們的系統幫助文檔都是系統的祖先時期的說明,讓人困惑)
2)
:打包新系統時,對作了修改的地方在幫助文檔中要做相應的修改。
3)
:操作時要提供及時調用系統幫助的功能。常用F1
4)
:在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。
5)
:最好提供目前流行的聯機幫助格式或HTML幫助格式。
6)
:用戶可以用關鍵詞在幫助索引中搜索所要的幫助,當然也應該提供幫助主題詞。
7)
:如果沒有提供書面的幫助文檔的話,最好有打印幫助的功能。
8 )
:在幫助中應該提供我們的技術支持方式,一旦用戶難以自己解決可以方便的尋求新的幫助方式。
4:合理性:
屏幕對角線相交的位置是用戶直視的地方,正上方四分之一處爲易吸引用戶注意力的位置,在放置窗體時要注意利用這兩個位置。
合理性細則:
1)
:父窗體或主窗體的中心位置應該在對角線焦點附近。
2)
:子窗體位置應該在主窗體的左上角或正中。
3)
:多個子窗體彈出時應該依次向右下方偏移,以顯示窗體出標題爲宜。
4)
:重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。
5)
:錯誤使用容易引起界面退出或關閉的按鈕不應該放在易點位置。橫排開頭或最後與豎排最後爲易點位置。
6)
:與正在進行的操作無關的按鈕應該加以屏蔽(Windows中用灰色顯示,沒法使用該按鈕)
7)
:對可能造成數據無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。
8)
:非法的輸入或*作應有足夠的提示說明。
9):
對運行過程中出現問題而引起錯誤的地方要有提示,讓用戶明白錯誤出處,避免形成無限期的等待。
10):
提示、警告、或錯誤說明應該清楚、明瞭、恰當。
5
:美觀與協調性:
界面應該大小適合美學觀點,感覺協調舒適,能在有效的範圍內吸引用戶的注意力。
美觀與協調性細則:
1):
長寬接近黃金點比例,切忌長寬比例失調、或寬度超過長度。
2):
佈局要合理,不宜過於密集,也不能過於空曠,合理的利用空間。
3):
按鈕大小基本相近,忌用太長的名稱,免得佔用過多的界面位置。
4):
按鈕的大小要與界面的大小和空間要協調。
5):
避免空曠的界面上放置很大的按鈕。
6)
:放置完控件後界面不應有很大的空缺位置。
7):
字體的大小要與界面的大小比例協調, 通常使用的字體中宋體9-12較爲美觀,很少使用超過12號的字體。
8):
前景與背景色搭配合理協調,反差不宜太大,最好少用深色,如大紅、大綠等。常用色考慮使用Windows界面色調。
9):
如果使用其他顏色,主色要柔和,具有親和力與磁力,堅決杜絕刺目的顏色。
10):
大型系統常用的主色有"#E1E1E1""#EFEFEF""#C0C0C0"等。
11):
界面風格要保持一致,字的大小、顏色、字體要相同,除非是需要藝術處理或有特殊要求的地方。
12):
如果窗體支持最小化和最大化或放大時,窗體上的控件也要隨着窗體而縮放;切忌只放大窗體而忽略控件的縮放。
13)
:對於含有按鈕的界面一般不應該支持縮放,即右上角只有關閉功能。
14):
通常父窗體支持縮放時,子窗體沒有必要縮放。
15)
:如果能給用戶提供自定義界面風格則更好,由用戶自己選擇顏色、字體等。
6:菜單位置:
菜單是界面上最重要的元素,菜單位置按照按功能來組織。
菜單設測試細則:
1)
:菜單通常採用常用--主要--次要--工具--幫助的位置排列,符合流行的Windows風格。
2):
常用的有文件編輯查看等,幾乎每個系統都有這些選項,當然要根據不同的系統有所取捨。
3):
下拉菜單要根據菜單選項的含義進行分組,並切按照一定的規則進行排列,用橫線隔開。
4):
一組菜單的使用有先後要求或有嚮導作用時,應該按先後次序排列。
5):
沒有順序要求的菜單項按使用頻率和重要性排列,常用的放在開頭,不常用的靠後放置;重要的放在開頭,次要的放在後邊。
6):
如果菜單選項較多,應該採用加長菜單的長度而減少深度的原則排列。
7):
菜單深度一般要求最多控制在三層以內。
8):
對常用的菜單要有快捷命令方式,組合原則見8
9):
對與進行的操作無關的菜單要用屏蔽的方式加以處理,如果採用動態加載方式——即只有需要的菜單才顯示——最好。
10)
:菜單前的圖標不宜太大,與字高保持一直最好。
11):
主菜單的寬度要接近,字數不應多於四個,每個菜單的字數能相同最好。
12)
:主菜單數目不應太多,最好爲單排佈置。
7:獨特性:
如果一味的遵循業界的界面標準,則會喪失自己的個性.在框架符合以上規範的情況下,設計具有自己獨特風格的界面尤爲重要。尤其在商業軟件流通中有着很好的遷移默化的廣告效用。
1):安裝界面上應有單位介紹或產品介紹,並有自己的圖標。
2):
主界面,最好是大多數界面上要有公司圖標。
3):
登錄界面上要有本產品的標誌,同時包含公司圖標。
4):
幫助菜單的關於中應有版權和產品信息。
5):
公司的系列產品要保持一直的界面風格,如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致。
8:快捷方式的組合
在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶*作得更快一些在西文Windows及其應用軟件中快捷鍵的使用大多是一致的。
菜單中:
1):
面向事務的組合有:
Ctrl-D
刪除Ctrl-F 尋找Ctrl –H替換;Ctrl-I 插入Ctrl-N 新記錄Ctrl-S 保存 Ctrl-O 打開。
2)
:列表:
Ctrl-R
Ctrl-G定位;Ctrl-Tab下一分頁窗口或反序瀏覽同一頁面控件;。
3):
編輯:
Ctrl-A
全選;Ctrl-C 拷貝;Ctrl-V 粘貼;Ctrl-X 剪切;Ctrl-Z撤消*作;Ctrl-Y恢復*作。
4)
文件*:
Ctrl-P
打印;Ctrl-W 關閉。
5):
系統菜單
Alt-A
文件;Alt-E編輯;Alt-T工具;AltW窗口;AltH幫助。
6):MS Windows
保留鍵:
Ctrl-Esc
任務列表Ctrl-F4 關閉窗口; Alt-F4 結束應用;Alt-Tab 下一應用Enter 缺省按鈕/確認*Esc 取消按鈕/取消*Shift-F1 上下文相關幫助
按鈕中:
可以根據系統需要而調節,以下只是常用的組合。
Alt-Y
確定()Alt-C取消;Alt-N 否;Alt-D刪除;Alt-Q退出;Alt-A添加;Alt-E編輯;Alt-B瀏覽;Alt-R讀;Alt-W寫。
這些快捷鍵也可以作爲開發中文應用軟件的標準,但亦可使用漢語拼音的開頭字母。
9:
安全性考慮:
在界面上通過下列方式來控制出錯機率,會大大減少系統因用戶人爲的錯誤引起的破壞。開發者應當儘量周全地考慮到各種可能發生的問題,使出錯的可能降至最小。如應用出現保護性錯誤而退出系統,這種錯誤最容易使用戶對軟件失去信心。因爲這意味着用戶要中斷思路,並費時費力地重新登錄,而且已進行的*作也會因沒有存盤而全部丟失。

安全性細則:
1)
:最重要的是排除可能會使應用非正常中止的錯誤。
2)
:應當注意儘可能避免用戶無意錄入無效的數據。
3)
:採用相關控件限制用戶輸入值的種類。
4)
:當用戶作出選擇的可能性只有兩個時,可以採用單選框。
5)
:當選擇的可能再多一些時,可以採用複選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。
6)
:當選項特別多時,可以採用列表框,下拉式列表框。
7)
:在一個應用系統中,開發者應當避免用戶作出未經授權或沒有意義的操作。
8)
:對可能引起致命錯誤或系統出錯的輸入字符或動作要加限制或屏蔽。
9):
對可能發生嚴重後果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態。
10):
對一些特殊符號的輸入、與系統使用的符號相沖突的字符等進行判斷並阻止用戶輸入該字符。
11)
:對錯誤操作最好支持可逆性處理,如取消系列操作。
12):
在輸入有效性字符之前應該阻止用戶進行只有輸入之後纔可進行的操作。
13):
對可能造成等待時間較長的*作應該提供取消功能。
14)
:特殊字符常有;;’”<,{、/|}]+=)-(_*&&^%$#@!~,.?/還有空格。
15)
:與系統採用的保留字符衝突的要加以限制。
16)
:在讀入用戶所輸入的信息時,根據需要選擇是否去掉前後空格。
17)
:有些讀入數據庫的字段不支持中間有空格,但用戶切實需要輸入中間空格,這時要在程序中加以處理。
10:多窗口的應用與系統資源:
設計良好的軟件不僅要有完備的功能,而且要儘可能的佔用最底限度的資源。
1)
在多窗口系統中,有些界面要求必須保持在最頂層,避免用戶在打開多個窗口時,不停的切換甚至最小化其他窗口來顯示該窗口。
2):在主界面載入完畢後自動卸出內存,讓出所佔用的WINDOWS系統資源。
3)
:關閉所有窗體,系統退出後要釋放所佔的所有系統資源,除非是需要後臺運行的系統。
4)
:儘量防止對系統的獨佔使用。
2004828 11:31
================================================================================================================
用戶界面
榮耀 2002
我們編寫的大多數軟件具有用戶界面,通過它實現人機交互。界面設計是一門大學問。
有一種流行說法,說代碼高手未必就是界面高手,我不贊成。迄今爲止,我認識的代碼高手,同時也都是界面高手。至於那些聲稱我只願意編寫核心代碼,對界面沒有興趣的所謂代碼高手,我懷疑這種人十有八九寫不好或根本就寫不出那種牛氣的代碼。
我也從來沒有遇見過界面做得非常到位但代碼寫得很差的人。通常來說,一個程序員的代碼水平和他的界面水平是一致的。果真閣下的代碼水平和界面水平不一致,我建議你強化你的弱項。代碼寫得好、界面做得差,一點都不比界面做得好、代碼寫得差,好到哪裏去。
你相信一個界面看上去亂七八糟的軟件,內部代碼卻非常有條理、精緻、強健和高效嗎?
假如你在Windows環境下開發,微軟定義了一套稱爲用戶體驗的參考規範(當然,用戶體驗的內容已經超出了狹義的用戶界面)。這個規範對菜單、按鈕、圖標、窗體、快捷鍵、消息框和文本等界面元素的設計,給出了一整套建議。倘若不是編寫遊戲之類的東西,就沒有理由不參照這個規範。
以下是我見過的一些糟糕的用戶界面風格
過份使用各種奇形怪狀、五顏六色的控件。這些界面往往出自充滿激情和想法的新手。它很容易使人想起過去農村穿着紅褂子、綠褲子的小媳婦,或者今天城市街頭畫着大花臉的扭秧歌的大媽。
界面元素比例失調。我見過按鈕巨大無比,其尺寸甚至超過顯示重要內容的文本框的界面。
界面元素凌亂。比如說,按鈕和文本框擺放地點隨意,相當於客廳當臥室,衛生間當廚房。
違背使用習慣。你按下F1,它沒有彈出幫助,卻執行了一件絕對出乎你意料的動作。
消息框信息含糊、混亂。下面是某軟件彈出的消息框。把確定取消改爲會不會更清晰一些?就事論事,假如干脆自己做個form,改成不想,那更好。
 
還有一種糟糕的用戶界面,乍一看很厲害,實際上完全是缺乏規劃的結果。
這種軟件本身的確提供了比較複雜的功能,但對於哪些是常用功能,哪些是很少用到的高級功能,缺乏評估。什麼功能都往界面上擠,佔地方不說,用戶會厭煩,弄不好還會被嚇跑。
對於這種軟件來說,默認界面只應該顯示目標用戶最常使用的功能,至於不常用到的高級功能,可以隱藏起來,比如說,放到菜單裏,不要都做成按鈕擺到界面上。果真需要需要這些高級功能的話,用戶自然會到菜單裏去找的。
在這方面,微軟Office軟件堪稱楷模。比如Word,從編寫代辦文憑這樣的電線杆上的狗皮膏,到排版嚴肅的長篇鉅著,都遊刃有餘。對於低級用戶來說,它簡單易用,對於高級用戶來說,要的功能都有。這個軟件界面做得就非常有水平。
就象那些高級數碼相機一樣,操作之簡單可以和傻瓜相機媲美。按一個按鈕就可以使你心想事成,恰恰說明它聰明得可以。
一句話,你願意使用界面上擺滿了各種讓人眼花繚亂的玩意兒,左看右看也不知道從哪兒下手的軟件嗎?
-完-
================================================================================================================
 
軟件界面設計相關的各項介紹 
 
 
界面設計是爲了滿足軟件專業化標準化的需求而產生的對軟件的使用界面進行美化優化規範化的設計分支。具體包括軟件啓動封面設計,軟件框架設計,按鈕設計,面板設計,菜單設計,標籤設計,圖標設計,滾動條及狀態欄設計,安裝過程設計,包裝及商品化。
在設計的過程中有較多注意的關鍵問題,以下列出幾點:
(1)軟件啓動封面設計
應使軟件啓動封面最終爲高清晰度的圖像,如軟件啓動封面需在不同的平臺、操作系統上使用將考慮轉換不同的格式,並且對選用的色彩不宜超過256色,最好爲216色安全色。軟件啓動封面大小多爲主流顯示器分辨率的1/6大。如果是系列軟件將考慮整體設計的統一和延續性。在上面應該醒目的標註製作或支持的公司標誌、產品商標,軟件名稱,版本號,網址,版權聲明,序列號等信息,以樹立軟件形象,方便使用者或購買者在軟件啓動的時候得到提示。插圖宜使用具有獨立版權的,象徵性強的,識別性高的,視覺傳達效果好的圖形,若使用攝影也應該進行數位處理,以形成該軟件的個性化特徵。
(2)軟件框架設計
軟件的框架設計就複雜得多,因爲涉及軟件的使用功能,應該對該軟件產品的程序和使用比較瞭解,這就需要設計師有一定的軟件跟進經驗,能夠快速的學習軟件產品,並且在和軟件產品的程序開發員及程序使用對象進行共同溝通,以設計出友好的,獨特的,符合程序開發原則的軟件框架。軟件框架設計應該簡潔明快,儘量少用無謂的裝飾,應該考慮節省屏幕空間,各種分辨率的大小,縮放時的狀態和原則,並且爲將來設計的按鈕,菜單,標籤,滾動條及狀態欄預留位置。設計中將整體色彩組合進行合理搭配,將軟件商標放在顯著位置,主菜單應放在左邊或上邊,滾動條放在右邊,狀態欄放在下邊,以符合視覺流程和用戶使用心理。
(3)軟件按鈕設計
軟件按鈕設計應該具有交互性,即應該有36種狀態效果:點擊時狀態;鼠標放在上面但未點擊的狀態;點擊前鼠標未放在上面時的狀態;點擊後鼠標未放在上面時的狀態;不能點擊時狀態;獨立自動變化的狀態。按鈕應具備簡潔的圖示效果,應能夠讓使用者產生功能關聯反應,羣組內按鈕應該風格統一,功能差異大的按鈕應該有所區別。
(4)軟件面板設計
軟件面板設計應該具有縮放功能,面板應該對功能區間劃分清晰,應該和對話框,彈出框等風格匹配,儘量節省空間,切換方便。
(5)菜單設計
菜單設計一般有選中狀態和未選中狀態,左邊應爲名稱,右邊應爲快捷鍵,如果有下級菜單應該有下級箭頭符號,不同功能區間應該用線條分割。
(6)標籤設計
標籤設計應該注意轉角部分的變化,狀態可參考按鈕。
(7)圖標設計
圖標設計色彩不宜超過64色,大小爲16x1632x32兩種,圖標設計是方寸藝術,應該加以着重考慮視覺衝擊力,它需要在很小的範圍表現出軟件的內涵,所以很多圖標設計師在設計圖標時使用簡單的顏色,利用眼睛對色彩和網點的空間混合效果,做出了許多精彩圖標。
(8)滾動條及狀態欄設計
滾動條主要是爲了對區域性空間的固定大小中內容量的變換進行設計,應該有上下箭頭,滾動標等,有些還有翻頁標。狀態欄是爲了對軟件當前狀態的顯示和提示。
(9)安裝過程設計
安裝過程設計主要是將軟件安裝的過程進行美化,包括對軟件功能進行圖示化。
(10)包裝及商品化
最後軟件產品的包裝應該考慮保護好軟件產品,功能的宣傳融合於美觀中,可以印刷部分產品介紹,產品界面設計。
================================================================================================================
 圖標設計規範

 

數位設計引入了一種新的圖標設計樣式。以下是設計和創建樣式圖標的具體規範。
圖標樣式應該有趣、色彩豐富且充滿活力,因爲現在的系統支持圖標是32位圖標,並且邊緣非常平滑。在矢量程序中繪製完每個圖標後,再用Adobe Photoshop進行處理可使圖像更加完美。本規範是專爲設計者編寫的。在創建圖像時,建議您與高水平的圖形設計者一起工作,尤其是具有豐富的矢量和3D軟件經驗的圖形設計者。
圖標設計概述的目的是讓您熟悉WindowsXP的新樣式,爲創建圖標做好準備。
圖標樣式特性
(1)
色彩豐富,是對WindowsXP外觀的補充。
(2)
不同的角度和透視特性爲圖像增添了動態活力。
(3)
元素的邊角十分柔和,並略微有些圓滑。
(4)
光源位於圖標的左上角,同時有環繞光照亮圖標的其它部分。
(5)
漸變效果使圖標具有立體感,進而使圖標的外觀更加豐滿。
(6)
投影使圖標更具對比度和立體感。
(7)
添加輪廓可使圖像更清晰。
(8)
日常對象(如計算機和設備)具有更現代化的個人外觀。
圖標尺寸
Windows XP
圖標有四種尺寸,建議使用以下四種尺寸:
(1) 48×48
像素
(2) 32×32
像素
(3) 24×24
像素
(4) 16×16
像素
圖標色彩深度支持
WindowsXP
支持32位圖標。32位圖標爲24位圖像加上8alpha通道。使圖標邊緣非常平滑,且與背景相融合。
每個WindowsXP圖標應包含以下三種色彩深度,以支持不同的顯示器顯示設置:
24
位圖像加上8alpha通道(32)
8
位圖像(256),加上1位透明色
4
位圖像(16),加上1位透明色
調色板
圖標中使用的主要顏色。
對象的角度和分組
WindowsXP
樣式圖標使用的透視網格:並非所有對象使用16×16的複雜圖像都能獲得較好效果。某些對象通常以直觀圖像顯示:文檔圖標、符號圖標(如警告或信息圖標)、單一對象圖標(如放大鏡)
除非創建重疊輔助對象可以更清楚地表達圖標的含義,否則就可讀性和完整性而言,還是應使用直觀圖像。還應考慮如何按組查看圖標,以便確定如何將對象分組。
投影
使用投影后,WindowsXP圖標將更清晰且更具立體感。可在Photoshop中實現這種效果,本指南的後面部分將對此進行描述。若要爲圖像添加投影,請在 Photoshop中雙擊圖像的圖層,並選擇Drop Shadow。然後將Angle更改爲135Distance更改爲 2Size更改爲2。此時投影爲75%不透明黑色。
輪廓
繪製XP樣式圖標時,爲圖像添加輪廓可使之更清晰,並可保證圖像在不同背景色上都具有較好效果。
概念
設計圖標時,請考慮以下因素:
使用已有概念以確保真實表達了用戶的想法。考慮圖標在用戶界面環境中以何種形式出現,以及如何作爲圖標集的一部分使用。考慮圖形的文化背景。避免在圖標中使用字母、單詞、手或臉。必須用圖標表示人或用戶時,請儘可能使其大衆化。如果圖標中的圖像由多個對象組成,應考慮如何使圖像尺寸更小。建議在圖標中使用的對象不超過三個。對於 16×16的尺寸大小,還可考慮刪除某些對象或簡化圖像使之更容易辨認。
透明工具
Gif Movie Gear(GMG)打開一個對話框,其中顯示您的圖標。使用吸管工具單擊圖標的背景色。此顏色將更改爲暗黃綠色(或在 GMG中選作透明背景色的顏色)。重複所有4位和8位幀。若要保存圖標,請選擇 File-Save Icon As...
創建工具欄
Windows
工具欄圖標除不使用投影之外,使用的樣式與其它圖標相同。由於工具欄圖標非常小,建議您使用簡單的圖像。如果以直觀方式顯示圖像即可清晰地表達圖標的含義,則不必使用其它複雜方式。
創建AVI
WindowsXP
使用8AVI。創建.avi文件的過程與創建圖標的過程相同-Photoshop中準備圖像,然後將其拖動到GMG 中。請按以下指導創建8位圖標。若要使用GMG保存AVI,請轉至File-Export As-AVI file
創建.avi文件時,請考慮以下因素:使用品紅(R255 G0 B255)作爲背景透明色。在Photoshop中,重要的一點是不要出現雜散像素。請將填充能力設置爲0,並確認未選中取消鋸齒。
 
軟件人機界面 
================================================================================================================
 
 
 
 
UIUser Interface(用戶界面)的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味,還要讓軟件的操作變得舒適、簡單、自由,充分體現軟件的定位和特點。

美麗的事物常常會讓人無法抗拒。這就是爲什麼產品出色的外觀設計對於電腦、汽車、日用品、傢俱、食品、服裝等等幾乎所有商品的銷售與推廣,都有着舉足輕重的作用的原因。
    同樣的道理,對於軟件公司來說,軟件產品就是他們的商品,而軟件界面就是他們產品的外觀,界面的美觀與否,直接關係到了軟件產品的營銷成敗。
    我們可以清楚地看到,微軟公司對軟件界面設計的重視。請回想一下您在第一次見到win2000時的情景,與nt4.0相比是否驚歎他界面的美觀性與易用性?而您如果使用過xp系統,則會被其令人神奇的感官概念而震驚折服!金山公司的金山詞霸就是國內軟件成功的例子了,從金山詞霸3.0到金山詞霸2001的變化堪稱經典。著名的網頁動畫製作軟件flash3.04.0,僅僅修改了圖標和窗體,立即大爲增色
    現今世界上成功的軟件公司都非常重視軟件界面的美化設計工作,因爲他們深刻地知道,在激烈的市場競爭中,僅僅有強大的功能是遠遠不夠的,不足以戰勝強勁的對手。我們可以相象一下,您在挑選手機的時候,如果有兩款手機,性能相同,而第一款比第二款要美觀很多,那麼您將選擇哪一款呢?當然是美觀的那一款了。試想,您的客戶,也會拿您和您競爭對手的軟件做這樣的比較的。
    現在的軟件企業都知道,廣告和市場推銷活動對市場營銷的作用是多麼的重要,並不遺餘力地打廣告、做活動、做推廣。但我們知道,這些活動的最終目的,是爲了讓用戶購買並使用軟件產品,而用戶最終使用的也是您的產品,那麼爲什麼不在軟件界面的美觀性上多下些工夫呢?在諸如家用電器、汽車、電腦等成熟的市場中,用非常精美的廣告去推廣一種功能強大卻醜陋無比的產品,是一種笑話。然而,這樣的笑話在軟件行業裏卻屢見不鮮。這也是像中國足球一樣,中國軟件業與國外相比較存在的一個很大的差距。
    實踐證明,各商家只要在產品美觀設計方面很小投入,將會有很大產出。其投入產出比,要比在功能領先性開發上的投入大得多。
    在用戶把軟件買回去後,他們和您企業的聯繫,或者說您企業形象在客戶眼中的表現,很大一部分是通過您軟件的界面來傳達的,那麼美觀友好的用戶界面對於宣傳您的企業文化,對於給客戶灌輸您的企業理念,對於您企業的宣傳運做都將是非常有益的。尤其如果您的公司做的是項目承包形式的業務,那麼無論是在競標的時候,還是在項目交付使用以後,美觀的界面都會給您的客戶以信心和良好的印象。
    要成爲一款有競爭力的軟件,不光要有強大的功能,也需要有一個友好的界面設計。縱觀當今的it行業,其軟件界面設計的發展趨勢大體上有如下幾種技術:
1. 命令語言用戶界面的發展。
根據其語言的特點,及人機交互的形式的分爲
a. 形式語言
b.
自然語言。
c.
類自然語言。
2. 圖形用戶界面的廣泛應用
圖形用戶界面和人機交互過程極大地依賴視覺和手動控制的參與,因此具有強烈的直接操作特點
3. 直接操縱用戶界面技術的成熟。
用戶最終關心的是他欲控制和操作的對象,他只關心任務語義,而不用過多爲計算機語義和句法而分心。對於大量物理的、幾何空間的以及形象的任務,直接操縱已表現出巨大的優越性。
4. 多媒體用戶界面及多通道用戶界面的發展大大豐富了計算機信息的表現形式。
5. 虛擬現實技術的應用 
 虛擬現實系統向用戶提供身臨其境(immerse)和多感覺通道(multi-sensory)體驗,作爲一種新型人機交互形式,虛擬現實技術比以前任何人機交互形式都有希望徹底實現和諧的、以人爲中心的人機界面。
 
軟件人機界面的形式與標準   
 菜單界面設計
 1 菜單界面概述
 2 菜單界面的語義組織
 3 菜單界面的式樣
 數據輸入界面設計
 1 交互輸入的原則和方法
 2 填表輸入界面設計
 直接操縱和WIMP界面設計
 2 直接操縱界面的特點
 3 圖標
 4 窗口
 交互輸入輸出界面設備
 1 交互輸入界面設備
 2 交互輸出界面設備
 響應時間和顯示速率
 幫助和出錯界面設計
 1 出錯處理分析
 2 幫助處理系統的設計
 3 出錯處理的設計

軟件人機界面設計
    
最小化
 系統菜單
 蘋果菜單
 自定義工具欄
  Finder
 字體
 搜索
 菜單設計
 運行過程顯示
 滾動條
 按鈕設計

圖標設計   
 軟件界面中的圖標設計
 1 軟件圖標的分類
 2 圖標的設計

網頁界面中的圖標設計
色彩設計 
 色彩基礎
 顏色的產生
 色彩的屬性
 色彩調和與色彩搭配
 色調
 配色
 色調感覺
 心理感受
 色彩的聯想
 計算機色彩
 硬件界面的色彩設計
 軟件設計的色彩搭配
 軟件色彩設計
 網頁色彩設計
 
人機界面設計測試   
 人機界面設計測試的意義
 設計準則
 人機界面的測試
 界面設計測試
 1 界面設計測試指標
 2 界面設計測試形式
 3 設計測試方法
 硬件人機界面設計測試
 1 簡單測試法
 2 名次記分法
 3 分功能測試法
 4 評分法
 5 意象尺度法

 軟件人機界面設計可用性測試
 1 觀察法
 2 原型測試方法
 3 諮詢法
 4 座談
 5 實驗法
 6 條目測試法

顯示界面設計
 數量型顯示界面設計
 性狀型顯示界面設計
 警報與信號顯示界面設計
 再現型顯示界面設計
 字母設計
 符號設計
 指針設計
 控制界面設計
 編碼設計
 顯控協調性設計
 集中控制中的顯控界面設計
 視野與控制區
 人機系統及其界面設計
 
 
發佈了32 篇原創文章 · 獲贊 1 · 訪問量 28萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章