平面廣告設計

圖標UI設計的設計技法要點(diǎn)

編輯：時(shí)間：2015-03-02 09:45:05

　　在網(wǎng)上看過(guò)很多設計師的圖標制作過(guò)程,基本都是偏向技法的介紹.其實(shí)在圖標設計過(guò)程中除了技法之外最重要的就是圖標創(chuàng )意了,但這方面的系統介紹網(wǎng)上倒是很少.借這次實(shí)際的界面設計項目,來(lái)分享下一下標制作創(chuàng )意階段的方法的理解.并以豐富的圖例來(lái)闡釋自己的想法!以次作為圖形界面設計師交流的引子!歡迎大家進(jìn)來(lái)交流!

　　1）關(guān)鍵節點(diǎn)繪制法

　　擬物化設計就是盡可能的繪制繁瑣細節，追求豐富和相似度。而剪影圖標則是相反，以簡(jiǎn)練為繪制手段。但是細節就沒(méi)有嗎，不是的，而是更加謹慎認真的注重每一筆，且越來(lái)越優(yōu)雅。這里舉例剪影圖標繪制方法技巧，3步驟可以搞定，看似又簡(jiǎn)單又難，簡(jiǎn)單的是只是繪制參照物輪廓，保留基礎識別性，步驟很少；難的是這調整的過(guò)程與產(chǎn)品環(huán)境的融合性，易用性，還有你自己的創(chuàng )意想法。

　　說(shuō)簡(jiǎn)單點(diǎn)就是去繁擇簡(jiǎn)并經(jīng)過(guò)思考改造過(guò)的設計過(guò)程。而最基本的最需要犀利眼神抓準的是造型的關(guān)鍵節點(diǎn)，雛形出來(lái)后再根據想法調整。

　　提煉精華勾勒輪廓

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

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

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

　　增特有細節出風(fēng)格

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

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

　　2）精致的基礎要素

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

　　犀利清晰

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

　　·輪廓發(fā)虛

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

　　·斜形發(fā)虛

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

　　·像素不夠或多余

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

　　總結一下上面的處理方法，堅持最少發(fā)虛原則：

　　比例協(xié)調

　　圖形內部結構要注意元素構成之間的比例，有黃金比例分割也有感性的平衡方法。嚴謹的圖標比例可參照蘋(píng)果IOS圖標規范案例，打好內部統一結構線(xiàn)進(jìn)行圖形繪制和比例分配。

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

　　視差平衡

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

<< 上一篇：學(xué)習平面設計需要多久學(xué)完呢

>> 下一篇：平面設計師的成長(cháng)之路是怎樣的

推薦資訊