界面設(shè)計(jì)規(guī)范上下

1、軟件界面設(shè)計(jì)規(guī)范(上)說明：軟件界面設(shè)計(jì)屬于詳細(xì)設(shè)計(jì)，設(shè)計(jì)人員可根據(jù)項(xiàng)目的規(guī)模及時(shí)間跨度來決 定是否單列出來，可靈活掌握。以下所列舉和分析內(nèi)容基本上包括了大部分的軟 件的內(nèi)容規(guī)范，結(jié)合具體軟件開發(fā)項(xiàng)目，需適當(dāng)?shù)恼{(diào)整。1目的：當(dāng)今軟件界的所有軟件無不是可視化的用戶界面，它的好處不外乎它有美觀、直 接、操作者易懂和操作方便等好處。(具體目的)2內(nèi)容：2.1界面設(shè)計(jì)思想：為用戶設(shè)計(jì)，而不是設(shè)計(jì)者(1)美觀、操作方便高效。(2)根據(jù)用戶需求設(shè)計(jì)。(3)針對(duì)不同用戶的層次設(shè)計(jì)。(有的用戶對(duì)計(jì)算機(jī)相當(dāng)了解而有的從來就沒 碰過計(jì)算機(jī))(4)避免出現(xiàn)嵌套式的界面設(shè)計(jì)。(5)界面和代碼要相互制約。(6)界面要通

2、“人性”。即要有引導(dǎo)用戶操作的功能，不能是操作一有錯(cuò)誤就 卡住什么都做不下去，又無任何提示來幫助用戶如何進(jìn)行操作。2.2 界面設(shè)計(jì)原則:(1)遵循一致的準(zhǔn)則，確立標(biāo)準(zhǔn)并遵循無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn), 做到真正的一致。這樣得到的好處：a.使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換 到另外一個(gè)界面能夠很輕松的推測(cè)出各種功能，語句理解也不需要費(fèi)神理解。b.降低培訓(xùn)、支持成本，支持人員不會(huì)行費(fèi)力逐個(gè)指導(dǎo)。c.給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加做法：項(xiàng)目組有經(jīng)驗(yàn)人士，確立 UI規(guī)范：美工提供色調(diào)配色方案，提供整體配色表界面

3、控制程序人員、用戶體驗(yàn)人員提出合理統(tǒng)一使用的控件庫(kù)。參考標(biāo)準(zhǔn)界面使 用規(guī)范：控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows平臺(tái)參見Microsoft用戶體驗(yàn)(MSDN中 有，中文已經(jīng)翻譯發(fā)行，項(xiàng)目組必須有一本)控件的樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)。參考其他軟件先進(jìn)操作，提取對(duì)本項(xiàng)目有用的功能，以使用，絕對(duì)不能盲從，漫 無目的。根據(jù)需要，設(shè)計(jì)特殊操作的控件，準(zhǔn)則為：簡(jiǎn)化操作、達(dá)到一定功能目的界面實(shí)施人員與美工商榷控件可實(shí)現(xiàn)性，重復(fù)迭代上述工作。建立合理化文檔UI標(biāo)準(zhǔn)描述上述規(guī)范，并作為開發(fā)準(zhǔn)則，SQA人員進(jìn)行監(jiān)控開發(fā)人員是否遵循，及時(shí)告誡開發(fā)人員。(2) (Color)顏色使用恰當(dāng)，遵循對(duì)比原

4、則：a.統(tǒng)一色調(diào)，針對(duì)軟件類型以及用戶工作環(huán)境選擇恰當(dāng)色調(diào)：如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、 紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等b.如果沒有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作 系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表c.色盲、色弱用戶，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使用特殊指示符，如果，"?”著重號(hào)，以及圖標(biāo)等d.顏色方案也需要測(cè)試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺(tái)機(jī)器都不一樣，應(yīng)該經(jīng)過嚴(yán)格測(cè)試，不同機(jī)器進(jìn)行顏色測(cè)試e.遵循對(duì)比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)

5、色文字以白色背景容易識(shí)別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒有 足夠反差，而藍(lán)色和白色反差很大。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn) 生憎惡感的顏色。f.整個(gè)界面色彩盡量少的使用類別不同的顏色itop色表具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計(jì)學(xué)術(shù)標(biāo)準(zhǔn)。色表的建設(shè)，對(duì)于美工在圖案設(shè)計(jì)、包裝設(shè)計(jì)上起著標(biāo)準(zhǔn)參考作用，對(duì)于程序界 面設(shè)計(jì)人員設(shè)計(jì)控件、窗體調(diào)色起到有章可循的作用。2.3 其他界面約定(1) (Resource)資源 一個(gè)多姿多彩的人機(jī)交互界面，少不了精美的光標(biāo)圖層、圖標(biāo)以及指示圖片、底圖等。a,也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(biāo)準(zhǔn)，參考itop的ou

