首頁

掌握這3個方法,新手也能做出精致的圖標設(shè)計

lanlanwork 圖標設(shè)計文章及欣賞

你只需要做三件事情,就可以讓你做出足夠優(yōu)秀的作品

第一:找到合適的圖標素材

第二:增強設(shè)計素材的統(tǒng)一性

第三:給設(shè)計素材加入自己的想法

我們這次做的圖標分別為:通知、商城、發(fā)現(xiàn)、我的。

第一:找到合適的圖標素材

我就拿最常用的阿里巴巴圖標庫,打開網(wǎng)址,找通知圖標,直接下載第一頁,第 1 排第 2 個:

image.png

接下來是商城圖標,繼續(xù)搜索商城,我們選用第一頁,第 2 排第 2 個:

image.png

相同的方式,我們找到以下四個圖標的原始素材:

image.png

這里面我們需要注意,在找素材的時候,你至少需要找到一兩個不太一樣的圖標,否則整體就會比較普通,我們現(xiàn)在這樣看上去,第四個“我的”圖標,相對來說不一樣一點,至少沒那么常見:

image.png

第二:增強設(shè)計素材的統(tǒng)一性

有了素材之后,我們首先要讓他們看起來是一套的,所以在統(tǒng)一性上需要優(yōu)化,先優(yōu)化大小和線條粗細:

image.png

大小和粗細優(yōu)化完之后,我們再優(yōu)化下圓角統(tǒng)一性,現(xiàn)在很明顯,只有第二個圖標是圓潤的,其他的都是有點硬朗的,可以進行統(tǒng)一下:

image.png

直角圓角統(tǒng)一了之后,還有一個統(tǒng)一性就是斷線,只有第二個沒有斷開的設(shè)計,所以我們再把商城進行斷線處理:

image.png

第三:給設(shè)計素材加入自己的想法

大家要明白,雖然我們可以直接下載圖標素材,而且可以通過審美讓他們變得相對精致統(tǒng)一,但素材畢竟還是通用的,我們還是需要融入自己的想法和設(shè)計,不能完全依賴素材,舉一個最簡單的例子,“我的”這個圖標,他的腦袋是圓形的,那我們是不是可以把他改成矩形的?

image.png

比如一些細節(jié)的調(diào)整,像通知圖標,感覺有點禿,是不是可以讓中間伸出一點寬度來:

image.png

細微調(diào)整之后,如果覺得還不夠,我們還可以繼續(xù)添加新的設(shè)計語言,比如增加配色點綴:

image.png

就這樣,這幾個圖標,漸漸的就成為了你自己的作品!

我們在放適當?shù)陌b一下:

image.png

我們再對比一下原始的素材:

image.png

效果還是提升很大的!

所以,做任何事情,一定要講究方法,不能死腦筋,否則進步就很慢。

歡迎關(guān)注作者的微信公眾號:「菜心設(shè)計鋪」

 

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

 

 

應(yīng)用圖標 | 全面解析,助力設(shè)計出更優(yōu)質(zhì)的應(yīng)用圖標!

天宇 圖標設(shè)計文章及欣賞

編輯導語:各大APP的圖標都各有特點,圖標的設(shè)計也是一門學問。在這篇文章中,作者全面解析了各類APP圖標設(shè)計背后的用意,一起學習一下吧。

如果說一個人的臉面、衣著打扮是給陌生人的第一印象,那么APP的應(yīng)用圖標風格與氣質(zhì)就是留給新用戶的第一印象,關(guān)系著用戶是否對這個APP感興趣、是否會打開應(yīng)用介紹、是否會點擊下載按鈕起著決定性的作用。

一個好的應(yīng)用圖標有著無限可能,無形中對用戶產(chǎn)生強大的吸引力,并有一種想要了解的沖動,況且圖形本身就能讓人充分發(fā)揮想象力,這就是為什么不管在哪個應(yīng)用市場第一眼看到的是應(yīng)用圖標,而非應(yīng)用名稱。

在一部手機就能解決很多問題的互聯(lián)網(wǎng)時代,相信每個人都有下載幾十上百個APP,琳瑯滿目的列表,應(yīng)用圖標是否能在第一時間抓住用戶眼球(目標明確或鐵粉除外)非常重要,一個視覺傳達清晰且有吸引力的圖標能提升用戶點擊率,即便用戶只使用過一次,相對來說,印象也會更深刻。

本文根據(jù)筆者對大量應(yīng)用圖標的分析、結(jié)合設(shè)計準則進行總結(jié),希望能幫助大家在設(shè)計過程中規(guī)避掉一些常見的問題,歡迎一起探討、取長補短、共同進步。

分享目錄

  1. 四大設(shè)計原則
  2. 色彩的表現(xiàn)形式
  3. 主體圖形分類
  4. 背景圖案及元素
  5. 主體圖形的表現(xiàn)手法
  6. 應(yīng)用圖標設(shè)計流程
  7. 總結(jié)

一、四大設(shè)計原則

應(yīng)用圖標代表產(chǎn)品的外在形象,設(shè)計的精美與否決定著用戶的第一印象,是否產(chǎn)生打開的欲望跟當前圖標的視覺所傳達的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標雖然不同于設(shè)計LOGO,表現(xiàn)方式也千變?nèi)f化,但必定有自身的設(shè)計準則要去遵守,利用設(shè)計的手段將視覺傳播的價值最大化。

1. 可識別性

首先,應(yīng)用圖標需要盡量簡約。過于復雜的圖標會增加用戶的理解成本、甚至誤導用戶,但如果過于追求簡約,缺乏細節(jié)、個性化以及必要的隱喻信息,也會因過于單調(diào),造成表意不明確等問題。

簡約并非簡單,設(shè)計師需要通過專業(yè)的知識進行合理的簡化,以提升應(yīng)用圖標的設(shè)計品質(zhì),方便用戶在不同場景中都能清晰的辨認。其次,需表意明確、易于理解。

應(yīng)用圖標代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢,要讓用戶第一眼就能識別出所代表的含義,貼近用戶的心理預期。

簡約易識別是應(yīng)用圖標必備的基礎(chǔ)屬性之一,這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標主視覺的原因,因為logo設(shè)計考慮到了方方面面以及后續(xù)延展的問題,即便有些logo較為復雜,也會通過提取局部元素、吉祥物、主體色等方式來強化應(yīng)用圖標屬性,給用戶形成獨特的記憶,以提升應(yīng)用的下載量和使用率。

2. 關(guān)聯(lián)性

應(yīng)用圖標應(yīng)該與產(chǎn)品的屬性、品牌有極強的關(guān)聯(lián)性,通過品牌延展賦予產(chǎn)品更強的生命力,讓用戶從接觸應(yīng)用圖標的第一眼開始、再到后面的使用,整個過程始終都能保持清晰且統(tǒng)一的品牌認知,通過和諧統(tǒng)一的視覺效果,帶來更好的用戶體驗。

應(yīng)用圖標需要與品牌之間必須保持高度的一致,著重從以下幾點體現(xiàn):

1)LOGO

毫無疑問,用品牌logo作為主體圖形是最佳選擇,結(jié)合品牌色搭配使用,能將產(chǎn)品核心理念、品牌形象的傳播效果達到極致,在APP應(yīng)用市場中,大家會發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標的主視覺圖形。

2)品牌色

品牌色即主體色,將貫穿APP所有頁面的元素組件。眾所周知,每種顏色都有其特定的含義,能傳遞給用戶不同的心理感受。用主體色作為應(yīng)用圖標的背景色,可以烘托出產(chǎn)品的情感氛圍,并與進入應(yīng)用后的主體色遙相呼應(yīng),以最小的視覺跳躍性將前后關(guān)聯(lián),強化用戶對產(chǎn)品的記憶感知。

3)IP/吉祥物

吉祥物屬于品牌logo延展的一部分, 也是產(chǎn)品的靈魂。當logo較為復雜時,因移動設(shè)備應(yīng)用圖標位置空間有限,logo細節(jié)無法在短時間被用戶捕捉,不宜展示時,使用IP/吉祥物或其局部元素代替也是不錯的選擇。

4)產(chǎn)品名稱

如果說logo是產(chǎn)品的臉面,通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子,那么名稱的出現(xiàn)就相當于產(chǎn)品主動進行了自我介紹,并讓用戶知道如何稱呼它。

將產(chǎn)品名稱作為應(yīng)用圖標需謹慎使用:首先,文字傳達的信息量有限:其次,用戶對于圖形的理解效率要優(yōu)于文字;再者,應(yīng)用圖標都會有對應(yīng)的產(chǎn)品名稱展示(應(yīng)用市場在右、桌面在下方),多少有些信息重復。

所以大家見到的應(yīng)用圖標主體是產(chǎn)品名稱的不外乎兩種情況,一種是產(chǎn)品本身將名稱設(shè)計成字體logo,例如美團、懶飯;另一種是將產(chǎn)品名稱作為logo的輔助信息提示,例如繽紛生活。

