模塊1

認(rèn)知移動(dòng)終端UI設(shè)計(jì)認(rèn)識移動(dòng)終端UI設(shè)計(jì)UI圖標(biāo)設(shè)計(jì)滑塊設(shè)計(jì)按鈕設(shè)計(jì)表單控件設(shè)計(jì)APP導(dǎo)航設(shè)計(jì)移動(dòng)端界面設(shè)計(jì)APP綜合設(shè)計(jì)實(shí)例切圖與標(biāo)注全套可編輯PPT課件

01UI設(shè)計(jì)02移動(dòng)終端03APP設(shè)計(jì)04移動(dòng)設(shè)備屏幕05智能手機(jī)操作系統(tǒng)規(guī)范知識與技能目標(biāo)認(rèn)知UI設(shè)計(jì)的概念、UI設(shè)計(jì)的分類。了解移動(dòng)終端的概念和種類，熟悉App的分類。了解App界面的構(gòu)成元素，熟悉App的設(shè)計(jì)流程與規(guī)范。品德與素養(yǎng)目標(biāo)培養(yǎng)正確的UI設(shè)計(jì)價(jià)值觀。增強(qiáng)UI設(shè)計(jì)的職業(yè)自豪感。愛崗敬業(yè)、誠實(shí)守信、踐行社會(huì)主義核心價(jià)值觀。01UI設(shè)計(jì)1.1.1UI設(shè)計(jì)的概念UI設(shè)計(jì)UI是用戶界面的簡稱，從字面上看由用戶與界面兩個(gè)部分組成，但實(shí)際上還包括用戶與界面之間的交互關(guān)系。UI設(shè)計(jì)是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對軟件界面進(jìn)行美化、優(yōu)化和規(guī)范的設(shè)計(jì)分支，分為實(shí)體UI和虛擬UI。提示：互聯(lián)網(wǎng)行業(yè)所說的UI設(shè)計(jì)是虛擬UI，一般是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。1.1.1UI設(shè)計(jì)的概念UI的實(shí)質(zhì)內(nèi)容包括手機(jī)系統(tǒng)界面、網(wǎng)站界面、音樂點(diǎn)歌屏界面、游戲操作界面、智能電視界面、汽車導(dǎo)航界面等，這些領(lǐng)域都需要UI設(shè)計(jì)師。而且隨著用戶體驗(yàn)越來越重要，手機(jī)系統(tǒng)界面、智能電視界面、游戲操作界面等常見的界面不再像以前那樣古板，它需要UI設(shè)計(jì)師既設(shè)計(jì)出美觀的視覺效果，又保證有好的交互體驗(yàn)，以便用戶使用得更加舒適和方便。圖1-1所示為UI界面與界面圖標(biāo)。圖1-1