6、tlookbar圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)b,有標(biāo)準(zhǔn)的圖標(biāo)風(fēng)格設(shè)計(jì)，有統(tǒng)一的構(gòu)圖布局，有統(tǒng)一的色調(diào)、對(duì)比度、色階，以及圖片風(fēng)格c,底圖應(yīng)該融于背景圖，使用淺色，低對(duì)比，盡量少的使用顏色。d,圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機(jī)器容易聯(lián)想的到物件,絕對(duì)不允許畫出默認(rèn)奇妙的圖案。e,各種光標(biāo)的樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個(gè) 手的形狀就有4鐘不同的樣子。如：如何創(chuàng)建XP圖標(biāo)附件：Itop outlook howto.doc 描述itop項(xiàng)目中，out100kxp風(fēng)格圖標(biāo)的制作方法(2) (Font)字體使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類型決定。中文

7、采用標(biāo)準(zhǔn)字體，"宋體”，英文采用標(biāo)準(zhǔn)Microsoft Sans Serif 不考慮特殊字體(隸書、草書等，特殊情況可以使用圖片取代，保證每個(gè)用戶使用起來顯示都很正常。字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來，例如MSS字體8磅，宋體的小五號(hào)字(9磅)五號(hào)字(10.5磅)。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況ITop采用BCB ,所有控件默認(rèn)使用 parent font ,不允許修改，這樣有利于統(tǒng)一調(diào)整。系統(tǒng)大小字體屬性改變的處理。Windows系統(tǒng)有個(gè)桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計(jì)者常常為這個(gè)惱火，如果設(shè)計(jì)時(shí)遵循微軟的標(biāo)準(zhǔn)， 全部使用相對(duì)大小作為控件的

8、大小設(shè)置，當(dāng)切換大小字體的時(shí)候，相對(duì)不會(huì)有什么特殊問題。但是由于常常方便使用點(diǎn)陣作為窗口設(shè)計(jì)單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。這個(gè)情況下，應(yīng)該做相應(yīng)處理：1:寫程序自動(dòng)調(diào)節(jié)大小，點(diǎn)陣值乘以一個(gè)相應(yīng)比例2:全部采用點(diǎn)陣作為單位，不理會(huì)系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。(3) (Text)文字表達(dá)提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：a. 口語化、客氣、多用您、請(qǐng)，不要用或少用專業(yè)術(shù)語，杜絕錯(cuò)別字b.斷句逗號(hào)句號(hào)頓號(hào)分號(hào)的用法，rn提示信息比較多的話，應(yīng)該分段，c.警告、信息、錯(cuò)誤 使用對(duì)應(yīng)的表示方法d,

9、使用統(tǒng)一的語言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應(yīng)該 統(tǒng)一規(guī)定。e,根據(jù)用戶不同采用相應(yīng)的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為 兒童：這可以語氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。制定標(biāo)準(zhǔn)遵循之。軟件界面設(shè)計(jì)規(guī)范(下)(4) (STYLE)控件風(fēng)格，不要使用錯(cuò)誤控件，控件功能要專一有設(shè)計(jì)好的同一風(fēng)格的控件，如果沒有能力設(shè)計(jì)出一套控件，則使用標(biāo)準(zhǔn)控件，絕對(duì)不能不倫不類，雜亂無章a.不要錯(cuò)誤使用控件，例如：使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息，統(tǒng)一類型的控件操作方式相同，例如一個(gè)控件雙擊可以執(zhí)行某些動(dòng)作，而同樣控件，雙擊卻沒有任何

10、反映b. 一個(gè)控件只做單一功能，不復(fù)用很多人為了寫程序方便，喜歡把一個(gè)控件在不同情況下做不同功能用，這些對(duì)用戶初次理解增加難度，只有用戶熟悉后才能理解。例如：改變紅色選項(xiàng)，左邊的參數(shù)代表不同的設(shè)置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才會(huì)使用，這種情況下解決方法：1 ：分組，使用雙份控件2:使用TABLE頁(yè)，給用戶很明顯的視覺變化(5) (ALIGN)控件布局，窗口不擁擠，按功能組合控件，a.屏幕不能擁擠擁擠的屏幕讓人難以理解，因而難以使用。試驗(yàn)結(jié)果(Mayhew,1992年)屏幕總體覆蓋度不應(yīng)該超過40%,而分組鐘覆蓋度不應(yīng)該超過 62%。讓人看上去，不能太擁擠，也不能太松散。整

