移動APPUI設(shè)計與制作PPT完整全套教學(xué)課件

移動AppUI設(shè)計與制作

(微課版)全套可編輯PPT課件第1章UI設(shè)計知識講解1.1UI設(shè)計的基本概念UI是UserInterface的縮寫，也就是用戶界面的簡稱?？梢哉f所有有屏幕的工業(yè)產(chǎn)品上的界面都算UI設(shè)計，比如手機APP，電腦端的網(wǎng)頁，智能電視的界面，智能家居的屏幕等。1.2UI設(shè)計的組成UI設(shè)計包括用戶研究，交互設(shè)計和界面設(shè)計三個部分，這里我們探討的是應(yīng)用程序的界面設(shè)計。

1.2.1用戶研究我們在產(chǎn)品開發(fā)的前期，需要通過調(diào)查研究，了解用戶的工作性質(zhì)、工作流程、工作環(huán)境、工作中的使用習(xí)慣，挖掘出用戶對產(chǎn)品功能的需求和希望，為我們的界面設(shè)計提供有力的思考方向，設(shè)計出讓用戶滿意的界面。用戶研究不是設(shè)計者主觀的行為，而是站在用戶的角度去探討產(chǎn)品的開發(fā)設(shè)計。它最終達到的目標(biāo)是提高產(chǎn)品的可用性，使我們設(shè)計的產(chǎn)品更容易被人接受、使用，并記憶。1.2.2交互設(shè)計交互設(shè)計指人與機之間的交互工程，一般都是軟件工程師來制作。交互設(shè)計師的工作內(nèi)容就是設(shè)計軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計，并且確立交互模型，交互規(guī)范。人機交互設(shè)計的目的在于加強軟件的易用、易學(xué)、易理解，使其真正成為方便地為人類服務(wù)的工具。

1.2.3界面設(shè)計界面設(shè)計不是單純意義上的美術(shù)工作，而是軟件產(chǎn)品的信息界面設(shè)計，是屏幕產(chǎn)品設(shè)計的重要組成部分。因此，界面設(shè)計要易于用戶控制；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。

1.3UI設(shè)計原則設(shè)計UI界面是我們一定要遵守以下幾個原則。簡潔性清晰性一致性熟悉感層次高效性響應(yīng)

1.4了解移動App操作平臺移動應(yīng)用軟件與傳統(tǒng)桌面軟件不同，它運行于手機、平板等移動設(shè)備之上，近幾年開始出現(xiàn)在智能手表、電視、汽車終端、家電等設(shè)備上。根據(jù)2020年的一項市場調(diào)查報告顯示，安卓(Android)和蘋果(iOS)系統(tǒng)是目前主流的兩大移動終端平臺。

1.4.1蘋果iOS系統(tǒng)蘋果iOS系統(tǒng)是由蘋果公司專門為其硬件創(chuàng)建和開發(fā)的移動操作系統(tǒng)，也是蘋果公司后續(xù)推出的其他三個操作系統(tǒng)(即iPadOS、tvOS和watchOS)的基礎(chǔ)。iOS的主要版本每年發(fā)布一次。自2007年第一代iPhone推出以來，它是許多蘋果移動設(shè)備(包括iPhone、iPodTouch)的操作系統(tǒng)。以iOS為基礎(chǔ)的許多蘋果產(chǎn)品，以其使用流暢、應(yīng)用豐富等特點受到了很多用戶的青睞。1.4.2Android系統(tǒng)Android系統(tǒng)是一個基于Linux內(nèi)核和其他開源軟件的修改版移動操作系統(tǒng)，主要為智能手機、平板電腦等觸摸屏移動終端設(shè)備而設(shè)計。Android系統(tǒng)于2007年被正式推出，谷歌公司于2008年9月推出了首款商用Android手機。Android的發(fā)展也得到了開源社區(qū)的大力支持，如作為Android系統(tǒng)核心的Linux內(nèi)核。Android移動操作系統(tǒng)是免費的開源軟件，除了用于傳統(tǒng)智能手機終端，也被用于其他電子設(shè)備上，例如游戲機、數(shù)碼相機、PC等。

1.5UI設(shè)計流程UI設(shè)計的過程是思維發(fā)散的過程，想要設(shè)計出符合用戶需求的設(shè)計，就必須遵循設(shè)計流程。在實際工作中，設(shè)計流程并不是絕對的。有的流程可能會被跳過或忽略，如調(diào)研與討論；有的流程會反復(fù)停留，如修改與擴展。需求分析和梳理。清晰的細節(jié)。確定界面風(fēng)格。再次交流切圖。

1.5.1撤銷與還原操作進行圖像編輯時，如果想撤銷一步操作，可以選擇【編輯】|【還原(操作步驟名稱)】命令，或按快捷鍵Ctrl+Z。需要注意的是，該操作只能撤銷對圖像的編輯操作，不能撤銷保存圖像的操作。如果想要恢復(fù)被撤銷的操作，可以選擇【編輯】|【重做(操作步驟名稱)】命令，或按快捷鍵Shift+Ctrl+Z。

1.5.2恢復(fù)文件對一個圖像文件進行了一些編輯操作后，選擇【文件】|【恢復(fù)】命令，可以直接將文件恢復(fù)到最后一次存儲時的狀態(tài)。如果一直沒有進行存儲操作，則可以返回到剛打開文件時的狀態(tài)。1.5.3使用【歷史記錄】面板在Photoshop中，對圖像文檔進行過的編輯操作都會記錄在【歷史記錄】面板中。通過【歷史記錄】面板，可以對編輯操作進行撤銷或恢復(fù)，以及將圖像恢復(fù)為打開時的狀態(tài)。選擇【文件】|【打開】命令，打開圖像文件。選擇【窗口】|【歷史記錄】命令，打開【歷史記錄】面板。當(dāng)我們對圖像進行一些編輯操作時，操作步驟就會被記錄在【歷史記錄】面板中，單擊其中某項歷史記錄操作，就可以使文檔返回到之前的編輯狀態(tài)。

