按功能分類可以分為
應用圖標,如搜狐,新浪,網易等網站的logo;
功能圖標,如各類音樂播放器的“開始”“暫停”“快進”圖標等;
按設計風格分類可分為
剪影圖標;
輕擬物圖標:在原來擬物圖標基礎上,減輕厚重質感,去除投影、漸變、紋理轉化成扁平化的圖標;
輕質感圖標:漸變/投影/不透明度等圖標,具有唯壹性,細節更加豐富;
擬物化圖標:有形有色有樣式有質感的圖標;
疊加圖標;
以文字為主體的圖標,如支付寶,淘寶的圖標;
插畫圖標,通常是遊戲應用,直接使用遊戲中的角色、道具或畫面作為圖標。
圖標類型和風格總結這篇文章來自優設網,主要是最近的工作中經常用到圖標,但是設計給到的圖標放到頁面中總是有點不協調,所以看到這篇文章想要收藏分享壹下。
作者寫的還是很細致的,喜歡的可以關註他。鏈接地址在下面。
編者按:圖標類型千變萬化,實際上萬變不離「線性、面性、線面結合」3個方面,再結合「透明度、漸變、顏色疊加、質感、多維空間」等表達方式設計而成。本文將近6000字,壹篇就可以了解全部設計風格!
圖標是UI設計中極為重要的壹個環節,我們在做每個界面的設計幾乎都會涉及到圖標的表達,出色的圖標設計可以讓界面表達更加精致、有趣。
圖標的設計往往也體現著設計師的基本功,因此除了日常多畫提升對圖標造型的把控力外,我們也更需要了解和學習圖標設計的趨勢類型,從而幫助我們提高在設計中的效率。
基於自我學習的目的,平時在瀏覽壹些設計網站時也會做相對應的收集。因此本文主要對於圖標設計的「類型、風格」進行了整理,以及自己對於每種圖標類型的思考。
圖標的類型劃分
設計網站上的圖標可以說是多種多樣,不同類型的圖標都有著獨特的魅力。例如,線性圖標簡潔輕量、面性圖標厚重直接,當然同壹種類型的圖標也具有很多不同的表現形式。
因此基於本人對圖標的理解,大致劃分為三類:線性、面性、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。
線性圖標
使用輕量的線條勾勒的圖標,整體感受也趨向於精致、細致而具有銳度感。不同的線條表現具有不同的視覺感受,細線輕量、直線硬朗、曲線柔美。
1.線型圖標基礎分析及想法
粗細對比
粗細不同,圖標的力度和重量感就會有差異。粗線的圖標,視覺關註力來說會更加突出,但較於細線的圖標也會顯得粗壯、厚重。細線的圖標,精致、透氣、秀美。
但在設計時需要依據「整體的UI風格」來決定線的粗細,而並非單純的考慮圖標的關註度,反而更需要考慮圖標與界面整體的平衡感。
柔度對比
直角與圓角決定了外形的感知和風格的走向,如下圖對比中看出,圓角越大圖形越趨向於可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽剛(如下左圖)。因此剛或柔或中間值完全取決於早期對於整體風格的定調。
繁簡對比
除了輕量化和簡潔之外,圖標的識別性也是極為重要。如下左圖,「過度簡潔」導致圖標失去該有的識別度而出現歧義,而下右圖的元素疊加使得圖標稍顯復雜。在繁與簡的平衡中,應該保持在不影響圖標識別度的情況下,最大限度的提升圖標的簡潔程度。
特征的識別度
除了簡潔程度,也需要考慮圖標該有的特征。例如下圖「評論」圖標的案例,當我把圖標中的「三個點」去掉時,圖標依舊具有「對話/評論」的表意,而當我把下面的「箭頭」去掉保留「三個點」時,則會出現歧義,它可以被表意為「更多」的意思,因此在設計圖標時需要對於表意做精準把握,避免歧義出現。
保持圖標的特征美感
如下面的「心形」圖標,下左圖是我們具有普識性的圖標,與圓形組合之後依然保持著原有的形態美感。但我們不時也會看到第三種設計,整體外形雖然保持著愛心,但為了與整體風格「壹致」強行對外輪廓進行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關鍵點。
組合型比例
組合型的比例會影響到圖標的精致程度,準確的「比例值」能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這裏以圖標窄邊作為「基準值」進行嘗試。當內形為外形的1:2時(下圖2),圖標的整體視覺效果較為平衡;當大於1:2並接近4:3時,圖標內部結構會顯得過於飽滿。而小於1:2並接近4:1時(下圖3)則會產生稀疏不緊湊的效果。(這裏的比例只是案例需要,實際設計以最終的視覺感知為準)
2.線性類型拓展
基礎的理論,結合延展的應用,可以迸發出更多的創意想法。線形圖標也並非只有壹種設計形態。通過以下案例,可以看看線型圖標設計類型的多樣性。
極簡風格
整體風格極為簡約,沒有多余的線條,通過線條還原圖形的本質,外形「簡單」卻具有很強的識別性,在視覺感知上輕松、幹凈。
極簡的風格圖標在於對圖形的把控,多壹筆可能顯得復雜,少壹筆可能影響識別程度。以上圖為例,圖標的組合元素保持在2個左右,整體較為幹凈。
實際應用:Instagram、Airbnb、Facebook、Twitter
雙色
相較於「純色的圖標」更具表現力,細節上也會更加豐富,形態感知上多了壹層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。
同色系:同為冷色系、暖色系或同壹色系的表達形式。如下圖案例,以暗色為主色,亮色點綴提亮,使得圖標具有壹種高光提亮的感覺。
另壹組案例是亮色主色結合暗色,整體圖標效果還算可以,但較亮的顏色沒有應用在圖標的關鍵特征上,使得圖標第壹眼的感知稍有減弱。
對比互補色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍色的撞色之後相比單色的圖標更加出彩和具有記憶點。
實際案例:騰訊動漫我的頁面
透明度變化
本質上與上面壹種為壹個類型的設計,通過透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。
實際案例:愛奇藝9宮格圖標
漸變層次疊加
漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。
黑白+品牌色
黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。
實際案例:大眾點評攻略頁面圖標
線性漸變
結合漸變的顏色,豐富了整個圖標的視覺表達,並提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。
實際案例:網易考拉、NAVER
壹筆成形
此類圖標在視覺表達上具有較高的線性流暢度和設計感,關註點在於整組圖標的「開口起始點」設定上需保持壹致。例如,「從左到右」或「從右到左」形成壹體化的連貫線條,開口起始點不壹致會影響整組圖標的壹致性,應用在頁面時也會顯得雜亂。
斷點圖標
與上壹種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找壹個缺口來打破「全包邊圖標」的沈悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統壹的方向及大小,另外需要控制開口個數避免過多導致圖標外形過於零碎。
實際案例:騰訊體育、京東
面性圖標
面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴於外輪廓的清晰度,因此在設計時對於外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。
1.面型圖標基礎分析及想法
輪廓對比
輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,壹個氣質較為直接硬朗,另壹個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。
鏤空對比
適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度並沒有多大作用,沒有鏤空則少了壹些透氣感。
形體對比
形態上的差異也會具有不壹樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之後的形體相比視覺感知更直觀些,而組合形的圖標相對會精致壹些,多了壹些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。
繁簡對比
設計面性圖標時,對於多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過於零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。
2.面性圖標類型拓展
面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。
單色面+點綴色
整體的外形使用統壹的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統壹又具有差異化。
多彩雙色
通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的APP中極為常見,簡單且容易出效果。
微質感漸變
微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:
實際案例:全民K歌
透明度/灰度變化
透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。
實際案例:企鵝FM我的頁面
透明度變化+漸變
漸變的設計提升了面性圖標的質感,從顏色上具有壹定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。
透明疊加的圖標+漸變的背景
此類圖標常常被應用在UI界面中的列表或者頂部入口的位置。
實際案例:全民K歌點歌頁面
顏色疊加穿透
圖標透明疊加之後產生了交錯的負形,疊加出第三個面。雖然整體設計依然保持著扁平化,但卻多了壹份層次感,並且增加了圖標的細節。
實際案例:百度網盤
漸變層次疊加
整體的效果與透明度變化的圖標較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度感和層次感。
實際案例:NAVER、掌上生活
高斯模糊
此類圖標基本沒有在APP中看到,與「透明度變化」或「顏色疊加」相比都更具層次感和空間感,同時圖標也具有較強的設計感。
線面結合
結合了線性和面性的優點,既保持了面性的重量感,同時具有線性的精致、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控,不同比例可以呈現出不同的視覺感知。
1.線面結合圖標的基礎分析及想法
線面比例
線面比例的差異,圖形呈現出來的張力也會有不同的感受。基於中間填充的圖標形態嘗試了三種不同的比例,從下圖中可以看出,當填充與外形窄邊比為1:3時(左圖)圖標呈現往內收的感覺;填充與外形窄邊比為1:2時(中間)圖標整體較為平衡;當填充與外形窄邊比為2:3(大於1:2)時(右圖)整體具有外擴趨勢。
組合形式
線面可以通過不同的組合形式進行繪制。基於不同的組合形態可以設計出多種多樣的線面圖標,不同的組合形式會體現出不同的設計風格,因此在設計時盡量多發散思考,尋找出適合妳的組合方式。
繁簡對比
線面結合本身就由兩種形式組合,因此在設計的時候更需要對整體造型進行把控,單體(線和面)造型必須保持較高的簡潔程度,這樣最終組合形成的圖標才不會過於復雜(左圖),若本身形態過於復雜,則會降低圖標的辨識度和視覺美觀度。
2.線面結合圖標類型拓展
線面結合的圖標集合了線性和面性的優點,在設計方式上也繼承了兩者的優點。設計方式也是基於以上兩種的結合,因此可以結合出更多設計的可能性。
黑白線+面性品牌色
與「線性+品牌色」的做法較為接近,統壹的線性顏色疊加品牌色的透出。
實際案例:好好住、soul
線面雙色
基於線面的基礎上,在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。
線面結合-陰陽
線和面的結合按50%的比例進行設計,依據上下、左右、居中等基礎方式的結構化設計,整體圖標的視覺效果較為跳躍,非常規。
線面雙色+錯位
在雙色圖標的基礎上,線和面按照統壹的「百分比」進行縮放,並進行透視和位移的設計,整體呈現出來的是壹種交錯疊加的視覺效果,相比普通的線面雙色更加豐富。
實際案例:閑魚底部tab、臉球底部tab
線面錯位+漸變
基於上壹種風格,對面或者線的顏色進行漸變設計,豐富了圖標的質感和顏色更加細膩。
線面透明度變化
與「線面透明度變化」的設計方式大致壹樣。如下圖案例,「弱線強面」的第壹識別度較弱,而「弱面強線」的外形識別度較高,也更符合圖標的表達。
實際案例:新浪微博、騰訊新聞
基於三種基礎的類型表達,可以拓展出多種多樣的設計形式。除了以上的案例之外,還收集了壹些其他的設計。
線面結合C插畫
整體比較偏向插圖的感覺,細節和元素較多,常見於壹些APP的空白頁設計。
線面結合_卡通插畫
整體感覺比較可愛、卡通、二次元,常見於壹些二次元或漫畫類的APP。
面性_漸變強質感
整體風格的光影質感會比較強烈,常在壹些活動運營或小遊戲的界面出現。
面性C扁平寫實
整體感覺比較扁平,細節的豐富度與現實感知接近。
線面+漸變插畫
整體風格比較偏向絢麗多彩的顏色風格,質感和細節較為豐富。
寫實風格
3D質感圖標
由於C4D的制作成本相對較高,目前較少在常規的APP中看到。但3D作為壹個主流的設計趨勢,在時間和能力允許的情況下需要多做這方面的嘗試。
等距的線面結合
等距的設計,讓原本線面的圖標豐富了層次,並具有立體透視的感覺。
除了以上這些之外,我們在實際場景中也會發現壹些較為特別的圖標設計。
Facebook更多頁面的列表圖標
整體風格偏向插畫風+漸變質感。由於更多的頁面為純列表的設計,因此整個頁面在圖標的設計上做了很大膽的嘗試,與常規的單色圖標相比更具有吸引力。為了區別不同的業務,系統性質的功能圖標做了色調的區分。
APPStore遊戲和新APP界面下的類別列表圖標
整體為具象化扁平風格的設計表達,圖標的顏色還原了最基本的現實感知。
iOS系統辦公類軟件的起始頁面圖標
整體風格比較偏商務簡約,具象的圖形表達+輕微的漸變質感。
QQ手機版中延展的功能圖標
整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達,色調方面基於業務屬性結合品牌色進行了區分,整體既統壹又具有差異化。
40個自媒體可商用素材網站視頻+插畫+圖片+圖標CreativeCommons(知識***享)簡稱CC協議素材,創作者主動放棄著作的部分權利,還是會有所限制,例如要求標註來源、作者名等,請看到CC協議時看清須知。PD協議證明作品已捐獻給公***領域。
CC0協議意味著創作者主動放棄了著作的所有權利,可以無條件使用包括商用。(但是,不可上傳至其他素材網站、不可聲稱擁有版權,不可用於不法途徑,圖像中所涉及的內容仍有可能涉及商標權和公***及隱私權。
pexels人物、風景、動物等攝影圖片
/
沙沙野高清視頻、圖片(中文網)
/
unsplash高清藝術攝影圖片(最多人使用)
/
visualhunt人物、風景、動物等攝影圖片
/
pixabay照片、插畫、矢量、視頻
/
freejpg色彩靚麗的風景、植物、動物
/
skuawk專業攝影師作品
/
picjumbo高清靜物、風景圖片
/
kaboompics建築、靜物等小清新高清圖片
/
gratisography時尚流行攝影圖庫
/
foodiesfeed食物攝影高清圖庫
freelyphotos帶宗教色彩的高清圖片
/
唯美冷調風景
/
streetwill自然風光、街頭建築
/
ins風圖片、靜物
/
polayoutu旅行高清圖片
lifeofpix風景、食物圖片
/
lifeofvids唯美的風景視頻
/
fancycrave靜物、建築,復古風
/
mmtstock花卉植物較多
/
復古風格的圖片
magdeleine精致文藝的圖片
designerspics靜物風景圖片
/
viintage各種郵票圖片
/
imcreator人物、藝術、自然、矢量圖標
textures大量的樹木、石頭、金屬等材質紋理圖,可用於2D、3D貼圖
/
dryicons各種ICON圖標素材
/
flat-icon-design日本可愛插畫風圖標
/
ac-illust剪貼畫
/
iconfont各種ICON圖標素材(中文網)
/
flaticon很全的圖標
/
iconninja忍者圖標
coverr各種各樣的高清視頻素材
/
mixkit實拍高清視頻素材
videvo高清、4K視頻
/
videezy各類場景、宣傳視頻
/
undraw人物場景插畫
icons8人物插畫
drawkit人物場景
/
404-illustrations網頁插畫