11、個(gè)項(xiàng)目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小 不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。b.區(qū)域排列每一行控件，縱向中對(duì)齊，控件間距基本保持一致行與行之問間距相同，靠窗體 Border距離應(yīng)大于行間問距(問距加邊緣留空)。當(dāng)屏幕有多個(gè)編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域。c.數(shù)據(jù)對(duì)齊要適當(dāng)說明文字，中文版應(yīng)使用中文全角冒號(hào)，縱向?qū)R時(shí)，并按冒號(hào)右對(duì)齊?？v向控件寬度盡量保持相通，并左對(duì)齊。例如金額等字符穿應(yīng)根據(jù)小數(shù)點(diǎn)對(duì)齊，或者右對(duì)齊d.有效組合邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合，以表示其關(guān)聯(lián)性，反之，任何不相關(guān)的項(xiàng)目應(yīng)當(dāng)分隔開，在項(xiàng)目集合問，用間隔對(duì)其進(jìn)

12、行分組，或者使用方框劃分各自區(qū)域。e.窗口縮放時(shí)，控件位置、布局：為了使界面不出現(xiàn)跑版或者難看的局面，解決方法：1：固定窗口大小，不允許改變尺寸，2：改變尺寸的窗口，在 Onsize的時(shí)候做控件位置、大小的相應(yīng)改變。(6) (TAB ORDER)TAB 順序習(xí)慣用法，閱讀順序，從從左到右，從上到下窗體中控件的Tab按鍵激活順序，TabOrder,. BCB/DELPHI中使用窗體設(shè)計(jì)右鍵菜單選擇taborder設(shè)置，VC中窗體RES編輯區(qū)域使用ctrl+D(7) (ShortcutKey & Accelerator& PopMenu) 快捷鍵、加速鍵和彈出菜單1 .快捷鍵：a.

13、全局快捷鍵菜單中加以描述 CTRL+XXX并入幫助列表。b.快捷鍵寫入幫助，特殊說明，并在使用培訓(xùn)時(shí)強(qiáng)調(diào)使用2 .加速鍵：a.使用非破壞性缺省按鈕，回車、ESC鍵的正確使用一個(gè)窗體，有默認(rèn)加速鍵，如回車表示激活當(dāng)前窗口設(shè)置為 default的按鈕動(dòng)作， esc表示關(guān)閉窗口。在調(diào)用default按鈕動(dòng)作和關(guān)閉動(dòng)作時(shí)候，不應(yīng)該做有破壞性的操作，避免用戶 錯(cuò)誤操作產(chǎn)生危害程度，例如不能把刪除數(shù)據(jù)等功能的按鈕作為缺省按鈕。當(dāng)用戶要提交很多數(shù)據(jù)時(shí)，應(yīng)該屏蔽esc,或者做退出提示，告誡用戶是否保存提交。b.可接收動(dòng)作控件必須擁有加速鍵，統(tǒng)一加速鍵描述 (&A)為結(jié)合鍵盤使用，可操作控件都應(yīng)該有加速

14、鍵，加速鍵定義準(zhǔn)則，為英文單詞 第一個(gè)字母，如果同一窗體重復(fù)則用第二個(gè)字母，以此類推，則加速方式為alt+這個(gè) 加速鍵，用統(tǒng)一的方法標(biāo)識(shí)在界面中，如 XXX(A)或者wps的A.XXX英 文可直接在字母下標(biāo)識(shí)下劃線 Cancel ,對(duì)于無法像button 一樣顯示快捷鍵的Edit等控件，則在Edit描述的Label中顯 小快捷鍵。彈出菜單：輔助菜單必須在可視化界面上擁有對(duì)應(yīng)的按鈕或者菜單選項(xiàng)。由于輔助菜單由用戶點(diǎn)擊鼠標(biāo)左右鍵或者別的動(dòng)作才能調(diào)出來顯示給用戶。無法清晰的顯示給用戶，所以對(duì)應(yīng)選項(xiàng)應(yīng)該可以通過別的途徑得到，例如界面上有相 應(yīng)控件或彈出右鍵菜單的按鈕等。(8) (ACTION)用戶交互

15、a. disable 而不是 not visible項(xiàng)目不可用時(shí)，灰掉而不是移走，用戶才有形成精確的心理模型。要使一個(gè)功能有時(shí)允許有時(shí)不允許用戶使用，則這個(gè)控件的不能隨便隱藏，應(yīng)該 使用disable屬性進(jìn)行表示，以免用戶發(fā)現(xiàn)控件失蹤后措手無策b.窗口彈出位置要明顯點(diǎn)擊一個(gè)控件，彈出窗口或者菜單，應(yīng)該給人明顯提示，最低要求是覆蓋剛才點(diǎn) 擊的位置，讓用戶輕松跳轉(zhuǎn)到新的界面。c.執(zhí)行動(dòng)作要提示給用戶一個(gè)視覺感受的同時(shí)，寫程序的時(shí)候應(yīng)該注意用戶的交互感受，UI作為人機(jī)對(duì)話的工具，用戶做了任何動(dòng)作，應(yīng)該給用戶一個(gè)視覺或者聽覺、觸覺提示。 而且這個(gè)提示應(yīng)該行明顯，但不應(yīng)提示過長(zhǎng)，可以有以下幾種方法： 當(dāng)

