iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

UI/UX 新手30天的自學實錄 系列

參賽內容皆圍繞UI/UX做展開,會由淺入深的去了解UI/UX,最後達成實作

參賽天數 3 天 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 3

Figma實作(5) - 首頁

所有元素都製作好後,接下來要給其中一些配件加上響應式設計 我希望當滑鼠停留在Home、頭像及Join us這些地方時,會有一些動態變化 Home 點擊Pr...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(6) - 首頁

依照上一篇的做法調整頭像及Join us的動態變化 效果分別如下: Join us 滑鼠停留前 滑鼠停留後 頭像 滑鼠停留前 滑鼠停留後

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(7) - 登入頁

這是我預想的登入畫面的草圖 接著先大概製作出背景,如下: 分界線改成斜的比較有設計感 有一些小圖示可以從Library去找 把其餘元素都放置上去後,畫面如...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(8) - 登入介面

完成配件的製作後,接下來是設計動態效果,首先先處理需要Hover效果的各種元素 關閉按鈕 滑鼠停留前 滑鼠停留後 Google登入按鍵 滑鼠停留前 滑鼠停...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(9) - 登入介面

完成所有Hover效果的配件後,接著是需要點擊後才會產生變化的效果 勾選按鈕 滑鼠點擊前 滑鼠點擊後 輸入框 這裡的操作較為複雜,因為呈現的效果是滑鼠點擊...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(10) - 註冊介面

依照登入介面修改並製作出註冊頁面 新增了三個輸入欄位 姓名 郵箱 密碼 以及隱私條款及政策同意勾選框 心得 不知不覺就快要完成了,這次的實作雖然非常...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(11) - 註冊介面

今天突然覺得註冊介面有點莫名空曠,因此決定再新增點什麼,考慮到有些使用者會誤點擊註冊按鈕而跳轉註冊介面,所以我覺得可以新增一個物件在此頁以便連結至登入頁面,成果...

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(12) - 介面連動 上

將所有按鈕對應到的頁面進行連動 Join us連至登入介面 關閉視窗按鈕連至首頁

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(13) - 介面連動 下

註冊鈕連至註冊頁 登入鈕連至登入頁 關閉視窗鈕連至首頁

2024-10-13 ‧ 由 alpachennnnn 分享
DAY 3

Figma實作(14) - 程式碼導出

嘗試使用Figma內的外掛程式導出 Builder.io 導入後的畫面不完整 Figma to html 導出的程式碼不正確 Anima 需要付費解鎖 目前還未...

2024-10-14 ‧ 由 alpachennnnn 分享