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

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

1.1.2移動UI設(shè)計的概念

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

1.1.3移動UI設(shè)計的特點

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

1.1.3移動UI設(shè)計的特點

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

1.1.3移動UI設(shè)計的特點

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

1.1.4移動UI設(shè)計的原則

1.1.5移動UI設(shè)計的常用軟件

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

1.1.5移動UI設(shè)計的常用軟件

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

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

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

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

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

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

Dreamweaver工作區(qū)界面截圖1.1.5移動UI設(shè)計的常用軟件·Hype3Hype3是基于蘋果電腦系統(tǒng)的一款收費型專業(yè)制作網(wǎng)頁設(shè)計的工具,它主要優(yōu)勢體現(xiàn)在能幫助不會編程的設(shè)計師輕松創(chuàng)建HTML5和復(fù)雜的動畫效果。在響應(yīng)式方面Hype3有著特別優(yōu)秀的表現(xiàn)。

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

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

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

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

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

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

1.1.6移動UI設(shè)計學(xué)習(xí)方法

UI設(shè)計需掌握的主流軟件

1.1.6移動UI設(shè)計學(xué)習(xí)方法

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

1.1.6移動UI設(shè)計學(xué)習(xí)方法

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

1.1.6移動UI設(shè)計學(xué)習(xí)方法

網(wǎng)站推薦

1.1.6移動UI設(shè)計學(xué)習(xí)方法

3.臨摹學(xué)習(xí)眼界開拓后，需要進行相關(guān)的設(shè)計臨摹。臨摹的來源首先推崇的是從應(yīng)用中心下載優(yōu)秀的APP，截圖保存進行臨摹，其次可以從第2步開拓眼界中的優(yōu)秀案例進行臨摹。臨摹一定要保證完全一樣并且要多臨摹。

1.1.6移動UI設(shè)計學(xué)習(xí)方法

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

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

QQ音樂網(wǎng)易云音樂蝦米音樂2.交互設(shè)計交互設(shè)計是對整個App設(shè)計進行初步構(gòu)思和制定的環(huán)節(jié)。一般需要進行紙面原型、架構(gòu)設(shè)計、流程圖設(shè)計、線框圖設(shè)計等具體工作。1.2.3App的設(shè)計流程

烏克蘭UI/UX設(shè)計師TatianaLazarenko創(chuàng)作3.交互自查交互設(shè)計完成之后，進行交互自查是整個App設(shè)計流程非常重要的一個階段?？梢栽趫?zhí)行界面設(shè)計之前檢查出是否有遺漏缺失的細(xì)節(jié)問題。1.2.3App的設(shè)計流程

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

烏克蘭設(shè)計師StasAristov、AlyaPrigotska、ThanhDo聯(lián)合創(chuàng)作5.界面測試界面測試階段是讓具有代表性的用戶進行典型操作，設(shè)計人員和開發(fā)人員在此階段共同觀察、記錄。在測試中可以對設(shè)計的細(xì)節(jié)進行相關(guān)的調(diào)整。1.2.3App的設(shè)計流程

越南設(shè)計師TranMauTriTam進行App細(xì)節(jié)調(diào)整6.設(shè)計驗證設(shè)計驗證是最后一個階段，是為App進行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進行記錄，驗證前期的設(shè)計，并繼續(xù)優(yōu)化。1.2.3App的設(shè)計流程

XToken0x設(shè)計師創(chuàng)作1.2.4App的基本分類

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

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

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

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

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

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

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

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

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

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

