我們本期分享的主題是"寫(xiě)實(shí)圖標(biāo)"。有的同學(xué)會(huì)問(wèn)，寫(xiě)實(shí)圖標(biāo)不是已經(jīng)很落伍過(guò)時(shí)了嗎？為什么還講它。這緣由有個(gè)同學(xué)提出的一個(gè)問(wèn)題，這類(lèi)問(wèn)題在初學(xué)UI時(shí)經(jīng)常遇到。這個(gè)問(wèn)題就是，圖標(biāo)畫(huà)完后發(fā)出來(lái)詢(xún)問(wèn)需要怎樣調(diào)整，是否要追加內(nèi)容，又或者尋求大家的建議以便改進(jìn)。

每當(dāng)看到這個(gè)問(wèn)題時(shí)，我很難在群用幾句解答。即使是造型問(wèn)題、配色問(wèn)題或者細(xì)節(jié)處理問(wèn)題，我也很難用幾句自圓其說(shuō)，聽(tīng)的同學(xué)也未必真能理解，還要客套地說(shuō)聲謝謝。所以我在群里選擇了沉默，思考了一段時(shí)間，寫(xiě)下本文，希望能夠解答這個(gè)同學(xué)的疑問(wèn)，也希望能給其他人一些啟發(fā)。

從UI設(shè)計(jì)出現(xiàn)，發(fā)展到2016年的今天，寫(xiě)實(shí)圖標(biāo)使用率已經(jīng)大不如前。在收集本文資料的時(shí)候，我發(fā)現(xiàn)以前比較擅長(zhǎng)設(shè)計(jì)寫(xiě)實(shí)圖標(biāo)的團(tuán)隊(duì)SoftFacade，其官網(wǎng)作品也從寫(xiě)實(shí)轉(zhuǎn)移到扁平化；前兩個(gè)月大名鼎鼎的Instagram的logo也從寫(xiě)實(shí)變?yōu)楸馄交恕?xiě)實(shí)圖標(biāo)的潮流已經(jīng)過(guò)去，所以近年來(lái)設(shè)計(jì)師除了做"主題"外，就很少接觸寫(xiě)實(shí)圖標(biāo)的設(shè)計(jì)了。作者不是主題設(shè)計(jì)的圈內(nèi)人，而且身邊的同學(xué)朋友用主題的情況也比前幾年少多了，所以制作寫(xiě)實(shí)圖標(biāo)的機(jī)會(huì)實(shí)在不多了。

盡管如此，寫(xiě)實(shí)圖標(biāo)還是有進(jìn)化和延展的。由于傳統(tǒng)的寫(xiě)實(shí)圖標(biāo)需求已經(jīng)大不如前，但是如運(yùn)營(yíng)配圖、前置引導(dǎo)、新手引導(dǎo)這類(lèi)需要畫(huà)圖的需求日益增加，而里面的設(shè)計(jì)元素或多或少跟寫(xiě)實(shí)圖標(biāo)有點(diǎn)沾邊。我在本篇文章的最后，把它定義為寫(xiě)實(shí)圖標(biāo)的延展——"運(yùn)營(yíng)圖"。

而在這之前，我還是想說(shuō)一下寫(xiě)實(shí)圖標(biāo)。

本人覺(jué)得寫(xiě)實(shí)圖標(biāo)是UI設(shè)計(jì)的基礎(chǔ)，跟現(xiàn)今UI設(shè)計(jì)師常做的運(yùn)營(yíng)圖有千絲萬(wàn)縷的聯(lián)系。就如同初學(xué)畫(huà)畫(huà)，都是從單個(gè)靜物開(kāi)始，之后畫(huà)多個(gè)靜物組合，再推通過(guò)構(gòu)圖把多個(gè)靜物組成一幅圖畫(huà)。

