《Photoshop 移動(dòng)UI設(shè)計(jì)案例教程（全彩慕課版）（第2版）》課件 第1章 初識(shí)移動(dòng)UI設(shè)計(jì)

本章介紹：隨著2009年6月iPhone3GS的發(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)講解。通過本章的學(xué)習(xí)，讀者可以對(duì)移動(dòng)UI設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，有助于高效便利地進(jìn)行后續(xù)的移動(dòng)UI設(shè)計(jì)工作。第1章初識(shí)移動(dòng)UI設(shè)計(jì)掌握移動(dòng)UI設(shè)計(jì)的相關(guān)概念熟悉移動(dòng)UI設(shè)計(jì)的操作平臺(tái)熟悉移動(dòng)UI設(shè)計(jì)的特點(diǎn)掌握移動(dòng)UI設(shè)計(jì)的項(xiàng)目流程掌握移動(dòng)UI設(shè)計(jì)的常用軟件掌握移動(dòng)UI設(shè)計(jì)的學(xué)習(xí)方法學(xué)習(xí)目標(biāo)1.1

移動(dòng)UI設(shè)計(jì)的相關(guān)概念UI設(shè)計(jì)的概念移動(dòng)UI設(shè)計(jì)的概念A(yù)pp的概念用戶界面（UserInterface，UI）設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。優(yōu)秀的UI設(shè)計(jì)不僅要保證界面的美觀，更要保證交互設(shè)計(jì)（InteractionDesign,IxD）的可用性強(qiáng)，用戶體驗(yàn)（UserExperience，UE/UX）的友好度高。1.1.1UI設(shè)計(jì)的概念移動(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)限制。1.1.2移動(dòng)UI設(shè)計(jì)的概念A(yù)pp是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序。用戶主要從應(yīng)用商店下載App，比較著名的應(yīng)用商店有蘋果的AppStore、谷歌的GooglePlayStore等。1.1.3App的概念1.2

