PhotoshopCC移動(dòng)UI設(shè)計(jì)-1-初識(shí)移動(dòng)UI設(shè)計(jì)

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

2、基本概念了解App的操作平臺(tái)熟練App的設(shè)計(jì)流程了解App的基本分類學(xué)習(xí)目標(biāo)移動(dòng)UI設(shè)計(jì)屬于UI設(shè)計(jì)的一個(gè)分支，想要系統(tǒng)全面的認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)，需要對(duì)UI設(shè)計(jì)的相關(guān)概念以及移動(dòng)UI設(shè)計(jì)的概念、特點(diǎn)、原則、常用軟件、學(xué)習(xí)方法這幾個(gè)方面進(jìn)行學(xué)習(xí)。1.1 認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)UI即User Interface（用戶界面）的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。優(yōu)秀的UI設(shè)計(jì)不僅要保證界面的美觀度，更要保證了交互設(shè)計(jì)（英文Interaction Design, 縮寫IxD）的可用性及用戶體驗(yàn)（User Experience，簡(jiǎn)稱UE/UX）的友好度。在設(shè)計(jì)領(lǐng)域，UI現(xiàn)在被廣泛分為WUI

3、和GUI。WUI全稱Web User Interface，即網(wǎng)頁(yè)界面。在企業(yè)中，WUI設(shè)計(jì)師主要從事PC端網(wǎng)頁(yè)設(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)概念移動(dòng)UI設(shè)計(jì)是UI設(shè)計(jì)的一個(gè)分支，主要是指針對(duì)移動(dòng)設(shè)備軟件的交互操作邏輯、用戶情感化體驗(yàn)、界面元素美觀的整體設(shè)計(jì)。移動(dòng)UI設(shè)計(jì)因其設(shè)備的獨(dú)特性，較其他類型的UI設(shè)計(jì)具有更嚴(yán)格的尺寸要求及手機(jī)系統(tǒng)限制。從設(shè)計(jì)范疇來(lái)看，移動(dòng)UI設(shè)計(jì)主要體現(xiàn)在移動(dòng)應(yīng)用界面設(shè)計(jì)、移動(dòng)端網(wǎng)頁(yè)界面設(shè)計(jì)、微信小

4、程序設(shè)計(jì)及H5設(shè)計(jì)等。 1.1.2 移動(dòng)UI設(shè)計(jì)的概念 美國(guó)設(shè)計(jì)師Andrea Hock創(chuàng)作的App（左）微信跳一跳小程序（中） 網(wǎng)易新聞小易游戲機(jī)H5（右）1.設(shè)計(jì)極簡(jiǎn)雖然隨著iPhone XS Max、華為Mate 20系列等全面屏手機(jī)的發(fā)行，移動(dòng)設(shè)備的屏幕較之前在尺寸上有了較大的提升，但相對(duì)于PC和筆記本電腦還是較小。因此要在有限的空間中進(jìn)行元素的設(shè)計(jì)不宜太過(guò)復(fù)雜，不然不利于信息的傳遞?？v觀移動(dòng)UI的設(shè)計(jì)發(fā)展亦是從擬物化到扁平化，甚至為了更好的進(jìn)行信息展示，iOS11之后的設(shè)計(jì)風(fēng)格都圍繞著“大而粗、簡(jiǎn)而美”的原則進(jìn)行界面設(shè)計(jì)。 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 美國(guó)設(shè)計(jì)師Johny vin

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

6、后不必再大規(guī)模對(duì)其他尺寸屏幕的界面進(jìn)行重新布局，設(shè)計(jì)師只需針對(duì)不同屏幕尺寸進(jìn)行切圖輸出，然后再交由技術(shù)端進(jìn)行適配。 1.1.3 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 設(shè)計(jì)適配在進(jìn)行移動(dòng)UI設(shè)計(jì)時(shí)需要遵循iOS系統(tǒng)和Android系統(tǒng)，因此可以根據(jù)iOS系統(tǒng)下的設(shè)計(jì)原則以及Android系統(tǒng)下MaterialDesign語(yǔ)言中的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。1.iOS設(shè)計(jì)原則iOS系統(tǒng)設(shè)計(jì)有清晰、遵從、深度三大原則。2.MaterialDesign設(shè)計(jì)原則MaterialDesign語(yǔ)言有材質(zhì)隱喻、大膽夸張、動(dòng)效表意、靈活、跨平臺(tái)五大原則。 1.1.4 移動(dòng)UI設(shè)計(jì)的原則 1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件 UI設(shè)計(jì)常用軟件