以上是應(yīng)用圖標與品牌屬性關(guān)聯(lián)最常見的四種方式,在設(shè)計中可靈活搭配,使用兩種及以上的方式組合,能將品牌傳播的途徑發(fā)揮到最大值。

3. 差異化

筆者上小學時,曾經(jīng)在一次彩鉛繪畫作業(yè)中得到了老師的真心夸贊,但內(nèi)心卻備受打擊。老師對著我畫的桃子說“這西紅柿畫的太像了”。

舉這個例子似乎并不恰當,但結(jié)果是驚人的相似,筆者想要陳述的一個觀點是,不要讓你辛苦做出的設(shè)計成為別人的嫁衣,讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。

目前,應(yīng)用市場中的APP數(shù)量巨大,且還處于增長的趨勢,同行業(yè)的圖標設(shè)計同質(zhì)化相當嚴重。想要讓自身產(chǎn)品應(yīng)用圖標脫穎而出,就有必要在設(shè)計之前做好競品分析,借鑒競品的優(yōu)點,在突出自身產(chǎn)品核心特征、屬性的基礎(chǔ)上,還要用不同的表現(xiàn)手法突出其差異性,給用戶留下獨特的印象,避免同質(zhì)化。

4. 可用性

應(yīng)用圖標在設(shè)計完成之后(測試小組)、上線后(用戶反饋)進行可用性測試,主要針對圖標對用戶的吸引力、識別度等問題作進一步優(yōu)化,以確保圖標在不同場景中都能被用戶清晰識別并提升印象。

雖然可用性測試存在設(shè)計之后,但這一環(huán)節(jié)至關(guān)重要,它決定著產(chǎn)品的下載量以及使用率。

二、圖標顏色的表現(xiàn)形式

1. 單色圖標

單色圖標通常以品牌色作為背景色、logo以反白的形式呈現(xiàn),既能突出品牌色、還能用于烘托主體圖形,不過這種方式僅適合色值單一的logo,多色值可能會與背景色產(chǎn)生融合或色彩反差太大影響視覺傳達效果。另外,如果logo視覺重量較大,也可使用白色背景+原品牌色logo,這樣會更直觀。

單色應(yīng)用圖標雖然色彩比較單一、表現(xiàn)形式也受到局限,但視覺清晰、簡潔且識別性強,如果能運用其他設(shè)計手法豐富圖標細節(jié)就再好不過了。

2. 多色圖標

多色圖標使用了兩種及以上的顏色,更多是直接使原多色彩的logo圖形+白色背景,無需任何加工,控制好尺寸規(guī)范就行。如果是運營推廣所需,如春節(jié)、618、雙11等活動,會對應(yīng)用圖標加以其他色彩烘托、點綴元素或標簽等,色彩就會更多,但一般都具有時效性,活動過期即圖標復原。

多色圖標的細節(jié)、層次更加豐富,設(shè)計時確保各色彩搭配協(xié)調(diào),一旦因色彩過多造成視覺混亂,就得不償失了。

3. 漸變圖標

無論是單色還是多色,添加漸變會讓應(yīng)用圖標更加細膩、耐看。漸變的表現(xiàn)手法應(yīng)用廣泛,簡單的漸變能讓圖標細節(jié)豐富,同時也具備空間感和微立體感。

設(shè)計漸變色圖標需注意圖形銜接處的對比度,花里胡哨的漸變色會拉低品質(zhì)感,要確保色彩的和諧,讓圖標視覺清晰且容易識別。

4. 顏色疊加

單色、多色或是漸變都可通過調(diào)整不透明度、圖層疊加的方式來豐富應(yīng)用圖標細節(jié),相比純粹的漸變,立體感和空間感更強。使用顏色疊加需注意色彩對比及明暗關(guān)系,否則會衍生出臟亂的顏色。

5. 色環(huán)的運用

環(huán)形構(gòu)圖為主,由多個元素復制并以統(tǒng)一的中心點、旋轉(zhuǎn)角度,旋轉(zhuǎn)衍生出一個主體圖形。這種應(yīng)用圖標的設(shè)計構(gòu)圖飽滿、色彩豐富,能給用戶傳遞出輕松愉快的視覺體驗。

需要注意的是,由于顏色較多,至少在三種顏色及以上,否則無法構(gòu)成色環(huán)類的主體圖形(錯覺)。如果沒有超強的配色功底,最好按照色環(huán)的順序依次取色,即便沒有太大的優(yōu)勢,但至少不會出錯。

三、主體圖形的分類

一個好的應(yīng)用圖標應(yīng)該是多元素、多信息結(jié)合運用,才能達到更好的效果。雖然大部分主體圖形使用了logo,但并不影響設(shè)計師們對其進行拆解,提取局部元素、色彩、名稱等信息進行二次創(chuàng)作,從原則上來說,是一次線上logo的設(shè)計。

應(yīng)用圖標種類繁多,切不可盲目跟風,需經(jīng)過認真的分析、研究,找到最適合自身產(chǎn)品的才是最重要的,且每種類型并非獨立,在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1)單中文字體

僅次于圖形logo的表現(xiàn)方式,通常會在產(chǎn)品名稱中提取一個具有代表性的文字對筆畫、結(jié)構(gòu)等進行再設(shè)計?;趪宋幕膬?yōu)勢以及對漢字的敏感度,既能降低用戶對應(yīng)用圖標的認知成本、還能根據(jù)產(chǎn)品特性設(shè)計出差異化的視覺效果。

不過因為文字筆畫的原因,單個文字提取難度較大,避免信息傳遞有誤或影響識別度,建議選擇筆畫較少且具有特性/代表性的文字,若達不到條件,最好選擇其他表現(xiàn)方式。

2)多中文字體

使用兩個及以上漢字,大多直接將產(chǎn)品名稱用在圖當中,對用戶來說更容易記憶,有利于品牌推廣。相比單字體,設(shè)計感會受到一定的局限,不宜做過于夸張的表現(xiàn)方式,因文字較多,設(shè)計時一定要注意文字的協(xié)調(diào)與可讀性。

多文字圖標建議將字數(shù)控制在2~6個范圍內(nèi),3字以內(nèi)一行顯示,超過3字即兩行顯示且最多不超過兩行,否則會影響圖標的識別效果。

3)中文、圖形組合

適當添加帶有產(chǎn)品特性的輔助圖形,用引導或指向性的方式對文字進行強調(diào),圖標細節(jié)會更豐富,可以突出產(chǎn)品想要傳達的信息、以及不同的氣質(zhì),還能增加圖標的形式感和趣味性。注意添加的圖形不要過于復雜,不然會讓信息混亂,適得其反。

4)中文圖形化

根據(jù)單個字體筆畫的特點進行巧妙的變形或延展,會讓你的應(yīng)用圖標更具設(shè)計感、品質(zhì)好。這種方式對設(shè)計功底的要求較高,需要確保字體的識別度,切勿霸王硬上弓,如果是為了設(shè)計而設(shè)計,就違背的信息傳播的初衷。

5)中文、IP形象組合

由產(chǎn)品名稱和IP形象組合而成,這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗,讓產(chǎn)品更具親和力,拉近與用戶之間的關(guān)系。例如,IP的喜、怒、哀、樂表情變化分別對應(yīng)用戶不同的心理感受,以加深用戶對產(chǎn)品的印象及品牌認知。

2. 英文字體

1)單英文字體

單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進行創(chuàng)意設(shè)計,跟中文字體相比,基于字母本身線條的簡潔及流暢性,再結(jié)合產(chǎn)品特點,很容易設(shè)計出兼具美感、高識別度的應(yīng)用圖標。

需要明確一點,不管如何創(chuàng)意,也僅局限于在26個英文字母中選擇,如果想設(shè)計出差異化的應(yīng)用圖標,對設(shè)計師來說,是一個很大的挑戰(zhàn)。

2)多英文字體

跟多中文不同,中文產(chǎn)品名稱在移動端基本不會超出6個字,而全拼音或英文名則多達十幾位甚至更多,為了用戶能更好容易識別、記憶,依然是提取不同拼音或單詞的首字母(中文全稱)進行設(shè)計。

多英文的應(yīng)用圖標很很容易形成獨有的產(chǎn)品簡稱,更利于用戶記憶,但字母一定不要過多,如果無法刪減,那就只突出特定的2~4個字母。

3)其他類型

字母與圖形、IP形象組合以及字母圖形化,其表現(xiàn)方式、設(shè)計原則與中文字體圖標類似,這里不做過多闡述。

3. 數(shù)字符號

1)數(shù)字設(shè)計

人們對于數(shù)字來說是非常敏感的,不存在文化差異或認知誤區(qū),基于數(shù)字便于記憶且容易識別的特點,將數(shù)字圖形化后應(yīng)用到圖標當中,會讓產(chǎn)品具有親和力,有利于品牌傳播。單純的數(shù)字過于簡單,需增加一些細節(jié),豐富圖標層次,讓其具備獨特的記憶點,不然會顯得單調(diào)。

