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

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