扁平化設計:高光、陰影

6.jpg
有了基本雛型後可以開始添加細節,從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性,扁平化設計將視覺元素抽掉很多,高光、漸層、陰影等基本組成因此變得更重要,更需要注意每 1px 的細部處理。

  1. 將放大鏡icon的顏色改為淺灰。
    1.jpg

  2. 設定高光,使用圖層樣式的內陰影,色彩為#ffffff純白。
    2.jpg

  3. 設定陰影。注意「尺寸」為0,陰影才不會模糊有毛邊。如果這個icon尺寸較小,可以只做到這個步驟就算完成。
    3.jpg

  4. 如果這個icon尺寸較大,需要更多細節時,可以設定漸層覆蓋。下方設定為90%。
    4.jpg

  5. 上方設定成95%。
    5.jpg

  6. 設定漸層後,icon的高光轉折被柔化,看起來不會太明顯。
    6.jpg

以上是很簡單扁平化設計,屬於邊緣銳利的高光和陰影作法。對於小型 icon 做到這個步驟就可以了。今天是星期日,我也只打算 PO 到這個地步…扁平化你好、扁平化再見…

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close