UI界面設(shè)計講解

1、學(xué)習(xí)內(nèi)容學(xué)習(xí)內(nèi)容UIUI的概念的概念UIUI界面設(shè)計要素界面設(shè)計要素軟件界面設(shè)計軟件界面設(shè)計手機(jī)界面設(shè)計手機(jī)界面設(shè)計網(wǎng)站界面設(shè)計網(wǎng)站界面設(shè)計UIUI的本意是用戶界面的本意是用戶界面 是英文是英文用戶用戶UserUser和和 界面界面InterfaceInterface的縮寫。的縮寫。人機(jī)交互操作邏輯界面美觀衡量衡量UIUI設(shè)計設(shè)計的的標(biāo)準(zhǔn)標(biāo)準(zhǔn)： 用戶體驗用戶體驗User ExperienceUser Experience 用戶體驗用戶體驗是以用戶為中心的設(shè)計是以用戶為中心的設(shè)計UCDUCD/User Centered Design/User Centered Design中最重要的一個中最重要

2、的一個部分，強(qiáng)調(diào)的是過程，是軟件對用戶行為產(chǎn)部分，強(qiáng)調(diào)的是過程，是軟件對用戶行為產(chǎn)生的反應(yīng)與用戶期待值的誤差測試，這種誤生的反應(yīng)與用戶期待值的誤差測試，這種誤差越小，也就越符合以用戶為中心的設(shè)計原差越小，也就越符合以用戶為中心的設(shè)計原則。則。文字與文字與用語用語顏色顏色布局布局平衡原則平衡原則預(yù)期原則預(yù)期原則經(jīng)濟(jì)原則經(jīng)濟(jì)原則順序原則順序原則規(guī)則化規(guī)則化平衡原則平衡原則 注意屏幕上下左右平衡。不要堆擠數(shù)據(jù)，注意屏幕上下左右平衡。不要堆擠數(shù)據(jù)，過分擁擠的顯示會產(chǎn)生視覺疲和接收錯誤。過分擁擠的顯示會產(chǎn)生視覺疲和接收錯誤。預(yù)期原則預(yù)期原則 屏幕上所有對象，如窗口、按鈕、菜單等屏幕上所有對象，如窗口、按

3、鈕、菜單等處理應(yīng)一致化，使對象的動作可預(yù)期。處理應(yīng)一致化，使對象的動作可預(yù)期。順序原則順序原則 對象顯示的順序應(yīng)依需要排列。通常應(yīng)最對象顯示的順序應(yīng)依需要排列。通常應(yīng)最先出現(xiàn)對話，然后通過對話將系統(tǒng)分段實現(xiàn)。先出現(xiàn)對話，然后通過對話將系統(tǒng)分段實現(xiàn)。規(guī)則化規(guī)則化 畫面應(yīng)對稱，顯示命令、對話及提示行在畫面應(yīng)對稱，顯示命令、對話及提示行在一個應(yīng)用系統(tǒng)的設(shè)計中盡量統(tǒng)一規(guī)范。一個應(yīng)用系統(tǒng)的設(shè)計中盡量統(tǒng)一規(guī)范。要注意用語簡潔性要注意用語簡潔性格式格式信息內(nèi)容信息內(nèi)容要注意用語簡潔性要注意用語簡潔性p避免使用計算機(jī)專業(yè)術(shù)語避免使用計算機(jī)專業(yè)術(shù)語；p盡量用盡量用肯定句肯定句而不要用否定句；而不要用否定句；p用

