本章介紹：iOS系統界面設計是移動UI設計中最重要的部分之一，它直接影響著用戶使用App的體驗。本章對iOS系統界面設計中的內容、布局和組織、菜單和操作、導航和搜索、展示、選擇和輸入以及狀態進行系統講解與演練。通過本章的學習，讀者可以對iOS系統界面設計有一個基本的認識，并快速掌握繪制iOS系統界面的規范和方法。第三章iOS系統界面設計掌握iOS系統界面設計中的內容掌握iOS系統界面設計中的布局和組織掌握iOS系統界面設計中的菜單和操作掌握iOS系統界面設計中的導航和搜索掌握iOS系統界面設計中的呈現方式掌握iOS系統界面設計中的選擇和輸入掌握iOS系統界面設計中的狀態學習目標3.1內容課堂案例——制作旅游類App閃屏頁圖表圖像視圖文本視圖網頁視圖使用置入嵌入對象命令置入圖像，使用顏色疊加命令添加效果。3.1.1課堂案例——制作旅游類App閃屏頁以圖表形式組織數據可讓信息傳達更清晰并更具視覺吸引力。圖表由多個圖形元素組成，這些元素描繪數據集中的值并傳達這些值的相關信息。3.1.2圖表圖像視圖在透明或不透明背景上顯示單張圖像（某些情況下顯示圖像的動態序列）。在圖像視圖內，可以拉伸、縮放圖像，調整圖像大小以適合，或者將圖像固定到特定位置。圖像視圖通常不可交互。3.1.3圖像視圖文本視圖會顯示樣式化的多行文本內容，這些內容可否編輯是可選的。文本視圖可以是任意高度，并在內容擴展到視圖之外時允許滾動。文本視圖中的內容默認與前緣對齊，并使用系統標簽顏色。在iOS中，如果文本視圖可編輯，鍵盤會在用戶選擇該視圖時出現。3.1.4文本視圖網頁視圖可直接在你的App內加載和顯示豐富的網頁內容，例如嵌入的HTM和網站。3.1.5網頁視圖3.2布局和組織課堂案例——制作旅游類App酒店詳情頁方框集合顯示控件標簽列表和表格使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.2.1課堂案例——制作旅游類App酒店詳情頁方框為在邏輯上相關的信息和組件創建了具有獨特視覺特征的分組。方框默認使用可見邊框或背景顏色將其內容與界面的其他部分分開。方框也可以包括標題。3.2.2方框集合管理一組有序的內容，并以可自定義和高度可視化的布局呈現。一般來說，集合適合于顯示基于圖像的內容。3.2.3集合顯示控件用于顯示和隱藏特定控件或視圖相關的信息和功能。3.2.4顯示控件標簽是一段可供用戶閱讀的靜態文本，通常可以拷貝，但不能編輯。標簽用于在界面各處、按鈕、菜單項和視圖中顯示文本，以幫助用戶了解當前上下文和接下來可執行的操作。3.2.5標簽列表和表格在行中的一列或多列內呈現數據。表格或列表可呈現以群組或層級結構組織的數據，還可支持選擇、添加、刪除和重新排序等用戶交互。在iOS系統中，信息按鈕顯示列表項的相關詳細信息；它不支持導覽。顯示指示符會顯示層級結構中的下一級，而不會顯示項目相關的詳細信息。3.2.6列表和表格3.3菜單和操作課堂案例——制作旅游類App個人中心頁活動視圖按鈕上下文菜單編輯菜單菜單彈出式按鈕下拉式按鈕工具欄使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.3.1課堂案例——制作旅游類App個人中心頁活動視圖通常稱為共享表單，呈現用戶在當前環境中可執行的一系列任務。用戶習慣在選取“共享”按鈕時訪問系統提供的活動。避免提供另一種執行相同任務的方式，否則可能會令用戶感到困惑。3.3.2活動視圖按鈕用于發起瞬時操作。當需要為無法立即完成的操作提供相關反饋時，配置按鈕以顯示活動指示符。3.3.3按鈕上下文菜單可讓用戶訪問與項目直接相關的功能，并且不會導致界面雜亂。雖然上下文菜單提供了訪問常用項目的便捷方式，但它默認隱藏，因此用戶可能不知道它的存在。為了顯示上下文菜單，用戶通常會選取視圖或選擇一些內容，然后使用其當前配置支持的輸入模式執行操作。如：在iOS中系統定義的按住或捏住手勢。3.3.4上下文菜單編輯菜單除了提供“拷貝”、“選擇”、“翻譯”和“查詢”等相關命令，還可讓用戶在當前視圖中對所選內容進行更改。除了文本，編輯菜單的命令還可應用到多種類型的可選擇內容，如圖像、文件以及聯系人名片、圖表或地圖位置等對象。從iOS16起，系統會自動檢測所選項目的數據類型，并可能隨之在編輯菜單中增加相關操作。如，選擇地址可在編輯菜單中增加獲取路線等項目。3.3.5編輯菜單菜單會在用戶與其交互時顯示其選項，從而在App或游戲中以高效利用空間的方式呈現命令。菜單在整個界面中隨處可見，因此大多數用戶已經知道如何使用。當用戶在App或游戲中以一致的方式使用菜單時，它可以幫助用戶打造熟悉且易于學習的體驗。3.3.6菜單彈出式按鈕顯示互相排斥選項的菜單。當用戶從彈出式按鈕的菜單中選取一個項目后，菜單會關閉，按鈕可更新其內容以指示當前所選內容。3.3.7彈出式按鈕下拉式按鈕顯示與按鈕用途直接相關的項目或操作菜單。用戶在下拉式按鈕的菜單中選擇一項后，菜單會關閉，App會執行所選操作。考慮使用“更多”下拉式按鈕來呈現不需要在主界面中占據突出位置的項目。3.3.8下拉式按鈕工具欄可讓用戶便捷訪問執行當前視圖相關操作的常用命令和控件。事先考慮內容位于工具欄下方時的工具欄半透明效果，左側為工具欄后未顯示內容時，背景材質不會出現。右側為當內容出現在工具欄后面時，背景材質會發生改變以和內容區分。3.3.9工具欄3.4導航和搜索課堂案例——制作旅游類App首頁導航欄搜索欄邊欄標簽欄使用矩形工具、橢圓工具和鋼筆工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.4.1課堂案例——制作旅游類App首頁導航欄顯示在窗口或屏幕頂部，幫助用戶導航內容層級結構。使用大標題幫助用戶在導航和滾動時始終清楚其所在位置。當用戶開始滾動內容時，大標題會默認轉換為標準標題，并在用戶滾動到頂部時變回大標題，從而提醒當前的所在位置，左側為標準標題，右側為大標題。3.4.2導航欄搜索欄可讓用戶按輸入的特定詞來搜索一系列內容。在iOS系統中中，可以使用范圍欄幫助用戶細化搜索的范圍。3.4.3搜索欄邊欄提供了對頂層內容集合的快速訪問，可幫助用戶導航App或游戲。在App中，邊欄指的是頂層區域和集合的列表，幾乎始終顯示在拆分視圖的主要面板中。3.4.4邊欄標簽欄可幫助用戶理解視圖提供的不同類型信息或功能，還可讓用戶在視圖的不同部分之間快速切換，同時保留各個部分中的當前導覽狀態。標簽欄可以是常規型或緊湊型，具體取決于當前的設備和方向。3.4.5標簽欄3.5呈現方式課堂案例——制作旅游類App引導頁操作表單提醒頁面控件彈窗滾動視圖表單窗口使用置入嵌入對象命令置入圖像和圖標，使用漸變疊加命令和顏色疊加命令添加效果，使用橫排文字工具輸入文字，使用矩形工具繪制按鈕。3.5.1課堂案例——制作旅游類App引導頁操作表單是一種模態視圖，呈現與用戶所發起操作相關的選項。3.5.2操作表單提醒會為用戶提供其立即所需的關鍵信息。3.5.3提醒頁面控件顯示一行指示符圖像，其中每個都代表扁平列表中的一個頁面。避免在一個頁面控件中使用兩個以上不同指示符圖像，左側僅使用兩個不同的指示符看上去井然有序，并提供了一致的使用體驗，使用幾個不同的指示符可能會使頁面控件看起來眼花繚亂，且不易使用。3.5.4頁面控件彈出窗口是一種瞬態視圖，當用戶點按或輕點控件或交互區域時，它會顯示在其他內容之上。3.5.5彈窗滾動視圖讓用戶通過垂直或水平移動內容來查看超出視圖邊框的內容。滾動視圖本身沒有外觀，但是，通常在用戶開始滾動視圖內容后，它可以顯示出半透明滾動指示符。雖然滾動指示符的外觀和行為可能會因各個平臺而異，但所有指示符都會提供有關滾動操作的視覺反饋。如在iOS中，指示符會顯示當前可見內容是位于視圖的開頭、中間還是結尾附近。3.5.6滾動視圖表單可幫助用戶執行與其當前環境密切相關的小范圍任務。表單默認是模態表單，呈現一種有針對性的體驗，讓用戶在關閉表單前無法與父視圖交互。在向用戶請求特定信息或呈現用戶可在返回父視圖前完成的簡單任務時，模態表單非常有用。3.5.7表單窗口包含呈現App或游戲用戶界面的視圖和組件。窗口（或場景）可能無法被用戶察覺，具體取決于平臺、設備和環境。如在iOS平臺中，全屏幕是默認的使用體驗。用戶查看窗口中的內容并與之交互，而不是查看或與窗口本身交互。在這些情況下，你無需在App或游戲中設計窗口或場景本身的外觀。3.5.8窗口3.6選擇和輸入課堂案例——制作旅游類App登錄頁顏色池選擇器分段控件滑塊步進器文本欄切換虛擬鍵盤使用矩形工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用顏色疊加命令添加效果，使用橫排文字工具輸入文字。3.6.1課堂案例——制作旅游類App登錄頁顏色池可讓用戶調整文本、形狀、參考線和其他屏幕元素的顏色。3.6.2顏色池選擇器顯示包含不同值的一個或多個可滾動列表供用戶從中選擇。系統提供了多種樣式的選擇器，每種選擇器又提供了不同類型的可選擇值且外觀各異。選擇器中所顯示的確切值及其順序取決于設備語言。3.6.3選擇器分段控件是兩個或多個分段組成的線性集，每個分段用作一個按鈕。分段控件中所有分段的寬度通常都相等。分段與按鈕類似，也可以包含文本或圖像。分段下方（或整個控件下方）也可以有文本標簽。3.6.4分段控件滑塊是一個包含稱為“滾動塊”的控件的水平軌道，可讓用戶在最小值和最大值之間進行調整。隨著滑塊值的變化，最小值和滾動塊之間的軌道部分會用顏色填充。你可以選擇為滑塊顯示分別表示最小值和最大值含義的左右圖標。3.6.5滑塊步進器是一個兩段式控件，可用于增加或減少增量值。步進器位于顯示當前值的欄位旁邊，因為步進器本身不顯示值。3.6.6步進器文本欄是一個矩形區域，用戶可以在其中輸入或編輯特定的小段文本。3.6.7文本欄切換可以讓用戶在一對相反的狀態（比如開和關）之間進行選擇，它會使用不同的外觀來指示每個狀態。在大多數情況下，默認的綠色往往效果最好，但也可以使用App的強調色代替。3.6.8切換在iOS中，系統提供各種類型的虛擬鍵盤，供用戶用于輸入數據，使用布局指南還有助于在屏幕上顯示虛擬鍵盤時仍保持界面的重要部分可見。3.6.9虛擬鍵盤3.7狀態課堂案例——制作旅游類App消息頁儀表進度指示符使用圓矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.7.1課堂案例——制作旅游類App消息頁儀表顯示某個值范圍內的特定數值。除了指示范圍內的當前值，儀表還可提供關于范圍本身的更多上下文。例如，溫度儀表可使用文本來標識范圍內的最高溫和最低溫，并顯示色譜來從視覺上凸顯變動的值。3.7.2儀表進度指示符告知用戶App在載入內容或執行長時間操作時未卡死。進度條的軌道默認包括已填充和未填充兩部分。在導航欄或工具欄中使用進度條時，例如顯示頁面載入，請將其配置為隱藏軌道的未填充部分。刷新控件可讓用戶立即重新載入內容（通常在表格視圖中），無需等待內容下次自動更新。3.7.3進度指示符使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖標，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.8課堂練習——制作旅游類App訂購房型頁使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。3.9課后習題——制作旅游類App定制路線頁本章介紹：Android系統界面設計是移動UI設計中最重要的部分之一，它直接影響著用戶使用App的體驗。本章對Android系統界面設計中多種組件進行系統講解與演練。通過本章的學習，讀者可以對Android系統界面設計有一個基本的認識，并快速掌握繪制Android系統界面的規范和方法。第四章Android系統界面設計掌握Android系統界面設計中的操作組件掌握Android系統界面設計中的反饋組件Android系統界面設計中的容器組件掌握Android系統界面設計中的導航組件掌握Android系統界面設計中的選擇組件掌握Android系統界面設計中的文本輸入組件學習目標4.1操作組件課堂案例——制作家具類App詳情頁常規按鈕擴展懸浮操作按鈕懸浮操作按鈕圖標按鈕分段按鈕使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字，使用圖案疊加命令制作背景。4.1.1課堂案例——制作家具類App詳情頁常規按鈕用于提示UI中的大多數操作，傳達用戶可以采取的操作。它們通常放置對話框、模態窗口、表單、卡片、工具欄等移動UI界面中的組件中。它可以包含前置圖標，通常細分為漂浮按鈕、填充按鈕、色調填充按鈕、輪廓按鈕和文本按鈕五種類型。4.1.2常規按鈕使用常規的懸浮操作按鈕可能會不夠清晰，因此可以使用擴展懸浮操作按鈕。擴展懸浮操作按鈕是最突出的按鈕，用于執行屏幕上最常見或最重要的操作。在具有長滾動視圖且需要持續訪問操作的屏幕（例如結賬屏幕）上使用擴展懸浮操作按鈕。不要在無法滾動的視圖中使用擴展懸浮操作按鈕。其可以同時包含圖標和標簽文本。4.1.3擴展懸浮操作按鈕懸浮操作按鈕用于執行屏幕上最常見或最重要的操作，其圖標必須清晰易懂，當內容滾動時擴展懸浮操作按鈕始終保留在屏幕上。4.1.4懸浮操作按鈕圖標按鈕用于幫助人們執行一些小動作，其圖標必須使用含義明確的系統圖標。懸停時，會顯示按鈕的操作提示。圖標按鈕可以代表“打開操作”，也可以代表“打開”和“關閉”的雙重操作。圖標按鈕可以組合在一起，也可以單獨存在。它通常細分為標準和包含兩種類型。使用輪廓樣式圖標代表未選擇狀態，使用填充樣式圖標代表選擇狀態的圖標。使用圖標按鈕需要以緊湊的布局顯示操作。4.1.5圖標按鈕分段按鈕用于幫助人們選擇選項、切換視圖或排序元素。分段按鈕可以包含圖標、標簽文本或同時包含二者，通常細分為單選和多選兩種類型，多用于兩到五個項目之間的簡單選擇。4.1.6分段按鈕4.2反饋組件課堂案例——制作家具類App分類頁角標進度指示器底部提示欄工具提示使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用橫排文字工具輸入文字。4.2.1課堂案例——制作家具類App分類頁角標用于顯示導航項和圖標上的通知、計數或狀態信息。其包含標簽或數字，通常細分為小型和大型兩種類型。小角標是一個簡單的圓圈，用于指示未讀通知。大角標包含傳達物品計數信息的標簽文本。角標位于圖標邊框內，位于圖標的右上方。包括“+”，將其內容限制為四個字符，并且保留默認顏色。4.2.2角標進度指示器用于實時顯示進程狀況，對所有的流程實例使用相同的進度指示器。它們傳達應用程序的狀態并指示可用的操作，如用戶是否可以離開當前屏幕。當顯示一系列流程的進度時，應指示整體進度而不是每個活動的進度。其通常可以細分為線性和圓形兩種類型。同時切勿將它們用于裝飾，它們通過運動吸引用戶注意力。4.2.3進度指示器底部提示欄通常出現在屏幕底部，顯示簡短的應用程序流程更新，其可以自行消失或保留在屏幕上，直到用戶采取操作，并且一次只能顯示一個底部提示欄。底部提示欄可以包含單個操作。其中“關閉”或“取消”操作是可選的。底部提示欄傳達的消息干擾性最小，并且不需要用戶操作。底部提示欄不應中斷用戶的體驗。4.2.4底部提示欄工具提示顯示簡短的標簽或消息，使用工具提示向按鈕或其他移動UI元素提供了附加的上下文。其通常細分為簡單的工具提示和豐富的工具提示兩種類型，豐富工具提示可以包括可選標題、鏈接和按鈕。使用簡單的工具提示來描述圖標按鈕的元素或操作，使用豐富的工具提示提供更多詳細信息，例如描述功能的價值。4.2.5工具提示4.3容器組件課堂案例——制作家具類App個人中心頁卡片走馬燈對話框分隔線列表使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.3.1課堂案例——制作家具類App個人中心頁卡片是單個主題內容和操作的集合，使用卡片時會包含相關主題的元素，其內容可以包括圖像、標題、文本、按鈕和列表的任何內容，還可以包含其他組件。卡片應該易于掃描以獲取相關且可操作的信息。放置在卡片上的文本和圖像等元素應清晰指示層次結構。它通常細分為漂浮式、填充式、輪廓式三種類型。卡片根據其內容具有靈活的布局和尺寸。4.3.2卡片走馬燈展示了一組可以在屏幕上滾動的視覺項目，包含圖像或視頻以及可選的標簽文本。其通常可以細分為多瀏覽、無限制、游戲和全屏四種布局，可以開始對齊或中心對齊。4.3.3走馬燈對話框在用戶流中提供重要提示，使用對話框可以確保用戶根據信息采取行動，多用于確認刪除等高風險操作。其出現在應用程序內容前面的模式窗口，用于提供關鍵信息或要求做出決定。對話框出現時會禁用所有應用程序功能，并保留在屏幕上，直到確認、取消或采取所需操作。對話框是有意中斷的，因此應謹慎使用。通常細分為基本和全屏兩種類型。對話框應只完成單個任務，同時可以顯示與任務相關的信息。4.3.4對話框分隔線是在列表或其他容器中將內容分組的細線條，分隔線可見但不能過粗。僅當無法用開放空間對項目進行分組時才使用分隔線，使用分隔線對項目組進行分組，而不是分割單個項目。其通常可以細分為全寬式和插入式兩種類型。4.3.5分隔線列表是連續的、垂直的文本和圖像索引，通常以數字等邏輯方式對列表項目進行排序。使用列表可以幫助用戶找到特定項目并對其進行操作。其根據尺寸可以細分為一行、兩行和三行三種類型。項目內容應簡短且易于掃描，圖標應和文本、操作格式一致。4.3.6列表4.4導航組件課堂案例——制作家具類App首頁底部應用欄導航欄抽屜式導航導航軌道搜索選項卡頂部應用欄使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創建剪貼蒙版命令調整圖片顯示區域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.4.1課堂案例——制作家具類App首頁底部應用欄顯示移動和平板電腦屏幕底部的導航和關鍵動作，使用底部應用欄可以引起用戶對重要操作的注意。其最多可包含四個圖標按鈕和一個懸浮操作按鈕。底部應用程序欄底部應用欄布局和內容可以在應用程序的不同屏幕上發生變化，同時在移動設備上更加便于訪問。4.4.2底部應用欄導航欄曾經被命名為底部導航欄，允許用戶在移動設備上切換用戶界面視圖。在緊湊的布局中使用導航欄，可以包含3-5個同等重要的導航，這些導航在應用程序屏幕上的設計風格應保持一致，不應發生改變。每個導航都由一個圖標和可選的文本標簽表示。當點擊或聚焦導航欄圖標時，用戶將被帶到與該圖標關聯的導航目的地。4.4.3導航欄抽屜式導航讓用戶在移動UI的設備上切換用戶界面視圖，可以提供對目的地和應用程序功能的訪問，如切換帳戶。它們可以永久顯示在屏幕上，也可以通過導航菜單圖標打開和關閉。4.4.4抽屜式導航導航軌道讓用戶可以在不同設備上的UI視圖之間切換，建議在中等布局或擴展布局中使用導航軌道。其可包含3-7個導航以及可選的懸浮操作按鈕。導航軌道始終將導航欄放在同一位置，即使在應用程序的不同屏幕上也是如此。4.4.5導航軌道搜索是一種導航方法，允許用戶輸入關鍵字或短語以快速獲取相關信息，用戶在搜索欄或搜索視圖的中輸入文本查詢，然后查看相關結果。搜索欄可以包含前導的搜索圖標和可選的尾隨圖標，在用戶鍵入時搜索欄可以顯示建議的關鍵字或短語，并始終在搜索視圖中顯示結果。4.4.6搜索選項卡跨不同屏幕和視圖組織內容，使用選項卡將處于同一層次結構級別的內容進行分組。設計時應將選項卡作為對等項并排放置，選項卡可以水平滾動，因此移動UI可以根據需要擁有任意數量的選項卡。其通常可以細分為主選項卡和次選項卡兩種類型。4.4.7選項卡頂部應用欄提供與當前屏幕相關的內容和操作，有時還會對關鍵旅程進行跨應用程序訪問。頂部應用程欄與設備窗口具有相同的寬度，在滾動時，頂部應用程欄的顏色將與正文內容有所區分。其通常細分為中心對齊、小、中和大四種類型。4.4.8頂部應用欄4.5選擇組件課堂案例——制作家具類App購物車頁復選框紙片菜單單選按鈕滑塊開關使用矩形工具和