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
- - - - - - - - - - - - - -
感謝你的閱讀及支持，任何問題都歡迎來信交流｜[email protected]
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
Figma是一個主要用來設計網頁的矢量設計軟件，與Wordpress，Shopify, Webflow等不同，Figma做出來的並不是實際的網站，而是一個雛型（Prototype）。
那你或許會想：“為什麼不直接使用類似Wordpress的工具呢？’’
試想想以下這一個情況：
你用Wordpress
製作個人作品集有很多方法，Figma是一個免費又支援很多其他套件的工具，你可以用它來製作許多用途，本篇文章和視頻教學教你如何初步認識Figma
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
Well，我沒有想到剛寫完【商業劇本 Playbook】EP02 - Adobe 不久之後，管理層就宣佈要用 US$20bn 收購跟自家 Adobe XD 直接對打的 Figma。今天這篇我覺得可以視為 EP02 的補充，不過既然是剛發生的併購，牽涉到的就不只是這個系列主打的企業成長史。所以這邊我
如果不知道FigJam是幹嘛用的，可以先參考小編之前寫的介紹：
過去使用FigJam，常有一個麻煩的地方，就是如果想在白板上一次移動多個物件的話並不太方便。
以前的解決方式有這２種：
用左鍵拉一個大框框選取各物件，然後拖著移動。（缺點時有時會同時誤圈選到不想要移動的物件）
你或許會好奇，為什麼早已在設計軟體完成的設計稿，還要進行修正？—— 沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題。
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!
這篇將介紹 Figma 的基本功能操作，以及該功能實戰會用到的地方，目前 Figma 軟體介面也是英文為主，而這篇教學文章則會將所有功能翻成中文供參考與對照，目前軟體由於仍在推廣階段，新手是可以免費使用的。
介紹與安裝
Figma 也是一個劃時代的軟體，主打的是即時的共同設計編輯，完全線上的向量
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
Figma是一個主要用來設計網頁的矢量設計軟件，與Wordpress，Shopify, Webflow等不同，Figma做出來的並不是實際的網站，而是一個雛型（Prototype）。
那你或許會想：“為什麼不直接使用類似Wordpress的工具呢？’’
試想想以下這一個情況：
你用Wordpress
製作個人作品集有很多方法，Figma是一個免費又支援很多其他套件的工具，你可以用它來製作許多用途，本篇文章和視頻教學教你如何初步認識Figma
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
Well，我沒有想到剛寫完【商業劇本 Playbook】EP02 - Adobe 不久之後，管理層就宣佈要用 US$20bn 收購跟自家 Adobe XD 直接對打的 Figma。今天這篇我覺得可以視為 EP02 的補充，不過既然是剛發生的併購，牽涉到的就不只是這個系列主打的企業成長史。所以這邊我
如果不知道FigJam是幹嘛用的，可以先參考小編之前寫的介紹：
過去使用FigJam，常有一個麻煩的地方，就是如果想在白板上一次移動多個物件的話並不太方便。
以前的解決方式有這２種：
用左鍵拉一個大框框選取各物件，然後拖著移動。（缺點時有時會同時誤圈選到不想要移動的物件）
你或許會好奇，為什麼早已在設計軟體完成的設計稿，還要進行修正？—— 沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題。
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!
這篇將介紹 Figma 的基本功能操作，以及該功能實戰會用到的地方，目前 Figma 軟體介面也是英文為主，而這篇教學文章則會將所有功能翻成中文供參考與對照，目前軟體由於仍在推廣階段，新手是可以免費使用的。
介紹與安裝
Figma 也是一個劃時代的軟體，主打的是即時的共同設計編輯，完全線上的向量