slider

使用者介面設計講義

User interface design，UI

首頁/使用者介面設計講義

UserInterface 使用者介面設計｜期末發表說明

使用者介面設計｜期末發表說明

期末作業｜製作說明

    將本學期的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上發表。
  5. 回覆於：112-1 北AB｜期末作業回覆區｜112-1 竹｜期末作業回覆區
  6. 參考學長姐範例： 109-2 北期末作業回覆區、109-2 竹期末作業回覆區論壇發表，包含線上平台發表網址、Figma設計原檔網址等，並發表本學期製作心得。

［期末作業］製作進度

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

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

Behance｜Figma整合參考檔案

    可於Figma編輯之Behance發表樣本｜搜尋結果

  1. Behance Presentation Template

    2. 練習用Mockup

    以下提供練習發表用之精稿設計。
  2. Mindfulness and Meditation App UI with Illustrations
    3. 使用 Blush 在您的設計中創建和自定義插圖。

    Blush(搭配上面範例應用插畫外掛)

    使用 Blush 在您的設計中創建和自定義插圖。
  3. Daresay Mobile UI Kit
  4. Bank App iOS UI Kit

Behance發表檔案

  1. Behance Presentation Template
  2. Mallika UI Kit
    3. Mallika Cookbook - Free UI Kit
  3. Figma Animation Template
  4. Behance Presentation Template
  5. Donner - A Donation App
  6. Food delivey app UI
    7. Food delivery app design, Checil food delivery
  7. Food delivery app Ui kit
  8. Stream - Finance UI Kit
    9. Stream Mobile App Design

Mockup Device裝置載體檔案

  1. Presently
    2. 提供 30 多個免費 UI 模型，可將Mockup輸出為圖檔，將模型使用圖檔填充方式；或直接右鍵複製png，貼上（Ctrl+V）即可使用。
  2. Free Figma Mockups
  3. All iPhones Mockups
    4. All Version iPhone Mockup with specs:iPhone SE, 6, 7, 8 and X
  4. Device Mockups Library (100+ devices!)
  5. Majestic Wireframe Kit - Free
  6. Credit Card Checkout Iphone Frame

Mockup外掛套件

  1. Masker
    2. 使用Masker，您可以輕鬆地將設備覆蓋在項目中選定的圖層上。
  2. Clay Mockups 3D｜ 使用3D模型樣式的設備模型創建模型。為您的模型自定義顏色，相機角度和設備模型。包括適用於iPhone 11，Pixel 4和Macbook Pro的型號。
  3. Vectary 3D Elements｜ Figma的Vectary 3D插件可在此處為2D設計添加缺少的三維尺寸。將您的Figma設計放入預定義的3D模型中，或加載自定義3D元素以增強設計。

Prototype補充

  1. Figma範例練習檔｜ Figma Tutorials - Smart Animate Prototyping
  2. Figma範例練習檔｜ Figma Prototyping Hack - Exercise File
  3. Figma範例練習檔｜9 Smart Animate Examples
  4. Figma範例練習檔｜Figma Smart Animate Tutorial by FerdiCildiz
  5. Figma範例練習檔｜Hacking Prototypes
  6. Figma範例練習檔｜Micro interactions - Prototyping

使用者介面設計｜Behance發表說明

Behance發表步驟

  1. 先將要呈現的畫面，加入風格元素，彙整本學期製作與設計之內容，在Figma或illustrator做一設計與統整，分別輸出成圖檔（jpg或png）。
  2. 選擇欲輸出的Frame框架，使用右側的Export輸出按鍵，將畫面輸出成圖檔。
  3. 在Behance上註冊或登入Adobe帳號，即可發表。
  4. 登入後，選擇上方『建立專案』開始建立UI作品集。
  5. 選擇上傳檔案，上傳第一張圖檔。
  6. 接著在其下方，上傳第二張圖檔，會發現圖與圖之間有空隙。
  7. 選擇左側『編輯樣式與版面』，調整圖片間距為0，圖與圖之間則無距離，緊密貼合。
  8. 預覽無接縫的形式。
  9. 圖與圖之間也可以插入文字，形成部落格圖文並茂排版。
  10. 若要選擇圖文並茂排版，可再度使用『編輯樣式與版面』，調整圖與文字的間距，及其他設定，使畫面閱讀更為舒適。
  11. 可於Figma，選取互動分享，並選取複製崁入語法選項。
  12. 貼入語法選項，即可呈現互動模式。
  13. 最後點選儲存，及完成專案的發表，將網址回覆於論壇，即完成期末線上發表。

使用者介面設計｜期末範例參考

    可參考：Behance以及Medium等設計發表平台之作品，並於平台註冊，將之作專業發表。

  1. 插畫為主的APP

    Case Study : A Better Way to Handle Your Money｜以黑白為主色彩簡潔的插畫風金融APP

    Koda App Concept

    Food Ordering System - UI/UX Case Study｜外送服務APP

    以女性為主要對象到插畫風格APP

  2. 色彩為主的APP

    Mobile App for Museums｜優雅的博物館APP

    Okko cinema - redesign. UX & UI story｜具有強烈對比色彩的影城APP

    Sophie Messaging app ui kit｜訊息APP

    Yoga APP｜女性柔性漸層色調瑜伽APP

    XARA'S KITCHEN - FOOD APP CASE STUDY｜以明亮黃色為主的餐廳APP

    粉嫩色彩的果汁APP

  3. 以產品或圖片為主的APP

    Maynooth Furniture Website & App design｜風格優雅的家具網站及APP

    Recipe App UX Case Study｜食譜APP

    4. EMask口罩預購APP ReDesign案例

ReDesig學長姐範例

  1. Redesign PChome 24h App：
    Behance線上發表
    Figma報告包含設計系統、情緒版等｜
    Figma報告原檔
    Figma檔案原檔
    Figma｜Prototype｜互動檔案
  2. ReDesign｜MUJI passport：
    Behance線上發表
    Figma完整原檔
  3. ReDesign｜星巴克 STARBUCKS TW：
    Behance線上發表-1055445017
    Figma檔案-1055445017
    Behance線上發表-1055445056
    期中發表-簡報
    期中發表-Figma-Mockup-Prototype互動
  4. ReDesign｜電影時刻movie time App：
    Behance線上發表-1055445135
    Figma報告包含設計系統、情緒版等｜
    Figma報告原檔
    Figma檔案原檔
    Figma｜Prototype｜互動檔案