第1章初識移動UI設計本章介紹：隨著2009年6月iPhone3GS的發布，移動UI設計正式進入了設計舞臺，由于移動UI有著獨特的交互特點，因此想要從事移動UI設計行業的人員需要系統地學習與更新自己的知識體系。本章對移動UI設計的概念、特點、原則、常用軟件、學習方法以及App的基本概念、操作平臺、設計流程、基本分類進行系統講解。通過本章的學習，讀者可以對移動UI設計有一個宏觀的認識，有助于高效便利地進行后續的移動UI設計工作。掌握UI設計的的相關概念掌握移動UI設計的的概念了解移動UI設計的的特點掌握移動UI設計的的原則熟練移動UI設計的的常用軟件掌握移動UI設計的學習方法掌握App的的基本概念了解App的操作平臺熟練App的設計流程了解App的基本分類學習目標移動UI設計屬于UI設計的一個分支，想要系統全面的認識移動UI設計，需要對UI設計的相關概念以及移動UI設計的概念、特點、原則、常用軟件、學習方法這幾個方面進行學習。1.1認識移動UI設計UI即UserInterface（用戶界面）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。優秀的UI設計不僅要保證界面的美觀度，更要保證了交互設計（英文InteractionDesign,縮寫IxD）的可用性及用戶體驗（UserExperience，簡稱UE/UX）的友好度。在設計領域，UI現在被廣泛分為WUI和GUI。WUI全稱WebUserInterface，即網頁界面。在企業中，WUI設計師主要從事PC端網頁設計的工作。GUI全稱GraphicalUserInterface，即圖形用戶界面。因為移動端包含大量圖形用戶界面，因此在企業中，GUI設計師主要從事移動端App的設計工作

1.1.1UI設計的相關概念移動UI設計是UI設計的一個分支，主要是指針對移動設備軟件的交互操作邏輯、用戶情感化體驗、界面元素美觀的整體設計。移動UI設計因其設備的獨特性，較其他類型的UI設計具有更嚴格的尺寸要求及手機系統限制。從設計范疇來看，移動UI設計主要體現在移動應用界面設計、移動端網頁界面設計、微信小程序設計及H5設計等。

1.1.2移動UI設計的概念

美國設計師AndreaHock創作的App（左）微信跳一跳小程序（中）網易新聞小易游戲機H5（右）1.設計極簡雖然隨著iPhoneXSMax、華為Mate20系列等全面屏手機的發行，移動設備的屏幕較之前在尺寸上有了較大的提升，但相對于PC和筆記本電腦還是較小。因此要在有限的空間中進行元素的設計不宜太過復雜，不然不利于信息的傳遞。縱觀移動UI的設計發展亦是從擬物化到扁平化，甚至為了更好的進行信息展示，iOS11之后的設計風格都圍繞著“大而粗、簡而美”的原則進行界面設計。

1.1.3移動UI設計的特點

美國設計師Johnyvino創作2.交互豐富由于現在市場中智能手機、平板電腦型號的碎片化及多樣化，設計師在進行設計時，應充分考慮到文字、圖標、圖像甚至是界面布局等適配的問題。拿移動應用來說，設計師通常會選用一款常用的、方便適配的屏幕尺寸進行設計，而后不必再大規模對其他尺寸屏幕的界面進行重新布局，設計師只需針對不同屏幕尺寸進行切圖輸出，然后再交由技術端進行適配。

1.1.3移動UI設計的特點

豐富的交互方式3.設計適配由于現在市場中智能手機、平板電腦型號的碎片化及多樣化，設計師在進行設計時，應充分考慮到文字、圖標、圖像甚至是界面布局等適配的問題。拿移動應用來說，設計師通常會選用一款常用的、方便適配的屏幕尺寸進行設計，而后不必再大規模對其他尺寸屏幕的界面進行重新布局，設計師只需針對不同屏幕尺寸進行切圖輸出，然后再交由技術端進行適配。

1.1.3移動UI設計的特點

設計適配在進行移動UI設計時需要遵循iOS系統和Android系統，因此可以根據iOS系統下的設計原則以及Android系統下MaterialDesign語言中的設計原則進行設計。1.iOS設計原則iOS系統設計有清晰、遵從、深度三大原則。2.MaterialDesign設計原則MaterialDesign語言有材質隱喻、大膽夸張、動效表意、靈活、跨平臺五大原則。

1.1.4移動UI設計的原則

1.1.5移動UI設計的常用軟件

UI設計常用軟件可以通過界面設計、動效設計、網頁設計、3D渲染、思維導圖、交互原型這6個方面進行介紹。1.界面設計類：·PhotoshopPhotoshop，簡稱“PS”，是由Adobe公司開發和發行的圖像處理軟件，截止2018年10月，已經更新到CC2019。在Sketch出現之前，PS是大部分UI設計師進行界面設計的首選工具。

1.1.5移動UI設計的常用軟件

Photoshop工作區界面截圖·SketchSketch是基于蘋果電腦系統的一款收費型專業制作UI的工具。相較PS，它是一款可以迅速上手的輕量級矢量設計工具，不僅對UI設計師，就連產品經理和前端開發都能夠迅速掌握，減少了溝通合作的問題。

Sketch工作區界面截圖1.1.5移動UI設計的常用軟件·IllustratorIllustrator，簡稱“AI”，是由Adobe公司開發和發行的矢量圖形處理軟件，截止2018年10月，已經更新到CC2019。AI在UI設計中除了被廣泛應用于插畫設計，在圖標制作中也顯示了超凡的性能。

Illustrator工作區界面截圖1.1.5移動UI設計的常用軟件·ExperienceDesignExperienceDesign，簡稱“XD”，是由Adobe公司開發和發行的集原型、設計和交互于一體的軟件，并于2016年3月發布了正式預覽版本。XD的簡潔既彌補了PS制作UI方面時的臃腫，同時它免費并兼容Windows和mac雙平臺的平民化又是Sketch無法比擬的。

ExperienceDesign工作區界面1.1.5移動UI設計的常用軟件2.動效設計類：·AfterEffectsAfterEffects，簡稱“AE”，是由Adobe公司開發和發行的圖形視頻處理軟件，截止2018年10月，已經更新到CC201。無論是經典的插件還是強大的表達式，都使得AE制作出來的動效變得細膩入微。

AfterEffects工作區界面截圖1.1.5移動UI設計的常用軟件·PrinciplePrinciple是基于蘋果電腦系統的一款收費型專業制作動效的工具。較AE的綜合及體量，它的優勢更在于上手容易、操作簡單，而且它還能在電腦上實時預覽并在手機上進行交互，不像AE智能導出GIF動畫和MP4視頻，無法交互。