4、用主動語態(tài)主動語態(tài)而不用被動語態(tài)；而不用被動語態(tài)；p用用禮貌禮貌而不過分的強(qiáng)調(diào)語句進(jìn)行文字會話；而不過分的強(qiáng)調(diào)語句進(jìn)行文字會話；p英文詞語盡量英文詞語盡量避免縮寫避免縮寫；p在按鈕，功能鍵標(biāo)示中應(yīng)盡量使用描述在按鈕，功能鍵標(biāo)示中應(yīng)盡量使用描述動動作的作的動詞動詞；p在文字較長時，可用壓縮法在文字較長時，可用壓縮法減少字符數(shù)減少字符數(shù)或采用或采用一些編碼方法。一些編碼方法。格式格式 在屏幕顯示設(shè)計中，一幅畫面不要文在屏幕顯示設(shè)計中，一幅畫面不要文字太多，若必須有較多文字時，盡量字太多，若必須有較多文字時，盡量分組分組分頁分頁，在關(guān)鍵詞處進(jìn)行，在關(guān)鍵詞處進(jìn)行加粗、變字體加粗、變字體等處等處理，但同

5、行文字盡量理，但同行文字盡量字型統(tǒng)一字型統(tǒng)一。英文詞除。英文詞除標(biāo)語外，盡量采用標(biāo)語外，盡量采用小寫和易認(rèn)的字體小寫和易認(rèn)的字體。信息內(nèi)容信息內(nèi)容 采用簡潔、清楚的表達(dá)，還應(yīng)采用用采用簡潔、清楚的表達(dá)，還應(yīng)采用用戶熟悉的戶熟悉的簡單句子簡單句子，盡量不用左右滾屏。，盡量不用左右滾屏。當(dāng)內(nèi)容較多時，應(yīng)以當(dāng)內(nèi)容較多時，應(yīng)以空白分段或以小窗口空白分段或以小窗口分塊分塊，以便記憶和理解。重要字段可用粗，以便記憶和理解。重要字段可用粗體和閃爍體和閃爍吸引注意力吸引注意力和強(qiáng)化效果，強(qiáng)化效和強(qiáng)化效果，強(qiáng)化效果有多樣，針對實際進(jìn)行選擇。果有多樣，針對實際進(jìn)行選擇。限制同時顯示的顏色數(shù)限制同時顯示的顏色數(shù)。一

6、般同一畫面不宜一般同一畫面不宜超過超過4 4或或5 5種，可用不同層次及形狀來配合顏種，可用不同層次及形狀來配合顏色，增加變化。色，增加變化。畫面中畫面中活動對象顏色應(yīng)鮮明活動對象顏色應(yīng)鮮明，而非活動對象，而非活動對象應(yīng)暗淡應(yīng)暗淡盡量盡量避免不兼容的顏色放在一起避免不兼容的顏色放在一起，如黃與藍(lán)，如黃與藍(lán)，紅與綠等，除非作對比時用。紅與綠等，除非作對比時用。若若用顏色表示某種信息或?qū)ο髮傩杂妙伾硎灸撤N信息或?qū)ο髮傩?，要使用，要使用戶懂得這種表示，且盡量用常規(guī)準(zhǔn)則表示。戶懂得這種表示，且盡量用常規(guī)準(zhǔn)則表示。軟件界面設(shè)計是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化軟件界面設(shè)計是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生

7、的對軟件的使用界面進(jìn)行美化的需求而產(chǎn)生的對軟件的使用界面進(jìn)行美化、優(yōu)化優(yōu)化、規(guī)范化的設(shè)計分支。規(guī)范化的設(shè)計分支。 具體具體包括：包括： 軟件啟動封面設(shè)計軟件啟動封面設(shè)計/ /軟件框架設(shè)計軟件框架設(shè)計 / / 按鈕設(shè)計按鈕設(shè)計/ /面板設(shè)計面板設(shè)計/ /菜單設(shè)計菜單設(shè)計/ / 標(biāo)簽設(shè)計標(biāo)簽設(shè)計/ /圖標(biāo)設(shè)計圖標(biāo)設(shè)計/ /滾動條及狀態(tài)欄設(shè)計滾動條及狀態(tài)欄設(shè)計/ / 安裝過程設(shè)計安裝過程設(shè)計 / /包裝及商品化包裝及商品化 高清晰度的圖像高清晰度的圖像安全色安全色大小適中大小適中整體設(shè)計的統(tǒng)一和延續(xù)性整體設(shè)計的統(tǒng)一和延續(xù)性品牌標(biāo)識：品牌標(biāo)識：公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱，公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱

