2020年網(wǎng)頁界面設(shè)計中的圖標(biāo)icon定制新趨勢和熱點

時間：2023-09-26 22:24:02 | 來源：網(wǎng)站運營

時間：2023-09-26 22:24:02 來源：網(wǎng)站運營

2020年網(wǎng)頁界面設(shè)計中的圖標(biāo)icon定制新趨勢和熱點：在您的網(wǎng)站設(shè)計作品集中，圖標(biāo)可能是最重要的設(shè)計例子之一。今天我們就來聊一下網(wǎng)站設(shè)計中的圖標(biāo)設(shè)計，看看這些具有啟發(fā)性的例子，希望能對您在網(wǎng)站設(shè)計中能有所幫助。





圖標(biāo)元素幾乎隨處可見，但有時是事后才想到的。事實并非如此。出色的圖標(biāo)設(shè)計可以與眾不同，并為項目增加技巧和才華。




讓我們一起來看看2020年網(wǎng)站設(shè)計中的那些圖標(biāo)設(shè)計的新趨勢和熱點。




手繪圖標(biāo)













手繪圖標(biāo)不僅是一種時尚的風(fēng)格，而且它們還為設(shè)計項目創(chuàng)造了一種更加親密、真實的感覺。這些圖標(biāo)的樣式千變?nèi)f化，從簡單的形狀和線條到全彩圖標(biāo)。




手繪風(fēng)格最好的部分是您不需要自己畫，有很多可用的手繪圖標(biāo)集，所以您可以找到合適的風(fēng)格，即使您沒有感覺過于藝術(shù)。




帶有深度的圖標(biāo)













在圖標(biāo)設(shè)計中創(chuàng)造深度有些棘手，但更多的設(shè)計師正在使用這種趨勢與超大的圖標(biāo)集。使用陰影和幾何體來創(chuàng)建正確的形狀組合，并添加一個幾乎是三維的效果。




這些風(fēng)格是相當(dāng)有趣的，有時使用的趨勢線索來來去去，如長陰影。




這些圖標(biāo)傾向于更復(fù)雜的一面，最適合在圖標(biāo)相當(dāng)大或與其他元素結(jié)合使用。




具有懸浮狀態(tài)的圖標(biāo)













說到網(wǎng)站設(shè)計中的圖標(biāo)，最流行的技術(shù)之一是將一組圖標(biāo)配對，以創(chuàng)建懸浮狀態(tài)或動畫。這可能包括使用一個帶顏色填充的圖標(biāo)或者在圖標(biāo)周圍創(chuàng)建一個按鈕。




如果您計劃對圖標(biāo)使用某種懸停狀態(tài)，那么在圖標(biāo)設(shè)計階段考慮這一點是很重要的。并不是所有的圖標(biāo)或圖標(biāo)集都針對這種技術(shù)進行了優(yōu)化，尋找一個完整的圖標(biāo)集的變化，使創(chuàng)建懸停狀態(tài)更容易。




這里不要弄得太復(fù)雜，一個精心設(shè)計的圖標(biāo)可能會在懸停狀態(tài)下丟失。這對簡單的圖標(biāo)對最有效。




簡化的圖標(biāo)













甚至以前具有復(fù)雜圖標(biāo)樣式的網(wǎng)站和設(shè)計也正在轉(zhuǎn)向更加簡化和簡化的圖標(biāo)。




它們的優(yōu)點是每個圖標(biāo)都描繪了一個可識別的東西，但表示并不總是100%的字面意思。圖標(biāo)設(shè)計者可以隨意使用形狀或線條來創(chuàng)建圖標(biāo)形狀，這些形狀是圖標(biāo)所代表的項目的最簡單的版本。




線條圖標(biāo)與顏色形狀













線條圖標(biāo)總是一個受歡迎的選擇，這要歸功于它的多用途風(fēng)格，與幾乎任何其他設(shè)計元素看起來都很好。這一趨勢通過在線條圖標(biāo)后面的圓形或方形的流行顏色增加了一點視覺趣味。




顏色形狀可能會填充線條圖標(biāo)設(shè)計的一部分，但更多時候它只是漂浮在背景中。這個小小的視覺趣味可以把一個圖標(biāo)組合在一起，強調(diào)一個品牌的顏色，或者只是讓一個老網(wǎng)站的線條圖標(biāo)煥然一新。




圖標(biāo)設(shè)計中棘手的部分是顏色形狀元素的位置和大小，如果它太大或顏色太鮮艷，它會從圖標(biāo)上消失。如果形狀太小，您就有可能讓它看起來像一個錯誤。




雖然沒有完美的大小，但大多數(shù)使用這種趨勢的圖標(biāo)都將顏色形狀保持在整個圖標(biāo)大小的四分之一左右。




