UI第1章初識移動(dòng)UI設(shè)計(jì)課件

1、第1章 初識移動(dòng)UI設(shè)計(jì) 本章介紹：隨著2009年6月iPhone 3GS的發(fā)布，移動(dòng)UI設(shè)計(jì)正式進(jìn)入了設(shè)計(jì)舞臺，由于移動(dòng)UI有著獨(dú)特的交互特點(diǎn)，因此想要從事移動(dòng)UI設(shè)計(jì)行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對移動(dòng)UI設(shè)計(jì)的概念、特點(diǎn)、原則、常用軟件、學(xué)習(xí)方法以及App的基本概念、操作平臺、設(shè)計(jì)流程、基本分類進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對移動(dòng)UI設(shè)計(jì)有一個(gè)宏觀的認(rèn)識，有助于高效便利地進(jìn)行后續(xù)的移動(dòng)UI設(shè)計(jì)工作。第1章 初識移動(dòng)UI設(shè)計(jì) 本章介紹：掌握UI設(shè)計(jì)的的相關(guān)概念掌握移動(dòng)UI設(shè)計(jì)的的概念了解移動(dòng)UI設(shè)計(jì)的的特點(diǎn)掌握移動(dòng)UI設(shè)計(jì)的的原則熟練移動(dòng)UI設(shè)計(jì)的的常用軟件掌握

2、移動(dòng)UI設(shè)計(jì)的學(xué)習(xí)方法掌握App的的基本概念了解App的操作平臺熟練App的設(shè)計(jì)流程了解App的基本分類學(xué)習(xí)目標(biāo)掌握UI設(shè)計(jì)的的相關(guān)概念學(xué)習(xí)目標(biāo)移動(dòng)UI設(shè)計(jì)屬于UI設(shè)計(jì)的一個(gè)分支，想要系統(tǒng)全面的認(rèn)識移動(dòng)UI設(shè)計(jì)，需要對UI設(shè)計(jì)的相關(guān)概念以及移動(dòng)UI設(shè)計(jì)的概念、特點(diǎn)、原則、常用軟件、學(xué)習(xí)方法這幾個(gè)方面進(jìn)行學(xué)習(xí)。1.1 認(rèn)識移動(dòng)UI設(shè)計(jì)移動(dòng)UI設(shè)計(jì)屬于UI設(shè)計(jì)的一個(gè)分支，想要系統(tǒng)全面的認(rèn)識移動(dòng)UUI即User Interface（用戶界面）的簡稱，是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。優(yōu)秀的UI設(shè)計(jì)不僅要保證界面的美觀度，更要保證了交互設(shè)計(jì)（英文Interaction Design,

3、 縮寫IxD）的可用性及用戶體驗(yàn)（User Experience，簡稱UE/UX）的友好度。在設(shè)計(jì)領(lǐng)域，UI現(xiàn)在被廣泛分為WUI和GUI。WUI全稱Web User Interface，即網(wǎng)頁界面。在企業(yè)中，WUI設(shè)計(jì)師主要從事PC端網(wǎng)頁設(shè)計(jì)的工作。GUI全稱Graphical User Interface，即圖形用戶界面。因?yàn)橐苿?dòng)端包含大量圖形用戶界面，因此在企業(yè)中，GUI設(shè)計(jì)師主要從事移動(dòng)端App的設(shè)計(jì)工作 1.1.1 UI設(shè)計(jì)的相關(guān)概念UI即User Interface（用戶界面）的簡稱，是指對移動(dòng)UI設(shè)計(jì)是UI設(shè)計(jì)的一個(gè)分支，主要是指針對移動(dòng)設(shè)備軟件的交互操作邏輯、用戶情感化體驗(yàn)、界面

4、元素美觀的整體設(shè)計(jì)。移動(dòng)UI設(shè)計(jì)因其設(shè)備的獨(dú)特性，較其他類型的UI設(shè)計(jì)具有更嚴(yán)格的尺寸要求及手機(jī)系統(tǒng)限制。從設(shè)計(jì)范疇來看，移動(dòng)UI設(shè)計(jì)主要體現(xiàn)在移動(dòng)應(yīng)用界面設(shè)計(jì)、移動(dòng)端網(wǎng)頁界面設(shè)計(jì)、微信小程序設(shè)計(jì)及H5設(shè)計(jì)等。 1.1.2 移動(dòng)UI設(shè)計(jì)的概念 美國設(shè)計(jì)師Andrea Hock創(chuàng)作的App（左）微信跳一跳小程序（中） 網(wǎng)易新聞小易游戲機(jī)H5（右）移動(dòng)UI設(shè)計(jì)是UI設(shè)計(jì)的一個(gè)分支，主要是指針對移動(dòng)設(shè)備軟件的1.設(shè)計(jì)極簡雖然隨著iPhone XS Max、華為Mate 20系列等全面屏手機(jī)的發(fā)行，移動(dòng)設(shè)備的屏幕較之前在尺寸上有了較大的提升，但相對于PC和筆記本電腦還是較小。因此要在有限的空間中進(jìn)行元