移動(dòng)UI設(shè)計(jì)的操作平臺(tái)iOS系統(tǒng)平臺(tái)Android系統(tǒng)平臺(tái)iOS是由美國蘋果公司開發(fā)，專門用于蘋果移動(dòng)設(shè)備中的操作系統(tǒng)。iOS截止到2023年已經(jīng)更新到了iOS17，不管是設(shè)備的改革還是系統(tǒng)的更新，iOS都為用戶帶來了全新的體驗(yàn)。對(duì)于UI設(shè)計(jì)而言，需要快速進(jìn)行iOS設(shè)計(jì)規(guī)范相關(guān)知識(shí)的更新。本書在規(guī)范章節(jié)深入剖析了相關(guān)知識(shí)，幫助UI設(shè)計(jì)師進(jìn)行知識(shí)的升級(jí)。1.2.1iOS系統(tǒng)平臺(tái)Android系統(tǒng)是最初由安迪·魯賓（AndyRubin）開發(fā)的，2005年8月被谷歌收購，2008年10月，第一款A(yù)ndroid系統(tǒng)的智能手機(jī)發(fā)布。1.2.2Android系統(tǒng)平臺(tái)1.設(shè)計(jì)極簡(jiǎn)隨著全面屏手機(jī)的發(fā)行，移動(dòng)設(shè)備的屏幕較之前在尺寸上有了較大的提升，但相對(duì)于PC和筆記本電腦還是較小。因此，要在有限的空間中進(jìn)行元素的設(shè)計(jì)不宜太過復(fù)雜，不然不利于信息的傳遞。1.3移動(dòng)UI設(shè)計(jì)的特點(diǎn)2.交互豐富2007年1月，喬布斯在舊金山發(fā)布了第一代iPhone，開啟了移動(dòng)設(shè)備的智能化。智能化的移動(dòng)設(shè)備較之前傳統(tǒng)手機(jī)擁有著更加友好的用戶體驗(yàn)，這源于它的多點(diǎn)觸摸屏和傳感器。由此造就了手勢(shì)交互、語音交互、重力感應(yīng)交互等一系列更加豐富的交互方式。3.設(shè)計(jì)適配由于現(xiàn)有的智能手機(jī)、平板電腦型號(hào)呈現(xiàn)多樣化，設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，應(yīng)充分考慮文字、圖標(biāo)、圖像甚至是界面布局等適配的問題。就移動(dòng)應(yīng)用來說，設(shè)計(jì)師通常會(huì)選用一款常用的、方便適配的屏幕尺寸進(jìn)行設(shè)計(jì)，而后不必再大規(guī)模對(duì)其他尺寸屏幕的界面進(jìn)行重新布局，只需針對(duì)不同屏幕尺寸進(jìn)行切圖輸出，然后再交由技術(shù)端進(jìn)行適配即可。1.4移動(dòng)UI設(shè)計(jì)的常用軟件界面設(shè)計(jì)類軟件動(dòng)效設(shè)計(jì)類軟件網(wǎng)頁設(shè)計(jì)類軟件3D渲染類軟件思維導(dǎo)圖設(shè)計(jì)類軟件交互原型設(shè)計(jì)類軟件1.PhotoshopPhotoshop，簡(jiǎn)稱“PS”，是由Adobe公司開發(fā)和發(fā)行的圖像處理軟件，截止2023年，已經(jīng)更新到CC2024。在Sketch出現(xiàn)之前，PS是大部分UI設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)的首選工具。1.4.1界面設(shè)計(jì)類軟件2.SketchSketch是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作UI的工具，如為Sketch官方網(wǎng)站新功能介紹截圖。相較PS，它是一款可以迅速上手的輕量級(jí)矢量設(shè)計(jì)工具，不僅UI設(shè)計(jì)師常用，就連產(chǎn)品經(jīng)理和前端開發(fā)人員都能夠迅速掌握，減少了溝通合作中的問題。3.IllustratorIllustrator，簡(jiǎn)稱“AI”，是由Adobe公司開發(fā)和發(fā)行的矢量圖形處理軟件，截止2023年，已經(jīng)更新到CC2024。AI在UI設(shè)計(jì)中除了被廣泛應(yīng)用于插畫設(shè)計(jì)，在圖標(biāo)制作中也顯示了超凡的性能。4.ExperienceDesignExperienceDesign，簡(jiǎn)稱“XD”，是由Adobe公司開發(fā)和發(fā)行的集原型、設(shè)計(jì)和交互于一體的軟件，并于2016年3月發(fā)布了正式預(yù)覽版本。XD的簡(jiǎn)潔彌補(bǔ)了PS在制作UI方面的“臃腫”，同時(shí)它免費(fèi)并兼容Windows和mac雙平臺(tái)的平民化特點(diǎn)又是Sketch無法比擬的。1.AfterEffectsAfterEffects，簡(jiǎn)稱“AE”，是由Adobe公司開發(fā)和發(fā)行的圖形視頻處理軟件，截止2023年，已經(jīng)更新到CC2024。無論是經(jīng)典的插件還是強(qiáng)大的表達(dá)式，都使得AE制作出來的動(dòng)效變得細(xì)膩入微。1.4.2動(dòng)效設(shè)計(jì)類軟件2.PrinciplePrinciple是基于蘋果電腦系統(tǒng)的一款收費(fèi)型專業(yè)制作動(dòng)效的工具。相較于AE性能綜合、體量較大，Principle的優(yōu)勢(shì)在于上手容易、操作簡(jiǎn)單，而且它還能在計(jì)算機(jī)上實(shí)時(shí)預(yù)覽，并在手機(jī)上進(jìn)行交互，不像AE只能導(dǎo)出GIF動(dòng)畫和MP4視頻，無法與手機(jī)交互。Dreamweaver，簡(jiǎn)稱“DW”，開始由美國MACROMEDIA公司開發(fā)，2005年被Adobe公司收購。DW是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁代碼編輯器，擁有所見即所得的功能特點(diǎn)。1.4.3網(wǎng)頁設(shè)計(jì)類軟件CINEMA4D，簡(jiǎn)稱“C4D”，是德國MAXON公司開發(fā)的一款能夠進(jìn)行頂級(jí)建模、動(dòng)畫和渲染的3D動(dòng)畫軟件。其功能非常強(qiáng)大，更能和PS、AI、AE等各類軟件進(jìn)行無縫結(jié)合。1.4.43D渲染類軟件1.MindjetMindManagerMindjetMindManager，俗稱“腦圖”，又叫“心智圖”，由美國Mindjet公司開發(fā)，不僅是一款可以創(chuàng)造、管理和交流思想的繪圖軟件，還是一款項(xiàng)目管理軟件。1.4.5思維導(dǎo)圖設(shè)計(jì)類軟件2.XMindXMind同MindjetMindManager有著一樣的功能，也是一款非常實(shí)用的商業(yè)思維導(dǎo)圖軟件。思維導(dǎo)圖類軟件在UI設(shè)計(jì)方面沒有太大的區(qū)別，一般根據(jù)個(gè)人喜好來選用。1.AxureRPAxureRP，通常稱為“Axure”，是一款專業(yè)的快速原型設(shè)計(jì)工具，于2021年開放了10.0的下載。在10.0的更新中，Axure對(duì)設(shè)計(jì)架構(gòu)進(jìn)行了顛覆式的改變，令軟件的使用效率及體驗(yàn)友好度都大大幅增加。1.4.6交互原型設(shè)計(jì)類軟件2.墨刀墨刀是國內(nèi)開發(fā)的一款在線型原型設(shè)計(jì)工具，于2017年6月開放了V3版本的下載。在V3中，墨刀進(jìn)行了全面更新，除了品牌和組件的升級(jí)優(yōu)化，還支持了Sketch文件的導(dǎo)入并加入了工作流的功能，這使得墨刀更加強(qiáng)大。1.5