抽象的圖標(biāo)形狀













不確定什么圖標(biāo)代表您的內(nèi)容？一個抽象的圖標(biāo)形狀可能就是答案。




越來越多的設(shè)計師開始為網(wǎng)站設(shè)計抽象風(fēng)格的圖標(biāo)。這種風(fēng)格，以及總體趨勢，的好處是抽象風(fēng)格創(chuàng)造了一種奇思妙想的感覺，與一些更大的總體設(shè)計趨勢相匹配。




使用抽象圖形的關(guān)鍵是確保您沒有錯誤地復(fù)制一些東西，而且圖標(biāo)真的是抽象的。（不要嘗試創(chuàng)建與徽標(biāo)相似的圖標(biāo)，例如，它們可能看起來像錯誤。）對于真正匹配的東西，使用相同的調(diào)色板的圖標(biāo)和品牌材料。




原色













原色調(diào)色板是一種大膽、明亮、吸引人的小設(shè)計元素的選擇。




這個圖標(biāo)設(shè)計趨勢使用紅色、藍色、綠色和黃色（以及紫色和橙色）來創(chuàng)建一組基本的顏色規(guī)則。讓這種風(fēng)格奏效的是對顏色的關(guān)注，以吸引人們對屏幕上的小元素的注意。三原色也將從所有的“材料”亮色中脫穎而出，已經(jīng)主導(dǎo)調(diào)色板。




使用漸變（或模擬漸變，如上面的例子）來軟化設(shè)計，使調(diào)色板看起來不太簡單。使用原色的時候不要太過火。它們可能會讓人不知所措。考慮柔和的主色調(diào)或單色方案。




帶有背景圖標(biāo)的圖標(biāo)













一些流行圖標(biāo)有自己的圖標(biāo)。




對于圖標(biāo)的更精細的使用，我們在這里不采用小圖標(biāo)，圖標(biāo)可以被堆疊和分層來創(chuàng)造更多的藝術(shù)元素。




這種趨勢經(jīng)常使用顏色和陰影來區(qū)分主要焦點圖標(biāo)和背景圖標(biāo)。主圖標(biāo)通常是全彩色或填充圖標(biāo)。背景圖標(biāo)幾乎總是線條風(fēng)格，可能有淺色調(diào)色板。




您可以使用許多預(yù)先制作的圖標(biāo)工具包以不同的方式混合和匹配圖標(biāo)來創(chuàng)建這種效果。使用類似主題的圖標(biāo)來創(chuàng)造深度和視覺興趣，并堅持使用少數(shù)元素來避免場景過于繁忙。不要害怕使用和重復(fù)使用元素，在背景和前景中使用相同的圖標(biāo)（交替線和填充）。




兩色圖標(biāo)













另一個圖標(biāo)設(shè)計趨勢，建立在流行的線圖標(biāo)風(fēng)格是創(chuàng)建雙色元素。




雙色圖標(biāo)可以建立在您現(xiàn)有的調(diào)色板或品牌的顏色上，或者結(jié)合幾乎任何其他顏色對。當(dāng)使用圖標(biāo)趨勢進行設(shè)計時，尋找能從您計劃使用的背景中脫穎而出的顏色對。




當(dāng)涉及到設(shè)計時，為大多數(shù)圖標(biāo)選擇一個基本顏色。使用輔助顏色來強調(diào)圖標(biāo)的元素。（設(shè)計的70%到80%使用原色，其余部分使用副色。）




這在圖標(biāo)設(shè)計中創(chuàng)建了一個重點，將有助于把眼睛吸引到設(shè)計元素，以及周圍的內(nèi)容。




圖標(biāo)“速記”













如果您瀏覽任何一個應(yīng)用程序商店，您會看到很多常見的標(biāo)記，郵件應(yīng)用程序的信封，生產(chǎn)力應(yīng)用程序的檢查，安全應(yīng)用程序的鎖。




這個圖標(biāo)提供了一個快速的可視信息，告訴用戶這個應(yīng)用程序在做什么。同樣的簡寫幾乎適用于所有的圖標(biāo)設(shè)計。當(dāng)設(shè)計師們嘗試用他們自己風(fēng)格的圖標(biāo)時，他們傾向于使用圖標(biāo)來表達特定的含義。




這是一件好事。一個圖標(biāo)應(yīng)該容易看到和理解一眼。圖標(biāo)應(yīng)該幫助用戶知道他們應(yīng)該做什么，以及他們應(yīng)該如何與設(shè)計交互。這種常見的圖標(biāo)速記法是如何做到這一點的一個很好的演變。




色澤鮮艷













亮色的選擇在設(shè)計的各個方面都很重要，這與圖標(biāo)沒有區(qū)別。一個明亮的顏色是一個誘人的方式來吸引眼球的圖標(biāo)。




