我們本期分享的主題是"寫實圖標"。有的同學會問，寫實圖標不是已經很落伍過時了嗎？為什么還講它。這緣由有個同學提出的一個問題，這類問題在初學UI時經常遇到。這個問題就是，圖標畫完后發出來詢問需要怎樣調整，是否要追加內容，又或者尋求大家的建議以便改進。

每當看到這個問題時，我很難在群用幾句解答。即使是造型問題、配色問題或者細節處理問題，我也很難用幾句自圓其說，聽的同學也未必真能理解，還要客套地說聲謝謝。所以我在群里選擇了沉默，思考了一段時間，寫下本文，希望能夠解答這個同學的疑問，也希望能給其他人一些啟發。

從UI設計出現，發展到2016年的今天，寫實圖標使用率已經大不如前。在收集本文資料的時候，我發現以前比較擅長設計寫實圖標的團隊SoftFacade，其官網作品也從寫實轉移到扁平化；前兩個月大名鼎鼎的Instagram的logo也從寫實變為扁平化了。寫實圖標的潮流已經過去，所以近年來設計師除了做"主題"外，就很少接觸寫實圖標的設計了。作者不是主題設計的圈內人，而且身邊的同學朋友用主題的情況也比前幾年少多了，所以制作寫實圖標的機會實在不多了。

盡管如此，寫實圖標還是有進化和延展的。由于傳統的寫實圖標需求已經大不如前，但是如運營配圖、前置引導、新手引導這類需要畫圖的需求日益增加，而里面的設計元素或多或少跟寫實圖標有點沾邊。我在本篇文章的最后，把它定義為寫實圖標的延展——"運營圖"。

而在這之前，我還是想說一下寫實圖標。

本人覺得寫實圖標是UI設計的基礎，跟現今UI設計師常做的運營圖有千絲萬縷的聯系。就如同初學畫畫，都是從單個靜物開始，之后畫多個靜物組合，再推通過構圖把多個靜物組成一幅圖畫。

寫實圖標設計更像畫單個靜物，寫實圖標風格很多，無法量化，以前也看到不少同事把圖標畫得跟實物一樣，而現今都會對實物有一定的變形和精簡，為求達到視覺、表意呈現最好的效果。

單個靜物（圖片來源于百度圖片）

單個寫實圖標（圖片來源behance）

一組靜物（圖片來源于百度圖片）

一組寫實圖標（圖片來源dribbble）

如下圖，無論風格，要畫出一個相機，我們用來呈現表意的方法有很多。

怎么樣畫好一個寫實圖標

由于畫好一個寫實圖標的方法很多，本文只闡述"基礎君"的觀點。條條大道通羅馬，如果讀者有更好的方法，本文方法只作為一個參考。

臨摹

臨摹在寫實圖標的修煉里是非常重要的階段。臨摹并不只是讓同學們直接模仿別人的優秀圖標，而應該注重在臨摹的過程中學習下面幾件事情。

熟悉設計工具：因為大部分的效果都依賴設計工具，如投影如何做、描邊如何做、高光如何打、反射光如何做，等等，這些都是軟件層面的事情，臨摹能讓你快速掌握這些技能的實際應用。

理解作者的想法：如同是一個相機圖標，別人為什么要這樣畫，他是怎樣對物品進行變形的，他突出了圖標的哪些部分，弱化了哪些部分…… 這些方面都能給自己一些啟發。

了解作品的配色：對于初學者甚至可以模仿學習別人的配色，如我們要使用黑色時，并不是真的"純黑色"，往往會在黑色中加入其他顏色，讓黑色"偏一點"。

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

畫好寫實圖標有一定的難度，以下是一些優秀的寫實圖標示例。

·美術基礎

上面說到了，臨摹是一種方法，但是這種方法對于每個人的成長未必是一樣的。比如，有美術基礎的同學進行臨摹練習，效果肯定比沒有美術基礎的同學更好，當然"天才"不在討論范圍里。為什么說美術基礎重要？簡單點說，就算是按照教程進行臨摹，圖標達到與對比物非常高的相似度，但是很多同學還是不知道其中的精髓，如不了解為什么要加這個投影，為什么要加這個反光，配色怎么樣才好看，什么是對比色，造型怎么處理……所以對于這些同學來說，美術基礎的練習還是很有必要的。

如果想知道所以然，感興趣的同學可以去找相關網絡文章或者書籍學習一下，可以從幾何體、靜物基礎、結構素描、形態與分析、造型基礎等方面進行補充學習，當然也可以報一個美術基礎班快速"充電"。

這些美術基礎教程，我就不多介紹，在各電商就能找到很多，如果想了解可以聯系作者。

這些素描看起來跟UI設計好像關系并不大，但是基礎就是基礎，無法逃避。

·其他方法

3D設計工具可以幫助設計師。以前也遇到一些UI設計師通過使用3D軟件進行圖標繪制，甚至還進行夸張的渲染。雖然作者沒有深入研究，但是該方法的代價是，除了具備美術基礎外，還需要掌握Photoshop或者Sketch以外的3D軟件。雖然每款軟件做出來的作品都有自身的優勢，但是畢竟每個人的時間和精力都是非常有限的。

3D軟件做出來設計元素，有可能用于UI設計上。

圖片來源于dribbble

·總結和練習

如其他專業一樣，如果做某件事達到一萬小時的時候，就可能成為這個領域的專家。多練習、多與優秀作品對比，反復做這個簡單的事情，你就可以有很大的進步。而且平時多思考為什么別人能畫得比自己好，把自己的作品和優秀作品放在一起多對比一下，把問題找出來并把問題解決。

如下圖，就算是兩個再優秀的作品擺在一起，想法細節度的比較都能呈現，也能找出自身的問題，也可以重新思考為什么別人會這樣畫，東西的好壞是比出來的。

寫實圖標與運營圖的一些聯系

上面提到，作者把運營圖作為寫實圖標的延展，為什么我要這樣定義？運營圖更像靜物組合圖畫，由一個或多個物體通過有組織的合理構圖進行描繪。有些同學說，那拼貼等平面設計方式也可以做運營圖咯？我認為，做運營圖的方法同樣也有很多，如果要列出實際的制作方法，估計不是一篇文章能詳細描述清楚的。但是UI設計時常遇到的新手引導、前置引導、小banner、小配圖，為了達到APP實際風格效果，也會嘗試使用"全繪制"方式。這些配圖里的設計元素全部通過手繪、鼠繪方式制作，如果只拿其中一個設計元素來看，跟寫實圖標極其相似，當然這里也會存在一些風格差異。

如下圖這些配圖設計：

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

以上就是寫實圖標繪制方法介紹，大家學會了嗎？希望能對大家有所幫助！