Figma中如何提升設計的質感

更新於 發佈於 閱讀時間約 1 分鐘

探討UI設計中的細節工作

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

•••

raw-image

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

1. 利用Radial漸層疊加質感

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

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

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

3. Prototype互動細節

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

4. 來看看結果吧!

Gif會稍微延遲,擷取錄影連結在這:https://streamable.com/1e3xiv?src=player-page-share

raw-image

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

教學影片來源請參考這裡

那麼下次見。
- - - - - - - - - - - - - -
我的BehanceMedium
- - - - - - - - - - - - - -
感謝你的閱讀及支持,任何問題都歡迎來信交流|angelscs205@gmail.com

avatar-img
3會員
7內容數
這是一個沒有時間的待業計畫,也是個人的成長計畫,這次決定把這次轉職同步做個紀錄。
留言
avatar-img
留言分享你的想法!
One Day Angel的沙龍 的其他內容
[離職後的待業計畫]這是一個沒有時間的待業計畫,也是個人的成長計畫,這次決定把這次轉職同步做個紀錄,一是能檢視自己這段時間的成果,二是能看到自己的進步,是以往沒做過的嘗試。
[離職後的待業計畫]這是一個沒有時間的待業計畫,也是個人的成長計畫,這次決定把這次轉職同步做個紀錄,一是能檢視自己這段時間的成果,二是能看到自己的進步,是以往沒做過的嘗試。
你可能也想看
Google News 追蹤
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。