在圖標(biāo)設(shè)計趨勢中，顏色有幾種不同的使用方式：

作為帶有白色或黑色線條樣式圖標(biāo)的背景

對于具有更逼真的外觀的全彩色圖標(biāo)元素

適用于具有更平整，漸變或超亮設(shè)計的圖標(biāo)元素




明亮家族中流行的顏色包括黃色、藍色、綠色和紫色。這些顏色往往是光明的一面，為一組圖標(biāo)設(shè)計三到五種顏色的調(diào)色板是很流行的。




不知道從哪里開始？材料面板顯示的顏色是一個很大的部分，如果顏色圖標(biāo)的設(shè)計趨勢。




圖標(biāo)標(biāo)識













注意有多少商標(biāo)上有圖標(biāo)，一旦您開始思考這個問題，在logo設(shè)計中看不到所有的小圖標(biāo)將是很困難的。




商標(biāo)中的圖標(biāo)的好處在于它與品牌名稱配合得很好，而且經(jīng)過一段時間，品牌資產(chǎn)可以獨立存在。想想上面的例子，Spotify。盡管音樂提供商的存在時間并不長（在品牌范圍內(nèi)），但這三條線構(gòu)成的圓圈是高度可識別的。




圖標(biāo)工作的顏色和沒有，一個強大的圖標(biāo)的關(guān)鍵，可以獨立或與字母。這種通用性使得我們很容易理解為什么圖標(biāo)是logo設(shè)計中的流行元素。




圈













圓形是最和諧的形狀之一，說到圖標(biāo)設(shè)計，它們相當(dāng)受歡迎。從包含在球體中的圖標(biāo)到對象中的圓圈，使用圓圈創(chuàng)建一個設(shè)計標(biāo)記可以為用戶建立正確的感覺。




圓圈在圖標(biāo)設(shè)計中的部分影響可能會與谷歌在材料設(shè)計方面提出的一些指導(dǎo)原則相聯(lián)系，所有這些圓形按鈕都非常適合在手機上輕敲，同樣的理念也適用于圖標(biāo)設(shè)計。（只要想想圖標(biāo)是可觸摸或可點擊元素的頻率就知道了。）




關(guān)于這個圖標(biāo)趨勢的一個小技巧是在所有使用其他形狀的地方網(wǎng)格化圓圈。應(yīng)用程序的圖標(biāo)往往是方形的；社交媒體的個人資料是圓形的（和正方形的）。




在創(chuàng)建圓形圖標(biāo)時，請確保圖標(biāo)設(shè)計的內(nèi)容在小尺寸時易于理解，因為您必須經(jīng)常縮小它以適應(yīng)其他位置。




線條風(fēng)格圖標(biāo)設(shè)計













線條風(fēng)格的圖標(biāo)似乎是永遠不會過時的趨勢。




部分原因是這種圖標(biāo)風(fēng)格可以在任何背景類型的任何地方工作。由于這種通用性，許多流行的可下載圖標(biāo)包通常包括線條風(fēng)格的設(shè)計。




在上面的例子中很容易看出這一點，每個圖標(biāo)都很容易看到和理解在實際任何大小。




簡單元素和表示













與2020年的大多數(shù)其他設(shè)計趨勢一樣，簡潔也是圖標(biāo)設(shè)計的一部分。簡單的形狀和地理結(jié)合起來創(chuàng)建了幾乎過于簡單的圖標(biāo)表示。




結(jié)果是一個相當(dāng)巧妙的設(shè)計，使用戶看起來。




在上面使用食物圖標(biāo)的例子中，每個圖標(biāo)都使用圖標(biāo)中相同的圓圈線。這可以是圖標(biāo)本身的整體形狀，也可以是圖標(biāo)設(shè)計的一部分。這個形狀將項目中的每個圖標(biāo)彼此連接起來。




帶有漸變的圖標(biāo)













漸變色趨勢已經(jīng)成為2019年的主導(dǎo)主題之一，也是圖標(biāo)設(shè)計的一個因素。從簡單的線條線條的漸變（如上面的例子）到全漸變著色到漸變背景上的白色圖標(biāo)，這種配色方案很流行。




這可能就是在圖標(biāo)中使用漸變的吸引力所在（總體而言），有很多不同的方式來使用這一趨勢。您可以添加一個漸變，但仍然沒有一個項目看起來像其他的東西。




注重簡單的著色













圖標(biāo)設(shè)計師對顏色也采取了相反的方法，堅持使用簡單的，更有限的，更基本的調(diào)色板來處理這些小的設(shè)計元素。




使用有限的調(diào)色板是個好主意。在這么小的設(shè)計中，過多的色彩和細節(jié)會很快淹沒空間，對眼睛造成壓力。




