圖標設計與制作（全彩慕課版）-PPT7

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