1.6提高Photoshop工作效率的操作技能在掌握好基本的軟件操作后，學(xué)習(xí)一些Photoshop軟件的操作小技巧，能進一步提升對軟件操作的熟練度，并能大大提高工作效率。

1.6.1高效管理圖層隨著圖像文檔的深入編輯，圖層的數(shù)量會越來越多，圖層的結(jié)構(gòu)也越來越龐大，這會給查找和選擇圖層帶來麻煩。只有管理好圖層，圖像編輯工作才能順利和高效地進行。1.修改名稱，增加關(guān)注度2.標(biāo)記顏色，提高識別度3.分組管理，簡化主結(jié)構(gòu)4.通過名稱快速找到圖層1.6.2快速對齊商品圖像在處理圖像文檔時，經(jīng)常需要將多個商品對象進行對齊。如果手動進行對齊，不僅很難保證移動的準(zhǔn)確性，還很花費時間。

1.6.3快速復(fù)制商品圖像在使用Photoshop進行設(shè)計的過程中，常常會用到復(fù)制功能。使用【移動】工具移動圖像時，按住Alt鍵拖曳圖像，即可復(fù)制商品圖像。

1.6.4用批處理命令批量修改商品圖像電商設(shè)計工作中經(jīng)常會遇到需要將多張圖像調(diào)整到統(tǒng)一尺寸、調(diào)整到統(tǒng)一色調(diào)等批量處理的情況。如果將圖像一張一張進行處理，非常耗費時間和精力，使用批處理命令可以快速地、輕松地處理大量的文件。1.6.5使用智能參考線智能參考線是一種會在繪制、移動、變換等情況下自動出現(xiàn)的參考線，可以幫助我們對齊特定對象。如使用【移動】工具移動某個圖層，移動過程中與其他圖層對齊時就會顯示出洋紅色的智能參考線，而且還會提示圖層之間的間距。變換圖層內(nèi)容時，也會出現(xiàn)智能參考線。

1.6.6給圖像添加注釋【注釋】工具是一個給圖片添加備注或解釋的工具。當(dāng)一張圖像需要多人合作完成時，可以在圖像上需要處理的部分添加注釋，方便他人操作。1.6.7使用圖層復(fù)合展示設(shè)計方案圖層復(fù)合是【圖層】面板狀態(tài)的快照，它記錄了當(dāng)前文件中的圖層可視性、位置和外觀。通過圖層復(fù)合，可在當(dāng)前文件中創(chuàng)建多個方案，便于管理和查看不同方案效果。

1.6.8優(yōu)化系統(tǒng)運行設(shè)置Photoshop在運行一段時間后，經(jīng)常會出現(xiàn)運行緩慢、卡頓等現(xiàn)象。此時，除了更新電腦的硬件配置和優(yōu)化操作系統(tǒng)等辦法外，還可以對Photoshop進行性能優(yōu)化。1.設(shè)置首選項2.多使用那些不占內(nèi)存的操作3.減少預(yù)設(shè)和插件占用的資源4.快速清除內(nèi)存5.增加暫存盤移動AppUI設(shè)計與制作

(微課版)第2章AppUI界面設(shè)計要點2.1UI界面設(shè)計的常用構(gòu)圖類型本節(jié)將介紹常見的5種界面構(gòu)圖類型，不同功能的頁面需要采用不同的構(gòu)圖類型。2.1.1網(wǎng)格構(gòu)圖網(wǎng)格構(gòu)圖是將畫面分成均勻的網(wǎng)格，將界面元素規(guī)律的放置在網(wǎng)格中。這種類型的構(gòu)圖非常規(guī)范，只要在版面中以橫向和縱向的輔助線作劃分，就能很好地進行設(shè)計。網(wǎng)格構(gòu)圖最大的特點是操作簡便，功能突出，非常適用于功能分類類型的頁面，讓用戶對頁面類別一目了然。2.1.2環(huán)形構(gòu)圖環(huán)形構(gòu)圖是將重要的內(nèi)容放在中心，以凸顯其重要性，環(huán)形構(gòu)圖常以圓形的方式進行排列，將重要的內(nèi)容放在中心的大圓中，其他內(nèi)容放在周邊的小圓中。中心的大圓會將用戶的視線聚集在此處，大圓中內(nèi)容即是頁面的重要內(nèi)容2.1.3三角形構(gòu)圖三角形構(gòu)圖可以讓畫面顯得平衡、穩(wěn)定，常用于文字和圖標(biāo)的版式設(shè)計中。三角形構(gòu)圖大多是圖標(biāo)在上、文字在下，從上而下的構(gòu)圖方式，能將信息展示的更加整齊和明確。這樣用戶在閱讀頁面時，會覺得有重點，且較為舒適。2.1.4折線形構(gòu)圖折線形構(gòu)圖能夠很好地引導(dǎo)了讀者的視線，將需要表現(xiàn)的內(nèi)容放在轉(zhuǎn)角位置，這個位置用戶的視線會停留得更久一些，這樣用戶就能更多地了解產(chǎn)品的信息。很多產(chǎn)品展示類的頁面都采用折線形構(gòu)圖，將圖片和描述形成雙排折線形構(gòu)圖。這種排列方式增強了畫面的穿插感和靈動感，讓圖片處于視線的轉(zhuǎn)折處，增強了畫面的節(jié)奏感。2.1.5列表型構(gòu)圖根據(jù)圖文版式布局，我們還可以演變出列表型構(gòu)圖，這種類型的構(gòu)圖常運用在圖文左右搭配的頁面和Banner設(shè)計中。使用列表型構(gòu)圖能讓圖文搭配更有張力，更大氣同時也可以讓產(chǎn)品信息的顯示更為簡單和明確。2.2布局設(shè)計的要素好的布局設(shè)計能讓App界面看起來整齊且有層次，也能讓用戶在使用是更快地找到重點信息，提高頁面的轉(zhuǎn)化率。