7、可以通過(guò)界面設(shè)計(jì)、動(dòng)效設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、3D渲染、思維導(dǎo)圖、交互原型這6個(gè)方面進(jìn)行介紹。1.界面設(shè)計(jì)類：PhotoshopPhotoshop，簡(jiǎn)稱“PS”，是由Adobe公司開(kāi)發(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ū)界面截圖SketchSketch是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作UI的工具。相較PS，它是一款可以迅速上手的輕量級(jí)矢量設(shè)計(jì)工具，不僅對(duì)UI設(shè)計(jì)師，就連產(chǎn)品經(jīng)理和前端開(kāi)發(fā)都能夠迅速掌握，減少了溝通合作的問(wèn)題。 Sketc

8、h工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件IllustratorIllustrator，簡(jiǎn)稱“AI”，是由Adobe公司開(kāi)發(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ì)的常用軟件Experience DesignExperience Design，簡(jiǎn)稱“XD”，是由Adobe公司開(kāi)發(fā)和發(fā)行的集原型、設(shè)計(jì)和交互于一體的軟件，并于2016年3月發(fā)布了正式預(yù)覽版本。XD的簡(jiǎn)潔既彌補(bǔ)了PS制作UI方面時(shí)的臃腫，同時(shí)它免費(fèi)并兼容Win

9、dows和mac雙平臺(tái)的平民化又是Sketch無(wú)法比擬的。 Experience Design工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件2.動(dòng)效設(shè)計(jì)類：AfterEffectsAfterEffects，簡(jiǎn)稱“AE”，是由Adobe公司開(kāi)發(fā)和發(fā)行的圖形視頻處理軟件，截止2018年10月，已經(jīng)更新到CC201。無(wú)論是經(jīng)典的插件還是強(qiáng)大的表達(dá)式，都使得AE制作出來(lái)的動(dòng)效變得細(xì)膩入微。 After Effects工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件PrinciplePrinciple是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作動(dòng)效的工具。較AE的綜合及體量，它的優(yōu)勢(shì)更在于上手容易、操作簡(jiǎn)單，而

10、且它還能在電腦上實(shí)時(shí)預(yù)覽并在手機(jī)上進(jìn)行交互，不像AE智能導(dǎo)出GIF動(dòng)畫和MP4視頻，無(wú)法交互。 Principle工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件3.網(wǎng)頁(yè)設(shè)計(jì)類：DreamweaverDreamweaver，簡(jiǎn)稱“DW”，開(kāi)始由美國(guó)MACROMEDIA公司開(kāi)發(fā)，2005年被Adobe公司收購(gòu)。DW是一款集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的網(wǎng)頁(yè)代碼編輯器，而且它還擁有著所見(jiàn)即所得的功能特點(diǎn)。 Dreamweaver工作區(qū)界面截圖1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件Hype3Hype3是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作網(wǎng)頁(yè)設(shè)計(jì)的工具,它主要優(yōu)勢(shì)體現(xiàn)在能幫助不會(huì)編程的設(shè)計(jì)師輕松創(chuàng)建HTML5和

11、復(fù)雜的動(dòng)畫效果。在響應(yīng)式方面Hype3有著特別優(yōu)秀的表現(xiàn)。 Hype3工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件4.3D渲染類：CINEMA 4DCINEMA 4D,簡(jiǎn)稱“C4D”，是德國(guó)MAXON開(kāi)發(fā)的一款能夠進(jìn)行頂級(jí)的建模、動(dòng)畫和渲染的3D動(dòng)畫軟件。其功能非常強(qiáng)大更能和PS、AI、AE等各類軟件進(jìn)行無(wú)縫結(jié)合。近些年被UI設(shè)計(jì)師大量追捧，通過(guò)C4D設(shè)計(jì)出來(lái)的作品被廣泛運(yùn)用到Banner、專題頁(yè)以及活動(dòng)頁(yè)等。 CINEMA 4D工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件5.思維導(dǎo)圖類：Mindjet MindManagerMindjet MindManager，俗稱“腦圖”，又叫“心智圖”

12、， 由美國(guó)Mindjet公司開(kāi)發(fā)的一款不僅可以創(chuàng)造、管理和交流思想的繪圖軟件，更能方便使用的項(xiàng)目管理軟件。 Mindjet MindManager工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件XMindXMind,同Mindjet MindManager有著一樣的功能，也是一款常實(shí)用的商業(yè)思維導(dǎo)圖軟件。思維導(dǎo)圖類軟件對(duì)于UI設(shè)計(jì)方面沒(méi)有太大區(qū)分，很多時(shí)候選擇哪款軟件的使用都是根據(jù)個(gè)人喜好。 Xmind工作區(qū)界面1.1.5 移動(dòng)UI設(shè)計(jì)的常用軟件6.交互原型類：Axure RPAxure RP,通常稱為“Axure”,是一款專業(yè)的快速原型設(shè)計(jì)工具,于2018年9月開(kāi)放了9.0Beta的下載。在9.

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