5、素的設(shè)計(jì)不宜太過復(fù)雜，不然不利于信息的傳遞?？v觀移動(dòng)UI的設(shè)計(jì)發(fā)展亦是從擬物化到扁平化，甚至為了更好的進(jìn)行信息展示，iOS11之后的設(shè)計(jì)風(fēng)格都圍繞著“大而粗、簡而美”的原則進(jìn)行界面設(shè)計(jì)。 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 美國設(shè)計(jì)師Johny vino創(chuàng)作1.設(shè)計(jì)極簡 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 美國設(shè)2.交互豐富由于現(xiàn)在市場中智能手機(jī)、平板電腦型號的碎片化及多樣化，設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，應(yīng)充分考慮到文字、圖標(biāo)、圖像甚至是界面布局等適配的問題。拿移動(dòng)應(yīng)用來說，設(shè)計(jì)師通常會選用一款常用的、方便適配的屏幕尺寸進(jìn)行設(shè)計(jì)，而后不必再大規(guī)模對其他尺寸屏幕的界面進(jìn)行重新布局，設(shè)計(jì)師只需針對不同屏幕尺寸進(jìn)行

6、切圖輸出，然后再交由技術(shù)端進(jìn)行適配。 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 豐富的交互方式2.交互豐富 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 豐富的3.設(shè)計(jì)適配由于現(xiàn)在市場中智能手機(jī)、平板電腦型號的碎片化及多樣化，設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，應(yīng)充分考慮到文字、圖標(biāo)、圖像甚至是界面布局等適配的問題。拿移動(dòng)應(yīng)用來說，設(shè)計(jì)師通常會選用一款常用的、方便適配的屏幕尺寸進(jìn)行設(shè)計(jì)，而后不必再大規(guī)模對其他尺寸屏幕的界面進(jìn)行重新布局，設(shè)計(jì)師只需針對不同屏幕尺寸進(jìn)行切圖輸出，然后再交由技術(shù)端進(jìn)行適配。 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 設(shè)計(jì)適配3.設(shè)計(jì)適配 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 設(shè)計(jì)適在進(jìn)行移動(dòng)UI設(shè)計(jì)時(shí)需要遵循iOS系統(tǒng)和

7、Android系統(tǒng)，因此可以根據(jù)iOS系統(tǒng)下的設(shè)計(jì)原則以及Android系統(tǒng)下MaterialDesign語言中的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。1.iOS設(shè)計(jì)原則iOS系統(tǒng)設(shè)計(jì)有清晰、遵從、深度三大原則。2.MaterialDesign設(shè)計(jì)原則MaterialDesign語言有材質(zhì)隱喻、大膽夸張、動(dòng)效表意、靈活、跨平臺五大原則。 1.1.4 移動(dòng)UI設(shè)計(jì)的原則 在進(jìn)行移動(dòng)UI設(shè)計(jì)時(shí)需要遵循iOS系統(tǒng)和Android系統(tǒng)， 1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件 UI設(shè)計(jì)常用軟件可以通過界面設(shè)計(jì)、動(dòng)效設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、3D渲染、思維導(dǎo)圖、交互原型這6個(gè)方面進(jìn)行介紹。 1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件 UI設(shè)計(jì)常

8、用軟1.界面設(shè)計(jì)類：PhotoshopPhotoshop，簡稱“PS”，是由Adobe公司開發(fā)和發(fā)行的圖像處理軟件，截止2018年10月，已經(jīng)更新到CC2019。在Sketch出現(xiàn)之前，PS是大部分UI設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)的首選工具。 1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件 Photoshop工作區(qū)界面截圖1.界面設(shè)計(jì)類： 1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件 SketchSketch是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作UI的工具。相較PS，它是一款可以迅速上手的輕量級矢量設(shè)計(jì)工具，不僅對UI設(shè)計(jì)師，就連產(chǎn)品經(jīng)理和前端開發(fā)都能夠迅速掌握，減少了溝通合作的問題。 Sketch工作區(qū)界面截圖1.1.5