UI界面與界面圖標(biāo)1.1.2UI設(shè)計(jì)的分類個(gè)人計(jì)算機(jī)端UI設(shè)計(jì)01PC端UI設(shè)計(jì)主要指用戶計(jì)算機(jī)界面設(shè)計(jì)，其中包括系統(tǒng)界面設(shè)計(jì)、軟件界面設(shè)計(jì)和網(wǎng)站界面設(shè)計(jì)，如圖1-2~圖1-4所示。1.1.2UI設(shè)計(jì)的分類圖1-2Windows10操作系統(tǒng)界面1.1.2UI設(shè)計(jì)的分類圖1-3應(yīng)用軟件界面1.1.2UI設(shè)計(jì)的分類圖1-4網(wǎng)站界面1.1.2UI設(shè)計(jì)的分類移動(dòng)終端UI設(shè)計(jì)02移動(dòng)終端是通過無線技術(shù)接入互聯(lián)網(wǎng)的終端設(shè)備，其主要功能就是移動(dòng)上網(wǎng)。移動(dòng)終端UI設(shè)計(jì)的界面也具有各自的特點(diǎn)，如圖1-5~圖1-7所示。1.1.2UI設(shè)計(jì)的分類圖1-5手機(jī)界面1.1.2UI設(shè)計(jì)的分類圖1-6Pad界面1.1.2UI設(shè)計(jì)的分類圖1-7智能手表界面1631.1.2UI設(shè)計(jì)的分類其他終端UI設(shè)計(jì)03除了上述終端設(shè)備需要用到UI界面設(shè)計(jì)外，市場上還包含許多其他終端設(shè)備，同樣需要用到UI設(shè)計(jì)，如車載系統(tǒng)、自動(dòng)提款機(jī)等，如圖1-8和圖1-9所示。1.1.2UI設(shè)計(jì)的分類圖1-8車載系統(tǒng)界面1.1.2UI設(shè)計(jì)的分類圖1-9自動(dòng)提款機(jī)界面1.1.3UI設(shè)計(jì)師技能要求視覺設(shè)計(jì)交互設(shè)計(jì)體驗(yàn)設(shè)計(jì)312視覺設(shè)計(jì)是針對眼睛功能的主觀形式的表現(xiàn)手段和結(jié)果。交互設(shè)計(jì)是一種目標(biāo)導(dǎo)向設(shè)計(jì)，所有的工作內(nèi)容都是圍繞用戶行為去設(shè)計(jì)的。體驗(yàn)設(shè)計(jì)是將消費(fèi)者的參與融入設(shè)計(jì)中，使消費(fèi)者感受到美好的體驗(yàn)過程，它是基于人機(jī)交互、圖形化設(shè)計(jì)、界面設(shè)計(jì)和其他相關(guān)理論進(jìn)行的設(shè)計(jì)。02移動(dòng)終端1.2.1移動(dòng)終端的概念移動(dòng)終端移動(dòng)終端或稱移動(dòng)通信終端，原指可以在移動(dòng)中使用的計(jì)算機(jī)設(shè)備，近年來普遍認(rèn)定為移動(dòng)智能終端。移動(dòng)智能終端擁有接入互聯(lián)網(wǎng)的能力，通常搭載各種操作系統(tǒng)，可根據(jù)用戶需求定制化各種功能。提示：生活中常見的移動(dòng)智能終端包括智能手機(jī)、PDA智能終端、平板電腦、車載智能終端、可穿戴設(shè)備等。1.2.1移動(dòng)終端的概念移動(dòng)終端特別是移動(dòng)智能終端，具有如下特性和功能：54321移動(dòng)性和實(shí)時(shí)性。通話功能、上網(wǎng)功能和多媒體功能。硬件與軟件的可靠性。基于操作系統(tǒng)的多任務(wù)性。應(yīng)用程序安裝使用的廣泛性與易用性。智能手機(jī)智能手機(jī)像個(gè)人計(jì)算機(jī)一樣，具有獨(dú)立的操作系統(tǒng)，可以由用戶自行安裝第三方服務(wù)商提供的程序，通過此類程序來不斷對其功能進(jìn)行擴(kuò)充，并可以通過移動(dòng)通信網(wǎng)絡(luò)來實(shí)現(xiàn)無線網(wǎng)絡(luò)接入的一類手機(jī)的總稱。提示：智能手機(jī)現(xiàn)在已經(jīng)通過各種各樣的功能和App取代了人們?nèi)粘Ｉ钪械脑S多工具，如導(dǎo)航、數(shù)碼相機(jī)、指南針、手電筒等，并且它們還在不停地進(jìn)步。1.2.2移動(dòng)終端的種類智能手機(jī)的特點(diǎn)：020301060504具有開放性操作系統(tǒng)人性化無線接入互聯(lián)網(wǎng)運(yùn)行速度快功能強(qiáng)大具有個(gè)人數(shù)字助理功能1.2.2移動(dòng)終端的種類PDA智能終端又被稱為掌上計(jì)算機(jī)，可以幫助我們在移動(dòng)中進(jìn)行工作、學(xué)習(xí)、娛樂等。1.2.2移動(dòng)終端的種類PDA智能終端提示：廣泛用于服裝、快速消費(fèi)品、快遞、零售連鎖、倉儲、移動(dòng)醫(yī)療等多個(gè)行業(yè)的數(shù)據(jù)采集，支持GPRS/4G/WiFi等無線網(wǎng)絡(luò)通信。消費(fèi)品PDA包括智能手機(jī)、手持游戲機(jī)等。1.2.2移動(dòng)終端的種類按使用來分類，分為工業(yè)級PDA和消費(fèi)品PDA。工業(yè)級PDA主要應(yīng)用在工業(yè)領(lǐng)域，常見的有條碼掃描器、射頻識別（radiofrequencyidentification，RFID）讀寫器、POS機(jī)等。工業(yè)級PDA內(nèi)置高性能激光掃描引擎、高速CPU、操作系統(tǒng)，具備超級防水、防摔及抗壓能力。如圖1-10所示。圖1-10PDA智能終端設(shè)備1.2.2移動(dòng)終端的種類平板電腦平板電腦（tabletpersonalcomputer，簡稱TabletPC、FlatPC、Tablet、Slates）是一種小型、方便攜帶的個(gè)人計(jì)算機(jī)，以觸摸屏作為基本的輸入設(shè)備。提示：擁有的觸摸屏（也稱為數(shù)位板技術(shù)）允許用戶通過觸控筆或數(shù)字筆來進(jìn)行作業(yè)而不需要傳統(tǒng)的鍵盤或鼠標(biāo)。1.2.2移動(dòng)終端的種類1.2.2移動(dòng)終端的種類圖1-11平板電腦平板電腦的概念由比爾?蓋茨提出，支持Intel、AMD和ARM的芯片架構(gòu)，從平板電腦的產(chǎn)品來看，它就是一款無須翻蓋、沒有鍵盤、小到可以放入女士手袋，但功能完整的PC，如圖1-11所示。車載智能終端車載智能終端具備GPS定位、車輛導(dǎo)航、采集和診斷故障信息等功能，在新一代汽車行業(yè)中得到了大量應(yīng)用，能對車輛進(jìn)行現(xiàn)代化管理，未來還將在智能交通中發(fā)揮更大的作用，如圖1-12所示。1.2.2移動(dòng)終端的種類圖1-12車載智能終端設(shè)備可穿戴設(shè)備越來越多的科技公司開始大力開發(fā)智能眼鏡、智能手表、智能手環(huán)、智能戒指等可穿戴設(shè)備產(chǎn)品。智能終端開始與時(shí)尚掛鉤，人們的需求不再局限于可攜帶，更追求可穿戴，手表、戒指、眼鏡都有可能成為智能終端。1.2.2移動(dòng)終端的種類03APP設(shè)計(jì)1.3.1App和App設(shè)計(jì)的概念A(yù)ppApp設(shè)計(jì)就是為這些移動(dòng)終端設(shè)計(jì)第三方應(yīng)用程序，包括程序設(shè)計(jì)和界面設(shè)計(jì)。提示：例如，微信和QQ是騰訊公司推出的生活社交類App，淘寶是阿里巴巴公司推出的購物類App，美團(tuán)是北京三快在線科技有限公司推出的生活服務(wù)類App，以及一些影音類App、學(xué)習(xí)類App、工具類App等，各種各樣的App給人們的生活帶來了實(shí)質(zhì)性的變化。1.3.1App和App設(shè)計(jì)的概念A(yù)pp設(shè)計(jì)App即application（應(yīng)用程序）的縮寫，指運(yùn)行在智能手機(jī)、平板電腦等移動(dòng)終端設(shè)備上的第三方應(yīng)用程序。提示：AppUI設(shè)計(jì)主要針對的是App界面、操作邏輯、人機(jī)互動(dòng)的設(shè)計(jì)，屬于App視覺設(shè)計(jì)，主要是為了使App的界面更好看；而App交互設(shè)計(jì)是指設(shè)計(jì)師對App本身及App使用者之間的互動(dòng)機(jī)制進(jìn)行的分析、預(yù)測、定義、規(guī)劃、描述甚至是探索的過程，是設(shè)計(jì)和定義使用者如何使用產(chǎn)品達(dá)到其目標(biāo)，完成某一項(xiàng)任務(wù)的過程。1.3.2APP的分類12345購物類購物類App種類繁多，目前市場占有率比較高的有淘寶、天貓、京東、拼多多等。購物類App又可細(xì)分為飲食類、服飾類、家用電器類、旅行出游類、娛樂休閑類等。1.3.2APP的分類12345社交類圖1-13常用社交類App常用社交類App如圖1-13所示。1.3.2APP的分類12345生活服務(wù)類生活服務(wù)類App有很多，而且類型廣泛，方便了人們的日常生活，如繳納電費(fèi)、水費(fèi)和天然氣費(fèi)可以選擇支付寶，外賣、打車、訂酒店可以選擇美團(tuán)。1.3.2APP的分類12345短視頻類短視頻類App在短短幾年內(nèi)呈現(xiàn)井噴式的增長，截至2023年6月，我國短視頻用戶規(guī)模約10.26億人。1.3.2APP的分類12345新聞資訊類使用手機(jī)看新聞一直都是很多人非常喜歡的方式，手機(jī)新聞軟件可以讓人們更加方便、快捷、即時(shí)地了解行業(yè)動(dòng)態(tài)和時(shí)下新聞等。常用新聞資訊類App如圖1-14所示。圖1-14常用新聞資訊類App1.3.3APP界面的構(gòu)成元素1234567按鈕按鈕是移動(dòng)UI界面設(shè)計(jì)中不可或缺的基本控件，在各種App中都少不了它的參與，通過它可以完成很多任務(wù)。1.3.3APP界面的構(gòu)成元素1234567開關(guān)開關(guān)在移動(dòng)UI界面中是很常見的一種控件，它能夠?qū)缑嬷心硞€(gè)功能或設(shè)置進(jìn)行開啟和關(guān)閉操作，其外觀設(shè)計(jì)非常豐富。1.3.3APP界面的構(gòu)成元素1234567進(jìn)度條進(jìn)度條是在進(jìn)入某個(gè)界面或程序時(shí)，App為了緩沖和加載信息所顯示出來的控件，它可以顯示出當(dāng)前加載的百分比，讓用戶掌握相關(guān)的數(shù)據(jù)和進(jìn)度。1.3.3APP界面的構(gòu)成元素1234567搜索欄用戶在某個(gè)界面上查找信息出現(xiàn)困難時(shí)，通常會(huì)嘗試進(jìn)行搜索。搜索欄是一個(gè)網(wǎng)站App的主要組成部分之一，在界面設(shè)計(jì)中可以考慮在合適的位置放一個(gè)搜索欄，讓用戶更方便地進(jìn)行搜索。1.3.3APP界面的構(gòu)成元素1234567列表框列表框作為一個(gè)單一的連續(xù)元素，可以以垂直排列的方式顯示多行條目。在移動(dòng)應(yīng)用設(shè)計(jì)中，列表框通常用于信息的展示與選擇。1.3.3APP界面的構(gòu)成元素1234567標(biāo)簽欄在一個(gè)移動(dòng)設(shè)備的應(yīng)用程序中，標(biāo)簽欄能夠?qū)崿F(xiàn)在不同的視圖或功能之間切換的操作，以及瀏覽不同類別的數(shù)據(jù)，它的存在讓界面信息更加規(guī)范和系統(tǒng)。1.3.3APP界面的構(gòu)成元素1234567圖標(biāo)圖標(biāo)是App的重要組成部分和主要入口，是一種出現(xiàn)在移動(dòng)設(shè)備屏幕上的圖像符號，包括應(yīng)用圖標(biāo)和功能圖標(biāo)。應(yīng)用圖標(biāo)的設(shè)計(jì)影響著用戶對App的第一印象，同時(shí)也是產(chǎn)品調(diào)性和品牌形象的體現(xiàn)。功能圖標(biāo)是指在UI界面中使用到的圖標(biāo)，也就是常說的icon。其按照功能來分，可以分為可點(diǎn)擊和不可點(diǎn)擊兩類；按照使用區(qū)域來分，可以分為標(biāo)簽欄圖標(biāo)（tabbar）、導(dǎo)航欄圖標(biāo)（navigationbar）和金剛區(qū)域（頁面的核心功能區(qū)域）圖標(biāo)。1.3.4APP的設(shè)計(jì)流程5.服務(wù)端開發(fā)6.客戶端開發(fā)7.APP程序測試8.發(fā)布運(yùn)營9.APP的維護(hù)及更新4.數(shù)據(jù)庫搭建3.UI視覺設(shè)計(jì)2.產(chǎn)品原型設(shè)計(jì)（見圖1-15）1.用戶需求分析1.3.4APP的設(shè)計(jì)流程圖1-15App設(shè)計(jì)草圖04移動(dòng)設(shè)備屏幕1.4.1英寸英寸（inch，1in≈2.54cm）是一種長度單位，指的是屏幕對角線的長度。顯示設(shè)備的規(guī)格通常用英寸來表示，如17英寸筆記本電腦、60英寸液晶電視等，手機(jī)屏幕也采用該計(jì)量單位（見圖1-16）。圖1-16屏幕尺寸1.4.2像素像素（pixel）又稱pictureelement。數(shù)字圖像是由按一定間隔排列的亮度不同的像點(diǎn)構(gòu)成的，形成像點(diǎn)的單位稱為像素，也就是說，組成圖像的最小單位是像素，即畫面中最小的點(diǎn)（單位色塊）。像素的大小是沒有固定長度值的，不同設(shè)備上1個(gè)單位像素色塊的大小是不一樣的。從計(jì)算機(jī)技術(shù)的角度來解釋，像素是硬件和軟件所能控制的最小單位提示：像素指顯示屏的畫面上表示出來的最小單位，而不是圖畫上的最小單位。1.4.3分辨率分辨率是屏幕物理像素的總和，是指顯示器所能顯示像素的多少。在屏幕尺寸相同的情況下，可顯示的像素越多，畫面就越精細(xì)。1.4.3分辨率分辨率可以分為屏幕分辨率和圖像分辨率。1.屏幕分辨率屏幕分辨率是屏幕每行的像素點(diǎn)數(shù)乘以每列的像素點(diǎn)數(shù)，每個(gè)屏幕都有自己的分辨率。2.圖像分辨率圖像分辨率是指每英寸圖像內(nèi)的像素點(diǎn)數(shù)，單位為像素每英寸。提示：分辨率越高，像素的點(diǎn)密度越高，圖像越逼真。提示：屏幕分辨率越高，所呈現(xiàn)的色彩越多，清晰度越高。1.4.4網(wǎng)點(diǎn)密度與像素密度在紙質(zhì)媒介時(shí)代，我們常用網(wǎng)點(diǎn)密度（dotperinch，DPI）來描述印刷品的打印精度。DPI常用于設(shè)備（如掃描儀、打印機(jī)）參數(shù)的描述。例如，設(shè)置了打印分辨率為96DPI，那么打印機(jī)在打印過程中，每英寸的長度打印了96個(gè)墨點(diǎn)，打印機(jī)在每英寸內(nèi)打印的墨點(diǎn)越多，圖片看起來越精細(xì)。這種概念也帶入PC時(shí)代的Windows操作系統(tǒng)，Windows操作系統(tǒng)的默認(rèn)DPI為96。1.4.4網(wǎng)點(diǎn)密度與像素密度像素密度（pixelperinch，PPI）常用于屏幕顯示的描述，用來表示每英寸像素點(diǎn)數(shù)量。在Photoshop中設(shè)定某圖的分辨率為72PPI，那么對應(yīng)到現(xiàn)實(shí)尺度中，屏幕將以每英寸72個(gè)像素的方式來顯示圖片。PPI數(shù)值高的顯示屏幕，其畫面看起來也更加細(xì)膩。1.4.4網(wǎng)點(diǎn)密度與像素密度DPI的概念應(yīng)用在手機(jī)屏幕上，表示手機(jī)屏幕上每英寸可以顯示的像素點(diǎn)數(shù)量。這時(shí)用PPI來描述這個(gè)屏幕。屏幕生產(chǎn)工藝越高，每平方英寸能容納的像素就越多。1.4.5視網(wǎng)膜屏幕這個(gè)術(shù)語最初用在iPhone4手機(jī)上，它將960×640的像素壓縮到一個(gè)3.5英寸的顯示屏內(nèi)，也就是說，該屏幕的像素密度達(dá)到326像素/英寸。視網(wǎng)膜屏幕是分辨率超過人眼識別極限的高分辨率屏幕，它是蘋果公司發(fā)明的一個(gè)營銷術(shù)語，并在部分移動(dòng)產(chǎn)品上使用。05智能手機(jī)操作系統(tǒng)規(guī)范1.5.1iOS系統(tǒng)iOS是由蘋果公司開發(fā)的移動(dòng)操作系統(tǒng)，最初作為蘋果移動(dòng)設(shè)備iPhone的操作系統(tǒng)，后來陸續(xù)套用到iPodtouch、iPad及AppleTV等產(chǎn)品上。iOS的用戶界面能夠使用多點(diǎn)觸控直接操作，控制方法包括滑動(dòng)、輕觸開關(guān)及按鍵，與系統(tǒng)交互包括滑動(dòng)、輕按、擠壓及反向擠壓。此外，iOS自帶的加速器可以改變其旋轉(zhuǎn)設(shè)備的y軸以使屏幕改變方向，令iPhone更便于使用。1.5.1iOS系統(tǒng)1.文字規(guī)范在iOS8系統(tǒng)中，英文和數(shù)字字體為Helvetica，它是比較典型的扁平風(fēng)格字體，中文字體為HeitiSC（黑體-簡）。在iOS9系統(tǒng)中，英文字體為HelveticaNeue，中文字體為“冬青黑”。在iOS10系統(tǒng)中，英文字體為SanFrancisco，中文字體為“蘋方”。1.5.1iOS系統(tǒng)詳情頁標(biāo)題文字與詳情文字間距為8的倍數(shù)。例如，24像素、32像素、40像素等。設(shè)定行間距與字號比例為1.5倍。對齊原則為段落文字采用“兩端對齊左對齊”，避頭尾為“嚴(yán)格”，首行嚴(yán)禁放5標(biāo)點(diǎn)。文字搭配一般用4和6的梯度搭配。例如，一般文字30像素標(biāo)題搭配26像素詳情，帶頭列表30像素標(biāo)題搭配22像素輔助信息。關(guān)于字體大小的問題，頂部操作欄文字大小為34～38像素，標(biāo)題文字大小為28～34像素，正文文字大小為26～30像素，輔助性文字大小為0～24像素。1.5.1iOS系統(tǒng)2.界面布局規(guī)范1234狀態(tài)欄尺寸為750像素×40像素，字體大小為24像素導(dǎo)航欄尺寸為750像素×88像素，標(biāo)題文字為34~40像素，按鈕文字一般不大于32像素。內(nèi)容區(qū)尺寸為750像素×1108像素，字體大小為22~36像素。標(biāo)簽欄尺寸為750像素×98像素，字體大小為22~24像素。以iPhone7的分辨率750像素×1334像素為例，了解界面中的狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄和內(nèi)容區(qū)的尺寸大小和文字大小。Android系統(tǒng)是一種基于Linux開發(fā)的操作系統(tǒng)，主要用于移動(dòng)設(shè)備，如智能手機(jī)和平板電腦，由谷歌公司開發(fā)，是目前市場上主流的智能設(shè)備操作系統(tǒng)。1.5.2Android系統(tǒng)1.文字規(guī)范在實(shí)際設(shè)計(jì)中，Android4.x系統(tǒng)使用中文字體為DroidSansFallback，英文字體為Roboto；Android5.x系統(tǒng)使用中文字體為“思源雅黑”，而在實(shí)際設(shè)計(jì)中，中文字體選擇“方正蘭亭黑”，英文字體仍然使用Roboto。1.5.2Android系統(tǒng)在進(jìn)行UI設(shè)計(jì)時(shí)，需要把使用的字體調(diào)到像素高度，利用Photoshop里對應(yīng)的字號進(jìn)行設(shè)計(jì)。也就是說，Photoshop里的字號都需要根據(jù)實(shí)際情況手動(dòng)調(diào)出來，沒有捷徑。例如，當(dāng)PPI為240時(shí)，對應(yīng)的像素高度和字體字號如圖1-17所示。1.5.2Android系統(tǒng)圖1-17像素高度和字體字號1.5.2Android系統(tǒng)（1）狀態(tài)欄尺寸為720像素×50像素，字體大小為24像素。（2）導(dǎo)航欄尺寸為720像素×96像素，標(biāo)題文字為34~40像素，按鈕文字一般不大于32像素。（4）內(nèi)容區(qū)尺寸為720像素×1380像素，字體大小為20~36像素。（3）標(biāo)簽欄尺寸為720像素×96像素，字體大小為22~24像素。++=2.界面布局規(guī)范以Android手機(jī)720像素×1280像素分辨率為例，針對界面中的狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄和內(nèi)容區(qū)的尺寸大小和文字大小進(jìn)行具體設(shè)置。知識與技能提升1.判斷題（1）在屏幕尺寸相同的情況下，可顯示的像素越多，畫面就越精細(xì)。（）（2）像素密度常用于屏幕顯示的描述，也就是每英寸像素點(diǎn)的數(shù)量。（）（3）華為P60Pro手機(jī)應(yīng)用市場中的圖標(biāo)尺寸為512像素×512像素。（）（4）設(shè)計(jì)手機(jī)圖標(biāo)時(shí)像素分辨率不能低于100像素，這樣圖標(biāo)才不會(huì)失真。（）（5）視網(wǎng)膜屏幕是分辨率超過人眼識別極限的高分辨率屏幕，它是蘋果公司發(fā)明的一個(gè)營銷術(shù)語，并在部分移動(dòng)產(chǎn)品上使用。（）2.選擇題（1）Android系統(tǒng)平臺按照像素密度將手機(jī)屏幕進(jìn)行等級劃分，其中XHDPI屬于（）。A.像素密度