2)符號設(shè)計

每個符號都有特定的含義,因此,在選擇符號作為應(yīng)用圖標之前,首先需要了解清楚該符號是否能體現(xiàn)出產(chǎn)品屬性以及想要表達的意思,例如“¥”適合攢錢、理財相關(guān)的應(yīng)用,而“+-×÷”則適合用于計算器或數(shù)學相關(guān)的應(yīng)用;其次,符號跟數(shù)字一樣,都比較簡單,需經(jīng)過二次創(chuàng)作后才會使用。

4. 扁平化圖形

1)線性圖形

線性風格的應(yīng)用圖標能給人一種簡潔輕快的感覺,設(shè)計師通過提取產(chǎn)品的品牌信息、功能服務(wù)等進行創(chuàng)意設(shè)計,將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。

通常以反白的形式出現(xiàn),背景可以是單色、漸變色或加以輔助圖形點綴。

線性圖形非常適合文藝類簡約風格的應(yīng)用,通過不同的線條帶給用戶不同的心理感受,例如直線代表大方、專業(yè)、正直;斜線代表張力、速度;曲線代表流暢、飄逸及柔軟等。

設(shè)計時,切記圖形不能過于復雜,否則會影響其辨識度,增加用戶的認知成本,也不利于品牌推廣。

2)面性圖形

也可稱之為剪影圖形,根據(jù)產(chǎn)品屬性,將日常生活中被大眾所熟知的動物、植物、食品、工具、玩具…等事物進行簡化,通過刻畫事物的造型輪廓來形成獨立的剪影圖形。

高識別度的剪影圖形會讓整體看起來非常醒目,提高信息傳播的效率,只要控制好造型,即便把圖標縮到很小也能清晰辨認。

因現(xiàn)實世界中事務(wù)的復雜性,被提煉出的圖形如果細節(jié)過多會顯的復雜且不夠干練、細節(jié)過少則難以辨認,所以需要對圖形進行創(chuàng)意加工,最終以確保應(yīng)用圖標的功能和美感兼具。

3)幾何圖形

幾何圖形在應(yīng)用圖標中使用的很廣泛,可以是線性或面性,表現(xiàn)形式也非常豐富,利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創(chuàng)意圖形,帶給用戶簡約、現(xiàn)代、空間、熱鬧等不同的心理感受。

幾何圖形構(gòu)圖簡潔,設(shè)計形式豐富多樣,想設(shè)計出具備設(shè)計感和差異化的應(yīng)用圖標,很考驗設(shè)計師的創(chuàng)意能力。

5. 卡通形象

對純色剪影圖形增加太多細節(jié),無疑是將其“大卸八塊”,變成一堆零件,但通過多色、漸變、圖層樣式等表現(xiàn)手法設(shè)計成卡通形象,就完全不一樣了。

卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力,以及直觀且易于理解和記憶的特質(zhì),對品牌形象的塑造、傳播起到了很好作用。

在畫卡通形象時,需要注意產(chǎn)品主用戶群體的年齡段,切勿一開始就把活潑可愛作為卡通形象的代名詞,避免絕對低齡化的表達,同時需要設(shè)計師有一定的繪畫功底。

6. 擬人化

利用人體的局部元素,如眼睛、嘴巴、手足、頭部等,再結(jié)合常見的表情動作進行圖形化設(shè)計,相當于給原本冷冰冰的圖形賦予了生命力,傳達出不一樣的情感,而且用戶原本就對人體元素敏感度更高,更容易打動用戶并形成較強的記憶。

擬人化的應(yīng)用圖標會顯得親民,便于拉近與用戶之間的關(guān)系,適度在抽象的圖形上加入情感化(動作/表情)表達,能生動、形象的體現(xiàn)出產(chǎn)品獨有的特性。

如果想要較強的視覺沖擊力,建議元素不要過多,最好是對某個單一的元素作放大或特寫處理,讓用戶看到更多的細節(jié),也可用夸張、比喻、襯托等表現(xiàn)手法強化特點。

7. 擬物化

擬物化圖標使用的比較少,它更偏向于某種行業(yè)類型,例如工具、游戲類型的應(yīng)用,通過超接近于現(xiàn)實世界中的物體造型,基本不需要用戶思考,一眼就能理解,但也正因為這種特性,信息量的傳播受到很大局限,僅適合單一且大眾化的信息傳達。

在如今,想同時融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時代,顯然不太實用了。

四、背景圖案及元素

1. 圖形背景

應(yīng)用圖標背景通常以單色、漸變色居多,除此之外,還可以添加與主體圖形相呼應(yīng)的輔助圖形背景,以豐富圖標的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在,切勿過分表達,以免喧賓奪主。

2. 炫彩背景

當主體圖形的結(jié)構(gòu)、色彩不是很復雜,且產(chǎn)品面對的是年輕化用戶群體時,可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計出炫彩效果,色彩表現(xiàn)豐富的應(yīng)用圖標,能帶給用戶更強的視覺沖擊力。色彩可多但不可亂,需要把控好色彩之間的對比關(guān)系。

3. 運營標簽

常見于在特定的節(jié)日中,例如618、雙11、雙12及傳統(tǒng)節(jié)日等,產(chǎn)品會存在促銷、打折活動,為了更早的讓用戶知道,會在應(yīng)用圖標的某個區(qū)域以標簽的方式出現(xiàn),起到引導用戶的作用。

不過這種表現(xiàn)方式具有時效性,活動截止即圖標樣式復原。

4. 節(jié)日氛圍

通過配色或節(jié)日相關(guān)的元素點綴,營造出一種感同身受的節(jié)日氛圍。例如:春節(jié)期間,部分應(yīng)用圖標背景會調(diào)整為紅色,并使用燈籠、煙花、文案等元素點綴,制造出普天同慶、與用戶同樂的喜慶感,或者在高考期間鼓勵學生,少了套路、多了真誠,給用戶留下較深的印象。

五、主體圖形的表現(xiàn)手法

1. 對比

通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進行對比,形成強烈的反差效果,同時兼具張力和美感,這也是應(yīng)用圖標設(shè)計中很常見的技法表現(xiàn)之一。

2. 對稱

對稱在自然界中隨處可見,在互聯(lián)網(wǎng)設(shè)計中也是如此,應(yīng)用圖標中的主體圖形以對稱的方式呈現(xiàn),能給用戶平衡、和諧的感覺,也讓圖標更具有觀賞性。

3. 分割

將應(yīng)用圖標中的主體圖形分割,賦予不同的顏色、樣式等,明確層級劃分,可提升圖標的美感。例如:將色塊分割成不同的比例、形狀,就能組合成一個完整的熊貓圖形(百度搜“熊貓剪影”圖片)。

如果適合使用0.168黃金比例分割就再好不過了,這是被公認為最具美感的比例。

4. 重復

將相同或相近的圖形以某種規(guī)律連續(xù)性的排列,相比單調(diào)的圖形,會更加飽滿。重復性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點進行有序的排列,最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。

需要注意的是基礎(chǔ)圖形不能過于復雜,一定是有規(guī)律的重復,否則會讓圖形變的混亂,無法形成整體。

5. 重疊

在保證識別度清晰的前提下,將兩個或以上的元素相互重疊、交叉在一起,能形成前后左右的層級關(guān)系,制造空間感,同時也能將多個圖形關(guān)聯(lián)在一起,避免圖標元素零散或單調(diào),讓整體性更強,豐富用戶視覺感知。

6. 正負形

正負形也是常見的表現(xiàn)手法之一,利用正圖為底,通過減去底層挖空的方式突出(錯覺)負形,將產(chǎn)品特征、屬性及服務(wù)多途徑的傳達給用戶,可謂是“一石二鳥”。

正負形圖標能將信息傳播最大化,且設(shè)計感十足,好的正負形圖標能給用戶形成獨特的記憶點,但設(shè)計時需要注意正、負銜接的順暢度,否則無法清晰的傳播信息。

六、應(yīng)用圖標設(shè)計流程

1. 發(fā)散思維、尋找隱喻

通過產(chǎn)品屬性、功能或特點進行思維發(fā)散,例如:夏天,我們會想到空調(diào)、海灘、冰淇淋、比基尼、裙子(女性)、夜空等一系列相關(guān)聯(lián)的事和物,搜集起來并做好整理歸類,確定大致的設(shè)計方向。

2. 分析競品、避免同質(zhì)化

確定了大致的設(shè)計方向,就去找同行業(yè)、同類型或相似的應(yīng)用圖標分析其形狀、配色、組合類型等,取長補短,這也是避免同質(zhì)化非常重要的一個環(huán)節(jié),幫助自己在后續(xù)設(shè)計出具備差異化的應(yīng)用圖標做鋪墊。

3. 提取關(guān)鍵詞