您不希望用戶不得不去思考圖標(biāo)是什么或者顏色意味著什么。限制細節(jié)的數(shù)量-包括精心著色-可以使每個單獨的圖標(biāo)更容易看到和理解。這對于最小尺寸使用的圖標(biāo)來說是最重要的。




所有應(yīng)用程序風(fēng)格







圖標(biāo)如此受歡迎的原因之一是我們已經(jīng)開始為幾乎所有的東西設(shè)計圖標(biāo)了。從應(yīng)用程序圖標(biāo)到favicon或桌面圖標(biāo)的應(yīng)用程序風(fēng)格的圖標(biāo)，這種風(fēng)格幾乎無處不在。




應(yīng)用程序風(fēng)格的圖標(biāo)有自己獨特的風(fēng)格。這包括：

方形

圓邊

彩色背景（通常是一種顏色）

圖標(biāo)內(nèi)的簡單形狀

圖標(biāo)和背景顏色之間的對比強烈

沒有文字或文字




厚而均勻的筆觸













不僅線條風(fēng)格的圖標(biāo)很流行，而且粗線條筆畫的圖標(biāo)尤其流行。




這些圖標(biāo)通常是為單色應(yīng)用程序設(shè)計的，通常在彩色或照片背景上以白色或黑色使用。




粗的、均勻的筆畫的圖標(biāo)最常單獨使用，比如購物車圖標(biāo)或聯(lián)系人圖標(biāo)。它們并不經(jīng)常用于圖標(biāo)集合中。




平面圖標(biāo)仍然很受歡迎













雖然平面設(shè)計的硬焦點已經(jīng)消失，圖標(biāo)設(shè)計仍然是相當(dāng)平坦（或至少幾乎平坦）。




這可能是由于超級簡單的性質(zhì)的平面設(shè)計和想法，這一外觀可以集成其他風(fēng)格相當(dāng)容易。




甚至看看這里的圖標(biāo)設(shè)計示例和趨勢，您會發(fā)現(xiàn)很多都是扁平的。（例如，線條風(fēng)格的圖標(biāo)幾乎都是平面的。）




Emoji圖標(biāo)













表情符號幾乎已經(jīng)成為了他們自己的語言，一種越來越被普遍接受的更視覺化的交流方式。




圖標(biāo)設(shè)計也呈現(xiàn)出一種表情符號風(fēng)格。這些圖標(biāo)是可識別的，因為一個人或生物的頭部形狀的焦點。（上面這些受《星球大戰(zhàn)》啟發(fā)的表情符號是如何享受圖標(biāo)設(shè)計樂趣的好例子。）




這種樣式的圖標(biāo)可以很好地用于聯(lián)系頁面，或者用于在設(shè)計中表示人物或角色。




如何設(shè)計更好的圖標(biāo)













制作一個好的圖標(biāo)或一組圖標(biāo)不僅僅是在圖標(biāo)設(shè)計的一些最新趨勢。由于圖標(biāo)的尺寸較小，對細節(jié)和精度的關(guān)注是設(shè)計過程中一個重要的部分。




在2019年，簡單的規(guī)則仍然適用于圖標(biāo)設(shè)計。把這些指導(dǎo)方針和上面的一些趨勢想法結(jié)合起來，創(chuàng)造出您會喜歡的東西：

從網(wǎng)格開始

用幾何構(gòu)造

創(chuàng)造獨特的形狀

給圖標(biāo)留出足夠的空間

堅持您的品牌色彩

使用一致的草皮

設(shè)計為您所需的最小尺寸

不要裝飾




圖標(biāo)設(shè)計準則




跟上潮流的一個好方法是看一下圖形標(biāo)準和樣式指南，每一次蘋果或谷歌改變他們的方法，其他公司也會改變。部分原因是他們不得不這么做，部分原因是新的風(fēng)格往往反映了圖標(biāo)設(shè)計的時代和趨勢。




您可以在此處找到指南：

蘋果應(yīng)用程序圖標(biāo)

Android應(yīng)用程式圖示

材料設(shè)計產(chǎn)品圖標(biāo)

材料設(shè)計系統(tǒng)圖標(biāo)




結(jié)論




圖標(biāo)是一個有用的設(shè)計工具，從應(yīng)用程序圖標(biāo)到網(wǎng)站設(shè)計標(biāo)記，從圖標(biāo)到可以用于logo或整個設(shè)計項目的凹痕，圖標(biāo)都是一個永久存在的標(biāo)記。




方法圖標(biāo)設(shè)計在相同的方式，您會幾乎任何其他項目，但真正考慮簡單和大小。圖標(biāo)是用來快速查看的，通常很小。這對設(shè)計有很大的影響。