9、移動(dòng)UI設(shè)計(jì)的常用軟件Sketch Sketch工作區(qū)界面截圖1.1.5IllustratorIllustrator，簡稱“AI”，是由Adobe公司開發(fā)和發(fā)行的矢量圖形處理軟件，截止2018年10月，已經(jīng)更新到CC2019。AI在UI設(shè)計(jì)中除了被廣泛應(yīng)用于插畫設(shè)計(jì)，在圖標(biāo)制作中也顯示了超凡的性能。 Illustrator工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件Illustrator Illustrator工作Experience DesignExperience Design，簡稱“XD”，是由Adobe公司開發(fā)和發(fā)行的集原型、設(shè)計(jì)和交互于一體的軟件，并于2016年3月發(fā)布了正式預(yù)覽

10、版本。XD的簡潔既彌補(bǔ)了PS制作UI方面時(shí)的臃腫，同時(shí)它免費(fèi)并兼容Windows和mac雙平臺的平民化又是Sketch無法比擬的。 Experience Design工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件Experience Design Experie2.動(dòng)效設(shè)計(jì)類：AfterEffectsAfterEffects，簡稱“AE”，是由Adobe公司開發(fā)和發(fā)行的圖形視頻處理軟件，截止2018年10月，已經(jīng)更新到CC201。無論是經(jīng)典的插件還是強(qiáng)大的表達(dá)式，都使得AE制作出來的動(dòng)效變得細(xì)膩入微。 After Effects工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件2.動(dòng)效設(shè)計(jì)類： A

11、fter Effects工作區(qū)界PrinciplePrinciple是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作動(dòng)效的工具。較AE的綜合及體量，它的優(yōu)勢更在于上手容易、操作簡單，而且它還能在電腦上實(shí)時(shí)預(yù)覽并在手機(jī)上進(jìn)行交互，不像AE智能導(dǎo)出GIF動(dòng)畫和MP4視頻，無法交互。 Principle工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件Principle Principle工作區(qū)界面13.網(wǎng)頁設(shè)計(jì)類：DreamweaverDreamweaver，簡稱“DW”，開始由美國MACROMEDIA公司開發(fā)，2005年被Adobe公司收購。DW是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁代碼編輯器，而且它還擁有著所

12、見即所得的功能特點(diǎn)。 Dreamweaver工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件3.網(wǎng)頁設(shè)計(jì)類： Dreamweaver工作區(qū)界面截Hype3Hype3是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作網(wǎng)頁設(shè)計(jì)的工具,它主要優(yōu)勢體現(xiàn)在能幫助不會編程的設(shè)計(jì)師輕松創(chuàng)建HTML5和復(fù)雜的動(dòng)畫效果。在響應(yīng)式方面Hype3有著特別優(yōu)秀的表現(xiàn)。 Hype3工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件Hype3 Hype3工作區(qū)界面1.1.5 移動(dòng)4.3D渲染類：CINEMA 4DCINEMA 4D,簡稱“C4D”，是德國MAXON開發(fā)的一款能夠進(jìn)行頂級的建模、動(dòng)畫和渲染的3D動(dòng)畫軟件。其功能非常強(qiáng)大更能和

13、PS、AI、AE等各類軟件進(jìn)行無縫結(jié)合。近些年被UI設(shè)計(jì)師大量追捧，通過C4D設(shè)計(jì)出來的作品被廣泛運(yùn)用到Banner、專題頁以及活動(dòng)頁等。 CINEMA 4D工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件4.3D渲染類： CINEMA 4D工作區(qū)界面1.15.思維導(dǎo)圖類：Mindjet MindManagerMindjet MindManager，俗稱“腦圖”，又叫“心智圖”， 由美國Mindjet公司開發(fā)的一款不僅可以創(chuàng)造、管理和交流思想的繪圖軟件，更能方便使用的項(xiàng)目管理軟件。 Mindjet MindManager工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件5.思維導(dǎo)圖類： Mindjet