可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達的核心信息,并提煉出關(guān)鍵詞。切記,關(guān)鍵詞不可脫離帶水、表意不明確,一定要夠精煉、能表達出核心內(nèi)容。關(guān)鍵詞在精不在多,如果太多,需要通過層層遞進,篩選出“一主三輔”,要知道這關(guān)系著后續(xù)應(yīng)用圖標傳達信息的精準度。

4. 圖標繪制

將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形,進行視覺化提煉,這時應(yīng)用圖標的雛形已經(jīng)形成,再結(jié)合前面所提到的圖形分類、表現(xiàn)手法以及注意事項等,進入圖標繪制流程。關(guān)于圖標設(shè)計規(guī)范及原則,在之前的《圖標篇 | 圖標設(shè)計必備的基礎(chǔ)知識!》文章中有詳細說明,這里不做闡述。

5. 細節(jié)處理

基本圖形繪制完成后,通過添加點綴、輔助圖形、背景處理等方式豐富圖標細節(jié),進行精細化處理,使其更精致,具備高識別度及品質(zhì)感。

6. 適用性測試

分別通過移動端應(yīng)用商店列表、應(yīng)用詳情、設(shè)置中應(yīng)用列表、桌面以及WEB商店等,對不同位置的大小、不同的桌面背景進行虛擬測試,以確保在不同場景中都能被用戶高度識別,如果這些問題等著被用戶發(fā)現(xiàn),很可能給產(chǎn)品帶來不利的影響。

7. 輸出切圖

需要對iOS和Android系統(tǒng)各輸出一套圖標,iOS只需一個1024px的切圖便能適配所有,且無需設(shè)定圓角。Android則需要多套切圖規(guī)范,如512px、198px、144px、96px、72px、48px,圓角半徑以512px為基準設(shè)定為90px(參考值)。

這些固定的尺寸規(guī)范并不在技術(shù)能力范疇,如果實在不清楚,需要用時就“百度一下”一大把,或直接找開發(fā)人員拿尺寸都不是難事。

七、總結(jié)

首先,筆者要感謝耐心看到這里的小伙伴,希望總結(jié)的內(nèi)容能幫到大家,在前期設(shè)計中作為資料參考,避免出現(xiàn)常見的問題,防止進入誤區(qū)。

其次,要想設(shè)計出優(yōu)秀的應(yīng)用圖標僅看上述內(nèi)容是遠遠不夠的,少不了平時的多看、多練、多思考,需日積月累,逐漸提升自己的視覺審美、造型提煉、執(zhí)行效率等多方面設(shè)計能力。

應(yīng)用圖標的總結(jié)分享就到這里了,對你有幫助的話就給筆者點個贊吧,如果有不同意見,歡迎在評論區(qū)交流或指正,以便查漏補缺,共同進步。

#專欄作家#

大漠飛鷹;公眾號:能量眼球,人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘,利用設(shè)計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

扁平化設(shè)計終結(jié)?新趨勢來了?

天宇 圖標設(shè)計文章及欣賞

扁平化設(shè)計這一趨勢已經(jīng)流行了挺長時間,而現(xiàn)在,設(shè)計風向似乎要有所轉(zhuǎn)變了,這或許可以從一些設(shè)計案例中透露出來。這篇文章里,作者就從案例出發(fā),展示了設(shè)計趨勢的演變,一起來看看吧。

設(shè)計趨勢來來去去,但一個普遍的趨勢已經(jīng)流行了很長時間,那就是扁平化設(shè)計,現(xiàn)在也幾乎是無處不在,UI中的按鈕,Logo,圖形設(shè)計等等。

最近感覺設(shè)計風向有點變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉(zhuǎn)變。

在這篇文章里,我主要聚焦在UI設(shè)計領(lǐng)域,看看設(shè)計趨勢在這方面都經(jīng)歷了哪些變化。

一、扁平化設(shè)計趨勢是怎么興起的?

2013 年蘋果推出 iOS 7 后,扁平化設(shè)計火得一塌糊涂,界面設(shè)計方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素,但其作為行業(yè)風向標的影響力依然無人能及。

從擬物到扁平,iOS 7 帶來了革命性的設(shè)計語言飛躍,顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。

看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實改成這樣是有道理的,畢竟擬物設(shè)計當初是為了讓用戶更快上手新界面,現(xiàn)在大家都習慣了,設(shè)計語言也需要更新迭代了。

十年過去了,絕大部分現(xiàn)代界面設(shè)計依然在用這種設(shè)計語言。然而,隨著設(shè)計逐漸追求更多復雜性和立體感(是的,又是3D,回到擬物設(shè)計),一些方面也開始出現(xiàn)變化。讓我們來看看幾個近期的例子。

值得說的是,盡管蘋果公司在引領(lǐng)扁平化設(shè)計趨勢方面發(fā)揮了重要作用,但其實靈感還是來自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個用扁平化設(shè)計的大廠。

對這段歷史感興趣的可以看看這篇10年前寫的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設(shè)計刷新

先一起看看最近的一個大廠設(shè)計改版案例,Reddit最近刷新了它的Logo。你能從上面的圖中看到,相比于舊版,新的設(shè)計有了一些3D風格化。

一直以來,扁平化logo是主流,但隨著像Pentagram這樣的設(shè)計大廠都開始探索3D化設(shè)計風格,預示著扁平化的時代就快要過去了。

現(xiàn)代的品牌logo設(shè)計大多是扁平的,因為這樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設(shè)計。

三、MacOS Big Sur 圖標

回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標風格。我個人認為,這是在細節(jié)設(shè)計上搭配更多3D效果這股趨勢的源頭,我在網(wǎng)上看到了很多這樣的討論。

從 Big Sur 開始,蘋果就在圖標上下功夫,給原生應(yīng)用圖標加料,讓它們看起來不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個圖標更有立體感。

一看蘋果都整 3D 了,不少第三方應(yīng)用開發(fā)商也坐不住了,紛紛改起了自家圖標,看起來更立體了。

蘋果在界面設(shè)計上向來引領(lǐng)潮流,這次的新趨勢,又不知道多少公司和個人會跟著玩。

四、Airbnb 新版本設(shè)計

Airbnb在最近的夏冬主題設(shè)計更新里,玩了不少 3D 和復雜設(shè)計。就拿它們新出的“游客護照”來說吧,圖標就跟真“書”似的,點開交互還有翻書動畫,賊逼真。

游客護照打開后,頂部卡片加了陰影,看著更有立體感,一點都不扁了。

Airbnb 在其他地方也玩兒 3D 了,比如“最受歡迎”那個地方,評分都立體起來了,還有那個改版后的“選月份”的按鈕,做得跟真表盤似的。

最后,他們冬天的新版本里,插畫也搞起了等角投影風格,給你們看下面他們那個新版本宣傳片就知道了。

五、Shopify更新了設(shè)計系統(tǒng)

Shopify 對深受好評的設(shè)計系統(tǒng) Polaris 進行了重大更新,換了套新花樣!以前那些扁平的按鈕,現(xiàn)在縮小了,還更帶感了,按著賊舒服。

這次重設(shè)計也不是瞎改,當初設(shè)計團隊說扁平化做能讓界面干凈,理解簡單,用著還效率高??蓵r間一長,商家們就不樂意了,說這界面整得“沒勁”、“乏味”還“單調(diào)”。

改設(shè)計主要是為了把軟件界面打造成 “專業(yè)工具”,更加高大上。改動之后,按鈕在點擊時更爽了一些,就像商家們平時在用的物理按鍵一般。

探索的2種不同設(shè)計風格

總結(jié)

上面這些案例展示了現(xiàn)代設(shè)計趨勢的演變,從扁平化設(shè)計向更加注重細節(jié)的方向過渡。

扁平化設(shè)計固然擁有清晰高效等優(yōu)點,但現(xiàn)代設(shè)計更傾向于展現(xiàn)層次和深度。設(shè)計師和開發(fā)者應(yīng)當密切關(guān)注這一趨勢,并做好準備將相關(guān)元素融入自身系統(tǒng),尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。

設(shè)計趨勢真是一個輪回。

原文作者:Chan Karunaratne(本文翻譯已獲得作者的正式授權(quán))

譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設(shè)計師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

創(chuàng)造出眾的UI圖標:點亮你的界面

天宇 圖標設(shè)計文章及欣賞

在做產(chǎn)品設(shè)計的時候,UI界面更多是由設(shè)計師完成,產(chǎn)品僅是提供界面元素和布置,其他的由設(shè)計師發(fā)揮。但如果產(chǎn)品能了解更多設(shè)計相關(guān)的知識,在和設(shè)計師探討、分析時會更有針對性,也會讓產(chǎn)品的工作顯得更為專業(yè)。

在當今數(shù)字化時代,我們與各種移動應(yīng)用、網(wǎng)頁和軟件界面打交道,圖標就像是這些界面的明星。它們小巧玲瓏、獨具特色,扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標的定義、作用以及在用戶界面中的重要性。

