UI第3章iOS系統(tǒng)界面設(shè)計(jì)課件

1、第3章 iOS系統(tǒng)界面設(shè)計(jì)本章介紹：iOS系統(tǒng)界面是移動(dòng)UI設(shè)計(jì)中最重要的部分之一，它直接影響著用戶使用App的體驗(yàn)。本章對(duì)iOS系統(tǒng)界面設(shè)計(jì)中的欄、視圖以及控件進(jìn)行系統(tǒng)講解與演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)iOS系統(tǒng)界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制iOS系統(tǒng)界面的規(guī)范和方法。第3章 iOS系統(tǒng)界面設(shè)計(jì)本章介紹：掌握iOS界面設(shè)計(jì)中的欄掌握iOS界面設(shè)計(jì)中的視圖掌握iOS界面設(shè)計(jì)中的控件學(xué)習(xí)目標(biāo)掌握iOS界面設(shè)計(jì)中的欄學(xué)習(xí)目標(biāo)掌握旅游類App首頁(yè)的繪制方法掌握旅游類App相冊(cè)頁(yè)的繪制方法掌握旅游類App酒店列表頁(yè)的繪制方法掌握旅游類App美食篩選頁(yè)的繪制方法技能目標(biāo)掌握旅游類App首頁(yè)

2、的繪制方法技能目標(biāo)課堂案例制作旅游類APP首頁(yè)狀態(tài)欄導(dǎo)航欄搜索欄標(biāo)簽欄工具欄3.1 欄課堂案例制作旅游類APP首頁(yè)3.1 欄使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用橫排文字工具輸入文字，使用矩形工具和圓角矩形工具繪制基本形狀。3.1.1 課堂案例制作旅游類APP首頁(yè)效果圖使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令3.1.2 狀態(tài)欄狀態(tài)欄（Status Bars）是iPhone最上方用來(lái)顯示時(shí)間、運(yùn)營(yíng)商信息、電池電量的區(qū)域。狀態(tài)欄是背景完全透明的，在2x下，狀態(tài)欄的高度為40像素iPhone6/7/8的狀態(tài)欄尺寸白色狀態(tài)欄（左）黑色狀態(tài)

3、欄（右）3.1.2 狀態(tài)欄狀態(tài)欄（Status Bars）是iPhiPhone6/7/8導(dǎo)航欄（上）iPhoneX（下）3.1.3 導(dǎo)航欄導(dǎo)航欄（Navigation Bars）位于狀態(tài)欄下方，是半透明的（70%）。通常導(dǎo)航欄的中間是頁(yè)面標(biāo)題，左右放置功能圖標(biāo)。iPhone6/7/8導(dǎo)航欄（上）iPhoneX（下）3.1正常標(biāo)題(左)大標(biāo)題（右）3.1.3 導(dǎo)航欄1.導(dǎo)航欄標(biāo)題：標(biāo)題主要用于標(biāo)明當(dāng)前頁(yè)面，當(dāng)需要特別強(qiáng)調(diào)內(nèi)容時(shí)，建議使用大型標(biāo)題正常標(biāo)題(左)大標(biāo)題（右）3.1.3 導(dǎo)航欄1.導(dǎo)航欄標(biāo)題大標(biāo)題導(dǎo)航欄的尺寸大標(biāo)題導(dǎo)航欄的尺寸。大標(biāo)題由于太占空間，并不能像傳統(tǒng)導(dǎo)航一樣固定在頁(yè)面頂部。因