14、MindManagXMindXMind,同Mindjet MindManager有著一樣的功能，也是一款常實(shí)用的商業(yè)思維導(dǎo)圖軟件。思維導(dǎo)圖類軟件對于UI設(shè)計(jì)方面沒有太大區(qū)分，很多時(shí)候選擇哪款軟件的使用都是根據(jù)個(gè)人喜好。 Xmind工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件XMind Xmind工作區(qū)界面1.1.5 移動(dòng)6.交互原型類：Axure RPAxure RP,通常稱為“Axure”,是一款專業(yè)的快速原型設(shè)計(jì)工具,于2018年9月開放了9.0Beta的下載。在9.0的更新中Axure進(jìn)行了顛覆式的設(shè)計(jì)架構(gòu)，令軟件的使用效率及體驗(yàn)友好度都大大幅增加。 Axure9.0工作區(qū)界面1.1.5

15、 移動(dòng)UI設(shè)計(jì)的常用軟件6.交互原型類： Axure9.0工作區(qū)界面1.1.墨刀墨刀是國內(nèi)開發(fā)的一款在線型原型設(shè)計(jì)工具，于2017年6月開放了V3版本的下載。在V3中，墨刀進(jìn)行了全面更新，除了品牌和組件的升級優(yōu)化，還支持了sketch的導(dǎo)入及加入了工作流的功能，這使得墨刀更加強(qiáng)大。 墨刀工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件墨刀 墨刀工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常對于UI設(shè)計(jì)的初學(xué)者來講，首先要明確市場現(xiàn)在到底需要什么樣的設(shè)計(jì)師，這樣才能有針對性的地學(xué)習(xí)提升。結(jié)合市場需求，我們推薦下列學(xué)習(xí)方法：1.軟件學(xué)習(xí)軟件的學(xué)習(xí)是UI設(shè)計(jì)的剛需和基礎(chǔ)，設(shè)計(jì)師即使有再好的想法，但不能通過軟件制

16、作出來也是徒勞。要我們主要需要掌握的軟件有Photoshop、Illustrator、AfterEffects、Axure RP和墨刀，有條件的設(shè)計(jì)師還可以學(xué)習(xí)Sketch和Principle。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 UI設(shè)計(jì)需掌握的主流軟件對于UI設(shè)計(jì)的初學(xué)者來講，首先要明確市場現(xiàn)在到底需要什么樣的 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 2.開拓眼界眼界的開拓至關(guān)重要，許多UI設(shè)計(jì)師無法做出美觀的界面就是沒有看到太多優(yōu)秀的設(shè)計(jì)。這里推薦3種方法助力設(shè)計(jì)師開拓眼界。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 2.開拓眼界第1種:閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。當(dāng)然針對初學(xué)者而言首先

17、要學(xué)習(xí)規(guī)范類的文章，如iOS設(shè)計(jì)規(guī)范和Android設(shè)計(jì)規(guī)范，二者都可以在網(wǎng)上查到官方的設(shè)計(jì)指南。本書亦在第3章iOS系統(tǒng)界面設(shè)計(jì)和第4章 Android系統(tǒng)界面設(shè)計(jì)對其進(jìn)行了深入剖析幫助設(shè)計(jì)師理解。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 iOS設(shè)計(jì)規(guī)范（左）Android設(shè)計(jì)規(guī)范（右）第1種:閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。當(dāng)然針對第2種:閱讀優(yōu)秀書籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的相關(guān)知識和設(shè)計(jì)應(yīng)用方法。大家可以通過網(wǎng)上輸入關(guān)鍵詞查找到所需書籍。通過閱讀圖書的內(nèi)容提要和目錄了解書籍的內(nèi)容和特色，并通過購買所需書籍來進(jìn)行全面的學(xué)習(xí)。第3種:欣賞優(yōu)秀的作品，建議設(shè)計(jì)師每天拿出1-2小時(shí)到UI中國

18、、站酷（ZCOOL）、追波(Dribbble)這些網(wǎng)站瀏覽最新的作品，并加入收藏，形成自己的資料庫。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 網(wǎng)站推薦第2種:閱讀優(yōu)秀書籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的相關(guān)知識和設(shè)計(jì)應(yīng)用 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 3.臨摹學(xué)習(xí)眼界開拓后，需要進(jìn)行相關(guān)的設(shè)計(jì)臨摹。臨摹的來源首先推崇的是從應(yīng)用中心下載優(yōu)秀的APP，截圖保存進(jìn)行臨摹，其次可以從第2步開拓眼界中的優(yōu)秀案例進(jìn)行臨摹。臨摹一定要保證完全一樣并且要多臨摹。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 3.臨摹學(xué)習(xí) 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 4.項(xiàng)目實(shí)戰(zhàn)經(jīng)過一定的積累，最好通過一套完整的企業(yè)項(xiàng)目來提升。從原型圖到設(shè)計(jì)稿

