組應(yīng)用程序中的圖標(biāo)規(guī)范

圖標(biāo)是應(yīng)用程序不可或缺的一部分，可以在應(yīng)用程序界面的任何位置找到。另外，由于圖標(biāo)的通用性，我們經(jīng)常需要在一個(gè)應(yīng)用程序中應(yīng)用多組圖標(biāo)，這與簡(jiǎn)單的第一印象相反。

許多新人認(rèn)為我們只需要設(shè)計(jì)一個(gè)大而完整的圖標(biāo)，可以在項(xiàng)目中提取。但是有很多場(chǎng)景，如果你只使用一種類型的圖標(biāo)，效果將非常糟糕。

1.圖標(biāo)的大小

大小是圖標(biāo)的大小規(guī)格。某些元素的元素權(quán)重較低，圖標(biāo)大小較小。一些重量更高。例如，在Apple Music的播放界面中，快進(jìn)等按鈕用作頁(yè)面上最重要的按鈕，尺寸非常大，其他可點(diǎn)擊的圖標(biāo)為秒，兩個(gè)按鈕表示音量是最小的。

確定圖標(biāo)大小是我們?cè)趫D標(biāo)設(shè)計(jì)項(xiàng)目中做的第一件事。但是，尺寸的確定不是憑空而來(lái)的。我們必須首先構(gòu)建實(shí)際的“場(chǎng)景”進(jìn)行分析，即完成界面的高保真原型或交互式原型。

2.圖標(biāo)的樣式

確認(rèn)圖標(biāo)大小后，以下是確認(rèn)圖標(biāo)的樣式。與尺寸一樣，我們想要應(yīng)用的圖標(biāo)樣式需要在已經(jīng)具有可視原型的頁(yè)面中進(jìn)行比較，并且設(shè)計(jì)無(wú)法提前啟動(dòng)。

在我的設(shè)計(jì)過程中，我通常將圖標(biāo)放在項(xiàng)目的最后并開始設(shè)計(jì)。原因是圖標(biāo)的視覺風(fēng)格取決于位置和環(huán)境。它是“第一個(gè)界面風(fēng)格，然后是圖標(biāo)風(fēng)格”。

在正常情況下，如果應(yīng)用程序中有多組圖標(biāo)，則正常的中小尺寸圖標(biāo)可以使用一般線性或面部樣式。在類別為?的快速輸入中，它具有裝飾性的?大小，您應(yīng)該使用一些更激進(jìn)的設(shè)計(jì)風(fēng)格。

圖標(biāo)的不同狀態(tài)

產(chǎn)品中的圖標(biāo)除了用作裝飾外，通常可用作按鈕。每個(gè)應(yīng)用程序都有大量用于單擊和交互的圖標(biāo)，例如底部導(dǎo)航欄，頭部消息圖標(biāo)?等。

當(dāng)一個(gè)圖標(biāo)可以被操縱時(shí)，我們需要注意它的狀態(tài)變化。例如，從導(dǎo)航欄圖標(biāo)，常規(guī)選擇狀態(tài)是更改顏色，但越來(lái)越多的應(yīng)用程序?qū)⒃谶x定狀態(tài)下采用不同的設(shè)計(jì)樣式，并通過更豐富的樣式性能增強(qiáng)可見性。

此外，控件中包含的某些圖標(biāo)將隨控件狀態(tài)的變化而變化。例如，在帳戶輸入框中，如果選擇了輸入框，則圖標(biāo)的顏色也會(huì)更改。如果輸入框當(dāng)前處于無(wú)法啟用狀態(tài)，則圖標(biāo)也將顯示為灰色。合格的UI設(shè)計(jì)人員將考慮圖標(biāo)更改的各種狀態(tài)，并在提交給開發(fā)過程時(shí)提供?分類的詳細(xì)說明。并且，充分利用Sketch等軟件中的組件功能，以提高項(xiàng)目效率和最終輸出。

圖標(biāo)標(biāo)簽和切割

完成界面和圖標(biāo)的設(shè)計(jì)后，我們會(huì)將設(shè)計(jì)提交給開發(fā)人員。其中，我們包括我們的注釋和切割表。無(wú)論其他設(shè)計(jì)元素如何，讓我們來(lái)談?wù)剤D標(biāo)剪切需要遵循的規(guī)范，并且字體在此過程中最容易出錯(cuò)。

應(yīng)用程序圖標(biāo)的導(dǎo)出已在前一章中提及，因此以下主要基于工具圖標(biāo)的說明。

1.圖標(biāo)的邊框

我們將回到第2章中工具圖標(biāo)的規(guī)范。當(dāng)我們確定圖標(biāo)的大小時(shí)，我們不希望設(shè)計(jì)圖形以適應(yīng)大小，而是使用網(wǎng)格系統(tǒng)來(lái)定義它們的大小。

許多新手會(huì)在這個(gè)過程中產(chǎn)生疑慮，因此在標(biāo)記過程中，我們會(huì)標(biāo)記圖形與其他元素的距離，或者從圖標(biāo)輪廓到其他圖形的距離。

實(shí)際上，圖標(biāo)的距離是基于外部輪廓計(jì)算的。雖然這個(gè)輪廓肉眼看不見，但它包含的內(nèi)在規(guī)律可以幫助我們忽略不必要的小問題。

