資源描述:
《UI界面設(shè)計教學文案.ppt》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、UI界面設(shè)計Part1UI的概念UI的概念UI的本意是用戶界面是英文用戶User和界面Interface的縮寫。衡量UI設(shè)計的標準:用戶體驗UserExperience用戶體驗是以用戶為中心的設(shè)計UCD/UserCenteredDesign中最重要的一個部分,強調(diào)的是過程,是軟件對用戶行為產(chǎn)生的反應(yīng)與用戶期待值的誤差測試,這種誤差越小,也就越符合以用戶為中心的設(shè)計原則。Part2UI界面設(shè)計要素UI界面設(shè)計要素UI界面設(shè)計要素:布局平衡原則預期原則經(jīng)濟原則順序原則規(guī)則化UI界面設(shè)計要素:布局平衡原則注意屏幕上下
2、左右平衡。不要堆擠數(shù)據(jù),過分擁擠的顯示會產(chǎn)生視覺疲和接收錯誤。UI界面設(shè)計要素:布局預期原則屏幕上所有對象,如窗口、按鈕、菜單等處理應(yīng)一致化,使對象的動作可預期。UI界面設(shè)計要素:布局順序原則對象顯示的順序應(yīng)依需要排列。通常應(yīng)最先出現(xiàn)對話,然后通過對話將系統(tǒng)分段實現(xiàn)。UI界面設(shè)計要素:布局規(guī)則化畫面應(yīng)對稱,顯示命令、對話及提示行在一個應(yīng)用系統(tǒng)的設(shè)計中盡量統(tǒng)一規(guī)范。UI界面設(shè)計要素:文字與用語要注意用語簡潔性格式信息內(nèi)容UI界面設(shè)計要素:文字與用語要注意用語簡潔性避免使用計算機專業(yè)術(shù)語;盡量用肯定句而不要用否定句
3、;用主動語態(tài)而不用被動語態(tài);用禮貌而不過分的強調(diào)語句進行文字會話;英文詞語盡量避免縮寫;在按鈕,功能鍵標示中應(yīng)盡量使用描述動作的動詞;在文字較長時,可用壓縮法減少字符數(shù)或采用一些編碼方法。UI界面設(shè)計要素:文字與用語格式在屏幕顯示設(shè)計中,一幅畫面不要文字太多,若必須有較多文字時,盡量分組分頁,在關(guān)鍵詞處進行加粗、變字體等處理,但同行文字盡量字型統(tǒng)一。英文詞除標語外,盡量采用小寫和易認的字體。格式格式UI界面設(shè)計要素:文字與用語信息內(nèi)容采用簡潔、清楚的表達,還應(yīng)采用用戶熟悉的簡單句子,盡量不用左右滾屏。當內(nèi)容較多
4、時,應(yīng)以空白分段或以小窗口分塊,以便記憶和理解。重要字段可用粗體和閃爍吸引注意力和強化效果,強化效果有多樣,針對實際進行選擇。UI界面設(shè)計要素:顏色的使用限制同時顯示的顏色數(shù)。一般同一畫面不宜超過4或5種,可用不同層次及形狀來配合顏色,增加變化。畫面中活動對象顏色應(yīng)鮮明,而非活動對象應(yīng)暗淡盡量避免不兼容的顏色放在一起,如黃與藍,紅與綠等,除非作對比時用。若用顏色表示某種信息或?qū)ο髮傩裕褂脩舳眠@種表示,且盡量用常規(guī)準則表示。Part3軟件界面設(shè)計軟件界面設(shè)計軟件界面設(shè)計是為了滿足軟件專業(yè)化標準化的需求而產(chǎn)生
5、的對軟件的使用界面進行美化、優(yōu)化、規(guī)范化的設(shè)計分支。糟糕的界面未經(jīng)美化的程序界面windows95windows7軟件界面設(shè)計具體包括:軟件啟動封面設(shè)計/軟件框架設(shè)計/按鈕設(shè)計/面板設(shè)計/菜單設(shè)計/標簽設(shè)計/圖標設(shè)計/滾動條及狀態(tài)欄設(shè)計/安裝過程設(shè)計/包裝及商品化軟件界面設(shè)計:軟件啟動封面設(shè)計高清晰度的圖像安全色大小適中整體設(shè)計的統(tǒng)一和延續(xù)性品牌標識:公司標志、產(chǎn)品商標,軟件名稱,版本號,網(wǎng)址,版權(quán)聲明,序列號等軟件界面設(shè)計:軟件框架設(shè)計在和軟件產(chǎn)品的程序開發(fā)員及程序使用對象進行共同溝通,以設(shè)計出友好的、獨特的
6、、符合程序開發(fā)原則的軟件框架,符合視覺流程和用戶使用心理。軟件界面設(shè)計:軟件框架設(shè)計軟件界面設(shè)計:軟件按鈕設(shè)計軟件按鈕設(shè)計應(yīng)該具有交互性,即應(yīng)該有3到6種狀態(tài)效果:點擊時狀態(tài);鼠標放在上面但未點擊的狀態(tài);點擊前鼠標未放在上面時的狀態(tài);點擊后鼠標未放在上面時的狀態(tài);不能點擊時狀態(tài);獨立自動變化的狀態(tài)。按鈕應(yīng)具備簡潔的圖示效果,應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng),群組內(nèi)按鈕應(yīng)該風格統(tǒng)一,功能差異大的按鈕應(yīng)該有所區(qū)別。軟件界面設(shè)計:軟件面板設(shè)計軟件面板設(shè)計應(yīng)該具有縮放功能,面板應(yīng)該對功能區(qū)間劃分清晰,應(yīng)該和對話框,彈出框
7、等風格匹配,盡量節(jié)省空間,切換方便。軟件界面設(shè)計:菜單設(shè)計菜單設(shè)計一般有選中狀態(tài)和未選中狀態(tài),左邊應(yīng)為名稱,右邊應(yīng)為快捷鍵,如果有下級菜單應(yīng)該有下級箭頭符號,不同功能區(qū)間應(yīng)該用線條分割。軟件界面設(shè)計:菜單設(shè)計軟件界面設(shè)計:標簽設(shè)計標簽設(shè)計應(yīng)該注意轉(zhuǎn)角部分的變化,狀態(tài)可參考按鈕。軟件界面設(shè)計:圖標設(shè)計圖標設(shè)計色彩不宜超過64色,大小為16x16、32x32兩種,圖標設(shè)計是方寸藝術(shù),應(yīng)該加以著重考慮視覺沖擊力,它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵,所以很多圖標設(shè)計師在設(shè)計圖標時使用簡單的顏色,利用眼睛對色彩和網(wǎng)點的空
8、間混合效果,做出了許多精彩圖標。軟件界面設(shè)計:滾動條及狀態(tài)欄設(shè)計滾動條主要是為了對區(qū)域性空間的固定大小中內(nèi)容量的變換進行設(shè)計,應(yīng)該有上下箭頭,滾動標等,有些還有翻頁標。狀態(tài)欄是為了對軟件當前狀態(tài)的顯示和提示。軟件界面設(shè)計:包裝及商品化最后軟件產(chǎn)品的包裝應(yīng)該考慮保護好軟件產(chǎn)品,功能的宣傳融合于美觀中,可以印刷部分產(chǎn)品介紹,產(chǎn)品界面設(shè)計。Part4手機界面設(shè)計手機界面設(shè)計界面效果的整體性、