Principle工作區界面1.1.5移動UI設計的常用軟件3.網頁設計類：·DreamweaverDreamweaver，簡稱“DW”，開始由美國MACROMEDIA公司開發，2005年被Adobe公司收購。DW是一款集網頁制作和管理網站于一身的網頁代碼編輯器，而且它還擁有著所見即所得的功能特點。

Dreamweaver工作區界面截圖1.1.5移動UI設計的常用軟件·Hype3Hype3是基于蘋果電腦系統的一款收費型專業制作網頁設計的工具,它主要優勢體現在能幫助不會編程的設計師輕松創建HTML5和復雜的動畫效果。在響應式方面Hype3有著特別優秀的表現。

Hype3工作區界面1.1.5移動UI設計的常用軟件4.3D渲染類：·CINEMA4DCINEMA4D,簡稱“C4D”，是德國MAXON開發的一款能夠進行頂級的建模、動畫和渲染的3D動畫軟件。其功能非常強大更能和PS、AI、AE等各類軟件進行無縫結合。近些年被UI設計師大量追捧，通過C4D設計出來的作品被廣泛運用到Banner、專題頁以及活動頁等。

CINEMA4D工作區界面1.1.5移動UI設計的常用軟件5.思維導圖類：·MindjetMindManagerMindjetMindManager，俗稱“腦圖”，又叫“心智圖”，由美國Mindjet公司開發的一款不僅可以創造、管理和交流思想的繪圖軟件，更能方便使用的項目管理軟件。

MindjetMindManager工作區界面1.1.5移動UI設計的常用軟件·XMindXMind,同MindjetMindManager有著一樣的功能，也是一款常實用的商業思維導圖軟件。思維導圖類軟件對于UI設計方面沒有太大區分，很多時候選擇哪款軟件的使用都是根據個人喜好。

Xmind工作區界面1.1.5移動UI設計的常用軟件6.交互原型類：·AxureRPAxureRP,通常稱為“Axure”,是一款專業的快速原型設計工具,于2018年9月開放了9.0Beta的下載。在9.0的更新中Axure進行了顛覆式的設計架構，令軟件的使用效率及體驗友好度都大大幅增加。

Axure9.0工作區界面1.1.5移動UI設計的常用軟件·墨刀墨刀是國內開發的一款在線型原型設計工具，于2017年6月開放了V3版本的下載。在V3中，墨刀進行了全面更新，除了品牌和組件的升級優化，還支持了sketch的導入及加入了工作流的功能，這使得墨刀更加強大。

墨刀工作區界面1.1.5移動UI設計的常用軟件對于UI設計的初學者來講，首先要明確市場現在到底需要什么樣的設計師，這樣才能有針對性的地學習提升。結合市場需求，我們推薦下列學習方法：1.軟件學習 軟件的學習是UI設計的剛需和基礎，設計師即使有再好的想法，但不能通過軟件制作出來也是徒勞。要我們主要需要掌握的軟件有Photoshop、Illustrator、AfterEffects、AxureRP和墨刀，有條件的設計師還可以學習Sketch和Principle。

1.1.6移動UI設計學習方法

UI設計需掌握的主流軟件

1.1.6移動UI設計學習方法

2.開拓眼界眼界的開拓至關重要，許多UI設計師無法做出美觀的界面就是沒有看到太多優秀的設計。這里推薦3種方法助力設計師開拓眼界。第1種:閱讀優秀設計師的文章，吸收優秀設計師的經驗。當然針對初學者而言首先要學習規范類的文章，如iOS設計規范和Android設計規范，二者都可以在網上查到官方的設計指南。本書亦在第3章iOS系統界面設計和第4章Android系統界面設計對其進行了深入剖析幫助設計師理解。

1.1.6移動UI設計學習方法

iOS設計規范（左）Android設計規范（右）第2種:閱讀優秀書籍，系統的學習UI設計的相關知識和設計應用方法。大家可以通過網上輸入關鍵詞查找到所需書籍。通過閱讀圖書的內容提要和目錄了解書籍的內容和特色，并通過購買所需書籍來進行全面的學習。第3種:欣賞優秀的作品，建議設計師每天拿出1-2小時到UI中國、站酷（ZCOOL）、追波(Dribbble)這些網站瀏覽最新的作品，并加入收藏，形成自己的資料庫。

1.1.6移動UI設計學習方法

網站推薦

1.1.6移動UI設計學習方法

3.臨摹學習眼界開拓后，需要進行相關的設計臨摹。臨摹的來源首先推崇的是從應用中心下載優秀的APP，截圖保存進行臨摹，其次可以從第2步開拓眼界中的優秀案例進行臨摹。臨摹一定要保證完全一樣并且要多臨摹。

1.1.6移動UI設計學習方法

4.項目實戰經過一定的積累，最好通過一套完整的企業項目來提升。從原型圖到設計稿再到切圖標注，甚至可以制作成動效Demo。一整套項目的實戰，會讓我們在設計能力上有質的提升。App的基本概念App的操作平臺App的設計流程App的基本分類1.2認識AppApp是應用程序Application的縮寫，一般指智能手機的第三方應用程序。用戶下載App主要從應用商店，比較著名的應用商店有蘋果的AppStore，谷歌的GooglePlayStore。應用程序的運行與系統密不可分，目前市場上，主要的智能手機操作系統有蘋果公司的iOS系統和谷歌公司的Android系統。對于UI設計師而言，要進行移動界面設計工作，需要分別學習兩大系統的界面設計知識。

1.2.1App的基本概念由美國設計團隊RonDesignAgency創作App的操作平臺可以分為iOS和Android兩大平臺。1.iOS系統平臺1.2.2App的操作平臺iOS是由美國蘋果公司開發，專門用于蘋果移動設備下的操作系統。iOS截止到2019年已經更新到了iOS12，不管是設備的改革還是系統的更新，iOS都為用戶帶來了全新的體驗。對于UI設計來言，需要快速進行iOS設計規范相關知識的更新。本書在規范章節深入剖析了相關知識，幫助UI設計師進行知識的升級。iOS系統平臺2.Android系統平臺Android系統是最初由安迪·魯賓（AndyRubin）開發，2005年8月被谷歌收購，2008年10月，第一款Android系統的智能手機發布。在2014年的GoogleI/O大會上，谷歌公司推出的全新的設計語言—MaterialDesign，旨在規范Android系統的設備、媲美蘋果的設計。截止到2019年，Android系統已經發布了Android9.0操作系統，而2018年的GoogleI/O大會MaterialDesign也有了重大更新，這些都使得Android系統手機的使用愈發的流暢、統一及美觀。對UI設計師則面臨著知識的更新及現有UI界面的再設計等挑戰。本書將在Android系統界面設計章節深入剖析，幫助UI設計師順利解決。1.2.2App的操作平臺App設計的流程可以按照分析調研、交互設計、交互自查、界面設計、界面測試、設計驗證的步驟來進行。1.2.3App的設計流程App設計流程圖1.分析調研App的設計是根據品牌的調性、產品的定位而進行，不同方向的App，設計風格也會有區別。因此先分析需求，了解用戶特征，并進行相關競品的調研，明確設計方向。1.2.3App的設計流程

