《UI界面設(shè)計(jì)》PPT課件.ppt

《《UI界面設(shè)計(jì)》PPT課件.ppt》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、UI界面設(shè)計(jì)學(xué)習(xí)內(nèi)容UI的概念UI界面設(shè)計(jì)要素軟件界面設(shè)計(jì)手機(jī)界面設(shè)計(jì)網(wǎng)站界面設(shè)計(jì)Part1UI的概念UI的概念UI的本意是用戶(hù)界面是英文用戶(hù)User和界面Interface的縮寫(xiě)。人機(jī)交互操作邏輯界面美觀衡量UI設(shè)計(jì)的標(biāo)準(zhǔn)：用戶(hù)體驗(yàn)UserExperience用戶(hù)體驗(yàn)是以用戶(hù)為中心的設(shè)計(jì)UCD/UserCenteredDesign中最重要的一個(gè)部分，強(qiáng)調(diào)的是過(guò)程，是軟件對(duì)用戶(hù)行為產(chǎn)生的反應(yīng)與用戶(hù)期待值的誤差測(cè)試，這種誤差越小，也就越符合以用戶(hù)為中心的設(shè)計(jì)原則。Part2UI界面設(shè)計(jì)要素UI界面設(shè)計(jì)要素文字與用語(yǔ)顏色布局UI界面設(shè)計(jì)要素：布局平衡原則預(yù)期原則經(jīng)濟(jì)原則順序原則規(guī)則

2、化UI界面設(shè)計(jì)要素：布局平衡原則注意屏幕上下左右平衡。不要堆擠數(shù)據(jù)，過(guò)分擁擠的顯示會(huì)產(chǎn)生視覺(jué)疲和接收錯(cuò)誤。UI界面設(shè)計(jì)要素：布局預(yù)期原則屏幕上所有對(duì)象，如窗口、按鈕、菜單等處理應(yīng)一致化，使對(duì)象的動(dòng)作可預(yù)期。UI界面設(shè)計(jì)要素：布局順序原則對(duì)象顯示的順序應(yīng)依需要排列。通常應(yīng)最先出現(xiàn)對(duì)話(huà)，然后通過(guò)對(duì)話(huà)將系統(tǒng)分段實(shí)現(xiàn)。UI界面設(shè)計(jì)要素：布局規(guī)則化畫(huà)面應(yīng)對(duì)稱(chēng)，顯示命令、對(duì)話(huà)及提示行在一個(gè)應(yīng)用系統(tǒng)的設(shè)計(jì)中盡量統(tǒng)一規(guī)范。UI界面設(shè)計(jì)要素：文字與用語(yǔ)要注意用語(yǔ)簡(jiǎn)潔性格式信息內(nèi)容UI界面設(shè)計(jì)要素：文字與用語(yǔ)要注意用語(yǔ)簡(jiǎn)潔性避免使用計(jì)算機(jī)專(zhuān)業(yè)術(shù)語(yǔ)；盡量用肯定句而不要用否定句；用主動(dòng)語(yǔ)態(tài)而不用被動(dòng)語(yǔ)

3、態(tài)；用禮貌而不過(guò)分的強(qiáng)調(diào)語(yǔ)句進(jìn)行文字會(huì)話(huà)；英文詞語(yǔ)盡量避免縮寫(xiě)；在按鈕，功能鍵標(biāo)示中應(yīng)盡量使用描述動(dòng)作的動(dòng)詞；在文字較長(zhǎng)時(shí)，可用壓縮法減少字符數(shù)或采用一些編碼方法。UI界面設(shè)計(jì)要素：文字與用語(yǔ)格式在屏幕顯示設(shè)計(jì)中，一幅畫(huà)面不要文字太多，若必須有較多文字時(shí)，盡量分組分頁(yè)，在關(guān)鍵詞處進(jìn)行加粗、變字體等處理，但同行文字盡量字型統(tǒng)一。英文詞除標(biāo)語(yǔ)外，盡量采用小寫(xiě)和易認(rèn)的字體。格式格式UI界面設(shè)計(jì)要素：文字與用語(yǔ)信息內(nèi)容采用簡(jiǎn)潔、清楚的表達(dá)，還應(yīng)采用用戶(hù)熟悉的簡(jiǎn)單句子，盡量不用左右滾屏。當(dāng)內(nèi)容較多時(shí)，應(yīng)以空白分段或以小窗口分塊，以便記憶和理解。重要字段可用粗體和閃爍吸引注意力和強(qiáng)化效果，