騰訊新聞（左）網(wǎng)易新聞（中）微信讀書（右）AppStore中的截圖第2章移動UI設(shè)計規(guī)范本章介紹：設(shè)計規(guī)范在移動UI設(shè)計的工作中有著保證視覺統(tǒng)一性、提升項目工作效率、提升設(shè)計細(xì)節(jié)等諸多好處。本章對iOS系統(tǒng)以及Android系統(tǒng)的基礎(chǔ)設(shè)計規(guī)范進行講解。通過本章的學(xué)習(xí)，讀者可以對移動UI設(shè)計的基礎(chǔ)規(guī)范有一個基本的認(rèn)識，有助于高效便利地進行移動UI設(shè)計工作。掌握iOS系統(tǒng)設(shè)計規(guī)范掌握Android系統(tǒng)設(shè)計規(guī)范學(xué)習(xí)目標(biāo)iOS設(shè)計尺寸及單位iOS界面結(jié)構(gòu)iOS基本布局iOS圖標(biāo)規(guī)范iOS文字規(guī)范2.1

iOS系統(tǒng)設(shè)計規(guī)范iOS系統(tǒng)基礎(chǔ)規(guī)范可以通過設(shè)計尺寸、界面結(jié)構(gòu)、基本布局、圖標(biāo)規(guī)范及字體規(guī)范5個方面進行詳盡的剖析。2.1

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

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

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

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

iOS設(shè)計尺寸及單位iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。2.1.2

iOS界面結(jié)構(gòu)iOS手機端界面結(jié)構(gòu)圖iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。iOS手機端界面結(jié)構(gòu)圖2.1.2

iOS界面結(jié)構(gòu)iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。iOSiPad界面結(jié)構(gòu)圖2.1.2

iOS界面結(jié)構(gòu)1.網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)（GridSystems），又稱為柵格系統(tǒng)，是利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進行頁面布局設(shè)計的方式，能使布局規(guī)范、簡潔、有秩序。2.1.3

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

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

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

列的使用2.1.3

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

水槽2.1.3

iOS基本布局?邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以@2x為基準(zhǔn),常見的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)APP首選的邊距。

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

iOS圖標(biāo)規(guī)范在iOS中，圖標(biāo)規(guī)范可以從應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩個方面進行詳盡的剖析。1.應(yīng)用圖標(biāo)?應(yīng)用圖標(biāo)的概念：應(yīng)用圖標(biāo)是應(yīng)用程序的圖標(biāo)。應(yīng)用圖標(biāo)主要應(yīng)用于主屏幕、APPStore、Spotlight以及設(shè)置中。

iOS系統(tǒng)中各類應(yīng)用圖標(biāo)2.1.4

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

iOS官方模版2.1.4

iOS圖標(biāo)規(guī)范?應(yīng)用圖標(biāo)的適配：應(yīng)用圖標(biāo)會以不同的分辨率出現(xiàn)在主屏幕、AppStore、Spotlight以及設(shè)置場景中，尺寸也應(yīng)根據(jù)不同設(shè)備的分辨率進行適配。

iOS系統(tǒng)中不同設(shè)備應(yīng)用圖標(biāo)的尺寸2.1.4

iOS圖標(biāo)規(guī)范2.系統(tǒng)圖標(biāo)?系統(tǒng)圖標(biāo)的概念：系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，系統(tǒng)圖標(biāo)主要應(yīng)用于導(dǎo)航欄、工具欄以及標(biāo)簽欄。當(dāng)未找到符合需求的系統(tǒng)圖標(biāo)，UI設(shè)計師可以設(shè)計自定義圖標(biāo)。

澳大利亞Prospa產(chǎn)品設(shè)計負(fù)責(zé)人AndrewMcKay創(chuàng)作2.1.4

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

標(biāo)簽欄圖標(biāo)尺寸2.1.4

iOS圖標(biāo)規(guī)范?系統(tǒng)圖標(biāo)的適配：自定義圖標(biāo)會以不同的分辨率出現(xiàn)在導(dǎo)航欄、工具欄以及標(biāo)簽欄場景中，尺寸也應(yīng)根據(jù)不同設(shè)備的分辨率進行適配。

iOS系統(tǒng)中不同設(shè)備系統(tǒng)圖標(biāo)的尺寸2.1.4

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

iOS文字規(guī)范