2.2.1界面的留白設(shè)計界面布局時，因為內(nèi)容和頁面都比較多，為了保證頁面與頁面的統(tǒng)一性，首先需要設(shè)定頁面內(nèi)容四周的邊距，就是我們俗稱的“留白”。設(shè)定完頁面的邊距后，相應(yīng)的內(nèi)容、圖像等都可以依次確定。這樣的順序可以使調(diào)整出來的頁面條理清晰。2.2.2界面內(nèi)容對齊方式在界面設(shè)計中，最常用的對齊方式主要有3種：齊行、居左和居中。齊行：在閱讀文本的界面中最為常見，適用于較長的文本，呈現(xiàn)左右兩邊對齊的效果。居左：這種對齊方式比較常見，常用在一些信息列表的展示頁中。這種方式比較容易閱讀，可以很好地區(qū)分文本的主次關(guān)系。居中：主要運用在信息流動的文本中，如圖2-11所示。由于文本較短，使用居中對齊可以讓頁面平衡感增強。在頁面中，除了文字部分需對齊外，圖標(biāo)元素等也需要對齊。圖標(biāo)元素和文字之間基于中心線對齊，可以有效地加強二者之間的聯(lián)系，文字和圖標(biāo)可以一一對應(yīng)。

2.2.3界面內(nèi)容的間距利用間距可以有效區(qū)分頁面的層次關(guān)系，加強閱讀性。在iOS和Android系統(tǒng)的界面間距設(shè)計中，一般會以10px為單位進行設(shè)計，這樣便于統(tǒng)計和規(guī)范。以文字為主的閱讀類App一般會設(shè)定頁面的左右間距為30px。保持四周間距的一致性，可以讓界面看起來更加規(guī)整。同時，利用間距將相同類別的文字或圖像被劃分在一個區(qū)域中，還能直接劃分內(nèi)容的層級。

2.2.4界面內(nèi)容的層次界面的層次是指界面元素的前后關(guān)系。當(dāng)頁面中的信息量較大時，就需要在設(shè)計頁面時區(qū)分層次，讓用戶找到感興趣的部分，從而留住用戶。增強信息的層次關(guān)系，可以從大小對比、冷暖對比、明暗對比、視線規(guī)則和中心引導(dǎo)線等方面實現(xiàn)。大小對比：在設(shè)計元素時，面積越大的元素越應(yīng)該放在前面為主要信息。冷暖對比：當(dāng)需要通過冷暖對比突出主要元素時，暖色的元素靠前，冷色元素在后。暖色可以用在主視覺和按鈕上，次要的信息和元素使用冷色。明暗對比：當(dāng)頁面出現(xiàn)一些彈窗時，彈窗顏色鮮亮顯示，而底部背景頁面灰暗顯示。通過亮度上的對比可以快速區(qū)分可操作性和不可操作的區(qū)域。視線規(guī)則：用戶在閱讀信息時，一般都是按照從左到右或從上到下的順序進行閱讀的。按照這個規(guī)律，在設(shè)計頁面時，一般會將圖標(biāo)放在左側(cè)，描述性文字放在右側(cè)，而排列順序則是從上到下。另外，中心線的位置也是用戶最容易注意到的位置。將重要元素放在頁面中心線位置，可以快速向用戶傳遞信息。

2.3UI設(shè)計中的色彩不同的顏色帶給人們不同的心理感受。這種視覺感受也會影響用戶在使用App時的感受，因此不同類型的App會使用不同色彩的界面。

2.3.1主色/輔助色/點綴色在運用色彩進行設(shè)計時，色彩的主次關(guān)系決定了設(shè)計作品的風(fēng)格。一個頁面中的顏色最好不要超過3種，否則整個畫面會顯得雜亂，用戶也很難抓住頁面的重點信息。優(yōu)秀的作品一般由三部分顏色組成，分別是主色、輔助色和點綴色。1.主色在設(shè)計中，色彩充當(dāng)了重要色情感元素，而主色能體現(xiàn)App的定位方向。設(shè)計師需要對項目有明確了解，然后提煉出最為貼切的主色進行定位。在界面設(shè)計中，通常會將品牌的顏色定為主色，并且在不同的界面中，主色出現(xiàn)的面積也會隨之產(chǎn)生變化。2.輔助色輔助色通常指的是補充主色的顏色，起到輔助的作用，主要用來平衡畫面，讓主色更有層次感和突出性。例如，使用暖色作為主色的時候可用冷色來進行輔助，從而平衡顏色；用亮色作為主色時，可以使用暗色來壓住整體畫面。3.點綴色點綴色使用比例很小，但視覺效果很醒目。點綴色相對于主色而言，更為明亮，飽和度更高，與主色的對比很分明，能起到活躍氣氛、豐富畫面的作用。2.3.2如何配色在一個界面中會存在一種主色，其余的顏色則是輔助色。在界定界面主色時要選擇飽和度較高的顏色作為主色，這樣設(shè)計的界面會比較穩(wěn)定。那么如何選擇合適的輔助色？可以從主色的互補色和冷暖色入手。

2.相鄰色搭配相鄰色是色環(huán)中離的最近的兩個顏色，如紅色與橙色、橙色與黃色、黃色與綠色、綠色與藍色等。因為相鄰色色相比較接近，所以用相鄰色搭配的畫面能夠營造出統(tǒng)一、協(xié)調(diào)的感覺。

3.間隔色搭配間隔色是指在色環(huán)上相隔了一個或兩個色系的顏色。間隔色搭配在視覺沖擊力上強于相鄰色，在色彩的表現(xiàn)上會更加明快、時尚。

移動AppUI設(shè)計與制作

