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

移動(dòng)AppUI設(shè)計(jì)與制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.相鄰色搭配相鄰色是色環(huán)中離的最近的兩個(gè)顏色，如紅色與橙色、橙色與黃色、黃色與綠色、綠色與藍(lán)色等。因?yàn)橄噜徤啾容^接近，所以用相鄰色搭配的畫(huà)面能夠營(yíng)造出統(tǒng)一、協(xié)調(diào)的感覺(jué)。

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

移動(dòng)AppUI設(shè)計(jì)與制作

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

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

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

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

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

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

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

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

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

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

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

3.界面字體規(guī)范iOS中英文字體使用的是SanFrancisco(SF)和NewYork(NY)，中文字體使用的是PingFangSC蘋(píng)方黑體。SanFrancisco(SF)是一個(gè)無(wú)襯線(xiàn)類(lèi)型的字體，與用戶(hù)界面的視覺(jué)清晰度相匹配，使用字字體的文字信息清晰易懂；NewYork(NY)是一種襯線(xiàn)字體，旨在補(bǔ)充SF字體。

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

表3-2信息層級(jí)字體樣式字號(hào)(points)強(qiáng)調(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個(gè)層級(jí)。在白色背景下，文字顏色的層次分別為黑色、深灰色和淺灰。

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

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

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

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

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

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

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

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

移動(dòng)AppUI設(shè)計(jì)與制作

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

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

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

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

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

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

4.2.7

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

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

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

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

5.3常見(jiàn)基礎(chǔ)控件控件的種類(lèi)有很多，一些常見(jiàn)的基礎(chǔ)控件如下。

按鈕

圖標(biāo)

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

移動(dòng)AppUI設(shè)計(jì)與制作

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

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

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

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

移動(dòng)AppUI設(shè)計(jì)與制作

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

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

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

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