移動(dòng)端APPUI設(shè)計(jì)與交互基礎(chǔ)教程第1章APPUI設(shè)計(jì)與交互概述課件

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

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

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

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