1、GUI視覺設(shè)計第1頁，共185頁。第2頁，共185頁。第3頁，共185頁。平衡原則預(yù)期原則經(jīng)濟(jì)原則順序原則規(guī)則化第4頁，共185頁。平衡原則 注意屏幕上下左右平衡。不要堆擠數(shù)據(jù)， 過分擁擠的顯示會產(chǎn)生視覺疲勞和接收錯誤。第5頁，共185頁。第6頁，共185頁。預(yù)期原則 屏幕上所有對象，如窗口、按鈕、菜單等處理應(yīng)一致化，使對象的動作可預(yù)期。第7頁，共185頁。第8頁，共185頁。順序原則 對象顯示的順序應(yīng)依需要排列。通常應(yīng)最先出現(xiàn)對話，然后通過對話將系統(tǒng)分段實現(xiàn)。第9頁，共185頁。第10頁，共185頁。規(guī)則化 畫面應(yīng)對稱，顯示命令、對話及提示行在一個應(yīng)用系統(tǒng)的設(shè)計中盡量統(tǒng)一規(guī)范。第11頁，共1

2、85頁。第12頁，共185頁。要注意用語簡潔性格式信息內(nèi)容第13頁，共185頁。要注意用語簡潔性避免使用計算機專業(yè)術(shù)語；盡量用肯定句而不要用否定句；用主動語態(tài)而不用被動語態(tài)；用禮貌而不過分的強調(diào)語句進(jìn)行文字會話；英文詞語盡量避免縮寫；在按鈕，功能鍵標(biāo)示中應(yīng)盡量使用描述動作的動詞；在文字較長時，可用壓縮法減少字符數(shù)或采用一些編碼方法。第14頁，共185頁。格式 在屏幕顯示設(shè)計中，一幅畫面不要文字太多，若必須有較多文字時，盡量分組分頁，在關(guān)鍵詞處進(jìn)行加粗、變字體等處理，但同行文字盡量字型統(tǒng)一。英文詞除標(biāo)語外，盡量采用小寫和易認(rèn)的字體。第15頁，共185頁。第16頁，共185頁。第17頁，共185頁

3、。信息內(nèi)容 信息內(nèi)容顯示不僅采用簡潔、清楚的表達(dá)，還應(yīng)采用用戶熟悉的簡單句子，盡量不用左右滾屏。當(dāng)內(nèi)容較多時，應(yīng)以空白分段或以小窗口分塊，以便記憶和理解。重要字段可用粗體和閃爍吸引注意力和強化效果，強化效果有多樣，針對實際進(jìn)行選擇。第18頁，共185頁。第19頁，共185頁。限制同時顯示的顏色數(shù)。一般同一畫面不宜超過4或5種，可用不同層次及形狀來配合顏色，增加變化。畫面中活動對象顏色應(yīng)鮮明，而非活動對象應(yīng)暗淡盡量避免不兼容的顏色放在一起，如黃與藍(lán)，紅與綠等，除非作對比時用。若用顏色表示某種信息或?qū)ο髮傩?，要使用戶懂得這種表示，且盡量用常規(guī)準(zhǔn)則表示。第20頁，共185頁。圖標(biāo)設(shè)計ICON第21頁

4、，共185頁。圖標(biāo)設(shè)計第22頁，共185頁。第23頁，共185頁。第24頁，共185頁。第25頁，共185頁。第26頁，共185頁。第27頁，共185頁。第28頁，共185頁。第29頁，共185頁。第30頁，共185頁。第31頁，共185頁。第32頁，共185頁。第33頁，共185頁。第34頁，共185頁。第35頁，共185頁。第36頁，共185頁。第37頁，共185頁。圖標(biāo)設(shè)計圖標(biāo)是一個極度限制中的設(shè)計1、尺寸1616 3232 4848 6464 9696 128128第38頁，共185頁。2、顏色的數(shù)量 1bit黑白兩色 2bit4色 4bit16色 索引色 8bit256色 24bit

5、 真彩色 32bit 24位圖像加上8位的alpha通道，8位alpha 通道產(chǎn)生的有明度色階的蒙版，能夠產(chǎn)生半透明的效果，使圖標(biāo)邊緣非常平滑，且與背景融合。 第39頁，共185頁。3、圖標(biāo)的傾斜 我們可以看到許多不同系統(tǒng)的圖標(biāo)使用了不同的傾斜.第40頁，共185頁。4、風(fēng)格 早期的圖標(biāo)很抽象，現(xiàn)在則是在“抽象和具體”之間不斷平衡。第41頁，共185頁。圖標(biāo)的隱喻1.圖標(biāo)的隱喻：圖標(biāo)的功用在于建立起計算機世界與真實世界的一種隱喻，或者映射關(guān)系。用戶通過這種隱喻，自動地理解圖標(biāo)背后的意義，跨越了語言的界限。第42頁，共185頁。2.隱喻的優(yōu)點： a 易識別 b 易記憶 c 跨文化第43頁，共18