iOS系統(tǒng)字體2.字號大?。篿OS設(shè)計時要注意字號的大小。一般為了區(qū)分標(biāo)題和正文，字體大小差異至少保持在4px(2pt@2x),正文的合適行間距在1.5～2倍之間。

iOS系統(tǒng)APP的字體建議2.1.5

iOS文字規(guī)范Android系統(tǒng)基礎(chǔ)規(guī)范可以通過設(shè)計尺寸、界面結(jié)構(gòu)、基本布局、字體規(guī)范及圖標(biāo)規(guī)范5個方面進行詳盡的剖析。2.2

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

Android設(shè)計尺寸及單位

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

dp與px的轉(zhuǎn)換2.2.1

Android設(shè)計尺寸及單位獨立縮放像素，英文全稱“Scale-independentPixel”，簡稱“sp”，是Android設(shè)備上的字體單位。Android平臺允許用戶自定義文字大?。ㄐ?、正常、大、超大等等），當(dāng)文字尺寸是“正?！睜顟B(tài)時，1sp=1dp，如圖2-XX。而當(dāng)文字尺寸是“大”或“超大”時，1sp>1dp。UI設(shè)計師進行Android界面的設(shè)計時，標(biāo)記字體的單位選用sp。

sp等同于dp2.2.1

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

Android常見的設(shè)備尺寸(上)

Android設(shè)計標(biāo)準(zhǔn)尺寸（下）2.2.1

Android設(shè)計尺寸及單位iOS界面主要由狀態(tài)欄、導(dǎo)航欄、頂部應(yīng)用欄組成。2.2.2

Android界面結(jié)構(gòu)

Android界面結(jié)構(gòu)在iOS中已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中不再贅述，直接進行Android中網(wǎng)格的布局。?單元格：Android的最小點擊區(qū)域是48dp，因此能被整除的偶數(shù)4和8作為Android最小單元格比較合適。2.2.3

Android基本布局

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

列的數(shù)量，手機設(shè)備（左）平板電腦（右）與4dp網(wǎng)格對齊2.2.3

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

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

Android基本布局邊距：邊距的寬度可以和水槽統(tǒng)一，也可以根據(jù)產(chǎn)品和水槽不同。當(dāng)Android中邊距的寬度和水槽不同時，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。

邊距的寬度2.2.3

Android基本布局在Android中，圖標(biāo)規(guī)范可以根據(jù)MaterialDesign設(shè)計語言，從應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩個方面進行詳盡的剖析。1.應(yīng)用圖標(biāo)?應(yīng)用圖標(biāo)的概念：應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是品牌和產(chǎn)品的視覺表達，主要出現(xiàn)在主屏幕上。2.2.4

Android圖標(biāo)規(guī)范

Android系統(tǒng)中各類應(yīng)用圖標(biāo)?應(yīng)用圖標(biāo)的設(shè)計：創(chuàng)建應(yīng)用圖標(biāo)時，應(yīng)以320dpi分辨率中的48dp尺寸為基準(zhǔn)。MaterialDesign提供了四種不同形狀的應(yīng)用圖標(biāo)尺寸供UI設(shè)計師參考，以保持一致的視覺平衡。

不同形狀的應(yīng)用圖標(biāo)尺寸2.2.4

Android圖標(biāo)規(guī)范?應(yīng)用圖標(biāo)的適配：應(yīng)用圖標(biāo)的尺寸應(yīng)根據(jù)不同設(shè)備的分辨率進行適配。當(dāng)應(yīng)用圖標(biāo)應(yīng)用于GooglePlay中，其尺寸是512x512px。

Android系統(tǒng)中不同設(shè)備應(yīng)用圖標(biāo)的尺寸2.2.4

Android圖標(biāo)規(guī)范2.系統(tǒng)圖標(biāo)?系統(tǒng)圖標(biāo)的概念：系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，通過簡潔現(xiàn)代的圖形表達一些常見功能。MaterialDesign提供了一套完整的系統(tǒng)圖標(biāo)，同時設(shè)計師也可以根據(jù)產(chǎn)品的調(diào)性進行自定義設(shè)計。

