探討UI設計中的細節工作

Figma中如何提升設計的質感

One Day Angel
Aug 19, 2023

最近時間空了出來,也能投入時間來練習UI的質感,發現在細微的地方下功夫,能夠讓整個畫面更加精緻。就拿我這次練習之一的微玻璃設計風格來說吧。

Figma中如何提升設計的質感-圖片示意

✏️來記錄一下這次的學習心得:

1. 利用Radial漸層疊加質感

通過不同的光源角度,我創建了兩層Radial(中心放射)漸層,一層用來主顏色光源,另一層則用於添加混色,使得Tab元素更加自然

2. 線條與陰影增添立體感

線條做漸層、陰影添加景深,成功地為Tab元素實現了在Hover和Active狀態下的不同視覺效果

3. Prototype互動細節

切換Tab之後,我選擇不立即展現Hover狀態,而是通過微妙的過渡讓畫面更流暢,這種細微的差別能夠讓設計稿更舒適和自然。

4. 來看看結果吧!

雖然顏色看似只有微小變化,但實際上我用了上述方法來疊加不同的漸層以增加質感

無論是在設計還是互動方面,我深信總是可以找到微調的空間,讓設計元素更具質感。

那麼下次見。

--

--

One Day Angel

Everything about my life |記錄下某個時刻不一樣的我