《《UI界面設(shè)計》PPT課件》由會員分享，可在線閱讀，更多相關(guān)《《UI界面設(shè)計》PPT課件（49頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 UI的概念 UI界面設(shè)計要素 軟件界面設(shè)計 手機界面設(shè)計 網(wǎng)站界面設(shè)計 UI的本意是用戶界面 是英文 用戶 User和 界面 Interface的縮寫。 衡量 UI設(shè)計的標(biāo)準(zhǔn)： 用戶體驗 User Experience 用戶體驗 是以用戶為中心的設(shè)計 UCD/User Centered Design中最重要的一個部分，強 調(diào)的是過程，是軟件對用戶行為產(chǎn)生的反應(yīng) 與用戶期待值的誤差測試，這種誤差越小， 也就越符合以用戶為中心的設(shè)計原則。 平衡原則 預(yù)期原則 經(jīng)濟原則 順序原則 規(guī)則化 平衡原則 注意屏幕上下左右平衡。不要堆擠數(shù)據(jù)，過 分擁擠的顯示會產(chǎn)生視覺疲和接收錯誤。 預(yù)期原則 屏幕上所有對

2、象，如窗口、按鈕、菜單等處 理應(yīng)一致化，使對象的動作可預(yù)期。 順序原則 對象顯示的順序應(yīng)依需要排列。通常應(yīng)最先 出現(xiàn)對話，然后通過對話將系統(tǒng)分段實現(xiàn)。 規(guī)則化 畫面應(yīng)對稱，顯示命令、對話及提示行在一 個應(yīng)用系統(tǒng)的設(shè)計中盡量統(tǒng)一規(guī)范。 要注意用語簡潔性 格式 信息內(nèi)容 要注意用語簡潔性 避免使用計算機專業(yè)術(shù)語 ； 盡量用 肯定句 而不要用否定句； 用 主動語態(tài) 而不用被動語態(tài)； 用 禮貌 而不過分的強調(diào)語句進行文字會話； 英文詞語盡量 避免縮寫 ； 在按鈕，功能鍵標(biāo)示中應(yīng)盡量使用描述動作的 動詞 ； 在文字較長時，可用壓縮法 減少字符數(shù) 或采用 一些編碼方法。 格式 在屏幕顯示設(shè)計中，一幅畫面不

3、要文字太 多，若必須有較多文字時，盡量 分組分頁 ， 在關(guān)鍵詞處進行 加粗、變字體 等處理，但 同行文字盡量 字型統(tǒng)一 。英文詞除標(biāo)語外， 盡量采用 小寫和易認的字體 。 信息內(nèi)容 信息內(nèi)容顯示不僅采用簡潔、清楚的表達， 還應(yīng)采用用戶熟悉的 簡單句子 ，盡量不用 左右滾屏。當(dāng)內(nèi)容較多時，應(yīng)以 空白分段 或以小窗口分塊 ，以便記憶和理解。重要 字段可用粗體和閃爍 吸引注意力 和強化效 果，強化效果有多樣，針對實際進行選擇。 限制同時顯示的顏色數(shù)。 一般同一畫面不宜 超過 4或 5種，可用不同層次及形狀來配合顏 色，增加變化。 畫面中 活動對象顏色應(yīng)鮮明 ，而非活動對象 應(yīng)暗淡 盡量 避免不兼容的

4、顏色放在一起 ，如黃與藍， 紅與綠等，除非作對比時用。 若 用顏色表示某種信息或?qū)ο髮傩?，要使用 戶懂得這種表示，且盡量用常規(guī)準(zhǔn)則表示。 軟件界面設(shè)計是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化 的需求而產(chǎn)生的對軟件的使用界面進行美化、 優(yōu)化、規(guī)范化的設(shè)計分支。 具體包括： 軟件啟動封面設(shè)計 /軟件框架設(shè)計 / 按鈕設(shè)計 /面板設(shè)計 /菜單設(shè)計 / 標(biāo)簽設(shè)計 /圖標(biāo)設(shè)計 /滾動條及狀態(tài)欄設(shè)計 / 安裝過程設(shè)計 /包裝及商品化 高清晰度的圖像 安全色 大小適中 整體設(shè)計的統(tǒng)一和延續(xù)性 品牌標(biāo)識：公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱，版本 號，網(wǎng)址，版權(quán)聲明，序列號等 在和軟件產(chǎn)品的程序開發(fā)員及程序使用對象進 行共同溝通

