《Photoshop 移動UI設(shè)計案例教程（全彩慕課版）（第2版）》課件 第4、5章 Android系統(tǒng)界面設(shè)計、App界面設(shè)計實戰(zhàn)

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

品牌推廣型活動廣告型閃屏頁是為推廣活動或廣告而設(shè)定，通常將推廣的內(nèi)容直接設(shè)計在閃屏頁內(nèi)。多采用插畫以及暖色的設(shè)計形式，用以營造熱鬧的氛圍。5.1.2

活動廣告型節(jié)日關(guān)懷型閃屏頁是為營造節(jié)假日氛圍同時凸顯產(chǎn)品品牌而設(shè)定的。多采用“產(chǎn)品logo+內(nèi)容插畫”的設(shè)計形式，使用戶感受到節(jié)日的關(guān)懷與祝福。5.1.3

節(jié)日關(guān)懷型5.2引導(dǎo)頁功能說明型產(chǎn)品推廣型功能說明型引導(dǎo)頁是引導(dǎo)頁中最基礎(chǔ)的，主要對產(chǎn)品的新功能進(jìn)行展示，常用于App重大版本的更新中。多采用插圖的設(shè)計形式，達(dá)到短時間內(nèi)吸引用戶的效果。5.2.1

功能說明型產(chǎn)品推廣型引導(dǎo)頁是表達(dá)App的價值，讓用戶更了解這款A(yù)pp的情懷。多采用與企業(yè)形象和產(chǎn)品風(fēng)格一致的生動化、形象化設(shè)計形式，讓用戶感到畫面的精美。5.2.2

產(chǎn)品推廣型5.3首頁列表型網(wǎng)格型卡片型綜合型列表型首頁是在頁面上將同級別的模塊進(jìn)行分類展示，常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀等方面。采用單一的設(shè)計形式，方便用戶瀏覽。5.3.1

列表型

網(wǎng)格型首頁是在頁面上將重要的功能以矩形模塊的形式進(jìn)行展示，常用于工具類等方面。采用的統(tǒng)一矩形模塊的設(shè)計形式，刺激用戶點擊。5.3.2

網(wǎng)格型卡片型首頁是在頁面上將圖片、文字、控件放置于同一張卡片中，再將卡片進(jìn)行分類展示，常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀、工具使用等方面。采用的統(tǒng)一的卡片設(shè)計形式，不僅讓用戶一目了然更加強(qiáng)內(nèi)容的點擊欲望。5.3.3

卡片型綜合型首頁是由搜索欄、Banner、金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的頁面，運(yùn)用范圍較廣，常