4、此在滑動(dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt（2x是128像素）的高度。3.1.3 導(dǎo)航欄大標(biāo)題導(dǎo)航欄的尺寸大標(biāo)題導(dǎo)航欄的尺寸。大標(biāo)題由于太占空間，并界面中的導(dǎo)航欄2.導(dǎo)航欄控件：導(dǎo)航欄通常應(yīng)該只包含視圖的當(dāng)前標(biāo)題，返回按鈕和諸如搜索、添加或更多等一個(gè)管理視圖內(nèi)容的控件。如果在導(dǎo)航欄中使用分段控件，則不應(yīng)包含標(biāo)題或除分段控件之外的任何控件。 導(dǎo)航欄控件尺寸3.1.3 導(dǎo)航欄界面中的導(dǎo)航欄2.導(dǎo)航欄控件： 導(dǎo)航欄控件尺寸3.1.3 搜索欄（Search Bars）通過(guò)在字段中輸入文本來(lái)進(jìn)行相關(guān)查找，在默認(rèn)狀態(tài)下，分別有大和小兩種模式。搜索欄通常都包含一個(gè)刪除該內(nèi)容的“清除”按鈕，同時(shí)大多數(shù)搜索

5、欄包含一個(gè)“取消”搜索的按鈕。搜索欄尺寸 搜索欄中的清除按鈕和取消按鈕3.1.4 搜索欄 搜索欄（Search Bars）通過(guò)在字段中輸入文本來(lái)進(jìn)行相1.范圍欄當(dāng)有明確定義的類別可供搜索時(shí)，將范圍欄添加到搜索欄可以優(yōu)化搜索范圍。范圍欄 3.1.4 搜索欄1.范圍欄范圍欄 3.1.4 搜索欄標(biāo)簽欄（Tab Bars）位于應(yīng)用程序屏幕底部，用于組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)，是半透明的（70%）。標(biāo)簽欄一次最多承載5個(gè)標(biāo)簽。多于5個(gè)的圖標(biāo)以列表形式收納到“更多”里。標(biāo)簽欄的設(shè)計(jì)尺寸。界面中的標(biāo)簽欄 標(biāo)簽欄的設(shè)計(jì)尺寸 3.1.5 標(biāo)簽欄 標(biāo)簽欄（Tab Bars）位于應(yīng)用程序屏幕底部，用于組織整個(gè)標(biāo)簽欄

6、圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色，來(lái)區(qū)別于非選中狀態(tài)。在視覺(jué)上，標(biāo)簽欄圖標(biāo)一致且平衡，其設(shè)計(jì)規(guī)范在規(guī)范章節(jié)已經(jīng)進(jìn)行了詳盡的剖析，這里就不再贅述。選中標(biāo)簽欄圖標(biāo)的顯示狀態(tài) 3.1.5 標(biāo)簽欄標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色，來(lái)區(qū)別于非選中狀態(tài)。在視覺(jué)工具欄（Toolbars）位于應(yīng)用程序屏幕底部，包含用于執(zhí)行與當(dāng)前視圖或其中內(nèi)容相關(guān)的操作的按鈕，是半透明的（70%）。工具欄高度略窄，它的高度是44pt（2x是88像素）。當(dāng)需要三個(gè)以上的工具欄按鈕時(shí)，建議使用圖標(biāo)。工具欄3.1.6 工具欄工具欄（Toolbars）位于應(yīng)用程序屏幕底部，包含用于執(zhí)行課堂案例制作旅游類APP相冊(cè)頁(yè)操作列表活動(dòng)視圖警告窗集合

7、視圖圖像視圖地圖視圖頁(yè)面瀏覽控制器3.2 視圖課堂案例制作旅游類APP登機(jī)牌頁(yè)彈出框滾動(dòng)視圖分屏視圖表單視圖文字視圖網(wǎng)絡(luò)視圖課堂案例制作旅游類APP相冊(cè)頁(yè)3.2 視圖課堂案例使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用橫排文字工具輸入文字，使用矩形工具繪制基本形狀效果圖3.2.1 課堂案例制作旅游類APP相冊(cè)頁(yè)使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令操作列表3.2.2 操作列表操作列表（Action sheets）是一種特殊的彈窗形式，來(lái)反饋特定交互動(dòng)作，通常包含兩個(gè)或更多的選項(xiàng)。使用操作列表是為了讓用戶啟動(dòng)任務(wù)，或者確認(rèn)不可撤銷的交互