一、UI圖標的定義和作用

A. UI圖標的定義

UI圖標是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設(shè)計元素。圖標通過簡單的形狀和圖像,向用戶傳遞信息和功能,并在界面中起到重要的導航和標識作用。

B. UI圖標的作用

  • 提供快速識別:UI圖標能夠以簡單直觀的方式展示功能和操作,使用戶迅速識別界面元素,快速完成操作。
  • 提升用戶體驗:UI圖標能夠使界面更加直觀、友好和易于使用,用戶無需過多猜測,更加自信地與界面互動。
  • 增加品牌識別度:UI圖標承載著品牌形象,設(shè)計合理的圖標能夠提升品牌的識別度和記憶性,促進用戶與品牌的情感連接。

C. UI圖標在用戶界面中的重要性

UI圖標在用戶界面設(shè)計中扮演著不可或缺的角色,其重要性體現(xiàn)在以下幾個方面:

  • 導航和標識功能:UI圖標通過視覺上的差異化,幫助用戶快速識別和定位所需的功能模塊,提供直觀導航,減少操作復雜度。
  • 美觀和統(tǒng)一性:精心設(shè)計的UI圖標能夠增加界面的美感,提升用戶體驗。通過一致性的圖標設(shè)計,整個界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺效果。
  • 信息傳遞效果:UI圖標通過形狀、顏色和圖像等視覺元素,能夠傳達具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
  • 增強品牌形象:UI圖標能夠?qū)⑵放菩蜗笕谌氲浇缑嬷校纬瑟毺氐钠放骑L格和個性,幫助品牌建立與用戶的情感聯(lián)系。

二、設(shè)計原則和要素

UI圖標設(shè)計是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站,還可以增強整體視覺效果。為了設(shè)計出高質(zhì)量的UI圖標,設(shè)計師需要遵循一些基本原則和要素。

A. 獨特性和可識別性

設(shè)計具有獨特特征的圖標 UI圖標應(yīng)該具有獨特的特征,使其能夠與其他圖標區(qū)分開來。設(shè)計師可以通過使用不同的形狀、顏色和風格來實現(xiàn)這一目標。同時,圖標的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

避免與其他圖標混淆 為了避免UI圖標與其他圖標混淆,設(shè)計師應(yīng)該確保圖標的形狀、顏色和風格與其他圖標有足夠的區(qū)別。如果圖標的形狀和顏色與其他圖標過于相似,用戶可能會難以區(qū)分它們的功能和意義,從而影響用戶的使用體驗。

B. 簡潔性和清晰性

追求簡潔的圖標設(shè)計 簡潔的圖標設(shè)計可以幫助用戶更快地理解和使用圖標。設(shè)計師應(yīng)該盡可能地簡化圖標的形狀和顏色,避免使用過多的細節(jié)和復雜的形狀。簡潔的圖標設(shè)計還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。

避免過度復雜化的細節(jié) 過度復雜化的細節(jié)可能會使圖標變得過于復雜和難以理解。設(shè)計師應(yīng)該避免使用過多的細節(jié)和復雜的形狀,以確保圖標的簡潔性和清晰性。同時,設(shè)計師也應(yīng)該確保圖標的形狀和顏色足夠明確,以便用戶能夠輕松地識別和理解圖標的功能和意義。

C. 一致性和統(tǒng)一性

維護整個UI界面的一致性風格 UI圖標應(yīng)該與整個UI界面的風格保持一致。設(shè)計師應(yīng)該確保圖標的形狀、顏色和風格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標的功能和意義,同時也可以增強應(yīng)用程序或網(wǎng)站的整體視覺效果。

使用相似的線條、顏色和風格 為了實現(xiàn)一致性和統(tǒng)一性,設(shè)計師應(yīng)該使用相似的線條、顏色和風格來設(shè)計圖標。這樣可以使圖標與整個UI界面的風格保持一致,同時也可以使圖標的形狀和顏色更加和諧統(tǒng)一。

D. 可視化傳達

明確圖標所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標,設(shè)計師應(yīng)該確保圖標的形狀和顏色能夠明確地傳達

使用適當?shù)男螤?、符號和顏色傳達信息 為了確保圖標能夠明確地傳達信息,設(shè)計師應(yīng)該使用適當?shù)男螤睢⒎柡皖伾?/p>

例如,一個圖標可能需要使用一個圓形作為基本形狀,同時使用一個代表性的符號來表示它的功能和意義。

同時,設(shè)計師也應(yīng)該確保圖標的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

E. 可縮放性和適應(yīng)性

使用矢量圖形實現(xiàn)圖標的可縮放性 為了確保圖標在不同屏幕和設(shè)備上的可用性,設(shè)計師應(yīng)該使用矢量圖形來實現(xiàn)圖標的可縮放性。

矢量圖形是一種基于數(shù)學公式的圖形,它們可以在不失真的情況下進行任意大小的縮放。

這意味著:即使圖標被放大或縮小,它們的形狀和顏色也不會發(fā)生變化。

確保在不同屏幕和設(shè)備上的可用性 為了確保圖標在不同屏幕和設(shè)備上的可用性,設(shè)計師應(yīng)該考慮圖標在不同分辨率和屏幕尺寸下的表現(xiàn)。

例如,設(shè)計師應(yīng)該確保圖標的大小和形狀適合不同屏幕和設(shè)備的顯示。

同時,設(shè)計師也應(yīng)該確保圖標的顏色在不同的屏幕和設(shè)備上都能夠保持一致,以幫助用戶更快地識別和理解圖標的功能和意義。

三、設(shè)計流程和技巧

UI圖標設(shè)計需要遵循一定的流程和技巧,以確保圖標的高質(zhì)量和可用性。

以下是一些常用的設(shè)計流程和技巧:

A. 需求分析和功能定義

在開始設(shè)計之前,設(shè)計師需要了解UI圖標的使用場景和目的。這可以幫助設(shè)計師確定圖標所代表的含義和功能,以確保圖標的準確性和可用性。

B. 創(chuàng)意和草圖階段

在進行創(chuàng)意和草圖階段,設(shè)計師應(yīng)該進行創(chuàng)意思維和頭腦風暴,以產(chǎn)生出多種不同的設(shè)計方案。同時,設(shè)計師也應(yīng)該從簡單的草圖開始構(gòu)思圖標設(shè)計,以確保圖標的可行性和可實現(xiàn)性。

C. 細化和完善設(shè)計

在細化和完善設(shè)計階段,設(shè)計師應(yīng)該使用矢量工具進行圖標設(shè)計,并重點關(guān)注細節(jié)和清晰度的提升。這可以幫助設(shè)計師創(chuàng)建出具有獨特特征的圖標,并確保圖標的可縮放性和適應(yīng)性。

D. 反饋和優(yōu)化

在反饋和優(yōu)化階段,設(shè)計師應(yīng)該向用戶和團隊收集反饋,并根據(jù)反饋進行圖標的優(yōu)化和調(diào)整。這可以幫助設(shè)計師確保圖標的準確性和可用性,并根據(jù)用戶的需求和期望進行調(diào)整和優(yōu)化。

四、設(shè)計最佳實踐和案例研究

UI圖標設(shè)計是一個重要的設(shè)計領(lǐng)域,它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標設(shè)計案例和分析。

A. 探索成功的UI圖標設(shè)計案例

成功的UI圖標設(shè)計案例可以幫助設(shè)計師了解和學習一些設(shè)計最佳實踐和技巧。成功的圖標有很多以下只列舉兩個圖標設(shè)計案例:

  1. Airbnb圖標:Airbnb是一個在線旅行房屋租賃平臺,它的圖標設(shè)計非常簡潔和具有代表性。Airbnb的圖標設(shè)計使用了一個圓形的形狀,并使用了一個代表性的符號來表示它的功能和意義。同時,Airbnb的圖標設(shè)計也非常簡潔,它只使用了少量的顏色和形狀,這使得圖標非常易于理解和使用。
  2. Apple的App Store圖標:Apple的App Store圖標采用了一個簡單明了的大字母”A”,代表了應(yīng)用程序。這個圖標的設(shè)計借鑒了蘋果公司的品牌風格,采用了簡潔、現(xiàn)代的風格,使其在界面中易于辨認。

B. 分析圖標設(shè)計背后的原理和決策

成功的UI圖標設(shè)計案例背后都有一些共同的原理和決策。

