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

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