5、，以設(shè)計出友好的，獨特的，符合 程序開發(fā)原則的軟件框架，符合視覺流程和用 戶使用心理。 軟件按鈕設(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ū)別。 軟件面板設(shè)計應(yīng)該具有縮放功能，面板應(yīng)該對 功能區(qū)間劃分清晰，應(yīng)該和對話框，彈出框等 風(fēng)格匹配，盡量節(jié)省空間，切換方便。 菜單設(shè)計一般有選中狀態(tài)和未選中狀態(tài)，左邊 應(yīng)為名稱，右邊應(yīng)為快捷鍵，如

6、果有下級菜單 應(yīng)該有下級箭頭符號，不同功能區(qū)間應(yīng)該用線 條分割。 標(biāo)簽設(shè)計應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參 考按鈕。 圖標(biāo)設(shè)計色彩不宜超過 64色，大小為 16x16、 32x32兩種，圖標(biāo)設(shè)計是方寸藝術(shù)，應(yīng)該加以 著重考慮視覺沖擊力，它需要在很小的范圍表 現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計師在設(shè)計 圖標(biāo)時使用簡單的顏色，利用眼睛對色彩和網(wǎng) 點的空間混合效果，做出了許多精彩圖標(biāo)。 滾動條主要是為了對區(qū)域性空間的固定大小中 內(nèi)容量的變換進行設(shè)計，應(yīng)該有上下箭頭，滾 動標(biāo)等，有些還有翻頁標(biāo)。狀態(tài)欄是為了對軟 件當(dāng)前狀態(tài)的顯示和提示。 最后軟件產(chǎn)品的包裝應(yīng)該考慮保護好軟件產(chǎn) 品，功能的宣傳融合于美觀中

7、，可以印刷部 分產(chǎn)品介紹，產(chǎn)品界面設(shè)計。 界面效果的整體性、一致性 界面效果的個性化 界面視覺元素的規(guī)范 界面的色彩及風(fēng)格與系統(tǒng)界面統(tǒng)一 操作流程的系統(tǒng)化 特有的界面構(gòu)架 專用的界面圖標(biāo) 界面色彩的個性化設(shè)置 圖形圖像元素的質(zhì)量 線條色塊與圖形圖像的結(jié)合 3C原則 Concision(簡潔 ) Coherence(一致性 ) Contrast(對比度 ) 醒目的標(biāo)題。 這個標(biāo)題常常采用圖形來表示， 但圖形同樣要求簡潔。 另一種保持簡潔的做法是 限制所用的字體和 顏色的數(shù)目。 一般每頁使用的字體不超過三 種，一個頁面中使用的顏色少于 256種。 頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用 途。 不要

8、試圖用無關(guān)的圖片把頁面裝點起來， 初學(xué)者容易犯的一個錯誤是把頁面搞的花里 呼哨，卻不能讓別人明白他到底要突出表達 的是什么內(nèi)容，主題和意念。 排版。 各個頁面使用相同的頁邊距，文本， 圖形之間保持相同的間距；主要圖形，標(biāo)題 或符號旁邊留下相同的空白；如果在第一頁 的頂部放置了公司標(biāo)志，那么在其他各頁面 都放上這一標(biāo)志；如果使用圖標(biāo)導(dǎo)航，則各 個頁面應(yīng)當(dāng)使用相同的圖標(biāo)。 圖片圖標(biāo)風(fēng)格。 所有的圖標(biāo)都應(yīng)當(dāng)彩相同的 設(shè)計風(fēng)格，比如全部采用圖象的線條剪輯畫 或全部使用寫實的照片等。 字體和顏色。 文字的顏色要同圖像的顏色保 持一致并注意色彩搭配的和諧。一個站點通 常只使用一到兩種標(biāo)準(zhǔn)色，為了保持顏色上 的一致性，標(biāo)準(zhǔn)色一致或相近。比如，站點 的主題色彩如果為紅色，可能就需要將鏈接 的色彩也改為紅色。 使用對比是 強調(diào)突出某些內(nèi)容 的最有效的辦 法之一。 顏色的對比 字體變化