14、的想法，但不能通過(guò)軟件制作出來(lái)也是徒勞。要我們主要需要掌握的軟件有Photoshop、Illustrator、AfterEffects、Axure RP和墨刀，有條件的設(shè)計(jì)師還可以學(xué)習(xí)Sketch和Principle。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 UI設(shè)計(jì)需掌握的主流軟件 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 2.開(kāi)拓眼界眼界的開(kāi)拓至關(guān)重要，許多UI設(shè)計(jì)師無(wú)法做出美觀的界面就是沒(méi)有看到太多優(yōu)秀的設(shè)計(jì)。這里推薦3種方法助力設(shè)計(jì)師開(kāi)拓眼界。第1種:閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。當(dāng)然針對(duì)初學(xué)者而言首先要學(xué)習(xí)規(guī)范類的文章，如iOS設(shè)計(jì)規(guī)范和Android設(shè)計(jì)規(guī)范，二者都可以在網(wǎng)上查到官

15、方的設(shè)計(jì)指南。本書(shū)亦在第3章iOS系統(tǒng)界面設(shè)計(jì)和第4章 Android系統(tǒng)界面設(shè)計(jì)對(duì)其進(jìn)行了深入剖析幫助設(shè)計(jì)師理解。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 iOS設(shè)計(jì)規(guī)范（左）Android設(shè)計(jì)規(guī)范（右）第2種:閱讀優(yōu)秀書(shū)籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的相關(guān)知識(shí)和設(shè)計(jì)應(yīng)用方法。大家可以通過(guò)網(wǎng)上輸入關(guān)鍵詞查找到所需書(shū)籍。通過(guò)閱讀圖書(shū)的內(nèi)容提要和目錄了解書(shū)籍的內(nèi)容和特色，并通過(guò)購(gòu)買所需書(shū)籍來(lái)進(jìn)行全面的學(xué)習(xí)。第3種:欣賞優(yōu)秀的作品，建議設(shè)計(jì)師每天拿出1-2小時(shí)到UI中國(guó)、站酷（ZCOOL）、追波(Dribbble)這些網(wǎng)站瀏覽最新的作品，并加入收藏，形成自己的資料庫(kù)。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 網(wǎng)站推薦

16、 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 3.臨摹學(xué)習(xí)眼界開(kāi)拓后，需要進(jìn)行相關(guān)的設(shè)計(jì)臨摹。臨摹的來(lái)源首先推崇的是從應(yīng)用中心下載優(yōu)秀的APP，截圖保存進(jìn)行臨摹，其次可以從第2步開(kāi)拓眼界中的優(yōu)秀案例進(jìn)行臨摹。臨摹一定要保證完全一樣并且要多臨摹。 1.1.6 移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法 4.項(xiàng)目實(shí)戰(zhàn)經(jīng)過(guò)一定的積累，最好通過(guò)一套完整的企業(yè)項(xiàng)目來(lái)提升。從原型圖到設(shè)計(jì)稿再到切圖標(biāo)注，甚至可以制作成動(dòng)效Demo。一整套項(xiàng)目的實(shí)戰(zhàn)，會(huì)讓我們?cè)谠O(shè)計(jì)能力上有質(zhì)的提升。App的基本概念A(yù)pp的操作平臺(tái)App的設(shè)計(jì)流程App的基本分類1.2 認(rèn)識(shí)AppApp是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序。

17、用戶下載App主要從應(yīng)用商店，比較著名的應(yīng)用商店有蘋果的App Store，谷歌的Google Play Store。應(yīng)用程序的運(yùn)行與系統(tǒng)密不可分，目前市場(chǎng)上，主要的智能手機(jī)操作系統(tǒng)有蘋果公司的iOS系統(tǒng)和谷歌公司的Android系統(tǒng)。對(duì)于UI設(shè)計(jì)師而言，要進(jìn)行移動(dòng)界面設(shè)計(jì)工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)計(jì)知識(shí)。 1.2.1 App的基本概念由美國(guó)設(shè)計(jì)團(tuán)隊(duì)Ron Design Agency創(chuàng)作App的操作平臺(tái)可以分為iOS 和Android兩大平臺(tái)。1.iOS系統(tǒng)平臺(tái)1.2.2 App的操作平臺(tái)iOS是由美國(guó)蘋果公司開(kāi)發(fā)，專門用于蘋果移動(dòng)設(shè)備下的操作系統(tǒng)。iOS截止到2019年已經(jīng)更新到了i