(微課版)第3章iOS系統(tǒng)設(shè)計原則及規(guī)范3.1iOS設(shè)計原則iOS(iPhoneOS)是由蘋果公司為其移動設(shè)備開發(fā)的移動操作系統(tǒng)，支持設(shè)備包括iPhone、iPad、iPodtouch。2013年蘋果公司推出了“扁平化”UI設(shè)計，并迅速普及到其他操作系統(tǒng)的UI設(shè)計中，各類App也紛紛采用，推出全新的界面。至今，“扁平化”設(shè)計仍然是UI設(shè)計的主流風(fēng)格。針對iOS系統(tǒng)，在設(shè)計時需要遵循5個原則。3.1.1統(tǒng)一化統(tǒng)一化是指UI設(shè)計時的視覺統(tǒng)一和交互統(tǒng)一。視覺統(tǒng)一是指字體、顏色和元素的統(tǒng)一化，如標(biāo)題字號的統(tǒng)一、主色調(diào)和輔助色的統(tǒng)一，以及圖標(biāo)的風(fēng)格統(tǒng)一等。交互統(tǒng)一是指使用的一致性，在軟件中保持交互形式的一致性可以減低操作難度，減少用戶的操作時間。交互設(shè)計還要遵循的一點是保持路徑的統(tǒng)一化。在iOS系統(tǒng)中，當(dāng)用戶點擊App的圖標(biāo)時，系統(tǒng)會彈出相應(yīng)的頁面，當(dāng)用戶退出App時，系統(tǒng)會返回到點擊的App圖標(biāo)所顯示的桌面位置。這種交互方式可以更好地體現(xiàn)頁面與App之間的關(guān)系。3.1.2凸顯內(nèi)容凸顯內(nèi)容合是指在設(shè)計時去除多余的元素，保留主要功能。在iOS系統(tǒng)中，經(jīng)常會將整個屏幕背景進行簡化，著重凸顯頁面所要傳達的信息內(nèi)容。在iOS7.0以后的版本界面中，按鈕設(shè)計也進行了簡化，去除了邊框，只用顏色和高亮進行區(qū)分，就可實現(xiàn)可點擊性的信息傳達。3.1.3適應(yīng)化適應(yīng)化是指場景適應(yīng)和屏幕適應(yīng)。場景適應(yīng)表示App在運行時，會按照系統(tǒng)的設(shè)定顯示不同的界面效果，如天氣類App會根據(jù)不同的天氣實時顯示相對應(yīng)的界面。屏幕適應(yīng)表示App可以切換顯示閱讀模式，如一些閱讀類App會設(shè)計日夜模式切換功能，以保證用戶在夜晚關(guān)燈的情況下可以舒適地進行閱讀。3.1.4層級性在設(shè)計界面時，一定要注意畫面的主次關(guān)系，使整體頁面有聚焦點，不能雜亂無章。將用戶的視覺集中在主要的區(qū)域是設(shè)計層級關(guān)系的重點。有層級的設(shè)計能引導(dǎo)用戶更高效的閱讀頁面，閱讀的順序一般是從左到右，從上到下，因此層級信息也會按照這樣的方式進行排列。例如類別篩選會放在上方，下方顯示篩選后的內(nèi)容；圖片放在左邊，描述性文字和按鈕放在右邊，是在UI設(shè)計時經(jīng)常會使用的形式。3.1.5易操作性易操作性體現(xiàn)在以下幾個方面。按鈕間要有足夠的間距，這樣可以避免誤操作。一般情況下，界面中一排按鈕不要超過5個。遇到錯誤頁或空白頁面，可以使用圖文搭配的形式進行提醒，如圖所示。這些頁面最好搭配用戶反饋按鈕，并指引用戶找到目標(biāo)。3.2iOS界面尺寸與控件的設(shè)計規(guī)范作為互聯(lián)網(wǎng)應(yīng)用的開發(fā)者、產(chǎn)品經(jīng)理、體驗設(shè)計師，都應(yīng)當(dāng)理解并熟悉平臺的設(shè)計規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗。

3.2.1界面尺寸每一代的iPhone手機在屏幕尺寸和分辨率上都有區(qū)別，因此手機端的iOS在設(shè)計時也不同，為了讓用戶在不同的機型上都能看到相同效果的界面信息，就需要進行屏幕適應(yīng)。其中iPhone6/7/8的設(shè)備分辨率(750×1334像素)通常作為基準(zhǔn)尺寸，可向上或向下適配。3.2.2界面三大要素大多數(shù)iOS應(yīng)用都是由UIKit中的組件構(gòu)建的。UIKit是一種定義通用界面元素的編程框架，這個框架不僅讓App在視覺外觀上保持一致，同時也為個性化設(shè)計留有很大空間。UIKit提供的界面組件有三類：欄(Bars)，視圖(Views)，控件(Controls)。欄（Bars）可以告訴用戶在App中當(dāng)前在所在的位置、能提供導(dǎo)航，還可能包含用于觸發(fā)操作和傳遞信息的按鈕或其他元素。包括6種：導(dǎo)航欄、搜索欄、側(cè)邊欄、狀態(tài)欄、標(biāo)簽欄、工具欄。視圖（Views）包含用戶在App中看到的基本內(nèi)容，例如：文本、圖片、動畫以及交互元素。視圖可以具有滾動、插入、刪除和排列等交互行為。控件（Controls）控件，是用于觸發(fā)操作并傳達信息的。例如：按鈕、開關(guān)、文本框和進度條，都屬于典型的控件。

3.2.3欄除了界面尺寸與顯示規(guī)格，iOS的界面中對導(dǎo)航欄、搜索欄、篩選框、工具欄、開關(guān)、提示框、彈出層、控件配色和交互手勢等控件也有相應(yīng)的設(shè)計規(guī)范。

1.狀態(tài)欄狀態(tài)欄位于界面最上方，主要用于顯示當(dāng)前時間、網(wǎng)絡(luò)狀態(tài)、電池電量、SIM運營商。不同型號設(shè)備的狀態(tài)欄高度不同，例如iPhone6/7/8等非全面屏設(shè)備的狀態(tài)欄高度通常為40px或60px，而iPhone12、iPhone11、iPhoneX等全面屏型號的手機界面狀態(tài)欄高度通常為88px或132px。

