期末作業｜製作說明

將本學期的UI專案設計，做一整合，將之設計為一專業線上發表之呈現，使之成為可公開展示、說明、介紹的UI設計(使用者介面設計)作品，並可直接成為UI作品集。
1. 綜合期中作業內容：1.主題分析、2.動機與目的、3.使用者介面現況（現有APP截圖分析）、4.擷取APP評論頁面，整理評論、4.擬定問題及修正方向、5.用戶分析、6.競爭者分析、7.流程修改提案、8.流程圖｜架構圖、9.設計提案。
2. 並結合期中作業內容以及期中後內容：情緒板、Mockup精稿設計、Design System 設計系統、Prototype互動設計等。
3. 取其精華，將之加入風格元素，彙整本學期製作與設計之內容，製作成完整作品發表設計。
4. 於專業設計平台Behance上發表。
5. 回覆於Moodle期末作業。
6. 使用者介面設計作業自行選擇班級回覆。
7. 使用者介面期末作業同儕評量與期末心得

---

［期末作業］製作進度

1. 第十三週：開始製作Mockup，以及色彩樣式、文字樣式、組件等。
2. 第十四週：製作Prototype、Mockup精稿與設定Design Systm設計系統。
3. 第十五週：製作Prototype互動式精稿，Figma Make (每位同學都需製作)
4. 第十六週：互動式精稿、製作發表頁面於Behance
5. 第十七週：期末報告｜發表於線上平台，並回覆
6. 第十八週：期末報告｜於Line群組公布成績，檢視期末成績與最後修改

Figma Prototype互動設計｜Behance線上發表說明｜上課影片

Behance發表步驟

1. 先將要呈現的畫面，加入風格元素，彙整本學期製作與設計之內容，在Figma做一設計與統整，分別輸出成圖檔（jpg或png），可參照以下樣本範例套用製作。

UI/UX Case Study Template - BiteDash｜BiteDash UI/UX案例研究



---

2. 選擇欲輸出的Frame框架，使用右側的Export輸出按鍵，將畫面輸出成圖檔。


---

3. 在Behance上註冊或登入Adobe帳號，即可發表。


---

4. 登入後，選擇上方『建立專案』開始建立UI作品集。


---

5. 選擇上傳檔案，上傳第一張圖檔。



---

6. 接著在其下方，上傳第二張圖檔，會發現圖與圖之間有空隙。


---

7. 選擇左側『編輯樣式與版面』，調整圖片間距為0，圖與圖之間則無距離，緊密貼合。


---

8. 預覽無接縫的形式。


---

9. 圖與圖之間也可以插入文字，形成部落格圖文並茂排版。


---

10. 若要選擇圖文並茂排版，可再度使用『編輯樣式與版面』，調整圖與文字的間距，及其他設定，使畫面閱讀更為舒適。


---

11. 可於Figma，選取互動分享，並選取複製崁入語法選項。



---

12. 貼入語法選項，即可呈現互動模式。



---

13. 最後點選儲存，及完成專案的發表，將網址回覆於論壇，即完成期末線上發表。

Behance 專案發表模板

Behance 『網站』專案發表模板範例

1. FlowPay Behance Presentation Template UI/UX Case Study by Minute Creative｜FlowPay Behance 展示模板 UI/UX 案例研究

FlowPay 是一款 SaaS 工具，旨在為自由工作者和代理商實現 Webflow 計費、發票和客戶付款的自動化。它簡化了複雜的計費流程，只需點擊幾下即可輕鬆管理付款。我們設計了一個簡潔、以轉換為導向的網站，展示了 FlowPay 的獨特功能，使用戶能夠輕鬆理解並使用其自動化計費解決方案。