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

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

移動UI設(shè)計的相關(guān)概念UI設(shè)計的概念移動UI設(shè)計的概念App的概念用戶界面（UserInterface，UI）設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。優(yōu)秀的UI設(shè)計不僅要保證界面的美觀，更要保證交互設(shè)計（InteractionDesign,IxD）的可用性強，用戶體驗（UserExperience，UE/UX）的友好度高。1.1.1UI設(shè)計的概念移動UI設(shè)計是UI設(shè)計的一個分支，主要是指針對移動設(shè)備軟件的交互操作邏輯、用戶情感化體驗、界面元素美觀的整體設(shè)計。移動UI設(shè)計因其設(shè)備的獨特性，較其他類型的UI設(shè)計具有更嚴格的尺寸要求及手機系統(tǒng)限制。1.1.2移動UI設(shè)計的概念App是應用程序Application的縮寫，一般指智能手機的第三方應用程序。用戶主要從應用商店下載App，比較著名的應用商店有蘋果的AppStore、谷歌的GooglePlayStore等。1.1.3App的概念1.2

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

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

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

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