微軟軟件界面設(shè)計(jì)規(guī)范

-.z.假設(shè)你在Windows環(huán)境下開發(fā)，微軟定義了一套稱為"用戶體驗(yàn)〞的參考標(biāo)準(zhǔn)〔當(dāng)然，"用戶體驗(yàn)〞的內(nèi)容已經(jīng)超出了狹義的"用戶界面〞〕。這個(gè)標(biāo)準(zhǔn)對(duì)菜單、按鈕、圖標(biāo)、窗體、快捷鍵、消息框和文本等界面元素的設(shè)計(jì)，給出了一整套建議。倘假設(shè)不是編寫游戲之類的東西，就沒有理由不參照這個(gè)標(biāo)準(zhǔn)。以下是我見過的一些糟糕的用戶界面風(fēng)格：過份使用各種奇形怪狀、五顏六色的控件。這些界面往往出自充滿激情和想法的新手。它很容易使人想起過去農(nóng)村穿著紅褂子、綠褲子的小媳婦，或者今天城市街頭畫著大花臉的扭秧歌的大媽。界面元素比例失調(diào)。我見過按鈕巨大無比，其尺寸甚至超過顯示重要內(nèi)容的文本框的界面。界面元素凌亂。比方說，按鈕和文本框擺放地點(diǎn)隨意，相當(dāng)于客廳當(dāng)臥室，衛(wèi)生間當(dāng)廚房。違背使用習(xí)慣。你按下F1，它沒有彈出幫助，卻執(zhí)行了一件絕對(duì)出乎你意料的動(dòng)作。消息框信息模糊、混亂。下面是*軟件彈出的消息框。把"確定〞和"取消〞改為"是〞和"否〞會(huì)不會(huì)更清晰一些？就事論事，假設(shè)干脆自己做個(gè)form，改成"想〞和"不想〞，那更好。還有一種糟糕的用戶界面，乍一看很厲害，實(shí)際上完全是缺乏規(guī)劃的結(jié)果。這種軟件本身確實(shí)提供了比擬復(fù)雜的功能，但對(duì)于哪些是常用功能，哪些是很少用到的高級(jí)功能，缺乏評(píng)估。什么功能都往界面上擠，占地方不說，用戶會(huì)厭煩，弄不好還會(huì)被嚇跑。對(duì)于這種軟件來說，默認(rèn)界面只應(yīng)該顯示目標(biāo)用戶最常使用的功能，至于不常用到的高級(jí)功能，可以"隱藏〞起來，比方說，放到菜單里，不要都做成按鈕擺到界面上。果真需要需要這些高級(jí)功能的話，用戶自然會(huì)到菜單里去找的。在這方面，微軟Office軟件堪稱楷模。比方Word，從編寫"代辦文憑〞這樣的電線桿上的"狗皮膏〞，到排版嚴(yán)肅的長(zhǎng)篇巨著，都游刃有余。對(duì)于低級(jí)用戶來說，它簡(jiǎn)單易用，對(duì)于高級(jí)用戶來說，要的功能都有。這個(gè)軟件界面做得就非常有水平。就象那些高級(jí)數(shù)碼相機(jī)一樣，操作之簡(jiǎn)單可以和"傻瓜〞相機(jī)媲美。按一個(gè)按鈕就可以使你心想事成，恰恰說明它聰明得可以。一句話，你愿意使用界面上擺滿了各種讓人眼花繚亂的玩意兒，左看右看也不知道從哪兒下手的軟件嗎？軟件界面設(shè)計(jì)相關(guān)的各項(xiàng)介紹界面設(shè)計(jì)是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對(duì)軟件的使用界面進(jìn)展美化優(yōu)化標(biāo)準(zhǔn)化的設(shè)計(jì)分支。具體包括軟件啟動(dòng)封面設(shè)計(jì)，軟件框架設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動(dòng)條及狀態(tài)欄設(shè)計(jì)，安裝過程設(shè)計(jì)，包裝及商品化。在設(shè)計(jì)的過程中有較多注意的關(guān)鍵問題，以以下出幾點(diǎn)：(1)軟件啟動(dòng)封面設(shè)計(jì)應(yīng)使軟件啟動(dòng)封面最終為高清晰度的圖像，如軟件啟動(dòng)封面需在不同的平臺(tái)、操作系統(tǒng)上使用將考慮轉(zhuǎn)換不同的格式，并且對(duì)選用的色彩不宜超過256色，最好為216色平安色。軟件啟動(dòng)封面大小多為主流顯示器分辨率的1/6大。如果是系列軟件將考慮整體設(shè)計(jì)的統(tǒng)一和延續(xù)性。在上面應(yīng)該醒目的標(biāo)注制作或支持的公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱，版本號(hào)，網(wǎng)址，聲明，序列號(hào)等信息，以樹立軟件形象，方便使用者或購(gòu)置者在軟件啟動(dòng)的時(shí)候得到提示。插圖宜使用具有獨(dú)立的，象征性強(qiáng)的，識(shí)別性高的，視覺傳達(dá)效果好的圖形，假設(shè)使用攝影也應(yīng)該進(jìn)展數(shù)位處理，以形成該軟件的個(gè)性化特征。(2)軟件框架設(shè)計(jì)軟件的框架設(shè)計(jì)就復(fù)雜得多，因?yàn)樯婕败浖氖褂霉δ埽瑧?yīng)該對(duì)該軟件產(chǎn)品的程序和使用比擬了解，這就需要設(shè)計(jì)師有一定的軟件跟進(jìn)經(jīng)歷，能夠快速的學(xué)習(xí)軟件產(chǎn)品，并且在和軟件產(chǎn)品的程序開發(fā)員及程序使用對(duì)象進(jìn)展共同溝通，以設(shè)計(jì)出友好的，獨(dú)特的，符合程序開發(fā)原則的軟件框架。軟件框架設(shè)計(jì)應(yīng)該簡(jiǎn)潔明快，盡量少用無謂的裝飾，應(yīng)該考慮節(jié)省屏幕空間，各種分辨率的大小，縮放時(shí)的狀態(tài)和原則，并且為將來設(shè)計(jì)的按鈕，菜單，標(biāo)簽，滾動(dòng)條及狀態(tài)欄預(yù)留位置。設(shè)計(jì)中將整體色彩組合進(jìn)展合理搭配，將軟件商標(biāo)放在顯著位置，主菜單應(yīng)放在左邊或上邊，滾動(dòng)條放在右邊，狀態(tài)欄放在下邊，以符合視覺流程和用戶使用心理。(3)軟件按鈕設(shè)計(jì)軟件按鈕設(shè)計(jì)應(yīng)該具有交互性，即應(yīng)該有3到6種狀態(tài)效果：點(diǎn)擊時(shí)狀態(tài)；鼠標(biāo)放在上面但未點(diǎn)擊的狀態(tài)；點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)；點(diǎn)擊后鼠標(biāo)未放在上面時(shí)的狀態(tài)；不能點(diǎn)擊時(shí)狀態(tài)；獨(dú)立自動(dòng)變化的狀態(tài)。按鈕應(yīng)具備簡(jiǎn)潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反響，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。(4)軟件面板設(shè)計(jì)軟件面板設(shè)計(jì)應(yīng)該具有縮放功能，面板應(yīng)該對(duì)功能區(qū)間劃分清晰，應(yīng)該和對(duì)話框，彈出框等風(fēng)格匹配，盡量節(jié)省空間，切換方便。(5)菜單設(shè)計(jì)菜單設(shè)計(jì)一般有選中狀態(tài)和未選中狀態(tài)，左邊應(yīng)為名稱，右邊應(yīng)為快捷鍵，如果有下級(jí)菜單應(yīng)該有下級(jí)箭頭符號(hào)，不同功能區(qū)間應(yīng)該用線條分割。(6)標(biāo)簽設(shè)計(jì)標(biāo)簽設(shè)計(jì)應(yīng)該注意轉(zhuǎn)角局部的變化，狀態(tài)可參考按鈕。(7)圖標(biāo)設(shè)計(jì)圖標(biāo)設(shè)計(jì)色彩不宜超過64色，大小為16*16、32*32兩種，圖標(biāo)設(shè)計(jì)是方寸藝術(shù)，應(yīng)該加以著重考慮視覺沖擊力，它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)使用簡(jiǎn)單的顏色，利用眼睛對(duì)色彩和網(wǎng)點(diǎn)的空間混合效果，做出了許多精彩圖標(biāo)。(8)滾動(dòng)條及狀態(tài)欄設(shè)計(jì)滾動(dòng)條主要是為了對(duì)區(qū)域性空間的固定大小中內(nèi)容量的變換進(jìn)展設(shè)計(jì)，應(yīng)該有上下箭頭，滾動(dòng)標(biāo)等，有些還有翻頁(yè)標(biāo)。狀態(tài)欄是為了對(duì)軟件當(dāng)前狀態(tài)的顯示和提示。(9)安裝過程設(shè)計(jì)安裝過程設(shè)計(jì)主要是將軟件安裝的過程進(jìn)展美化，包括對(duì)軟件功能進(jìn)展圖示化。(10)包裝及商品化最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)品，功能的宣傳融合于美觀中，可以印刷局部產(chǎn)品介紹，產(chǎn)品界面設(shè)計(jì)。圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)數(shù)位設(shè)計(jì)引入了一種新的圖標(biāo)設(shè)計(jì)樣式。以下是設(shè)計(jì)和創(chuàng)立樣式圖標(biāo)的具體標(biāo)準(zhǔn)。圖標(biāo)樣式應(yīng)該有趣、色彩豐富且充滿活力，因?yàn)楝F(xiàn)在的系統(tǒng)支持圖標(biāo)是32位圖標(biāo)，并且邊緣非常平滑。在矢量程序中繪制完每個(gè)圖標(biāo)后，再用AdobePhotoshop進(jìn)展處理可使圖像更加完美。本標(biāo)準(zhǔn)是專為設(shè)計(jì)者編寫的。在創(chuàng)立圖像時(shí)，建議您與高水平的圖形設(shè)計(jì)者一起工作，尤其是具有豐富的矢量和3D軟件經(jīng)歷的圖形設(shè)計(jì)者。圖標(biāo)設(shè)計(jì)概述的目的是讓您熟悉Windows*P的新樣式，為創(chuàng)立圖標(biāo)做好準(zhǔn)備。圖標(biāo)樣式特性(1)色彩豐富，是對(duì)Windows*P外觀的補(bǔ)充。(2)不同的角度和透視特性為圖像增添了動(dòng)態(tài)活力。(3)元素的邊角十分柔和，并略微有些圓滑。(4)光源位于圖標(biāo)的左上角，同時(shí)有環(huán)繞光照亮圖標(biāo)的其它局部。(5)漸變效果使圖標(biāo)具有立體感，進(jìn)而使圖標(biāo)的外觀更加飽滿。(6)投影使圖標(biāo)更具比照度和立體感。(7)添加輪廓可使圖像更清晰。(8)日常對(duì)象(如計(jì)算機(jī)和設(shè)備)具有更現(xiàn)代化的個(gè)人外觀。圖標(biāo)尺寸Windows*P圖標(biāo)有四種尺寸，建議使用以下四種尺寸：(1)48"8像素(2)32"2像素(3)24"4像素(4)16"6像素圖標(biāo)色彩深度支持Windows*P支持32位圖標(biāo)。32位圖標(biāo)為24位圖像加上8位alpha通道。使圖標(biāo)邊緣非常平滑，且與背景相融合。每個(gè)Windows*P圖標(biāo)應(yīng)包含以下三種色彩深度，以支持不同的顯示器顯示設(shè)置：24位圖像加上8位alpha通道(32位)8位圖像(256色)，加上1位透明色4位圖像(16色)，加上1位透明色調(diào)色板圖標(biāo)中使用的主要顏色。對(duì)象的角度和分組Windows*P樣式圖標(biāo)使用的透視網(wǎng)格：并非所有對(duì)象使用16"6的復(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ì)象分組。投影使用投影后，Windows*P圖標(biāo)將更清晰且更具立體感?？稍赑hotoshop中實(shí)現(xiàn)這種效果，本指南的后面局部將對(duì)此進(jìn)展描述。假設(shè)要為圖像添加投影，請(qǐng)?jiān)赑hotoshop中雙擊圖像的圖層，并選擇DropShadow。然后將Angle更改為135，Distance更改為2，Size更改為2。此時(shí)投影為75%不透明黑色。輪廓繪制*P樣式圖標(biāo)時(shí)，為圖像添加輪廓可使之更清晰，并可保證圖像在不同背風(fēng)光上都具有較好效果。概念設(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ì)于16"6的尺寸大小，還可考慮刪除*些對(duì)象或簡(jiǎn)化圖像使之更容易識(shí)別。透明工具將GifMovieGear(GMG)翻開一個(gè)對(duì)話框，其中顯示您的圖標(biāo)。使用吸管工具單擊圖標(biāo)的背風(fēng)光。此顏色將更改為暗黃綠色(或在GMG中選作透明背風(fēng)光的顏色)。重復(fù)所有4位和8位幀。假設(shè)要保存圖標(biāo)，請(qǐng)選擇File->SaveIconAs...。創(chuàng)立工具欄Windows工具欄圖標(biāo)除不使用投影之外，使用的樣式與其它圖標(biāo)一樣。由于工具欄圖標(biāo)非常小，建議您使用簡(jiǎn)單的圖像。如果以直觀方式顯示圖像即可清晰地表達(dá)圖標(biāo)的含義，則不必使用其它復(fù)雜方式。創(chuàng)立AVIWindows*P使用8位AVI。創(chuàng)立.avi文件的過程與創(chuàng)立圖標(biāo)的過程一樣-在Photoshop中準(zhǔn)備圖像，然后將其拖動(dòng)到GMG中。請(qǐng)按以下指導(dǎo)創(chuàng)立8位圖標(biāo)。假設(shè)要使用GMG保存AVI，請(qǐng)轉(zhuǎn)至File->E*portAs->AVIfile。創(chuàng)立.avi文件時(shí)，請(qǐng)考慮以下因素：使用品紅(R255G0B255)作為背景透明色。在Photoshop中，重要的一點(diǎn)是不要出現(xiàn)雜散像素。請(qǐng)將填充能力設(shè)置為0，并確認(rèn)未選中取消鋸齒。軟件人機(jī)界面UI即UserInterface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分表達(dá)軟件的定位和特點(diǎn)。美麗的事物常常會(huì)讓人無法抗拒。這就是為什么產(chǎn)品出色的外觀設(shè)計(jì)對(duì)于電腦、汽車、日用品、家具、食品、服裝等等幾乎所有商品的銷售與推廣，都有著舉足輕重的作用的原因。同樣的道理，對(duì)于軟件公司來說，軟件產(chǎn)品就是他們的商品，而軟件界面就是他們產(chǎn)品的外觀，界面的美觀與否，直接關(guān)系到了軟件產(chǎn)品的營(yíng)銷成敗。我們可以清楚地看到，微軟公司對(duì)軟件界面設(shè)計(jì)的重視。請(qǐng)回想一下您在第一次見到win2000時(shí)的情景，與nt4.0相比是否驚嘆他界面的美觀性與易用性？而您如果使用過*p系統(tǒng)，則會(huì)被其令人神奇的感官概念而震驚折服！金山公司的金山詞霸就是國(guó)內(nèi)軟件成功的例子了，從金山詞霸3.0到金山詞霸2001的變化堪稱經(jīng)典。著名的網(wǎng)頁(yè)動(dòng)畫制作軟件flash從3.0到4.0，僅僅修改了圖標(biāo)和窗體，立即大為增色…現(xiàn)今世界上成功的軟件公司都非常重視軟件界面的美化設(shè)計(jì)工作，因?yàn)樗麄兩羁痰刂?，在劇烈的市?chǎng)競(jìng)爭(zhēng)中，僅僅有強(qiáng)大的功能是遠(yuǎn)遠(yuǎn)不夠的，缺乏以戰(zhàn)勝?gòu)?qiáng)勁的對(duì)手。我們可以相象一下，您在挑選手機(jī)的時(shí)候，如果有兩款手機(jī)，性能一樣，而第一款比第二款要美觀很多，則您將選擇哪一款呢？當(dāng)然是美觀的那一款了。試想，您的客戶，也會(huì)拿您和您競(jìng)爭(zhēng)對(duì)手的軟件做這樣的比擬的。現(xiàn)在的軟件企業(yè)都知道，廣告和市場(chǎng)推銷活動(dòng)對(duì)市場(chǎng)營(yíng)銷的作用是多么的重要，并不遺余力地打廣告、做活動(dòng)、做推廣。但我們知道，這些活動(dòng)的最終目的，是為了讓用戶購(gòu)置并使用軟件產(chǎn)品，而用戶最終使用的也是您的產(chǎn)品，則為什么不在軟件界面的美觀性上多下些工夫呢？在諸如家用電器、汽車、電腦等成熟的市場(chǎng)中，用非常精巧的廣告去推廣一種功能強(qiáng)大卻丑陋無比的產(chǎn)品，是一種笑話。然而，這樣的笑話在軟件行業(yè)里卻屢見不鮮。這也是像中國(guó)足球一樣，中國(guó)軟件業(yè)與國(guó)外相比擬存在的一個(gè)很大的差距。實(shí)踐證明，各商家只要在產(chǎn)品美觀設(shè)計(jì)方面很小投入，將會(huì)有很大產(chǎn)出。其投入產(chǎn)出比，要比在功能領(lǐng)先性開發(fā)上的投入大得多。在用戶把軟件買回去后，他們和您企業(yè)的聯(lián)系，或者說您企業(yè)形象在客戶眼中的表現(xiàn)，很大一局部是通過您軟件的界面來傳達(dá)的，則美觀友好的用戶界面對(duì)于宣傳您的企業(yè)文化，對(duì)于給客戶灌輸您的企業(yè)理念，對(duì)于您企業(yè)的宣傳運(yùn)做都將是非常有益的。尤其如果您的公司做的是工程承包形式的業(yè)務(wù)，則無論是在競(jìng)標(biāo)的時(shí)候，還是在工程交付使用以后，美觀的界面都會(huì)給您的客戶以信心和良好的印象。要成為一款有競(jìng)爭(zhēng)力的軟件，不光要有強(qiáng)大的功能，也需要有一個(gè)友好的界面設(shè)計(jì)?？v觀當(dāng)今的it行業(yè)，其軟件界面設(shè)計(jì)的開展趨勢(shì)大體上有如下幾種技術(shù)：命令語(yǔ)言用戶界面的開展。根據(jù)其語(yǔ)言的特點(diǎn)，及人機(jī)交互的形式的分為形式語(yǔ)言自然語(yǔ)言。類自然語(yǔ)言。2.圖形用戶界面的廣泛應(yīng)用圖形用戶界面和人機(jī)交互過程極大地依賴視