B.高密度屏幕 C.像素分辨率

D.手機(jī)屏幕（2）在UI設(shè)計(jì)中，視覺設(shè)計(jì)不僅僅是制作圖標(biāo)、界面或界面元素，還包括（）。（多選）A.平面構(gòu)成 B.色彩構(gòu)成 C.版式設(shè)計(jì)

D.程序設(shè)計(jì)（3）生活中常見的移動(dòng)智能終端包括（）。（多選）A.移動(dòng)智能終端 B.計(jì)算機(jī) C.智能電視

D.車載智能終端（4）加載頁加載完成后，通常會(huì)看到幾張連續(xù)展示、設(shè)計(jì)精美、風(fēng)格統(tǒng)一的頁面，這就是引導(dǎo)頁，一般不會(huì)超過（）頁。A.4 B.5 C.6 D.7（5）加載頁加載時(shí)間通常為（）ms。大部分商家會(huì)將這個(gè)加載頁制作成廣告頁。A.500~1000 B.1000~2000 C.2000~3000 D.3000~4000知識與技能提升3.實(shí)操題（1）搜集整理iOS手機(jī)APP的設(shè)計(jì)規(guī)范。（2）搜集整理Android手機(jī)APP的設(shè)計(jì)規(guī)范。知識與技能提升品德與素養(yǎng)提升習(xí)近平總書記在中國共產(chǎn)黨第二十次全國代表大會(huì)報(bào)告中指出“廣大青年要堅(jiān)定不移聽黨話、跟黨走，懷抱夢想又腳踏實(shí)地，敢想敢為又善作善成，立志做有理想、敢擔(dān)當(dāng)、能吃苦、肯奮斗的新時(shí)代好青年”。有人認(rèn)為：UI設(shè)計(jì)師從事UI設(shè)計(jì)，工作以技術(shù)為主，而技術(shù)是客觀的，不涉及理想與擔(dān)當(dāng)，也不會(huì)左右人們的價(jià)值觀，更談不上傳遞負(fù)能量的問題。對于這種言論需要如何正確引導(dǎo)，請給出你的方案。思考：在平面設(shè)計(jì)領(lǐng)域，如何踐行愛崗敬業(yè)、誠實(shí)守信、奉獻(xiàn)社會(huì)的職業(yè)道德觀，成為一名優(yōu)秀設(shè)計(jì)師、一個(gè)新時(shí)代好青年？演示完畢謝謝觀看Thankyou模塊2

