UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型(4)

來(lái)源:站酷 作者:cdc_tencent 學(xué)習(xí):9180人次

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

UI最重要組建之一就是圖標(biāo),隨著扁平化設(shè)計(jì)的發(fā)展趨勢(shì),越來(lái)越注重圖標(biāo)的簡(jiǎn)潔與寓意表達(dá),平面圖標(biāo)已占主導(dǎo)地位。每位設(shè)計(jì)師所處的階段所關(guān)注的要點(diǎn)是不一樣的,我把圖標(biāo)設(shè)計(jì)分為2個(gè)階段–初階與高階,這樣分是為了有步驟性的學(xué)習(xí)和進(jìn)階的加強(qiáng),當(dāng)然,能人的話(huà)一步到位,對(duì)于新人來(lái)講會(huì)較難,需要實(shí)際工作中輔導(dǎo)與自己經(jīng)驗(yàn)總結(jié)。我不會(huì)華麗高大尚的語(yǔ)言,但是我可以分享一些實(shí)實(shí)在在的基礎(chǔ)方法,也是這幾年會(huì)給帶的學(xué)生反復(fù)必講的入門(mén)輔導(dǎo),有自己成熟方法表達(dá)的設(shè)計(jì)師可忽略這里,這里先說(shuō)初階的設(shè)計(jì)關(guān)鍵要點(diǎn)。

【一】概念類(lèi)別

扁平化圖標(biāo)大部分無(wú)非就是剪影表現(xiàn),而這里為什么重點(diǎn)是講圖標(biāo)的形狀設(shè)計(jì),而非色彩,因?yàn)橐磺邢扔行尾趴紤]下一步。形不好再怎么營(yíng)造整體風(fēng)格都白費(fèi)力,好比建筑造型與裝修的關(guān)系,而色彩等營(yíng)造的風(fēng)格都可另起文章分析 。圖標(biāo)造型表現(xiàn)上無(wú)非就是典型的2種:面與線(xiàn) 。運(yùn)用這兩種基礎(chǔ)元素去造型也可以進(jìn)行多種組合不同的表現(xiàn) 。組合造型一般有單體造型、多個(gè)元素組合造型,線(xiàn)與面之間的獨(dú)立與結(jié)合的變化。

這類(lèi)通常是彩色一體表現(xiàn),造型和組合上較寫(xiě)實(shí),不是純剪影,是寫(xiě)實(shí)過(guò)渡來(lái)的簡(jiǎn)化,又接近剪影,扁平簡(jiǎn)化設(shè)計(jì),這里主要是利用面和顏色來(lái)進(jìn)行造型的設(shè)計(jì)。質(zhì)感風(fēng)格上也有6種(已有人分析),大概是純平面、折疊、輕質(zhì)感、折紙風(fēng)、長(zhǎng)投影、微立體。這種相對(duì)剪影的好畫(huà)很多,也更加容易塑造風(fēng)格,更多是在色彩上有得發(fā)揮和考究,用在界面里也是最為突出的。最近還非常流行用色塊來(lái)進(jìn)行二維、三維的裝飾表達(dá),叫所謂的“低面建模“,感興趣的去搜一下。

上面提到的元素組合,比如下圖這個(gè)圖標(biāo)目前是2個(gè)元素–信封加信紙,如果還要再加什么功能狀態(tài)示意,最多在右上角加個(gè)很小的消息提醒。因?yàn)樵卦蕉嘣綇?fù)雜,所表達(dá)的含義也就越多,同時(shí)也會(huì)影響造型的調(diào)動(dòng)。不管多少個(gè)元素總有一個(gè)最重要的對(duì)象,其他為輔助圖形,在塑形大小復(fù)雜度上有區(qū)別。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

1.1本文半原創(chuàng)圖例

