slider

使用者介面設計講義

User interface design，UI

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

Mockup設計 頁面設計｜以Figma製作介面設計精稿

［Mockup 精稿］風格設定與範例設計

風格設定

  • 風格與美學：以 Wireframe 完成溝通後，便開始著手風格與美學設計。我們會跟客戶討論情緒板（mood-board) 還有他們希望透過哪些配色來傳達訊息（例如融合品牌識別），以確定顏色組合緊密地配合 UI 元素和品牌形象。
  • UI 元素及不同狀態：想取得設計靈感，市場上已存在大量免費的 UI 元件包可以使用。不過如果你想別樹一幟，還是要透過產品來展現獨特的個人風格。同時還會一邊參考其他設計作品集和內容，一邊收集靈感。
  • 視覺稿：當大部份顏色組合定案以後，接著我們會開始進行 mockup。不過在取得客戶或 PM 的初步意見之前，建議不要一口氣完成所有 mockup。最好循序漸進地先完成主要的頁面，待收到反饋後才繼續餘下的設計（例如空白的狀態）。既可以縮短反饋的時間，同時幫助客戶省下反覆修改主設計的不必要支出。工作重點：1.設計插圖、圖示、圖像和 UI 元件。2.從線框規劃到設計完稿，我們都會根據客戶已確認的設計風格、方向、UI 元素及各種狀態進行設計。

    • 資料來源：打造 Apple App Store 得獎程式：我們的設計師是這樣設計的！

頁面設計風格｜範例

  1. 插畫為主的APP

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

    Koda App Concept

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

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

  2. 色彩為主的APP

    3. 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

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

    Recipe App UX Case Study｜食譜APP

ＡＰＰ案例

  1. Luvly App 女生專屬的匿名社群

相關推薦文章連結

  1. 為使用者設計一個體貼的註冊登入頁
  2. 超完整登入註冊流程UX分析
  3. UI/UX｜註冊登入流程．超完整的深入教學（上）
  4. UX 設計師寫給 UI 新手的 7 個法則（上）
  5. UX 設計師寫給 UI 新手的 7 個法則（下）
  6. UI設計界大勢潮流：扁平化設計
  7. 解讀！介面設計的風格
  8. 知名設計師展望 2019 年：UI、UX 設計將會出現十大趨勢
  9. 如何成為一個 UI Designer？
  10. 設計師在日本的 UI 專案設計流程

Welcome Page｜歡迎頁面｜教學影片

  1. Login Screen UI Design with Figma
  2. Figma Tutorial - Sign In UI Design
  3. [BEGINNER] Lesson 10 : Project 2 Splash Screen App Design - Part 1 (FIGMA UX/UI APP DESIGN COURSE)

UserInterface Design｜無障礙設計

無障礙網站的廣義目的是希望對於所有身障者、所有大眾，能有一個好操作無虞的網路環境，因此網站設計也要顧及更多面向，以下參考文章提供較為詳細的無障礙網頁設計說明，目前以參考【無障礙網頁祕技】介面設計大補丸，專注在「介面設計」上，在接下來的設計上，提醒更多需要注意的設計細節，讓介面設計更溫暖、更好理解，更好操作。

無障礙設計四原則

無障礙設計四原則

介面設計於無障礙設計上需注意之細節設計

於Figma中，製做prototype互動設計時，出現的灰色圓型，即代表手指大小，請注意每個需點選的設計，大小是否合宜？是否保持適當距離？點選時是否舒適順暢？都是在設計介面時的重要考量。
  1. 讓元件能輕易被點擊
    2. 可點擊的元件，包含按鈕或 icon，必須確保有一定的大小，不管是用電腦瀏覽、或是手機螢幕觸碰點擊，都能夠方便點選及辨識。
  2. 精簡的按鈕字數
  3. 保持按鈕間的間距
  4. 適當的文字與背景對比度
  5. 給予文字內容行高與段落間距
  6. 文字不能過小及過細
  7. 賦予元件強調樣式
  8. 更友善的表單設計
  9. 避免單靠顏色傳遞資訊
  10. 提供網站導覽頁

延伸閱讀｜

  1. 【無障礙網頁祕技】介面設計大補丸
  2. 【無障礙網頁祕技】認識無障礙網頁與分級
  3. 可達性設計(Design for Accessibility) — 基於介面之上
  4. 符合無障礙規範一定要了解！把「通用設計」的思考融入骨子裡
  5. 我們都應該了解的 無障礙網頁 概念

［Mockup設計］頁面設計｜以Figma製作介面設計精稿

Figma Mockup｜製作步驟

  1. 確定APP尺寸
  2. 設定標準色、輔助色等樣式（Color Style）
  3. 設定字體及樣式（Style）
  4. 設定按鈕、表單、對話框等風格樣式，並設為組件（Component）
  5. 是否有插畫？繪製插畫及相關圖像
  6. 蒐集產品照片、相關圖片、出現的文字等相關資訊
  7. 開始製作，注意無障礙設計原則，並即時修改各項設定
  8. 手機下載Figma Mirror，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？

範例影音