8、動(dòng)作。在小屏設(shè)備上，操作列表內(nèi)容由下向上滑動(dòng)顯示；而在大屏設(shè)備上，操作列表內(nèi)容作為彈窗全部顯示。操作列表3.2.2 操作列表操作列表（Action she活動(dòng)視圖3.2.3 活動(dòng)視圖活動(dòng)視圖（Activity views）是用于執(zhí)行應(yīng)用中特定任務(wù)的視圖，例如復(fù)制、收藏、查找。一旦啟動(dòng)，可以立即執(zhí)行任務(wù)，或者逐步完成多步任務(wù)?；顒?dòng)都由活動(dòng)視圖管理，采用表單樣式或展開顯示取決于設(shè)備屏幕大小和方向。活動(dòng)視圖3.2.3 活動(dòng)視圖活動(dòng)視圖（Activity v警告窗（Alerts）傳達(dá)反饋應(yīng)用程序或設(shè)備狀態(tài)相關(guān)的重要信息，由標(biāo)題、可選消息、一個(gè)或多個(gè)按鈕，以及解釋說(shuō)明文字字段組成。除了這些可配置的元素，

9、彈窗的視覺(jué)樣式是不可自定義的。警告窗3.2.4 警告窗警告窗（Alerts）傳達(dá)反饋應(yīng)用程序或設(shè)備狀態(tài)相關(guān)的重要信集合視圖（Collections）是一組有序內(nèi)容，例如一組照片，布局形式可自定義并高度可視化。通常，集合視圖非常適合展示圖像內(nèi)容?？梢宰远x背景和其他裝飾視圖，從視覺(jué)上區(qū)分圖片子集。集合視圖3.2.5 集合視圖集合視圖（Collections）是一組有序內(nèi)容，例如一組照?qǐng)D像視圖（Image Views）在透明或不透明背景上顯示單個(gè)圖片或圖片序列。在圖像視圖中，圖像可以被拉伸、縮放或固定到特定位置。默認(rèn)情況下，圖像視圖沒(méi)有交互。圖像視圖3.2.6 圖像視圖圖像視圖（Image Vie

10、ws）在透明或不透明背景上顯示單地圖視圖（Maps），能夠在應(yīng)用中顯示地理數(shù)據(jù)，并支持內(nèi)置地圖應(yīng)用提供的大部分功能。地圖視圖可以配置為顯示標(biāo)準(zhǔn)地圖、衛(wèi)星圖像或兩者兼?zhèn)洹Ｋ▓D釘和覆蓋物，并支持縮放和平移。通常，保持地圖互動(dòng)性。使用用戶預(yù)期的圖釘顏色。3.2.7 地圖視圖地圖視圖（Maps），能夠在應(yīng)用中顯示地理數(shù)據(jù)，并支持內(nèi)置地頁(yè)面瀏覽控制器（Pages）提供了一種在文檔、書籍、記事本或日歷之間的內(nèi)容頁(yè)線性導(dǎo)航方式，它使用滾動(dòng)，卷動(dòng)管理頁(yè)面之間的轉(zhuǎn)換。滾動(dòng)過(guò)渡沒(méi)有特定的外觀，頁(yè)面可以流暢地從一個(gè)滾動(dòng)到下一個(gè)；當(dāng)用戶在屏幕上滑動(dòng)時(shí)，卷曲轉(zhuǎn)換會(huì)是頁(yè)面卷曲，就像現(xiàn)實(shí)世界中的書一樣。滾動(dòng)過(guò)渡（左）卷

11、曲轉(zhuǎn)換（右）3.2.8 頁(yè)面瀏覽控制器頁(yè)面瀏覽控制器（Pages）提供了一種在文檔、書籍、記事本或使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具、橢圓工具、直線工具繪制基本形狀，使用減去頂層形狀命令調(diào)整形狀，使用橫排文字工具輸入文字。效果圖3.2.9 課堂案例制作旅游類APP登機(jī)牌頁(yè)使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用矩形工具、圓彈出框（Popover）是一種臨時(shí)視圖，當(dāng)用戶點(diǎn)擊控件或區(qū)域時(shí)，它會(huì)顯示在屏幕上的其他內(nèi)容上方。通常，彈出框應(yīng)在iPad 應(yīng)用中使用。在 iPhone 應(yīng)用中，建議在全屏模式視圖中呈現(xiàn)信息，而不是在彈出框中。彈出框在iPad 中的應(yīng)

