周末陪著朋友去看了一下家電（電視、洗衣機(jī)等），通過店里面的家電標(biāo)價(jià)簽來快速瀏覽商品的價(jià)格。今天就針對(duì)這個(gè)家電標(biāo)價(jià)簽來給使用標(biāo)簽批量生成軟件給大家分享一下制作的步驟。
小提示：
一般使用標(biāo)簽批量生成軟件生成的可變數(shù)據(jù)標(biāo)簽，都是通過數(shù)據(jù)類型數(shù)據(jù)庫(kù)導(dǎo)入的方式進(jìn)行批量生成的。在本文中因?yàn)橹谱鞯氖羌译姌?biāo)價(jià)簽的模板，上面顯示的文字內(nèi)容都是固定不變的，所使用的數(shù)據(jù)類型是手動(dòng)輸入的方式進(jìn)行操作的。
設(shè)置家電標(biāo)價(jià)簽尺寸
打開事先在電腦（win10系統(tǒng)）上面安裝好的標(biāo)簽批量生成軟件，點(diǎn)擊新建，選擇打印機(jī)，紙質(zhì)選擇“自定義大小”，寬100mm*高70 mm，1行1列，并在“畫布”中選擇背景顏色，“勾選”打印背景，“文檔設(shè)置”右側(cè)可以預(yù)覽出設(shè)置的標(biāo)簽紙張效果；
插入公司LOGO
點(diǎn)擊左側(cè)工具欄中“插入位圖圖片”的圖標(biāo)，鼠標(biāo)雙擊圖片，打開其數(shù)據(jù)源窗口，點(diǎn)擊左側(cè)“+”，在手動(dòng)輸入窗口下方點(diǎn)擊坐下瀏覽，根據(jù)路徑選擇對(duì)應(yīng)的圖片添加，保留圖片路徑，點(diǎn)擊確認(rèn)；
繪制普通文本
點(diǎn)擊左側(cè)工具欄“A”圖標(biāo)，繪制一個(gè)普通文本，雙擊普通文本打開“圖形屬性”，在“數(shù)據(jù)源”中修改默認(rèn)數(shù)據(jù)，手動(dòng)添加“美的專賣店”，并在“圖形屬性”中的“文字”里面設(shè)置文字排版參數(shù)信息；家電標(biāo)價(jià)簽上其余固定不變的文字內(nèi)容也都是這樣添加。如下圖：
繪制圓角矩形
點(diǎn)擊“繪制矩形”，并在畫布上“繪制矩形”，鼠標(biāo)右鍵點(diǎn)擊“矩形”-“圖形屬性”-“填充”類型實(shí)心-“背景色”白色,線條粗細(xì)選擇“0”-圓角填寫為3,點(diǎn)擊確定；
繪制矩形的操作步驟同上。繪制直線的添加操作步驟可以參考文章：如何在條碼軟件中繪制直線并靈活設(shè)置參數(shù)；添加完成標(biāo)價(jià)簽內(nèi)容之后效果如下圖；
以上就是使用標(biāo)簽批量生成軟件生成家電標(biāo)價(jià)簽的制作步驟。在添加標(biāo)價(jià)簽里面的內(nèi)容時(shí)，可通過數(shù)據(jù)庫(kù)導(dǎo)入的方式批量生成，具體的操作步驟可以參考文章：條碼打印軟件如何篩選導(dǎo)入Excel表數(shù)據(jù)。
編輯導(dǎo)語(yǔ)：圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中不可缺少的元素，它看似簡(jiǎn)單，但其實(shí)內(nèi)含門道。本篇文章里，作者就對(duì)icon設(shè)計(jì)的相關(guān)知識(shí)和icon繪制方法做出經(jīng)驗(yàn)介紹。如果你對(duì)icon設(shè)計(jì)也想要有所了解的話，那就點(diǎn)進(jìn)來看一下吧。
圖標(biāo)是一種抽象的、跨語(yǔ)言的符號(hào)，是UI設(shè)計(jì)中最不可或缺的視覺元素，在設(shè)計(jì)中看似只占一個(gè)很小的區(qū)域，但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn)。
了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件。
不如，從這篇開始專注圖標(biāo)設(shè)計(jì)相關(guān)的專業(yè)知識(shí)，逐步搭建一個(gè)完整的圖標(biāo)知識(shí)庫(kù)。
經(jīng)常有同學(xué)問圖標(biāo)該設(shè)計(jì)多大，不同設(shè)備icon尺寸是多少，那第一篇就從圖標(biāo)尺寸說起吧。
在界面圖標(biāo)設(shè)計(jì)中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，這里的建議是以48px作為常規(guī)圖標(biāo)的設(shè)計(jì)尺寸，因?yàn)閕OS界面中的網(wǎng)格大小是4的倍數(shù)，蘋果規(guī)范要求最小點(diǎn)擊面積為44pt；安卓的網(wǎng)格是8的倍數(shù)，最小操作熱區(qū)為48dp。
另外，@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個(gè)數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕。
那PC端呢？
到了桌面端后，因?yàn)槠聊环直媛实牟煌瑳]有規(guī)定最小操作熱區(qū)。但受到文字落地方式（Chrome瀏覽器中限制最小的字體為12px）的限制，12px漸漸成為大家公認(rèn)圖標(biāo)操作熱區(qū)的最小值。16px、24px、32px都是PC端常見的圖標(biāo)尺寸。
通常我們只需要選擇一個(gè)通用的尺寸來繪制，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。
不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí)，還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的系統(tǒng)圖標(biāo)可能是24px，但是營(yíng)銷圖標(biāo)是80px，兩者的使用差別會(huì)很大，那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。
這里建議從最大的尺寸開始，然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡(jiǎn)化細(xì)節(jié)要比添加容易得多，也能最大程度的保留圖標(biāo)原始狀態(tài)。
接著來看各平臺(tái)自家的尺寸規(guī)范。
設(shè)計(jì)師設(shè)計(jì)時(shí)，通常只用設(shè)計(jì)一個(gè)App Store的圖標(biāo)（1024px1024px），其他尺寸可用ios圖標(biāo)生成器自動(dòng)輸出一套，小尺寸圖標(biāo)單獨(dú)微調(diào)下細(xì)節(jié)即可。
在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件。
打開這個(gè)文件，用我們自己設(shè)計(jì)的圖標(biāo)替換掉智能對(duì)象里的內(nèi)容，就會(huì)生成我們自己的圖標(biāo)，把背景隱藏，切出這些圖標(biāo)即可。
這兩處的圖標(biāo)大小一樣都是24x24pt，最大不超過28x28pt。
注：@2x和@3x在邏輯像素單位是一樣的，如果你使用如 Sketch、Adobe XD 等矢量工具設(shè)計(jì)，可以參照邏輯像素?cái)?shù)值設(shè)計(jì)即可。
iOS 規(guī)范中 Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式，寬度平分，icon尺寸約30x30pt（60px）。
蘋果給出了四種不同形狀標(biāo)簽欄圖標(biāo)的尺寸參考供大家設(shè)計(jì)時(shí)參考。其意義是讓不同外形的圖標(biāo)看上去是差不多大的，保證圖標(biāo)的平衡。
1）目標(biāo)寬度和高度（圓形圖標(biāo)）
2）目標(biāo)寬度和高度（方形圖標(biāo)）
3）目標(biāo)寬度（寬圖標(biāo)）
4）目標(biāo)高度（高圖標(biāo)）
iOS在這里所定義的尺寸并不是圖標(biāo)文件最后輸出的尺寸，而是給設(shè)計(jì)師作圖時(shí)，針對(duì)不同圖標(biāo)形狀的參考尺寸，目的是為了讓圖標(biāo)的視覺大小看上去一致。
放在mipmap-*dpi下，文件名為ic_launcher.png。
keyline(關(guān)鍵線)形狀，以192x192dp為例：
相比iOS，Material Design對(duì)圖標(biāo)尺寸有更詳細(xì)的規(guī)范。默認(rèn)系統(tǒng)圖標(biāo)尺寸為24x24dp，四周有2dp的活動(dòng)區(qū)域。Keyline（關(guān)鍵線）形狀提供了針對(duì)圓形、正方形、垂直矩形、水平矩形的尺寸規(guī)范，以保證一致的視覺比例。
關(guān)于Keyline線畫法會(huì)在下一篇詳解，敬請(qǐng)關(guān)注。
切圖時(shí)不用帶圓角和陰影，Google Play 會(huì)以動(dòng)態(tài)方式應(yīng)用圓角遮蓋部分和陰影，確保所有應(yīng)用/游戲圖標(biāo)的設(shè)計(jì)保持一致。
圖標(biāo)尺寸的規(guī)范主要是確保他們?cè)谖锢沓叽缟鲜且恢碌模劣谝曈X上怎么統(tǒng)一，還需要自己多去練習(xí)，這個(gè)后邊的文章中也會(huì)講到。
為特定的項(xiàng)目選擇特定的尺寸， 如果你為iOS或是Android設(shè)計(jì)圖標(biāo)，在決定尺寸之前，你應(yīng)該查看圖標(biāo)規(guī)范，蘋果的HIG和安卓的Material Design都是你的設(shè)計(jì)指南。
另外，如果你是一個(gè)剛?cè)胄械腢I設(shè)計(jì)師，建議開始從較大尺寸的圖標(biāo)開始，比如64或96px，因?yàn)樾〕叽绲膱D標(biāo)難度更大（這包括像素對(duì)齊）。
OK，希望通過這篇文章的梳理，大家能對(duì)圖標(biāo)的尺寸有更全面的認(rèn)識(shí)，我們下期見。
下篇預(yù)告：圖標(biāo)柵格及Keyline線畫法。
參考資料
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn
https://material.io/design/iconography/system-icons.html#design-principles
作者：Fyin印跡；公眾號(hào)：印跡拾光
本文由 @Fyin印跡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議