手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

漫談UI設(shè)計中的圖標設(shè)計

2024-5-28 資深UI設(shè)計者

漫談UI設(shè)計中的圖標設(shè)計

本文共分為4大部分，根據(jù)圖標的使用場景，確定圖標的風格，在圖標中融入品牌元素，最終進行自我檢測。

在UI設(shè)計中，圖標的使用可以說是占了大壁江山，相信大家都知道圖標的重要性，一個優(yōu)秀的圖標比語言更吸引眼球更可視化，甚至跨越了語言的障礙，傳遞信息也非常的高效。

以下是我將要分享的流程節(jié)點：

根據(jù)圖標的使用場景 > 確定圖標的風格 > 在圖標中融入品牌元素 > 最終進行自我檢測

圖標的使用場景

在著手設(shè)計圖標之前，你得根據(jù)圖標的使用場景去選擇圖標的類型。先來看看圖標的使用場景：

1/ 應(yīng)用圖標

要在各個APP中脫穎而出，視覺上要夠搶眼；風格上能傳達行業(yè)屬性和品牌調(diào)性。

2/ 功能入口

作為流量分發(fā)的出口，很重要，體量感上要夠重、夠突出。

3/ TAB底部導航

雖然很重要，但常駐底部，可弱化。

4/ 列表流

處于次重點，視覺上次突出。

5/ 網(wǎng)格布局

處于次重點，視覺上次突出。

6/ 標題點綴

處于次重點，視覺上次突出。

7/ 輔助/裝飾

用于輔助裝飾作用，視覺上要最弱。

8/ 活動入口

如果作為一個主推的活動入口，要吸睛。

如上所示，圖標的使用場景大致可分為8大場景，每個場景對圖標都有不同的要求。

· 應(yīng)用圖標：夠搶眼
· 功能圖標：最突出
· 底部導航：可弱化
· 列表流/網(wǎng)格布局/標題點綴：次突出
· 輔助/裝飾：要最弱
· 活動入口：要吸睛

如何根據(jù)場景選擇圖標類型？

首先，無論是從全局還是從單個頁面來看，根據(jù)內(nèi)容由主到次，圖標也要相應(yīng)的由重到輕；
但是，在具體頁面中也要根據(jù)產(chǎn)品和營銷的需要去做具體的調(diào)整。
根據(jù)產(chǎn)品功能的優(yōu)先級別或者希望用戶關(guān)注的主次，圖標的風格也是：面性圖標>線面圖標>線性圖標。

圖標的風格

從圖標的使用場景可以大致確定我們的圖標類型。這時候心里至少要有個方向，知道我們的圖標體量感是什么樣的。然后，我們要開始著手去設(shè)計圖標的風格。當我接觸一些新的設(shè)計師時，總是能聽到一些抱怨說： “圖標沒有什么好設(shè)計的，長得都一樣。”

其實不然，圖標是有很多風格的。下面我就列舉了38種圖標風格，給設(shè)計師們以靈感和參考。也便于我們在設(shè)計時，能盡快的選擇適合自己產(chǎn)品調(diào)性的風格。

面性圖標

1/ 剪影圖標

這是市場上比較最常見的一種設(shè)計風格，有很多設(shè)計風格都是在其基礎(chǔ)上的延伸。

2/ 微漸變圖標

圖標在有色背板之上；白色的漸變增加一些環(huán)境色。

3/ 雙色漸變圖標

一般采取鄰近色漸變，絢麗多彩。

4/ 雙色圖標

采取兩種顏色，注意用色比例不要均衡，要有主次。

5/ 不透明度圖標

圖標的少部分色塊調(diào)整不透明度，要注意比例不要均衡，要有主次。

6/ 輕質(zhì)感圖標

比剪影多了些細節(jié)。

@Dea_n

7/ 輕擬物圖標

處于擬物和扁平中間，就是這種曖昧的感覺。

8/ 擬物圖標

直觀！真實！辨識度非常高！

9/ 圖片圖標

當圖形不能很好的表達或表達不具吸引力或?qū)嵨锬芨玫谋磉_產(chǎn)品調(diào)性時，也可以選擇使用實物圖片當作圖標。

10/ 文字圖標

當圖形不能很好的表達其含義或者用戶人群比較小白時，直接使用文字也是一種不錯的選擇。

11/ 圖文圖標

從某種意義上來說辨識度確實會很高。

12/ 折疊圖標

用顏色的細微變化來做出紙張的折疊效果。