移動(dòng)UI設(shè)計(jì)的項(xiàng)目流程分析調(diào)研交互設(shè)計(jì)交互自查界面設(shè)計(jì)界面測(cè)試設(shè)計(jì)驗(yàn)證移動(dòng)設(shè)計(jì)的流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測(cè)試、設(shè)計(jì)驗(yàn)證的步驟來進(jìn)行。1.5

移動(dòng)UI設(shè)計(jì)的項(xiàng)目流程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)研，明確設(shè)計(jì)方向。1.5.1分析調(diào)研交互設(shè)計(jì)是對(duì)整個(gè)App設(shè)計(jì)進(jìn)行初步構(gòu)思和制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型設(shè)計(jì)、架構(gòu)設(shè)計(jì)、流程圖設(shè)計(jì)、線框圖設(shè)計(jì)等具體工作。1.5.2交互設(shè)計(jì)交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程中非常重要的一個(gè)階段?？梢栽趫?zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏的細(xì)節(jié)問題。1.5.3交互自查原型圖審查通過后，就可以進(jìn)入界面的視覺設(shè)計(jì)階段了，這個(gè)階段的設(shè)計(jì)圖即產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范，圖片、內(nèi)容真實(shí)，并運(yùn)用墨刀、principle等軟件制作成可交互的高保真原型以便后續(xù)的界面測(cè)試。1.5.4界面設(shè)計(jì)界面測(cè)試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此階段共同觀察、記錄。在測(cè)試中可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。1.5.5界面測(cè)試設(shè)計(jì)驗(yàn)證是最后一個(gè)階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗(yàn)證前期的設(shè)計(jì)，并繼續(xù)優(yōu)化。1.5.6設(shè)計(jì)驗(yàn)證1.6

移動(dòng)UI設(shè)計(jì)的學(xué)習(xí)方法軟件學(xué)習(xí)開拓眼界臨摹學(xué)習(xí)項(xiàng)目實(shí)戰(zhàn)軟件的學(xué)習(xí)是UI設(shè)計(jì)的剛需和基礎(chǔ)，設(shè)計(jì)師即使有再好的想法，但不能通過軟件制作出來也是徒勞。我們主要需要掌握的軟件有Photoshop、Illustrator和AfterEffects，有條件的設(shè)計(jì)師還可以學(xué)習(xí)Sketch和Principle。1.6.1軟件學(xué)習(xí)眼界的開拓至關(guān)重要，許多UI設(shè)計(jì)師無法做出美觀的界面就是沒有看到太多優(yōu)秀的設(shè)計(jì)。第1種：閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。第2種：閱讀優(yōu)秀書籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的相關(guān)知識(shí)和設(shè)計(jì)應(yīng)用方法。第3種：欣賞優(yōu)秀的作品。1.6