來分享一下用FIGMA製作的表單元件囉！ 
課程傳送門>>產品設計實戰：用Figma打造絕佳UI/UX
紀錄一下我的作業 產品設計實戰：用Figma打造絕佳UI/UX 課程作業2，這次是設計表單的相關元件功能，我們常常在網站介面或是手機上面，能看到美美的按鈕或是表單，都是經過UI設計師精心設計過的喔！
而我是參考別人的作業，同樣製作手機版的IPHONE14大小製作的偽登入畫面哈哈哈，希望未來是可以做出一個反逆御宅交友軟體啦(誤
>>作業連結
作業2跟作業1放在同一個檔案裡面，用不同的frame分別製作。
這個作業主要有幾個關鍵點，第一是小元件做好之後，分別要做歸類命名，老師都用英文命名，我在學習過程就先照做，檔名會使用/分開。
比方說check box/unchecked，就是複選表單，而且是尚未勾選的狀態。
通常這種元件都是手機APP常用到，我已經同意條款什麼的，那在使用上為什麼要用虛線包起來呢？
這就是第二點，要製作一個定義群組Varients，之後使用元件都可以快速切換狀態，有沒有打勾或是無法使用disable等等，設計師在介面設計時就可以很快作變換。
講一下第三點注意，就是右邊的輸入帳號密碼那些，欄位一樣用Varients製作，上方的姓名那些，擇要先做成Auto layout，fill contents撐開，上下再框起來做Auto layout。
反正這邊邏輯還不是非常清楚，都是練習摸索之後才成功讓欄位可以隨寬度變化，目前寫得當下才發現圖片沒有縮放成功，應該要隨寬度變換而縮減的，還要再調整啊！
總之算是一個紀錄吧！
然後我發現一件事情，HAHOW的作業區可以設定連結耶！也就是說我可以在HAHOW作業區設置反向連結到我的部落格，有機會增加網站的權重耶！
應該算是成功的反向連結吧？我是不是小天才？(揍
HAHOW課程傳送門>>產品設計實戰：用Figma打造絕佳UI/UX
相關文章推薦
留言列表
ACG大全 (3)