QQ音樂網易云音樂蝦米音樂2.交互設計交互設計是對整個App設計進行初步構思和制定的環節。一般需要進行紙面原型、架構設計、流程圖設計、線框圖設計等具體工作。1.2.3App的設計流程

烏克蘭UI/UX設計師TatianaLazarenko創作3.交互自查交互設計完成之后，進行交互自查是整個App設計流程非常重要的一個階段。可以在執行界面設計之前檢查出是否有遺漏缺失的細節問題。1.2.3App的設計流程

交互自查4.界面設計原型圖審查通過，就可以進入界面的視覺設計階段，這個階段的設計圖即產品最終呈現給用戶的界面。界面設計要求設計規范、圖片、內容真實，并運用墨刀、principle等軟件制作成可交互的高保真原型以便后續的界面測試。1.2.3App的設計流程

烏克蘭設計師StasAristov、AlyaPrigotska、ThanhDo聯合創作5.界面測試界面測試階段是讓具有代表性的用戶進行典型操作，設計人員和開發人員在此階段共同觀察、記錄。在測試中可以對設計的細節進行相關的調整。1.2.3App的設計流程

越南設計師TranMauTriTam進行App細節調整6.設計驗證設計驗證是最后一個階段，是為App進行優化的重要支撐。在產品正式上線后，通過用戶的數據反饋進行記錄，驗證前期的設計，并繼續優化。1.2.3App的設計流程

XToken0x設計師創作1.2.4App的基本分類

常用App主要可以分為社區交友、影音娛樂、休閑娛樂、生活服務、旅游出行、電商平臺、金融理財、健康醫療、學習教育、資訊閱讀這10類。1.社區交友社區交友App，即通過互聯網實現交際往來。常用的社交App有微信、QQ、新浪微博等。1.2.4App的基本分類

QQ（左）微信（中）新浪微博（右）APPStore中的截圖2.影音娛樂影音娛樂App，即通過互聯網上的電影電視、音樂MV以及小視頻進行娛樂放松。常用的影音娛樂App有抖音短視頻、騰訊視頻、網易云音樂等。1.2.4App的基本分類

抖音短視頻（左）騰訊視頻（中）網易云音樂（右）APPStore中的截圖3.休閑娛樂休閑娛樂App，即通過互聯網進行找尋餐廳、購買影票以及制作美食等活動進行放松休閑。常用的休閑娛樂App有大眾點評、貓眼電影、下廚房等。1.2.4App的基本分類

大眾點評（左）貓眼電影（中）下廚房（右）APPStore中的截圖4.生活服務生活服務App，主要通過互聯網為用戶提供外賣訂菜、求職招聘以及城市出行等相關服務。常用的生活服務App有餓了么、Boss直聘、摩拜單車等。1.2.4App的基本分類

餓了么（左）Boss直聘（中）摩拜單車（右）APPStore中的截圖5.旅游出行旅游出行App，即通過互聯網為用戶提供旅游度假的相關服務。常用的旅游出行App有途牛旅游、Airbnb愛彼迎、周末去哪兒等。1.2.4App的基本分類

途牛旅游（左）Airbnb愛彼迎（中）周末去哪兒（右）APPStore中的截圖6.電商平臺電商平臺App，即通過互聯網為用戶提供網購、零售以及相關信息等服務。常用的電商App有淘寶網、京東、網易嚴選等。1.2.4App的基本分類

淘寶網（左）京東（中）網易嚴選（右）AppStore中的截圖7.金融理財金融理財APP，即通過互聯網為用戶的財務進行管理，以實現財務的保值、增值為目的。常用的金融理財APP有支付寶、京東金融、招商銀行等。1.2.4App的基本分類

支付寶（左）京東金融（中）招商銀行（右）AppStore中的截圖8.健康醫療健康醫療App，即通過互聯網為用戶提供運動健身、健康教育以及遠程會診等多種形式的健康醫療服務。常用的健康醫療App有悅動圈、輕加、微醫等。1.2.4App的基本分類

悅動圈（左）輕加（中）微醫（右）AppStore中的截圖9.學習教育學習教育App，即通過互聯網快速地為用戶傳播知識和學習方法。常用的學習教育App有智慧樹、作業幫、騰訊課堂等。1.2.4App的基本分類

智慧樹家長版（左）作業幫（中）騰訊課堂（右）AppStore中的截圖10.資訊閱讀資訊閱讀App，即通過互聯網在為用戶在短時間內帶來價值的信息或書籍內容。常用的旅游出行App有騰訊新聞、網易新聞、微信讀書等。1.2.4App的基本分類

騰訊新聞（左）網易新聞（中）微信讀書（右）AppStore中的截圖第2章移動UI設計規范本章介紹：設計規范在移動UI設計的工作中有著保證視覺統一性、提升項目工作效率、提升設計細節等諸多好處。本章對iOS系統以及Android系統的基礎設計規范進行講解。通過本章的學習，讀者可以對移動UI設計的基礎規范有一個基本的認識，有助于高效便利地進行移動UI設計工作。掌握iOS系統設計規范掌握Android系統設計規范學習目標iOS設計尺寸及單位iOS界面結構iOS基本布局iOS圖標規范iOS文字規范2.1

iOS系統設計規范iOS系統基礎規范可以通過設計尺寸、界面結構、基本布局、圖標規范及字體規范5個方面進行詳盡的剖析。2.1

iOS系統設計規范1.相關單位?PPI:像素密度，英文全稱“PixelsPerinch”，簡稱“PPI”，是屏幕分辨率單位，表示的是每英寸所擁有的像素數量，如圖2-1所示。屏幕密度越大，畫面越細膩。因此，iPhone4比iPhone3GS屏幕尺寸雖然相同，但實際像素大了一倍，清晰度自然變高。2.1.1

