《Photoshop 移動UI設計案例教程（全彩慕課版）（第2版）》課件 第4章 Android系統(tǒng)界面設計

本章介紹：Android系統(tǒng)界面設計是移動UI設計中最重要的部分之一，它直接影響著用戶使用App的體驗。本章對Android系統(tǒng)界面設計中多種組件進行系統(tǒng)講解與演練。通過本章的學習，讀者可以對Android系統(tǒng)界面設計有一個基本的認識，并快速掌握繪制Android系統(tǒng)界面的規(guī)范和方法。第四章Android系統(tǒng)界面設計掌握Android系統(tǒng)界面設計中的操作組件掌握Android系統(tǒng)界面設計中的反饋組件Android系統(tǒng)界面設計中的容器組件掌握Android系統(tǒng)界面設計中的導航組件掌握Android系統(tǒng)界面設計中的選擇組件掌握Android系統(tǒng)界面設計中的文本輸入組件學習目標4.1操作組件課堂案例——制作家具類App詳情頁常規(guī)按鈕擴展懸浮操作按鈕懸浮操作按鈕圖標按鈕分段按鈕使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創(chuàng)建剪貼蒙版命令調整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字，使用圖案疊加命令制作背景。4.1.1課堂案例——制作家具類App詳情頁常規(guī)按鈕用于提示UI中的大多數(shù)操作，傳達用戶可以采取的操作。它們通常放置對話框、模態(tài)窗口、表單、卡片、工具欄等移動UI界面中的組件中。它可以包含前置圖標，通常細分為漂浮按鈕、填充按鈕、色調填充按鈕、輪廓按鈕和文本按鈕五種類型。4.1.2常規(guī)按鈕使用常規(guī)的懸浮操作按鈕可能會不夠清晰，因此可以使用擴展懸浮操作按鈕。擴展懸浮操作按鈕是最突出的按鈕，用于執(zhí)行屏幕上最常見或最重要的操作。在具有長滾動視圖且需要持續(xù)訪問操作的屏幕（例如結賬屏幕）上使用擴展懸浮操作按鈕。不要在無法滾動的視圖中使用擴展懸浮操作按鈕。其可以同時包含圖標和標簽文本。4.1.3擴展懸浮操作按鈕懸浮操作按鈕用于執(zhí)行屏幕上最常見或最重要的操作，其圖標必須清晰易懂，當內容滾動時擴展懸浮操作按鈕始終保留在屏幕上。4.1.4懸浮操作按鈕圖標按鈕用于幫助人們執(zhí)行一些小動作，其圖標必須使用含義明確的系統(tǒng)圖標。懸停時，會顯示按鈕的操作提示。圖標按鈕可以代表“打開操作”，也可以代表“打開”和“關閉”的雙重操作。圖標按鈕可以組合在一起，也可以單獨存在。它通常細分為標準和包含兩種類型。使用輪廓樣式圖標代表未選擇狀態(tài)，使用填充樣式圖標代表選擇狀態(tài)的圖標。使用圖標按鈕需要以緊湊的布局顯示操作。4.1.5圖標按鈕分段按鈕用于幫助人們選擇選項、切換視圖或排序元素。分段按鈕可以包含圖標、標簽文本或同時包含二者，通常細分為單選和多選兩種類型，多用于兩到五個項目之間的簡單選擇。4.1.6分段按鈕4.2反饋組件課堂案例——制作家具類App分類頁角標進度指示器底部提示欄工具提示使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用橫排文字工具輸入文字。4.2.1課堂案例——制作家具類App分類頁角標用于顯示導航項和圖標上的通知、計數(shù)或狀態(tài)信息。其包含標簽或數(shù)字，通常細分為小型和大型兩種類型。小角標是一個簡單的圓圈，用于指示未讀通知。大角標包含傳達物品計數(shù)信息的標簽文本。角標位于圖標邊框內，位于圖標的右上方。包括“+”，將其內容限制為四個字符，并且保留默認顏色。4.2.2角標進度指示器用于實時顯示進程狀況，對所有的流程實例使用相同的進度指示器。它們傳達應用程序的狀態(tài)并指示可用的操作，如用戶是否可以離開當前屏幕。當顯示一系列流程的進度時，應指示整體進度而不是每個活動的進度。其通?？梢约毞譃榫€性和圓形兩種類型。同時切勿將它們用于裝飾，它們通過運動吸引用戶注意力。4.2.3進度指示器底部提示欄通常出現(xiàn)在屏幕底部，顯示簡短的應用程序流程更新，其可以自行消失或保留在屏幕上，直到用戶采取操作，并且一次只能顯示一個底部提示欄。底部提示欄可以包含單個操作。其中“關閉”或“取消”操作是可選的。底部提示欄傳達的消息干擾性最小，并且不需要用戶操作。底部提示欄不應中斷用戶的體驗。4.2.4底部提示欄工具提示顯示簡短的標簽或消息，使用工具提示向按鈕或其他移動UI元素提供了附加的上下文。其通常細分為簡單的工具提示和豐富的工具提示兩種類型，豐富工具提示可以包括可選標題、鏈接和按鈕。使用簡單的工具提示來描述圖標按鈕的元素或操作，使用豐富的工具提示提供更多詳細信息，例如描述功能的價值。4.2.5工具提示4.3容器組件課堂案例——制作家具類App個人中心頁卡片走馬燈對話框分隔線列表使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.3.1課堂案例——制作家具類App個人中心頁卡片是單個主題內容和操作的集合，使用卡片時會包含相關主題的元素，其內容可以包括圖像、標題、文本、按鈕和列表的任何內容，還可以包含其他組件?？ㄆ瑧撘子趻呙枰垣@取相關且可操作的信息。放置在卡片上的文本和圖像等元素應清晰指示層次結構。它通常細分為漂浮式、填充式、輪廓式三種類型?？ㄆ鶕?jù)其內容具有靈活的布局和尺寸。4.3.2卡片走馬燈展示了一組可以在屏幕上滾動的視覺項目，包含圖像或視頻以及可選的標簽文本。其通?？梢约毞譃槎酁g覽、無限制、游戲和全屏四種布局，可以開始對齊或中心對齊。4.3.3走馬燈對話框在用戶流中提供重要提示，使用對話框可以確保用戶根據(jù)信息采取行動，多用于確認刪除等高風險操作。其出現(xiàn)在應用程序內容前面的模式窗口，用于提供關鍵信息或要求做出決定。對話框出現(xiàn)時會禁用所有應用程序功能，并保留在屏幕上，直到確認、取消或采取所需操作。對話框是有意中斷的，因此應謹慎使用。通常細分為基本和全屏兩種類型。對話框應只完成單個任務，同時可以顯示與任務相關的信息。4.3.4對話框分隔線是在列表或其他容器中將內容分組的細線條，分隔線可見但不能過粗。僅當無法用開放空間對項目進行分組時才使用分隔線，使用分隔線對項目組進行分組，而不是分割單個項目。其通常可以細分為全寬式和插入式兩種類型。4.3.5分隔線列表是連續(xù)的、垂直的文本和圖像索引，通常以數(shù)字等邏輯方式對列表項目進行排序。使用列表可以幫助用戶找到特定項目并對其進行操作。其根據(jù)尺寸可以細分為一行、兩行和三行三種類型。項目內容應簡短且易于掃描，圖標應和文本、操作格式一致。4.3.6列表4.4導航組件課堂案例——制作家具類App首頁底部應用欄導航欄抽屜式導航導航軌道搜索選項卡頂部應用欄使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創(chuàng)建剪貼蒙版命令調整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.4.1課堂案例——制作家具類App首頁底部應用欄顯示移動和平板電腦屏幕底部的導航和關鍵動作，使用底部應用欄可以引起用戶對重要操作的注意。其最多可包含四個圖標按鈕和一個懸浮操作按鈕。底部應用程序欄底部應用欄布局和內容可以在應用程序的不同屏幕上發(fā)生變化，同時在移動設備上更加便于訪問。4.4.2底部應用欄導航欄曾經(jīng)被命名為底部導航欄，允許用戶在移動設備上切換用戶界面視圖。在緊湊的布局中使用導航欄，可以包含3-5個同等重要的導航，這些導航在應用程序屏幕上的設計風格應保持一致，不應發(fā)生改變。每個導航都由一個圖標和可選的文本標簽表示。當點擊或聚焦導航欄圖標時，用戶將被帶到與該圖標關聯(lián)的導航目的地。4.4.3導航欄抽屜式導航讓用戶在移動UI的設備上切換用戶界面視圖，可以提供對目的地和應用程序功能的訪問，如切換帳戶。它們可以永久顯示在屏幕上，也可以通過導航菜單圖標打開和關閉。4.4.4抽屜式導航導航軌道讓用戶可以在不同設備上的UI視圖之間切換，建議在中等布局或擴展布局中使用導航軌道。其可包含3-7個導航以及可選的懸浮操作按鈕。導航軌道始終將導航欄放在同一位置，即使在應用程序的不同屏幕上也是如此。4.4.5導航軌道搜索是一種導航方法，允許用戶輸入關鍵字或短語以快速獲取相關信息，用戶在搜索欄或搜索視圖的中輸入文本查詢，然后查看相關結果。搜索欄可以包含前導的搜索圖標和可選的尾隨圖標，在用戶鍵入時搜索欄可以顯示建議的關鍵字或短語，并始終在搜索視圖中顯示結果。4.4.6搜索選項卡跨不同屏幕和視圖組織內容，使用選項卡將處于同一層次結構級別的內容進行分組。設計時應將選項卡作為對等項并排放置，選項卡可以水平滾動，因此移動UI可以根據(jù)需要擁有任意數(shù)量的選項卡。其通?？梢约毞譃橹鬟x項卡和次選項卡兩種類型。4.4.7選項卡頂部應用欄提供與當前屏幕相關的內容和操作，有時還會對關鍵旅程進行跨應用程序訪問。頂部應用程欄與設備窗口具有相同的寬度，在滾動時，頂部應用程欄的顏色將與正文內容有所區(qū)分。其通常細分為中心對齊、小、中和大四種類型。4.4.8頂部應用欄4.5選擇組件課堂案例——制作家具類App購物車頁復選框紙片菜單單選按鈕滑塊開關使用矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創(chuàng)建剪貼蒙版命令調整圖片顯示區(qū)域，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。4.5.1課堂案例——制作家具類App購物車頁復選框允許用戶從列表中選擇一項或多項，以及呈現(xiàn)包含子選擇的列表。視覺上相似的選項應分組在一起，標簽應簡潔易讀，選定的項目比未選定的項目更突出。4.5.2復選框紙片可以令用戶輸入信息、做出選擇、過濾內容或觸發(fā)操作，適合幫助用戶更快、更輕松地完成當前任務。其通常細分為輔助、過濾、輸入和建議四種類型。4.5.3紙片菜單在臨時表面上顯示選項列表，如頂部應用欄中的一組二級操作。它允許用戶從多個選項中進行選擇，占用的空間也更少。菜單在與元素（例如圖標、按鈕或輸入字段）交互或用戶執(zhí)行特定操作時被打開，菜單顯示的項目應簡潔易讀。4.5.4菜單單選按鈕一次只能選擇一個單選按鈕，是允許用戶從選項列表中進行單一選擇的推薦方式。其選定的項目比未選定的項目更突出，標簽應簡潔易讀。4.5.5單選按鈕滑塊允許用戶沿軌跡查看和選擇值或范圍，它們適用于調整音量和亮度等設置，或應用圖像濾鏡?；瑝K應呈現(xiàn)可用的全部選擇，可以使用圖標或標簽來表示數(shù)字或相對比例。其通常細分為連續(xù)和離散兩種類型。4.5.6滑塊開關可以打開或關閉項目，是讓用戶調整設置的最佳方式。如果列表中的項目可以獨立控制，請使用開關，同時確保開關的選擇一目了然。4.5.7開關4.6文本輸入組件課堂案例——制作家具類App注冊頁文本域使用矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用橫排文字工具輸入文字。4.6.1課堂案例——制作家具類App注冊頁文本域允許用戶在移動UI中輸入文本，當用戶