19、再到切圖標(biāo)注，甚至可以制作成動(dòng)效Demo。一整套項(xiàng)目的實(shí)戰(zhàn)，會讓我們在設(shè)計(jì)能力上有質(zhì)的提升。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 4.項(xiàng)目實(shí)戰(zhàn)App的基本概念A(yù)pp的操作平臺App的設(shè)計(jì)流程App的基本分類1.2 認(rèn)識AppApp的基本概念1.2 認(rèn)識AppApp是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序。用戶下載App主要從應(yīng)用商店，比較著名的應(yīng)用商店有蘋果的App Store，谷歌的Google Play Store。應(yīng)用程序的運(yùn)行與系統(tǒng)密不可分，目前市場上，主要的智能手機(jī)操作系統(tǒng)有蘋果公司的iOS系統(tǒng)和谷歌公司的Android系統(tǒng)。對于UI設(shè)計(jì)師而言，要進(jìn)行移動(dòng)

20、界面設(shè)計(jì)工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)計(jì)知識。 1.2.1 App的基本概念由美國設(shè)計(jì)團(tuán)隊(duì)Ron Design Agency創(chuàng)作App是應(yīng)用程序Application的縮寫，一般指智能手機(jī)App的操作平臺可以分為iOS 和Android兩大平臺。1.iOS系統(tǒng)平臺1.2.2 App的操作平臺iOS是由美國蘋果公司開發(fā)，專門用于蘋果移動(dòng)設(shè)備下的操作系統(tǒng)。iOS截止到2019年已經(jīng)更新到了iOS12，不管是設(shè)備的改革還是系統(tǒng)的更新，iOS都為用戶帶來了全新的體驗(yàn)。對于UI設(shè)計(jì)來言，需要快速進(jìn)行iOS設(shè)計(jì)規(guī)范相關(guān)知識的更新。本書在規(guī)范章節(jié)深入剖析了相關(guān)知識，幫助UI設(shè)計(jì)師進(jìn)行知識的升級。iOS系

21、統(tǒng)平臺App的操作平臺可以分為iOS 和Android兩大平臺。12.Android系統(tǒng)平臺Android系統(tǒng)是最初由安迪魯賓（Andy Rubin）開發(fā)，2005年8月被谷歌收購，2008年10月，第一款A(yù)ndroid系統(tǒng)的智能手機(jī)發(fā)布。在2014年的GoogleI/O大會上，谷歌公司推出的全新的設(shè)計(jì)語言MaterialDesign，旨在規(guī)范Android系統(tǒng)的設(shè)備、媲美蘋果的設(shè)計(jì)。截止到2019年，Android系統(tǒng)已經(jīng)發(fā)布了Android 9.0操作系統(tǒng)，而2018年的GoogleI/O大會MaterialDesign也有了重大更新，這些都使得Android系統(tǒng)手機(jī)的使用愈發(fā)的流暢、統(tǒng)一

22、及美觀。對UI設(shè)計(jì)師則面臨著知識的更新及現(xiàn)有UI界面的再設(shè)計(jì)等挑戰(zhàn)。本書將在Android系統(tǒng)界面設(shè)計(jì)章節(jié)深入剖析，幫助UI設(shè)計(jì)師順利解決。1.2.2 App的操作平臺2.Android系統(tǒng)平臺1.2.2 App的操作平臺App設(shè)計(jì)的流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測試、設(shè)計(jì)驗(yàn)證的步驟來進(jìn)行。1.2.3 App的設(shè)計(jì)流程App設(shè)計(jì)流程圖App設(shè)計(jì)的流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)1.分析調(diào)研App的設(shè)計(jì)是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行，不同方向的App，設(shè)計(jì)風(fēng)格也會有區(qū)別。因此先分析需求，了解用戶特征，并進(jìn)行相關(guān)競品的調(diào)研，明確設(shè)計(jì)方向。1.2.3 A

