發(fā)布時(shí)間:2023-12-02 20:26:16 瀏覽量:158次
最近做了一組圖標(biāo)練習(xí),通過這次設(shè)計(jì)小練習(xí),總結(jié)和分享下對現(xiàn)在比較流行的線性圖標(biāo)和插畫風(fēng)圖標(biāo)的一些思路和方法和大家分享一下
我們在設(shè)計(jì)或者繪制圖標(biāo)之前,首先要搞清楚圖標(biāo)的定義,圖標(biāo)到底是什么,為什么要畫圖標(biāo)等等。圖標(biāo)是具有指代意義或者象征某種特殊含義的圖形,在不同場景下圖標(biāo)的表達(dá)含義也會(huì)有不同。
一個(gè)好的圖標(biāo),應(yīng)至少具有三個(gè)特征:?指代性——就是象征具體某個(gè)事物或含義。?識別性——因?yàn)橛辛酥复?,圖標(biāo)本身應(yīng)具有一定的識別性和辨識度,避免誤讀、抽象主義等。?審美性——一個(gè)優(yōu)秀的圖標(biāo),在視覺上也應(yīng)有良好的表現(xiàn)。
現(xiàn)在的圖標(biāo)風(fēng)格大致可分為擬物化和扁平化,兩者都有自己的優(yōu)勢,很難說到底是擬物好,還是扁平好。但在這個(gè)信息技術(shù)和互聯(lián)網(wǎng)快速發(fā)展的當(dāng)今,扁平化快速,簡單,直接的信息表達(dá)更能迎合這個(gè)時(shí)代。
而現(xiàn)流行的扁平化風(fēng)格主要有以下幾種,設(shè)計(jì)風(fēng)格因時(shí)代而變,以后甚至?xí)霈F(xiàn)更優(yōu)秀的風(fēng)格,讓我們拭目以待。
大多數(shù)初級的設(shè)計(jì)師在作一些圖標(biāo)設(shè)計(jì)和練習(xí)時(shí)常常會(huì)選用素材/臨摹這種方式,而我認(rèn)為用素材/臨摹是相對低輸入和低產(chǎn)出的方法,雖然我并不是很排斥這種學(xué)習(xí)方式,但是我們是否能找到一種高效高產(chǎn)出的學(xué)習(xí)方法呢?
那么今天我就以線性圖標(biāo)和插畫風(fēng)格的圖標(biāo)做圖標(biāo)設(shè)計(jì)的思路和方法給大家。(以下圖標(biāo)來源于網(wǎng)絡(luò),作者名忘記了,不好意思,如有侵權(quán),請與我取得聯(lián)系)
線性圖標(biāo)是一種簡約,概括,可以說跟早期的印象主義有一些關(guān)系。細(xì)節(jié)想對比較少,我們這里稱它為“減法圖標(biāo)”。細(xì)節(jié)比較豐富,有一些裝飾元素、描邊風(fēng)格、色塊填充,材質(zhì)填充等一系列圖標(biāo)風(fēng)格都可以說是插畫圖標(biāo),我們在這里稱它為“加法圖標(biāo)”。
我們先來看兩張圖,可以充分表達(dá)圖標(biāo)設(shè)計(jì)的核心:“形”,這是圖標(biāo)的核心思想。
一個(gè)圖標(biāo)的形決定你表達(dá)的圖標(biāo)的含義,所以經(jīng)常有一些小伙伴會(huì)遇到這樣的問題,“這個(gè)圖標(biāo)不太像啊”“這個(gè)圖標(biāo)是什么啊”
那首先,我們在找一些元素或者素材本身的時(shí)候,需要確定元素本身的形,就是我們之前強(qiáng)調(diào)的圖標(biāo)本身的識別性。
對應(yīng)剛才的圖標(biāo)做了個(gè)小練習(xí),分別是咖啡,狗,植物。在一定場景下,結(jié)合生活本身,圖標(biāo)也賦予了更多的含義。比如,咖啡可以代表休息。
那接下去是我具體設(shè)計(jì)圖標(biāo)的一些方法。第一步:靈感、素材的收集。
這次練習(xí)找的素材是蘋果的五個(gè)產(chǎn)品,iphone\ipad\ipod\macbook\wacth,你可以百度,也可以去蘋果的官網(wǎng)下載素材。
第二步:思考。在設(shè)計(jì)任何一個(gè)圖標(biāo)作品時(shí),我們應(yīng)多思考,多理解。首先我們要去看圖標(biāo)素材的形體結(jié)構(gòu)。
思考,分解,概括。所有物體都離不開立體幾何的拼接,比如下圖macbook的外輪廓是由一個(gè)圓角矩形和長方形組合而成。通過這樣的方法,不管什么物體,我們都可以對它的外形進(jìn)行一次幾何分解和組合。得到最終的圖形。
第三步:繪制。機(jī)械制圖加減法,這是我自己取的名稱。很多工業(yè)設(shè)計(jì)的同學(xué)應(yīng)該都學(xué)過機(jī)械制圖,有興趣的同學(xué)也可以學(xué)習(xí)下。加減法,之前有提到,線性圖標(biāo)風(fēng)格對應(yīng)的是減法,插畫風(fēng)格圖標(biāo)對應(yīng)的是加法。
物體本身都可以通過機(jī)械制圖的方法去繪制它的不同視角的視圖,我們可以通過學(xué)習(xí)這種方法,僅僅只需要一個(gè)角度的物體用線稿的方式繪制出來,這是繪制圖標(biāo)的第一步,也是非常重要的一步:“形”的準(zhǔn)確性。
這次借助的設(shè)計(jì)工具時(shí)SKETCH(強(qiáng)烈推薦啊,好處我就不多說了。沒有mac的小伙伴裝個(gè)黑蘋果吧,雖然我沒有試過。。。)用到的工具主要為上面幾個(gè):形狀,鋼筆,裁剪。
這是產(chǎn)品的立面圖,通過剛才說的機(jī)械制圖原理繪制的圖標(biāo)。
減法圖標(biāo)——一些圖標(biāo),尤其是移動(dòng)端,圖標(biāo)的按鈕大小決定了圖標(biāo)細(xì)節(jié)的取舍。線性圖標(biāo)是圖形的提煉和概括。
加法圖標(biāo)——細(xì)節(jié)豐富的插畫圖標(biāo)。通過添加描邊,填色,漸變,陰影、裝飾等細(xì)節(jié)來豐富圖標(biāo)。
"關(guān)注”另外再送你免費(fèi)PS等學(xué)習(xí)課程哦!
私信回復(fù)“學(xué)習(xí)”領(lǐng)取UI及ps課程等海量資源。
熱門資訊
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個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
9. 物聯(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è)...
10. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
最新文章
同學(xué)您好!