Photoshop CC 2019圖像處理基礎(chǔ)教程（第7版） 軟件拓展知識匯 1.1 移動UI設(shè)計(jì)的相關(guān)概念- 1.6 移動UI設(shè)計(jì)的學(xué)習(xí)方法

1122UIUIUIUIUI設(shè)計(jì)的概UI設(shè)計(jì)的概念、App的概念進(jìn)行學(xué)習(xí)。UI用戶界面（UserInterface，UI）設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)不僅要保證界面的美觀，更要保證交互設(shè)計(jì)（InteractionDesign,IxD）的可用性強(qiáng)，用戶體驗(yàn)（UserExperience，UE/UX）1-1所示。圖1-1移動UIUIUI設(shè)計(jì)的一個(gè)分支，主要是指針對移動設(shè)備軟件的交互操作邏輯、用戶情感化體UIUI設(shè)計(jì)具有更嚴(yán)格的尺寸要求及手機(jī)系統(tǒng)限制。UIH51-2H5。圖1-2AppApp是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序，如圖1-3所示。用戶主要從應(yīng)用商店下載App，比較著名的應(yīng)用商店有蘋果的AppStore、谷歌的GooglePlayStore等。圖1-3UIiOSAndroidUIiOSiOS是由美國蘋果公司開發(fā)，專門用于蘋果移動設(shè)備中的操作系統(tǒng)，如圖1-1所示。iOS截止到2023iOS17，不管是設(shè)備的改革還是系統(tǒng)的更新，iOS都為用戶帶來了全新的體驗(yàn)。UIiOSUI設(shè)計(jì)師進(jìn)行知識的升級。圖1-1AndroidAndroid系統(tǒng)是最初由安迪（Andy810月，Android2014GoogleI/ODesignAndroidAndroid2023年，AndroidAndroid14.01-22021MaterialYou（MaterialAndroid系統(tǒng)手機(jī)的使用愈發(fā)的流暢、UIUIAndroidUIAndroid系統(tǒng)界面的設(shè)計(jì)知識。 圖1-2移動I移動端界面的設(shè)計(jì)特點(diǎn)具體可以總結(jié)為設(shè)計(jì)極簡、交互豐富以及設(shè)計(jì)適配3個(gè)方面。設(shè)計(jì)極簡PC和筆記本電腦還是較小。因此，要在有限的空間中進(jìn)行元素的設(shè)計(jì)不宜太過復(fù)雜，不然不利于信息的傳遞。UI111-1所示。圖1-1交互豐富20071iPhone1-2所示通過點(diǎn)擊、滑動等手勢完成目標(biāo)。因此，設(shè)計(jì)師在進(jìn)行移動界面設(shè)計(jì)時(shí)還應(yīng)充分考慮到這些人機(jī)交互的形式，提升用戶參與產(chǎn)品使用的積極性，同時(shí)還要注意交互過程的簡潔，方便用戶順利達(dá)成目標(biāo)。圖1-2設(shè)計(jì)適配1-3所示為不同的屏幕尺寸。圖1-3UI移動UI設(shè)計(jì)常用軟件可以分為界面設(shè)計(jì)、動效設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、3D渲染、思維導(dǎo)圖設(shè)計(jì)、交互原型設(shè)計(jì)這6種類型。界面設(shè)計(jì)類軟件1.PhotoshopPhotoshop，簡稱“PSAdobe2023年，已經(jīng)更新CC20241-1AdobePhotoshopSketch出現(xiàn)之前，PS是大部分UI設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)的首選工具。圖1-12.SketchSketchUI1-2Sketch官方網(wǎng)站新PSUI設(shè)計(jì)師常用，就連產(chǎn)品經(jīng)理和前端開發(fā)人員都能夠迅速掌握，減少了溝通合作中的問題。圖1-23.IllustratorIllustratorAdobe2023CC20241-3AdobeIllustrator新功能介紹截圖。AIUI設(shè)計(jì)中除了被廣泛應(yīng)用于插畫設(shè)計(jì)，在圖標(biāo)制作中也顯示了超凡的性能。圖1-34.ExperienceDesignExperienceDesign，簡稱“XDAdobe公司開發(fā)和發(fā)行的集原型、設(shè)計(jì)和交互于一體的軟201631-4ExperienceDesign工作區(qū)界面。XD的簡PSUIWindowsmac雙平臺的平民化特點(diǎn)又是Sketch無法比擬的。圖1-41.AfterEffectsAfterEffects，簡稱“AEAdobe2023年，已CC1-5AdobeAfterEffectsAE制作出來的動效變得細(xì)膩入微。PAGEPAGE3PAGEPAGE4圖1-52.PrinciplePrinciple1-6Principle工作AE性能綜合、體量較大，Principle的優(yōu)勢在于上手容易、操作簡單，而且它還能在AEGIFMP4圖1-61.DreamweaverMACROMEDIAAdobe公司收購。DW是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁代碼編輯器，擁有所見即所得的功能特點(diǎn)，如圖1-7所示為Adobe公司官方網(wǎng)站Dreamweaver新功能介紹截圖。圖1-73D1.CINEMA4DCINEMA4D，簡稱“C4D”，是德國MAXON公司開發(fā)的一款能夠進(jìn)行頂級建模、動畫和渲染的3D動畫軟件，如圖1-8所示為CINEMA4D官方網(wǎng)站新功能介紹截圖。其功能非常強(qiáng)大，更能和PS、AIAEUIC4D設(shè)計(jì)出來的作品被廣Banner、專題頁以及活動頁等。圖1-8思維導(dǎo)圖設(shè)計(jì)類軟件1.MindjetMindManagerMindjetMindManagerMindjet公司開發(fā)，不僅是一款1-9MindjetMindManager官方網(wǎng)站新功能介紹截圖。圖1-92.XMindXMindMindjetMindManager有著一樣的功能，也是一款非常實(shí)用的商業(yè)思維導(dǎo)圖軟件，如圖1-10XmindUI設(shè)計(jì)方面沒有太大的區(qū)別，一般根據(jù)個(gè)人喜好來選用。圖1-10交互原型設(shè)計(jì)類軟件1.AxureRPAxure202110.0的下載。10.0的更新中，Axure對設(shè)計(jì)架構(gòu)進(jìn)行了顛覆式的改變，令軟件的使用效率及體驗(yàn)友好度都大大幅1-11Axure10.0工作區(qū)界面。圖1-112.墨刀20176V3V3中，Sketch文件的導(dǎo)入并加入了工作流的功1-12所示為墨刀工作區(qū)界面。圖1-12PAGEPAGE1PAGEPAGE2移動I移動設(shè)計(jì)的流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測試、設(shè)計(jì)驗(yàn)證的步驟來進(jìn)行，如圖1-1所示。圖1-1分析調(diào)研AppApp，設(shè)計(jì)風(fēng)格也會有區(qū)別，1-2App，但產(chǎn)圖1-2交互設(shè)計(jì)App1-3所示。 圖1-3交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程中非常重要的一個(gè)階段?？梢栽趫?zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏的細(xì)節(jié)問題，如圖1-4所示。圖1-4界面設(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-5所示。圖1-5界面測試界面測試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此階段共同觀察、記錄，如圖1-6所示。在測試中可以對設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。圖1-6設(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-7所示。圖1-7PAGEPAGE122移動IUI軟件學(xué)習(xí)UIPhotoshopIllustrator和AfterEffectsketchPrinciple1-1所示。圖1-1開拓眼界UI3種方法助力設(shè)計(jì)師開拓眼界。1種：閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。當(dāng)然針對初學(xué)者而言首先要學(xué)習(xí)規(guī)范iOSAndroid1-2iOSAndroidMaterialDesign3iOS4Android系統(tǒng)界面設(shè)計(jì)中對其進(jìn)行了深入剖析，以幫助設(shè)計(jì)師理解。圖1-2圖1-2（續(xù)）2UI31-2UI中國、站酷（ZCOOL）、花瓣這1-3所示，并加入收藏，形成自己的資