以下是一些分析圖標設(shè)計背后的原理和決策的方法:

  • 了解用戶的需求和期望:設(shè)計師應(yīng)該了解用戶的需求和期望,并根據(jù)用戶的需求和期望進行圖標設(shè)計。這可以幫助設(shè)計師創(chuàng)建出更加符合用戶需求和期望的圖標,從而提高圖標的可用性和易用性。
  • 遵循一致性和統(tǒng)一性原則:設(shè)計師應(yīng)該遵循一致性和統(tǒng)一性原則,使用相似的線條、顏色和風格來設(shè)計圖標。這可以幫助設(shè)計師創(chuàng)建出具有一致性和統(tǒng)一性的圖標,從而提高圖標的可視化傳達和可用性。
  • 避免過度復雜化的細節(jié):設(shè)計師應(yīng)該避免過度復雜化的細節(jié),追求簡潔的圖標設(shè)計。這可以幫助設(shè)計師創(chuàng)建出更加簡潔和易于理解的圖標,從而提高圖標的可用性和易用性。

五、最后

A. 總結(jié)UI圖標設(shè)計的重要性和原則

UI圖標在用戶界面中扮演著重要的角色,它們不僅能夠傳達信息和功能,還能夠增強用戶體驗和界面的美感。以下是一些重要的UI圖標設(shè)計原則:

  • 簡潔明了:使用必要的元素和形狀,避免過度復雜化的細節(jié)。
  • 可識別性:使圖標獨特、清晰、易于辨認,以便用戶快速理解其含義。
  • 一致性:與品牌風格相匹配,確保整個界面的視覺統(tǒng)一性。
  • 可擴展性:使用矢量圖形制作圖標,以便在不同尺寸和分辨率下保持清晰度。
  • 用戶反饋和測試:收集用戶的意見和建議,進行測試和調(diào)整,以提升圖標的質(zhì)量和效果。

B. 鼓勵設(shè)計師繼續(xù)探索和發(fā)展圖標設(shè)計技能

圖標設(shè)計是一個不斷發(fā)展和演進的領(lǐng)域。鼓勵設(shè)計師們繼續(xù)學習、實踐和探索,通過不斷嘗試新的技術(shù)和方法,提升自己的設(shè)計能力。以下是一些建議:

  • 深入研究:學習不同的圖標設(shè)計風格和趨勢,深入了解各種設(shè)計工具和技術(shù),保持對設(shè)計領(lǐng)域的持續(xù)學習。
  • 觀察和啟發(fā):注意身邊的圖標設(shè)計,從成功的案例中汲取靈感,拓寬自己的設(shè)計思維。
  • 反饋和合作:與團隊和用戶溝通交流,接受他們的反饋和建議,與其他設(shè)計師合作分享經(jīng)驗和知識。
  • 認識目標用戶:了解目標用戶的需求和偏好,將其融入到圖標設(shè)計的決策中。

UI圖標設(shè)計在用戶界面中起著重要的作用。通過掌握設(shè)計原則和實踐技巧,繼續(xù)學習和發(fā)展設(shè)計技能,我們將能夠創(chuàng)造出令人印象深刻的UI圖標作品,提升用戶體驗和界面美感。不斷探索和挑戰(zhàn)自己,成為一名卓越的圖標設(shè)計師!

本文由 @Esc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

畫圖標,我是認真的

天宇 圖標設(shè)計文章及欣賞

對于 UI 設(shè)計師來說,圖標設(shè)計的能力至關(guān)重要,也是提升感官體驗的重要方向。對于一些初入行業(yè)的設(shè)計師,習慣下載圖標素材應(yīng)付項目需求,失去了動手能力培養(yǎng)的機會。甚至一些多年工作經(jīng)驗的老司機,依然還擺脫不了使用素材的習慣,稍微復雜一點的技法就會難以駕馭。

 

1. 切勿過度素材化

 

對于初入職場的設(shè)計師來說,偶爾運用素材可以理解,但是一定要學會拆解和分析,掌握還原設(shè)計的技巧和能力。

 

 

過度依賴素材容易導致思維固化,不愿意去創(chuàng)造,失去創(chuàng)新設(shè)計的能力;也容易導致眼高手低,有想法卻實現(xiàn)不出來,極容易萌生放棄的念頭;素材拼貼形式完成的設(shè)計,在規(guī)范性和細節(jié)性上面也是大打折扣的,導致設(shè)計作品不夠精細化和規(guī)范性。

 

 

 

 

 

2. 刻意練習強化

 

我們需要通過刻意練習來提升圖標設(shè)計的能力,根據(jù)一萬小時定律,技法層面的提升都是通過反復磨練達到的。

 

 

 

 

 

 

3. 擺脫素材才能規(guī)范化

 

圖標設(shè)計從素材習慣過度到設(shè)計動手其實很容易,但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設(shè)計規(guī)范化的關(guān)鍵,然后再統(tǒng)一風格和細節(jié)規(guī)范,掌握數(shù)字化關(guān)系也是需要我們反復研究的課題。

 

 

 

 

比如以這個天氣圖標來舉例,相信很多同學都能畫出來,但是有沒有把控里面的數(shù)字關(guān)系就難說了。通過以下示意圖我們可以看出來,大圓和小圓之間的比例關(guān)系是 4:3,而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標設(shè)計更加精細化,也能引導我們?nèi)ヌ剿髟O(shè)計背后量化的標準和關(guān)系。

 

 

 

 

 

 

4. 質(zhì)感的層層強化

 

當我們繪制完圖標的造型之后,運用合適的風格進行質(zhì)感強化也是尤為重要的。這里我先運用其中的一個風格來完成,選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級關(guān)系更加明顯,這里單獨對局部進行了光影強化和邊界處理,看看以下步驟拆解圖感受一下。

 

 

 

 

備注:運用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實現(xiàn)。

 

 

 

5. 延展界面場景

 

為了進一步強化圖標練習,延展了一個簡單的界面場景,一個由宮格布局組合成的界面設(shè)計。為了填充所需的內(nèi)容,先把之前的一些圖標作品放進去占個位置。雖然都是質(zhì)感一類的圖標,但是由于透視、配色、風格和細節(jié)規(guī)范等不一致,整體還是存在一定的排斥感。

 

 

 

 

 

 

6. 根據(jù)界面環(huán)境重新調(diào)整

 

由于界面設(shè)計屬于深色主題,之前練習的天氣圖標放入場景中顯得過于突出,而且玻璃質(zhì)感的通透性沒有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對天氣圖標進行了重新調(diào)整,以深色關(guān)系調(diào)整了云朵部分,針對太陽的配色和尺寸比例也進行了調(diào)整,如以下效果圖。

 

 

 

 

 

 

7. 延續(xù)風格補全設(shè)計

 

以調(diào)整后的天氣圖標作為風格規(guī)范,延續(xù)了其它業(yè)務(wù)場景的圖標設(shè)計,在透視關(guān)系、細節(jié)規(guī)范、配色比例和光影效果等方面進行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分,左邊三個選擇左上角打光,右邊三個選擇右上角打光。(當然也可以統(tǒng)一一個方向設(shè)置光影)

 

 

 

 

 

 

8. 統(tǒng)一性還是差異化

 

完成的整體設(shè)計視覺風格雖然比較統(tǒng)一,但是也有一些問題存在。圖標之間缺少差異化,過度統(tǒng)一容易視覺疲勞,于是在統(tǒng)一性和差異化上面開始糾結(jié)了。

 

 

 

 

為了既保障圖標設(shè)計表達的統(tǒng)一性,又能形成視覺感的差異化,做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標的配色關(guān)系延續(xù)出了其它色系,看看最終的效果如何。

 

 

 

 

 

 

你喜歡哪一版?

 

關(guān)于統(tǒng)一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會喜歡哪一版呢?歡迎留言區(qū)一起互動交流。

 

 

 

 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

常見的 10 大圖標設(shè)計風格

天宇

