超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

圖標設計，你需要了解這些...

2021-4-12 ui設計分享達人

本文目錄

圖標風格匯總
圖標設計流程
案例講解
圖標資源輸出

01 常見圖標風格匯總

線性
面型
線面

1、線性

單色
雙色
漸變
不透明度
一筆成形
斷點

1.1單色

單色線性擁有簡潔、清晰的特性，在視覺層級上較低，適用于基礎功能圖標。b端較為常見，移動端常見在設置頁面或?qū)Ш綑谕ㄖ?、分享等圖標設計上。

1.2雙色

雙色線性在單色的基礎上豐富配色，解決了單色線性原本過于單調(diào)的問題，在提升趣味性的同時，也將視覺層級進行了提高，同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化，需要考慮是否符合產(chǎn)品風格及主流目標用戶審美。

1.3漸變

線性漸變還可以在用色上進行區(qū)分，簡潔的用色可以給人帶來科技、炫酷感，在車載ui中較常見。豐富的漸變配色則更適合運營入口設計，有著年輕化、熱烈的氛圍。

1.4不透明度

線性雙色可以和不透明度風格進行很好的比較，前者視覺更跳躍，個性更鮮明。而后者在使用時普適性更強，即豐富配色細節(jié)，又避免視覺過于跳躍（可以把它理解為同類色配色）。所以在大多數(shù)使用場景下，不透明度風格都是一個很好選擇。

1.5斷點

斷點風格有線性單色&雙色該有的個性，并且在線性雙色基礎上繼續(xù)提升趣味性，使用需要注意產(chǎn)品目標人群年齡段。

1.6一筆成型

該風格設計感和個性都極強，很考驗設計師對造型繪制的把控，功底不夠就很容易導致設計后出現(xiàn)識別問題。所以設計難度較大，且延展性較弱，難以表達復雜語義，使用需謹慎。

2、面性

單色
雙色
不透明度
晶白
磨砂玻璃
等軸側(cè)（2.5d）
漸變
新擬態(tài)
輕質(zhì)感
明暗質(zhì)感
寫實
抽象
卡通插畫
像素風格

面性與線性的區(qū)別在于前置視覺面積更大，整體視覺層級比線性高。下面部分和線性風格重疊的內(nèi)容就不贅述。

2.1單色

2.2雙色

2.3不透明度

面型不透明度風格，通過調(diào)節(jié)前后不透明度可以帶來較強的空間感，使用場景較廣泛。

2.4晶白

晶白嚴格來說也算質(zhì)感圖標（白色質(zhì)感）的一種，常見于品類圖標設計，通過透明度、投影、漸變等參數(shù)調(diào)節(jié)，使整體立體感和空間感都很強。

2.5磨砂玻璃

又叫毛玻璃風格，是通過背景模糊，或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設計。

2.6等軸側(cè)

也叫2.5d，有很強的趣味性，及識別度，適合重要入口或運營設計。但這類風格較為卡通，且表現(xiàn)花哨。使用需要注意應用場景及目標人群年齡段，避免干擾信息閱讀和不符和產(chǎn)品風格。

2.7漸變

這類風格可以很好的吸引用戶注意力，在電商、美食類產(chǎn)品中較常見，主要注意配色干凈協(xié)調(diào)。

2.8新擬態(tài)（Neumorphism）

新擬態(tài)圖標色彩相對單一，與背景融合度較高，通過高光、投影表現(xiàn)一定的立體感。通常是整個產(chǎn)品就是新擬態(tài)風格時才使用。所以該風格局限性較大，再有這類風格與背景對比較弱，無障設計問題較大。

2.9輕質(zhì)感

通過大量漸變、投影來表現(xiàn)立體感，整體風格偏年輕化，常見在教育類產(chǎn)品中，使用注意配色干凈和諧。

2.10明暗質(zhì)感

通過調(diào)節(jié)同一色相不同明度、飽和度來營造前后空間感，整體風格統(tǒng)一。

2.11寫實

這類圖標特點很明顯，有極高的識別度，目前美團外賣品類區(qū)入口就是該風格，整體偏年輕化。主要考驗設計師造型繪制、技法表現(xiàn)能力。

2.12抽象

通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術（裝飾）價值更大，不追求識別度，美觀即可。

2.13卡通插畫

這類風格既可以做圖標又可以做空狀態(tài)插圖，設計美觀有特色即可。

2.14像素風格

這類移動端界面較少見，目前只在一個海外電商產(chǎn)品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。

3、線面

線面
描邊插畫

3.1線面

和線性雙色圖標類似，趣味性較強，具備個性化特點，可以做Tab選中狀態(tài)。

3.2描邊插畫

類似卡通插畫，在卡通插畫基礎上加入描邊。同樣顏色，在一些特定的前后交接處利用線條做區(qū)分，算是多一種設計表現(xiàn)形式，同樣美觀有特色即可。

4性格

粗線
細線
圓角
直角

4.1粗線

力量感、穩(wěn)重、男性等感受

4.2細線

品質(zhì)感、精致、女性化

4.3圓角

安全、親和、年輕

4.4直角

嚴謹、正式、果斷利落

由于圖標風格繁多，所以以上列舉并不包含所有圖標風格。

