Figma中如何提升設計的質感
閱讀時間約 1 分鐘
探討UI設計中的細節工作
最近時間空了出來，也能投入時間來練習UI的質感，發現在細微的地方下功夫，能夠讓整個畫面更加精緻。就拿我這次練習之一的微玻璃設計風格來說吧。
•••
✏️來記錄一下這次的學習心得：
1. 利用Radial漸層疊加質感
通過不同的光源角度，我創建了兩層Radial（中心放射）漸層，一層用來主顏色光源，另一層則用於添加混色，使得Tab元素更加自然
2. 線條與陰影增添立體感
線條做漸層、陰影添加景深，成功地為Tab元素實現了在Hover和Active狀態下的不同視覺效果
3. Prototype互動細節
切換Tab之後，我選擇不立即展現Hover狀態，而是通過微妙的過渡讓畫面更流暢，這種細微的差別能夠讓設計稿更舒適和自然。
4. 來看看結果吧！
Gif會稍微延遲，擷取錄影連結在這：https://streamable.com/1e3xiv?src=player-page-share
無論是在設計還是互動方面，我深信總是可以找到微調的空間，讓設計元素更具質感。
教學影片來源請參考這裡。
那麼下次見。
- - - - - - - - - - - - - -
我的Behance｜Medium
- - - - - - - - - - - - - -
感謝你的閱讀及支持，任何問題都歡迎來信交流｜angelscs205@gmail.com
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
漸變色的應用的確能夠增加界面的動感和層次感，但它的色彩選擇需謹慎考慮，以免產生不合學的視覺效果。比如我們可以考慮選用近似色或鄰近色等視覺上較為統一的配色方案，使漸變效果更加自然流暢，營造出舒適和諧的視覺氛圍。
漸變色的使用在界面設計中是一種非常有效的方式來增強視覺吸引力和深度，但同時色彩的選擇
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
以下內容會說明每個設計調整的原因跟
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
想要輕鬆掌握UI/UX設計技巧，Figma教學資源來幫忙！這份中文教學，從基礎操作介面介紹，到進階設計功能教學，由淺入深，助你成為設計達人！新手老手都適用，別猶豫啦，快來一起探索Figma的強大功能，創造屬於你的精彩設計吧！
設計師經常尋找可以提升工作效率和創意的資源。幸運的是，Figma社群總是樂於分享，這裡我們整理了一些免費的Figma檔案和設計資源，幫助你在App/ 網頁設計界面（UI）和呈現方面更上一層樓。
Figma以其直觀的介面和強大的協作功能，迅速成為設計師和開發者首選的UI/UX App / 網頁設計工具之一。除了其高效的設計功能外，Figma的一大優勢在於其龐大的社區和用戶共享的免費資源。這些資源可以幫助設計師節省時間，並在創建高質量的設計方案時提供靈感。
Figma，作為當今流行的在線界面設計工具，不僅在設計社區中擁有重要的地位，更因其協作和原型功能而廣受青睞。然而，除了傳統的UI/UX App 及網頁設計，一些創新者已經開始在這個平台上創造令人驚艷的遊戲。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
漸變色的應用的確能夠增加界面的動感和層次感，但它的色彩選擇需謹慎考慮，以免產生不合學的視覺效果。比如我們可以考慮選用近似色或鄰近色等視覺上較為統一的配色方案，使漸變效果更加自然流暢，營造出舒適和諧的視覺氛圍。
漸變色的使用在界面設計中是一種非常有效的方式來增強視覺吸引力和深度，但同時色彩的選擇
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
以下內容會說明每個設計調整的原因跟
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
想要輕鬆掌握UI/UX設計技巧，Figma教學資源來幫忙！這份中文教學，從基礎操作介面介紹，到進階設計功能教學，由淺入深，助你成為設計達人！新手老手都適用，別猶豫啦，快來一起探索Figma的強大功能，創造屬於你的精彩設計吧！
設計師經常尋找可以提升工作效率和創意的資源。幸運的是，Figma社群總是樂於分享，這裡我們整理了一些免費的Figma檔案和設計資源，幫助你在App/ 網頁設計界面（UI）和呈現方面更上一層樓。
Figma以其直觀的介面和強大的協作功能，迅速成為設計師和開發者首選的UI/UX App / 網頁設計工具之一。除了其高效的設計功能外，Figma的一大優勢在於其龐大的社區和用戶共享的免費資源。這些資源可以幫助設計師節省時間，並在創建高質量的設計方案時提供靈感。
Figma，作為當今流行的在線界面設計工具，不僅在設計社區中擁有重要的地位，更因其協作和原型功能而廣受青睞。然而，除了傳統的UI/UX App 及網頁設計，一些創新者已經開始在這個平台上創造令人驚艷的遊戲。