圖標是產(chǎn)品中不可或缺的部分,隨著設(shè)計趨勢的不斷變化,圖標設(shè)計風格也在不斷豐富。在產(chǎn)品中會出現(xiàn)哪些常見的圖標設(shè)計風格呢?結(jié)合產(chǎn)品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標設(shè)計風格。
常見的 10 大圖標設(shè)計風格
 
 
 
 
1. 線性功能圖標
線性功能圖標是產(chǎn)品中最常見的風格,設(shè)計時控制好圖標規(guī)范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
常見的 10 大圖標設(shè)計風格
 
 
 
 
2. 面性功能圖標
面性功能圖標與線性風一樣,也是產(chǎn)品中最常見的風格。有單色單圖形、多色疊加風、微漸變風格等表達形式。
常見的 10 大圖標設(shè)計風格
 
 
 
 
3. 磨砂玻璃質(zhì)感圖標
磨砂玻璃質(zhì)感圖標是輕質(zhì)感的表達形式之一,也是近些年較為流行的趨勢。可以扁平也可以微質(zhì)感,在立體感圖標上面也可以運用這類效果。
常見的 10 大圖標設(shè)計風格
 
 
 
 
4. 微質(zhì)感圖標
微質(zhì)感圖標相較于扁平化設(shè)計而言,更能突出細節(jié)的深入和真實感的體現(xiàn)。微質(zhì)感圖標的層次感也更豐富,該技法也是設(shè)計師的必備技能。
常見的 10 大圖標設(shè)計風格
 
 
 
 
5. 晶白風圖標
晶白風圖標常用于金剛區(qū)欄目,利用白色不透明度關(guān)系和背景色關(guān)系進行圖標設(shè)計,圖標質(zhì)感、層次感、空間感等都能得以體現(xiàn)。
常見的 10 大圖標設(shè)計風格
 
 
 
 
6. 立體感圖標
立體感圖標分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設(shè)計趨勢的普及,立體感圖標的運用也逐步普及,也可以利用 AI 工具完成該類型圖標。
常見的 10 大圖標設(shè)計風格
 
 
 
 
7. 插畫風圖標
插畫風圖標是插畫風格的簡化融入,以此提升圖標設(shè)計的特征感,使得圖標具備差異化的視覺效果,也能烘托出整體設(shè)計的質(zhì)量。
常見的 10 大圖標設(shè)計風格
 
 
 
 
8. 主題化圖標
主題化圖標設(shè)計風格多樣,會結(jié)合活動主題或者節(jié)日慶典等內(nèi)容,根據(jù)主題設(shè)計圖標更能體現(xiàn)產(chǎn)品溫度。
常見的 10 大圖標設(shè)計風格
 
 
 
 
9. 寫實類圖標
寫實圖標是以技法表現(xiàn)實物特征,比較考驗質(zhì)感表現(xiàn)、透視光影等技法能力。隨著扁平化趨勢,寫實類設(shè)計逐步被淡化,但是也有部分產(chǎn)品會局部性運用。
常見的 10 大圖標設(shè)計風格
 
 
 
 
10. 實物圖圖標
直接將產(chǎn)品實物圖作為圖標相對較少,但是依然有產(chǎn)品會選擇使用,還原其內(nèi)容表達的真實性。
常見的 10 大圖標設(shè)計風格
 
 
 
以上為產(chǎn)品中常見的圖標設(shè)計風格,根據(jù)不同需求采用。對于設(shè)計師而言,這也是首先需要掌握的圖標技能。
 
本文由 @黑馬青年(heimaui)原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。

作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

圖標設(shè)計能力怎么提升?

藍藍設(shè)計的小編

原創(chuàng)能力的提升,就是創(chuàng)建一個場景給自己出題再反復驗證自己的過程。而訓練和真實項目不同的是,真實項目往往操心的事情太多,時間還少,會造成很多思想上的負擔,所以兩者都有提升但類型不同。
只有認識到圖標的重要性,并有自我驅(qū)動力去制定訓練的計劃,才能真正提升這部分能力。而它的附帶價值遠遠不止畫好圖標……

超全!APP 圖標設(shè)計指南:從創(chuàng)意構(gòu)思到視覺呈現(xiàn)的完美轉(zhuǎn)化

藍藍設(shè)計的小編

APP 圖標設(shè)計從創(chuàng)意構(gòu)思到視覺呈現(xiàn)是一個系統(tǒng)而細致的過程,需要設(shè)計師充分理解應(yīng)用的內(nèi)涵與目標受眾,挖掘獨特的創(chuàng)意元素,并運用精湛的設(shè)計技巧將其轉(zhuǎn)化為具有強大視覺吸引力和品牌傳達力的圖標作品。只有這樣,才能在競爭激烈的移動應(yīng)用市場中,讓我們的 APP 圖標成為吸引用戶的第一道亮麗風景線,為應(yīng)用的成功推廣和用戶留存奠定堅實的基礎(chǔ)。

一篇文章帶你秒懂圖標設(shè)計

藍藍設(shè)計的小編

從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴,圖形用戶界面竟然已經(jīng)走過了50年的發(fā)展歷程,更神奇的是,原來UI設(shè)計這個職業(yè)的起源也是因圖標的起源而起,后來圖標成了UI設(shè)計中最重要的視覺元素之一,接下來,我們一起走進圖標的世界,了解它神秘背后的故事。
 
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
目錄
一、 圖標的起源
二、 圖標設(shè)計的定義
三、 圖標的種類
四、 圖標設(shè)計8大原則
五、 圖標的6大作用
六、 提升圖標設(shè)計的4個小技巧
七、 5個圖標網(wǎng)站推薦
八、圖標的命名規(guī)范
 
 
 
一、圖標的起源
在計算機發(fā)展的早期,用戶界面主要是基于命令行的,由字母和數(shù)字組成,操作復雜且對普通用戶不友好,用戶需要記住大量的命令和參數(shù)才能使用計算機系統(tǒng)。
 
隨著計算機技術(shù)的發(fā)展,為了使計算機更易于使用和理解,程序員開始開發(fā)圖形化的元素來代表各種操作和功能,圖標概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務(wù),而無需記住復雜的命令。
 
 
1.施樂公司的開創(chuàng)性工作
1973年,美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺,但它為后來的計算機圖形界面發(fā)展奠定了基礎(chǔ)。它的界面中已經(jīng)出現(xiàn)了一些簡單的圖標,如垃圾桶、計算器、打印機、文件和文件夾等,這些圖標成為了后來圖標設(shè)計的雛形。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
2.蘋果公司的推動
1979年,史蒂夫·喬布斯參觀了施樂公司的原型機后,深受啟發(fā),決定開發(fā)自己的圖形界面計算機。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺圖形界面計算機,其界面中的圖標設(shè)計得到了進一步的發(fā)展。
在這一時期,現(xiàn)代圖標設(shè)計之母蘇珊·卡爾擔任蘋果的創(chuàng)意總監(jiān),她設(shè)計的像素風格圖標簡潔、清晰、易于理解,具有很高的視覺平衡性,即使在今天看來也顯得活潑有趣。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
3.微軟的跟進與發(fā)展
1985年,微軟發(fā)布了 Windows 1.0操作系統(tǒng),這是微軟在圖形用戶界面領(lǐng)域的重要嘗試。該系統(tǒng)中的圖標設(shè)計也借鑒了蘋果的一些理念,但也有自己的特點。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及,圖標設(shè)計也逐漸成為了用戶界面設(shè)計中不可或缺的一部分。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
二、圖標設(shè)計的定義?
圖標設(shè)計是一種設(shè)計活動,主要是創(chuàng)造出用于代表物體、動作、概念等各種元素的圖形符號。
 
這些圖形符號具有簡潔性,讓人能快速識別。比如手機桌面上的微信圖標,用兩個對話氣泡的簡單圖案就代表了這個軟件,讓人一眼就能明白。圖標設(shè)計在很多領(lǐng)域都有應(yīng)用,像軟件界面、網(wǎng)站、移動應(yīng)用等,能夠為用戶提供視覺引導,方便用戶操作。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
三、圖標的種類
圖標在提升產(chǎn)品氣質(zhì)上起著不可估量的地位,在界面中往往起著畫龍點睛的作用,無法想象在一個產(chǎn)品中,沒有圖標,界面會顯得多么的無聊和乏味,但是圖標也不能總用一種形式的圖標,這樣也會百看讓人生厭,因此也就衍生了圖標的多樣性,以下是我整理的常見圖標類型:
 
1、從視覺表現(xiàn)上,有以下12大類圖標
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
2、從功能上,有以下6大類圖標
?工具圖標
工具圖標在B端項目中應(yīng)用很廣泛,幾乎每個組件中都會包含這類圖標;比方說騰訊文檔上方的文檔編輯圖標就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
?裝飾圖標
在一些軟件產(chǎn)品中,會重點強調(diào)品牌、情感化設(shè)計,大量啟用3D化的裝飾圖標來提升界面的質(zhì)感。
比方說騰訊電腦管家下面的這個界面設(shè)計,它就運用了大量具有裝飾性的圖標來傳遞信息表達品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點,萌萌的形象無形中拉近了與受眾之間的距離。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
?啟動圖標
在項目中,當用戶想表達品牌時,經(jīng)常會把LOGO圖標做成動態(tài)圖,來更好的傳遞品牌理念,比方說聯(lián)想電腦管家,在啟動頁時,就運用了動態(tài)啟動圖標,同時下面還附帶了一個slogan的文字動效,很好的向用戶傳遞了安全的理念。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
? 進程提示圖標
在軟件界面中,經(jīng)常也需要進程的提示,這時候圖標就可以起到這樣的作用,比方說騰訊電腦管家在清理垃圾時,圖標里面的風扇就一直在轉(zhuǎn),寓意當前清理工作正在進行中。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
? 狀態(tài)提示圖標
軟件在運行過程中難免會出現(xiàn)bug或者內(nèi)容為空的時候,這時候狀態(tài)提示圖標就尤為重要,可以大大減輕人們的焦慮情緒。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
? 增加界面趣味性的圖標
圖標不僅在理解和使用上給人們提效了,而且有時添加動效的圖標還能給人帶來絲絲驚喜和愉悅。
比方說聯(lián)想的這個動態(tài)加載圖標,看著就很有趣,讓人忍不住多欣賞一下。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
四、圖標設(shè)計8大原則
雖然現(xiàn)在AI盛行,很多酷炫的效果可以用AI實現(xiàn),但是一些讓圖標看起來更加專業(yè)精致、耐看的秘密我們還是需要知道的,了解這些設(shè)計原則,我們可以事半功倍,當AI生產(chǎn)有偏差時,我們自己可以優(yōu)化、修復和調(diào)整。
 
 
1、大小統(tǒng)一
圖標大小統(tǒng)一,就是一組圖標放置在一起,圖標大小要看起來差不多,不能忽大忽小,比方說這組圖標的第三個圖標,電腦圖標明顯過高,跟其他圖標放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。
一篇文章帶你秒懂圖標設(shè)計
 
 
在大小統(tǒng)一這方面,我們記得就是幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,比方說下面這組圖形,左邊的這組它們高度一樣,可是看起來大小并不太一樣,明顯中間的三角形顯得?。挥疫叺倪@組,三角形比左右兩邊的都要高,可是它們放在一起看起來大小就是差不多的,這就是幾何圖形帶來的視覺差,就是我們在做圖的時候,要記得多去感受,設(shè)計中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區(qū)別,這種美也沒那么玄乎,只要用心,一定可以做出大小一致的圖標。
 
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
 