16、用戶點(diǎn)擊按鈕等動(dòng)作進(jìn)行一個(gè)工作時(shí)：1:彈出交互對(duì)話框讓用戶點(diǎn)擊確認(rèn)。2:改變UI中控件參數(shù)提示：(處理不用用戶確認(rèn)的提示，有一定延時(shí)，或者用戶按鍵后自動(dòng)清除。）如：改變標(biāo)題欄字符串，顯示“信息：提交成功”，或者專門設(shè)置一個(gè)狀態(tài)欄、 TLable等用來進(jìn)行提示。3:聽覺提示：在確定有聲卡，用戶可以聽到聲音的時(shí)候，發(fā)出特殊聲音提示。一般作為重要提 示的輔助。聲音不應(yīng)過長(zhǎng)，緊急錯(cuò)誤提示應(yīng)該短促，頻率較高，成功提示應(yīng)該舒 緩，輕松。等等（8） （HELP）聯(lián)機(jī)幫助：明確什么時(shí)候要幫助，什么時(shí)候不要幫助a.系統(tǒng)默認(rèn)、行業(yè)標(biāo)準(zhǔn)的控件操作不需要逐一描述，只需要對(duì)特殊控件加以描述b.特殊操作、特殊功能界面，在

17、界面上加控件直接連接到對(duì)應(yīng)的 HELP文件中 c.特殊設(shè)置詳細(xì)，應(yīng)該在界面上用簡(jiǎn)潔明了的語句說明，或者是好用 Tiptool , 并由第二步幫助幫助文檔：結(jié)構(gòu)化，按功能模塊劃分必須闡述功能通過什么方法可以在軟件中實(shí)現(xiàn)幫助文件是幫助用戶更好的使用軟件，措辭要恰當(dāng)、簡(jiǎn)捷、通俗易懂，每一句話都應(yīng)該有目的，幫用戶解決問題幫助文件不是廣告、商業(yè)軟件不允許打廣告。描述公司信息目的是為了方便用戶 在沒有辦法的情況下找到售后支持，網(wǎng)址連接、信箱地址、電話號(hào)碼絕對(duì)不允許 無效。（9）發(fā)行時(shí)闡明規(guī)則對(duì)統(tǒng)一的東西進(jìn)行逐一闡述，并加以典型描述，放入 HELP和用戶手冊(cè)中，同 時(shí)加有詞匯表2.5 界面設(shè)計(jì)樣式a.登錄界

18、面（此處加入登陸界面圖）標(biāo)簽欄形式（此處加b.系統(tǒng)功能布局菜單形式（此處加入界面圖）入界面圖）c.錄入界面（此處加入界面圖）d.查詢界面（此處加入界面圖）e.統(tǒng)計(jì)界面（此處加入界面圖）2.6 常見提示信息樣式a.當(dāng)操作會(huì)帶來嚴(yán)重后果時(shí)（默認(rèn)按鈕為 否）'（此處加入界面圖）b.當(dāng)操作會(huì)帶來一定后果時(shí)（默認(rèn)按鈕為 否c.當(dāng)需征求操作者意愿時(shí)（默認(rèn)按鈕為是（此處加入界面圖）（此處加入界面圖）d.當(dāng)需提供操作者幫助時(shí)e.當(dāng)操作者操作有錯(cuò)時(shí)f.當(dāng)是一般提示時(shí)2.7 常見錯(cuò)誤信息樣式2.8 常見錯(cuò)誤信息樣式（此處加入界面圖）（此處加入界面圖）（此處加入界面圖）（此處加入界面圖）（此處加入界面圖）常

19、見圖標(biāo)設(shè)計(jì)制作規(guī)范界面的圖標(biāo)設(shè)計(jì)規(guī)范 圖標(biāo)樣式應(yīng)該有趣、色彩豐富且充滿活力，因?yàn)楝F(xiàn)在的系 統(tǒng)支持圖標(biāo)是32位圖標(biāo)，并且邊緣非常平滑。在矢量程序中繪制完每個(gè)圖標(biāo)后， 再用Adobe Photoshop進(jìn)行處理可使圖像更加完美。豐富的矢量和3D軟件經(jīng)驗(yàn)的圖形設(shè)計(jì)者才能制作出漂亮且能表達(dá)出主題的圖標(biāo)。結(jié)合經(jīng)典的WindowsXP圖標(biāo)的樣式，分析揣摩后才能為創(chuàng)建圖標(biāo)做好準(zhǔn)備。圖標(biāo)樣式特性：a.色彩豐富，是對(duì)WindowsXP外觀的補(bǔ)充。b.不同的角度和透視特性為圖像增添了動(dòng)態(tài)活力。c.元素的邊角十分柔和，并略微有些圓滑。d.光源位于圖標(biāo)的左上角，同時(shí)有環(huán)繞光照亮圖標(biāo)的其它部分。e.漸變效果使圖標(biāo)具有立