2.圖標(biāo)畫布

有很多協(xié)作工具可以幫助我們標(biāo)記和剪切，例如Blue Lake? Zeplin。只要我們上傳設(shè)計(jì)草稿，程序員就可以獲得與圖標(biāo)對(duì)應(yīng)的剪切圖。

削減一些特定元素非常棒，但通過在線頁(yè)面導(dǎo)出圖標(biāo)的方式非常不可靠。我們說應(yīng)用程序可能有多種規(guī)格的圖標(biāo)，因此應(yīng)根據(jù)不同的規(guī)格導(dǎo)出合理的圖標(biāo)切割圖并進(jìn)行排序。

3.圖標(biāo)的名稱

下面我們簡(jiǎn)要介紹一下圖標(biāo)的命名規(guī)則。剛剛進(jìn)入職場(chǎng)的很多新手和UI設(shè)計(jì)師。壓力圖標(biāo)必須以英文命名，并收集各種常見的英文命名詞匯表。我必須首先指出這是錯(cuò)誤的。

由于整個(gè)應(yīng)用程序的圖標(biāo)系統(tǒng)，有很多圖標(biāo)意味著“抽象”。例如，在我上面的情況下，啟動(dòng)圖標(biāo)的中文名稱是“Secondary”，那么該單詞應(yīng)該如何翻譯？即使你不是英語(yǔ)水平，你寫的英語(yǔ)并不意味著開發(fā)人員可以理解它，并且大量抽象詞的積累最終導(dǎo)致命名不是一個(gè)有效的索引條件，因?yàn)闆]有人們可以理解，開發(fā)需要找到一個(gè)圖標(biāo)仍然通過縮略圖而不是名稱傳遞。

因此，如果內(nèi)部沒有特定的命名約定，或者程序員沒有特殊要求，我建議使用中文命名系統(tǒng)，因?yàn)榇蠖鄶?shù)國(guó)內(nèi)程序員都會(huì)使用獲取圖標(biāo)的第二個(gè)名稱。

命名格式可以分為3個(gè)級(jí)別，格式大致為：“模塊_名稱_狀態(tài)@1x”，如下例：

設(shè)置_錢包_高亮@1x.png
動(dòng)態(tài)_評(píng)論_默認(rèn)@1x.png
登錄_按鈕_點(diǎn)擊@2x.png

當(dāng)然，這不是唯一準(zhǔn)確的命名方法。我們可以根據(jù)實(shí)際場(chǎng)景進(jìn)行調(diào)整，但我們必須記住，圖標(biāo)的名稱是為了方便我們的搜索

最后，圖標(biāo)符號(hào)的命名必須與圖標(biāo)的命名一致，以便用一半的努力獲得兩倍的結(jié)果。

4.圖標(biāo)格式

上一章中啟動(dòng)圖標(biāo)的導(dǎo)出格式將根據(jù)不同的設(shè)備?場(chǎng)景導(dǎo)出不同的大小，并使用PNG格式。不用擔(dān)心，工具圖標(biāo)與設(shè)備不同，但您不需要導(dǎo)出這么多規(guī)格。我們來(lái)談?wù)勥@兩個(gè)圖標(biāo)的導(dǎo)出類型。

位圖格式最常用的導(dǎo)出格式是位圖PNG格式。因?yàn)轱@示器顯示不同的放大倍率，我們要輸出1x? 2x? 3x三倍放大規(guī)格。如果我們?cè)O(shè)計(jì)16pt圖標(biāo)，我們需要輸出16pt? 32pt? 48pt。三種尺寸。導(dǎo)出文件名的標(biāo)簽標(biāo)有@ 1x? @ 2x? @ 3x。

此規(guī)范對(duì)iOS和Android都很常見。雖然有超過3x的設(shè)備，但這些設(shè)備只需要調(diào)用3x規(guī)格。

雖然稍后將以矢量格式導(dǎo)出圖標(biāo)，但對(duì)于使用漸變?投影或工件樣式的位圖，必須使用位圖的格式，否則無(wú)法完整記錄圖形的細(xì)節(jié)。

矢量格式

導(dǎo)出3種類型的圖標(biāo)很麻煩，位圖往往會(huì)占用大量空間。因此，為了優(yōu)化此問題，iOS和Android在以前的系統(tǒng)更新中默認(rèn)支持矢量格式剪切文件：

1x使用PDF剪切iOS圖像

Android使用SVG的1x剪切圖表

當(dāng)然，如果您使用矢量格式導(dǎo)出，請(qǐng)記住在排序文件夾時(shí)單獨(dú)保存iOS和Android，而不是將它們混合在一起。

結(jié)束

我相信這是整個(gè)網(wǎng)絡(luò)上最完整，最詳細(xì)的圖標(biāo)教學(xué)。我希望你能獲得一些東西并掌握入門圖標(biāo)設(shè)計(jì)的正確姿勢(shì)。

當(dāng)前文章：企業(yè)網(wǎng)站設(shè)計(jì)圖標(biāo)應(yīng)用程序詳細(xì)信息
文章位置：http://www.rwnh.cn/news13/321063.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、響應(yīng)式網(wǎng)站、網(wǎng)站排名、網(wǎng)站制作、面包屑導(dǎo)航、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)