組應用程序中的圖標規范

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

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

1.圖標的大小

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

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

2.圖標的樣式

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

在我的設計過程中，我通常將圖標放在項目的最后并開始設計。原因是圖標的視覺風格取決于位置和環境。它是“第一個界面風格，然后是圖標風格”。

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

圖標的不同狀態

產品中的圖標除了用作裝飾外，通常可用作按鈕。每個應用程序都有大量用于單擊和交互的圖標，例如底部導航欄，頭部消息圖標?等。

當一個圖標可以被操縱時，我們需要注意它的狀態變化。例如，從導航欄圖標，常規選擇狀態是更改顏色，但越來越多的應用程序將在選定狀態下采用不同的設計樣式，并通過更豐富的樣式性能增強可見性。

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

圖標標簽和切割

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

應用程序圖標的導出已在前一章中提及，因此以下主要基于工具圖標的說明。

1.圖標的邊框

我們將回到第2章中工具圖標的規范。當我們確定圖標的大小時，我們不希望設計圖形以適應大小，而是使用網格系統來定義它們的大小。

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

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

2.圖標畫布

有很多協作工具可以幫助我們標記和剪切，例如Blue Lake? Zeplin。只要我們上傳設計草稿，程序員就可以獲得與圖標對應的剪切圖。

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

3.圖標的名稱

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

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

因此，如果內部沒有特定的命名約定，或者程序員沒有特殊要求，我建議使用中文命名系統，因為大多數國內程序員都會使用獲取圖標的第二個名稱。

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

設置_錢包_高亮@1x.png
動態_評論_默認@1x.png
登錄_按鈕_點擊@2x.png

當然，這不是唯一準確的命名方法。我們可以根據實際場景進行調整，但我們必須記住，圖標的名稱是為了方便我們的搜索

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

4.圖標格式

上一章中啟動圖標的導出格式將根據不同的設備?場景導出不同的大小，并使用PNG格式。不用擔心，工具圖標與設備不同，但您不需要導出這么多規格。我們來談談這兩個圖標的導出類型。

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

此規范對iOS和Android都很常見。雖然有超過3x的設備，但這些設備只需要調用3x規格。

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

矢量格式

導出3種類型的圖標很麻煩，位圖往往會占用大量空間。因此，為了優化此問題，iOS和Android在以前的系統更新中默認支持矢量格式剪切文件：

1x使用PDF剪切iOS圖像

Android使用SVG的1x剪切圖表

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

結束

我相信這是整個網絡上最完整，最詳細的圖標教學。我希望你能獲得一些東西并掌握入門圖標設計的正確姿勢。

當前文章：企業網站設計圖標應用程序詳細信息
文章位置：http://www.js-pz168.com/news13/321063.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、響應式網站、網站排名、網站制作、面包屑導航、建站公司

廣告

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