iOS設計尺寸及單位PPI的計算公式（X、Y分別為橫向、縱向的像素數）?Asset:比例因子，英文全稱“Asset”。標準分辨率顯示器具有1：1像素密度（或@1x），其中一個像素等于一個點。高分辨率顯示器具有更高的像素密度，比例因子為2.0或3.0（稱為@2x和@3x）。因此，高分辨率顯示器需要具有更多像素的圖像。一個10px×10px的標準分辨率（@1x）圖像，該圖像的@2x版本為20px×20px，@3x版本為30px×30px2.1.1

iOS設計尺寸及單位?邏輯像素和物理像素：邏輯像素，英文全稱“LogicPoint”，單位“點”，即“pt”，是根據內容尺寸計算的單位。如iPhone4邏輯像素是480x320pt，但由于每個邏輯的點因為視網膜屏密度增加了1倍，所以一個點等于兩個像素，因此iPhone4的物理像素是960x640px。iOS開發工程師和使用Sketch軟件設計界面的UI設計師使用的單位都是pt。邏輯像素與物理像素的轉換2.1.1

iOS設計尺寸及單位2.設計尺寸iOS常見的設備尺寸。在進行界面設計稿時，為了一稿適配，都是以iPhone6/6s/7/8為基準。使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch就建立375x667pt。iOS常見設備的尺寸iOS設計標準尺寸2.1.1

iOS設計尺寸及單位iOS界面主要由狀態欄、導航欄、標簽欄組成。2.1.2

iOS界面結構iOS手機端界面結構圖iOS界面主要由狀態欄、導航欄、標簽欄組成。iOS手機端界面結構圖2.1.2

iOS界面結構iOS界面主要由狀態欄、導航欄、標簽欄組成。iOSiPad界面結構圖2.1.2

iOS界面結構1.網格系統網格系統（GridSystems），又稱為柵格系統，是利用一系列垂直和水平的參考線，將頁面分割成若干個有規律的列或格子，再以這些格子為基準，進行頁面布局設計的方式，能使布局規范、簡潔、有秩序。2.1.3

iOS基本布局網格系統2.組成元素網格系統由列、水槽以及邊距3個元素組成。列是內容放置的區域。水槽是列與列之間的距離，有助于分離內容。邊距是內容與屏幕左右邊緣之間的距離。組成元素（①列、②水槽、③邊距）2.1.3

iOS基本布局3.網格運用?單元格：iOS的最小點擊區域是44pt，即88px（@2x）。因此，在適用性方面，能被整除的偶數4和8作為iOS最小單元格比較合適。其中4px容易將頁面切割細碎，所以比較推薦使用8px。單元格2.1.3

iOS基本布局?列：列的數量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡潔頁面時使用，6、12和24基本滿足所有等分情況，然而24列將頁面切割太碎，因此實際使用還是以12列和6列為主。

列的使用2.1.3

iOS基本布局?水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進行統一設置，如24、32、40。其中32px（16pt@2x）最為常用。

水槽2.1.3

iOS基本布局?邊距：邊距的寬度也可以與水槽有所區別。在iOS中以@2x為基準,常見的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應結合產品本身的氣質，其中30px是最為舒適的邊距，也是絕大多數APP首選的邊距。

iOS中的設置及通用頁面都采用了30px的邊距2.1.4

iOS圖標規范在iOS中，圖標規范可以從應用圖標和系統圖標兩個方面進行詳盡的剖析。1.應用圖標?應用圖標的概念：應用圖標是應用程序的圖標。應用圖標主要應用于主屏幕、APPStore、Spotlight以及設置中。

iOS系統中各類應用圖標2.1.4

iOS圖標規范?應用圖標的設計：應用圖標在設計時尺寸可以采用1024px，并根據iOS官方模版進行規范。正確的圖標設計稿應是直角矩形不帶圓角，iOS會自動應用一個圓角折罩將圖標的4個角遮住。

iOS官方模版2.1.4

iOS圖標規范?應用圖標的適配：應用圖標會以不同的分辨率出現在主屏幕、AppStore、Spotlight以及設置場景中，尺寸也應根據不同設備的分辨率進行適配。

iOS系統中不同設備應用圖標的尺寸2.1.4

iOS圖標規范2.系統圖標?系統圖標的概念：系統圖標即界面中的功能圖標，系統圖標主要應用于導航欄、工具欄以及標簽欄。當未找到符合需求的系統圖標，UI設計師可以設計自定義圖標。

澳大利亞Prospa產品設計負責人AndrewMcKay創作2.1.4

iOS圖標規范?系統圖標的設計：在導航欄和工具欄上的圖標一般是44px(22pt@2x),在標簽欄上的圖標一般是50px（25pt@2x）。蘋果官方提供了四種不同形狀的標簽欄圖標尺寸供UI設計師參考。其意義是讓不同外形的圖標在同一個標簽欄時，保證視覺平衡。

標簽欄圖標尺寸2.1.4

iOS圖標規范?系統圖標的適配：自定義圖標會以不同的分辨率出現在導航欄、工具欄以及標簽欄場景中，尺寸也應根據不同設備的分辨率進行適配。

iOS系統中不同設備系統圖標的尺寸2.1.4

iOS圖標規范1.系統字體：iOS英文使用的是SanFrancisco(SF)字體，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText適用與小于19pt的文字，SFUIDisplay適用于大于20pt的文字。中文使用的是蘋方，共有6個字重。2.1.5

iOS文字規范

iOS系統字體2.字號大小：iOS設計時要注意字號的大小。一般為了區分標題和正文，字體大小差異至少保持在4px(2pt@2x),正文的合適行間距在1.5～2倍之間。

iOS系統APP的字體建議2.1.5

iOS文字規范Android系統基礎規范可以通過設計尺寸、界面結構、基本布局、字體規范及圖標規范5個方面進行詳盡的剖析。2.2

Android系統設計規范1.相關單位?DPI:網點密度，英文全稱“DotPerinch”，簡稱“DPI”，是打印分辨率單位,表示每英寸打印的點。在移動設備上等同于PPI，表示的是每英寸所擁有的像素數量。通常PPI代表蘋果手機，DPI代表安卓手機。2.2.1

Android設計尺寸及單位

DPI等同于PPI?獨立密度像素與獨立縮放像素：獨立密度像素,英文全稱“Density-independentpixels”，簡稱“dp”，是安卓設備上的基本單位，等同于蘋果設備上的pt。Android開發工程師使用的單位是dp,所以UI設計師進行標注時應將px轉化成dp,公式為dp*ppi/160=px。當設備的DPI值是320，通過公式可得出1dp=2px，如圖2-23（類似iPhone6/7/8的高清屏）。