20、體感，進(jìn)而使圖標(biāo)的外觀更加豐滿。f.投影使圖標(biāo)更具對(duì)比度和立體感。g.添加輪廓可使圖像更清晰。h.日常對(duì)象（如計(jì)算機(jī)和設(shè)備）具有更現(xiàn)代化的個(gè)人外觀。圖標(biāo)尺寸Windows XP圖標(biāo)有四種尺寸，建議使用以下四種尺寸:48 48像素 （2） 32 32像素 （3） 24 24像素 （4） 16 16像素 圖標(biāo)色 彩深度支持WindowsXP支持32位圖標(biāo)。32位圖標(biāo)為24位圖像加上8位alpha通道。使圖標(biāo)邊緣非常平滑，且與背景相融合。每個(gè) WindowsXP圖標(biāo)應(yīng)包含以下三種 色彩深度，以支持不同的顯示器顯示設(shè)置：24位圖像加上8位alpha通道（32位）8位圖像（256色），加上1位透明色4位

21、圖像（16色），加上1位透明色 調(diào)色板 圖標(biāo)中使用的主要顏色。對(duì)象的角度和分組WindowsXP樣式圖標(biāo)使用的透視網(wǎng)格：并非所有對(duì)象使用 16X6的復(fù)雜圖像都 能獲得較好效果。某些對(duì)象通常以直觀圖像顯示：文檔圖標(biāo)、符號(hào)圖標(biāo)（如警告或信息圖標(biāo)）、單一對(duì)象圖標(biāo)（如放大鏡）除非創(chuàng)建重疊輔助對(duì)象可以更清楚地表 達(dá)圖標(biāo)的含義，否則就可讀性和完整性而言，還是應(yīng)使用直觀圖像。還應(yīng)考慮如 何按組查看圖標(biāo)，以便確定如何將對(duì)象分組。投影：使用投影后，WindowsXP圖標(biāo)將更清晰且更具立體感?？稍?Photoshop 中實(shí)現(xiàn)這種效果，若要為圖像添加投影，請(qǐng)?jiān)?Photoshop中雙擊圖像的圖層，并 選擇Drop

22、Shadow。然后將Angle更改為135, Distance更改為2, Size更改為2。 此時(shí)投影為75%不透明黑色。輪廓：繪制XP樣式圖標(biāo)時(shí)，為圖像添加輪廓可使之更清晰，并可保證圖像在不 同背景色上都具有較好效果。概念設(shè)計(jì)圖標(biāo)時(shí)，請(qǐng)考慮以下因素：使用已有概念以確保真實(shí)表達(dá)了用戶的想法。 考慮圖標(biāo)在用戶界面環(huán)境中以何種形式出現(xiàn)，以及如何作為圖標(biāo)集的一部分使 用。考慮圖形的文化背景。避免在圖標(biāo)中使用字母、單詞、手或臉。必須用圖標(biāo) 表示人或用戶時(shí)，請(qǐng)盡可能使其大眾化。如果圖標(biāo)中的圖像由多個(gè)對(duì)象組成， 應(yīng) 考慮如何使圖像尺寸更小。建議在圖標(biāo)中使用的對(duì)象不超過三個(gè)。對(duì)于16M6的尺寸大小，還可考慮

23、刪除某些對(duì)象或簡(jiǎn)化圖像使之更容易辨認(rèn)。透明工具，將Gif Movie Gear（GMG）打開一個(gè)對(duì)話框，其中顯示您的圖標(biāo)。使用 吸管工具單擊圖標(biāo)的背景色。此顏色將更改為暗黃綠色（或在GMG中選作透明背景色的顏色）。重復(fù)所有4位和8位幀。若要保存圖標(biāo)，請(qǐng)選擇File->Save IconAs。創(chuàng)建工具欄圖標(biāo)，Windows工具欄圖標(biāo)除不使用投影之外，使用的樣式與其它圖 標(biāo)相同。由于工具欄圖標(biāo)非常小，建議使用簡(jiǎn)單的圖像。如果以直觀方式顯示圖 像即可清晰地表達(dá)圖標(biāo)的含義，則不必使用其它復(fù)雜方式。創(chuàng)建AVIWindowsXP使用8位AVI。創(chuàng)建.avi文件的過程與創(chuàng)建圖標(biāo)的過程相同-在 Phot