2.導(dǎo)航欄導(dǎo)航欄位于狀態(tài)欄之下，主要用于顯示當(dāng)前頁面標(biāo)題。目前iOS的導(dǎo)航欄主要包括88px和132px兩種高度。除當(dāng)前頁標(biāo)題外，導(dǎo)航欄也會用于放置功能圖標(biāo)。左側(cè)通常是后退跳轉(zhuǎn)按鈕，點擊左箭頭則跳轉(zhuǎn)回上頁。右側(cè)通常包括針對當(dāng)前內(nèi)容的操作，例如設(shè)置、搜索、掃一掃、個人主頁等，全屏瀏覽界面下導(dǎo)航欄會自動隱藏。

3.搜索欄搜索欄分為普通搜索欄和帶按鈕的搜索欄2種，如圖3-11所示。在一般情況下，搜索欄輸入框的背景欄高度為88px，輸入框高度為56px，輸入框內(nèi)的文字字號為30px，圓角大小為10px。

4.標(biāo)簽欄標(biāo)簽欄通常位于界面底部，也有少部分標(biāo)簽欄位于狀態(tài)欄之下、導(dǎo)航欄之上。標(biāo)簽欄主要包括App的幾大主要板塊，通常由3~5個圖標(biāo)記注釋文字組成，如微信標(biāo)簽欄內(nèi)容為“微信”、“通訊錄”、“發(fā)現(xiàn)”、“我”4個板塊。

5.工具欄工具欄可以出現(xiàn)在頁面的頂部，也可以出現(xiàn)在底部，其整體高度為88px，功能的控件可以用圖標(biāo)表示，也可用文字表示。圖標(biāo)大小為44px×44px，文字字號為32px。工具欄中的控件可對頁面進行一些功能性的操作，如刪除、編輯等。

3.2.4字體規(guī)范文字是UI設(shè)計中的一個重要元素。字體、字號、顏色和字間距等都是文字設(shè)計的重要組成部分。

1.文字設(shè)計要點在進行UI的文字設(shè)計時，字體種類、背景和風(fēng)格這3點直接影響整個版面的視覺效果。在同一界面中，切忌使用過多的字體種類，否則會使界面雜亂。在設(shè)計時，最好選擇同一系列的字體，以保證整體風(fēng)格的統(tǒng)一。文字的顏色和背景的顏色要有一定的區(qū)別，這樣用戶在閱讀時才能夠清楚地看見重點文字。反之，在光線條件不足的情況下會影響用戶閱讀信息。字體風(fēng)格要與整體設(shè)計風(fēng)格相匹配。一般App界面有固定的字體，而在界面的閃屏頁、引導(dǎo)頁設(shè)計中字體風(fēng)格可以多種多樣。

2.常用字體類型界面設(shè)計中常用的字體按風(fēng)格可以分為平穩(wěn)型、剛勁型和可愛型3種，在不同類型的設(shè)計中需要使用不同風(fēng)格的字體。

3.界面字體規(guī)范iOS中英文字體使用的是SanFrancisco(SF)和NewYork(NY)，中文字體使用的是PingFangSC蘋方黑體。SanFrancisco(SF)是一個無襯線類型的字體，與用戶界面的視覺清晰度相匹配，使用字字體的文字信息清晰易懂；NewYork(NY)是一種襯線字體，旨在補充SF字體。

4.字號規(guī)范在iOS中用戶可自行選擇文本大小，從而提高文本的靈活性。

表3-2信息層級字體樣式字號(points)強調(diào)(points)大標(biāo)題LargeTitleRegular3441標(biāo)題一Title1Regular2834標(biāo)題二Title2Regular2228標(biāo)題三Title3Regular2025頭條HeadlineSemi-Bold1722正文BodyRegular1722標(biāo)注CalloutRegular1621副標(biāo)題SubheadRegular1520注解FootnoteRegular1318注釋一Caption1Regular1216注釋二Caption2Regular11135.字體顏色規(guī)范界面中的文字分為主文、副文和提示文案3個層級。在白色背景下，文字顏色的層次分別為黑色、深灰色和淺灰。

3.2.5色彩控件規(guī)范統(tǒng)一界面的色彩，需要先將界面的主色、輔助色和點綴色羅列出來，這樣的設(shè)計界面，就可以圍繞這些顏色進行設(shè)計，避免造成界面顏色的混亂。色彩控件可以用一串顏色代碼或字母就能調(diào)取一個樣式。將所有需要用到的顏色羅列出來，按照字體、線條和色塊進行分類，并標(biāo)注顏色色塊、色值和控件代號，這樣更有助于設(shè)計師之間的協(xié)作。

3.2.6按鈕控件規(guī)范在移動設(shè)備中，有3種按鈕狀態(tài)，分別是Normal(常態(tài))、Pressed(點擊)和Disable(不可用)。通常點擊狀態(tài)的按鈕顏色為常態(tài)狀態(tài)按鈕顏色的50%，不可用狀態(tài)時，按鈕呈現(xiàn)灰色。在一款產(chǎn)品中，按鈕的大小不盡相同，需要將所有的按鈕都羅列出來制定統(tǒng)一規(guī)范。按鈕的尺寸、字號、描邊(一般為1px)、圓角(一般為8px)等都要統(tǒng)一。

3.2.7分割線規(guī)范分割線的顏色需要根據(jù)背景顏色確定。一般情況下，在白色背景下，分割線顏色為淺灰色(R:225G:225B:225)，線粗為1px；在灰色背景下，分割線顏色為深灰色(R:204G:204B:204)。

3.2.8頭像規(guī)范常見的用戶頭像邊框有帶圓角的方形或圓形兩種。為了保持產(chǎn)品的統(tǒng)一性，在不同場景頁面中對的頭像設(shè)計也應(yīng)該統(tǒng)一，如圖所示社交類產(chǎn)品運用頭像的時候比較多，在個人中心頁中，頭像大小為120px×120px；個人資料頁中，頭像大小為96px×96px；在消息列表中，頭像大小為72px×72px；在詳情頁、導(dǎo)航頁中，頭像大小為60px×60px；在帖子列表頁中，頭像大小為40px×40px。方形的頭像邊框邊緣看起來會比較明顯，容易造成視覺干擾，而圓形的頭像邊框則會將實現(xiàn)引導(dǎo)到畫面中心位置，減少用戶的閱讀時間。