12、用3.2.10 彈出框彈出框（Popover）是一種臨時(shí)視圖，當(dāng)用戶點(diǎn)擊控件或區(qū)域滾動(dòng)視圖（Scroll Views）允許用戶瀏覽大于可見區(qū)域的內(nèi)容，例如文檔中的文本或圖像集合。當(dāng)用戶滑動(dòng)、輕拂、拖動(dòng)、點(diǎn)按和捏住時(shí)，滾動(dòng)視圖會(huì)跟隨手勢(shì)，以自然的方式顯示或縮放內(nèi)容。滾動(dòng)視圖本身沒(méi)有外觀，但是與其用戶交互時(shí)它會(huì)顯示臨時(shí)滾動(dòng)指示器。滾動(dòng)視圖還可以配置為在分頁(yè)模式下操作，其中滾動(dòng)顯示全新的內(nèi)容頁(yè)面，而不是移動(dòng)當(dāng)前頁(yè)面。滾動(dòng)視圖3.2.11 滾動(dòng)視圖滾動(dòng)視圖（Scroll Views）允許用戶瀏覽大于可見區(qū)域分屏視圖（Split Views）管理兩個(gè)并排的內(nèi)容窗格顯示，主窗格中的常駐內(nèi)容及輔窗格中的相關(guān)

13、信息。每個(gè)窗格可以包含各種元素，包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、集合、圖像、地圖和自定義視圖。如果應(yīng)用需要，主窗格可以覆蓋輔窗格，并且在可以不使用時(shí)隱藏屏幕。分屏視圖3.2.12 分屏視圖分屏視圖（Split Views）管理兩個(gè)并排的內(nèi)容窗格顯示表單視圖（Tables）以一個(gè)可滾動(dòng)的單列多行的形式來(lái)展示一段或一組數(shù)據(jù)。將表格以列表的形式，簡(jiǎn)潔高效地顯示大量或少量的信息。通常，表格最好用來(lái)展示文字內(nèi)容,而且經(jīng)常以導(dǎo)航的方式出現(xiàn)在分欄視圖的一側(cè),另一側(cè)顯示相關(guān)內(nèi)容。在iOS中，表單有常規(guī)和分組兩種樣式。表單視圖3.2.13 表單視圖表單視圖（Tables）以一個(gè)可滾動(dòng)的單列多行的形式來(lái)展示一文

14、字視圖（Text Views）用于顯示多行樣式的文本內(nèi)容。文本視圖可以是任何高度，當(dāng)內(nèi)容擴(kuò)展到視圖之外時(shí)使用滾動(dòng)。默認(rèn)情況下，文本視圖中的內(nèi)容是左對(duì)齊的，并使用黑色的系統(tǒng)字體。如果文本視圖可編輯，在用戶點(diǎn)擊視圖時(shí)會(huì)出現(xiàn)鍵盤。文字視圖3.2.14 文字視圖文字視圖（Text Views）用于顯示多行樣式的文本內(nèi)容。網(wǎng)絡(luò)視圖（Web Views）直接在應(yīng)用中加載和顯示豐富的網(wǎng)站內(nèi)容，如嵌入式HTML和網(wǎng)站。典型的有，郵箱在消息中，使用網(wǎng)絡(luò)視圖顯示HTML內(nèi)容。網(wǎng)絡(luò)視圖3.2.15 網(wǎng)絡(luò)視圖網(wǎng)絡(luò)視圖（Web Views）直接在應(yīng)用中加載和顯示豐富的網(wǎng)3.3 控件課堂案例制作旅游類APP酒店列表頁(yè)按鈕