24、oshop中準(zhǔn)備圖像，然后將其拖動(dòng)到GMG中。請(qǐng)按以下指導(dǎo)創(chuàng)建8位圖標(biāo)。 若要使用GMG保存AVI ,請(qǐng)轉(zhuǎn)至File->Export As->AVI file 。 創(chuàng)建.avi文件 時(shí)，請(qǐng)考慮以下因素：使用品紅（R255 G0 B255淮為背景透明色。在 Photoshop 中，重要的一點(diǎn)是不要出現(xiàn)雜散像素軟件界面設(shè)計(jì)的基本原則我們做界面設(shè)計(jì)的目的是去給用戶的工作積極的支持而不是相反把無意義的東西強(qiáng)加于人。界面在用戶和 他們要完成的任務(wù)之間應(yīng)該是透明的，而且是高效、舒適、讓人心情愉悅的。下面介紹的是幾個(gè)保證軟件 界面設(shè)計(jì)成功的基本原則。簡(jiǎn)單：不要在功能的可用性上妥協(xié)保持界面簡(jiǎn)潔直觀

25、。用戶需要易于理解和操作的功能。在一個(gè)組織糟糕的界面上，用戶被大量高級(jí)功能 所困擾，而無法直接的去使用最常用的功能。而一個(gè)組織有序的界面會(huì)把用戶要完成的任務(wù)結(jié)合到背景中 去，讓用戶能更有效的操作。最基本的功能應(yīng)該讓人可以立刻看到，而那些高級(jí)功能對(duì)于新用戶來說可以不那么明顯。只有經(jīng)過任務(wù) 分析而確定的必要的功能才應(yīng)該被放到界面上。要讓用戶盡可能的使用最少的功能，經(jīng)過最少的步驟完成 他們的任務(wù)。支持：把控制權(quán)交給用戶并且提供提示性幫助把系統(tǒng)的控制權(quán)交給用戶，允許他們使用在日常生活中習(xí)慣的各種步驟完成他們的任務(wù)，不要用你主張 的所謂正確”的操作步驟去人為的限制用戶的操作。系統(tǒng)應(yīng)該允許用戶建立并且維護(hù)

26、自己的工作環(huán)境。系統(tǒng)的當(dāng)前狀態(tài)和能夠被使用的操作應(yīng)該有明確的標(biāo) 示。系統(tǒng)應(yīng)該允許用戶離開，并為他們保留離開時(shí)的工作狀態(tài)。提供有關(guān)聯(lián)的工作環(huán)境會(huì)使用戶對(duì)系統(tǒng)有 穩(wěn)定的感覺。大部分用戶都需要完成很多任務(wù)，在某些方面他們可能是專家，但在另外的方面，他們則可能是個(gè)新手C 要做到在用戶需要的時(shí)候能及時(shí)提供幫助，系統(tǒng)就應(yīng)該理解并預(yù)計(jì)到用戶的目的，然后再協(xié)助他們更輕松 的完成任務(wù)。理想的幫助系統(tǒng)應(yīng)該教給用戶能夠快速完成任務(wù)的知識(shí)。幫助系統(tǒng)應(yīng)該在用戶選擇要獨(dú)立完 成一些任務(wù)的時(shí)候教會(huì)他們。相似：建立在用戶已有的經(jīng)驗(yàn)上允許用戶根據(jù)以往的經(jīng)驗(yàn)操作系統(tǒng)，特別是他們從現(xiàn)實(shí)世界中獲得的經(jīng)驗(yàn)。這些經(jīng)驗(yàn)的一小部分，被引 用

27、到交互界面中來，也將對(duì)用戶完成大量的任務(wù)有很大幫助。通過一次學(xué)習(xí)獲得的概念和技術(shù)應(yīng)該能被應(yīng) 用在各種環(huán)境下。用戶不應(yīng)該為完成相似的任務(wù)而去學(xué)習(xí)新的東西。在交互界面中采用用戶已經(jīng)在現(xiàn)實(shí)世 界里學(xué)到的概念和技術(shù)，可以讓他們立刻在計(jì)算機(jī)上開始工作并確保進(jìn)展順利。隱喻的技巧曾經(jīng)被用來讓計(jì)算機(jī)世界里的事物與現(xiàn)實(shí)世界相對(duì)應(yīng)，而在今天的界面設(shè)計(jì)中，隱喻已經(jīng)逐 漸不能滿足需要了。由于在視覺和交互技術(shù)上的進(jìn)步，交互界面日趨接近人們的真實(shí)世界，對(duì)隱喻的依賴 也越來越小了。過去，當(dāng)設(shè)計(jì)師不知道哪個(gè)方案最佳的時(shí)候總是遵循前后一致的原則。選擇用戶已經(jīng)理解的事物，保持 概念的前后一致，也能夠讓界面更容易學(xué)習(xí)，更有效率，甚