23、pp的設(shè)計(jì)流程 QQ音樂 網(wǎng)易云音樂 蝦米音樂1.分析調(diào)研1.2.3 App的設(shè)計(jì)流程 QQ音樂 2.交互設(shè)計(jì)交互設(shè)計(jì)是對整個(gè)App設(shè)計(jì)進(jìn)行初步構(gòu)思和制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型、架構(gòu)設(shè)計(jì)、流程圖設(shè)計(jì)、線框圖設(shè)計(jì)等具體工作。1.2.3 App的設(shè)計(jì)流程 烏克蘭UI/UX設(shè)計(jì)師Tatiana Lazarenko創(chuàng)作2.交互設(shè)計(jì)1.2.3 App的設(shè)計(jì)流程 烏克蘭UI/U3.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程非常重要的一個(gè)階段?？梢栽趫?zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏缺失的細(xì)節(jié)問題。1.2.3 App的設(shè)計(jì)流程 交互自查3.交互自查1.2.3 App的設(shè)計(jì)流程 交互自查4

24、.界面設(shè)計(jì)原型圖審查通過，就可以進(jìn)入界面的視覺設(shè)計(jì)階段，這個(gè)階段的設(shè)計(jì)圖即產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范、圖片、內(nèi)容真實(shí)，并運(yùn)用墨刀、principle等軟件制作成可交互的高保真原型以便后續(xù)的界面測試。1.2.3 App的設(shè)計(jì)流程 烏克蘭設(shè)計(jì)師StasAristov、AlyaPrigotska、Thanh Do聯(lián)合創(chuàng)作 4.界面設(shè)計(jì)1.2.3 App的設(shè)計(jì)流程 烏克蘭設(shè)計(jì)師S5.界面測試界面測試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此階段共同觀察、記錄。在測試中可以對設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。1.2.3 App的設(shè)計(jì)流程 越南設(shè)計(jì)師Tran Mau Tri

25、Tam進(jìn)行App細(xì)節(jié)調(diào)整5.界面測試1.2.3 App的設(shè)計(jì)流程 越南設(shè)計(jì)師Tr6.設(shè)計(jì)驗(yàn)證設(shè)計(jì)驗(yàn)證是最后一個(gè)階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗(yàn)證前期的設(shè)計(jì)，并繼續(xù)優(yōu)化。1.2.3 App的設(shè)計(jì)流程 XToken0 x設(shè)計(jì)師創(chuàng)作6.設(shè)計(jì)驗(yàn)證1.2.3 App的設(shè)計(jì)流程 XToken01.2.4 App的基本分類 常用App主要可以分為社區(qū)交友、影音娛樂、休閑娛樂、生活服務(wù)、旅游出行、電商平臺、金融理財(cái)、健康醫(yī)療、學(xué)習(xí)教育、資訊閱讀這10類。1.2.4 App的基本分類 常用App主要可以分為社區(qū)1.社區(qū)交友社區(qū)交友App，即通過互聯(lián)網(wǎng)實(shí)現(xiàn)交際往

26、來。常用的社交App有微信、QQ、新浪微博等。1.2.4 App的基本分類 QQ（左）微信（中）新浪微博（右）APPStore中的截圖1.社區(qū)交友1.2.4 App的基本分類 QQ（左）微信2.影音娛樂影音娛樂App，即通過互聯(lián)網(wǎng)上的電影電視、音樂MV以及小視頻進(jìn)行娛樂放松。常用的影音娛樂App有抖音短視頻、騰訊視頻、網(wǎng)易云音樂等。1.2.4 App的基本分類 抖音短視頻（左）騰訊視頻（中）網(wǎng)易云音樂（右）APPStore中的截圖2.影音娛樂1.2.4 App的基本分類 抖音短視頻（3.休閑娛樂休閑娛樂App，即通過互聯(lián)網(wǎng)進(jìn)行找尋餐廳、購買影票以及制作美食等活動(dòng)進(jìn)行放松休閑。常用的休閑娛樂App有大眾點(diǎn)評、貓眼電影、下廚房等。1.2.4 App的基本分類 大眾點(diǎn)評（左）貓眼電影（中）下廚房（右）APPStore中的截圖3.休閑娛樂1.2.4 App的基本分類 大眾點(diǎn)評（左）4.生活服務(wù)生活服務(wù)App，主要通過互聯(lián)網(wǎng)為用戶提供外賣訂菜、求職招聘以及城市出行等相關(guān)服務(wù)。常用的生活服務(wù)App有餓了么、Boss直聘、摩拜單車等。1.2.4 App的基本分類 餓了么（左）Boss直聘（中）摩拜單車（右）APPStore中的截圖4