寫(xiě)實(shí)圖標(biāo)設(shè)計(jì)更像畫(huà)單個(gè)靜物，寫(xiě)實(shí)圖標(biāo)風(fēng)格很多，無(wú)法量化，以前也看到不少同事把圖標(biāo)畫(huà)得跟實(shí)物一樣，而現(xiàn)今都會(huì)對(duì)實(shí)物有一定的變形和精簡(jiǎn)，為求達(dá)到視覺(jué)、表意呈現(xiàn)最好的效果。

單個(gè)靜物（圖片來(lái)源于百度圖片）

單個(gè)寫(xiě)實(shí)圖標(biāo)（圖片來(lái)源behance）

一組靜物（圖片來(lái)源于百度圖片）

一組寫(xiě)實(shí)圖標(biāo)（圖片來(lái)源dribbble）

如下圖，無(wú)論風(fēng)格，要畫(huà)出一個(gè)相機(jī)，我們用來(lái)呈現(xiàn)表意的方法有很多。

怎么樣畫(huà)好一個(gè)寫(xiě)實(shí)圖標(biāo)

由于畫(huà)好一個(gè)寫(xiě)實(shí)圖標(biāo)的方法很多，本文只闡述"基礎(chǔ)君"的觀點(diǎn)。條條大道通羅馬，如果讀者有更好的方法，本文方法只作為一個(gè)參考。

臨摹

臨摹在寫(xiě)實(shí)圖標(biāo)的修煉里是非常重要的階段。臨摹并不只是讓同學(xué)們直接模仿別人的優(yōu)秀圖標(biāo)，而應(yīng)該注重在臨摹的過(guò)程中學(xué)習(xí)下面幾件事情。

熟悉設(shè)計(jì)工具：因?yàn)榇蟛糠值男Ч家蕾?lài)設(shè)計(jì)工具，如投影如何做、描邊如何做、高光如何打、反射光如何做，等等，這些都是軟件層面的事情，臨摹能讓你快速掌握這些技能的實(shí)際應(yīng)用。

理解作者的想法：如同是一個(gè)相機(jī)圖標(biāo)，別人為什么要這樣畫(huà)，他是怎樣對(duì)物品進(jìn)行變形的，他突出了圖標(biāo)的哪些部分，弱化了哪些部分…… 這些方面都能給自己一些啟發(fā)。

了解作品的配色：對(duì)于初學(xué)者甚至可以模仿學(xué)習(xí)別人的配色，如我們要使用黑色時(shí)，并不是真的"純黑色"，往往會(huì)在黑色中加入其他顏色，讓黑色"偏一點(diǎn)"。

通過(guò)臨摹，能學(xué)習(xí)的東西還有很多很多，這里就不一一列舉，就看大家在后面自行"悟"出它的好處。所以如果是UI初學(xué)者，可以多從臨摹做起。

畫(huà)好寫(xiě)實(shí)圖標(biāo)有一定的難度，以下是一些優(yōu)秀的寫(xiě)實(shí)圖標(biāo)示例。

·美術(shù)基礎(chǔ)

上面說(shuō)到了，臨摹是一種方法，但是這種方法對(duì)于每個(gè)人的成長(zhǎng)未必是一樣的。比如，有美術(shù)基礎(chǔ)的同學(xué)進(jìn)行臨摹練習(xí)，效果肯定比沒(méi)有美術(shù)基礎(chǔ)的同學(xué)更好，當(dāng)然"天才"不在討論范圍里。為什么說(shuō)美術(shù)基礎(chǔ)重要？簡(jiǎn)單點(diǎn)說(shuō)，就算是按照教程進(jìn)行臨摹，圖標(biāo)達(dá)到與對(duì)比物非常高的相似度，但是很多同學(xué)還是不知道其中的精髓，如不了解為什么要加這個(gè)投影，為什么要加這個(gè)反光，配色怎么樣才好看，什么是對(duì)比色，造型怎么處理……所以對(duì)于這些同學(xué)來(lái)說(shuō)，美術(shù)基礎(chǔ)的練習(xí)還是很有必要的。