28、至更讓用戶心情舒暢。要避免盲目的遵循一致性原則而忽略了去了解你的用戶以及他們的任務(wù)和經(jīng)驗(yàn)。決定新的系統(tǒng)在哪些方 面同以前保持一致性的之前，先去了解一下用戶的需要，看看他們期望保留些什么東西。確保用戶在新的 系統(tǒng)里有似曾相識(shí)的感覺才是設(shè)計(jì)一個(gè)真正直觀的交互界面根本的目的。顯而易見：讓對(duì)象和操作都直觀可見只要有可能，就要使交互界面表現(xiàn)的和真實(shí)世界一樣。模仿真實(shí)世界和自然直接的交互方式能讓交互界 面更加直觀，更易學(xué)易用。利用用戶在計(jì)算機(jī)領(lǐng)域外的經(jīng)驗(yàn)的最早嘗試是使用圖標(biāo)和窗口系統(tǒng)。在我們逐 漸趨向用真實(shí)世界的表示方法的時(shí)候，那些古老的表現(xiàn)方法將消失。在一個(gè)面向?qū)ο蟮慕换ソ缑嫔?，展現(xiàn) 給用戶的對(duì)象和概念

29、都是與真實(shí)世界相同的。例如我們的操作系統(tǒng)所提供的回收站”，我們可以把沒用的東西 扔”到里面。對(duì)我們來說，它更象一個(gè)真實(shí)的垃圾筐而不僅僅是一個(gè)抽象的容器。在需要的時(shí)候，我 們甚至可以查看回收站”里面都扔了些什么。對(duì)系統(tǒng)的控制應(yīng)該明晰可見，而且各種功能也應(yīng)該是明確的。對(duì)控制的可視化表現(xiàn)能夠幫助用戶理解操 作規(guī)則，記住任務(wù)的步驟并且知道計(jì)算機(jī)正在做什么。例如，我們使用計(jì)算機(jī)提供的電話功能的時(shí)候，電 話鍵盤的圖象明白的告訴我們可以象用真實(shí)的電話鍵盤一樣使用它們。允許用戶直接去操作對(duì)象，盡量減少間接的操作步驟。識(shí)別并使用一個(gè)物體，在真實(shí)世界中不是被分開 的步驟。同樣的在計(jì)算機(jī)的操作中也沒有必要把選擇對(duì)象

30、的步驟獨(dú)立出來，因?yàn)檫x擇的動(dòng)作已經(jīng)包含在拿 起的動(dòng)作中了。三維圖象的界面更容易實(shí)現(xiàn)直接的操作。激勵(lì)：讓操作是可以預(yù)期的同時(shí)也是可逆的用戶對(duì)每一個(gè)操作都期望得到預(yù)期的結(jié)果。為了符合這些期望，設(shè)計(jì)師必須理解用戶的任務(wù)、目的和思 維模式。使用用戶熟悉的術(shù)語和圖形，從而幫助用戶弄明白計(jì)算機(jī)中的對(duì)象以及其間的相互關(guān)系和規(guī)則。用戶在進(jìn)行一些嘗試性操作的時(shí)候應(yīng)該充滿信心，他們知道自己可以去試著做些什么，然后就能看到結(jié) 果，如果結(jié)果不滿意還可以取消這個(gè)操作。使用一個(gè)允許把錯(cuò)誤操作撤消的界面，會(huì)讓用戶感覺很好。即使是看上去最瑣碎的操作，例如撤消選擇或者移動(dòng)對(duì)象，也應(yīng)該是可逆的。想象一下，當(dāng)你花了幾分 鐘的時(shí)間精

31、心選擇了一些文件，正準(zhǔn)備把它們打包的時(shí)候丟掉了選擇，而這個(gè)操作又無法撤消，你會(huì)有什 么樣的沮喪心情。避免一次完成不同的操作，因?yàn)橛脩粢苍S并不清楚那些副作用。例如，如果一個(gè)用戶選擇了取消發(fā)送短 信的操作，那么僅是發(fā)送的操作應(yīng)該被取消，而不會(huì)附帶著類似刪除短信等其他操作。把各個(gè)操作分開， 而允許用戶自己去定義操作的批處理。滿足：創(chuàng)造一個(gè)有進(jìn)展和成就的良好感覺讓用戶能不斷的取得進(jìn)展并有成就感。對(duì)用戶的操作要立刻作出反應(yīng)，任何延遲都會(huì)干擾用戶的工作， 降低用戶對(duì)系統(tǒng)的信心。及時(shí)的反饋可以讓用戶知道結(jié)果是否正確，并能夠隨時(shí)改變操作。例如，用戶選 擇了一種新字體，使用這種字體的地方或者文字的樣例應(yīng)該馬上改

