移動端APPUI設計與交互基礎教程第1章APPUI設計與交互概述課件

1、設計與交互基礎教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移動端APP UI01APP UI設計與交互概述本章從職業(yè)發(fā)展角度出發(fā)，立足職位需求，向讀者介紹有關UI設計與交互所涉及到的入門知識。1.1 UI設計行業(yè)的發(fā)展前景 1UI（User Interface）用戶界面1.1.1 認識相關概念1.1 UI設計行業(yè)的發(fā)展前景 2ID（Interaction Design）交互設計 交互指的是人和機器互動的過程，交互設計通過了解人的心理、目標和期望，使用有效的交互方式來讓整個過程可用、易用。 3UE（User Experience）用戶體

2、驗 UE是指用戶使用一個產品時的全部體驗，這種體驗主要來自用戶和人機界面的交互過程。1.1.1 認識相關概念1.1 UI設計行業(yè)的發(fā)展前景 4移動端UI的操作系統(tǒng)（1）Android（2）iOS（3）Windows1.1.1 認識相關概念1.1 UI設計行業(yè)的發(fā)展前景1.1.2 就業(yè)前景1.2 如何學習UI設計1.2.1 “UI設計師”常用軟件介紹1Photoshop2Illustrator3Axure4MockingBot（墨刀）5Sketch6Cutterman7PxCook（像素大廚）8Ps Play1.2 如何學習UI設計1色彩理論知識儲備色彩和形象是用戶視覺感知中最快也是最直接的元素

3、，無需語言和文字，色彩會在第一時間通過眼球反饋到大腦，觸發(fā)感受，影響情緒。2心理學與交互理論知識儲備在做產品設計和交互設計時，通常從人的感知、注意、記憶、思維、動機等方面出發(fā)，直接剖析認知心理，才能全面深入了解目標用戶。1.2.2 “UI設計師”設計理論知識儲備1.3 UI設計理論基礎1色相色相指的就是色彩的品相。2明度明度指的是色彩的“明亮程度”。3飽和度飽和度是指色彩的鮮艷程度，也稱色彩的純度。1.3.1 色彩三要素1.3 UI設計理論基礎1APP中一般包含多少顏色經研究，大多數(shù)人更傾向于僅依賴23種色彩的簡單色彩組合。2配色方案單色單色是單一色系的搭配，它在色彩的深淺、明暗或飽和度上有所

4、調整而形成明暗的層次關系。3飽和度相近色的配色方案是選取相互不沖突的相關色彩，一種色彩用作主色，而其它色彩用于輔色豐富該方案。1.3.2 UI設計配色基礎1.3 UI設計理論基礎4. 配色方案補色在色環(huán)中，兩個對立的顏色稱之為補色。5配色方案自定義配色創(chuàng)建自定義配色方案最簡單的方法是將一個明亮的主色添加到一組中性色中，這種處理方法最能夠引起視覺沖擊。1.3.2 UI設計配色基礎1.4 APP頁面分類及其作品欣賞1引導頁APP應用在啟動時會有一小段時間的初始化過程，開發(fā)者可以利用這個初始化的過程使用引導頁的方式傳遞給用戶一些品牌信息之類內容.1.4 APP頁面分類及其作品欣賞2主頁（1）以瀏覽引導為主型（2）提高瀏覽效率為主型（3）信息展示為主型1.4 APP頁面分類及其作品欣賞3菜單導航1.4 APP頁面分類及其作品欣賞4詳情頁1.4 APP頁面分類及其作品欣賞5注冊登錄1.5 淺析APP產品開發(fā)流程1團隊成員及其作用（1）產品經理（2）設計師團隊2開發(fā)流程1.3.2 UI設計配色基礎