他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

輕擬物風格圖標設計

2020-9-2    資深UI設計者

輕擬物的核心知識

輕擬物本身也是擬物,所以它的核心基礎和擬物設計師一致的,只是省略了更多復雜的細節(jié)。而對于整個擬物的體系來講,最重要的東西實際上只有2個,形體、光影。

1. 形體表現

形體的表現,就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中,有寫過面性圖標進階的設計中,可以包含更多的細節(jié)、內部元素,而不是僅僅只有外輪廓。

大廠都在用的輕擬物設計風格,本文教你四步完成!

輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上,即你要把這個圖形的內容有明確的示意并畫出來,而不是用抽象的圖形做填充而已。

比如大眾點評的快速入口圖標,雖然看起來很復雜,但是那是配色上的復雜,而不是形體輪廓上的具象化。

大廠都在用的輕擬物設計風格,本文教你四步完成!

換句話說,擬物插畫的圖形基底,類似扁平插畫風格圖標,不能表現得太抽象,也不能增加過多的細節(jié),需要一種恰到好處的平衡(玄學),這就非常考驗設計師的判斷和經驗了。

并且,在描繪輪廓的時候,新手盡可能的采取正視圖來進行繪制,而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面,這樣難度會大幅度上升,比如下面這種情況。

大廠都在用的輕擬物設計風格,本文教你四步完成!

2. 光影表現

除了形體外,光影就是整個擬物的靈魂了。

當一個完整的圖形完成填充色時,它是扁平圖案,如果完成光影呈現的時候,它就是三維空間的立體圖形,比如下面這個圓的案例:

大廠都在用的輕擬物設計風格,本文教你四步完成!

在擬物的設計中,我們對光影的定義是至關重要的,所以首先就是針對該圖形確定光源的方向,是上方、前方、左上還右上,這對后續(xù)的設計有一連串的影響。

大廠都在用的輕擬物設計風格,本文教你四步完成!

如果對光影沒有正確的解釋,那么在制作細節(jié)的漸變角度、投影的使用上,就會產生錯誤的設計,造成光影視覺沖突和矛盾。

在創(chuàng)建了光源以后,物體受到光線的影響就會產生明暗面和投影,可以簡單劃分成4個部分,高光、亮部、暗部、投影。

大廠都在用的輕擬物設計風格,本文教你四步完成!

這和我們學習的素描有一定的差異,美術中對光影的表現還會包含明暗交界、反光面,這對于輕擬物的來說負擔太重,所以我們要去掉它們,接下來重點講講高光和暗部。

高光是物體作為受光物對光源的直接反映,比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現,再或者一拳超人中男主光頭上長期存在的高光配飾(多數動畫的光頭角色都有)……

大廠都在用的輕擬物設計風格,本文教你四步完成!

高光可以非常有效的增加畫面的層次和對比性,讓物體看上去更有沖擊力和觀賞性。

而暗部,則完全是為了正常表現物體結構和弧度增加的示意,因為不在受光面,所以顏色會變暗。在實際操作過程中,我們可以通過漸變的方式開控制明暗的表達,但盡量不要直接手動設置一個漸變色出來,而是為它疊加暗部或亮部的黑白透明度漸變。

大廠都在用的輕擬物設計風格,本文教你四步完成!

了解這幾個特性以后,下面,我們就通過一個實例來講解一下輕擬物設計的過程吧。

輕擬物實例演練

作為輕擬物的演示,直接畫個圖標講一遍怎么操作是沒什么用的,我們要從實際場景出發(fā),用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁:

大廠都在用的輕擬物設計風格,本文教你四步完成!

總結它的問題,不難發(fā)現首頁頂部業(yè)務功能太多了,頂部圖標就包含30個(加滑動的),雖然每個模塊圖標單看都沒有硬傷,但堆積到一起,就使得頂部缺乏足夠的信息層級和對比性。

我們要做的,就是通過輕擬物的方式,調整快速入口最大的三個圖標,凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始,講解一下如何完成輕擬物化設計的升級。

第一步:確認輪廓造型

第一個操作,即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動,包括加粗車頭,減少高度,增加車燈等。并對每一個模塊進行純色的填充,定義它們的色彩和做出區(qū)分。

形體的重要性在于要對圖形本身有比較合理的呈現,不要讓比例失調和圖不達意。

大廠都在用的輕擬物設計風格,本文教你四步完成!

第二步:完善圖形細節(jié)

這一步,就要在原有基礎上,進行下一步的深入。包括對一些細節(jié)交代得更清楚一點,增加一些有趣的小元素等等,完善它的具體樣式。

大廠都在用的輕擬物設計風格,本文教你四步完成!

第三步:增加基礎的暗部表現

在這里,我們就要開始為圖標增加高光了,高光從右上角打下來,那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現,讓整體的立體感稍強。

這一步在軟件中主要使用蒙版功能,通過蒙版在背景上方創(chuàng)建一個圖層,然后添加深色的透明度漸變,就可以表現出對暗部和投影的效果。

大廠都在用的輕擬物設計風格,本文教你四步完成!

第四步:增加高光效果

接著,就是最后一步,將高光添加到畫面中來,將整個圖標的質感進行拉升。

大廠都在用的輕擬物設計風格,本文教你四步完成!

通過上面的演示,我們可以將整個擬物設計流程精簡成:

  • 確定圖形基本輪廓、外形比例、模塊色彩
  • 豐富細節(jié)樣式增加趣味性和適當的擬真感
  • 通過蒙版添加暗部來完善表現的明暗和層級關系
  • 添加高光元素作為圖形的亮點,拉升層次感

然后,通過這樣的步驟,再來完成后續(xù)的兩個圖形,拆解完的效果如下。

大廠都在用的輕擬物設計風格,本文教你四步完成!

大廠都在用的輕擬物設計風格,本文教你四步完成!

然后,再用這三個修改后圖標套用進原來的頁面,并做出對應的修改,再來看看前后對比:

大廠都在用的輕擬物設計風格,本文教你四步完成!

通過這個對比,我們就可以看出在這個復雜的首頁頭部中,輕擬物風格可以從一眾平面中被凸顯出來,且不會顯得太突兀和復雜。

而這就是輕擬物在項目設計中的實際作用,當畫面元素已經開始超負荷,且容易導致同質化的審美疲勞和主次不清時,就是輕擬物登場的時候了。

總結

最后的總結,學習輕擬物就是增加我們完成界面視覺輸出的可能性,為視覺創(chuàng)意增加一些儲備彈藥,以應對越來越復雜的互聯網產品和職業(yè)要求。

我們只在這篇羅列了制作的順序和思路,并沒有把軟件的操作完全放出來,一方面是因為時間上來不及,另一方面是希望大家不會被軟件的使用框住。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。


文章來源:站酷    作者:超人的電話亭

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