這類(lèi)通常是單色表現(xiàn),當(dāng)然也有綜合彩色的。其更加簡(jiǎn)潔抽象, 言簡(jiǎn)意賅,高度提煉精華,講究表象意境,具有理解的門(mén)檻。所以這才是最難設(shè)計(jì)的一關(guān)。非?季吭O(shè)計(jì)的理性與感性之間在功能傳達(dá)上的邏輯思維。也是UI界所謂現(xiàn)代極簡(jiǎn)主義的代表,注意,沒(méi)把握好就會(huì)變得很“空虛”,把握好了就是時(shí)尚的feel啦~

負(fù)形圖標(biāo)是以線(xiàn)繪制的圖形,高度的輪廓概括,就跟畫(huà)骨骼一樣的要求精準(zhǔn)到位,也叫線(xiàn)形圖標(biāo)。負(fù)形剪影是所有圖標(biāo)中最講究也最難表達(dá)型的一種風(fēng)格,如果畫(huà)不好就很容易俗氣和簡(jiǎn)陋。

正形圖標(biāo)是以面繪制的圖形,也有和線(xiàn)綜合表現(xiàn)情況,自己根據(jù)需要進(jìn)行創(chuàng)造變化吧。通常與負(fù)形圖標(biāo)之間做當(dāng)前狀態(tài)的轉(zhuǎn)換,手機(jī)tab上最常見(jiàn),如ios7。

優(yōu)點(diǎn):簡(jiǎn)潔清新優(yōu)雅;極具現(xiàn)代感(雖然遠(yuǎn)古時(shí)代就有高度概括的符號(hào)表達(dá),這里指的范圍是互聯(lián)網(wǎng)上的全新應(yīng)用);具有設(shè)計(jì)與涵義綜合的拓展性;還可以完成一些抽象詞匯的圖形傳達(dá)。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

1.2本文原創(chuàng)圖例

圖標(biāo)為上傳到云端的之意,這里的主對(duì)象是云,所以箭頭和云的比例是不同的,上傳箭頭是輔助圖形。了解界定多元素之間的主次關(guān)系,就能夠把握一個(gè)整體的造型走向。典型的基礎(chǔ)表現(xiàn)就是上面兩種,然后在實(shí)際繪制中根據(jù)自己的喜好和設(shè)計(jì)來(lái)進(jìn)行融合,可以得出更加豐富的表現(xiàn)。

擬物化設(shè)計(jì)就是盡可能的繪制繁瑣細(xì)節(jié),追求豐富和相似度。而剪影圖標(biāo)則是相反,以簡(jiǎn)練為繪制手段。但是細(xì)節(jié)就沒(méi)有嗎,不是的,而是更加謹(jǐn)慎認(rèn)真的注重每一筆,且越來(lái)越優(yōu)雅。這里舉例剪影圖標(biāo)繪制方法技巧,3步驟可以搞定,看似又簡(jiǎn)單又難,簡(jiǎn)單的是只是繪制參照物輪廓,保留基礎(chǔ)識(shí)別性,步驟很少;難的是這調(diào)整的過(guò)程與產(chǎn)品環(huán)境的融合性,易用性,還有你自己的創(chuàng)意想法。說(shuō)簡(jiǎn)單點(diǎn)就是去繁擇簡(jiǎn)并經(jīng)過(guò)思考改造過(guò)的設(shè)計(jì)過(guò)程。而最基本的最需要犀利眼神抓準(zhǔn)的是造型的關(guān)鍵節(jié)點(diǎn),雛形出來(lái)后再根據(jù)想法調(diào)整。

l.提煉精華勾勒輪廓

通常在繪制已有參照物的基礎(chǔ)上去設(shè)計(jì)一個(gè)圖標(biāo),可以根據(jù)你喜歡的造型參照物去進(jìn)行分析,先抓取到參照物的關(guān)鍵節(jié)點(diǎn),幾何繪制出來(lái)一個(gè)相似的基本圖形。

2.調(diào)整線(xiàn)鋒優(yōu)雅得體