dp與px的轉換2.2.1

Android設計尺寸及單位獨立縮放像素，英文全稱“Scale-independentPixel”，簡稱“sp”，是Android設備上的字體單位。Android平臺允許用戶自定義文字大小（小、正常、大、超大等等），當文字尺寸是“正常”狀態時，1sp=1dp，如圖2-XX。而當文字尺寸是“大”或“超大”時，1sp>1dp。UI設計師進行Android界面的設計時，標記字體的單位選用sp。

sp等同于dp2.2.1

Android設計尺寸及單位2.設計尺寸Android常見的設備尺寸。在進行界面設計稿時，如果要一想一稿適配iOS，那就使用Photoshop新建720x1280px尺寸的畫布。如果根據MaterialDesign新規范單獨設計Android，那就使用Photoshop新建1080x1920px尺寸的畫布。無論哪種需求，使用Sketch只建立360x640dp即可。

Android常見的設備尺寸(上)

Android設計標準尺寸（下）2.2.1

Android設計尺寸及單位iOS界面主要由狀態欄、導航欄、頂部應用欄組成。2.2.2

Android界面結構

Android界面結構在iOS中已經剖析了網格系統及其組成元素，因此在Android布局中不再贅述，直接進行Android中網格的布局。?單元格：Android的最小點擊區域是48dp，因此能被整除的偶數4和8作為Android最小單元格比較合適。2.2.3

Android基本布局

移動設備的8dp網格所有組件都與移動設備的8dp網格對齊圖標、排版和組件中的某些元素可以與4dp網格對齊。?列：列的數量在手機設備上推薦4列，-平板電腦上推薦8列。

列的數量，手機設備（左）平板電腦（右）與4dp網格對齊2.2.3

Android基本布局水槽：水槽和邊距的寬度在手機設備上推薦16dp，平板電腦上推薦24dp。

手機設備、平板電腦水槽和邊距的寬度2.2.3

Android基本布局邊距：邊距的寬度可以和水槽統一，也可以根據產品和水槽不同。當Android中邊距的寬度和水槽不同時，其寬度的設置具體可以參考iOS布局中邊距的寬度。

邊距的寬度2.2.3

Android基本布局在Android中，圖標規范可以根據MaterialDesign設計語言，從應用圖標和系統圖標兩個方面進行詳盡的剖析。1.應用圖標?應用圖標的概念：應用圖標即產品圖標，是品牌和產品的視覺表達，主要出現在主屏幕上。2.2.4

Android圖標規范

Android系統中各類應用圖標?應用圖標的設計：創建應用圖標時，應以320dpi分辨率中的48dp尺寸為基準。MaterialDesign提供了四種不同形狀的應用圖標尺寸供UI設計師參考，以保持一致的視覺平衡。

不同形狀的應用圖標尺寸2.2.4

Android圖標規范?應用圖標的適配：應用圖標的尺寸應根據不同設備的分辨率進行適配。當應用圖標應用于GooglePlay中，其尺寸是512x512px。

Android系統中不同設備應用圖標的尺寸2.2.4

Android圖標規范2.系統圖標?系統圖標的概念：系統圖標即界面中的功能圖標，通過簡潔現代的圖形表達一些常見功能。MaterialDesign提供了一套完整的系統圖標，同時設計師也可以根據產品的調性進行自定義設計。

MaterialDesign官網提供的完整系統圖標2.2.4

Android圖標規范?系統圖標的設計：創建系統圖標時，以320dpi分辨率中的24dp尺寸為基準。圖標應該留出一定的邊距，保證不同面積的圖標有協調一致的視覺效果。

系統圖標的設計2.2.4

Android圖標規范MaterialDesign語言提供了4種不同的圖標形狀供UI設計師參考，以保持視覺平衡。

MaterialDesign官網提供的四類圖標內部結構線2.2.4

Android圖標規范設計時為保證圖標清晰，需將軟件中X和Y坐標設為整數，而不是小數，將圖標“放在像素上”。

正確示例（左）錯誤示例（右）2.2.4

Android圖標規范系統圖標由①描邊末端、②圓角、③反白區域、④描邊、⑤內部角⑥邊界區域六部分組成。

系統圖標2.2.4

Android圖標規范邊角：邊角半徑默認為2dp。內角應該是方形而不要使用圓形，圓角建議使用2dp。

邊角半徑為2dp的圖標解析圖2.2.4

Android圖標規范描邊：系統圖標使用2dp的描邊以保持圖標的一致性。

描邊為2dp的圖標解析圖2.2.4

Android圖標規范描邊末端：描邊末端應該是直線并帶有角度，留白區域的描邊粗細也應該是2dp。描邊如果是傾斜45度，那么末端應該也是傾斜45度為結束。

描邊末端為2dp的圖標解析圖2.2.4

Android圖標規范視覺校正：如果系統圖標需要設計復雜的細節，則可以進行細微的調整以提高其清晰度。

?系統圖標的適配：系統圖標的尺寸應根據不同設備的分辨率進行適配。

系統圖標的適配復雜圖標的視覺校正解析圖2.2.4

Android圖標規范1.系統字體Android英文使用的是Roboto字體，共有6個字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個字重。

思源黑體2.2.5

Android字體規范2.字號大小Android設計時要注意字號的大小。Android各元素以720x1280px為基準設計，可以與iOS對應，其常見的字號大小：24px、26px、28px、30px、32px、34px，36px等，最小字號為20px。

Android系統APP的字體建議2.2.5

Android字體規范第3章iOS系統界面設計本章介紹：iOS系統界面是移動UI設計中最重要的部分之一，它直接影響著用戶使用App的體驗。本章對iOS系統界面設計中的欄、視圖以及控件進行系統講解與演練。通過本章的學習，讀者可以對iOS系統界面設計有一個基本的認識，并快速掌握繪制iOS系統界面的規范和方法。掌握iOS界面設計中的欄掌握iOS界面設計中的視圖掌握iOS界面設計中的控件學習目標掌握旅游類App首頁的繪制方法掌握旅游類App相冊頁的繪制方法掌握旅游類App酒店列表頁的繪制方法掌握旅游類App美食篩選頁的繪制方法技能目標課堂案例——制作旅游類APP首頁狀態欄導航欄搜索欄標簽欄工具欄3.1欄使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用橫排文字工具輸入文字，使用矩形工具和圓角矩形工具繪制基本形狀。3.1.1課堂案例——制作旅游類APP首頁效果圖3.1.2狀態欄狀態欄（StatusBars）是iPhone最上方用來顯示時間、運營商信息、電池電量的區域。狀態欄是背景完全透明的，在@2x下，狀態欄的高度為40像素iPhone6/7/8的狀態欄尺寸白色狀態欄（左）黑色狀態欄（右）iPhone6/7/8導航欄（上）iPhoneX（下）3.1.3導航欄導航欄（NavigationBars）位于狀態欄下方，是半透明的（70%）。通常導航欄的中間是頁面標題，左右放置功能圖標。正常標題(左)大標題（右）3.1.3導航欄1.導航欄標題：標題主要用于標明當前頁面，當需要特別強調內容時，建議使用大型標題大標題導航欄的尺寸大標題導航欄的尺寸。大標題由于太占空間，并不能像傳統導航一樣固定在頁面頂部。因此在滑動頁面時大標題會變成正常導航欄的64pt（@2x是128像素）的高度。3.1.3導航欄界面中的導航欄2.導航欄控件：導航欄通常應該只包含視圖的當前標題，返回按鈕和諸如搜索、添加或更多等一個管理視圖內容的控件。如果在導航欄中使用分段控件，則不應包含標題或除分段控件之外的任何控件。