如果想知道所以然，感興趣的同學(xué)可以去找相關(guān)網(wǎng)絡(luò)文章或者書(shū)籍學(xué)習(xí)一下，可以從幾何體、靜物基礎(chǔ)、結(jié)構(gòu)素描、形態(tài)與分析、造型基礎(chǔ)等方面進(jìn)行補(bǔ)充學(xué)習(xí)，當(dāng)然也可以報(bào)一個(gè)美術(shù)基礎(chǔ)班快速"充電"。

這些美術(shù)基礎(chǔ)教程，我就不多介紹，在各電商就能找到很多，如果想了解可以聯(lián)系作者。

這些素描看起來(lái)跟UI設(shè)計(jì)好像關(guān)系并不大，但是基礎(chǔ)就是基礎(chǔ)，無(wú)法逃避。

·其他方法

3D設(shè)計(jì)工具可以幫助設(shè)計(jì)師。以前也遇到一些UI設(shè)計(jì)師通過(guò)使用3D軟件進(jìn)行圖標(biāo)繪制，甚至還進(jìn)行夸張的渲染。雖然作者沒(méi)有深入研究，但是該方法的代價(jià)是，除了具備美術(shù)基礎(chǔ)外，還需要掌握Photoshop或者Sketch以外的3D軟件。雖然每款軟件做出來(lái)的作品都有自身的優(yōu)勢(shì)，但是畢竟每個(gè)人的時(shí)間和精力都是非常有限的。

3D軟件做出來(lái)設(shè)計(jì)元素，有可能用于UI設(shè)計(jì)上。

圖片來(lái)源于dribbble

·總結(jié)和練習(xí)

如其他專(zhuān)業(yè)一樣，如果做某件事達(dá)到一萬(wàn)小時(shí)的時(shí)候，就可能成為這個(gè)領(lǐng)域的專(zhuān)家。多練習(xí)、多與優(yōu)秀作品對(duì)比，反復(fù)做這個(gè)簡(jiǎn)單的事情，你就可以有很大的進(jìn)步。而且平時(shí)多思考為什么別人能畫(huà)得比自己好，把自己的作品和優(yōu)秀作品放在一起多對(duì)比一下，把問(wèn)題找出來(lái)并把問(wèn)題解決。

如下圖，就算是兩個(gè)再優(yōu)秀的作品擺在一起，想法細(xì)節(jié)度的比較都能呈現(xiàn)，也能找出自身的問(wèn)題，也可以重新思考為什么別人會(huì)這樣畫(huà)，東西的好壞是比出來(lái)的。

寫(xiě)實(shí)圖標(biāo)與運(yùn)營(yíng)圖的一些聯(lián)系

上面提到，作者把運(yùn)營(yíng)圖作為寫(xiě)實(shí)圖標(biāo)的延展，為什么我要這樣定義？運(yùn)營(yíng)圖更像靜物組合圖畫(huà)，由一個(gè)或多個(gè)物體通過(guò)有組織的合理構(gòu)圖進(jìn)行描繪。有些同學(xué)說(shuō)，那拼貼等平面設(shè)計(jì)方式也可以做運(yùn)營(yíng)圖咯？我認(rèn)為，做運(yùn)營(yíng)圖的方法同樣也有很多，如果要列出實(shí)際的制作方法，估計(jì)不是一篇文章能詳細(xì)描述清楚的。但是UI設(shè)計(jì)時(shí)常遇到的新手引導(dǎo)、前置引導(dǎo)、小banner、小配圖，為了達(dá)到APP實(shí)際風(fēng)格效果，也會(huì)嘗試使用"全繪制"方式。這些配圖里的設(shè)計(jì)元素全部通過(guò)手繪、鼠繪方式制作，如果只拿其中一個(gè)設(shè)計(jì)元素來(lái)看，跟寫(xiě)實(shí)圖標(biāo)極其相似，當(dāng)然這里也會(huì)存在一些風(fēng)格差異。

如下圖這些配圖設(shè)計(jì)：

最后作者以上面幾張圖接受本期的分享。

以上就是寫(xiě)實(shí)圖標(biāo)繪制方法介紹，大家學(xué)會(huì)了嗎？希望能對(duì)大家有所幫助！