Photoshop CC 2019圖像處理基礎教程（第7版） 軟件拓展知識匯 1.1 移動UI設計的相關概念- 1.6 移動UI設計的學習方法

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