UI圖標(biāo)設(shè)計(jì)01圖標(biāo)設(shè)計(jì)基礎(chǔ)知識02線性圖標(biāo)03剪影類圖標(biāo)04扁平化與長陰影類圖標(biāo)05擬物化圖標(biāo)知識與技能目標(biāo)學(xué)習(xí)圖標(biāo)的設(shè)計(jì)方法，能夠獨(dú)立完成圖標(biāo)的設(shè)計(jì)和制作。熟悉線性圖標(biāo)、剪影類圖標(biāo)、扁平化與長陰影類圖標(biāo)、擬物化圖標(biāo)的設(shè)計(jì)風(fēng)格特點(diǎn)，能夠設(shè)計(jì)不同風(fēng)格的圖標(biāo)。學(xué)習(xí)移動(dòng)設(shè)備中圖標(biāo)的參數(shù)規(guī)范，能夠獨(dú)立制作符合規(guī)范的圖標(biāo)。品德與素養(yǎng)目標(biāo)樹立傳承中華優(yōu)秀傳統(tǒng)文化的意識。培養(yǎng)精益求精的工匠精神。01圖標(biāo)設(shè)計(jì)基礎(chǔ)知識2.1.1APP圖標(biāo)的特點(diǎn)1243圖形獨(dú)特App圖標(biāo)需要將事物的共性體現(xiàn)出來，并保持自己獨(dú)特的個(gè)性，讓用戶在快速、輕松找到的同時(shí)還能快速記住圖標(biāo)特點(diǎn)。圖2-1常用相機(jī)App的圖標(biāo)2.1.1APP圖標(biāo)的特點(diǎn)1243表意準(zhǔn)確圖標(biāo)設(shè)計(jì)需要表達(dá)一定的含義，如代表產(chǎn)品、品牌、用途等，表意要準(zhǔn)確。圖2-2常用視頻工具App的圖標(biāo)2.1.1APP圖標(biāo)的特點(diǎn)1243用色謹(jǐn)慎要在暗色和亮色的背景中測試圖標(biāo)的效果，并且確保圖標(biāo)在應(yīng)用市場的背景中能夠脫穎而出，如圖2-3所示。圖2-3App圖標(biāo)色彩運(yùn)用2.1.1APP圖標(biāo)的特點(diǎn)1243語言簡潔在文字使用上，也不要使用大量的文字，因?yàn)锳PP圖標(biāo)可能會(huì)在縮小情況下使用，而在縮小情況下文字會(huì)變得難以閱讀，如圖2-4所示。圖2-4App語言簡潔圖標(biāo)設(shè)計(jì)2.1.2APP圖標(biāo)設(shè)計(jì)流程2.尋找隱喻3.抽象圖形4.繪制草圖7.場景測試6.制作和調(diào)整5.確定風(fēng)格1.定義主題2.1.2APP圖標(biāo)設(shè)計(jì)流程1.定義主題定義主題是指把要設(shè)計(jì)的圖標(biāo)所涉及的關(guān)鍵詞羅列出來，重點(diǎn)詞匯突出顯示，確定這些詞是圍繞一個(gè)確定的主題展開設(shè)計(jì)的，對圖標(biāo)的整體設(shè)計(jì)有把控。2.尋找隱喻隱喻是指真實(shí)世界與虛擬世界之間的映射關(guān)系，尋找隱喻是指通過關(guān)鍵詞進(jìn)行頭腦風(fēng)暴，看看可以聯(lián)想到哪些實(shí)物。圖2-5關(guān)鍵詞聯(lián)想2.1.2APP圖標(biāo)設(shè)計(jì)流程3.抽象圖形抽象圖形要求設(shè)計(jì)師將生活中的原素材進(jìn)行歸納，提取素材的顯著特點(diǎn)，明確設(shè)計(jì)目的，這是創(chuàng)作圖標(biāo)的基礎(chǔ)。設(shè)計(jì)過程中圖形的抽象必須受到控制，圖形太復(fù)雜或太簡單，識別度都會(huì)降低。圖2-6所示的抽象圖形是一款真人語音社交鬧鐘應(yīng)用。這個(gè)應(yīng)用主打兩個(gè)功能點(diǎn)，分別是鬧鐘和真人語音，通過這兩個(gè)功能點(diǎn)，設(shè)計(jì)師直接抽象了鬧鐘圖形和語言圖形，組合成新的圖形，這個(gè)圖形具有獨(dú)特性。圖2-6抽象圖形2.1.2APP圖標(biāo)設(shè)計(jì)流程4.繪制草圖經(jīng)過對實(shí)物的抽象化汲取后，設(shè)計(jì)人員便可以進(jìn)行草圖的繪制。在這個(gè)過程中，設(shè)計(jì)師需要將實(shí)物轉(zhuǎn)化成視覺形象，即最初的草圖。草圖一般會(huì)有很多個(gè)方案，這時(shí)需要篩選出若干滿意的方案繼續(xù)下面的流程，如圖2-7所示。圖2-7圖標(biāo)草圖2.1.2APP圖標(biāo)設(shè)計(jì)流程5.確定風(fēng)格一般可以根據(jù)圖標(biāo)的類型選擇合適的顏色。當(dāng)不知道使用什么顏色時(shí)，藍(lán)色是最穩(wěn)妥的選擇。目前，圖標(biāo)設(shè)計(jì)主流是扁平化風(fēng)格，如圖2-8所示。在UI設(shè)計(jì)中，大部分扁平化圖標(biāo)以單色圖形為主，從技法上來說，這樣降低了設(shè)計(jì)的難度。圖2-8扁平化圖標(biāo)2.1.2APP圖標(biāo)設(shè)計(jì)流程6.制作和調(diào)整根據(jù)既定的風(fēng)格，使用軟件制作圖標(biāo)。單獨(dú)的圖形設(shè)計(jì)需要更多的設(shè)計(jì)考量，需要經(jīng)過大量的推敲、設(shè)計(jì)和調(diào)整，因此在圖標(biāo)的制作過程中，設(shè)計(jì)師會(huì)修正草圖中的一些不足，也可能增加一些新的設(shè)計(jì)靈感。7.場景測試圖標(biāo)的應(yīng)用環(huán)境有很多種，有的在應(yīng)用市場上使用，有的在手機(jī)上使用。手機(jī)的背景色也各不相同，有深色系的，也有淺色系的。一個(gè)圖標(biāo)設(shè)計(jì)完成后，由于手機(jī)會(huì)使用多個(gè)分辨率，因此，這還需要相應(yīng)的系統(tǒng)規(guī)范適配多個(gè)分辨率的圖標(biāo)。2.1.3APP圖標(biāo)的設(shè)計(jì)方法1.關(guān)鍵節(jié)點(diǎn)繪制（1）提煉精華，勾勒輪廓。設(shè)計(jì)師通常在繪制已有參照物的基礎(chǔ)上設(shè)計(jì)一個(gè)圖標(biāo)，他可以根據(jù)喜歡的造型參照物去進(jìn)行分析，先抓取到參照物的關(guān)鍵節(jié)點(diǎn)，然后繪制出一個(gè)相似的基本圖形。（2）調(diào)整線鋒優(yōu)雅得體。基礎(chǔ)雛形出來后就開始加入自己的想法來調(diào)整線鋒，線條走向決定造型，如圖2-9所示。2.1.3APP圖標(biāo)設(shè)計(jì)方法圖2-9線條造型2.1.3APP圖標(biāo)設(shè)計(jì)方法2.精致的基礎(chǔ)要素（5）視差平衡（1）輪廓設(shè)計(jì)（3）像素設(shè)計(jì)（2）斜線設(shè)計(jì)（4）比例協(xié)調(diào)2.1.3APP圖標(biāo)設(shè)計(jì)方法（1）輪廓設(shè)計(jì)圖標(biāo)一定要用矢量繪制，需要在100%畫布上繪制圖形，而不能直接將圖標(biāo)放大或縮小，即使要改變大小也需放大畫布調(diào)整路徑的錨點(diǎn)，反復(fù)查看及校正是否對齊1像素網(wǎng)格。而圓形的繪制需要保證十字架的4個(gè)邊緣點(diǎn)對準(zhǔn)，如圖2-10所示。圖2-10輪廓設(shè)計(jì)2.1.3APP圖標(biāo)設(shè)計(jì)方法（2）斜線設(shè)計(jì)斜線的繪制需要注意多角度，可以進(jìn)行圖形傾斜效果對比，找出最清晰的角度，將圖層進(jìn)行雙層疊加即可，如圖2-11所示。圖2-11斜線設(shè)計(jì)2.1.3APP圖標(biāo)設(shè)計(jì)方法（3）像素設(shè)計(jì)像素設(shè)計(jì)需要精確地設(shè)計(jì)像素點(diǎn)的位置與色彩，例如，箭頭在小尺寸情況下進(jìn)行點(diǎn)陣矢量像素繪制，如果是大尺寸，可以直接使用鋼筆工具進(jìn)行繪制，如圖2-12所示。圖2-12像素設(shè)計(jì)2.1.3APP圖標(biāo)設(shè)計(jì)方法（4）比例協(xié)調(diào)圖形內(nèi)部結(jié)構(gòu)要注意元素構(gòu)成之間的比例，有黃金比例分割，也有感性的平衡方法。嚴(yán)謹(jǐn)?shù)膱D標(biāo)比例可參照蘋果iOS圖標(biāo)規(guī)范，進(jìn)行圖形繪制和比例分配，如圖2-13所示。圖2-13比例協(xié)調(diào)2.1.3APP圖標(biāo)設(shè)計(jì)方法（5）視差平衡同一個(gè)尺寸規(guī)格，不同形狀的圖標(biāo)會(huì)導(dǎo)致面積占比引起的視差大小不同，要在參考尺寸范圍內(nèi)進(jìn)行繪制調(diào)整，如圖2-14所示。圖2-14視差平衡2.1.4iOS圖標(biāo)規(guī)范1.界面布局尺寸規(guī)范（1）界面尺寸大小是：750像素×1334像素。（2）狀態(tài)欄：電量條，其高度為40像素。（3）導(dǎo)航欄：頂部條，其高度為88像素。（4）主菜單欄：標(biāo)簽欄，底部條，其高度為98像素。（5）內(nèi)容區(qū)域：屏幕中間的區(qū)域，其高度為1108像素。2.1.4iOS圖標(biāo)規(guī)范2.圖標(biāo)尺寸以iPhone6界面尺寸大小750×1334像素為例，圖標(biāo)尺寸被規(guī)定為以下參數(shù)。（1）導(dǎo)航欄和工具欄圖標(biāo)尺寸大小為44像素×44像素。（2）標(biāo)簽欄尺寸大小為75像素×75像素。（3）桌面圖標(biāo)（appicon）大小為120像素×120像素（@2x）。（4）系統(tǒng)搜索框圖標(biāo)（spotlightsearchresultsicon）大小為80像素×80像素（@2x）。（5）系統(tǒng)設(shè)置圖標(biāo)（settingsicon）大小為58像素×58像素（@2x）、87像素×87像素（@3x）。提示：

iOS所有圖標(biāo)的圓角效果由系統(tǒng)生成，給到的圖標(biāo)本身不能是圓角的。（1）導(dǎo)航欄的文字大小為34～36像素，標(biāo)簽欄圖標(biāo)下方的文字大小為20像素。（2）內(nèi)容區(qū)域的文字大小為20像素、24像素、26像素、28像素、30像素、32像素和34像素。（3）常用的顏色為背景淺灰色#F2F2F2，文字深黑色#323232和邊框色深灰#CCCCCC。（4）常用可點(diǎn)擊區(qū)域的高度為88像素。（5）單行文字的背景框的高度為88像素，雙行則為176像素，三行則為264像素。（6）常用間距為親密距離20像素，疏遠(yuǎn)距離30像素，其他距離10像素、44像素等。3.其他元素2.1.4iOS圖標(biāo)規(guī)范2.1.5Android圖標(biāo)規(guī)范1.程序啟動(dòng)圖標(biāo)（1）小屏LDPI（lowdensityscreen，120DPI），其圖標(biāo)大小為36像素×36像素。（2）中屏MDPI（mediumdensityscreen，160DPI），其圖標(biāo)大小為48像素×48像素。（3）大屏HDPI（highdensityscreen，240DPI），其圖標(biāo)大小為72像素×72像素。（4）特大屏XHDPI（extra-highdensityscreen，320DPI），其圖標(biāo)大小為96像素×96像素。（5）超大屏XXHDPI（XX-highdensityscreen，480DPI），其圖標(biāo)大小為144像素×144像素。2.1.5Android圖標(biāo)規(guī)范2.底部菜單圖標(biāo)底部菜單圖標(biāo)與啟動(dòng)圖標(biāo)規(guī)格相同，從小屏到大屏，圖標(biāo)大小分別為36像素×36像素、48像素×48像素、72像素×72像素、96像素×96像素等。（1）大屏HDPI。圖標(biāo)形狀所占大小為44×44像素，如圖2-15最內(nèi)層粉色線框所示區(qū)域。圖標(biāo)圖形區(qū)域大小為48×48像素，在真實(shí)圖標(biāo)形狀向外擴(kuò)展4像素，如圖2-15藍(lán)色線框所示區(qū)域。完整圖片大小為72×72像素，其中從圖標(biāo)區(qū)域向外擴(kuò)展28像素，以便于用戶觸摸操作，如圖2-15最外層紅色線框所示區(qū)域。2.1.5Android圖標(biāo)規(guī)范圖2-15底部菜單圖標(biāo)大小定義2.1.5Android圖標(biāo)規(guī)范（2）中屏MDPI圖標(biāo)形狀所占大小為30×30像素。圖標(biāo)圖形區(qū)域大小為32×32像素。完整圖片大小為48×48像素，其中從圖標(biāo)區(qū)域向外擴(kuò)展18像素，用于響應(yīng)用戶觸摸操作。圖標(biāo)形狀所占大小為22×22像素。圖標(biāo)圖形區(qū)域大小為24×24像素。完整圖片大小為36×36像素，其中從圖標(biāo)區(qū)域向外擴(kuò)展14像素，用于響應(yīng)用戶觸摸操作。（3）小屏LDPI2.1.5Android圖標(biāo)規(guī)范3.彈出對話框頂部、列表內(nèi)部圖標(biāo)（1）小屏LDPI：24