13/ 折紙風圖標

用視覺手法模擬折紙的視覺效果。

14/ 折紙陰影圖標

部分圖形銜接處使用少量陰影體現(xiàn)折紙效果。

15/ 插畫圖標

插畫圖標的采用，比較個性化！另外較多的細節(jié)，也使其更突出！

16/ 疊加圖標

將一組圖層進行疊加，形成豐富的層次感，視覺表現(xiàn)力比較豐富，一般比較適合應(yīng)用圖標。

17/ 長投影圖標

曾經(jīng)也是風靡過的網(wǎng)紅。

18/ 像素圖標

在UI中確實少用，除非要打造出特有或復古的風格。沒有找到合適的例子。

19/ YOGA風格圖標

設(shè)計師Yoga自創(chuàng)的一種風格，主要以漸變的穿插和切割為主的一種圖形設(shè)計模式，個性鮮明，色彩大膽，是繼MBE風格后的一種新的設(shè)計潮流。

20/ 2.5D圖標

比普通圖標更具有沖擊力、比3D圖標設(shè)計難度更低，但是也不失立體效果，能為界面增添更多視覺感受。

21/ 低面建模

用色塊來進行二維、三維的裝飾表達。風格很強，很獨特。沒找到合適的產(chǎn)品，大概就是如下的樣子。

22/ 擴大圖標

使用背板對圖標做一些遮擋，保留一些想象的空間和延展性。

23/ 背板的設(shè)計

在圖標上玩不出啥花樣了，也可以對背板做一些個性化的設(shè)計。

24/ 其他歡迎大家補充哦～

線性圖標

1/ 傳統(tǒng)線性圖標

先來看看傳統(tǒng)的線性圖標，這也是使用最多的一種圖標類型。隨處可見。

2/ 粗線圖標

較適用于年輕化用戶人群。

@孔晨

3/ 直角圖標

棱角分明，比較硬朗、冷峻，適合工具類、時尚類。

4/ 斷點圖標

形狀拼接處斷點，相比傳統(tǒng)的封閉式，多了些可以品味的細節(jié)。

5/ 高光圖標

利用點線來模擬高光的效果，使圖標更豐富。

@孔晨

6/ 中國風圖標

利用中國漢字筆畫而組成的圖標，非常具有傳統(tǒng)手工藝人的氣質(zhì)，很符合其產(chǎn)品調(diào)性。

7/ 一筆速寫圖標

專門從事圖形和圖標設(shè)計的設(shè)計機構(gòu)Differantly Studio。其創(chuàng)作者的風格：以一筆速寫的手法繪制圖標，一筆成型、簡潔概括事物最鮮明的特征，頗具創(chuàng)新性和趣味性！

8/ 雙色圖標

利用輔色來豐富圖標，輔色面積占比20%即可，不可太多。

9/ 多色圖標

有時，為了追求一些個性化，也可以突破傳統(tǒng)，慎用。

10/ 插畫圖標

相對比較復雜，當內(nèi)容很少時，可以考慮此方法，慎用。

線面結(jié)合圖標

1/ 線面結(jié)合圖標

相較于面和線，線面結(jié)合可以打造更多的細節(jié)層次感，在視覺上可以作出更多的差異化。

2/ MBE風格圖標

很流行的一種風格，此風格的作者是法國設(shè)計師MBE，2015年底他在dribbble上發(fā)布了此風格的一系列作品，從線性Q版卡通畫演變而來。配色大膽、明亮、飽和度高、適合低齡兒童類產(chǎn)品。

3/ 微投影圖標

利用同色系來給圖標做一個淺淺的投影效果。MBE的簡化版。

4/ 面性點綴圖標

圖標的少部分采用色塊的形式進行點綴。

5/ 線+輕擬物圖標

詞窮了，不知道取啥名字了，反正就是下面這種形式的，線+輕擬物的趕腳….

在圖標中融入品牌元素

為什么要在圖標中融入品牌元素呢？因為我們大部分的人做的APP都不是用戶量巨大的APP（如微信），我們需要通過融入品牌元素的手段去提升產(chǎn)品的辨識度，增加產(chǎn)品的特色。而微信這種擁有強大用戶量的產(chǎn)品，打造產(chǎn)品的品牌特色已經(jīng)不是他們的強烈需求，他們會更注重圖標本身的含義。

在圖標中融入品牌元素方法：

1/ 品牌logo的直接應(yīng)用

在底部導航中，運用品牌Logo作為首頁的圖標。