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

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

2、的繪制方法技能目標課堂案例制作旅游類APP首頁狀態(tài)欄導航欄搜索欄標簽欄工具欄3.1 欄課堂案例制作旅游類APP首頁3.1 欄使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用橫排文字工具輸入文字，使用矩形工具和圓角矩形工具繪制基本形狀。3.1.1 課堂案例制作旅游類APP首頁效果圖使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令3.1.2 狀態(tài)欄狀態(tài)欄（Status Bars）是iPhone最上方用來顯示時間、運營商信息、電池電量的區(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導航欄（上）iPhoneX（下）3.1.3 導航欄導航欄（Navigation Bars）位于狀態(tài)欄下方，是半透明的（70%）。通常導航欄的中間是頁面標題，左右放置功能圖標。iPhone6/7/8導航欄（上）iPhoneX（下）3.1正常標題(左)大標題（右）3.1.3 導航欄1.導航欄標題：標題主要用于標明當前頁面，當需要特別強調(diào)內(nèi)容時，建議使用大型標題正常標題(左)大標題（右）3.1.3 導航欄1.導航欄標題大標題導航欄的尺寸大標題導航欄的尺寸。大標題由于太占空間，并不能像傳統(tǒng)導航一樣固定在頁面頂部。因

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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