UI設(shè)計基礎(chǔ)培訓(xùn)課件(UI設(shè)計原則)

1、UI設(shè)計基礎(chǔ)培訓(xùn)課件(UI設(shè)計原則)第一頁，共39頁。1.什么是UI設(shè)計?2.UI設(shè)計師是如何去展開工作的?3.UI設(shè)計師需要具備哪些能力?4.UI設(shè)計師如是何協(xié)助程序員們?nèi)崿F(xiàn)頁面開發(fā)的5.APP設(shè)計中容易被忽略的細節(jié)第二頁，共39頁。UI設(shè)計的定義：指軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計我的理解：UI設(shè)計包括兩個方向，分別是交互設(shè)計和圖形（視覺）設(shè)計2、視覺設(shè)計主要負責(zé)這個UI看起來是否美觀，是否有設(shè)計感等等。1、交互設(shè)計主要負責(zé)這個UI用起來順不順手，上手容不容易等等。1.什么是UI設(shè)計？第三頁，共39頁。交互設(shè)計從專業(yè)和嚴謹?shù)慕嵌葘Ξa(chǎn)品原型（demo）提出優(yōu)化建議兩個維度：流程

2、邏輯和頁面布局第四頁，共39頁。場景一第五頁，共39頁。場景二第六頁，共39頁。視覺設(shè)計圖標、圖形、按鈕、字體大小層級、色彩、線條粗細、間距等等第七頁，共39頁。2.UI設(shè)計師是如何去展開工作的？（方法論）1. 一定要玩機器，玩APP。包括iOS、Andorid、ipad、watch等等智能設(shè)備；2. 熟悉各個平臺的界面設(shè)計規(guī)范；3. 學(xué)會欣賞幾款不錯的APP設(shè)計、最好是不同行業(yè)不同風(fēng)格的，然后以自己的想法去“設(shè)計”；4. 無論你設(shè)計多大尺寸的UI,一定要有一臺測試機也就是說必須真機測試；5. 瀏覽設(shè)計網(wǎng)站，多看看別人優(yōu)秀的作品和對設(shè)計的想法；6. 培養(yǎng)一個靠譜的程序員小伙伴。向一些有經(jīng)驗的客

