UI設計交流文檔ppt課件

1、UI設計目錄01 UI簡介02 UI設計理念03 UI設計原則04 UI設計流程05 正譜教育UI的設計想法201 UI簡介UI即用戶界面（ User interface ）在人和機器的互動過程中，有一個層面，即我們所說的界面（interface）。泛指用戶的操作界面，UI設計主要指界面的樣式，美觀程度。301 UI簡介如果說程序是一個人的肌肉和骨骼，那么如果說程序是一個人的肌肉和骨骼，那么UIUI設計就是人的外貌和品格設計就是人的外貌和品格! !都是一個成功軟件產品必不可少的重要組成部分都是一個成功軟件產品必不可少的重要組成部分! !感覺（視覺/觸覺/聽覺）情感從心理學意義來分，界面可分為感

2、覺（視覺、觸覺、聽覺等）和情感兩個層次。置界面于用戶的控制之下減少用戶的記憶負擔保持界面的一致性三大原則用戶界面設計的三大原則402 UI設計理念設計理念在不同的軟件產品中會有一些不同的具體表現形式，根據產品特性不同、應用場景不同而表現出不同的側重點及具體特性。但是核設計理念在不同的軟件產品中會有一些不同的具體表現形式，根據產品特性不同、應用場景不同而表現出不同的側重點及具體特性。但是核心的理念特征卻一直保持統一，那就是心的理念特征卻一直保持統一，那就是“內容重于形式內容重于形式”。UI設計包含用戶研究、交互設計、界面設計三大類以用戶為中心易用舒適簡單UI設計交互設計用戶研究界面設計一切以用戶

3、為中心，設計出簡單舒適易用的界面502 UI設計理念不同的產品如一個兒童娛樂產品就需要將界面做的花哨一些或者用大的圖片充斥;一個應用軟件就需要突出使用方便和強大的功能設計要簡潔。同類不同的內容如一個可愛的幼兒教育產品(像兒歌動畫類)就需要將界面做的活潑生動可愛一點;如果是一個中小學生的專業(yè)助教類產品就要做的簡潔明了一些。603 UI設計原則設計原則統一性設計目標一致外觀元素一致交互行為一致合理性用戶習慣接受程度簡易可用性可理解性可達到性可控制性03 UI設計原則界面沒有任何的操作提示，用戶就明白通過左右滑動屏幕來查看更多卡片，還知道卡片是以扇形為運動軌跡。干凈簡潔的界面可以讓用戶更加沉浸在閱讀

4、的世界里 全力維護用戶的注意力在閱讀的時候，總是會有事物分散我們的注意力。因此，在設計界面的時候，能夠吸引用戶的注意力很關鍵，千萬不要將界面的周圍設計得亂七八糟。03 UI設計原則用戶不知道如何查看很多的卡片，除了查看第一張卡片的詳情，其他的卡片脫離了用戶的掌控。圖標的作用是以圖形化的視覺形象給用戶快速引導，如果只是裝飾，就不如不要。直接操作的感覺最棒 當能夠直接操作物體時，用戶的感覺是最棒的。在設計界面時，我們增加的圖標往往并不是必需的，比如我們過多的使用按鈕、選項等等其他繁瑣的東西僅僅是為了填滿界面，這些都是畫蛇添足。03 UI設計原則界面的交互非常清晰，點擊向下展開，再次點擊向上收起。界

5、面非常漂亮，但登錄被弱化，并且表現形式雷同輸入的提示文字，用戶不易察覺。03 UI設計原則元素排版整齊且統一，功能清晰明了。界面以用戶的閱讀習慣將層次拉開，從左到右，從上到下，元素之間互不干擾。03 UI設計原則將零散的元素進行組合，并以生活中常見的物品展示，用戶更易理解。通過鮮艷的色彩來提醒需要用戶關注的內容03 UI設計原則用戶只單純地想播放音樂，所以列表頁只需要當前播放狀態(tài)、演唱者、專輯名和歌曲名，無需太多的信息。零狀態(tài)結果本身對用戶體驗極其不好，更需要情感化或引導性的設計來降低用戶焦躁的情緒。03 UI設計原則要想做到這點非常不易，但是無厘頭Yo做到了。視覺效果非常好，但是用戶體驗上非

6、常糟糕，當前狀態(tài)與主界面關聯太弱，弧形軌跡閱讀太累。04 UI設計流程配合階段分析階段設計階段驗證階段UI設計流程競爭產品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑?。每個設計者的思維都有局限性，看到別人的設計會有觸類旁通的好處。當市場上存在競品時，去聽聽用戶的評論，哪怕是罵聲都好，別沉迷于自己的設計中，讓真正的用戶說話。好的設計建立在對用戶深刻了解之上。因此用戶使用場景分析就很重要，了解產品的現有交互以及用戶使用產品習慣等，但是設計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。04 UI設計流程分析階段需求分析用戶場景模擬競品分析對于一

7、個產品來說，必然有對用戶需求的分析內容，更多的是從MRD與PRD獲得，或者從產品需求評審會議上得到需求分析的內容，當然可以直接與產品經理交流獲得相關產品需求。如果說設計原則是所有設計的出發(fā)點的話，那么用戶需求就是本次設計的出發(fā)點。輸入物：MRD(市場需求文檔)、PRD（產品需求文檔）、市場調查報告、競品分析文檔輸出物：設計初稿(或許只是幾個簡單的界面)16面向對象，產品面向的用戶不同對于產品的設計要求不同，不同年齡層的用戶對于產品的要求不同，產品的用戶定位將對UI設計師影響因素。面向事件驅動則是對產品響應與觸發(fā)事件的設計，一個提示框，一個提交按鈕這類都是對事件驅動的設計。04 UI設計流程設計

8、階段(設計方法)面向場景面向事件驅動面向對象面向場景是針對該產品使用場景等模擬，模擬用戶在多種情況下產品使用的模擬。輸入物：交互文檔（高保真原型）輸出物：設計終稿(所有的設計稿)1704 UI設計流程配合階段UI設計師交出產品設計圖時，更多的配合開發(fā)人員、測試人員進行截圖配合。配合開發(fā)人員對于PSD格式的圖片切圖操作，對于不同的開發(fā)人員的要求，切圖方式也有不同，UI設計師需配合相關的開發(fā)人員進行最適合的切圖配合。對做好的UI產品要制定一份UI規(guī)范，作為產品的UI設計規(guī)范，適用于公司內部UI團隊和開發(fā)人員作為參考標準。輸入物：設計終稿（高保真效果圖）輸出物：設計修改稿(設計稿切片標注)、UI設計規(guī)范1804 UI設計流程驗證階段產品出來后，UI設計師需對產品的效果進行驗證，與當初設計產品時的想法是否一致，是否可用，用戶是否接受，以及與需求是否一致。都需要UI設計師驗證，UI設計師是將產品需求用圖片展現給用戶最直接的經手人，對于產品的理解會更加深刻。輸入物：產品輸出物：產品(面向用戶最終版本)1905 正譜教育UI設計想法風格定位通過了解公司產品需求再去體驗學習同行產品的設計（如智慧云課堂產品，體驗學習同行品牌：AiSchool、樂望、極域、NEC）,大致了解同類產品的設計走勢和風格。公司產品UI設計的主要方向為扁平化設計扁平化設計。為了達到更好