32、變。然后用戶就可以知道他的選擇是否 恰當(dāng)，如果不恰當(dāng)，則可以馬上更換。在用戶使用一個(gè)不方便撤消的操作之前，要提供對(duì)操作結(jié)果的預(yù)覽。例如，用戶想在文檔的一些地方使 用加粗、有下劃線的黑體字。預(yù)先在文檔的某個(gè)部分示范這種變化，可以讓用戶決定是否執(zhí)行操作。這樣 一來，可以為用戶節(jié)約很多時(shí)間，而且增強(qiáng)了用戶對(duì)系統(tǒng)的信心。避免讓用戶工作環(huán)境的信息得不到更新。信息應(yīng)該不斷刷新，以便用戶能及時(shí)得作出正確的判斷。如果 結(jié)果不能立刻被顯示出來，那么系統(tǒng)的工作狀態(tài)也要通知用戶。這一點(diǎn)在網(wǎng)絡(luò)環(huán)境中特別重要，因?yàn)槭軒?寬的限制在不同的網(wǎng)絡(luò)系統(tǒng)中保持動(dòng)態(tài)同步是比較困難的。例如，大部分瀏覽器都會(huì)在載入頁(yè)面的過程中 顯示一

33、個(gè)完成進(jìn)度條。有效：讓每一個(gè)對(duì)象在任何時(shí)刻都能用用戶應(yīng)該能夠在任何時(shí)刻都可以使用他們的每一個(gè)對(duì)象。要避免模式化的操作，那種曾經(jīng)通用的操作方 式已經(jīng)不應(yīng)該再發(fā)揮作用了。模式化限制了用戶和系統(tǒng)的交互。例如，在大多數(shù)菜單驅(qū)動(dòng)的系統(tǒng)中，都有一種模式對(duì)話框（類似打印或者 另存為”）需要輸入一些參數(shù)。這種對(duì)話框把用戶鎖在了系統(tǒng)的外面，如果用戶想繼續(xù)操作，那他必 須先選擇 確定”或 取消如果用戶想先查看下面窗口里的內(nèi)容再完成這個(gè)對(duì)話框，他就不得不先取消這 個(gè)對(duì)話框，否則他無法激活其他窗口。安全：讓用戶遠(yuǎn)離麻煩應(yīng)該讓用戶盡量避免發(fā)生錯(cuò)誤。使用戶遠(yuǎn)離麻煩的重?fù)?dān)壓在了設(shè)計(jì)師的肩上。交互界面應(yīng)該提供視覺指 引、提示

34、、選擇列表和其他的輔助，無論是自動(dòng)的還是被人要求的。上下文的關(guān)聯(lián)和浮動(dòng)的幫助都可以象 一個(gè)助手一樣協(xié)助用戶完成任務(wù)。即使最簡(jiǎn)單的提示也可以減少用戶出麻煩的機(jī)會(huì)。系統(tǒng)已經(jīng)知道的事情就不要讓用戶依賴自己的記憶，比如，上一次的配置，文件名或者其他的一些細(xì)節(jié)。 如果這些信息被保存在系統(tǒng)里面，無論是什么樣的形式，系統(tǒng)都應(yīng)該把它們提供出來。當(dāng)用戶需要確認(rèn)請(qǐng)求或者修正錯(cuò)誤的時(shí)候，雙向的溝通是很必要的。在過去，很多交互界面僅用單向的 溝通，計(jì)算機(jī)對(duì)用戶，來處理這類問題。但溝通應(yīng)該是交互式的，就象交互界面在其他方面做到的那樣， 要有豐富的表現(xiàn)和交流方式。系統(tǒng)應(yīng)該顯示相應(yīng)的信息，并且提供查閱其他相關(guān)信息或者幫助的途徑。例 如，被設(shè)計(jì)在很多系統(tǒng)中的拼寫檢查功能，用戶工作的同時(shí)，可能拼寫錯(cuò)誤的單詞被標(biāo)示出來，系統(tǒng)允許 用戶立刻換一個(gè)單詞，或者當(dāng)他們的工作告一段落的時(shí)候，再回過頭來處理這些可能的錯(cuò)誤。記住下面的設(shè)計(jì)觀點(diǎn)：用戶知道自己想做什么，但有時(shí)他們發(fā)現(xiàn)使用現(xiàn)有的操作很難讓系統(tǒng)明白他們的 意圖。這時(shí)，雙向的溝通方式就能幫助用戶