18、OS12，不管是設(shè)備的改革還是系統(tǒng)的更新，iOS都為用戶帶來(lái)了全新的體驗(yàn)。對(duì)于UI設(shè)計(jì)來(lái)言，需要快速進(jìn)行iOS設(shè)計(jì)規(guī)范相關(guān)知識(shí)的更新。本書(shū)在規(guī)范章節(jié)深入剖析了相關(guān)知識(shí)，幫助UI設(shè)計(jì)師進(jìn)行知識(shí)的升級(jí)。iOS系統(tǒng)平臺(tái)2.Android系統(tǒng)平臺(tái)Android系統(tǒng)是最初由安迪魯賓（Andy Rubin）開(kāi)發(fā)，2005年8月被谷歌收購(gòu)，2008年10月，第一款A(yù)ndroid系統(tǒng)的智能手機(jī)發(fā)布。在2014年的GoogleI/O大會(huì)上，谷歌公司推出的全新的設(shè)計(jì)語(yǔ)言MaterialDesign，旨在規(guī)范Android系統(tǒng)的設(shè)備、媲美蘋果的設(shè)計(jì)。截止到2019年，Android系統(tǒng)已經(jīng)發(fā)布了Android 9.

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

20、研，明確設(shè)計(jì)方向。1.2.3 App的設(shè)計(jì)流程 QQ音樂(lè) 網(wǎng)易云音樂(lè) 蝦米音樂(lè)2.交互設(shè)計(jì)交互設(shè)計(jì)是對(duì)整個(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)作3.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程非常重要的一個(gè)階段。可以在執(zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏缺失的細(xì)節(jié)問(wèn)題。1.2.3 App的設(shè)計(jì)流程 交互自查4.界面設(shè)計(jì)原型圖審查通過(guò)，就可以進(jìn)入界面的視覺(jué)設(shè)計(jì)階段，這個(gè)階段的設(shè)計(jì)圖即產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范、圖片

21、、內(nèi)容真實(shí)，并運(yùn)用墨刀、principle等軟件制作成可交互的高保真原型以便后續(xù)的界面測(cè)試。1.2.3 App的設(shè)計(jì)流程 烏克蘭設(shè)計(jì)師StasAristov、AlyaPrigotska、Thanh Do聯(lián)合創(chuàng)作 5.界面測(cè)試界面測(cè)試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開(kāi)發(fā)人員在此階段共同觀察、記錄。在測(cè)試中可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。1.2.3 App的設(shè)計(jì)流程 越南設(shè)計(jì)師Tran Mau Tri Tam進(jìn)行App細(xì)節(jié)調(diào)整6.設(shè)計(jì)驗(yàn)證設(shè)計(jì)驗(yàn)證是最后一個(gè)階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過(guò)用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗(yàn)證前期的設(shè)計(jì)，并繼續(xù)優(yōu)化。1.2.3 App

22、的設(shè)計(jì)流程 XToken0 x設(shè)計(jì)師創(chuàng)作1.2.4 App的基本分類 常用App主要可以分為社區(qū)交友、影音娛樂(lè)、休閑娛樂(lè)、生活服務(wù)、旅游出行、電商平臺(tái)、金融理財(cái)、健康醫(yī)療、學(xué)習(xí)教育、資訊閱讀這10類。1.社區(qū)交友社區(qū)交友App，即通過(guò)互聯(lián)網(wǎng)實(shí)現(xiàn)交際往來(lái)。常用的社交App有微信、QQ、新浪微博等。1.2.4 App的基本分類 QQ（左）微信（中）新浪微博（右）APPStore中的截圖2.影音娛樂(lè)影音娛樂(lè)App，即通過(guò)互聯(lián)網(wǎng)上的電影電視、音樂(lè)MV以及小視頻進(jìn)行娛樂(lè)放松。常用的影音娛樂(lè)App有抖音短視頻、騰訊視頻、網(wǎng)易云音樂(lè)等。1.2.4 App的基本分類 抖音短視頻（左）騰訊視頻（中）網(wǎng)易云音樂(lè)（右）APPStore中的截圖3.休閑娛樂(lè)休閑娛樂(lè)App，即通過(guò)互聯(lián)網(wǎng)進(jìn)行找尋餐廳、購(gòu)買影票以及制作美食等活動(dòng)進(jìn)行放松休閑。常用的休閑娛樂(lè)App有大眾點(diǎn)評(píng)、貓眼電影、下廚房等。1.2.4 App的基本分類 大眾點(diǎn)評(píng)（左）貓眼電影（中）下廚房（右）APPStore中的截圖4.生活服務(wù)生活服務(wù)App，主要通過(guò)互聯(lián)網(wǎng)為用戶提供外賣訂菜、求職招聘以及城市出行等相關(guān)服務(wù)。常用的生活服務(wù)App有餓了么、Boss直聘