×24像素。（2）中屏MDPI（160dpi）：32

×32像素。（3）大屏HDPI（240dpi）：48

×48像素。（4）特大屏XHDPI（320dpi）：72

×72像素。（5）超大屏XXHDPI（480dpi）：89

×89像素。2.1.5Android圖標(biāo)規(guī)范4.底部或頂部tab標(biāo)簽圖標(biāo)提示：作為可觸碰UI原件的標(biāo)準(zhǔn)，需要滿足用戶手指能夠準(zhǔn)確、舒適地觸碰的最小尺寸。作為可觸碰UI原件的標(biāo)準(zhǔn)，需要滿足用戶手指能夠準(zhǔn)確、舒適地觸碰的最小尺寸。在大屏顯示時(shí)圖標(biāo)不可以更大，但手指觸碰區(qū)域可以更大，如圖2-16所示。

圖2-16tab標(biāo)簽圖標(biāo)大小定義2.1.5Android圖標(biāo)規(guī)范（1）小屏完整圖片為24×24像素，圖標(biāo)大小為22×22像素。（2）中屏完整圖片為32×32像素，圖標(biāo)大小為28×28像素。（3）大屏完整圖片為48×48像素，圖標(biāo)大小為42×42像素。（4）特大屏完整圖片為72×72像素，圖標(biāo)大小為42×42像素。（5）超大屏完整圖片為96×96像素，圖標(biāo)大小為42×42像素。02線性圖標(biāo)2.2.1認(rèn)識線性圖標(biāo)線性圖標(biāo)是由一條等粗細(xì)度線條構(gòu)成的圖形，相比面形圖標(biāo)有細(xì)節(jié)的表現(xiàn)空間，控制線條的粗細(xì)和構(gòu)型能夠有多種視覺表現(xiàn)；通常應(yīng)用在小的功能入口，起到指代功能的作用。1.線性圖標(biāo)的概念2.2.1認(rèn)識線性圖標(biāo)線條粗度須整套一致、構(gòu)型飽滿，大小上要視覺統(tǒng)一、視角一致；一般都是正視圖的圖標(biāo)，中間不要插入俯視圖或類似側(cè)軸的角度，要保持圓角統(tǒng)一。2.線性圖標(biāo)的設(shè)計(jì)要點(diǎn)2.2.1認(rèn)識線性圖標(biāo)其中，設(shè)計(jì)要求線段按照一定的規(guī)律排列，形成線條感的標(biāo)志，一般是抽象的幾何圖形。線的描述要以線的形式勾勒圖形，一般是具象圖標(biāo)，這種標(biāo)志既能交代結(jié)構(gòu)走向，又方便處理很多細(xì)節(jié)，使標(biāo)志更精致，有層次感和藝術(shù)性，如圖2-17所示。圖2-17線性圖標(biāo)樣例2.2.1認(rèn)識線性圖標(biāo)CABD（2）線的端點(diǎn)。線的端點(diǎn)也會(huì)反映線條的氣質(zhì)，從而映射在整體圖形上。不同的端點(diǎn)會(huì)有不同的效果，特別是線段重復(fù)時(shí)，端點(diǎn)的特點(diǎn)會(huì)被放大，強(qiáng)烈影響人們的視覺。（1）線的粗細(xì)。粗細(xì)是反映線條氣質(zhì)的一個(gè)重要因素，不同的粗細(xì)會(huì)直接影響圖形氣質(zhì)，細(xì)的線條體現(xiàn)簡約、高端、高雅、文藝等氣質(zhì)，粗的線條體現(xiàn)穩(wěn)重、陽剛、傳統(tǒng)、誠信等氣質(zhì)。3.線條的氣質(zhì)表現(xiàn)2.2.2線性圖標(biāo)的制作方法1.分解形狀對于初學(xué)者來說，可以這樣理解：任何東西都可以用圖2-18所示的四種基本圖形組合而成。提示：繪制線性圖標(biāo)需要領(lǐng)會(huì)UI設(shè)計(jì)師必備的化繁為簡，抽絲剝繭的能力。圖2-18四種基本圖形2.2.2線性圖標(biāo)的制作方法當(dāng)想要用圖標(biāo)來表現(xiàn)一個(gè)物體時(shí)，我們會(huì)先仔細(xì)觀察，然后盡可能地將其拆分為最簡單的形狀。例如，水滴可以用一個(gè)三角形和一個(gè)圓圈組成，如圖2-19所示。圖2-19分解水滴形狀2.2.2線性圖標(biāo)的制作方法心形圖標(biāo)可以使用Photoshop中的形狀工具來繪制，但是如果不喜歡那個(gè)形狀，也可以把心形分解為兩個(gè)圓和一個(gè)三角形，如圖2-20所示。圖2-20分解心形形狀2.2.2線性圖標(biāo)的制作方法復(fù)雜的形狀也可以進(jìn)行圖形分解，最后使用形狀工具對其屬性進(jìn)行設(shè)置，如圖形尺寸、填充顏色、描邊顏色、描邊寬度、描邊樣式，以及實(shí)線、虛線、對齊方式、線段端點(diǎn)、合并類型、圓角半徑等。這樣的設(shè)計(jì)需要靈活運(yùn)用布爾運(yùn)算工具，通過各種圖形的相加減組合成最終圖形，如圖2-21所示。圖2-21分解復(fù)雜形狀2.2.2線性圖標(biāo)的制作方法2.繪制形狀一些圖形的形態(tài)奇異，如果蔬APP中的茄子圖標(biāo)，不可以直接通過基本圖形得到，這時(shí)可以利用鋼筆工具畫出這種圖形。（1）選擇鋼筆工具，繪制一個(gè)弧形路徑，按住Alt鍵點(diǎn)選這個(gè)路徑的端點(diǎn)，如圖2-22所示。圖2-22用鋼筆工具繪制路徑2.2.2線性圖標(biāo)的制作方法（2）單擊該路徑，再繪制下一段路徑，最后單擊該路徑的端點(diǎn)，如圖2-23所示。繪制一個(gè)切割圖形的路徑，并用布爾運(yùn)算工具切除，如圖2-24所示。圖2-24切割路徑圖2-23封閉路徑2.2.2線性圖標(biāo)的制作方法（3）用鋼筆工具繪制茄蒂，得到完整的茄子矢量圖，如圖2-25所示。圖2-25茄子矢量圖2.2.3制作線性圖標(biāo)1.Wi-Fi圖標(biāo)設(shè)計(jì)（1）打開Photoshop軟件，創(chuàng)建一個(gè)畫布，選擇“橢圓工具”，按住Shift鍵的同時(shí)拖動(dòng)鼠標(biāo)繪制一個(gè)正圓。設(shè)置圓的填充為無，描邊為黑色，大小為20點(diǎn)，如圖2-26所示。圖2-26繪制正圓并描邊2.2.3制作線性圖標(biāo)（2）按Ctrl+J快捷鍵復(fù)制圖層，使用Ctrl+T自由變化命令，設(shè)計(jì)圖形；重復(fù)操作并將最后一個(gè)橢圓圖層的填充設(shè)為黑色，如圖2-27所示。圖2-27制作描邊同心圓2.2.3制作線性圖標(biāo)（3）使用“直接選擇工具”，選中圓形的左邊錨點(diǎn)和底部錨點(diǎn)，按Delete鍵刪除；選擇其他圓，繼續(xù)刪除錨點(diǎn)，得到如圖2-28所示的最終效果。圖2-28刪除錨點(diǎn)2.2.3制作線性圖標(biāo)（4）先用“路徑選擇工具”選中1/4圓輪廓，再修改其線段的端點(diǎn)樣式為半圓形，如圖2-29所示。圖2-29設(shè)置端點(diǎn)為半圓形2.2.3制作線性圖標(biāo)（5）按住Ctrl+T快捷鍵自由變換命令，進(jìn)行旋轉(zhuǎn)；改變描邊與填充顏色，最終效果如圖2-30所示。圖2-30Wi-Fi圖標(biāo)2.2.3制作線性圖標(biāo)2.垃圾桶圖標(biāo)設(shè)計(jì)（1）選擇“圓角矩形工具”，設(shè)置圓角半徑、描邊顏色等；拖動(dòng)鼠標(biāo)，畫出圓角矩形形狀。根據(jù)所需調(diào)整線條粗細(xì)，本例設(shè)置描邊大小為20像素，如圖2-31所示。2.2.3制作線性圖標(biāo)（2）畫出另一個(gè)圓角矩形作為垃圾桶蓋子；再繪制一個(gè)圓角矩形作為蓋子的把手，擦去把手底部的半個(gè)圓角矩形，如圖2-32所示。2.2.3制作線性圖標(biāo)（3）使用“鋼筆工具”或“直線工具”，在桶身上繪制三條豎直線。修改線條端點(diǎn)樣式為半圓形。更改線條的描邊顏色和粗細(xì)，得到更多的圖標(biāo)效果，如圖2-33所示。03剪影類圖標(biāo)2.3.1認(rèn)識剪影類圖標(biāo)常見的剪影類圖標(biāo)為單色圖標(biāo)，如圖2-34所示。剪影類圖標(biāo)的特點(diǎn)是抽象簡潔、高度提煉，對于表象意境的考究要高于具象和細(xì)節(jié)，突出設(shè)計(jì)的理性與感性在功能傳達(dá)上的邏輯思維。提示：剪影類圖標(biāo)簡潔、易識別的造型經(jīng)常被大批量成套地運(yùn)用在系統(tǒng)功能菜單里，所以外觀的統(tǒng)一性和識別性非常重要。2.3.1認(rèn)識剪影類圖標(biāo)現(xiàn)在網(wǎng)絡(luò)資源非常豐富，有大量的剪影矢量圖標(biāo)素材可供下載，而新手UI設(shè)計(jì)師最容易犯的錯(cuò)誤就是東拼西湊，導(dǎo)致整套圖標(biāo)風(fēng)格不統(tǒng)一，如圖2-35所示。2.3.1認(rèn)識剪影類圖標(biāo)剪影圖標(biāo)分為正形剪影圖標(biāo)和負(fù)形剪影圖標(biāo)。正形圖標(biāo)是以面繪制的圖形，或以面和線綜合表現(xiàn)的圖形。正形剪影圖標(biāo)由于面積占比大，因此視覺吸引力更強(qiáng)，如圖2-36所示。2.3.1認(rèn)識剪影類圖標(biāo)剪影圖標(biāo)分為正形剪影圖標(biāo)和負(fù)形剪影圖標(biāo)。正形圖標(biāo)是以面繪制的圖形，或以面和線綜合表現(xiàn)的圖形。正形剪影圖標(biāo)由于面積占比大，因此視覺吸引力更強(qiáng)，如圖2-36所示。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)1.倒角和圓角一致一套圖標(biāo)中所涉及的各種倒角和圓角必須相同，外部輪廓及內(nèi)部輪廓的角度也要一致，如圖2-38所示。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)2.線的寬度一致構(gòu)成圖案的線條無論有多少，其寬度都要保持一致，體現(xiàn)和諧統(tǒng)一之美。這一點(diǎn)在圖案較為復(fù)雜時(shí)，比較難處理，需要設(shè)計(jì)師精簡圖案，如圖2-39所示。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)3.體積感一致由于構(gòu)成圖形的線、面數(shù)量不同，有些圖案比較復(fù)雜，而有些圖案比較簡潔，造成圖形的體積感不同。在設(shè)計(jì)時(shí)，雖然圖形的尺寸大小相同，但視覺感觀上會(huì)有一定的誤差，這時(shí)就需要設(shè)計(jì)師做一些縮放處理，使其消除視覺誤差，如圖2-40所示。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)4.外輪廓造型一致很多圖標(biāo)都用到了圓形輪廓線、方形或圓角矩形輪廓線，如圖2-41所示。輪廓線在應(yīng)用時(shí)要考慮內(nèi)部的線條粗細(xì)，如果內(nèi)容形狀線條比較纖細(xì)，一般輪廓線也相對較細(xì)；如果內(nèi)部輪廓線比較粗壯，那么輪廓線也應(yīng)較粗壯一些。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)5.傾斜角度一致圖標(biāo)設(shè)計(jì)不是水平和垂直時(shí)，需要有一定的角度，此時(shí)整套圖標(biāo)需要有比較一致的傾斜角度。在制作時(shí)需要繪制參考線進(jìn)行輔助設(shè)計(jì)，做到協(xié)調(diào)一致，如圖2-42所示。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)6.透視角度一致在設(shè)計(jì)過程中不可避免地要使用透視角度時(shí)，應(yīng)保持整套圖標(biāo)的設(shè)計(jì)風(fēng)格統(tǒng)一，避免存在不同透視角度的圖標(biāo)，給用戶造成錯(cuò)亂的視覺感受。所以一般情況下，圖標(biāo)設(shè)計(jì)師都會(huì)選擇正視圖的角度，這個(gè)角度的圖標(biāo)圖形會(huì)相對簡潔易懂，如圖2-43所示。提示：圖標(biāo)設(shè)計(jì)的透視角度經(jīng)常被設(shè)計(jì)師忽略，透視關(guān)系比較難處理。2.3.2剪影類圖標(biāo)繪制標(biāo)準(zhǔn)7.具有較強(qiáng)功能識別性圖標(biāo)在界面設(shè)計(jì)中起著非常重要的信息傳達(dá)和提升美感的作用，其可以代替文字來快速傳遞信息，用戶可以省去閱讀文字的時(shí)間直接識別圖形，從而可以快速做出反應(yīng)，如圖2-44所示。2.3.3制作剪影類圖標(biāo)1.制作微信圖標(biāo)（1）打開Photoshop軟件，新建一個(gè)大小為800×600像素的畫布，用“圓角矩形工具”繪制一個(gè)圓角半徑為80像素，填充為綠色RGB（60，176，53）的圓角矩形，如圖2-45所示。2.3.3制作剪影類圖標(biāo)（2）用“橢圓工具”繪制一個(gè)白色橢圓，用“鋼筆工具”繪制一個(gè)三角形形狀，與橢圓進(jìn)行合并，如圖2-46所示。2.3.3制作剪影類圖標(biāo)（3）利用“橢圓工具”繪制兩個(gè)圓作為眼睛；把兩個(gè)眼睛圖層“合并形狀”，按住Ctrl鍵并單擊眼睛圖層縮略圖獲得選區(qū)，然后按Delete鍵刪除眼睛圖層，如圖2-47所示。2.3.3制作剪影類圖標(biāo)（4）復(fù)制一層，用自由變換命令進(jìn)行水平翻轉(zhuǎn)，拖曳到合適的位置；按住Ctrl鍵并單擊復(fù)制圖層的縮略圖，然后右擊并選擇變換選區(qū)，如圖2-48所示。圖2-48水平翻轉(zhuǎn)并變換選區(qū)2.3.3制作剪影類圖標(biāo)（5）按住Shift+Alt快捷鍵，用鼠標(biāo)拖動(dòng)放大選區(qū)，選擇“橢圓1”圖層，按Delete鍵清除，如圖2-49所示，完成微信圖標(biāo)的制作。2.3.3制作剪影類圖標(biāo)2.制作抖音APP圖標(biāo)（1）制作一個(gè)大小為800×600像素的畫布，選擇“橢圓工具”，按住Shift鍵拖動(dòng)鼠標(biāo)繪制一個(gè)正圓形，使用“形狀選擇工具”（小黑箭頭）選中這個(gè)圓形，如圖2-50所示。圖2-50繪制正圓形2.3.3制作剪影類圖標(biāo)（2）選中圓形，按Ctrl+C快捷鍵和Ctrl+V快捷鍵進(jìn)行復(fù)制和粘貼，在同一圖層同一位置復(fù)制了一個(gè)相同的圓形，按Ctrl+T快捷鍵對上面的圓形進(jìn)行縮小操作，縮小時(shí)按住Shift鍵（同比例放大縮?。┖虯lt鍵（由形狀中心點(diǎn)放大縮?。?，使用“形狀選擇工具”選中上面的圓形，執(zhí)行路徑操作，減去頂層形狀，可以得到一個(gè)圓環(huán)，如圖2-51所示。使用“形狀選擇工具”選中兩個(gè)形狀，進(jìn)行合并形狀組件操作。圖2-51制作圓環(huán)2.3.3制作剪影類圖標(biāo)（3）為環(huán)形加矩形，用“形狀選擇工具”選中環(huán)形，選擇“矩形工具”，按Shift鍵（在原有圖形基礎(chǔ)上增加新的圖形），這時(shí)需要注意矩形的寬度需要與環(huán)形的寬度保持一致，如圖2-52所示。圖2-52繪制矩形2.3.3制作剪影類圖標(biāo)（4）對環(huán)形進(jìn)行裁剪，用“形狀選擇工具”選中形狀，選擇“矩形工具”，按Alt鍵（在原有基礎(chǔ)上減去新的圖形），如圖2-53所示。圖2-53裁剪環(huán)形2.3.3制作剪影類圖標(biāo)（5）在尾部添加環(huán)形，環(huán)形的制作方法與第一個(gè)環(huán)形的制作方法相同，大小也相同，如圖2-54所示。圖2-54添加環(huán)形2.3.3制作剪影類圖標(biāo)（6）對尾部環(huán)形進(jìn)行裁剪，使用“形狀選擇工具”選擇形狀，選擇“矩形工具”，按Alt鍵（在原有形狀基礎(chǔ)上減去新的形狀），此時(shí)需要兩個(gè)矩形，裁掉的范圍是尾部環(huán)形的四分之三。使用“形狀選擇工具”選中兩個(gè)形狀，進(jìn)行合并形狀組件操作，如圖2-55所示。圖2-55裁剪尾部環(huán)形2.3.3制作剪影類圖標(biāo)（7）將原圖層復(fù)制一層并將復(fù)制的圖層命名為“01”，雙擊原圖層縮略圖，將形狀的顏色改為紅色，將圖層“01”的顏色改為藍(lán)色，如圖2-56所示。圖2-56填充形狀顏色2.3.3制作剪影類圖標(biāo)（8）移動(dòng)藍(lán)色圖層，使其與紅色圖層重合，使用圖層混合工具在藍(lán)色圖層上添加實(shí)色混合效果，注意藍(lán)色圖層應(yīng)該在紅色圖層的上方，調(diào)整兩個(gè)形狀的位置，完成抖音圖標(biāo)的制作，如圖2-57所示。圖2-57抖音圖標(biāo)制作完成04扁平化與長陰影類圖標(biāo)2.4.1認(rèn)識扁平化與長陰影設(shè)計(jì)扁平化設(shè)計(jì)的概念扁平化設(shè)計(jì)（flatdesign）從其字面含義上理解是指設(shè)計(jì)的整體效果趨向于扁平、無立體感。扁平化設(shè)計(jì)的核心是在設(shè)計(jì)中摒棄高光、陰影、紋理、漸變等裝飾性效果，通過符號化或簡化的圖形設(shè)計(jì)元素來表現(xiàn)。2.4.1認(rèn)知扁平化與長陰影圖2-58所示為扁平化圖標(biāo)。2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)長陰影（longshadow）設(shè)計(jì)概念來自于非常流行的扁平化設(shè)計(jì)。扁平化設(shè)計(jì)趨勢影響最大的是用戶的界面元素和圖標(biāo)。長陰影其實(shí)就是擴(kuò)展了對象的投影，感覺是一種光線照射下的影子，通常采用角度為45°的投影，給對象添加了一分立體感?？缭酵卣归L陰影設(shè)計(jì)的概念創(chuàng)新引領(lǐng)2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)提示：目前，長陰影設(shè)計(jì)主要用于較小的對象和元素。如圖2-59所示，這些陰影的特別之處在于它們也是扁平的，設(shè)計(jì)師沒有使用漸變的顏色來生成陰影。目前，長陰影設(shè)計(jì)主要用于較小的對象和元素。2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)3.扁平化設(shè)計(jì)的特點(diǎn)扁平化與擬物化是兩種完全不同的設(shè)計(jì)風(fēng)格，扁平化設(shè)計(jì)風(fēng)格的圖標(biāo)的特點(diǎn)十分鮮明，主要表現(xiàn)在以下幾個(gè)方面。（1）簡約時(shí)尚。扁平化設(shè)計(jì)中常常使用一些流行的色彩搭配和圖形元素，使用戶有一種煥然一新的感覺，扁平化圖標(biāo)可以更好地表現(xiàn)出時(shí)尚和簡約的美感。圖2-60所示為簡約時(shí)尚的扁平化圖標(biāo)設(shè)計(jì)。2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)