8、，版本號，網(wǎng)址，版權(quán)聲明，序列號等版本號，網(wǎng)址，版權(quán)聲明，序列號等 在和軟件產(chǎn)品的程序開發(fā)員及程序使用對象進(jìn)在和軟件產(chǎn)品的程序開發(fā)員及程序使用對象進(jìn)行共同溝通，以設(shè)計出行共同溝通，以設(shè)計出友好的友好的、獨特的獨特的、符合符合程序開發(fā)原則程序開發(fā)原則的軟件框架的軟件框架，符合符合視覺流程視覺流程和和用用戶使用心理戶使用心理。軟件按鈕設(shè)計應(yīng)該具有交互性，即應(yīng)該有軟件按鈕設(shè)計應(yīng)該具有交互性，即應(yīng)該有3 3到到6 6種狀態(tài)效果：點擊時狀態(tài)；鼠標(biāo)放在上面但未種狀態(tài)效果：點擊時狀態(tài)；鼠標(biāo)放在上面但未點擊的狀態(tài)；點擊前鼠標(biāo)未放在上面時的狀態(tài)；點擊的狀態(tài)；點擊前鼠標(biāo)未放在上面時的狀態(tài)；點擊后鼠標(biāo)未放在上面時的

9、狀態(tài)；不能點擊時點擊后鼠標(biāo)未放在上面時的狀態(tài)；不能點擊時狀態(tài)；獨立自動變化的狀態(tài)。按鈕應(yīng)具備簡潔狀態(tài)；獨立自動變化的狀態(tài)。按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。按鈕應(yīng)該有所區(qū)別。 軟件面板設(shè)計應(yīng)該具有縮放功能，面板應(yīng)該對軟件面板設(shè)計應(yīng)該具有縮放功能，面板應(yīng)該對功能區(qū)間劃分清晰，應(yīng)該和對話框，彈出框等功能區(qū)間劃分清晰，應(yīng)該和對話框，彈出框等風(fēng)格匹配，盡量節(jié)省空間，切換方便。風(fēng)格匹配，盡量節(jié)省空間，切換方便。 菜單設(shè)計一般有選中狀態(tài)和未選中狀態(tài)，

10、左邊菜單設(shè)計一般有選中狀態(tài)和未選中狀態(tài)，左邊應(yīng)為名稱，右邊應(yīng)為快捷鍵，如果有下級菜單應(yīng)為名稱，右邊應(yīng)為快捷鍵，如果有下級菜單應(yīng)該有下級箭頭符號，不同功能區(qū)間應(yīng)該用線應(yīng)該有下級箭頭符號，不同功能區(qū)間應(yīng)該用線條分割。條分割。標(biāo)簽設(shè)計應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參標(biāo)簽設(shè)計應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參考按鈕。考按鈕。圖標(biāo)設(shè)計色彩不宜超過圖標(biāo)設(shè)計色彩不宜超過6464色，大小為色，大小為16x1616x16、32x3232x32兩種，圖標(biāo)設(shè)計是方寸藝術(shù)，應(yīng)該加以兩種，圖標(biāo)設(shè)計是方寸藝術(shù)，應(yīng)該加以著重考慮視覺沖擊力，它需要在很小的范圍表著重考慮視覺沖擊力，它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵，所以很多圖

11、標(biāo)設(shè)計師在設(shè)計現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計師在設(shè)計圖標(biāo)時使用簡單的顏色，利用眼睛對色彩和網(wǎng)圖標(biāo)時使用簡單的顏色，利用眼睛對色彩和網(wǎng)點的空間混合效果，做出了許多精彩圖標(biāo)。點的空間混合效果，做出了許多精彩圖標(biāo)。滾動條主要是為了對區(qū)域性空間的固定大小中滾動條主要是為了對區(qū)域性空間的固定大小中內(nèi)容量的變換進(jìn)行設(shè)計，應(yīng)該有上下箭頭，滾內(nèi)容量的變換進(jìn)行設(shè)計，應(yīng)該有上下箭頭，滾動標(biāo)等，有些還有翻頁標(biāo)。狀態(tài)欄是為了對軟動標(biāo)等，有些還有翻頁標(biāo)。狀態(tài)欄是為了對軟件當(dāng)前狀態(tài)的顯示和提示。件當(dāng)前狀態(tài)的顯示和提示。最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)品，功能的宣傳融合于美觀中