15、編輯菜單標(biāo)簽頁(yè)面控件選擇器進(jìn)度指示器刷新分段控件課堂案例制作旅游類APP美食篩選頁(yè)滑塊步進(jìn)器開關(guān)文本框3.3 控件課堂案例制作旅游類APP酒店列表頁(yè)刷新使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用橫排文字工具輸入文字，使用圓角矩形工具繪制基本形狀。效果圖3.3.1 課堂案例制作旅游類APP酒店列表頁(yè)使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令按鈕（Buttons）適用于于應(yīng)用程序的特定操作，由標(biāo)題或圖標(biāo)組成，并支持自定義。1.系統(tǒng)按鈕系統(tǒng)按鈕（System Buttons）可以在任何地方使用，但通常顯示在導(dǎo)航欄和工具欄中。系統(tǒng)按鈕3.3.2

16、 按鈕按鈕（Buttons）適用于于應(yīng)用程序的特定操作，由標(biāo)題或圖2.詳細(xì)信息按鈕詳細(xì)信息按鈕（Detail Disclosure Buttons）的觸發(fā)可打開一個(gè)視圖 （通常是模態(tài)視圖）包含附加信息或本屏內(nèi)相關(guān)選項(xiàng)的特定功能。詳細(xì)信息按鈕3.3.2 按鈕2.詳細(xì)信息按鈕詳細(xì)信息按鈕3.3.2 按鈕3.信息按鈕信息按鈕（Info Buttons）的觸發(fā)可在視圖翻轉(zhuǎn)后，顯示有關(guān)應(yīng)用程序的配置詳細(xì)信息，信息有時(shí)會(huì)顯示在當(dāng)前視圖的背面。信息按鈕有淺色和深色兩種風(fēng)格。信息按鈕3.3.2 按鈕3.信息按鈕信息按鈕3.3.2 按鈕4.添加聯(lián)系人按鈕用戶可以點(diǎn)擊添加聯(lián)系人按鈕（Add Contact But

17、tons）來(lái)瀏覽現(xiàn)有聯(lián)系人列表，并選擇一個(gè)用于插入文本字段或其他視圖，例如，在郵件中，可以點(diǎn)擊郵件收件人字段中的添加聯(lián)系人按鈕，從聯(lián)系人列表中選擇收件人。添加聯(lián)系人按鈕3.3.2 按鈕4.添加聯(lián)系人按鈕添加聯(lián)系人按鈕3.3.2 按鈕編輯菜單（Edit Menus），用戶可以雙擊或觸摸并按住文本字段、文本視圖，Web視圖或圖像視圖中的元素以選擇內(nèi)容并顯示編輯選項(xiàng)，例如復(fù)制和粘貼。編輯菜單3.3.3 編輯菜單編輯菜單（Edit Menus），用戶可以雙擊或觸摸并按住文標(biāo)簽（Labels）描述屏幕界面元素或提供短消息。雖然用戶無(wú)法編輯標(biāo)簽，但有時(shí)候可以復(fù)制標(biāo)簽里的內(nèi)容。標(biāo)簽可以顯示任意數(shù)量的靜態(tài)文本

18、，但最好保持簡(jiǎn)短。標(biāo)簽3.3.4 標(biāo)簽標(biāo)簽（Labels）描述屏幕界面元素或提供短消息。雖然用戶無(wú)頁(yè)面控件（Page Controls）頁(yè)面控件顯示當(dāng)前頁(yè)面在平面頁(yè)面列表中的位置。它以一系列小指示點(diǎn)的形式出現(xiàn)，表示可用頁(yè)面的打開順序，其中實(shí)心點(diǎn)表示當(dāng)前頁(yè)面。頁(yè)面控件3.3.5 頁(yè)面控件頁(yè)面控件（Page Controls）頁(yè)面控件顯示當(dāng)前頁(yè)面在選擇器（Pickers）由一個(gè)或多個(gè)不同值的可滾動(dòng)列表組成，每個(gè)值都具有單個(gè)選定值。選擇器出現(xiàn)時(shí)，頁(yè)面都有深色遮罩，通常顯示在屏幕底部或彈出窗口中。選擇器的高度通常是是五行列表值的高度，寬度可以是屏幕的寬度或其封閉視圖，具體視頁(yè)面情況而定。選擇器3.3.