Mockup設計以Figma製作介面設計精稿 ｜案例解析(109-2)
可參考範例影片，或參照以下製作步驟的逐步說明，以此延伸至其他頁面，完成精稿製作。
    上課練習範例

  1. 確定APP尺寸

    2. 使用Frame(框架)工具，選擇右側APP尺寸，開始製作。畫面選定的是iPhone 11 Pro / X，尺寸為 375 px X 812 px。

  2. 設定標準色、輔助色等樣式

    3. 使用設定好的情緒板（MoodBoard），選取 image Palette｜ 圖像配色提取工具，快速產生產品建議色彩。可由這些色彩中調整為主色調與輔助色等。當然也可以直接使用從photoshop中取得的色彩。（上一張情緒板內容）

  3. 設定字體及樣式

    4. 請預先設定好幾種常用的字體樣式，以方便後續的設計與修改，建議的中文字體為思源黑體及明體，是用中英文字體，且有多種粗細變化：
    Noto Sans TC｜非襯線字｜思源黑體｜七種粗細等級
    Noto Serif TC｜襯線字｜思源明體｜七種粗細等級

    若覺得字體規格不符預期，也可以編輯修改樣式設定。

  4. 設定按鈕、表單、對話框等風格樣式

    5. 設計符合風格之按鈕、輸入框、功能列等，並將之建立為組件（Create Compenent）。

    課堂範例，暫時利用利用iconfy插件功能，設計『功能列表』，並將之建立為組件（Create Compenent）。實際製作，請以APP風格，設計屬於自己專屬的ICON功能列表。

  5. 製作歡迎頁

    6. 參考Figma範例，製作歡迎頁、註冊頁、列表頁。

    歡迎頁，以圖片為背景，利用Unsplash插件功能，以及圖片編輯功能，加上漸層效果，使圖片更有層次，加上歡迎文字，以及設定好為組件的按鈕，修改文字

  6. 製作註冊頁

    7. 利用設定好的組件，修改文字，成為註冊頁

  7. 製作列表頁

    8. 利用設定好的組件，加以修改，並利用Unsplash插件功能，豐富畫面，成為列表頁，注意文字樣式的對應與層次感。

    注意上方顯示列及下方功能列表的對齊方式，並勾選鎖定。

    歡迎頁、註冊頁、列表頁

  8. 是否有插畫？繪製插畫及相關圖像

  9. 開始製作，注意無障礙設計原則，並即時修改各項設定

  10. 手機下載Figma Mirror，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？

Design System｜參考範例

  1. Material 3 Design Kit｜Google 開源設計系統的最新版本
  2. Material symbols｜Plugin
  3. Material Design｜Material 3 是 Google 開源設計系統的最新版本。使用 Material 3 設計和建構美觀、可用的產品。
  4. Apple Design Resources – iOS 17 and iPadOS 17

Figma plugins｜Auto Layout｜自動排版｜Tips & Tricks｜小技巧

Figma plugins｜推薦

  1. Unsplash｜圖庫｜可直接獲得免費高畫質圖庫相片｜可以直接插入隨機圖像，或搜索特定圖像。除了畫質精美外，Unsplash 還允許將圖像免費用於商業和個人專案。
  2. Image Palette｜ 圖像配色提取｜Image Palette 幫你從所選圖片中提取5種顏色，很適合用來定義產品與品牌形象類型的介面色彩
  3. Mapsicle｜自動建置模擬地圖
  4. Clay Mockups 3D｜ 使用3D模型樣式的設備模型創建模型。為您的模型自定義顏色，相機角度和設備模型。包括適用於iPhone 11，Pixel 4和Macbook Pro的型號。
  5. Vectary 3D Elements｜ Figma的Vectary 3D插件可在此處為2D設計添加缺少的三維尺寸。將您的Figma設計放入預定義的3D模型中，或加載自定義3D元素以增強設計。
  6. Webgradients｜ 色彩漸層｜可以協助設計師快速製作漸層，無須自己吸色選取。內建多種漂亮的漸層配色
  7. Blobs｜ 創建不規則向量色塊｜ 讓你輕鬆創建有機斑點形狀。生成的每個形狀都是獨一的，很適合用來做Landing page的背景。透過設定可以控制形狀的節點數，形狀是使用SVG創建的，能得到不失真且線條優雅的曲線。
  8. Figmotion｜Figmotion是在Figma中內置的動畫工具。 由於不需要切換到完全獨立的運動工具（例如Principle，Haiku或After Effects），這使動畫製作變得更加輕鬆便捷。

為你試用-給Figma newbies的21款plugin與資源

Automate work. Bring in real data. Extend what’s possible with Figma Plugins.

Auto Layout｜自動排版

Auto Layout｜自動排版｜Tips & Tricks｜小技巧｜教學影片

  1. Figma Tutorial: Device Frames and Scrolling｜Figma教程：裝置框架和滾動
  2. Figma：裝置框架和滾動
  3. Figma : Auto Layout : Simple Modal
  4. Figma Tips & Tricks - UI Designer's Superpower

作業說明

Mockup設計與製作

  1. 第十三週：製作情緒板，以及色彩樣式、。
  2. 第十四週：製作Mockup精稿，文字樣式、組件與設定Design Systm設計系統。
  3. 第十五週：製作Prototype，互動式精稿｜Behance線上發表製作
  4. 第十六週：Behance線上發表製作
  5. 第十七週：期末報告，Behance發表
  6. 第十八週：期末報告，Behance發表，檢視期末成績與最後修改