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

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