3、戶端程序員學(xué)習(xí)和了解更深的設(shè)計規(guī)范。( 一）對于剛開始做UI/想要轉(zhuǎn)行做UI的第八頁，共39頁。1. 充分了解需求文檔，分析目標用戶，分析原型交互流程邏輯和頁面布局；2. 分析同行競品：顏色、字體層級、圖標、首頁布局、列表樣式、按鈕、品牌基調(diào)等整體視覺 設(shè)計風(fēng)格（頭腦風(fēng)暴）；3. 設(shè)計初稿；4. 頁面評審，主要參與人員：設(shè)計師、產(chǎn)品、部門/項目負責(zé)人；5. 對頁面評審提出的問題進行修改、優(yōu)化/細化得出最終稿；6. 設(shè)計文檔的輸出：最終效果JPG、切圖、標注；( 二）準備著手去做項目7. 跟進效果圖的開發(fā)，體驗測試知道上線。第九頁，共39頁。3.UI設(shè)計師需要具備哪些能力？第十頁，共39頁。1.

4、圖標設(shè)計能力第十一頁，共39頁。2、圖形設(shè)計能力第十二頁，共39頁。第十三頁，共39頁。3、設(shè)計提案能力一個合格的設(shè)計師，應(yīng)該具有設(shè)計提案能力。通過圖形+文字的形式告訴你的需求方，你的設(shè)計為什么這么設(shè)計，你考慮了什么。為什么使用這樣的顏色。有理有據(jù)的設(shè)計說明，而不是一張零散的圖片。第十四頁，共39頁。4、海報banner設(shè)計能力第十五頁，共39頁。5、界面設(shè)計能力第十六頁，共39頁。6、交互思維能力UI設(shè)計師的界面還是要服務(wù)于產(chǎn)品設(shè)計，那么對于界面的設(shè)計不應(yīng)只停留在美學(xué)的思考，還應(yīng)該思考界面的邏輯，界面元素的擺放，通過深入了解產(chǎn)品的行為目的后，更好的用視覺手段表達產(chǎn)品意圖，這就需要對設(shè)計師的邏

5、輯思考能力，界面交互綜合能力提出更高要求。第十七頁，共39頁。7、溝通理解能力對這點也非常重要，大多數(shù)設(shè)計師不是單打獨斗，而是和一個團隊一起工作，你需要保持良好的溝通能力。比如經(jīng)常改圖的問題。不是別人說1你就做1,有可能你按照要求做了1，別人依然說你好。比如產(chǎn)品要你換樣式，你要弄清楚原因，是不符合當(dāng)前的風(fēng)格，又或者產(chǎn)品想突出什么，弄清楚意圖才去做設(shè)計，事半功倍。且給對方留下喜歡思考，樂于溝通的好印象，這樣的員工到哪里都受歡迎。相反你默不作聲，吭哧吭哧的不斷改圖，說不定別人想，這人能力真差，怎么說都改不到我想要的。第十八頁，共39頁。4.UI設(shè)計師如是何協(xié)助程序員們?nèi)崿F(xiàn)頁面開發(fā)的第十九頁，共3

6、9頁。5.APP設(shè)計中容易被忽略的細節(jié)第二十頁，共39頁。1. 統(tǒng)一的圖標設(shè)計風(fēng)格第二十一頁，共39頁。2. 圖標大小的視覺平衡同一個界面出現(xiàn)多個圖標時，我們需要保持整體的視覺平衡。并非是所有圖標都采用相同的尺寸就能達到平衡，由于圖標的體量不同，相同尺寸下不同體量的圖標視覺平衡也不相同，例如相同尺寸的正方形會比圓形顯得大。因此，我們需要根據(jù)圖標的體量對其大小做出相應(yīng)的調(diào)整。第二十二頁，共39頁。3. 優(yōu)化你的分割線第二十三頁，共39頁。4. 合理的運用投影的顏色與透明度第二十四頁，共39頁。5. 不要過度裝飾，讓界面更簡潔第二十五頁，共39頁。6. 圖片比例&視平線的統(tǒng)一性第二十六頁，共39頁

7、。7. 控制好界面中的配色數(shù)量一個界面中出現(xiàn)3種左右的配色是相對比較容易把控的，如果超過3種以上的配色，是非?？简炘O(shè)計師功底的，如果顏色的處理不到位就會出現(xiàn)五彩斑斕的“視覺盛宴”。在選擇配色組合時，使用相似色的配色方案可以使顏色更加協(xié)調(diào)和交融；如果希望更鮮明地突出某些元素，對比色是不錯的選擇。無論選擇何種配色方案，都要控制好界面中的配色比重，使信息傳達不受干擾。第二十七頁，共39頁。8. 提高配圖的質(zhì)量圖片的質(zhì)量影響著整個界面的格調(diào)，現(xiàn)在越來越多的產(chǎn)品都會對圖片進行美化后再展現(xiàn)給用戶，目的就是為了提升產(chǎn)品在用戶心中的印象。我們在設(shè)計提案的時候?qū)ε鋱D的選擇也要精挑細選，通過后期裁剪、曲線調(diào)整、色

8、彩調(diào)整等技法使相同模塊的配圖視覺效果更加協(xié)調(diào)。第二十八頁，共39頁。9. 明確表達圖標的含義第二十九頁，共39頁。10. 正確處理文字排版的層級關(guān)系第三十頁，共39頁。11. 線條與色塊分割的合理運用第三十一頁，共39頁。11. 運用提示符提高用戶的閱讀效率第三十二頁，共39頁。12. 布局層次分明，重點突出好的界面布局是為了更好的引導(dǎo)用戶閱讀和操作，界面布局要有層次和重點，而非簡單的將信息進行羅列。通過卡片模塊的區(qū)分和大小的變化可以很好的進行視覺引導(dǎo)，大大提高用戶對界面的理解，從而提高用戶的操作效率。第三十三頁，共39頁。13. 相同界面下圓角&直角的統(tǒng)一性第三十四頁，共39頁。14. 別把網(wǎng)頁的習(xí)慣帶到APP設(shè)計中第三十五頁，共39頁。15. 空界面中插畫的運用為了提高AP