6、5頁。第44頁，共185頁。第45頁，共185頁。第46頁，共185頁。第47頁，共185頁。第48頁，共185頁。第49頁，共185頁。第50頁，共185頁。第51頁，共185頁。第52頁，共185頁。第53頁，共185頁。第54頁，共185頁。第55頁，共185頁。第56頁，共185頁。王羲之-蘭亭序第57頁，共185頁。張旭論書貼草書墨跡，紙本，縱38.5厘米，橫40.5厘米，9行，共85字 第58頁，共185頁。第59頁，共185頁。第60頁，共185頁。第61頁，共185頁。第62頁，共185頁。第63頁，共185頁。第64頁，共185頁。第65頁，共185頁。第66頁，共185頁。

7、2004年 希臘雅典2000年悉尼1996年亞特蘭大第67頁，共185頁。2008 祥云第68頁，共185頁。圖標(biāo)的設(shè)計過程第一階段：圖標(biāo)創(chuàng)意階段a確定圖標(biāo)的風(fēng)格 b理解功能需求后，收集關(guān)于“詞語圖形”之間能轉(zhuǎn)化的元素，用生活中的物或其他視覺產(chǎn)品來代替所要表達(dá)的功能信息、或操作提示。例如音樂：我們會想到，音符、光盤、音樂播放機、耳機等等。c在視覺審美和可用性、功能性中取得平衡 第69頁，共185頁。草圖第70頁，共185頁。第二階段設(shè)計制作：拋開技術(shù)不談，圖標(biāo)設(shè)計有 3 點是非常重要的：創(chuàng)意，細(xì)節(jié)，整體性 第71頁，共185頁。iconfactory的pixelpalooza2004圖標(biāo)大賽競

8、賽獲獎作品1.創(chuàng)意：一個好的出發(fā)點或角度能讓你的圖標(biāo)與眾不同，脫穎而出。第72頁，共185頁。2. 細(xì)節(jié)：也許你的圖標(biāo)再加上這一點就能變成一流的。 1 處的凹陷的質(zhì)感：2 3 處的面的漸變：4 處的漸變以及若隱若現(xiàn)的電路：5 處的凹陷的線條：6 處的反光：第73頁，共185頁。3. 整體性 思考： 如何才能讓一組圖標(biāo)保持整體性？第74頁，共185頁。第75頁，共185頁。第76頁，共185頁。第77頁，共185頁。第78頁，共185頁。第79頁，共185頁。第80頁，共185頁。第81頁，共185頁。第82頁，共185頁。使用Illustrator創(chuàng)建圖標(biāo)的詳細(xì)過程第83頁，共185頁。第84

9、頁，共185頁。第85頁，共185頁。第86頁，共185頁。第87頁，共185頁。第88頁，共185頁。第89頁，共185頁。第90頁，共185頁。第91頁，共185頁。第92頁，共185頁。第93頁，共185頁。第94頁，共185頁。第95頁，共185頁。第96頁，共185頁。第97頁，共185頁。第98頁，共185頁。第99頁，共185頁。第100頁，共185頁。第101頁，共185頁。第102頁，共185頁。第103頁，共185頁。第104頁，共185頁。第105頁，共185頁。第106頁，共185頁。第107頁，共185頁。第108頁，共185頁。第109頁，共185頁。第110頁，共

10、185頁。第111頁，共185頁。第112頁，共185頁。第113頁，共185頁。第114頁，共185頁。第115頁，共185頁。第116頁，共185頁。第117頁，共185頁。第118頁，共185頁。第119頁，共185頁。第120頁，共185頁。第121頁，共185頁。第122頁，共185頁。第123頁，共185頁。第124頁，共185頁。第125頁，共185頁。第126頁，共185頁。第127頁，共185頁。第128頁，共185頁。作業(yè)：設(shè)計一組圖標(biāo)或者qq表情頭像（8個）我的電腦、回收站、文本、文件夾、音樂、視頻、游戲、網(wǎng)絡(luò) 要求：1.收集整理的資料（包括文字和圖形） 2.草圖3張（A

11、4） 3.圖標(biāo)設(shè)計作品1張（A4 注意版式） 4.一份簡短的設(shè)計說明第129頁，共185頁。第130頁，共185頁。軟件界面設(shè)計是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對軟件的使用界面進(jìn)行美化、優(yōu)化、規(guī)范化的設(shè)計分支。 第131頁，共185頁。第132頁，共185頁。第133頁，共185頁。第134頁，共185頁。第135頁，共185頁。具體包括： 軟件啟動封面設(shè)計/軟件框架設(shè)計 / 按鈕設(shè)計/面板設(shè)計/菜單設(shè)計/ 標(biāo)簽設(shè)計/圖標(biāo)設(shè)計/滾動條及狀態(tài)欄設(shè)計/ 安裝過程設(shè)計 /包裝及商品化 第136頁，共185頁。圖標(biāo)設(shè)計色彩不宜超過64色，大小為16x16、32x32兩種，圖標(biāo)設(shè)計是方寸藝術(shù)，應(yīng)