MaterialDesign官網(wǎng)提供的完整系統(tǒng)圖標(biāo)2.2.4

Android圖標(biāo)規(guī)范?系統(tǒng)圖標(biāo)的設(shè)計：創(chuàng)建系統(tǒng)圖標(biāo)時，以320dpi分辨率中的24dp尺寸為基準(zhǔn)。圖標(biāo)應(yīng)該留出一定的邊距，保證不同面積的圖標(biāo)有協(xié)調(diào)一致的視覺效果。

系統(tǒng)圖標(biāo)的設(shè)計2.2.4

Android圖標(biāo)規(guī)范MaterialDesign語言提供了4種不同的圖標(biāo)形狀供UI設(shè)計師參考，以保持視覺平衡。

MaterialDesign官網(wǎng)提供的四類圖標(biāo)內(nèi)部結(jié)構(gòu)線2.2.4

Android圖標(biāo)規(guī)范設(shè)計時為保證圖標(biāo)清晰，需將軟件中X和Y坐標(biāo)設(shè)為整數(shù)，而不是小數(shù)，將圖標(biāo)“放在像素上”。

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

Android圖標(biāo)規(guī)范系統(tǒng)圖標(biāo)由①描邊末端、②圓角、③反白區(qū)域、④描邊、⑤內(nèi)部角⑥邊界區(qū)域六部分組成。

系統(tǒng)圖標(biāo)2.2.4

Android圖標(biāo)規(guī)范邊角：邊角半徑默認(rèn)為2dp。內(nèi)角應(yīng)該是方形而不要使用圓形，圓角建議使用2dp。

邊角半徑為2dp的圖標(biāo)解析圖2.2.4

Android圖標(biāo)規(guī)范描邊：系統(tǒng)圖標(biāo)使用2dp的描邊以保持圖標(biāo)的一致性。

描邊為2dp的圖標(biāo)解析圖2.2.4

Android圖標(biāo)規(guī)范描邊末端：描邊末端應(yīng)該是直線并帶有角度，留白區(qū)域的描邊粗細(xì)也應(yīng)該是2dp。描邊如果是傾斜45度，那么末端應(yīng)該也是傾斜45度為結(jié)束。

描邊末端為2dp的圖標(biāo)解析圖2.2.4

Android圖標(biāo)規(guī)范視覺校正：如果系統(tǒng)圖標(biāo)需要設(shè)計復(fù)雜的細(xì)節(jié)，則可以進行細(xì)微的調(diào)整以提高其清晰度。

?系統(tǒng)圖標(biāo)的適配：系統(tǒng)圖標(biāo)的尺寸應(yīng)根據(jù)不同設(shè)備的分辨率進行適配。

系統(tǒng)圖標(biāo)的適配復(fù)雜圖標(biāo)的視覺校正解析圖2.2.4

Android圖標(biāo)規(guī)范1.系統(tǒng)字體Android英文使用的是Roboto字體，共有6個字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個字重。

思源黑體2.2.5

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

Android系統(tǒng)APP的字體建議2.2.5

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

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

1.范圍欄當(dāng)有明確定義的類別可供搜索時，將范圍欄添加到搜索欄可以優(yōu)化搜索范圍。范圍欄

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

標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個彩色，來區(qū)別于非選中狀態(tài)。在視覺上，標(biāo)簽欄圖標(biāo)一致且平衡，其設(shè)計規(guī)范在規(guī)范章節(jié)已經(jīng)進行了詳盡的剖析，這里就不再贅述。選中標(biāo)簽欄圖標(biāo)的顯示狀態(tài)

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

系統(tǒng)導(dǎo)航欄（Androidnavigationbar）位于手機的最下方，導(dǎo)航控件由返回、主界面、最近任務(wù)組成。暗（上）明（下）4.1.3系統(tǒng)導(dǎo)航欄

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