【設計經(jīng)驗】圖標設計初階要先型(上)

0 評論 9780 瀏覽 7 收藏 9 分鐘

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

目錄:

一. 概念類別

二. 設計技法要點

三. 系列成型圖標

——————————————————————————————————————————-

【一】概念類別

扁平化圖標大部分無非就是剪影表現(xiàn),而這里為什么重點是講圖標的形狀設計,而非色彩,因為一切先有形才考慮下一步。形不好再怎么營造整體風格都白費力,好比建筑造型與裝修的關系,而色彩等營造的風格都可另起文章分析 。圖標造型表現(xiàn)上無非就是典型的2種:面與線 。運用這兩種基礎元素去造型也可以進行多種組合不同的表現(xiàn) 。組合造型一般有單體造型、多個元素組合造型,線與面之間的獨立與結合的變化。

· 簡化的微寫實圖標

這類通常是彩色一體表現(xiàn),造型和組合上較寫實,不是純剪影,是寫實過渡來的簡化,又接近剪影,扁平簡化設計,這里主要是利用面和顏色來進行造型的設計。質感風格上也有6種(已有人分析),大概是純平面、折疊、輕質感、折紙風、長投影、微立體。這種相對剪影的好畫很多,也更加容易塑造風格,更多是在色彩上有得發(fā)揮和考究,用在界面里也是最為突出的。最近還非常流行用色塊來進行二維、三維的裝飾表達,叫所謂的“低面建?!薄?/p>

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

·剪影的正負形圖標

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

負形圖標是以線繪制的圖形,高度的輪廓概括,就跟畫骨骼一樣的要求精準到位,也叫線形圖標。負形剪影是所有圖標中最講究也最難表達型的一種風格,如果畫不好就很容易俗氣和簡陋。

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

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

2

3

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

【二】設計技法要點

1、關鍵節(jié)點繪制法

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

·提煉精華勾勒輪廓

通常在繪制已有參照物的基礎上去設計一個圖標,可以根據(jù)你喜歡的造型參照物去進行分析,先抓取到參照物的關鍵節(jié)點,幾何繪制出來一個相似的基本圖形。

·調(diào)整線鋒優(yōu)雅得體

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

·增特有細節(jié)出風格

最后一步的塑形,就是畫龍點睛!造型的特點就在這一步去完成。

對于新老設計師來說,這樣的方法都是比較可取好用的,交互設計師也可以這樣快速入門哦親!尤其是第一步驟,能否非??焖俚某鲭r形。下面是其他案例的設計方法欣賞,跟我上面總結的一樣道理。

連接下文>>【設計經(jīng)驗】圖標設計初階要先型(中)

本文來源:ui.com

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!