導航欄控件尺寸3.1.3導航欄搜索欄（SearchBars）通過在字段中輸入文本來進行相關查找，在默認狀態下，分別有大和小兩種模式。搜索欄通常都包含一個刪除該內容的“清除”按鈕，同時大多數搜索欄包含一個“取消”搜索的按鈕。搜索欄尺寸搜索欄中的清除按鈕和取消按鈕3.1.4搜索欄

1.范圍欄當有明確定義的類別可供搜索時，將范圍欄添加到搜索欄可以優化搜索范圍。范圍欄

3.1.4搜索欄標簽欄（TabBars）位于應用程序屏幕底部，用于組織整個應用層面的信息結構，是半透明的（70%）。標簽欄一次最多承載5個標簽。多于5個的圖標以列表形式收納到“更多”里。標簽欄的設計尺寸。界面中的標簽欄標簽欄的設計尺寸3.1.5標簽欄

標簽欄圖標的選中態應該是一個彩色，來區別于非選中狀態。在視覺上，標簽欄圖標一致且平衡，其設計規范在規范章節已經進行了詳盡的剖析，這里就不再贅述。選中標簽欄圖標的顯示狀態

3.1.5標簽欄工具欄（Toolbars）位于應用程序屏幕底部，包含用于執行與當前視圖或其中內容相關的操作的按鈕，是半透明的（70%）。工具欄高度略窄，它的高度是44pt（@2x是88像素）。當需要三個以上的工具欄按鈕時，建議使用圖標。工具欄3.1.6工具欄課堂案例——制作旅游類APP相冊頁操作列表活動視圖警告窗集合視圖圖像視圖地圖視圖頁面瀏覽控制器3.2視圖課堂案例——制作旅游類APP登機牌頁彈出框滾動視圖分屏視圖表單視圖文字視圖網絡視圖使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用橫排文字工具輸入文字，使用矩形工具繪制基本形狀效果圖3.2.1課堂案例——制作旅游類APP相冊頁操作列表3.2.2操作列表操作列表（Actionsheets）是一種特殊的彈窗形式，來反饋特定交互動作，通常包含兩個或更多的選項。使用操作列表是為了讓用戶啟動任務，或者確認不可撤銷的交互動作。在小屏設備上，操作列表內容由下向上滑動顯示；而在大屏設備上，操作列表內容作為彈窗全部顯示。活動視圖3.2.3活動視圖活動視圖（Activityviews）是用于執行應用中特定任務的視圖，例如復制、收藏、查找。一旦啟動，可以立即執行任務，或者逐步完成多步任務。活動都由活動視圖管理，采用表單樣式或展開顯示取決于設備屏幕大小和方向。警告窗（Alerts）傳達反饋應用程序或設備狀態相關的重要信息，由標題、可選消息、一個或多個按鈕，以及解釋說明文字字段組成。除了這些可配置的元素，彈窗的視覺樣式是不可自定義的。警告窗3.2.4警告窗集合視圖（Collections）是一組有序內容，例如一組照片，布局形式可自定義并高度可視化。通常，集合視圖非常適合展示圖像內容。可以自定義背景和其他裝飾視圖，從視覺上區分圖片子集。集合視圖3.2.5集合視圖圖像視圖（ImageViews）在透明或不透明背景上顯示單個圖片或圖片序列。在圖像視圖中，圖像可以被拉伸、縮放或固定到特定位置。默認情況下，圖像視圖沒有交互。圖像視圖3.2.6圖像視圖地圖視圖（Maps），能夠在應用中顯示地理數據，并支持內置地圖應用提供的大部分功能。地圖視圖可以配置為顯示標準地圖、衛星圖像或兩者兼備。它包括圖釘和覆蓋物，并支持縮放和平移。通常，保持地圖互動性。使用用戶預期的圖釘顏色。3.2.7地圖視圖頁面瀏覽控制器（Pages）提供了一種在文檔、書籍、記事本或日歷之間的內容頁線性導航方式，它使用滾動，卷動管理頁面之間的轉換。滾動過渡沒有特定的外觀，頁面可以流暢地從一個滾動到下一個；當用戶在屏幕上滑動時，卷曲轉換會是頁面卷曲，就像現實世界中的書一樣。滾動過渡（左）卷曲轉換（右）3.2.8頁面瀏覽控制器使用移動工具移動素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具、橢圓工具、直線工具繪制基本形狀，使用減去頂層形狀命令調整形狀，使用橫排文字工具輸入文字。效果圖3.2.9課堂案例——制作旅游類APP登機牌頁彈出框（Popover）是一種臨時視圖，當用戶點擊控件或區域時，它會顯示在屏幕上的其他內容上方。通常，彈出框應在iPad應用中使用。在iPhone應用中，建議在全屏模式視圖中呈現信息，而不是在彈出框中。彈出框在iPad中的應用3.2.10彈出框滾動視圖（ScrollViews）允許用戶瀏覽大于可見區域的內容，例如文檔中的文本或圖像集合。當用戶滑動、輕拂、拖動、點按和捏住時，滾動視圖會跟隨手勢，以自然的方式顯示或縮放內容。滾動視圖本身沒有外觀，但是與其用戶交互時它會顯示臨時滾動指示器。滾動視圖還可以配置為在分頁模式下操作，其中滾動顯示全新的內容頁面，而不是移動當前頁面。滾動視圖3.2.11滾動視圖分屏視圖（SplitViews）管理兩個并排的內容窗格顯示，主窗格中的常駐內容及輔窗格中的相關信息。每個窗格可以包含各種元素，包括導航欄、工具欄、標簽欄、表格、集合、圖像、地圖和自定義視圖。如果應用需要，主窗格可以覆蓋輔窗格，并且在可以不使用時隱藏屏幕。分屏視圖3.2.12分屏視圖表單視圖（Tables）以一個可滾動的單列多行的形式來展示一段或一組數據。將表格以列表的形式，簡潔高效地顯示大量或少量的信息。通常，表格最好用來展示文字內容,而且經常以導航的方式出現在分欄視圖的一側,另一側顯示相關內容。在iOS中，表單有常規和分組兩種樣式。表單視圖3.2.13表單視圖文字視圖（TextViews）用于顯示多行樣式的文本內容。文本視圖可以是任何高度，當內容擴展到視圖之外時使用滾動。默認情況下，文本視圖中的內容是左對齊的，并使用黑色的系統字體。如果文本視圖可編輯，在用戶點擊視圖時會出現鍵盤。文字視圖3.2.14文字視圖網絡視圖（WebViews）直接在應用中加載和顯示豐富的網站內容，如嵌入式HTML和網站。典型的有，郵箱在消息中，使用網絡視圖顯示HTML內容。網絡視圖3.2.15網絡視圖3.3控件課堂案例——制作旅游類APP酒店列表頁按鈕編輯菜單標簽頁面控件選擇器進度指示器刷新分段控件課堂案例——制作旅游類APP美食篩選頁滑塊步進器開關文本框使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用橫排文字工具輸入文字，使用圓角矩形工具繪制基本形狀。效果圖3.3.1課堂案例——制作旅游類APP酒店列表頁按鈕（Buttons）適用于于應用程序的特定操作，由標題或圖標組成，并支持自定義。1.系統按鈕系統按鈕（SystemButtons）可以在任何地方使用，但通常顯示在導航欄和工具欄中。系統按鈕3.3.2按鈕2.詳細信息按鈕詳細信息按鈕（DetailDisclosureButtons）的觸發可打開一個視圖（通常是模態視圖）包含附加信息或本屏內相關選項的特定功能。詳細信息按鈕3.3.2按鈕3.信息按鈕信息按鈕（InfoButtons）的觸發可在視圖翻轉后，顯示有關應用程序的配置詳細信息，信息有時會顯示在當前視圖的背面。信息按鈕有淺色和深色兩種風格。信息按鈕3.3.2按鈕4.添加聯系人按鈕用戶可以點擊添加聯系人按鈕（AddContactButtons）來瀏覽現有聯系人列表，并選擇一個用于插入文本字段或其他視圖，例如，在郵件中，可以點擊郵件收件人字段中的添加聯系人按鈕，從聯系人列表中選擇收件人。添加聯系人按鈕3.3.2按鈕編輯菜單（EditMenus），用戶可以雙擊或觸摸并按住文本字段、文本視圖，Web視圖或圖像視圖中的元素以選擇內容并顯示編輯選項，例如復制和粘貼。編輯菜單3.3.3編輯菜單標簽（Labels）描述屏幕界面元素或提供短消息。雖然用戶無法編輯標簽，但有時候可以復制標簽里的內容。標簽可以顯示任意數量的靜態文本，但最好保持簡短。標簽3.3.4標簽頁面控件（PageControls）頁面控件顯示當前頁面在平面頁面列表中的位置。它以一系列小指示點的形式出現，表示可用頁面的打開順序，其中實心點表示當前頁面。頁面控件3.3.5頁面控件選擇器（Pickers）由一個或多個不同值的可滾動列表組成，每個值都具有單個選定值。選擇器出現時，頁面都有深色遮罩，通常顯示在屏幕底部或彈出窗口中。選擇器的高度通常是是五行列表值的高度，寬度可以是屏幕的寬度或其封閉視圖，具體視頁面情況而定。選擇器3.3.6選擇器1.日期選擇器日期選擇器（DatePickers）是一個有效的接口，用于選擇特定的日期、時間或兩者兼而有之。它還提供了一個顯示倒計時計時器的接口。選擇器3.3.6選擇器3.3.7進度指示器進度指示器（ProgressIndicators），主要不讓用戶坐在那里盯著靜態屏幕，等待應用程序加載內容或執行冗長的數據處理操作。使用活動指示器和進度條讓用戶知道應用程序沒有停頓，并讓用戶清楚還要等待多長時間。1.活動指示器活動指示器（ActivityIndicators）隨著無法量化的任務旋轉，如隨著加載或同步復雜的數據進行。任務完成時它就會消失。活動指示器不具備交互。活動指示器3.3.7進度指示器2.進度條活動指示器（ProgressBars）通過從左到右填充軌跡顯示任務已持續時間。進度條是雖然可以伴有用于取消相應操作的按鈕，但本身也不具備交互。進度條3.3.7進度指示器3.網絡活動指示器在沒有邊緣到邊緣顯示的設備上，當聯網時，網絡活動指示器（NetworkActivityIndicators）會在屏幕頂部的狀態欄中旋轉，網絡完成后會消失。該指示器看起來就像一個活動指示器，并且不具備交互。進度條3.3.7進度指示器手動啟動刷新控件（RefreshContentControls）就會立即重新加載內容，通常在表視圖中，而無需等待就會自動完成下一次內容更新。刷新控件是一種特殊類型的活動指示器，默認情況下是隱藏的，拖動列表頁時自動變可見并且重新加載內容。例如，在郵件中，用戶可以向下拖動收件箱郵件列表以檢查新郵件。刷新控件3.3.8刷新分段控制（SegmentedControls）是兩個或多個段的線性集合，每個分段卡都是獨立的按鈕。在控件內，所有段的寬度相等。像按鈕一樣，分段卡可以包含文本或圖像。分段控件通常用于顯示不同的視圖。例如，在地圖中，分段控件可讓用戶在地圖，公交和衛星視圖之間切換。分段控件3.3.9分段控件使用移動工具移動素材，使用橫排文字工具輸入文字，使用橢圓工具、矩形工具、圓角矩形工具、直線工具繪制基本形狀。效果圖3.3.10課堂案例——制作旅游類APP美食篩選頁滑塊（Sliders）是具有水平軸通過拇指滑動的交互控件，用戶可以用手指滑動在最小和最大值之間移動，例如調整屏幕亮度級別或媒體播放期間的位置。當滑塊的值改變時，最小值和拇指之間的軌跡部分用顏色填充。滑塊可以選擇性地顯示左右圖標，說明最小值和最大值的含義。滑塊3.3.11滑塊步進器（Steppers）是用于增加或減少增量值的兩段控制。默認情況下，步進器的一段顯示加號，另一段顯示減號。如果需要，可以用自定義圖像替換這些符號。進步器3.3.12步進器開關（Switch）允許用戶切換“打開”和“關閉”兩種相互排斥的狀態。開關3.3.13開關文本框（TextFields）是單行，有固定高度，通常帶有圓角，當用戶點擊它時會自動調出鍵盤。使用文本框來可獲得少量信息，例如電子郵件地址。文本框3.3.14文本框使用移動工具移動素材，使用橫排文字工具輸入文字，矩形工具、圓角矩形工具、直線工具繪制基本形狀。效果圖3.4課堂練習——制作旅游類APP酒店詳情頁使用移動工具移動素材，使用橫排文字工具輸入文字，矩形工具、直線工具繪制基本形狀。效果圖3.5課后習題——制作旅游類APP預約美食頁第4章Android系統界面設計本章介紹：Android系統界面是移動UI設計中最重要的部分之一，它直接影響著用戶使用App的體驗。本章對Android系統界面設計中的欄和組件進行系統講解與演練。通過本章的學習，讀者可以對Android系統界面設計有一個基本的認識，并快速掌握繪制Android系統界面的規范和方法。掌握Android界面設計中的欄掌握Android界面設計中的組件學習目標掌握醫療類APP閃屏頁的繪制方法掌握醫療類APP首頁的繪制方法掌握醫療類APP醫生列表頁的繪制方法掌握醫療類App醫生介紹頁的繪制方法掌握醫療類App醫生篩選頁的繪制方法掌握醫療類App預約頁的繪制方法技能目標課堂案例——制作醫療類APP閃屏頁狀態欄系統導航欄4.1欄使用移動工具移動素材，使用矩形工具、橢圓工具和多邊形工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.1.1課堂案例——制作醫療類APP閃屏頁Android狀態欄（上）應用欄頂部的Android狀態欄（下）4.1.2狀態欄狀態欄（Statusbar）位于手機界面的頂部，高度是24dp。在Android中，狀態欄包含通知圖標和系統圖標。