基礎(chǔ)雛形出來(lái)后就開(kāi)始加入自己的想法調(diào)整線(xiàn)鋒,線(xiàn)條走向決定造型。這個(gè)時(shí)候就得要調(diào)多幾個(gè)版本了。設(shè)計(jì)師的處女座精細(xì)和糾結(jié)情結(jié)就在這里灑汗了,不斷調(diào)整對(duì)比,挑選出一個(gè)最優(yōu)再進(jìn)行下一步。

3.增特有細(xì)節(jié)出風(fēng)格

最后一步的塑形,就是畫(huà)龍點(diǎn)睛!造型的特點(diǎn)就在這一步去完成。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.1 本文原創(chuàng)圖例

對(duì)于新老設(shè)計(jì)師來(lái)說(shuō),這樣的方法都是比較可取好用的,交互設(shè)計(jì)師也可以這樣快速入門(mén)哦親!尤其是第一步驟,能否非常快速的出雛形。下面是其他案例的設(shè)計(jì)方法欣賞,跟我上面總結(jié)的一樣道理。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.2圖例來(lái)源于Digial Art

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.3圖例來(lái)源于iconwerk

精致即精細(xì)極致?此坪(jiǎn)單的圖標(biāo)其實(shí)并不是隨便了事,但知道了這些基本要素你就可以完成一個(gè)合格的圖標(biāo)了。好的圖標(biāo)是謹(jǐn)慎認(rèn)真的注重每一筆每一像素每一矢量錨點(diǎn)的,盡可能的往精美優(yōu)雅的方向努力吧騷年~

1.犀利清晰

需要鍛煉厲害的眼睛,使出你的火眼金星捕捉每個(gè)像素之差,像素滿(mǎn)格才能清晰的呈現(xiàn),細(xì)分出來(lái)通常會(huì)遇到以下3種情況,這也是最影響圖標(biāo)基本質(zhì)量的問(wèn)題點(diǎn)。

1)輪廓發(fā)虛

圖標(biāo)一定要用矢量繪制,但是新手很容易犯的第一個(gè)錯(cuò)誤就是圖標(biāo)模糊的問(wèn)題,也不清楚為何會(huì)這樣。其實(shí)就是矢量邊緣模糊產(chǎn)生的問(wèn)題,也是個(gè)人繪制的不良習(xí)慣造成。避免這個(gè)問(wèn)題,必須在100%畫(huà)布上繪制圖形,而且不能直接推動(dòng)圖標(biāo)放大縮小,即使這樣改變大小了也要放大畫(huà)布調(diào)整路徑的錨點(diǎn),反復(fù)查看及校正是否對(duì)齊1px網(wǎng)格,而不是0.1~0.9px,正是不滿(mǎn)1px格才會(huì)生產(chǎn)虛線(xiàn)。而圓形的繪制保證十字架4個(gè)邊緣點(diǎn)對(duì)準(zhǔn)就可以了。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.4本文原創(chuàng)圖例

2)斜形發(fā)虛

斜線(xiàn)也是會(huì)有模糊與精致之分的,不仔細(xì)對(duì)比其實(shí)是比較難看到問(wèn)題,可能很多人都會(huì)碰到圖形進(jìn)行傾斜效果時(shí)是有鋸齒的,那就是角度的處理問(wèn)題了,自己進(jìn)行多角度對(duì)比下試試,會(huì)發(fā)現(xiàn)哪一個(gè)角度最清晰。也可以將圖層進(jìn)行雙層疊加,會(huì)非常犀利哦~

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.5本文原創(chuàng)圖例

3)像素不夠或多余

看下來(lái)都是像素發(fā)虛與清晰的原因都是一樣的,下面這個(gè)例子是箭頭在小尺寸情況下可點(diǎn)陣矢量像素繪制,如果是大尺寸(如上面最大的箭頭示例)可以直接鋼筆繪制。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.6本文原創(chuàng)圖例