2、圓角統(tǒng)一
圓角統(tǒng)一,就是圖標之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規(guī)范和專業(yè)。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
3、風格統(tǒng)一
界面中同樣功能的圖標,樣式和風格需要保持一致,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質(zhì)感的磨砂材質(zhì)。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
4、角度統(tǒng)一
這組扁平化圖標,在右邊相似的角度都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
5、粗細統(tǒng)一
圖標的粗細要統(tǒng)一,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規(guī)律,這樣的圖標看著也是同樣的美觀和一致。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
6、疏密統(tǒng)一
下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,而三個圖標都遵循了這樣的原則,看起來出奇的統(tǒng)一,所以它們看起來像是一組成套圖標。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
7、透視統(tǒng)一
當設(shè)計的圖標是立體時,要注意它們的透視要統(tǒng)一,就像下面的這組2.5D圖標,它們的設(shè)計透視就保持著高度的一致。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
8、易識別
圖標的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標設(shè)計原則。
下面的這組手機主題圖標,識別性就非常的高,簡潔且好理解。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
五、圖標的6大作用
圖標在界面設(shè)計中扮演著至關(guān)重要的角色,它們遍布于應(yīng)用程序的各個角落。無論是導航欄、工具欄還是標簽欄,亦或是首頁、詳情頁、個人中心頁,功能圖標都隨處可見。圖標的主要作用在于傳達信息,相比文字,它們能更直接地傳遞概念,并且能夠為用戶的視覺體驗增添樂趣。
 
1、提升界面的使用效率
功能圖標常以簡潔的圖形呈現(xiàn),它們便于用戶識別和記憶。這種設(shè)計讓用戶能夠迅速定位到所需的功能,無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項,大大提升了界面的使用效率。
 
華為云的這個界面,文字信息很多,因為有了圖標的存在,人們尋找起來特別高效,能高效定位到想要的信息。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
2、增加用戶的滿意度
圖標不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標讓人看著都是賞心悅目的,就像我們在大街上看到一個美女,都忍不住多駐留一伙一樣。
 
華為云這組精美的圖標動效就給了我很大的視覺享受,圖標設(shè)計精致,配色舒適,還有動效,給足了用戶滿足感。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
3、減少人們認知的成本
圖標很多的造型都來源于生活,來源于我們熟悉的事物,在界面中運用我們熟悉的圖形會大大降低人們的認知成本,也會讓更多人產(chǎn)生共鳴,它的傳達作用不受語言和國界的束縛,是一種高效的界面表達語言。
 
華為云的這組圖標就是運用了人們?nèi)粘I钪蟹浅J煜さ脑兀缠Q感很強,人們學習和理解的成本很低。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
4.提升品牌形象
仔細觀察會發(fā)現(xiàn),在生活中有很多的軟件產(chǎn)品,會把企業(yè)的LOGO融入到日常產(chǎn)品的圖標設(shè)計中,大大提升了品牌的一個曝光度。
 
騰訊云就有這樣的小心思,它會把騰訊云LOGO融入到banner圖標設(shè)計中,傳遞了信息,同時也加強了品牌的曝光。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
5、圖標可以增加界面的豐富度
有圖標的界面,頁面看起來豐富度更高,層次感更強,信息表達上也會更加的清晰整潔。
 
360AI辦公這個界面之所以看起來這么豐富,很大原因是在于圖標的應(yīng)用,界面中有大圖標、小型面圖標,還有線性小圖標,有對比,整個頁面就看起來豐盈了不少。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
6、減少界面的枯燥感
千篇一律的文字,難免會產(chǎn)生枯燥感,讓人不愿多駐留;圖標多彩的配色以及Q萌的造型會讓人心生愉悅。
佐糖的這個界面,若不是有圖標的潤色,光只有功能點和文字介紹,估計會乏味不少,但是有了多彩圖標的加入,瞬間氛圍感都熱鬧了不少。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
六、提升圖標設(shè)計的4個小技巧
1、大量臨摹,刻意練習
任何一項技能的獲得,最開始都離不開臨摹,作為剛接觸UI設(shè)計的職場新人,可以先從臨摹入手,先臨摹簡單的,然后循序漸進,臨摹難度大點的,這樣圖標設(shè)計能力也會慢慢提升。
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
2、多積累好的樣本
想要繪制好看的圖標,首先要見過好看的圖標,所以我們?nèi)粘RB(yǎng)成多收集好圖標好設(shè)計的習慣,這樣當面臨新的需求設(shè)計時,也不至于手忙腳亂,不知如何下手。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
3、學會分析
看到好看的圖標設(shè)計時,我們要學會分析,這組圖標好,它好在哪,哪里打動了你,你分析了這些,你自己在設(shè)計的時候也會不自覺的運用到其中的智慧和思路,這樣我們就可以隨時原創(chuàng)出符合自己需求的圖標設(shè)計來。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
4、明確目標與受眾
目標受眾不同,他們對圖形的期望也會不一樣,比方說在設(shè)計兒童產(chǎn)品界面和B端產(chǎn)品界面時,所用的顏色和形狀都是有考究的。
 
兒童類產(chǎn)品的圖標設(shè)計,形狀會比較圓潤,色彩也比較多彩;但是B端類產(chǎn)品的圖標設(shè)計用色就會很克制,形狀也不會過于圓潤。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
七、5個圖標網(wǎng)站推薦
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的圖標庫,應(yīng)該也是受眾最多的一個圖標下載網(wǎng)站,給我們平時工作提效不少,造福了不少的設(shè)計師。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字節(jié)跳動旗下的一款圖標下載網(wǎng)站,它可以在線把一個圖標實現(xiàn)多種風格的切換,線性、面線、線面結(jié)合,并且線的粗細大小可以調(diào)節(jié),非常的方便。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在線編輯的圖標網(wǎng)站,涵蓋了常用的一些圖標,可以調(diào)節(jié)線條的粗細和大小,導出的格式是SVG。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的優(yōu)點,我覺得是造型夠豐富,滿足你有時候無法腦補的痛點。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的優(yōu)點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
 
八、圖標的命名規(guī)范
圖標一般有四種狀態(tài),正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài),一個好的命名習慣會給自己的合作搭檔帶來很好的體驗,通常在寫界面的時候,前端都是用英文對元素進行命名的,這里我列舉一下我經(jīng)常合作同事的一個命名規(guī)范,供大家參考:
模塊-類別-功能-狀態(tài)
例如:Nav_button_message_sel
 
一篇文章帶你秒懂圖標設(shè)計
 
 
 
 
總結(jié):
在深入探索了圖標設(shè)計的豐富世界之后,我相信大家未來能夠根據(jù)不同的場合挑選出恰當?shù)膱D標風格和樣式。通過持續(xù)的總結(jié)和歸納,我對圖標設(shè)計的理解也變得更加深刻。雖然這份總結(jié)可能還有待完善之處,請大家多多海涵,期待在下一篇文章中再次與大家相見。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標定制用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

優(yōu)化UI設(shè)計規(guī)范:海外項目與國內(nèi)產(chǎn)品設(shè)計規(guī)范及組件庫對比

藍藍設(shè)計的小編

基于海外組件庫的核心設(shè)計原則和特性:交互與反饋,視覺層次與信息密度,簡潔與功能性。我們?yōu)椤秏yCommunity》項目的制定專屬規(guī)范,涵蓋按鈕,輸入框,卡片樣式,列表,圖標及主題定制換膚等相關(guān)組件庫。顏色的價值在于傳達品牌和情感,并增強可讀性。
文字是信息傳遞的主要載體,標準化的文字設(shè)計有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范,還升級了字體規(guī)范,新增了客戶指定的字體,并加入了沙特當?shù)氐陌⒗Z字體。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