4、強(qiáng)化效果有多樣，針對(duì)實(shí)際進(jìn)行選擇。UI界面設(shè)計(jì)要素：顏色的使用限制同時(shí)顯示的顏色數(shù)。一般同一畫(huà)面不宜超過(guò)4或5種，可用不同層次及形狀來(lái)配合顏色，增加變化。畫(huà)面中活動(dòng)對(duì)象顏色應(yīng)鮮明，而非活動(dòng)對(duì)象應(yīng)暗淡盡量避免不兼容的顏色放在一起，如黃與藍(lán)，紅與綠等，除非作對(duì)比時(shí)用。若用顏色表示某種信息或?qū)ο髮傩?，要使用?hù)懂得這種表示，且盡量用常規(guī)準(zhǔn)則表示。Part3軟件界面設(shè)計(jì)軟件界面設(shè)計(jì)軟件界面設(shè)計(jì)是為了滿(mǎn)足軟件專(zhuān)業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對(duì)軟件的使用界面進(jìn)行美化、優(yōu)化、規(guī)范化的設(shè)計(jì)分支。糟糕的界面未經(jīng)美化的程序界面windows95windows7軟件界面設(shè)計(jì)具體包括：軟件啟動(dòng)封面設(shè)計(jì)/軟件框

5、架設(shè)計(jì)/按鈕設(shè)計(jì)/面板設(shè)計(jì)/菜單設(shè)計(jì)/標(biāo)簽設(shè)計(jì)/圖標(biāo)設(shè)計(jì)/滾動(dòng)條及狀態(tài)欄設(shè)計(jì)/安裝過(guò)程設(shè)計(jì)/包裝及商品化軟件界面設(shè)計(jì):軟件啟動(dòng)封面設(shè)計(jì)高清晰度的圖像安全色大小適中整體設(shè)計(jì)的統(tǒng)一和延續(xù)性品牌標(biāo)識(shí)：公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱(chēng)，版本號(hào)，網(wǎng)址，版權(quán)聲明，序列號(hào)等軟件界面設(shè)計(jì):軟件框架設(shè)計(jì)在和軟件產(chǎn)品的程序開(kāi)發(fā)員及程序使用對(duì)象進(jìn)行共同溝通，以設(shè)計(jì)出友好的、獨(dú)特的、符合程序開(kāi)發(fā)原則的軟件框架，符合視覺(jué)流程和用戶(hù)使用心理。軟件界面設(shè)計(jì):軟件框架設(shè)計(jì)軟件界面設(shè)計(jì):軟件按鈕設(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í)的

6、狀態(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)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。軟件界面設(shè)計(jì):軟件面板設(shè)計(jì)軟件面板設(shè)計(jì)應(yīng)該具有縮放功能，面板應(yīng)該對(duì)功能區(qū)間劃分清晰，應(yīng)該和對(duì)話(huà)框，彈出框等風(fēng)格匹配，盡量節(jié)省空間，切換方便。軟件界面設(shè)計(jì):菜單設(shè)計(jì)菜單設(shè)計(jì)一般有選中狀態(tài)和未選中狀態(tài)，左邊應(yīng)為名稱(chēng)，右邊應(yīng)為快捷鍵，如果有下級(jí)菜單應(yīng)該有下級(jí)箭頭符號(hào)，不同功能區(qū)間應(yīng)該用線(xiàn)條分割。軟件界面設(shè)計(jì):菜單設(shè)計(jì)軟件界面設(shè)計(jì):標(biāo)簽設(shè)計(jì)標(biāo)簽設(shè)計(jì)應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參考按鈕。軟件界面設(shè)計(jì):圖標(biāo)

7、設(shè)計(jì)圖標(biāo)設(shè)計(jì)色彩不宜超過(guò)64色，大小為16x16、32x32兩種，圖標(biāo)設(shè)計(jì)是方寸藝術(shù)，應(yīng)該加以著重考慮視覺(jué)沖擊力，它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)使用簡(jiǎn)單的顏色，利用眼睛對(duì)色彩和網(wǎng)點(diǎn)的空間混合效果，做出了許多精彩圖標(biāo)。軟件界面設(shè)計(jì):滾動(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)的顯示和提示。軟件界面設(shè)計(jì):包裝及商品化最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)品，