總結(jié)一下上面的處理方法,堅(jiān)持最少發(fā)虛原則:

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.7本文原創(chuàng)圖例

2. 比例協(xié)調(diào)

圖形內(nèi)部結(jié)構(gòu)要注意元素構(gòu)成之間的比例,有黃金比例分割也有感性的平衡方法。嚴(yán)謹(jǐn)?shù)膱D標(biāo)比例可參照蘋(píng)果IOS圖標(biāo)規(guī)范案例,打好內(nèi)部統(tǒng)一結(jié)構(gòu)線(xiàn)進(jìn)行圖形繪制和比例分配。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.8來(lái)自蘋(píng)果圖標(biāo)及來(lái)自Seevi Kargwal圖例

如果頭眼昏花嫌麻煩,也可靠經(jīng)驗(yàn)感覺(jué)快速完成一個(gè)具有平衡感的圖標(biāo)。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.9本文原創(chuàng)圖例

3. 視差平衡

同一個(gè)尺寸規(guī)格,但根據(jù)不同形狀的圖標(biāo),會(huì)導(dǎo)致面積占比引起的視差大小不同,但要在參考尺寸范圍內(nèi)繪制進(jìn)行調(diào)整。以下圖標(biāo)示例都是撐滿(mǎn)方框邊緣繪制,按道理這好像是準(zhǔn)確的,但由于人的肉眼會(huì)有視差問(wèn)題,所以做的設(shè)計(jì)就要暫時(shí)拋開(kāi)科學(xué),以人的真實(shí)情況去判斷再調(diào)整。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

2.10本文原創(chuàng)圖例

能夠熟悉掌握完以上基礎(chǔ)要素,恭喜你可以大膽的去創(chuàng)造系列圖標(biāo)了,當(dāng)個(gè)數(shù)圖標(biāo)設(shè)計(jì)確定好后,接力的圖標(biāo)必須延展其風(fēng)格設(shè)定:造型規(guī)則、樣式、細(xì)節(jié)特征等要素統(tǒng)一設(shè)計(jì)–繁衍具同視覺(jué)與內(nèi)在含義屬性的圖標(biāo)。

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

3.1圖例來(lái)源于iconwerk

Ps:我非常欣賞iconwerk的圖標(biāo)設(shè)計(jì),只因我在5年前發(fā)現(xiàn)他的剪影圖標(biāo)作品一直到現(xiàn)在都是那么愛(ài)。傳送門(mén):http://iconwerk.de/iconwerk10/index.html

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

3.2本文原創(chuàng)圖例

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

3.3圖例來(lái)源于Yorlmar Campos

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

3.4圖例忘記來(lái)源于哪位設(shè)計(jì)師了

UI知識(shí),圖標(biāo)設(shè)計(jì)初階要先型_m.tgudhdp.cn

3.5圖例來(lái)源于Jee

【結(jié)尾】

值得注意的是在簡(jiǎn)約與裝飾之間的平衡要靠自己的把握,正是這個(gè)把握的度是考驗(yàn)設(shè)計(jì)師是否成熟的表現(xiàn)。進(jìn)階的優(yōu)秀圖標(biāo)是能夠平衡于識(shí)別性、簡(jiǎn)約與裝飾之間的琢磨,具有功能又具情感的。希望本文對(duì)新同學(xué)有幫助,歡迎一起探討和補(bǔ)充。

作者:milaky

    l 簡(jiǎn)化的微寫(xiě)實(shí)圖標(biāo) l. 剪影的正負(fù)形圖標(biāo) 【二】設(shè)計(jì)技法要點(diǎn) 1、關(guān)鍵節(jié)點(diǎn)繪制法
    2、精致的基礎(chǔ)要素 【三】系列成型圖標(biāo)

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
用戶(hù)10240408622019-01-20 02:39
喜歡
圣吟乾坤2018-08-02 10:48
贊一個(gè)
愛(ài)我別走2018-02-17 08:30
瞧瞧

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!