系統導航欄（Androidnavigationbar）位于手機的最下方，導航控件由返回、主界面、最近任務組成。暗（上）明（下）4.1.3系統導航欄

課堂案例——制作醫療類APP首頁底部應用欄頂部應用欄背板橫幅底部導航課堂案例——制作醫療類APP醫生列表頁按鈕4.2組件懸浮動作按鈕卡片紙片數據表課堂案例——制作醫療類APP醫生介紹頁對話框分割線圖片組列表菜單抽屜式導航狀態指引課堂案例——制作醫療類APP醫生篩選頁按鈕選擇控件底部面板側面板4.2組件滑塊底部提示欄課堂案例——制作醫療類APP預約頁選項卡文字框提示使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.2.1課堂案例——制作醫療類APP首頁底部應用欄（Appbars:bottom）用于顯示屏幕底部的導航抽屜和按鍵操作。底部應用欄4.2.2底部應用欄頂部應用欄（Appbars:top）用于頂顯示與當前屏幕相關的信息和操作。頂部應用欄4.2.3頂部應用欄應用程序的某個操作，都會出現一個背板（Backdrop），顯示相關信息和可操作的內容。背板4.2.4背板橫幅（Banner）在這里不是指廣告，而是頂部應用欄下面的第一個凸顯區域，顯示突出的消息和相關的可選操作。橫幅4.2.5橫幅底部導航（Bottomnavigation）將底部寬度等分為多個圖標的點擊區域，每個區域都由一個圖標和一個可選的文本標簽表示，用于連接應用程序中的主要架構。底部導航4.2.6底部導航使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用矩形工具、圓角矩形工具和橢圓工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.2.7課堂案例——制作醫療類APP醫生列表頁按鈕（Buttons）通過用戶點擊即可進行反饋并執行的組件。4.2.8按鈕浮動操作按鈕（Buttons:floatingactionbutton）簡稱“FAB”，主要執行屏幕上主要的和最常見的操作。浮動操作按鈕4.2.9懸浮動作按鈕卡片（Cards）是單個主題內容和操作的集合。卡片4.2.10卡片紙片（chips）是表示輸入、屬性或操作的緊湊元素，如郵件添加郵件人的操作。紙片4.2.11紙片數據表（Datatables）顯示數據集。數據表4.2.12數據表使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.2.13課堂案例——制作醫療類APP醫生介紹頁4.2.14對話框對話框（Dialogs）是一種模態對話框，出現在應用程序內容的前面，主要通知用戶關于任務的信息，可以包含關鍵信息、命令判斷或更多任務信息。分割線（Dividers）是一條細線，用于對列表和布局中的內容進行分組。分割線4.2.15分割線圖片組（Dividers）是有秩序地顯示圖像。圖片組4.2.16圖片組4.2.17列表列表（Lists）是一組連續的文本或圖像。列表4.2.18菜單菜單（Menus）是臨時顯示表面上的選項列表。菜單(下拉菜單)4.2.19抽屜式導航抽屜式導航（Navigationdrawer）可以訪問應用中的目標及功能，例如切換賬戶。抽屜式導航狀態指引（Progressindicators）表示未標明的等待時間或顯示進程的長度。狀態指引4.2.20狀態指引使用移動工具移動素材，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.2.21課堂案例——制作醫療類APP醫生篩選頁4.2.22選擇控件選擇控件（Selectioncontrols）允許用戶選擇選項。選擇控件4.2.23底部面板底部面板（Sheets:bottom）是包含附加內容的表面，這些內容固定在屏幕的底部。選擇控件側面板（Sheets:side）是包含附加內容的表面，這些內容固定在屏幕的左邊緣或右邊緣。側面板4.2.24側面板4.2.25滑塊滑塊（Sliders）允許用戶從一系列值中進行選擇。滑塊底部提示欄（Snackbars）是在屏幕底部提供有關應用程序進程的簡短消息。底部提示欄4.2.26底部提示欄使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.2.27課堂案例——制作醫療類APP預約頁選項卡（Tabs）允許在相關且處于相同層次結構的內容組之間進行導航。選項卡4.2.28選項卡文字框（Textfields）允許用戶輸入和編輯文本。文字框4.2.29文字框提示（Tooltips）是當用戶點按元素時，工具提示會顯示信息性文本。提示4.2.30提示使用移動工具移動素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具和鋼筆工具繪制基本形狀，使用橫排文字工具輸入文字。效果圖4.3課堂練習——制作醫療類APP輸入信息頁使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調整圖片顯示區域，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工