UI設計基礎培訓(UI設計原則)課件

1精選2021版課件1.什么是UI設計?2.UI設計師是如何去展開工作的?3.UI設計師需要具備哪些能力?4.UI設計師如是何協(xié)助程序員們?nèi)崿F(xiàn)頁面開發(fā)的5.APP設計中容易被忽略的細節(jié)2精選2021版課件UI設計的定義：指軟件的人機交互、操作邏輯、界面美觀的整體設計我的理解：UI設計包括兩個方向，分別是交互設計和圖形（視覺）設計2、視覺設計主要負責這個UI看起來是否美觀，是否有設計感等等。1、交互設計主要負責這個UI用起來順不順手，上手容不容易等等。1.什么是UI設計？3精選2021版課件交互設計從專業(yè)和嚴謹?shù)慕嵌葘Ξa(chǎn)品原型（demo）提出優(yōu)化建議兩個維度：流程邏輯和頁面布局4精選2021版課件場景一5精選2021版課件場景二6精選2021版課件視覺設計圖標、圖形、按鈕、字體大小層級、色彩、線條粗細、間距等等7精選2021版課件2.UI設計師是如何去展開工作的？（方法論）1.一定要玩機器，玩APP。包括iOS、Andorid、ipad、watch等等智能設備；2.熟悉各個平臺的界面設計規(guī)范；3.學會欣賞幾款不錯的APP設計、最好是不同行業(yè)不同風格的，然后以自己的想法去“設計”；4.無論你設計多大尺寸的UI,一定要有一臺測試機也就是說必須真機測試；5.瀏覽設計網(wǎng)站，多看看別人優(yōu)秀的作品和對設計的想法；6.培養(yǎng)一個靠譜的程序員小伙伴。向一些有經(jīng)驗的客戶端程序員學習和了解更深的設計規(guī)范。(一）對于剛開始做UI/想要轉行做UI的8精選2021版課件1.充分了解需求文檔，分析目標用戶，分析原型交互流程邏輯和頁面布局；2.分析同行競品：顏色、字體層級、圖標、首頁布局、列表樣式、按鈕、品牌基調(diào)等整體視覺設計風格（頭腦風暴）；3.設計初稿；4.頁面評審，主要參與人員：設計師、產(chǎn)品、部門/項目負責人；5.對頁面評審提出的問題進行修改、優(yōu)化/細化得出最終稿；6.設計文檔的輸出：最終效果JPG、切圖、標注；(二）準備著手去做項目7.跟進效果圖的開發(fā)，體驗測試知道上線。9精選2021版課件3.UI設計師需要具備哪些能力？10精選2021版課件1.圖標設計能力11精選2021版課件2、圖形設計能力12精選2021版課件13精選2021版課件3、設計提案能力一個合格的設計師，應該具有設計提案能力。通過圖形+文字的形式告訴你的需求方，你的設計為什么這么設計，你考慮了什么。為什么使用這樣的顏色。有理有據(jù)的設計說明，而不是一張零散的圖片。14精選2021版課件4、海報banner設計能力15精選2021版課件5、界面設計能力16精選2021版課件6、交互思維能力UI設計師的界面還是要服務于產(chǎn)品設計，那么對于界面的設計不應只停留在美學的思考，還應該思考界面的邏輯，界面元素的擺放，通過深入了解產(chǎn)品的行為目的后，更好的用視覺手段表達產(chǎn)品意圖，這就需要對設計師的邏輯思考能力，界面交互綜合能力提出更高要求。17精選2021版課件7、溝通理解能力對這點也非常重要，大多數(shù)設計師不是單打獨斗，而是和一個團隊一起工作，你需要保持良好的溝通能力。比如經(jīng)常改圖的問題。不是別人說1你就做1,有可能你按照要求做了1，別人依然說你好。比如產(chǎn)品要你換樣式，你要弄清楚原因，是不符合當前的風格，又或者產(chǎn)品想突出什么，弄清楚意圖才去做設計，事半功倍。且給對方留下喜歡思考，樂于溝通的好印象，這樣的員工到哪里都受歡迎。相反你默不作聲，吭哧吭哧的不斷改圖，說不定別人想，這人能力真差，怎么說都改不到我想要的。18精選2021版課件4.UI設計師如是何協(xié)助程序員們?nèi)崿F(xiàn)頁面開發(fā)的19精選2021版課件5.APP設計中容易被忽略的細節(jié)20精選2021版課件1.統(tǒng)一的圖標設計風格21精選2021版課件2.圖標大小的視覺平衡同一個界面出現(xiàn)多個圖標時，我們需要保持整體的視覺平衡。并非是所有圖標都采用相同的尺寸就能達到平衡，由于圖標的體量不同，相同尺寸下不同體量的圖標視覺平衡也不相同，例如相同尺寸的正方形會比圓形顯得大。因此，我們需要根據(jù)圖標的體量對其大小做出相應的調(diào)整。22精選2021版課件3.優(yōu)化你的分割線23精選2021版課件4.合理的運用投影的顏色與透明度24精選2021版課件5.不要過度裝飾，讓界面更簡潔25精選2021版課件6.圖片比例&視平線的統(tǒng)一性26精選2021版課件7.控制好界面中的配色數(shù)量一個界面中出現(xiàn)3種左右的配色是相對比較容易把控的，如果超過3種以上的配色，是非?？简炘O計師功底的，如果顏色的處理不到位就會出現(xiàn)五彩斑斕的“視覺盛宴”。在選擇配色組合時，使用相似色的配色方案可以使顏色更加協(xié)調(diào)和交融；如果希望更鮮明地突出某些元素，對比色是不錯的選擇。無論選擇何種配色方案，都要控制好界面中的配色比重，使信息傳達不受干擾。27精選2021版課件8.提高配圖的質(zhì)量圖片的質(zhì)量影響著整個界面的格調(diào)，現(xiàn)在越來越多的產(chǎn)品都會對圖片進行美化后再展現(xiàn)給用戶，目的就是為了提升產(chǎn)品在用戶心中的印象。我們在設計提案的時候對配圖的選擇也要精挑細選，通過后期裁剪、曲線調(diào)整、色彩調(diào)整等技法使相同模塊的配圖視覺效果更加協(xié)調(diào)。28精選2021版課件9.明確表達圖標的含義29精選2021版課件10.正確處理文字排版的層級關系30精選2021版課件11.線條與色塊分割的合理運用31精選2021版課件11.運用提示符提高用戶的閱讀效率32精選2021版課件12.布局層次分明，重點突出好的界面布局是為了更好的引導用戶閱讀和操作，界面布局要有層次和重點，而非簡單的將信息進行羅列。通過卡片模塊的區(qū)分和大小的變化可以很好的進行視覺引導，大大提高用戶對界面的理解，從而提高用戶的操作效率。33精選2021版課件13.相同界面下圓角&直角的統(tǒng)一性34精選2021版課件14.別把網(wǎng)頁的習慣帶到APP設計中35精選2021版課件15.