12、，可以印刷部品，功能的宣傳融合于美觀中，可以印刷部分產(chǎn)品介紹，產(chǎn)品界面設(shè)計。分產(chǎn)品介紹，產(chǎn)品界面設(shè)計。界面效果的整體性、一致性界面效果的整體性、一致性 界面效果的個性化界面效果的個性化 界面視覺元素的規(guī)范界面視覺元素的規(guī)范界面的色彩及風(fēng)格與系統(tǒng)界面統(tǒng)一界面的色彩及風(fēng)格與系統(tǒng)界面統(tǒng)一 操作流程的系統(tǒng)化操作流程的系統(tǒng)化 特有的界面構(gòu)架特有的界面構(gòu)架專用的界面圖標(biāo)專用的界面圖標(biāo)界面色彩的個性化設(shè)置界面色彩的個性化設(shè)置圖形圖像元素的質(zhì)量圖形圖像元素的質(zhì)量線條色塊與圖形圖像的結(jié)合線條色塊與圖形圖像的結(jié)合3C原則 Concision(簡潔簡潔) Coherence(一致性一致性) Contrast(對比度

13、對比度)醒目的標(biāo)題醒目的標(biāo)題。這個標(biāo)題常常采用圖形來表示，但這個標(biāo)題常常采用圖形來表示，但圖形同樣要求簡潔。圖形同樣要求簡潔。另一種保持簡潔的做法是另一種保持簡潔的做法是限制所用的字體和顏色限制所用的字體和顏色的數(shù)目。的數(shù)目。一般每頁使用的字體不超過三種，一個一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于頁面中使用的顏色少于256256種。種。頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用途頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用途。不要試圖用無關(guān)的圖片把頁面裝點起來，初學(xué)者不要試圖用無關(guān)的圖片把頁面裝點起來，初學(xué)者容易犯的一個錯誤是把頁面搞的花里呼哨，卻不容易犯的一個錯誤是把頁面搞的花里呼哨，

14、卻不能讓別人明白他到底要突出表達(dá)的是什么內(nèi)容，能讓別人明白他到底要突出表達(dá)的是什么內(nèi)容，主題和意念。主題和意念。排版。排版。各個頁面使用相同的頁邊距，文本，各個頁面使用相同的頁邊距，文本，圖形之間保持相同的間距；主要圖形，標(biāo)題圖形之間保持相同的間距；主要圖形，標(biāo)題或符號旁邊留下相同的空白；如果在第一頁或符號旁邊留下相同的空白；如果在第一頁的頂部放置了公司標(biāo)志，那么在其他各頁面的頂部放置了公司標(biāo)志，那么在其他各頁面都放上這一標(biāo)志；如果使用圖標(biāo)導(dǎo)航，則各都放上這一標(biāo)志；如果使用圖標(biāo)導(dǎo)航，則各個頁面應(yīng)當(dāng)使用相同的圖標(biāo)。個頁面應(yīng)當(dāng)使用相同的圖標(biāo)。圖片圖標(biāo)圖片圖標(biāo)風(fēng)格風(fēng)格。所有的圖標(biāo)都應(yīng)當(dāng)彩相同的所有的圖標(biāo)都應(yīng)當(dāng)彩相同的設(shè)計風(fēng)格，比如全部采用圖象的線條剪輯畫設(shè)計風(fēng)格，比如全部采用圖象的線條剪輯畫或全部使用寫實的照片等?；蛉渴褂脤憣嵉恼掌?。字體和顏色字體和顏色。文字的顏色要同圖像的顏色保文字的顏色要同圖像的顏色保持一致并注意色