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

《UI設(shè)計基礎(chǔ)培訓(xùn)課件(UI設(shè)計原則)》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

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

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

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

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

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

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

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

8、。9.明確表達圖標的含義10.正確處理文字排版的層級關(guān)系11.線條與色塊分割的合理運用11.運用提示符提高用戶的閱讀效率12.布局層次分明，重點突出好的界面布局是為了更好的引導(dǎo)用戶閱讀和操作，界面布局要有層次和重點，而非簡單的將信息進行羅列。通過卡片模塊的區(qū)分和大小的變化可以很好的進行視覺引導(dǎo)，大大提高用戶對界面的理解，從而提高用戶的操作效率。13.相同界面下圓角&直角的