火星網(wǎng)校
擁有一致性與連貫性的圖標設(shè)計技巧大揭秘！
發(fā)布時間：2024-08-28 17:01:40 瀏覽量：123次
創(chuàng)建一致并連貫的圖標組合，不是一件簡單的任務(wù)！
想要掌握圖標設(shè)計的7個專業(yè)設(shè)計訣竅？一起來了解吧！
圖標設(shè)計是一項能夠代表物品、動作、程序等圖形象征的過程。無處不在的圖標，無論是街道標志、手機還是網(wǎng)頁，你都能看到它們。為確保各尺寸的可讀性，它們通常是平面設(shè)計，具有清晰的邊緣和平滑的曲線。
圖標的主要目的是快速而清晰地傳達視覺信息，打破語言障礙，為所有觀看者提供信息。在促進特定動作方面至關(guān)重要，例如導(dǎo)航至機場，或是在軟件界面中使用不同的命令。
隨著時間的發(fā)展，網(wǎng)站設(shè)計需求的增加讓數(shù)字圖標變得更加重要。你可以在Sketch、或者像是Adobe Illustrator等軟件中設(shè)計圖標。
需要一些幫助以完成下個圖標設(shè)計項目？繼續(xù)閱讀，精通圖標設(shè)計的7個寶貴技巧！
1. 堅持單一風格
在沉浸于圖標設(shè)計前，請先思考風格方向。這不只代表要讓所有圖標保持特定的視重、顏色或美學。風格方向也需要將圖標出現(xiàn)位置以及人們的觀看方式納入考慮。為程序接口設(shè)計的圖標與大型海報用的圖標就有所不同。
插畫師PureSolution作品
決定了圖標風格方向之后，請保持一致。擁有多種變化與視重的圖標組可能會自相矛盾。如果不確定圖標是否彼此相搭，你可以將他們擺放在一起，然后判斷哪一個圖標不合群。
不要匆忙行事；完善圖標組可能會需要好幾次的修改。
2. 忠于特定題材
瀏覽圖標組會注意到的主要內(nèi)容就是特定而一致的主題。圖標組通常都有指定主題，不論那是音樂程序還是銀行網(wǎng)站。
塞爾維亞插畫師Keep Calm and Vector作品
如果覺得你的圖標組太模糊，請堅持單一主題或題材。舉例來說，相較于混用醫(yī)療與辦公用品圖標，請思考與醫(yī)療產(chǎn)業(yè)密切相關(guān)的圖像。
混合超過一種類別的圖標，可能會讓圖標組產(chǎn)生混淆且妨礙設(shè)計訊息。
3. 運用網(wǎng)格
你曾試過在空白紙張上設(shè)計圖標嗎？隨著時間過去，你畫出的線條和形狀會開始不平直并且參差不齊──如果不在稍后整理就會變成一團糟。
擁有像素完美圖標的秘訣就在方形網(wǎng)格上。網(wǎng)格能夠充當圖標的邊界──它們激勵你在有限的空間里創(chuàng)作。
仰賴網(wǎng)格的設(shè)計師通常都有特定的設(shè)計風格，并且在整個圖標組里保持相同的尺寸。
羅馬尼亞插畫師Dacian G作品
開始設(shè)計下個圖標組之前，請從網(wǎng)格或方格紙開始，以便輕松地在邊界里設(shè)計。網(wǎng)格紙能夠加速設(shè)計流程，而且可以避免不必要的修改。
4. 全程使用相同配色
大多數(shù)的設(shè)計師，在早期就會了解：一致的配色對設(shè)計來說有多重要！圖標設(shè)計也不例外！全程保持一致的配色，能夠讓多個圖標彼此間擁有連貫性。
選擇配色時，請確認顏色符合圖標組主題。舉例來說，復(fù)古色調(diào)可能就不適合計算機零件的圖標組。
插畫師vasabii作品
根據(jù)經(jīng)驗法則，請避免在圖標中使用過多色彩，保持三種顏色或更少，并且選擇能夠相搭的色調(diào)，像是互補色或相似色。
5. 保持相同的視重和尺寸
除了讓圖標組維持相同的配色之外，擁有一致的視重和尺寸也非常重要。圖標組內(nèi)如果有過多的變化，則可能會影響整體設(shè)計訊息，讓圖標看起來不匹配。
烏克蘭插畫師Bloomicon作品
如果你決定做一個圖標組，那么，請確認每個圖像的尺寸和視重都是統(tǒng)一的。例如，在上方的圖標組中，每項設(shè)計的圓圈和線條寬度都是一致的。如果覺得有疑問，請使用網(wǎng)格和標尺。
6. 設(shè)定嚴格的圖標規(guī)范
想要在圖標組里保持一致性，請設(shè)定一些規(guī)則。它們可能像是在每個設(shè)計里加入圓角矩形那樣簡單，或是更加復(fù)雜的做法，例如，在每個圖標里使用4像素的輪廓，15像素的網(wǎng)格界限，以及一致的圓圈與十字結(jié)合。
不論規(guī)則是什么都要貫徹到底。隨著時間的推移，你會發(fā)現(xiàn)圖標們開始變得協(xié)調(diào)。
白俄羅斯插畫師davooda作品
7. 確認所有尺寸的清晰度
大部分在線或程序界面的圖標，尺寸都相對的小。在設(shè)計圖標時，請嘗試重設(shè)大小，以確保每個圖標即使在最小的尺寸都能保持清晰。
精細的圖標常常在縮小時失去細節(jié)表現(xiàn)，而這會讓它們變得難以閱讀與理解。
多方位的測試圖標的不同變化，這樣能夠協(xié)助你了解，設(shè)計中哪些方面是不可或缺，而哪部分是裝飾性的。
如果你的圖標組由輪廓形狀和曲線組成，請考慮配合實色以平衡構(gòu)圖。最重要的是讓每個圖標都能有效溝通，如果圖標難以解讀，請考慮修改設(shè)計！
想要了解更多圖標設(shè)計技巧，點擊咨詢！
今天的分享，就到這里了，明天見！
喜歡你就點個
點擊自定義菜單可查看
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學UI設(shè)計要多久？培訓完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
-
10. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
