slider

UI作業區

HomeWorks

首頁/UI作業區

UI作業區

HomeWorks

第一週
  1. 請填寫使用者介面設計｜課前問卷｜
  2. 註冊作業網站｜ MEPOPEDIA
  3. 閱讀推薦連結的文章，開始進入UI的世界｜ 推薦連結
  4. 開始好好的逛APP與WEB｜並分析其優缺點
  5. 開始找合作的組員｜UI/UX需要團隊合作
  6. 開始找欲修改的主題｜認真思考使用是否便利？路徑是否卡關？是否符合需求？介面設計是否美觀舒適？色彩、字體、編排是否有整體規劃設計？什麼樣的流程與介面設計更符合消費者的需求？.....
第二週
  1. 註冊Figm｜ FIGMA
  2. 確實練習｜『官方基本功能說明文件』中的基本八大功能：1.Frame｜框架、2.Constraints｜約束條件、3.Components｜組件、4.Styles｜樣式、5.Smart Selection｜智能選擇、6.Exporting｜輸出、7.Commenting｜註解、評論、8.Sharing｜共享
  3. 開始了解不同的UI軟體｜閱讀相關文章並實際操作看看
  4. 尋找欲修改的主題，並搜尋相關ReDesign案例
第三週｜[作業1] ReDesign主題及問題定義

請參考：［第三週講義］［ReDesign］逐步指南 / 案例分析

請以『Figma 簡報範例』（內容及設計樣式請務必自行更改及設計，範本樣式僅供參考），完成以下問題，並回覆於

[作業1] ReDesign主題及問題定義｜110-2 作業回覆區

  1. 提出欲修改的主題及團隊成員
  2. ReDesign動機與目的。
  3. 現況分析。
  4. 擷取APP評論頁面，整理評論。
  5. 擬定問題及修正方向。
學長姐作業參考區
[作業1] ReDesign主題及問題定義：109-2 北作業、109-2 竹作業
Figma｜Presentation Template｜簡報範本
請多參考不同的簡報範本，利用列表、圖示，注意閱讀舒適性，做出具特色與設計感的簡報。
  1. Design products with Figma (Mandarin)
  2. Figma Design Event Presentation (public)
  3. Case Study Presentation Template
  4. Case Study Presentation Layout for Design Interviews
  5. Behance Presentation Template
  6. Figma Pitch Deck Template
  7. Investor Pitch Presentation Template
  8. Presentation Slide Design for figma
  9. Design Sprint Presentation
  10. Presentation Template - by Blush
  11. Deep Presentation Template
  12. Modelia Presentation Template
  13. Figmation – Presentation UI Kit
  14. Device Mockups
Behance UX發表範例
  1. HeadHunter
  2. Booking.com
  3. Yelp App Redesign
  4. POCKET CREATOR ︱ APP Design
第八-九週

請參考期中之前講義：［期中作業］APP or WEB ReDesign改善方案｜提案，規劃、流程、Wireframe

請以『Figma 簡報範例』（內容及設計樣式請務必自行更改及設計，範本樣式僅供參考），請延續作業一內容持續將報告完成
針對專案需求完成以下問題（可針對專案需求調整），並回覆於

［期中作業] ReDesign提案報告｜110-2 期中作業回覆區

  1. 提出欲修改的主題及團隊成員
  2. ReDesign動機與目的。
  3. 擷取APP評論頁面，整理評論。
  4. 擬定問題及修正方向。
  5. 用戶分析（人物誌）。
  6. 競爭者分析
  7. 流程修改提案。
  8. 流程圖｜架構圖。
  9. Wireframe｜線框圖（介面流程圖）。
  10. 線框圖 Prototype互動測試提案。

學長姐範例

［作業二］風格設定｜情緒板製作

請參考講義：［介面設計］風格設定｜情緒板｜

  1. 請依據期中題目繼續往下延伸。
  2. 若期中未針對用戶做進一步分析的組別，請進行詳細的用戶分析。
  3. 根據參考檔案，進行概念分析、主要關鍵、衍生關鍵字以及圖片的搜尋。
  4. 製作情緒板，以作為後續風格、色彩、構圖、插畫等設計依據
  5. 本作業為期末作業其中一部份，後續將陸續完成
  6. 請參考情緒板參考檔案製作（僅供參考，內容與排版皆須修改）
  7. ［作業二］風格設定｜情緒板製作 ：109-2 北作業、109-2 竹作業
期末作業

請參考講義：［期末作業］使用者介面設計｜期末發表說明

    將本學期的UI ReDesign設計，做一整合，將之設計為一專業線上發表之呈現，使之成為可公開展示、說明、介紹的UI設計(使用者介面設計)作品，並可直接成為UI作品集。

  1. 綜合期中作業內容：1.主題分析、2.動機與目的、3.使用者介面現況（現有APP截圖分析）、4.擷取APP評論頁面，整理評論、4.擬定問題及修正方向、5.用戶分析、6.競爭者分析、7.流程修改提案、8.流程圖｜架構圖、9.Wireframe提案。
  2. 結合期中作業內容以及期中後內容：情緒板、Mockup精稿設計、Design System 設計系統、Prototype互動設計等。
  3. 將之加入風格元素，彙整本學期製作與設計之內容，製作成完整作品發表設計。
  4. 於專業設計平台發表。如：Behance以及Medium等設計發表平台。
  5. 回覆於：110-2 期末作業回覆區
  6. 參考學長姐範例： 109-2 北期末作業回覆區、109-2 竹期末作業回覆區論壇發表，包含線上平台發表網址、Figma設計原檔網址等，並發表本學期製作心得。

    7. ［期末作業］製作進度

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

    ReDesig學長姐範例

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

slideSpeed : 400,countto.js'>