（2）突出圖標(biāo)主題。扁平化圖標(biāo)設(shè)計(jì)中很少使用漸變、高光和陰影等效果，大多使用細(xì)微的效果，這樣可以避免各種視覺效果對用戶視線的干擾，使用戶專注于設(shè)計(jì)內(nèi)容本身，突出圖標(biāo)主題，也使得設(shè)計(jì)內(nèi)容更加簡單、易用。圖2-61所示為突出主題的扁平化圖標(biāo)設(shè)計(jì)。2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)（3）設(shè)計(jì)更容易。優(yōu)秀的扁平化圖標(biāo)設(shè)計(jì)具有良好的架構(gòu)、排版布局、色彩運(yùn)用和高度一致性，從而保證其易用性和可識別性。圖2-62所示為設(shè)計(jì)精美的扁平化圖標(biāo)。2.4.1認(rèn)知扁平化與長陰影設(shè)計(jì)雖然扁平化圖標(biāo)設(shè)計(jì)具有許多優(yōu)點(diǎn)，但是其缺點(diǎn)同樣非常明顯，因?yàn)楸馄交O(shè)計(jì)主要是使用純色和簡單的圖形符號來構(gòu)成設(shè)計(jì)，所以其表達(dá)感情不如擬物化設(shè)計(jì)豐富，甚至過于冰冷。提示：特別是在游戲界面設(shè)計(jì)中，游戲界面需要給玩家營造一種真實(shí)感和帶入感，使玩家能夠身臨其境，而扁平化設(shè)計(jì)就無法達(dá)到這樣的效果。2.4.2扁平化風(fēng)格設(shè)計(jì)分析321654折紙風(fēng)扁平化圖標(biāo)長投影扁平化圖標(biāo)加厚度扁平化圖標(biāo)輕質(zhì)感扁平化圖標(biāo)輕折疊扁平化圖標(biāo)純平面扁平化圖標(biāo)2.4.2扁平化風(fēng)格設(shè)計(jì)分析純平面扁平化圖標(biāo)的特點(diǎn)是純色和剪影。其優(yōu)點(diǎn)是簡潔、清新、視覺識別度良好，設(shè)計(jì)時(shí)注意用色，如圖2-63所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析輕折疊扁平化圖標(biāo)的特點(diǎn)是純色、折痕和輕投影。其優(yōu)勢在于比純平面豐富，有輕微視覺空間感；色彩明朗，輕投影營造出輕盈的感覺；視覺統(tǒng)一性好，如圖2-64所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析輕折疊扁平化圖標(biāo)的特點(diǎn)是純色、折痕和輕投影。其優(yōu)勢在于比純平面豐富，有輕微視覺空間感；色彩明朗，輕投影營造出輕盈的感覺；視覺統(tǒng)一性好，如圖2-64所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析輕質(zhì)感扁平化圖標(biāo)的特點(diǎn)是輕漸變、簡化層次和輕投影。這種設(shè)計(jì)干凈、簡潔、明朗，有一定的精致感，也有簡單的層次，內(nèi)容相對豐富，如圖2-65所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析折紙風(fēng)扁平化圖標(biāo)的特點(diǎn)是折疊、投影和結(jié)構(gòu)。這種設(shè)計(jì)易于創(chuàng)造空間立體感，幾何感明顯，復(fù)雜和簡潔結(jié)合，挑戰(zhàn)了扁平化的立體性，如圖2-66所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析長投影扁平化圖標(biāo)的特點(diǎn)是投影和層次。這種設(shè)計(jì)表現(xiàn)色彩對比度大，有明顯而單純的投影，從而構(gòu)造鮮明的層次感和空間感，視覺沖擊力強(qiáng)烈，如圖2-67所示。2.4.2扁平化風(fēng)格設(shè)計(jì)分析加厚度扁平化圖標(biāo)的特點(diǎn)體現(xiàn)在厚度和細(xì)節(jié)上。這種圖標(biāo)有明顯的厚度，即有明顯的立體感、厚重感；有一定的細(xì)節(jié)，但相對復(fù)雜，統(tǒng)一性沒有以上幾種風(fēng)格好，如圖2-68所示。2.4.3制作扁平化與長陰影類圖標(biāo)扁平化設(shè)計(jì)成為業(yè)界的潮流，其早期形式想要做出與擬物化涇渭分明的極簡設(shè)計(jì)，但現(xiàn)在的扁平化設(shè)計(jì)逐漸加上了修飾與質(zhì)感。較熱門的四種扁平化表現(xiàn)手法為常規(guī)扁平化、長投影、投影式、漸變式四種風(fēng)格，如圖

