火星網(wǎng)校
如何優(yōu)化一組圖標(biāo)？UI設(shè)計(jì)培訓(xùn)課程的實(shí)用指南分享
發(fā)布時間：2024-08-23 09:05:40 瀏覽量：102次
很多新手小白在UI設(shè)計(jì)培訓(xùn)課程中常遇到一個棘手問題：如何系統(tǒng)優(yōu)化一組圖標(biāo)？如果你也困擾于這個問題，不妨看看下面的實(shí)用指南，幫助你解決這一難題。
我們直接來談?wù)勚攸c(diǎn)：
1. 風(fēng)格如何選取
2. 找到不足的地方
3. 透視角度的優(yōu)化
4. 顏色的優(yōu)化
5. 如何增加亮點(diǎn)
一、UI設(shè)計(jì)培訓(xùn)課程：風(fēng)格如何選取
在選擇風(fēng)格時，應(yīng)該如何抉擇呢？比如可以選擇描邊扁平風(fēng)格：
有一種輕質(zhì)感的擬物風(fēng)格：
界面常駐功能圖標(biāo)通常采用描邊、扁平風(fēng)格，而對于節(jié)日主題圖標(biāo)，如果太平會顯得冷靜，可以添加一些質(zhì)感渲染來增加氣氛。
而增加質(zhì)感可以一定程度上彌補(bǔ)造型不足，效果顯著，適合有時間限制的需求。
二、UI設(shè)計(jì)培訓(xùn)課程：找不足的方向
由于缺乏圖標(biāo)設(shè)計(jì)經(jīng)驗(yàn)，第一版樣式存在一些基礎(chǔ)性問題：
有問題并不可怕，可怕的是不知道問題所在，因此清晰有條理地找出問題也是設(shè)計(jì)師必備的能力。
我們從以下三個方面拆解問題，供大家參考：
1. 厚度的一致性：為了呈現(xiàn)輕質(zhì)感風(fēng)格，圖標(biāo)需要具有一定的立體感，即厚度，而圖中的鞭炮、小鼓看起來有些扁平，缺乏立體感。
2. 顏色的一致性：一組圖標(biāo)的顏色應(yīng)該協(xié)調(diào)一致，色相要保持統(tǒng)一，比如鞭炮的紅色較暗，而小鼓的顏色偏黃紅，這是明顯的不和諧。
3. 創(chuàng)意亮點(diǎn)的發(fā)掘：圖標(biāo)中有一只老鼠形象，意在表達(dá)一定的創(chuàng)意性，但老鼠的造型還不夠可愛飽滿，且這種創(chuàng)意與平臺品牌關(guān)聯(lián)性不強(qiáng)。燈籠是五個圖標(biāo)中相對穩(wěn)定的一個。
問題和優(yōu)化方向明確了，接下來就是進(jìn)行調(diào)整！
三、UI設(shè)計(jì)培訓(xùn)課程：造型方向的優(yōu)化
首先要優(yōu)化造型方面。
要做立體化質(zhì)感的圖標(biāo)，就不能太扁平，原有鞭炮的角度過于正面，因此在角度上進(jìn)行了調(diào)整。
此外，由于單個鞭炮顯得單調(diào)，所以增加了數(shù)量，優(yōu)化如下：
除了鞭炮之外，我們認(rèn)為小鼓的形狀不夠豐滿，難以產(chǎn)生效果，因此及時換成了錦鯉：
四、UI設(shè)計(jì)培訓(xùn)課程：顏色方面的調(diào)整
之前的顏色偏暗、有些發(fā)黃，因此我們確定了一個顏色規(guī)范，在主色調(diào)上統(tǒng)一使用相同的顏色，這樣在擴(kuò)展時不容易偏離原則：
只要嚴(yán)格遵守顏色規(guī)范，不斷比較和調(diào)整，就可以確保一組圖標(biāo)的顏色不偏離。
五、UI設(shè)計(jì)培訓(xùn)課程：創(chuàng)意方面的優(yōu)化
一組圖標(biāo)可能不是每個都有亮點(diǎn)，但至少要有一個相對特別的，這是非常必要的，否則整體會顯得平庸。
產(chǎn)生亮點(diǎn)的方法有很多，可以從風(fēng)格、透視、顏色、品牌基因等方面著手。
在風(fēng)格和顏色已經(jīng)確定的情況下，選擇在品牌基因方面進(jìn)行優(yōu)化。
例如，結(jié)合我們的吉祥物黑子和鼠的元素，讓“吉祥物黑子”穿上“老鼠外衣”，并手持春聯(lián)：
這確實(shí)是整組圖標(biāo)中最大的亮點(diǎn)，這種創(chuàng)意方法非常實(shí)用，建議大家多加練習(xí)。
最后讓我們來看看優(yōu)化前后的效果：
優(yōu)化前：
優(yōu)化后：
總結(jié)
在優(yōu)化的過程中不斷成長是關(guān)鍵，如果您有新的需求，請隨時聯(lián)系我們，留下您的寶貴意見。
想了解更多UI設(shè)計(jì)技巧，可以查看以下文章：
UI設(shè)計(jì)中節(jié)日閃屏設(shè)計(jì)指南
UI設(shè)計(jì)中下拉刷新設(shè)計(jì)使用技巧
如何做好UI底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)
UI界面下拉菜單的設(shè)計(jì)，你真的會嗎？
UI設(shè)計(jì)中的“關(guān)于我們”頁面，你真的會了嗎？
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計(jì)師的...
-
3. 移動端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識
-
4. 移動端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
5. 10個免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個:站酷站酷想必是設(shè)計(jì)師都知道的一個網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
-
10. 學(xué)習(xí)ui設(shè)計(jì)的心得
大家今天走運(yùn)了,我就把自己總結(jié)出來的學(xué)習(xí)UI設(shè)計(jì)的一些經(jīng)驗(yàn)與大家一起分享吧。想做一個好的UI設(shè)計(jì)師除了應(yīng)該具有一定的審美能力,還要了解整個產(chǎn)品的...
最新文章