12、該加以著重考慮視覺沖擊力，它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計師在設(shè)計圖標(biāo)時使用簡單的顏色，利用眼睛對色彩和網(wǎng)點的空間混合效果，做出了許多精彩圖標(biāo)。第137頁，共185頁。高清晰度的圖像安全色大小適中整體設(shè)計的統(tǒng)一和延續(xù)性品牌標(biāo)識：公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱，版本號，網(wǎng)址，版權(quán)聲明，序列號等 第138頁，共185頁。第139頁，共185頁。第140頁，共185頁。第141頁，共185頁。第142頁，共185頁。在和軟件產(chǎn)品的程序開發(fā)員及程序使用對象進(jìn)行共同溝通，以設(shè)計出友好的，獨特的，符合程序開發(fā)原則的軟件框架，符合視覺流程和用戶使用心理。第143頁，共185頁。第144頁，

13、共185頁。軟件按鈕設(shè)計應(yīng)該具有交互性，即應(yīng)該有3到6種狀態(tài)效果：點擊時狀態(tài)；鼠標(biāo)放在上面但未點擊的狀態(tài)；點擊前鼠標(biāo)未放在上面時的狀態(tài)；點擊后鼠標(biāo)未放在上面時的狀態(tài)；不能點擊時狀態(tài)；獨立自動變化的狀態(tài)。按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。 第145頁，共185頁。軟件面板設(shè)計應(yīng)該具有縮放功能，面板應(yīng)該對功能區(qū)間劃分清晰，應(yīng)該和對話框，彈出框等風(fēng)格匹配，盡量節(jié)省空間，切換方便。 第146頁，共185頁。軟件界面第147頁，共185頁。菜單設(shè)計一般有選中狀態(tài)和未選中狀態(tài)，左邊應(yīng)為名稱，右邊應(yīng)為快捷鍵，如果有下級菜單應(yīng)該有下

14、級箭頭符號，不同功能區(qū)間應(yīng)該用線條分割。第148頁，共185頁。第149頁，共185頁。第150頁，共185頁。標(biāo)簽設(shè)計應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參考按鈕。第151頁，共185頁。滾動條主要是為了對區(qū)域性空間的固定大小中內(nèi)容量的變換進(jìn)行設(shè)計，應(yīng)該有上下箭頭，滾動標(biāo)等，有些還有翻頁標(biāo)。狀態(tài)欄是為了對軟件當(dāng)前狀態(tài)的顯示和提示。第152頁，共185頁。最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)品，功能的宣傳融合于美觀中，可以印刷部分產(chǎn)品介紹，產(chǎn)品界面設(shè)計。第153頁，共185頁。軟件包裝第154頁，共185頁。第155頁，共185頁。界面效果的整體性、一致性 界面效果的個性化 界面視覺元素的規(guī)范第1

15、56頁，共185頁。界面的色彩及風(fēng)格與系統(tǒng)界面統(tǒng)一 操作流程的系統(tǒng)化 第157頁，共185頁。特有的界面構(gòu)架專用的界面圖標(biāo)界面色彩的個性化設(shè)置第158頁，共185頁。圖形圖像元素的質(zhì)量線條色塊與圖形圖像的結(jié)合第159頁，共185頁。手機界面第160頁，共185頁。第161頁，共185頁。電視菜單界面第162頁，共185頁。第163頁，共185頁。第164頁，共185頁。網(wǎng)站頁面第165頁，共185頁。第166頁，共185頁。第167頁，共185頁。第168頁，共185頁。第169頁，共185頁。第170頁，共185頁。第171頁，共185頁。3C原則 Concision(簡潔) Coheren

16、ce(一致性) Contrast(對比度)第172頁，共185頁。醒目的標(biāo)題。這個標(biāo)題常常采用圖形來表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字體和顏色的數(shù)目。一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于256種。頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用途。不要試圖用無關(guān)的圖片把頁面裝點起來，初學(xué)者容易犯的一個錯誤是把頁面搞的花里呼哨，卻不能讓別人明白他到底要突出表達(dá)的是什么內(nèi)容，主題和意念。第173頁，共185頁。排版。各個頁面使用相同的頁邊距，文本，圖形之間保持相同的間距；主要圖形，標(biāo)題或符號旁邊留下相同的空白；如果在第一頁的頂部放置了公司標(biāo)志，那么在其他各頁面都放上這一標(biāo)志；如果使用圖標(biāo)導(dǎo)航，則各個頁面應(yīng)當(dāng)使用相同的圖標(biāo)。第174頁，共185頁。圖片圖標(biāo)風(fēng)格。所有的圖標(biāo)都應(yīng)當(dāng)彩相同的設(shè)計風(fēng)格，比如全部采用圖象的線條剪輯畫或全部使用寫實的照片等。第175頁，共185頁。字體和顏色。文字的顏色要同圖像的