02 圖標設計流程

明確語義
關鍵詞詳解發(fā)散
確定風格
提取造型
創(chuàng)意輸出

1、明確語義

圖標存在的目的是起引導作用，在豐富頁面視覺的同時，幫助用戶更快的獲取信息（當然圖標的使用意義還有很多）。設計師在將文字翻譯成圖標前，必須先理解其文字含義。因為最終呈現(xiàn)的圖標，需要用戶一眼能準確反翻譯其中含義（藝術抽象、裝飾類圖標除外）。

在C端設計中，以Tab為例，一些常見文案：首頁、分類、發(fā)現(xiàn)、我的，這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說，目前在做一款網(wǎng)站搭建工具，后臺常會需要設計組件及對應的圖標，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標，在一定程度上會比較難精準傳達文案。

2、關鍵詞詳解發(fā)散

這一步有點類似情緒版使用，但不同的是：我們需要將確定的詞（A)進行詳細解釋，再將解釋文案中關鍵的詞語進行發(fā)散，得出一系列相關聯(lián)的詞（A1、A2、A3…）。有時間還可以根據(jù)這些詞找到對應的圖片，再看在這些相關聯(lián)的圖片中，有哪些細節(jié)可以傳遞最開始我們確定的那個詞（A）的意思。

3、確定風格

我們可以借助情緒版，根據(jù)產(chǎn)品定位和目標用戶描述，再結合應用場景，在目前已有的風格中找到符合產(chǎn)品氣質(zhì)，符合當前模塊視覺層級的圖標風格。

前面我們已經(jīng)了解了目前常見的圖標風格有三大類：線性、面型、線面，其中還有很多細分，比如在線性中又分粗線（沉穩(wěn)、力量）、細線（品質(zhì)）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創(chuàng)意前期，我們將每個點合理進行隨機組合（如下圖）即可創(chuàng)造一種更新穎的風格。

4、提取造型

經(jīng)過關鍵詞詳解發(fā)散，其實我們已經(jīng)獲得了很細節(jié)點，接下來將這些細節(jié)點進行合理融合后，就可以得到代表同一語義但形式各異的基礎圖標樣式（此時還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細化）。

5、創(chuàng)意輸出

在設計執(zhí)行前我們需要先了解兩個大知識點：

圖標設計規(guī)范
圖標設計注意點

5.1圖標設計規(guī)范

常見圖標尺寸
圖標盒子使用

5.1.1、常見圖標尺寸

在界面圖標設計中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）

5.1.2、圖標盒子使用

什么是圖標盒子？其作用是什么？

圖標盒子即圖標約束網(wǎng)格，來源于Material design。使用圖標盒子有利于使我們創(chuàng)造的系列圖標保持規(guī)范與統(tǒng)一。

5.2圖標設計注意事項

簡潔美觀
易于識別
細節(jié)統(tǒng)一
像素對齊
視覺大小一致
飽滿透氣
融入品牌基因

1、簡潔美觀

圖標是否美觀，會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中，通常會盡量減少不必要的細節(jié)，降低圖標復雜度，來幫助用戶快速識別。當然圖標也有豐富細節(jié)的做法，常見在一些重要運營入口上。

2、易于識別

識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。

3、細節(jié)統(tǒng)一

在細節(jié)中包含：表現(xiàn)風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數(shù)等（不同風格圖標的細節(jié)不同，這里只是列舉部分），上述細節(jié)在系列圖標中都應保持一致。

4、像素對齊

在圖標繪制中，需盡量避免坐標位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點，以此保證最終導出的圖標是清晰的。

5、視覺大小一致

由于不同圖標外輪廓不同，就會導致哪怕在物理大小上相同的圖標（假設都是24x24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標盒子進行約束調(diào)整。

6、飽滿透氣

圖標的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細節(jié)。而是盡可能在形成風格的同時，簡化能影響識別度的關鍵筆畫，通過調(diào)節(jié)筆畫大小、長短、位置使圖標達到一個最平衡狀態(tài)。

以如下途牛_我的頁面_功能區(qū)圖標為例：

圖中標紅圖標就存在飽滿度不足，及內(nèi)部較擁擠的情況，第一感受是看起來不舒適，品質(zhì)感比較低。除此外，還存在如下問題：

圖標大小很明顯不一致
設計語言不統(tǒng)一，有圓角有直角
圖標風格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實心形式

7、融入品牌基因

在圖標中融入品牌基因可以有效的提升產(chǎn)品品牌感，作為高階設計師必備技能之一，常見提取維度：

顏色
設計語言
Logo輪廓

以我之前的豆果美食項目為例，提取到如下細節(jié)：

顏色：提取黃色、綠色兩類顏色

曲率（設計語言）：品牌Logo走線順滑、自然、圓潤，個性鮮明

分離（設計語言）：黃色區(qū)域與綠色區(qū)域雖不相交，但存在聯(lián)系。（分離間留白）

根據(jù)提取到的基因，最終得到如下兩套風格不同，但語言相同且都具備品牌感的圖標。

Logo輪廓：在圖標中融入品牌logo外輪廓（Google Play），或根據(jù)logo輪廓結合應用特性進行延展（Microsoft）。