3.2.9提示框規(guī)范提示框的類型可分為帶按鈕、不帶按鈕、進度提示和加載提示4種。帶按鈕的提示框可呈現(xiàn)單獨按鈕或多個按鈕，若是出現(xiàn)兩個按鈕，要區(qū)分主次，引導(dǎo)用戶完成操作。提示框的主標(biāo)題字號為34px，副標(biāo)題字號為26px。

3.2.10輸入框規(guī)范輸入框是比較常用的元素之一，它和按鈕有接近的外形。最常見的就是登錄賬號、密碼輸入框，以及搜索欄等。輸入欄的使用高度尺寸通常在36~56pt之間。搜索框中的文字字號、顏色和輸入完成后的文字字號、顏色也要進行規(guī)范。將這些元素都進行標(biāo)注，以便統(tǒng)一設(shè)計。當(dāng)需要輸入文字時，就必須使用輸入框。輸入框可以出現(xiàn)在導(dǎo)航區(qū)域或是頁面底部的評論區(qū)域。當(dāng)輸入的文字過多時，還需要規(guī)范文字輸入框的文字顯示個數(shù)、文字與邊框的間距等信息。

3.2.11間距規(guī)范當(dāng)使用不同的文字字號時，其行間距頁不同。當(dāng)文字字號為34px時，其行間距為20px；當(dāng)文字字號為32px時，其行間距為18px。在閱讀類App的頁面中，為了保證頁面的統(tǒng)一性，會在頁面四周留出一定的間距，從而保證整個頁面的規(guī)整。一般情況下，在頁面的四周會留出30px的距離，這個數(shù)值不是絕對的，可以適當(dāng)擴大，最大不超過40px，否則會降低頁面使用率，浪費版面。

3.2.12圖標(biāo)規(guī)范在同一款應(yīng)用程序中，經(jīng)常會用到許多圖標(biāo)，而這些圖標(biāo)在不同的頁面中，有不同的設(shè)計要求。圖標(biāo)按功能可以分為兩類，分別是可點擊圖標(biāo)和描述性圖標(biāo)?？牲c擊圖標(biāo)的最小范圍為40px×40px，其中最常見的是48px×48px的圖標(biāo)，點擊之后可以跳轉(zhuǎn)到相應(yīng)的頁面或產(chǎn)生反饋，此外還有32px×32px的圖標(biāo)；描述性圖標(biāo)的大小一般為24px×24px，其目的是用來增強易讀性，并不具備獨立操作。48px×48px的圖標(biāo)通常用在頂部導(dǎo)航欄和底部的菜單欄中。在一些分享頁面中也會將圖標(biāo)設(shè)定為48px×48px，這樣會顯得整個頁面很整齊。

移動AppUI設(shè)計與制作

(微課版)第4章圖標(biāo)設(shè)計4.1圖標(biāo)概述圖標(biāo)是UI設(shè)計中除了文字之外最不可或缺的視覺元素。在設(shè)計中看似只占很小的區(qū)域，但是它卻是考驗設(shè)計師基本功的重要標(biāo)準(zhǔn)。了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是UI設(shè)計入門的必備條件。4.1.1圖標(biāo)的定義圖標(biāo)，也稱為icon，它的本質(zhì)是一種符號，用來指代功能，含義，用途等。圖標(biāo)作為國際通用性語言，生活中隨處可見。UI設(shè)計中常見的圖標(biāo)大致分為2大類，第一類為“標(biāo)志性圖標(biāo)”，比如手機中應(yīng)用啟動圖標(biāo)；第二類為“功能性圖標(biāo)”，這類圖標(biāo)經(jīng)常出現(xiàn)于App或網(wǎng)站中，用于功能的指示引導(dǎo)或操作。4.1.2圖標(biāo)的重要性對于UI設(shè)計而言，圖標(biāo)可以說是整個產(chǎn)品頁面的點睛之筆，它可以直接影響一款產(chǎn)品的視覺體驗和產(chǎn)品調(diào)性。4.2圖標(biāo)的類型圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。

4.2.1擬物圖標(biāo)由于人們都是通過以往的認(rèn)知來理解新事物，所以基于這一點，早期應(yīng)用界面圖標(biāo)多采用擬物風(fēng)格，以便于人們的理解和操作。是一個由實物轉(zhuǎn)換為符號的發(fā)展歷程。例如“保存”圖標(biāo)就是將軟盤符號化之后形成的圖形，軟盤是“保存”圖標(biāo)的實體。隨著時間的推移，人們逐漸將長期接觸的符號習(xí)慣性地默認(rèn)為對應(yīng)的功能或操作。4.2.2扁平圖標(biāo)別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，進行平面化的表現(xiàn)。2013年，蘋果推出了iOS7開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，讓信息本身重新作為核心被凸顯出來，并且在設(shè)計元素上強調(diào)抽象、極簡、符號化的概念。扁平化圖標(biāo)的缺點是表現(xiàn)形式太過于抽象、缺乏情感的傳遞。

4.2.3微扁平、輕擬物從扁平風(fēng)格發(fā)展至現(xiàn)在，圖標(biāo)慢慢開始向“突出內(nèi)容”的本質(zhì)靠攏，即“認(rèn)知簡約”。表現(xiàn)形式上發(fā)展到微扁平、輕擬物的方向，相較于擬物風(fēng)格不會有太多復(fù)雜的視覺元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容。所以現(xiàn)在的界面中，我們經(jīng)常會在面積比較小的區(qū)域使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域會使用加入漸變，或輕質(zhì)感的圖標(biāo)。

4.2.4線性圖標(biāo)線性圖標(biāo)是由直線、曲線、點在內(nèi)等元素組合而成的圖標(biāo)樣式，通過線來塑造輪廓。線性圖標(biāo)具有辨識度高，清晰，簡約易識別等優(yōu)點，線性圖標(biāo)不會對頁面造成太多的視覺干擾。缺點是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)對識別性產(chǎn)生較大的困擾。

4.2.5面性圖標(biāo)面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計感的差別。