19、6 選擇器選擇器（Pickers）由一個(gè)或多個(gè)不同值的可滾動(dòng)列表組成，1.日期選擇器日期選擇器（Date Pickers）是一個(gè)有效的接口，用于選擇特定的日期、時(shí)間或兩者兼而有之。它還提供了一個(gè)顯示倒計(jì)時(shí)計(jì)時(shí)器的接口。選擇器3.3.6 選擇器1.日期選擇器選擇器3.3.6 選擇器3.3.7 進(jìn)度指示器進(jìn)度指示器（Progress Indicators），主要不讓用戶坐在那里盯著靜態(tài)屏幕，等待應(yīng)用程序加載內(nèi)容或執(zhí)行冗長(zhǎng)的數(shù)據(jù)處理操作。使用活動(dòng)指示器和進(jìn)度條讓用戶知道應(yīng)用程序沒(méi)有停頓，并讓用戶清楚還要等待多長(zhǎng)時(shí)間。3.3.7 進(jìn)度指示器進(jìn)度指示器（Progress Ind1.活動(dòng)指示器活動(dòng)指示器（

20、Activity Indicators）隨著無(wú)法量化的任務(wù)旋轉(zhuǎn)，如隨著加載或同步復(fù)雜的數(shù)據(jù)進(jìn)行。任務(wù)完成時(shí)它就會(huì)消失?；顒?dòng)指示器不具備交互?；顒?dòng)指示器3.3.7 進(jìn)度指示器1.活動(dòng)指示器活動(dòng)指示器3.3.7 進(jìn)度指示器2.進(jìn)度條活動(dòng)指示器（Progress Bars）通過(guò)從左到右填充軌跡顯示任務(wù)已持續(xù)時(shí)間。進(jìn)度條是雖然可以伴有用于取消相應(yīng)操作的按鈕，但本身也不具備交互。進(jìn)度條3.3.7 進(jìn)度指示器2.進(jìn)度條進(jìn)度條3.3.7 進(jìn)度指示器3.網(wǎng)絡(luò)活動(dòng)指示器在沒(méi)有邊緣到邊緣顯示的設(shè)備上，當(dāng)聯(lián)網(wǎng)時(shí)，網(wǎng)絡(luò)活動(dòng)指示器（Network Activity Indicators）會(huì)在屏幕頂部的狀態(tài)欄中旋轉(zhuǎn)，網(wǎng)絡(luò)

21、完成后會(huì)消失。該指示器看起來(lái)就像一個(gè)活動(dòng)指示器，并且不具備交互。進(jìn)度條3.3.7 進(jìn)度指示器3.網(wǎng)絡(luò)活動(dòng)指示器進(jìn)度條3.3.7 進(jìn)度指示器手動(dòng)啟動(dòng)刷新控件（Refresh Content Controls）就會(huì)立即重新加載內(nèi)容，通常在表視圖中，而無(wú)需等待就會(huì)自動(dòng)完成下一次內(nèi)容更新。刷新控件是一種特殊類型的活動(dòng)指示器，默認(rèn)情況下是隱藏的，拖動(dòng)列表頁(yè)時(shí)自動(dòng)變可見并且重新加載內(nèi)容。例如，在郵件中，用戶可以向下拖動(dòng)收件箱郵件列表以檢查新郵件。刷新控件3.3.8 刷新手動(dòng)啟動(dòng)刷新控件（Refresh Content Contr分段控制（Segmented Controls）是兩個(gè)或多個(gè)段的線性集合，每個(gè)分段卡都是獨(dú)立的按鈕。在控件內(nèi)，所有段的寬度相等。像按鈕一樣，分段卡可以包含文本或圖像。分段控件通常用于顯示不同的視圖。例如，在地圖中，分段控件可讓用戶在地圖，公交和衛(wèi)星視圖之間切換。分段控件3.3.9 分段控件分段控制（Segmented Controls）是兩個(gè)或多個(gè)使用移動(dòng)工具移動(dòng)素材，使用橫排文字工具輸入文字，使用橢圓工具、矩形工具、圓角矩形工具、直線工具繪制基本形狀。效果圖3.3.