圖標(biāo)設(shè)計(jì)與制作（全彩慕課版）-PPT7

第7章圖標(biāo)項(xiàng)目設(shè)計(jì)本章介紹：學(xué)習(xí)圖標(biāo)設(shè)計(jì)，不是為了單純的畫一組圖標(biāo)，而是要讓圖標(biāo)可以應(yīng)用到真實(shí)的項(xiàng)目中。因此，設(shè)計(jì)師需要系統(tǒng)學(xué)習(xí)圖標(biāo)應(yīng)用到項(xiàng)目中的知識(shí)點(diǎn)，這樣才會(huì)發(fā)揮好圖標(biāo)的作用。本章對(duì)導(dǎo)航欄及其圖標(biāo)設(shè)計(jì)、標(biāo)簽欄及其圖標(biāo)設(shè)計(jì)、金剛區(qū)及其圖標(biāo)設(shè)計(jì)以及應(yīng)用圖標(biāo)進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對(duì)圖標(biāo)項(xiàng)目設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，有助于高效便利地進(jìn)行完整的圖標(biāo)設(shè)計(jì)工作。掌握認(rèn)識(shí)導(dǎo)航欄及其圖標(biāo)掌握認(rèn)識(shí)標(biāo)簽欄及其圖標(biāo)掌握認(rèn)識(shí)金剛區(qū)及其圖標(biāo)掌握認(rèn)識(shí)應(yīng)用圖標(biāo)學(xué)習(xí)目標(biāo)導(dǎo)航欄的概念導(dǎo)航欄的類型導(dǎo)航欄的規(guī)范課堂案例-制作電商類導(dǎo)航欄圖標(biāo)7.1認(rèn)識(shí)導(dǎo)航欄及其圖標(biāo)導(dǎo)航欄（NavigationBar，Navbar），位于App頂部，狀態(tài)欄下方，提供了位置指示及功能操作。Android中，由于使用的是MaterialDesign設(shè)計(jì)語言，因此將iOS中的導(dǎo)航欄稱之為頂部應(yīng)用欄（TopAppBar）。7.1.1導(dǎo)航欄的概念iOS導(dǎo)航欄Android頂部應(yīng)用欄1.常規(guī)導(dǎo)航欄·標(biāo)題導(dǎo)航欄：標(biāo)題導(dǎo)航欄是常規(guī)導(dǎo)航欄中最基礎(chǔ)的一種，主要由標(biāo)題和操作圖標(biāo)組成。這類導(dǎo)航欄常用于二級(jí)詳情界面或?qū)Ш胶唵蔚囊患?jí)界面。7.1.2導(dǎo)航欄的類型造作新家App，一級(jí)界面標(biāo)題導(dǎo)航欄·搜索框?qū)Ш綑冢核阉骺驅(qū)Ш綑谑浅Ｒ?guī)導(dǎo)航欄中專門用于搜索功能的導(dǎo)航欄。在標(biāo)題導(dǎo)航欄的基礎(chǔ)之上，增加搜索框，去除導(dǎo)航標(biāo)題，這類導(dǎo)航欄常用于新聞資訊、交流社區(qū)以及娛樂影音等需要進(jìn)行高頻檢索的App首頁。7.1.2導(dǎo)航欄的類型網(wǎng)易新聞App，搜索框?qū)Ш綑凇ab/分段控件導(dǎo)航欄：Tab和分段控件導(dǎo)航欄都是常規(guī)導(dǎo)航欄中有多個(gè)選項(xiàng)的導(dǎo)航欄。區(qū)別在于分段控件導(dǎo)航欄一般有2~5個(gè)可選項(xiàng)，且不能左右滑動(dòng)，常用于內(nèi)容較嚴(yán)肅的新聞和理財(cái)?shù)阮愋虯pp；而Tab導(dǎo)航欄的可選項(xiàng)可以擴(kuò)展很多，并且可以左右滑動(dòng)切換，常用于內(nèi)容較活潑的社交和娛樂等類型App。7.1.2導(dǎo)航欄的類型產(chǎn)品經(jīng)理App，分段控件導(dǎo)航欄2.通欄導(dǎo)航欄常用在電商、旅游等界面復(fù)雜或是需要烘托氛圍的界面中。7.1.2導(dǎo)航欄的類型天天基金App，通欄導(dǎo)航欄小米有品App，通欄導(dǎo)航欄3.大標(biāo)題導(dǎo)航欄大標(biāo)題導(dǎo)航欄是導(dǎo)航欄中將標(biāo)題進(jìn)行放大的導(dǎo)航欄。這類導(dǎo)航欄常用于定位高端、文藝清新的界面中，可以幫助減少視覺噪音，讓內(nèi)容更加突出。但這類導(dǎo)航欄不適用于功能性較強(qiáng)的界面中。7.1.2導(dǎo)航欄的類型壹錢包App，大標(biāo)題導(dǎo)航欄1.標(biāo)題導(dǎo)航欄（1）標(biāo)題導(dǎo)航欄尺寸·iOS標(biāo)題導(dǎo)航欄寬度：375pt，高度：44pt?！ndroid標(biāo)題導(dǎo)航欄寬度360dp，高度56dp。（2）標(biāo)題導(dǎo)航欄文字·標(biāo)題文字尺寸：17～18pt?！げ僮髯⑨尦叽纾?6pt?！ぶ匾崾荆何淖謱蛹?jí)字號(hào)對(duì)比>2pt（3）標(biāo)題導(dǎo)航欄圖標(biāo)·圖標(biāo)設(shè)計(jì)尺寸：24pt。7.1.3導(dǎo)航欄的規(guī)范2.大標(biāo)題導(dǎo)航欄（1）大標(biāo)題導(dǎo)航欄尺寸·iOS標(biāo)題導(dǎo)航欄寬度：375pt，高度：96pt。·Android標(biāo)題導(dǎo)航欄寬度360dp，高度128dp。（2）大標(biāo)題導(dǎo)航欄文字·標(biāo)題文字尺寸：34pt?！げ僮髯⑨尦叽纾?2pt。（3）大標(biāo)題導(dǎo)航欄圖標(biāo)·圖標(biāo)設(shè)計(jì)尺寸：24pt。7.1.3導(dǎo)航欄的規(guī)范3.搜索框?qū)Ш綑冢?）搜索框?qū)Ш綑谖淖帧に阉魑淖殖叽纾?4pt?！D標(biāo)文字尺寸：9pt。（2）搜索框?qū)Ш綑趫D標(biāo)·圖標(biāo)設(shè)計(jì)尺寸：24pt、20pt、16pt?！ぶ匾崾荆簣D標(biāo)設(shè)計(jì)的尺寸規(guī)律為4或8的倍數(shù)。（3）搜索框?qū)Ш綑陂g距·整體設(shè)計(jì)分布：內(nèi)部間距建議為8pt，外部間距建議為16pt?！ぶ匾崾荆洪g距分布的遠(yuǎn)足應(yīng)遵循五分原則和等分原則。7.1.3導(dǎo)航欄的規(guī)范使用矩形工具和直線段工具繪制圖形，使用剪刀工具剪切路徑，使用描邊命令設(shè)置描邊選項(xiàng)，使用路徑查找器命令實(shí)現(xiàn)制作電商類導(dǎo)航欄圖標(biāo)。7.1.4課堂案例-制作電商類導(dǎo)航欄圖標(biāo)圖標(biāo)最終效果圖標(biāo)簽欄的概念標(biāo)簽欄的類型標(biāo)簽欄的規(guī)范課堂案例-制作旅游類標(biāo)簽欄圖標(biāo)7.2認(rèn)識(shí)標(biāo)簽欄及其圖標(biāo)標(biāo)簽欄（tab欄），位于App的底部，提供了位置指示及頁面切換的作用。Android中，由于使用的是MaterialDesign設(shè)計(jì)語言，因此將iOS中的標(biāo)簽欄稱之為底部應(yīng)用欄（BottomAppBar）。7.2.1標(biāo)簽欄的概念iOS標(biāo)簽欄Android底部應(yīng)用欄1.背景樣式·白色或淺灰：白色或淺灰背景樣式的標(biāo)簽欄，區(qū)分明顯，最為常用。7.2.2標(biāo)簽欄的類型虎嗅App標(biāo)簽欄·黑色或深灰黑色或深灰背景樣式的標(biāo)簽欄，適用于短視頻、工具類等高級(jí)娛樂型App。7.2.2標(biāo)簽欄的類型抖音App標(biāo)簽欄2.展示方式·圖標(biāo)標(biāo)簽欄以純圖標(biāo)的方式進(jìn)行展示，普遍識(shí)別性較弱。這類展示方式適用于小眾文藝類App。7.2.2標(biāo)簽欄的類型字里行間App標(biāo)簽欄·文字標(biāo)簽欄以純文字的方式進(jìn)行展示，樣式比較單一。這類展示方式適用于短視頻類型的App。7.2.2標(biāo)簽欄的類型小紅書App標(biāo)簽欄·圖標(biāo)+文字標(biāo)簽欄以圖標(biāo)+文字的方式進(jìn)行展示，擁有較高的識(shí)別度，是大多數(shù)App采用的展示方式。7.2.2標(biāo)簽欄的類型微信讀書App標(biāo)簽欄·圖標(biāo)+文字+舵式標(biāo)簽欄以圖標(biāo)+文字+舵式的方式進(jìn)行展示，都會(huì)具有發(fā)布需求。這類展示方式適用于社區(qū)型App。7.2.2標(biāo)簽欄的類型58同城App標(biāo)簽欄1.標(biāo)簽欄的尺寸·iOS標(biāo)簽欄寬度：375pt，高度：49pt。·Android標(biāo)簽欄寬度：360dp，高度：56dp?！ねㄓ玫膱D標(biāo)設(shè)計(jì)尺寸：24pt?！AB（浮動(dòng)操作按鈕）設(shè)計(jì)尺寸：56pt?！D標(biāo)下文字設(shè)計(jì)尺寸：10pt。7.2.3標(biāo)簽欄的規(guī)范2.標(biāo)簽欄的布局標(biāo)簽欄圖標(biāo)數(shù)量通常在3～5個(gè)。標(biāo)簽欄的布局方法共有屏幕等分、邊距刪減等分以及圖標(biāo)左右間距相等這三種。屏幕等分的方式最常用，其具體的布局方法是，列寬=屏幕寬度/標(biāo)簽個(gè)數(shù)。邊距刪減等分的方式是對(duì)屏幕等分方式的一種補(bǔ)充，其具體的布局方法是，減去標(biāo)簽欄中左右兩邊間距，再將標(biāo)簽進(jìn)行等分。圖標(biāo)左右間距相等的方式并不常用，其適用于標(biāo)簽數(shù)量為3個(gè)的時(shí)候。7.2.3標(biāo)簽欄的規(guī)范3.標(biāo)簽欄的圖標(biāo)·標(biāo)簽欄圖標(biāo)尺寸：通用的圖標(biāo)設(shè)計(jì)尺寸為24pt。不同形狀的圖標(biāo)會(huì)產(chǎn)生不同的視覺重量，為保持視覺平衡，不同形狀的圖標(biāo)設(shè)計(jì)尺寸可參考下圖。7.2.3標(biāo)簽欄的規(guī)范方形：寬高18px圓形:直徑20px垂直矩形：高度20px,寬度16px水平矩形：高度16px,寬度20px·圖標(biāo)的切換狀態(tài)：線性（未選中狀態(tài)）-面性（選中狀態(tài)），這種方式下的切換狀態(tài)反饋?zhàn)顝?qiáng)烈，最常用。7.2.3標(biāo)簽欄的規(guī)范支付寶App·圖標(biāo)的角標(biāo)設(shè)計(jì)角標(biāo)的概念：角標(biāo)（badge），又稱徽標(biāo)，通常指出現(xiàn)在圖標(biāo)右上角的紅色圖形，表示有新內(nèi)容或者待處理信息。7.2.3標(biāo)簽欄的規(guī)范網(wǎng)易嚴(yán)選App標(biāo)簽欄角標(biāo)的色彩：絕大多數(shù)的角標(biāo)用色都是紅色，部分品牌色為暖色系色彩的App會(huì)使用其品牌色作為角標(biāo)色彩。7.2.3標(biāo)簽欄的規(guī)范騰訊視頻App標(biāo)簽欄角標(biāo)的尺寸在角標(biāo)的尺寸中，小紅點(diǎn)建議為6～8pt，紅色圓形建議為12～16pt（圓角矩形、類圓角矩形的高度），小紅點(diǎn)與紅色圓形大小關(guān)系通常為1:2。7.2.3標(biāo)簽欄的規(guī)范角標(biāo)尺寸示意圖角標(biāo)的字體角標(biāo)的字體應(yīng)該為非襯線，可以和系統(tǒng)字體進(jìn)行匹配。當(dāng)?shù)讓拥膱D形為圓形時(shí)，字體與底層的比例關(guān)系接近1：2。當(dāng)?shù)讓拥膱D形為圓角矩形時(shí)，字體與圓角矩形的高度比例同樣接近1:2；字體距上下側(cè)距離：字體距左右側(cè)距離=1:1.2。7.2.3標(biāo)簽欄的規(guī)范角標(biāo)的層級(jí)角標(biāo)出現(xiàn)在面性圖標(biāo)，通常加入白色描邊。7.2.3標(biāo)簽欄的規(guī)范京東App標(biāo)簽欄使用矩形工具、鋼筆工具和直接選擇工具繪制圖形，使用描邊命令設(shè)置描邊選項(xiàng)，使用透明度命令實(shí)現(xiàn)旅游類標(biāo)簽欄圖標(biāo)。7.2.4課堂案例-制作旅游類標(biāo)簽欄圖標(biāo)圖標(biāo)最終效果圖金剛區(qū)的概念金剛區(qū)的類型金剛區(qū)的規(guī)范課堂案例-制作旅游類金剛區(qū)圖標(biāo)7.3認(rèn)識(shí)金剛區(qū)及其圖標(biāo)金剛區(qū)又稱為快速功能入口，通常是位于搜索框、banner之下，是頁面的核心功能區(qū)域，表現(xiàn)形式為多行排列的宮格區(qū)圖標(biāo)。具有趣味展示以及業(yè)務(wù)導(dǎo)流的作用。7.3.1金剛區(qū)的概念支付寶App1.圖標(biāo)+文字設(shè)計(jì)形式以圖標(biāo)+文字類型為主的金剛區(qū)，有著設(shè)計(jì)細(xì)節(jié)豐富，富有創(chuàng)意等優(yōu)勢(shì)，但同時(shí)容易出現(xiàn)對(duì)文字信息依賴性較強(qiáng)的問題。7.3.2金剛區(qū)的類型貝殼App金剛區(qū)2.圖片+文字設(shè)計(jì)形式以圖片+文字類型為主的金剛區(qū)，有著主題明確，具有感染力等優(yōu)勢(shì)，但同時(shí)容易產(chǎn)生產(chǎn)品缺乏設(shè)計(jì)感等現(xiàn)象。7.3.2金剛區(qū)的類型盒馬鮮生App金剛區(qū)3.圖標(biāo)+圖片+文字設(shè)計(jì)形式以圖標(biāo)+圖片+文字類型為主的金剛區(qū)，有著運(yùn)營目的強(qiáng)等優(yōu)勢(shì)，但同時(shí)容易導(dǎo)致產(chǎn)品視覺不統(tǒng)一等問題。7.3.2金剛區(qū)的類型網(wǎng)易考拉海購App金剛區(qū)1.金剛區(qū)的尺寸7.3.3金剛區(qū)的規(guī)范金剛區(qū)尺寸示意圖2.金剛區(qū)的布局·數(shù)量金剛區(qū)圖標(biāo)的數(shù)量根據(jù)米勒法則的7±2規(guī)律而來，通常在一行中不超過5個(gè)圖標(biāo)。7.3.3金剛區(qū)的規(guī)范酷狗音樂App·方法金剛區(qū)的布局方法共有邊距刪減法和占位等分法這兩種。邊距刪減法具體的布局方法是，減去左右兩邊間距，再進(jìn)行等分。這種布局方式適用于有一行5個(gè)圖標(biāo)或帶有底板圖標(biāo)的金剛區(qū)。占位等分法具體的布局方法是，列寬=屏幕寬度/標(biāo)簽個(gè)數(shù)。這種布局方式適用于一行4個(gè)圖標(biāo)或無底板圖標(biāo)的金剛區(qū)。7.3.3金剛區(qū)的規(guī)范4.金剛區(qū)的圖標(biāo)·金剛區(qū)圖標(biāo)尺寸主圖標(biāo)底板：40～48pt。內(nèi)環(huán)圖標(biāo)：是底板的0.618（黃金分割比）。副圖標(biāo)：底板的0.618或0.382（黃金風(fēng)格比）。7.3.3金剛區(qū)的規(guī)范金剛區(qū)圖標(biāo)尺寸示意圖·金剛區(qū)圖標(biāo)風(fēng)格無底板面性圖標(biāo)：無底板的金剛區(qū)面性圖標(biāo)，視覺層級(jí)感針對(duì)有底板金剛區(qū)面性圖標(biāo)稍弱。這類圖標(biāo)常用于主金剛區(qū)及少數(shù)副金剛區(qū)。7.3.3金剛區(qū)的規(guī)范貝殼找房App副金剛區(qū)有底板圓形底板+面性圖標(biāo)：圓形底板+面性組合的金剛區(qū)圖標(biāo)，有著柔和簡潔的特點(diǎn)。這類圖標(biāo)最為常用。7.3.3金剛區(qū)的規(guī)范壹錢包App金剛區(qū)·金剛區(qū)圖標(biāo)層級(jí)金剛區(qū)圖標(biāo)層級(jí)通常按照?qǐng)D標(biāo)的基本屬性來進(jìn)行層級(jí)劃分，即面性圖標(biāo)>線性圖標(biāo)，粗線圖標(biāo)>細(xì)線圖標(biāo)，深色圖標(biāo)>淺色圖標(biāo)，彩色圖標(biāo)>灰色圖標(biāo)。7.3.3金剛區(qū)的規(guī)范金剛區(qū)圖標(biāo)層級(jí)劃分示意圖·金剛區(qū)圖標(biāo)配色不同的色彩因?yàn)槠涔逃械奶攸c(diǎn)，會(huì)產(chǎn)生不同的感受。如紅色帶給我們熱情興奮的感受，而綠色則帶給我們安全舒緩的感受。因此進(jìn)行圖標(biāo)配色時(shí)要考慮色彩情緒，需要讓色彩表達(dá)的含義和該圖標(biāo)表達(dá)的含義一致。7.3.3金剛區(qū)的規(guī)范色彩情緒示意圖使用圓角矩形工具、橢圓工具、直接選擇工具和路徑選擇工具繪制圖形，使用快捷鍵變換圖形，使用漸變疊加命令添加圖層樣式，實(shí)現(xiàn)旅游類金剛區(qū)圖標(biāo)。7.3.4課堂案例-制作旅游類金剛區(qū)圖標(biāo)圖標(biāo)最終效果圖應(yīng)用圖標(biāo)的概念應(yīng)用圖標(biāo)的類型應(yīng)用圖標(biāo)的規(guī)范課堂案例-制作娛樂類應(yīng)用圖標(biāo)7.4認(rèn)識(shí)應(yīng)用圖標(biāo)應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是體現(xiàn)產(chǎn)品品牌調(diào)性和特性的圖標(biāo)。7.4.1應(yīng)用圖標(biāo)的概念MaterialDesign應(yīng)用圖標(biāo)示意圖1.文字形式文字形式的應(yīng)用圖標(biāo)，即運(yùn)用中文、英文、數(shù)字以及諸如“￥”等特殊符號(hào)為核心設(shè)計(jì)要素的應(yīng)用圖標(biāo)。這類應(yīng)用圖標(biāo)有著表達(dá)信息直白明確，不容易被曲解含義的優(yōu)勢(shì)特點(diǎn)。7.4.2應(yīng)用圖標(biāo)的類型文字形式的應(yīng)用圖標(biāo)2.圖形形式圖形形式的應(yīng)用圖標(biāo)，即通過線性、動(dòng)物、卡通以及剪影等設(shè)計(jì)方法進(jìn)行圖形創(chuàng)意而形成的應(yīng)用圖標(biāo)。這類應(yīng)用圖標(biāo)有著生動(dòng)形象，加深產(chǎn)品印象的優(yōu)勢(shì)特點(diǎn)。7.4.2應(yīng)用圖標(biāo)的類型圖形形式的應(yīng)用圖標(biāo)3.組合形式組合形式的應(yīng)用圖標(biāo)，即通過圖形和文字進(jìn)行自由組合而成的應(yīng)用圖標(biāo)。這類應(yīng)用圖標(biāo)有著設(shè)計(jì)豐富的特點(diǎn)，不過設(shè)計(jì)師需要注意把握好文字和圖形之間的平衡感。7.4.2應(yīng)用圖標(biāo)的類型組合形式的應(yīng)用圖標(biāo)4.游戲角色游戲角色的應(yīng)用圖標(biāo)，即將游戲中的角色直接進(jìn)行使用的應(yīng)用圖標(biāo)。這類應(yīng)用圖標(biāo)有著通俗直觀，豐富鮮艷的特點(diǎn)。7.4.2應(yīng)用圖標(biāo)的類型游戲角色的應(yīng)用圖標(biāo)應(yīng)用圖標(biāo)的設(shè)計(jì)尺寸可以采用1024px，參