4.2.6按鈕控件規(guī)范文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關(guān)鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標(biāo)，是一種很不錯的表現(xiàn)手法。

4.2.7

“新擬物”風(fēng)格圖標(biāo)“新擬物”風(fēng)格圖標(biāo)設(shè)計的要點在于對光線的運用，進而打造一種全新的視覺體驗。不同于傳統(tǒng)的擬物風(fēng)格，“新擬物”是將真實光線效果用于虛擬對象，還原實際物品在特定光照下的效果。

4.3應(yīng)用圖標(biāo)的設(shè)計風(fēng)格產(chǎn)品應(yīng)用圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設(shè)計風(fēng)格可以更加標(biāo)新立異，從而被用戶一眼記住。因此能在第一時間贏得用戶的好感度和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計的好看且容易被人記住就成了非常重要的任務(wù)。

4.3.1中文文字圖標(biāo)中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的很多App產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計即字體設(shè)計，提取應(yīng)用名稱中的一個或多個漢字，進行設(shè)計變形，變形后的字體圖形具有產(chǎn)品屬性特有的外貌特征。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。1.單字圖標(biāo)提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設(shè)計，以達到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識別性強。2.多字圖標(biāo)多字圖標(biāo)設(shè)計要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個字，最多兩行（四個字）排列。其優(yōu)點是更加直接的告訴用戶產(chǎn)品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。3.字加圖形組合圖標(biāo)文字加輔助圖形的組合，也是常見的產(chǎn)品圖標(biāo)設(shè)計方法，相比純文字圖標(biāo)，顯得更加豐富有獨特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。4.3.2英文字母圖標(biāo)英文設(shè)計與中文設(shè)計的設(shè)計模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點或行業(yè)屬性進行創(chuàng)意加工，新的字母圖形依舊保持本身的識別性。1.單字母圖標(biāo)單字母圖標(biāo)通常提取英文首字母進行設(shè)計，由于英文字母本身結(jié)構(gòu)簡潔，稍加改動就很容易達到設(shè)計感于識別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。2.多字母圖標(biāo)多字母圖標(biāo)設(shè)計師提取產(chǎn)品全稱或幾個單詞的首字母組合而成，形成獨有的產(chǎn)品簡稱，方便用戶記憶。3.字母加圖形組合圖標(biāo)字母加圖形組合的圖標(biāo)設(shè)計形式比較多樣，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。4.3.3數(shù)字圖標(biāo)直接用數(shù)字做應(yīng)用圖標(biāo)的相對較少，但是數(shù)字識別性強，有易于傳播的特點。利用數(shù)字進行設(shè)計能給人親和力。難點是怎樣與品牌形成強關(guān)聯(lián)性。4.3.4特殊符號圖標(biāo)由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以特殊符號在應(yīng)用圖標(biāo)的設(shè)計案例中相對較少。如貨幣符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。4.3.5圖形圖標(biāo)除了中英文圖標(biāo)，還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計模式的優(yōu)點就是直觀醒目和簡潔大方，視覺沖擊力強。1.幾何圖形幾何圖形的設(shè)計模式給人簡約、現(xiàn)代、個性等視覺感受，從單個具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩(wěn)定、現(xiàn)代、時尚等，添加圓角后又會更加親民、可愛。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進行創(chuàng)意。此類型設(shè)計非常考驗設(shè)計師的圖形創(chuàng)意能力。2.單雙形單雙形是指應(yīng)用圖標(biāo)只展示單個或兩個的剪影圖形，如圖4-20所示。通常有兩種設(shè)計方式，在深色背景上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計模式的優(yōu)點是簡潔明確，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。3.線形線形的設(shè)計模式分為兩種設(shè)計方式，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺效果。4.動物圖形動物作為圖標(biāo)設(shè)計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設(shè)計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。5.卡通形象卡通風(fēng)格的產(chǎn)品圖標(biāo)會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象。很多決策者會認(rèn)為卡通是一種低齡的審美，這種想法其實是錯誤的?？ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格，如騰訊就是以企鵝作為品牌形象。6.正負(fù)形以正形為底突出負(fù)形特征，以負(fù)形表達產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPROne，圖標(biāo)中的負(fù)形圖形是對話氣泡，告訴我們這是一個媒體或社交的應(yīng)用，而正形圖形強調(diào)產(chǎn)品氣質(zhì)。7.漸變白色漸變的設(shè)計模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受。8.無無，即沒有設(shè)計。除了背景的設(shè)計，其他什么也沒有，如圖4-27所示。雖然這類設(shè)計模式比較獨特，但用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標(biāo)設(shè)計成一塊黃油的樣子已深入人心了。移動AppUI設(shè)計與制作

(微課版)第5章基礎(chǔ)UI控件制作5.1什么是UI控件UI控件主要是指能夠控制界面的一些元素，是用戶與界面互動的媒介，用戶可以通過觸發(fā)控件下達指令實現(xiàn)目標(biāo)，最常見的控件就是按鈕。5.2UI控件的交互分類UI控件的主要作用是起到控制界面的功能，通過對控件交互行為的分類可以更好地認(rèn)識控件的功能。活動控件：活動控件是代表一系列可活動的控件，這類控件會響應(yīng)用戶最基本的手勢操作，如點擊、觸摸、滑動等操作。當(dāng)控件被操作時，可以激發(fā)控件綁定的相應(yīng)的事件，從而達到開發(fā)者所想要呈現(xiàn)的效果。靜態(tài)控件：靜態(tài)控件可以理解為用于顯示應(yīng)用的某種狀態(tài)或者某個視圖，用戶不會通過靜態(tài)控件執(zhí)行任何的操作。被動控件：被動控件就是用于接受用戶輸入的值，并不會激發(fā)任何的事件。

5.3常見基礎(chǔ)控件控件的種類有很多，一些常見的基礎(chǔ)控件如下。

按鈕

圖標(biāo)

開關(guān)輸入框滑塊進度條選框

移動AppUI設(shè)計與制作

