《Photoshop 移動(dòng)UI設(shè)計(jì)案例教程（全彩慕課版）（第2版）》課件全套 劉軍偉 第1-5章 初識(shí)移動(dòng)UI設(shè)計(jì)- App界面設(shè)計(jì)實(shí)戰(zhàn)

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

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

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

移動(dòng)UI設(shè)計(jì)的項(xiàng)目流程分析調(diào)研交互設(shè)計(jì)交互自查界面設(shè)計(jì)界面測(cè)試設(shè)計(jì)驗(yàn)證移動(dòng)設(shè)計(jì)的流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測(cè)試、設(shè)計(jì)驗(yàn)證的步驟來(lái)進(jìn)行。1.5

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

移動(dòng)UI設(shè)計(jì)的學(xué)習(xí)方法軟件學(xué)習(xí)開(kāi)拓眼界臨摹學(xué)習(xí)項(xiàng)目實(shí)戰(zhàn)軟件的學(xué)習(xí)是UI設(shè)計(jì)的剛需和基礎(chǔ)，設(shè)計(jì)師即使有再好的想法，但不能通過(guò)軟件制作出來(lái)也是徒勞。我們主要需要掌握的軟件有Photoshop、Illustrator和AfterEffects，有條件的設(shè)計(jì)師還可以學(xué)習(xí)Sketch和Principle。1.6.1軟件學(xué)習(xí)眼界的開(kāi)拓至關(guān)重要，許多UI設(shè)計(jì)師無(wú)法做出美觀的界面就是沒(méi)有看到太多優(yōu)秀的設(shè)計(jì)。第1種：閱讀優(yōu)秀設(shè)計(jì)師的文章，吸收優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)。第2種：閱讀優(yōu)秀書(shū)籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的相關(guān)知識(shí)和設(shè)計(jì)應(yīng)用方法。第3種：欣賞優(yōu)秀的作品。1.6.2開(kāi)拓眼界眼界開(kāi)拓后，需要進(jìn)行相關(guān)的設(shè)計(jì)臨摹。臨摹的來(lái)源首先推崇的是從應(yīng)用中心下載優(yōu)秀的App，截圖保存進(jìn)行臨摹。其次可以尋找文章、書(shū)籍、網(wǎng)站中的優(yōu)秀案例進(jìn)行臨摹。臨摹一定要保證完全一樣并且要多臨摹。1.6.3臨摹學(xué)習(xí)經(jīng)過(guò)一定的積累，最好通過(guò)一套完整的企業(yè)項(xiàng)目來(lái)提升。從原型圖到設(shè)計(jì)稿再到切圖標(biāo)注，甚至可以制作成動(dòng)效Demo。一整套項(xiàng)目的實(shí)戰(zhàn)，會(huì)讓我們?cè)谠O(shè)計(jì)能力上有質(zhì)的提升。1.6.4項(xiàng)目實(shí)戰(zhàn)本章介紹：設(shè)計(jì)規(guī)范在移動(dòng)UI設(shè)計(jì)的工作中有著保證視覺(jué)統(tǒng)一性、提升項(xiàng)目工作效率、提升設(shè)計(jì)細(xì)節(jié)等諸多好處。本章對(duì)iOS系統(tǒng)以及Android系統(tǒng)的基礎(chǔ)設(shè)計(jì)規(guī)范進(jìn)行講解。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)移動(dòng)UI設(shè)計(jì)的基礎(chǔ)規(guī)范有一個(gè)基本的認(rèn)識(shí)，有助于高效便利地進(jìn)行移動(dòng)UI設(shè)計(jì)工作。第二章移動(dòng)UI設(shè)計(jì)規(guī)范了解移動(dòng)UI設(shè)計(jì)的設(shè)計(jì)單位掌握移動(dòng)UI設(shè)計(jì)的基本布局掌握移動(dòng)UI設(shè)計(jì)的文字規(guī)范掌握移動(dòng)UI設(shè)計(jì)的圖標(biāo)規(guī)范掌握移動(dòng)UI的設(shè)計(jì)尺寸熟練搭建移動(dòng)UI的網(wǎng)格系統(tǒng)熟練設(shè)置動(dòng)移UI的字號(hào)掌握適配移動(dòng)UI的不同設(shè)備學(xué)習(xí)目標(biāo)2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范iOS設(shè)計(jì)單位及尺寸iOS界面結(jié)構(gòu)iOS基本布局iOS字體規(guī)范iOS圖標(biāo)規(guī)范1.相關(guān)單位?PPI：像素密度（PixelsPerInch，PPI）。?Asset：比例因子。?物理像素、渲染像素和邏輯像素2.1.1iOS設(shè)計(jì)單位及尺寸2.設(shè)計(jì)尺寸iOS常見(jiàn)的設(shè)備尺寸如圖。在進(jìn)行界面設(shè)計(jì)時(shí)，為了適配大部分尺寸，推薦以iPhone14Pro/15/15Pro為基準(zhǔn)。如果使用Photoshop就創(chuàng)建786px×1704px尺寸的畫(huà)布，如果使用Sketch就建立393pt×852pt尺寸的畫(huà)布。在iOS系統(tǒng)中，界面通常由狀態(tài)欄、導(dǎo)航欄、安全設(shè)計(jì)區(qū)以及標(biāo)簽欄組成。自全面屏上市，界面較之前還多了虛擬主頁(yè)鍵。2.1.2iOS界面結(jié)構(gòu)1.網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)，英文名稱“GridSystems”，又稱為“柵格系統(tǒng)”。在APP中，是利用一系列垂直和水平的參考線，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有秩序。2.1.3iOS基本布局2.組成元素網(wǎng)格系統(tǒng)由①列、②水槽以及③邊距三個(gè)元素組成。列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。3.網(wǎng)格運(yùn)用?單元格：iOS的最小點(diǎn)擊區(qū)域是44pt，即88px（@2x）。因此，在適用性方面，能被整除的偶數(shù)4和8作為iOS最小單元格比較合適。其中4px容易將頁(yè)面切割細(xì)碎，所以比較推薦使用8px。?列：列的數(shù)量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡(jiǎn)潔頁(yè)面時(shí)使用，6、12和24基本滿足所有等分情況，然而24列將頁(yè)面切割太碎，因此實(shí)際使用還是以12列和6列為主。?水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如24、32、40。其中32px（16pt@2x）最為常用。?邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以@2x為基準(zhǔn),常見(jiàn)的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)APP首選的邊距。iOS中的設(shè)置及通用頁(yè)面都采用了30px的邊距。1.系統(tǒng)字體舊金山字體：舊金山字體是非襯線字體，如圖2-13所示，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText（文本模式）適用與小于19pt的文字，SFUIDisplay（展示模式）適用于大于20pt的文字。2.1.4iOS字體規(guī)范紐約字體：紐約字體是襯線字體，旨在補(bǔ)充舊金山字體。對(duì)于小于20pt的文本使用小號(hào)，對(duì)于20到35pt之間的文本使用中號(hào)，對(duì)于36到53pt之間的文本使用大號(hào)，對(duì)于54pt或更大的文本使用特大號(hào)。蘋(píng)方：在iOS系統(tǒng)中，中文使用的是蘋(píng)方字體，該字體共有6個(gè)字重。2.字號(hào)大小iOS設(shè)計(jì)時(shí)要注意字號(hào)的大小。蘋(píng)果官網(wǎng)的建議全部是針對(duì)英文SF字體而言的，中文字體需要UI設(shè)計(jì)師靈活運(yùn)用，以最終呈現(xiàn)效果的實(shí)用性和美觀度為基準(zhǔn)進(jìn)行調(diào)整。在iOS中，圖標(biāo)規(guī)范可以從應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩個(gè)方面進(jìn)行詳盡的剖析。2.1.5iOS圖標(biāo)規(guī)范2.2Android系統(tǒng)設(shè)計(jì)規(guī)范Android設(shè)計(jì)單位及尺寸Android界面結(jié)構(gòu)Android基本布局Android字體規(guī)范Android圖標(biāo)規(guī)范1.相關(guān)單位?DPI：網(wǎng)點(diǎn)密度（DotPerinch，DPI）?獨(dú)立密度像素與獨(dú)立縮放像素2.2.1Android設(shè)計(jì)單位及尺寸2.設(shè)計(jì)尺寸Android常見(jiàn)的設(shè)備尺寸可以分成大小兩類。Android和iOS一樣，只是叫法不同。在Android中，界面通常由狀態(tài)欄、頂部應(yīng)用欄、安全設(shè)計(jì)區(qū)、底部應(yīng)用欄以及虛擬導(dǎo)航欄組成。2.2.2Android界面結(jié)構(gòu)在iOS中已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中不再贅述，直接進(jìn)行Android中網(wǎng)格的布局。?單元格：Android的最小點(diǎn)擊區(qū)域是48dp，因此能被整除的偶數(shù)4和8作為Android最小單元格比較合適。2.2.3Android基本布局?列：列的數(shù)量在手機(jī)設(shè)備上推薦4列，平板電腦上推薦8列。右側(cè)為平板電腦列的數(shù)量。?水槽：水槽和邊距的寬度在手機(jī)設(shè)備上推薦16dp，平板電腦上推薦24dp。?邊距：邊距的寬度可以和水槽統(tǒng)一，也可以根據(jù)產(chǎn)品和水槽不同。當(dāng)Android中邊距的寬度和水槽不同時(shí)，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。1.系統(tǒng)字體Android英文使用的是Roboto字體，共有6個(gè)字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個(gè)字重。2.2.4Android字體規(guī)范2.字號(hào)大小Android設(shè)計(jì)時(shí)要注意字號(hào)的大小。Android各元素以720x1280px為基準(zhǔn)設(shè)計(jì)，可以與iOS對(duì)應(yīng)，其常見(jiàn)的字號(hào)大?。?4px、26px、28px、30px、32px、34px，36px等，最小字號(hào)為20px。在Android中，圖標(biāo)規(guī)范可以根據(jù)MaterialDesign設(shè)計(jì)語(yǔ)言，從應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩個(gè)方面進(jìn)行詳盡的剖析。2.2.5Android圖標(biāo)規(guī)范本章介紹：iOS系統(tǒng)界面設(shè)計(jì)是移動(dòng)UI設(shè)計(jì)中最重要的部分之一，它直接影響著用戶使用App的體驗(yàn)。本章對(duì)iOS系統(tǒng)界面設(shè)計(jì)中的內(nèi)容、布局和組織、菜單和操作、導(dǎo)航和搜索、展示、選擇和輸入以及狀態(tài)進(jìn)行系統(tǒng)講解與演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)iOS系統(tǒng)界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制iOS系統(tǒng)界面的規(guī)范和方法。第三章iOS系統(tǒng)界面設(shè)計(jì)掌握iOS系統(tǒng)界面設(shè)計(jì)中的內(nèi)容掌握iOS系統(tǒng)界面設(shè)計(jì)中的布局和組織掌握iOS系統(tǒng)界面設(shè)計(jì)中的菜單和操作掌握iOS系統(tǒng)界面設(shè)計(jì)中的導(dǎo)航和搜索掌握iOS系統(tǒng)界面設(shè)計(jì)中的呈現(xiàn)方式掌握iOS系統(tǒng)界面設(shè)計(jì)中的選擇和輸入掌握iOS系統(tǒng)界面設(shè)計(jì)中的狀態(tài)學(xué)習(xí)目標(biāo)3.1內(nèi)容課堂案例——制作旅游類App閃屏頁(yè)圖表圖像視圖文本視圖網(wǎng)頁(yè)視圖使用置入嵌入對(duì)象命令置入圖像，使用顏色疊加命令添加效果。3.1.1課堂案例——制作旅游類App閃屏頁(yè)以圖表形式組織數(shù)據(jù)可讓信息傳達(dá)更清晰并更具視覺(jué)吸引力。圖表由多個(gè)圖形元素組成，這些元素描繪數(shù)據(jù)集中的值并傳達(dá)這些值的相關(guān)信息。3.1.2圖表圖像視圖在透明或不透明背景上顯示單張圖像（某些情況下顯示圖像的動(dòng)態(tài)序列）。在圖像視圖內(nèi)，可以拉伸、縮放圖像，調(diào)整圖像大小以適合，或者將圖像固定到特定位置。圖像視圖通常不可交互。3.1.3圖像視圖文本視圖會(huì)顯示樣式化的多行文本內(nèi)容，這些內(nèi)容可否編輯是可選的。文本視圖可以是任意高度，并在內(nèi)容擴(kuò)展到視圖之外時(shí)允許滾動(dòng)。文本視圖中的內(nèi)容默認(rèn)與前緣對(duì)齊，并使用系統(tǒng)標(biāo)簽顏色。在iOS中，如果文本視圖可編輯，鍵盤(pán)會(huì)在用戶選擇該視圖時(shí)出現(xiàn)。3.1.4文本視圖網(wǎng)頁(yè)視圖可直接在你的App內(nèi)加載和顯示豐富的網(wǎng)頁(yè)內(nèi)容，例如嵌入的HTM和網(wǎng)站。3.1.5網(wǎng)頁(yè)視圖3.2布局和組織課堂案例——制作旅游類App酒店詳情頁(yè)方框集合顯示控件標(biāo)簽列表和表格使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.2.1課堂案例——制作旅游類App酒店詳情頁(yè)方框?yàn)樵谶壿嬌舷嚓P(guān)的信息和組件創(chuàng)建了具有獨(dú)特視覺(jué)特征的分組。方框默認(rèn)使用可見(jiàn)邊框或背景顏色將其內(nèi)容與界面的其他部分分開(kāi)。方框也可以包括標(biāo)題。3.2.2方框集合管理一組有序的內(nèi)容，并以可自定義和高度可視化的布局呈現(xiàn)。一般來(lái)說(shuō)，集合適合于顯示基于圖像的內(nèi)容。3.2.3集合顯示控件用于顯示和隱藏特定控件或視圖相關(guān)的信息和功能。3.2.4顯示控件標(biāo)簽是一段可供用戶閱讀的靜態(tài)文本，通常可以拷貝，但不能編輯。標(biāo)簽用于在界面各處、按鈕、菜單項(xiàng)和視圖中顯示文本，以幫助用戶了解當(dāng)前上下文和接下來(lái)可執(zhí)行的操作。3.2.5標(biāo)簽列表和表格在行中的一列或多列內(nèi)呈現(xiàn)數(shù)據(jù)。表格或列表可呈現(xiàn)以群組或?qū)蛹?jí)結(jié)構(gòu)組織的數(shù)據(jù)，還可支持選擇、添加、刪除和重新排序等用戶交互。在iOS系統(tǒng)中，信息按鈕顯示列表項(xiàng)的相關(guān)詳細(xì)信息；它不支持導(dǎo)覽。顯示指示符會(huì)顯示層級(jí)結(jié)構(gòu)中的下一級(jí)，而不會(huì)顯示項(xiàng)目相關(guān)的詳細(xì)信息。3.2.6列表和表格3.3菜單和操作課堂案例——制作旅游類App個(gè)人中心頁(yè)活動(dòng)視圖按鈕上下文菜單編輯菜單菜單彈出式按鈕下拉式按鈕工具欄使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.3.1課堂案例——制作旅游類App個(gè)人中心頁(yè)活動(dòng)視圖通常稱為共享表單，呈現(xiàn)用戶在當(dāng)前環(huán)境中可執(zhí)行的一系列任務(wù)。用戶習(xí)慣在選取“共享”按鈕時(shí)訪問(wèn)系統(tǒng)提供的活動(dòng)。避免提供另一種執(zhí)行相同任務(wù)的方式，否則可能會(huì)令用戶感到困惑。3.3.2活動(dòng)視圖按鈕用于發(fā)起瞬時(shí)操作。當(dāng)需要為無(wú)法立即完成的操作提供相關(guān)反饋時(shí)，配置按鈕以顯示活動(dòng)指示符。3.3.3按鈕上下文菜單可讓用戶訪問(wèn)與項(xiàng)目直接相關(guān)的功能，并且不會(huì)導(dǎo)致界面雜亂。雖然上下文菜單提供了訪問(wèn)常用項(xiàng)目的便捷方式，但它默認(rèn)隱藏，因此用戶可能不知道它的存在。為了顯示上下文菜單，用戶通常會(huì)選取視圖或選擇一些內(nèi)容，然后使用其當(dāng)前配置支持的輸入模式執(zhí)行操作。如：在iOS中系統(tǒng)定義的按住或捏住手勢(shì)。3.3.4上下文菜單編輯菜單除了提供“拷貝”、“選擇”、“翻譯”和“查詢”等相關(guān)命令，還可讓用戶在當(dāng)前視圖中對(duì)所選內(nèi)容進(jìn)行更改。除了文本，編輯菜單的命令還可應(yīng)用到多種類型的可選擇內(nèi)容，如圖像、文件以及聯(lián)系人名片、圖表或地圖位置等對(duì)象。從iOS16起，系統(tǒng)會(huì)自動(dòng)檢測(cè)所選項(xiàng)目的數(shù)據(jù)類型，并可能隨之在編輯菜單中增加相關(guān)操作。如，選擇地址可在編輯菜單中增加獲取路線等項(xiàng)目。3.3.5編輯菜單菜單會(huì)在用戶與其交互時(shí)顯示其選項(xiàng)，從而在App或游戲中以高效利用空間的方式呈現(xiàn)命令。菜單在整個(gè)界面中隨處可見(jiàn)，因此大多數(shù)用戶已經(jīng)知道如何使用。當(dāng)用戶在App或游戲中以一致的方式使用菜單時(shí)，它可以幫助用戶打造熟悉且易于學(xué)習(xí)的體驗(yàn)。3.3.6菜單彈出式按鈕顯示互相排斥選項(xiàng)的菜單。當(dāng)用戶從彈出式按鈕的菜單中選取一個(gè)項(xiàng)目后，菜單會(huì)關(guān)閉，按鈕可更新其內(nèi)容以指示當(dāng)前所選內(nèi)容。3.3.7彈出式按鈕下拉式按鈕顯示與按鈕用途直接相關(guān)的項(xiàng)目或操作菜單。用戶在下拉式按鈕的菜單中選擇一項(xiàng)后，菜單會(huì)關(guān)閉，App會(huì)執(zhí)行所選操作。考慮使用“更多”下拉式按鈕來(lái)呈現(xiàn)不需要在主界面中占據(jù)突出位置的項(xiàng)目。3.3.8下拉式按鈕工具欄可讓用戶便捷訪問(wèn)執(zhí)行當(dāng)前視圖相關(guān)操作的常用命令和控件。事先考慮內(nèi)容位于工具欄下方時(shí)的工具欄半透明效果，左側(cè)為工具欄后未顯示內(nèi)容時(shí)，背景材質(zhì)不會(huì)出現(xiàn)。右側(cè)為當(dāng)內(nèi)容出現(xiàn)在工具欄后面時(shí)，背景材質(zhì)會(huì)發(fā)生改變以和內(nèi)容區(qū)分。3.3.9工具欄3.4導(dǎo)航和搜索課堂案例——制作旅游類App首頁(yè)導(dǎo)航欄搜索欄邊欄標(biāo)簽欄使用矩形工具、橢圓工具和鋼筆工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.4.1課堂案例——制作旅游類App首頁(yè)導(dǎo)航欄顯示在窗口或屏幕頂部，幫助用戶導(dǎo)航內(nèi)容層級(jí)結(jié)構(gòu)。使用大標(biāo)題幫助用戶在導(dǎo)航和滾動(dòng)時(shí)始終清楚其所在位置。當(dāng)用戶開(kāi)始滾動(dòng)內(nèi)容時(shí)，大標(biāo)題會(huì)默認(rèn)轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題，并在用戶滾動(dòng)到頂部時(shí)變回大標(biāo)題，從而提醒當(dāng)前的所在位置，左側(cè)為標(biāo)準(zhǔn)標(biāo)題，右側(cè)為大標(biāo)題。3.4.2導(dǎo)航欄搜索欄可讓用戶按輸入的特定詞來(lái)搜索一系列內(nèi)容。在iOS系統(tǒng)中中，可以使用范圍欄幫助用戶細(xì)化搜索的范圍。3.4.3搜索欄邊欄提供了對(duì)頂層內(nèi)容集合的快速訪問(wèn)，可幫助用戶導(dǎo)航App或游戲。在App中，邊欄指的是頂層區(qū)域和集合的列表，幾乎始終顯示在拆分視圖的主要面板中。3.4.4邊欄標(biāo)簽欄可幫助用戶理解視圖提供的不同類型信息或功能，還可讓用戶在視圖的不同部分之間快速切換，同時(shí)保留各個(gè)部分中的當(dāng)前導(dǎo)覽狀態(tài)。標(biāo)簽欄可以是常規(guī)型或緊湊型，具體取決于當(dāng)前的設(shè)備和方向。3.4.5標(biāo)簽欄3.5呈現(xiàn)方式課堂案例——制作旅游類App引導(dǎo)頁(yè)操作表單提醒頁(yè)面控件彈窗滾動(dòng)視圖表單窗口使用置入嵌入對(duì)象命令置入圖像和圖標(biāo)，使用漸變疊加命令和顏色疊加命令添加效果，使用橫排文字工具輸入文字，使用矩形工具繪制按鈕。3.5.1課堂案例——制作旅游類App引導(dǎo)頁(yè)操作表單是一種模態(tài)視圖，呈現(xiàn)與用戶所發(fā)起操作相關(guān)的選項(xiàng)。3.5.2操作表單提醒會(huì)為用戶提供其立即所需的關(guān)鍵信息。3.5.3提醒頁(yè)面控件顯示一行指示符圖像，其中每個(gè)都代表扁平列表中的一個(gè)頁(yè)面。避免在一個(gè)頁(yè)面控件中使用兩個(gè)以上不同指示符圖像，左側(cè)僅使用兩個(gè)不同的指示符看上去井然有序，并提供了一致的使用體驗(yàn)，使用幾個(gè)不同的指示符可能會(huì)使頁(yè)面控件看起來(lái)眼花繚亂，且不易使用。3.5.4頁(yè)面控件彈出窗口是一種瞬態(tài)視圖，當(dāng)用戶點(diǎn)按或輕點(diǎn)控件或交互區(qū)域時(shí)，它會(huì)顯示在其他內(nèi)容之上。3.5.5彈窗滾動(dòng)視圖讓用戶通過(guò)垂直或水平移動(dòng)內(nèi)容來(lái)查看超出視圖邊框的內(nèi)容。滾動(dòng)視圖本身沒(méi)有外觀，但是，通常在用戶開(kāi)始滾動(dòng)視圖內(nèi)容后，它可以顯示出半透明滾動(dòng)指示符。雖然滾動(dòng)指示符的外觀和行為可能會(huì)因各個(gè)平臺(tái)而異，但所有指示符都會(huì)提供有關(guān)滾動(dòng)操作的視覺(jué)反饋。如在iOS中，指示符會(huì)顯示當(dāng)前可見(jiàn)內(nèi)容是位于視圖的開(kāi)頭、中間還是結(jié)尾附近。3.5.6滾動(dòng)視圖表單可幫助用戶執(zhí)行與其當(dāng)前環(huán)境密切相關(guān)的小范圍任務(wù)。表單默認(rèn)是模態(tài)表單，呈現(xiàn)一種有針對(duì)性的體驗(yàn)，讓用戶在關(guān)閉表單前無(wú)法與父視圖交互。在向用戶請(qǐng)求特定信息或呈現(xiàn)用戶可在返回父視圖前完成的簡(jiǎn)單任務(wù)時(shí)，模態(tài)表單非常有用。3.5.7表單窗口包含呈現(xiàn)App或游戲用戶界面的視圖和組件。窗口（或場(chǎng)景）可能無(wú)法被用戶察覺(jué)，具體取決于平臺(tái)、設(shè)備和環(huán)境。如在iOS平臺(tái)中，全屏幕是默認(rèn)的使用體驗(yàn)。用戶查看窗口中的內(nèi)容并與之交互，而不是查看或與窗口本身交互。在這些情況下，你無(wú)需在App或游戲中設(shè)計(jì)窗口或場(chǎng)景本身的外觀。3.5.8窗口3.6選擇和輸入課堂案例——制作旅游類App登錄頁(yè)顏色池選擇器分段控件滑塊步進(jìn)器文本欄切換虛擬鍵盤(pán)使用矩形工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用顏色疊加命令添加效果，使用橫排文字工具輸入文字。3.6.1課堂案例——制作旅游類App登錄頁(yè)顏色池可讓用戶調(diào)整文本、形狀、參考線和其他屏幕元素的顏色。3.6.2顏色池選擇器顯示包含不同值的一個(gè)或多個(gè)可滾動(dòng)列表供用戶從中選擇。系統(tǒng)提供了多種樣式的選擇器，每種選擇器又提供了不同類型的可選擇值且外觀各異。選擇器中所顯示的確切值及其順序取決于設(shè)備語(yǔ)言。3.6.3選擇器分段控件是兩個(gè)或多個(gè)分段組成的線性集，每個(gè)分段用作一個(gè)按鈕。分段控件中所有分段的寬度通常都相等。分段與按鈕類似，也可以包含文本或圖像。分段下方（或整個(gè)控件下方）也可以有文本標(biāo)簽。3.6.4分段控件滑塊是一個(gè)包含稱為“滾動(dòng)塊”的控件的水平軌道，可讓用戶在最小值和最大值之間進(jìn)行調(diào)整。隨著滑塊值的變化，最小值和滾動(dòng)塊之間的軌道部分會(huì)用顏色填充。你可以選擇為滑塊顯示分別表示最小值和最大值含義的左右圖標(biāo)。3.6.5滑塊步進(jìn)器是一個(gè)兩段式控件，可用于增加或減少增量值。步進(jìn)器位于顯示當(dāng)前值的欄位旁邊，因?yàn)椴竭M(jìn)器本身不顯示值。3.6.6步進(jìn)器文本欄是一個(gè)矩形區(qū)域，用戶可以在其中輸入或編輯特定的小段文本。3.6.7文本欄切換可以讓用戶在一對(duì)相反的狀態(tài)（比如開(kāi)和關(guān)）之間進(jìn)行選擇，它會(huì)使用不同的外觀來(lái)指示每個(gè)狀態(tài)。在大多數(shù)情況下，默認(rèn)的綠色往往效果最好，但也可以使用App的強(qiáng)調(diào)色代替。3.6.8切換在iOS中，系統(tǒng)提供各種類型的虛擬鍵盤(pán)，供用戶用于輸入數(shù)據(jù)，使用布局指南還有助于在屏幕上顯示虛擬鍵盤(pán)時(shí)仍保持界面的重要部分可見(jiàn)。3.6.9虛擬鍵盤(pán)3.7狀態(tài)課堂案例——制作旅游類App消息頁(yè)儀表進(jìn)度指示符使用圓矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.7.1課堂案例——制作旅游類App消息頁(yè)儀表顯示某個(gè)值范圍內(nèi)的特定數(shù)值。除了指示范圍內(nèi)的當(dāng)前值，儀表還可提供關(guān)于范圍本身的更多上下文。例如，溫度儀表可使用文本來(lái)標(biāo)識(shí)范圍內(nèi)的最高溫和最低溫，并顯示色譜來(lái)從視覺(jué)上凸顯變動(dòng)的值。3.7.2儀表進(jìn)度指示符告知用戶App在載入內(nèi)容或執(zhí)行長(zhǎng)時(shí)間操作時(shí)未卡死。進(jìn)度條的軌道默認(rèn)包括已填充和未填充兩部分。在導(dǎo)航欄或工具欄中使用進(jìn)度條時(shí)，例如顯示頁(yè)面載入，請(qǐng)將其配置為隱藏軌道的未填充部分。刷新控件可讓用戶立即重新載入內(nèi)容（通常在表格視圖中），無(wú)需等待內(nèi)容下次自動(dòng)更新。3.7.3進(jìn)度指示符使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖標(biāo)，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.8課堂練習(xí)——制作旅游類App訂購(gòu)房型頁(yè)使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.9課后習(xí)題——制作旅游類App定制路線頁(yè)本章介紹：Android系統(tǒng)界面設(shè)計(jì)是移動(dòng)UI設(shè)計(jì)中最重要的部分之一，它直接影響著用戶使用App的體驗(yàn)。本章對(duì)Android系統(tǒng)界面設(shè)計(jì)中多種組件進(jìn)行系統(tǒng)講解與演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)Android系統(tǒng)界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制Android系統(tǒng)界面的規(guī)范和方法。第四章Android系統(tǒng)界面設(shè)計(jì)掌握Android系統(tǒng)界面設(shè)計(jì)中的操作組件掌握Android系統(tǒng)界面設(shè)計(jì)中的反饋組件Android系統(tǒng)界面設(shè)計(jì)中的容器組件掌握Android系統(tǒng)界面設(shè)計(jì)中的導(dǎo)航組件掌握Android系統(tǒng)界面設(shè)計(jì)中的選擇組件掌握Android系統(tǒng)界面設(shè)計(jì)中的文本輸入組件學(xué)習(xí)目標(biāo)4.1操作組件課堂案例——制作家具類App詳情頁(yè)常規(guī)按鈕擴(kuò)展懸浮操作按鈕懸浮操作按鈕圖標(biāo)按鈕分段按鈕使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字，使用圖案疊加命令制作背景。4.1.1課堂案例——制作家具類App詳情頁(yè)常規(guī)按鈕用于提示UI中的大多數(shù)操作，傳達(dá)用戶可以采取的操作。它們通常放置對(duì)話框、模態(tài)窗口、表單、卡片、工具欄等移動(dòng)UI界面中的組件中。它可以包含前置圖標(biāo)，通常細(xì)分為漂浮按鈕、填充按鈕、色調(diào)填充按鈕、輪廓按鈕和文本按鈕五種類型。4.1.2常規(guī)按鈕使用常規(guī)的懸浮操作按鈕可能會(huì)不夠清晰，因此可以使用擴(kuò)展懸浮操作按鈕。擴(kuò)展懸浮操作按鈕是最突出的按鈕，用于執(zhí)行屏幕上最常見(jiàn)或最重要的操作。在具有長(zhǎng)滾動(dòng)視圖且需要持續(xù)訪問(wèn)操作的屏幕（例如結(jié)賬屏幕）上使用擴(kuò)展懸浮操作按鈕。不要在無(wú)法滾動(dòng)的視圖中使用擴(kuò)展懸浮操作按鈕。其可以同時(shí)包含圖標(biāo)和標(biāo)簽文本。4.1.3擴(kuò)展懸浮操作按鈕懸浮操作按鈕用于執(zhí)行屏幕上最常見(jiàn)或最重要的操作，其圖標(biāo)必須清晰易懂，當(dāng)內(nèi)容滾動(dòng)時(shí)擴(kuò)展懸浮操作按鈕始終保留在屏幕上。4.1.4懸浮操作按鈕圖標(biāo)按鈕用于幫助人們執(zhí)行一些小動(dòng)作，其圖標(biāo)必須使用含義明確的系統(tǒng)圖標(biāo)。懸停時(shí)，會(huì)顯示按鈕的操作提示。圖標(biāo)按鈕可以代表“打開(kāi)操作”，也可以代表“打開(kāi)”和“關(guān)閉”的雙重操作。圖標(biāo)按鈕可以組合在一起，也可以單獨(dú)存在。它通常細(xì)分為標(biāo)準(zhǔn)和包含兩種類型。使用輪廓樣式圖標(biāo)代表未選擇狀態(tài)，使用填充樣式圖標(biāo)代表選擇狀態(tài)的圖標(biāo)。使用圖標(biāo)按鈕需要以緊湊的布局顯示操作。4.1.5圖標(biāo)按鈕分段按鈕用于幫助人們選擇選項(xiàng)、切換視圖或排序元素。分段按鈕可以包含圖標(biāo)、標(biāo)簽文本或同時(shí)包含二者，通常細(xì)分為單選和多選兩種類型，多用于兩到五個(gè)項(xiàng)目之間的簡(jiǎn)單選擇。4.1.6分段按鈕4.2反饋組件課堂案例——制作家具類App分類頁(yè)角標(biāo)進(jìn)度指示器底部提示欄工具提示使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用橫排文字工具輸入文字。4.2.1課堂案例——制作家具類App分類頁(yè)角標(biāo)用于顯示導(dǎo)航項(xiàng)和圖標(biāo)上的通知、計(jì)數(shù)或狀態(tài)信息。其包含標(biāo)簽或數(shù)字，通常細(xì)分為小型和大型兩種類型。小角標(biāo)是一個(gè)簡(jiǎn)單的圓圈，用于指示未讀通知。大角標(biāo)包含傳達(dá)物品計(jì)數(shù)信息的標(biāo)簽文本。角標(biāo)位于圖標(biāo)邊框內(nèi)，位于圖標(biāo)的右上方。包括“+”，將其內(nèi)容限制為四個(gè)字符，并且保留默認(rèn)顏色。4.2.2角標(biāo)進(jìn)度指示器用于實(shí)時(shí)顯示進(jìn)程狀況，對(duì)所有的流程實(shí)例使用相同的進(jìn)度指示器。它們傳達(dá)應(yīng)用程序的狀態(tài)并指示可用的操作，如用戶是否可以離開(kāi)當(dāng)前屏幕。當(dāng)顯示一系列流程的進(jìn)度時(shí)，應(yīng)指示整體進(jìn)度而不是每個(gè)活動(dòng)的進(jìn)度。其通?？梢约?xì)分為線性和圓形兩種類型。同時(shí)切勿將它們用于裝飾，它們通過(guò)運(yùn)動(dòng)吸引用戶注意力。4.2.3進(jìn)度指示器底部提示欄通常出現(xiàn)在屏幕底部，顯示簡(jiǎn)短的應(yīng)用程序流程更新，其可以自行消失或保留在屏幕上，直到用戶采取操作，并且一次只能顯示一個(gè)底部提示欄。底部提示欄可以包含單個(gè)操作。其中“關(guān)閉”或“取消”操作是可選的。底部提示欄傳達(dá)的消息干擾性最小，并且不需要用戶操作。底部提示欄不應(yīng)中斷用戶的體驗(yàn)。4.2.4底部提示欄工具提示顯示簡(jiǎn)短的標(biāo)簽或消息，使用工具提示向按鈕或其他移動(dòng)UI元素提供了附加的上下文。其通常細(xì)分為簡(jiǎn)單的工具提示和豐富的工具提示兩種類型，豐富工具提示可以包括可選標(biāo)題、鏈接和按鈕。使用簡(jiǎn)單的工具提示來(lái)描述圖標(biāo)按鈕的元素或操作，使用豐富的工具提示提供更多詳細(xì)信息，例如描述功能的價(jià)值。4.2.5工具提示4.3容器組件課堂案例——制作家具類App個(gè)人中心頁(yè)卡片走馬燈對(duì)話框分隔線列表使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.3.1課堂案例——制作家具類App個(gè)人中心頁(yè)卡片是單個(gè)主題內(nèi)容和操作的集合，使用卡片時(shí)會(huì)包含相關(guān)主題的元素，其內(nèi)容可以包括圖像、標(biāo)題、文本、按鈕和列表的任何內(nèi)容，還可以包含其他組件。卡片應(yīng)該易于掃描以獲取相關(guān)且可操作的信息。放置在卡片上的文本和圖像等元素應(yīng)清晰指示層次結(jié)構(gòu)。它通常細(xì)分為漂浮式、填充式、輪廓式三種類型?？ㄆ鶕?jù)其內(nèi)容具有靈活的布局和尺寸。4.3.2卡片走馬燈展示了一組可以在屏幕上滾動(dòng)的視覺(jué)項(xiàng)目，包含圖像或視頻以及可選的標(biāo)簽文本。其通?？梢约?xì)分為多瀏覽、無(wú)限制、游戲和全屏四種布局，可以開(kāi)始對(duì)齊或中心對(duì)齊。4.3.3走馬燈對(duì)話框在用戶流中提供重要提示，使用對(duì)話框可以確保用戶根據(jù)信息采取行動(dòng)，多用于確認(rèn)刪除等高風(fēng)險(xiǎn)操作。其出現(xiàn)在應(yīng)用程序內(nèi)容前面的模式窗口，用于提供關(guān)鍵信息或要求做出決定。對(duì)話框出現(xiàn)時(shí)會(huì)禁用所有應(yīng)用程序功能，并保留在屏幕上，直到確認(rèn)、取消或采取所需操作。對(duì)話框是有意中斷的，因此應(yīng)謹(jǐn)慎使用。通常細(xì)分為基本和全屏兩種類型。對(duì)話框應(yīng)只完成單個(gè)任務(wù)，同時(shí)可以顯示與任務(wù)相關(guān)的信息。4.3.4對(duì)話框分隔線是在列表或其他容器中將內(nèi)容分組的細(xì)線條，分隔線可見(jiàn)但不能過(guò)粗。僅當(dāng)無(wú)法用開(kāi)放空間對(duì)項(xiàng)目進(jìn)行分組時(shí)才使用分隔線，使用分隔線對(duì)項(xiàng)目組進(jìn)行分組，而不是分割單個(gè)項(xiàng)目。其通?？梢约?xì)分為全寬式和插入式兩種類型。4.3.5分隔線列表是連續(xù)的、垂直的文本和圖像索引，通常以數(shù)字等邏輯方式對(duì)列表項(xiàng)目進(jìn)行排序。使用列表可以幫助用戶找到特定項(xiàng)目并對(duì)其進(jìn)行操作。其根據(jù)尺寸可以細(xì)分為一行、兩行和三行三種類型。項(xiàng)目?jī)?nèi)容應(yīng)簡(jiǎn)短且易于掃描，圖標(biāo)應(yīng)和文本、操作格式一致。4.3.6列表4.4導(dǎo)航組件課堂案例——制作家具類App首頁(yè)底部應(yīng)用欄導(dǎo)航欄抽屜式導(dǎo)航導(dǎo)航軌道搜索選項(xiàng)卡頂部應(yīng)用欄使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.4.1課堂案例——制作家具類App首頁(yè)底部應(yīng)用欄顯示移動(dòng)和平板電腦屏幕底部的導(dǎo)航和關(guān)鍵動(dòng)作，使用底部應(yīng)用欄可以引起用戶對(duì)重要操作的注意。其最多可包含四個(gè)圖標(biāo)按鈕和一個(gè)懸浮操作按鈕。底部應(yīng)用程序欄底部應(yīng)用欄布局和內(nèi)容可以在應(yīng)用程序的不同屏幕上發(fā)生變化，同時(shí)在移動(dòng)設(shè)備上更加便于訪問(wèn)。4.4.2底部應(yīng)用欄導(dǎo)航欄曾經(jīng)被命名為底部導(dǎo)航欄，允許用戶在移動(dòng)設(shè)備上切換用戶界面視圖。在緊湊的布局中使用導(dǎo)航欄，可以包含3-5個(gè)同等重要的導(dǎo)航，這些導(dǎo)航在應(yīng)用程序屏幕上的設(shè)計(jì)風(fēng)格應(yīng)保持一致，不應(yīng)發(fā)生改變。每個(gè)導(dǎo)航都由一個(gè)圖標(biāo)和可選的文本標(biāo)簽表示。當(dāng)點(diǎn)擊或聚焦導(dǎo)航欄圖標(biāo)時(shí)，用戶將被帶到與該圖標(biāo)關(guān)聯(lián)的導(dǎo)航目的地。4.4.3導(dǎo)航欄抽屜式導(dǎo)航讓用戶在移動(dòng)UI的設(shè)備上切換用戶界面視圖，可以提供對(duì)目的地和應(yīng)用程序功能的訪問(wèn)，如切換帳戶。它們可以永久顯示在屏幕上，也可以通過(guò)導(dǎo)航菜單圖標(biāo)打開(kāi)和關(guān)閉。4.4.4抽屜式導(dǎo)航導(dǎo)航軌道讓用戶可以在不同設(shè)備上的UI視圖之間切換，建議在中等布局或擴(kuò)展布局中使用導(dǎo)航軌道。其可包含3-7個(gè)導(dǎo)航以及可選的懸浮操作按鈕。導(dǎo)航軌道始終將導(dǎo)航欄放在同一位置，即使在應(yīng)用程序的不同屏幕上也是如此。4.4.5導(dǎo)航軌道搜索是一種導(dǎo)航方法，允許用戶輸入關(guān)鍵字或短語(yǔ)以快速獲取相關(guān)信息，用戶在搜索欄或搜索視圖的中輸入文本查詢，然后查看相關(guān)結(jié)果。搜索欄可以包含前導(dǎo)的搜索圖標(biāo)和可選的尾隨圖標(biāo)，在用戶鍵入時(shí)搜索欄可以顯示建議的關(guān)鍵字或短語(yǔ)，并始終在搜索視圖中顯示結(jié)果。4.4.6搜索選項(xiàng)卡跨不同屏幕和視圖組織內(nèi)容，使用選項(xiàng)卡將處于同一層次結(jié)構(gòu)級(jí)別的內(nèi)容進(jìn)行分組。設(shè)計(jì)時(shí)應(yīng)將選項(xiàng)卡作為對(duì)等項(xiàng)并排放置，選項(xiàng)卡可以水平滾動(dòng)，因此移動(dòng)UI可以根據(jù)需要擁有任意數(shù)量的選項(xiàng)卡。其通?？梢约?xì)分為主選項(xiàng)卡和次選項(xiàng)卡兩種類型。4.4.7選項(xiàng)卡頂部應(yīng)用欄提供與當(dāng)前屏幕相關(guān)的內(nèi)容和操作，有時(shí)還會(huì)對(duì)關(guān)鍵旅程進(jìn)行跨應(yīng)用程序訪問(wèn)。頂部應(yīng)用程欄與設(shè)備窗口具有相同的寬度，在滾動(dòng)時(shí)，頂部應(yīng)用程欄的顏色將與正文內(nèi)容有所區(qū)分。其通常細(xì)分為中心對(duì)齊、小、中和大四種類型。4.4.8頂部應(yīng)用欄4.5選擇組件課堂案例——制作家具類App購(gòu)物車頁(yè)復(fù)選框紙片菜單單選按鈕滑塊開(kāi)關(guān)使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.5.1課堂案例——制作家具類App購(gòu)物車頁(yè)復(fù)選框允許用戶從列表中選擇一項(xiàng)或多項(xiàng)，以及呈現(xiàn)包含子選擇的列表。視覺(jué)上相似的選項(xiàng)應(yīng)分組在一起，標(biāo)簽應(yīng)簡(jiǎn)潔易讀，選定的項(xiàng)目比未選定的項(xiàng)目更突出。4.5.2復(fù)選框紙片可以令用戶輸入信息、做出選擇、過(guò)濾內(nèi)容或觸發(fā)操作，適合幫助用戶更快、更輕松地完成當(dāng)前任務(wù)。其通常細(xì)分為輔助、過(guò)濾、輸入和建議四種類型。4.5.3紙片菜單在臨時(shí)表面上顯示選項(xiàng)列表，如頂部應(yīng)用欄中的一組二級(jí)操作。它允許用戶從多個(gè)選項(xiàng)中進(jìn)行選擇，占用的空間也更少。菜單在與元素（例如圖標(biāo)、按鈕或輸入字段）交互或用戶執(zhí)行特定操作時(shí)被打開(kāi)，菜單顯示的項(xiàng)目應(yīng)簡(jiǎn)潔易讀。4.5.4菜單單選按鈕一次只能選擇一個(gè)單選按鈕，是允許用戶從選項(xiàng)列表中進(jìn)行單一選擇的推薦方式。其選定的項(xiàng)目比未選定的項(xiàng)目更突出，標(biāo)簽應(yīng)簡(jiǎn)潔易讀。4.5.5單選按鈕滑塊允許用戶沿軌跡查看和選擇值或范圍，它們適用于調(diào)整音量和亮度等設(shè)置，或應(yīng)用圖像濾鏡?；瑝K應(yīng)呈現(xiàn)可用的全部選擇，可以使用圖標(biāo)或標(biāo)簽來(lái)表示數(shù)字或相對(duì)比例。其通常細(xì)分為連續(xù)和離散兩種類型。4.5.6滑塊開(kāi)關(guān)可以打開(kāi)或關(guān)閉項(xiàng)目，是讓用戶調(diào)整設(shè)置的最佳方式。如果列表中的項(xiàng)目可以獨(dú)立控制，請(qǐng)使用開(kāi)關(guān)，同時(shí)確保開(kāi)關(guān)的選擇一目了然。4.5.7開(kāi)關(guān)4.6文本輸入組件課堂案例——制作家具類App注冊(cè)頁(yè)文本域使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用橫排文字工具輸入文字。4.6.1課堂案例——制作家具類App注冊(cè)頁(yè)文本域允許用戶在移動(dòng)UI中輸入文本，當(dāng)用戶需要填寫(xiě)聯(lián)系信息或付款信息時(shí)，應(yīng)使用文本域。文本域通常出現(xiàn)在表單和對(duì)話框中，并帶給用戶交互感。文本域的空白