2-69所示。2.4.3制作扁平化與長陰影類圖標(biāo)合作Cooperation創(chuàng)新Innovate共贏Win-win發(fā)展Development下面以圖2-69中的播放器按鈕為例，分別介紹四種風(fēng)格的制作過程。2.4.3制作扁平化與長陰影類圖標(biāo)1.常規(guī)扁平化（1）打開Photoshop軟件，執(zhí)行“文件”→“新建”命令，新建一個(gè)大小為500×400像素，分辨率為72像素的空白畫布。選擇“圓角矩形工具”，在選項(xiàng)欄中設(shè)置填充顏色為RGB（23，147，174），設(shè)置圓角半徑為40像素，選中“固定大小”單選按鈕，并設(shè)置寬和高均為256像素，繪制圓角矩形，如圖2-70所示。2.4.3制作扁平化與長陰影類圖標(biāo)（2）選擇“橢圓工具”，設(shè)置固定大小為186像素。按住Shift鍵繪制正圓形。選擇兩個(gè)圖層，選擇移動(dòng)工具后在選項(xiàng)欄中單擊“垂直居中對齊”按鈕和“水平居中對齊”按鈕，如圖2-71所示。2.4.3制作扁平化與長陰影類圖標(biāo)（3）選擇“橢圓工具”，設(shè)置固定大小為146像素，按住Shift鍵繪制內(nèi)圓。調(diào)整為同心圓，如圖2-72（a）所示，在選項(xiàng)面板中選擇“減去頂層形狀”選項(xiàng)，執(zhí)行操作后的圖形如圖2-72（b）所示。2.4.3制作扁平化與長陰影類圖標(biāo)（4）選擇“多邊形工具”，設(shè)置邊數(shù)為3，寬和高均為80像素的正三角形。放大顯示比例，使用鋼筆“添加錨點(diǎn)工具”為三個(gè)角添加錨點(diǎn)，如圖2-73所示。2.4.3制作扁平化與長陰影類圖標(biāo)（5）使用“直接選擇工具”選中三角形輪廓，使用“角轉(zhuǎn)換點(diǎn)工具”將邊上的點(diǎn)轉(zhuǎn)換為角點(diǎn)，將頂點(diǎn)轉(zhuǎn)換為平滑點(diǎn)，如圖2-74（a）所示。使用“直接選擇工具”將三角形頂點(diǎn)調(diào)整為圓角。隱藏參考線，常規(guī)扁平化圖標(biāo)最終效果如圖2-74（b）所示。2.4.3制作扁平化與長陰影類圖標(biāo)2.長投影（1）繼續(xù)扁平化圖標(biāo)的操作，使用“矩形工具”繪制一個(gè)矩形，填充為黑色，高度與三角形邊長相同。在“圖層”面板中調(diào)整矩形到橢圓的下方。按Ctrl+T快捷鍵，然后按住Shift鍵將矩形旋轉(zhuǎn)45°，如圖2-75所示。2.4.3制作扁平化與長陰影類圖標(biāo)（2）使用“直接選擇工具”和“角轉(zhuǎn)換點(diǎn)工具”，在矩形與三角形兩頂點(diǎn)交匯處添加錨點(diǎn)并轉(zhuǎn)換為角點(diǎn)，如圖2-76（a）所示。使用“直接選擇工具”將矩形上端兩頂點(diǎn)拖動(dòng)到三角形內(nèi)部，如圖2-76（b）所示。完成效果如圖2-76（c）所示。2.4.3制作扁平化與長陰影類圖標(biāo)（3）在“圖層”面板底部單擊“添加蒙版”按鈕，為長投影形狀添加圖層蒙版。選擇“背景”圖層，按住Ctrl鍵單擊該圖層的縮覽圖，將其載入選區(qū)。按Ctrl+Shift+I快捷鍵進(jìn)行反向選擇，填充黑色，如圖2-77所示。圖2-77反向選擇并填充黑色2.4.3制作扁平化與長陰影類圖標(biāo)（4）在“圖層”面板中調(diào)整圖層的不透明度為20%，第一個(gè)長投影就制作完成了。隱藏參考線得到的效果如圖2-78所示。圖2-78隱藏參考線的長投影形狀2.4.3制作扁平化與長陰影類圖標(biāo)（5）使用同樣的方法為圓環(huán)外圓制作長投影。繪制與外圓直徑同高的矩形并旋轉(zhuǎn)45°,調(diào)整矩形上部頂點(diǎn)，將其隱藏到外圓中，如圖2-79所示。2.4.3制作扁平化與長陰影類圖標(biāo)（6）為“矩形2”圖層添加蒙版，背景區(qū)域反向選區(qū)填充黑色，設(shè)置其圖層不透明度為20%，如圖2-80（a）所示。得到長投影扁平化圖標(biāo)如圖2-80（b）所示。2.4.3制作扁平化與長陰影類圖標(biāo)3.投影式（1）在常規(guī)扁平化的基礎(chǔ)上，選擇圓角矩形的圖層，單擊“圖層”面板底部的“添加圖層樣式”按鈕，在打開的菜單中選擇“投影”選項(xiàng)，在彈出的對話框中設(shè)置投影參數(shù)，如圖2-81所示。圖2-81為背景添加投影2.4.3制作扁平化與長陰影類圖標(biāo)（2）選擇該圖層，右擊并執(zhí)行“拷貝圖層樣式”命令。選擇圓和三角形所在的圖層，右擊并執(zhí)行“粘貼圖層樣式”命令，如圖2-82（a）所示，得到投影式扁平化圖標(biāo)，如圖2-82（b）所示。圖2-82投影式扁平化圖標(biāo)(a)(b)2.4.3制作扁平化與長陰影類圖標(biāo)4.漸變式（1）在常規(guī)扁平化的基礎(chǔ)上，復(fù)制“背景”層為“背景復(fù)本”，并設(shè)置“背景復(fù)本”層的填充為0%，如圖2-83（a）所示。選擇“鋼筆工具”，在圓的路徑左、右兩側(cè)添加兩個(gè)錨點(diǎn)，如圖2-83（b）所示。(a)(b)圖2-83設(shè)置填充參數(shù)和添加錨點(diǎn)