(微課版)第6章閃屏頁設(shè)計6.1閃屏頁的概念閃屏頁是指用戶進入應(yīng)用程序時立刻出現(xiàn)的頁面，是應(yīng)用程序打開前的有效過渡頁面。該頁面承載了用戶對App的第一印象，因此對設(shè)計的要求十分講究。閃屏頁給用戶觀看的時間很短，通常只有1~3秒的時間，因此如何在這么短的時間內(nèi)表達App的定位就是設(shè)計師需要重點考慮的問題。只有設(shè)計出定位明確且富有吸引力的閃屏頁，才能加深用戶對App的認(rèn)知度。6.2閃屏頁的常見類型閃屏頁分為品牌宣傳型、節(jié)假關(guān)懷型和廣告運營型3種類型，不同類型的閃屏頁承載的內(nèi)容信息和表達方式也不一樣。

6.2.1品牌宣傳型App的閃屏頁主要是為了傳達品牌定位而設(shè)的，主要組成部分包括App名稱、標(biāo)語和主題宣傳畫。品牌宣傳型的閃屏頁設(shè)計力求精簡，凸顯品牌特點。6.2.2節(jié)假關(guān)懷型每逢節(jié)假日、節(jié)氣，很多App會通過推出一些與節(jié)假日、節(jié)氣相關(guān)的插圖作為閃屏頁，給用戶營造節(jié)假日的氣氛來體現(xiàn)人文關(guān)懷。這種設(shè)計不僅能夠加強與用戶的情感交流，提升品牌的親和力，還能夠加深用戶對品牌的印象。這種類型的閃屏頁在設(shè)計上更具自由度與創(chuàng)新性。6.2.3廣告運營型廣告運營型閃屏頁主要是利用閃屏的形式進行活動或廣告宣傳，引流變現(xiàn)。由于用戶對廣告的接收程度不同，因此在視覺設(shè)計上盡量創(chuàng)新，吸引用戶。同時，設(shè)計“跳過”或“倒計時”按鈕，避免因廣告影響用戶體驗感。移動AppUI設(shè)計與制作

(微課版)第7章引導(dǎo)頁設(shè)計7.1引導(dǎo)頁的概念引導(dǎo)頁是為引導(dǎo)新用戶了解App界面的使用流程，幫助新用戶快速了解App功能的介紹與初體驗的交互設(shè)計。因此，引導(dǎo)頁通常只會在用戶第一次點擊進入應(yīng)用程序時出現(xiàn)，之后不再顯示。優(yōu)秀的引導(dǎo)頁能與用戶建立良好的情感聯(lián)系，并提高App的使用率。7.2引導(dǎo)頁的常見類型因此，根據(jù)引導(dǎo)頁所要表達的內(nèi)容和方式，引導(dǎo)頁大致可分為功能介紹型和情感代入型兩大類。

7.2.1功能介紹型功能介紹型引導(dǎo)頁是最基礎(chǔ)的一種引導(dǎo)頁。通常在新產(chǎn)品發(fā)布及新功能上線時使用，主要針對新功能進行演示介紹，讓用戶快速了解其具體使用方法。設(shè)計師需要把簡潔明了、通俗易懂的文案和界面呈現(xiàn)給用戶。采用的形式大多是在界面上插入說明文字、引導(dǎo)性的圖形符號讓用戶更容易識別和理解。7.2.2情感代入型情感代入型引導(dǎo)頁主要通過文案和配圖，將用戶的需求通過某種形式表現(xiàn)出來，以突出App的價值。這類型的引導(dǎo)頁通過形象化、生動化、立體化的設(shè)計吸引用戶，增強用戶對產(chǎn)品的了解。7.3浮層引導(dǎo)頁浮層引導(dǎo)頁一般出現(xiàn)在App功能操作提示中，是為了能夠讓用戶在使用過程中更好地解決問題。這種引導(dǎo)頁的浮層通常會以蒙版的形式，并用高亮的顏色來突出功能信息。

移動AppUI設(shè)計與制作

(微課版)第8章空白頁設(shè)計8.1空白頁的概念空白頁是使用App的過程中遇到網(wǎng)絡(luò)問題或跳轉(zhuǎn)到?jīng)]有內(nèi)容的頁面時顯示的頁面。一般情況下，空白頁會通過文字信息提示用戶當(dāng)前頁面的需要進行的操作，或錯誤的類型，如沒有信息、無網(wǎng)絡(luò)、列表為空等。8.2空白頁的常見類型空白頁分為首次進入型和錯誤提示型兩種。

8.2.1首次進入型用戶在初次打開App時，App會利用空白頁指引用戶進行一些必要操作，并且引導(dǎo)用戶找到一些需要的內(nèi)容。這類的空白頁會通過有特點、明顯的按鈕引導(dǎo)用戶進行下一步操作，并且在滿足條件后支持使用某些功能。設(shè)計師在設(shè)計這類空白頁時，一定要考慮設(shè)計跳轉(zhuǎn)按鈕的位置。8.2.2錯誤提示型錯誤提示型的空白頁在App中經(jīng)常出現(xiàn)，如顯示“找不到頁面”或者“網(wǎng)絡(luò)中斷”等。這類頁面中一定會有引導(dǎo)用戶刷新網(wǎng)頁的操作按鈕或返回上一級頁面的操作按鈕。移動AppUI設(shè)計與制作

(微課版)第9章首頁設(shè)計9.1首頁的概念首頁是App的第一交互界面，主要體現(xiàn)產(chǎn)品屬性、展示主要功能、傳達品牌形象，是App的門面。首頁不僅能加深用戶對品牌的認(rèn)知，還能幫助用戶快速了解App的主要內(nèi)容。因此，選擇合適的首頁展示方式是非常重要的。9.2首頁的常見類型首頁的類型大致可分為列表型、圖標(biāo)型、卡片型和綜合型4類。

9.2.1列表型列表型首頁是在一個頁面上展示同一個級別內(nèi)容的分類模塊。模塊由文案和圖像組成。列表型首頁上下劃動可以查看更多的內(nèi)容，更方便點擊操作。9.2.2圖標(biāo)型當(dāng)首頁主要展示幾個