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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.圖標(biāo)畫布

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

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

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

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

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

因此，如果內(nèi)部沒有特定的命名約定，或者程序員沒有特殊要求，我建議使用中文命名系統(tǒng)，因為大多數(shù)國內(nèi)程序員都會使用獲取圖標(biāo)的第二個名稱。

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

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

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

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

4.圖標(biāo)格式

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

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

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

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

矢量格式

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

1x使用PDF剪切iOS圖像

Android使用SVG的1x剪切圖表

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

結(jié)束

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

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

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

廣告

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