2.4.3制作扁平化與長陰影類圖標(biāo)（2）在工具箱中選擇“直接選擇工具”，框選下半部分4個(gè)錨點(diǎn)。按Delete鍵刪除選中的錨點(diǎn)，如圖2-84所示。2.4.3制作扁平化與長陰影類圖標(biāo)（3）為當(dāng)前的半個(gè)圓角矩形添加“漸變疊加”圖層樣式。漸變混合模式為“正片疊底”，不透明度為0%，漸變顏色為“黑白漸變”，完成效果如圖2-85所示。2.4.3制作扁平化與長陰影類圖標(biāo)（4）選中“背景復(fù)本”層的圓角矩形，同樣添加“漸變疊加”圖層樣式。清除參考線得到的最終效果如圖2-86所示。04擬物化圖標(biāo)2.5.1認(rèn)知擬物化圖標(biāo)設(shè)計(jì)師在設(shè)計(jì)過程中也可以適當(dāng)進(jìn)行變形和夸張，模擬真實(shí)物體。擬物化風(fēng)格圖標(biāo)可以使用戶一眼就能夠認(rèn)出對象是什么，而且擬物化設(shè)計(jì)的交互方式也模擬了現(xiàn)實(shí)生活中的交互方式。如圖2-87所示為精美的擬物化設(shè)計(jì)風(fēng)格圖標(biāo)。提示：擬物化設(shè)計(jì)是指在設(shè)計(jì)過程中通過添加高光、紋理、材質(zhì)和陰影等效果，力求再現(xiàn)實(shí)物對象。圖2-87擬物化圖標(biāo)設(shè)計(jì)2.5.1認(rèn)知擬物化圖標(biāo)擬物化圖標(biāo)在iOS6時(shí)發(fā)展到了最高峰，材質(zhì)、光影的表現(xiàn)是擬物化圖標(biāo)的核心理念。蘋果iOS6有一個(gè)非常優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，那就是滑竿上的圓形金屬按鈕設(shè)計(jì)。這個(gè)按鈕不僅表現(xiàn)出了金屬的材質(zhì)，而且在傾斜手機(jī)時(shí)還會(huì)像真正的金屬一樣改變光澤。這是追求擬物化設(shè)計(jì)的最高境界，在最大程度上還原了真實(shí)環(huán)境。2.5.1認(rèn)知擬物化圖標(biāo)擬物化圖標(biāo)的最大優(yōu)勢是可識別性很強(qiáng)，用戶體驗(yàn)效果好。但是它有一個(gè)致命的缺點(diǎn)，就是這種圖標(biāo)不太適用于界面整體的功能化展示，而且制作成本很高，需要花大量的時(shí)間來設(shè)計(jì)視覺上的陰影和質(zhì)感。所以在擬物化設(shè)計(jì)轉(zhuǎn)為扁平化設(shè)計(jì)的過程中，為了平衡設(shè)計(jì)效率與視覺效果，演變出了一種微質(zhì)感化的設(shè)計(jì)，也就是用盡可能少的樣式來表現(xiàn)圖標(biāo)的質(zhì)感，如圖2-88所示。圖2-88微質(zhì)感化圖標(biāo)2.5.2擬物化圖標(biāo)的構(gòu)建流程1.勾出輪廓2.繪制形狀3.填充固有色4.繪制正式效果5.完善細(xì)節(jié)2.5.2擬物化圖標(biāo)的構(gòu)建流程1.勾出輪廓以一款打印機(jī)的設(shè)計(jì)為例，介紹擬物化圖標(biāo)的構(gòu)建流程。在繪制一個(gè)圖標(biāo)之前，要構(gòu)思好它的形狀和朝向，之后畫出透視圖，可以是簡單的幾筆線框勾出輪廓線，用于輔助正式構(gòu)圖，如圖2-89所示。2.5.2擬物化圖標(biāo)的構(gòu)建流程2.繪制形狀在透視圖的基礎(chǔ)上勾勒出完整的形狀，不用把每一個(gè)部位都畫完美，因?yàn)楹罄m(xù)還要調(diào)整，這樣可以節(jié)省時(shí)間，如圖2-90所示。2.5.2擬物化圖標(biāo)的構(gòu)建流程3.填充固有色為形狀填充固有色，并觀察整體是否有不完美的地方，檢查是否有錯(cuò)誤的路徑點(diǎn)，如圖2-91所示。適時(shí)地檢查自己的設(shè)計(jì)稿，用快速簡單的方法來查看有可能發(fā)生錯(cuò)誤的地方。2.5.2擬物化圖標(biāo)的構(gòu)建流程4.繪制正式效果使用蒙板等工具使形狀產(chǎn)生嵌入的效果，并填充大致的色彩，明確暗部陰影、高光、疊紋理等部位，如圖2-92所示。處理類似于漸變和深淺的問題，這一步驟需要有耐心。2.5.2擬物化圖標(biāo)的構(gòu)建流程5.完善細(xì)節(jié)進(jìn)一步修改顏色，并增加一些缺少的形狀，如紙張等。再增加完善各種效果，如前置板的不透明度、周圍邊角的光影及紙張的陰影等，如圖2-93所示。圖2-93完善細(xì)節(jié)2.5.3制作擬物化圖標(biāo)本例制作一款相機(jī)圖標(biāo)，效果圖如圖2-94所示。它包含了鏡頭色彩、金屬、皮革、板材等各類質(zhì)感設(shè)計(jì)?？梢酝ㄟ^疊加高光、紋理、材質(zhì)、陰影等效果對相機(jī)實(shí)物進(jìn)行再現(xiàn)。圖2-94相機(jī)圖標(biāo)2.5.3制作擬物化圖標(biāo)（1）打開Photoshop軟件，新建寬度和高度均為1024像素、分辨率為72像素/英寸、顏色模式為RGB、背景為白色的畫布；在畫布邊緣添加4條參考線備用，此時(shí)重新設(shè)置畫布寬度和高度均為2000像素，作為留白。1.制作背景2.5.3制作擬物化圖標(biāo)（2）將白色背景填充為深藍(lán)色（RGB：5，10，25）。運(yùn)用“橢圓工具”繪制一個(gè)正圓形路徑，右擊路徑層，設(shè)置填充藍(lán)色（RGB：0，35，128），調(diào)整羽化值大小為200像素，單擊“確定”按鈕，制作背景效果如圖2-95所示。2.5.3制作擬物化圖標(biāo)2.繪制相機(jī)簡圖（1）運(yùn)用“圓角矩形工具”，繪制一個(gè)寬度和高度均為1024像素，圓角為180像素的圓角正方形，將得到的圖層命名為“機(jī)身1”。填充深棕色（RGB：28，18，16），作為相機(jī)的底座，如圖2-96（a）所示。按Ctrl+J快捷鍵，復(fù)制“機(jī)身1”圖層。將復(fù)制的圖層命名為“機(jī)身2”，填充深藍(lán)色（RGB：24，26，60），如圖2-96（b）所示。2.5.3制作擬物化圖標(biāo)(a)(b)

圖2-96制作圓角正方形并復(fù)制圖層2.5.3制作擬物化圖標(biāo)（2）再次復(fù)制兩個(gè)圓角正方形，并命名為“機(jī)身3”和“機(jī)身4”。分別填充灰綠色（RGB：184，207，207）和淺灰綠色（RGB：239，248，248）?！皺C(jī)身3”形狀向下移動(dòng)40像素，“機(jī)身4”形狀向下移動(dòng)110像素，如圖2-97所示。2.5.3制作擬物化圖標(biāo)（3）按Ctrl+G快捷鍵，將四個(gè)圓角正方形進(jìn)行編組，將圖層組命名為“機(jī)身”。運(yùn)用“多邊形工具”繪制一個(gè)星形，填充為白色，命名為“鏡頭旋鈕”。具體參數(shù)設(shè)置如圖2-98所示。2.5.3制作擬物化圖標(biāo)（4）運(yùn)用“橢圓工具”，由內(nèi)到外繪制三個(gè)正圓形，分別命名為“鏡頭1”“鏡頭2”“鏡頭3”，制作鏡頭的層次感。分別設(shè)置正圓的直徑和顏色，內(nèi)圓直徑258像素、顏色為（RGB：80，80，80）；中圓直徑506像素、顏色為（RGB：128，128，128）；外圓直徑586像素、顏色為（RGB：167，167，167），如圖2-99所示。2.5.3制作擬物化圖標(biāo)（5）再次繪制一個(gè)正圓形，命名為“鏡頭旋鈕透視”，放置到“鏡頭旋鈕”圖層下面，顏色為（RGB：206，206，206），效果如圖2-100所示。2.5.3制作擬物化圖標(biāo)（6）繪制兩個(gè)嵌套的正圓形，分別命名為“閃光燈1”和“閃光燈2”，放置在如圖2-101所示的位置，外圓直徑為74像素、顏色為（RGB：80，80，80），內(nèi)圓直徑為64像素、顏色為（RGB：206，206，206）。按Ctrl+G快捷鍵，將這個(gè)兩層進(jìn)行編組，命名為“閃光燈”。2.5.3制作擬物化圖標(biāo)（7）運(yùn)用“橢圓工具”繪制兩個(gè)橢圓，將得到的圖層分別命名為“快門1”和“快門2”，使其中心對齊，如圖2-102所示。2.5.3制作擬物化圖標(biāo)（8）運(yùn)用“矩形工具”繪制一個(gè)矩形，得到“矩形1”圖層，復(fù)制“快門2”（較小的橢圓）圖層，將得到的圖層命名為“快門3”。換一個(gè)淺色的填充，上移并做出立體的“快門”按鈕效果，如圖2-103所示。將此部分關(guān)于快門的所有圖層進(jìn)行編組，并命名為“快門”。2.5.3制作擬物化圖標(biāo)（9）繪制調(diào)節(jié)旋鈕圖形。運(yùn)用“橢圓工具”和“圓角矩形工具”，繪制旋鈕部分，繪制效果如圖2-104所示。其中，最外層的大圓用“橢圓工具”繪制，命名為“旋鈕1”；第二層的小圓用“橢圓工具”和“鋼筆工具”進(jìn)行繪制，命名為“旋鈕2”；最里層的小圓命名為“旋鈕3”。將調(diào)節(jié)旋鈕部分的所有圖層進(jìn)行編組，命名為“調(diào)節(jié)旋鈕”。相機(jī)簡易圖形制作完成，如圖2-104所示。2.5.3制作擬物化圖標(biāo)3.制作機(jī)身效果（1）導(dǎo)入素材文件“相機(jī)皮紋.jpg”，打開色相飽和度對話框，選中“著