slider

使用者介面設計講義

User interface design，UI

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

介面設計風格設定｜情緒板｜

建立專案檔案

因建立專案只有三個頁面限制，因此統一於Drafts(草稿夾)中建立檔案。

為新文件命名，或延續期中檔案，繼續完成後續內容建議。

  1. 於Drafts(草稿夾)中建立檔案
  2. 可命名為：APP名稱專案｜期末檔案｜學號，並建立五個頁面，分別為：
    1. 簡報（期中前加上後續情緒板、精稿內容）
    2. WireFrame｜線框稿
    3. Mockup｜精稿
    4. Design System｜設計系統，內容包含：設計系統（Design System）及圖標設計（ICON）
    5. Behance｜期末發表於 Behance 的排版

UI風格設定

產品開發的流程-視覺介面設計開發

產品設計流程大致分為五個階段：

  1. 認知分析階段（解決什麼問題？）
  2. 交互原型階段（尋找解決方案）
  3. 介面設計階段（解決方案，更好的表達）
  4. 研發實施階段（生產）
  5. 驗證改良階段（質量監控、改良）

其中介面設計階段如下圖所示

參考網址： 五個階段，了解產品設計流程

UI風格設定-情緒版

情緒板（英：Mood Board）是一種啟發式和探索性的方法，設計師將自己認為合適的組件、圖片和素材都整理到一起，在紙或者螢幕上進行拼貼組合，快速地向他人傳達設計師想要表達的整體「感覺（feel）」，可作為一種可視化的溝通工具。一般包括：視覺風格、色彩、字體排版、圖案和紋理整體外觀。

原文網址：設計師進階筆記｜情緒板應用，提高工作效率

情緒板運用到移動端介面視覺設計中，通過探索用戶的心理情緒和需求，可以將感受可視化，並作用於介面視覺風格、圖標風格的走向、關鍵圖標的選取等各個方面。為視覺細節的產出奠定理論基礎。

  1. 第一步 確定原生關鍵詞

    2. 基礎關鍵詞一般在3-5個之間，同時原生關鍵詞，一定要抽象化，不能過於具體。主要關鍵詞要少而精，列出最重要的三個

  2. 第二步 確定衍生關鍵詞

    3. 由於第一步的原生關鍵詞大多都比較抽象，因此我們需要對其進行發散和聯想。從而需要更多具體關鍵詞，後續才能更容易找到相應的圖片，具體關鍵詞一般都是具體的物體，可分為：
    • 視覺映射
      • 可以理解為聯想到的視覺表現，比如：品質——金色、黑色、幾何形；簡潔——白色、明亮、硬的；友好——鄰近色、圓角、圓形等
    • 物化映射
      • 可以理解為聯想到的具體事物，比如：品質——iPhone、寶馬、香奈兒；簡潔——白盤子、玻璃、白紙；友好——枕頭、毛絨玩具、海豚等。

    總結：為了更科學地找圖，第一步確定3-5個原生關鍵詞，第二步在每個原生關鍵詞下拓展3個衍生關鍵詞。

  3. 第三步 搜集圖片素材

    4. 可至相關網站搜尋情緒板關鍵圖。搜集好圖片後，可先內部篩選，再將挑選出來的圖片打亂並依次排列，邀請目標用戶進行再次挑選。相關資源網站如：
    設計資源：從好的設計中，尋找靈感、創意與提升設計質感｜
    1. unsplash｜專業免費圖資資源。
    2. Pinterest｜可以讓使用者利用其平台作為個人創意及專案工作所需的視覺探索工具。
    3. Behance｜是一款Adobe旗下用於展示並發現創意作品的在線平台。
    4. Dribbble ｜是一個用於展示用戶製作的藝術作品的線上社群，同時也是用於推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。
    5. Muzli Collections｜設計靈感系列
    6. Muzli Search ｜用於設計靈感的全網搜尋引擎

  4. 第四步 創建圖庫式的情緒板

    5. 在生成情緒板圖片後，結合衍生關鍵詞的分析結果，進行視覺風格的提取，主要包括：圖形、色彩、字體、構成、質感。

參考網址：情緒板在移動UI設計中的應用

情緒版相關製作檔案

  1. 情緒板製作軟體：線上免費編輯設計| Adobe Spark
  2. 使用 Canva 線上創作激發靈感的情緒板
  3. 🔲 Moodboard Kit (Community)
  4. Figma社區資源-幫助您學習和加快工作流程。
  5. Moodboard
  6. moodboard_templates

相關推薦文章連結

  1. 十個常用的UI靈感及工具網站
  2. Figma社區資源-幫助您學習和加快工作流程。
  3. UX 設計師寫給 UI 新手的 7 個法則（上）
  4. UX 設計師寫給 UI 新手的 7 個法則（下）
  5. 五個階段，了解產品設計流程
  6. 理性地定義視覺風格——情緒板
  7. 設計師進階筆記｜情緒板應用，提高工作效率
  8. 讓視覺設計變得高效+有說服力的4個步驟
  9. 情緒板在移動UI設計中的應用
  10. APP定義視覺風格，如何開始？
  11. 12個關於用戶體驗的介面設計細節
  12. App UI設計基礎知識
  13. 情緒版的視覺設計表現方法與運用
  14. UI介面設計顏值哪家強
  15. UI設計界大勢潮流：扁平化設計
  16. 解讀！介面設計的風格
  17. 知名設計師展望 2019 年：UI、UX 設計將會出現十大趨勢
  18. 如何成為一個 UI Designer？
  19. 設計師在日本的 UI 專案設計流程

UI風格設定

情緒板風格設定範例

  • 範例一：原生關鍵字-慢調、典雅、自然

    1. 確定原生關鍵字與衍生關鍵字
    2. 搜集與篩選情緒板圖片
    3. 產生主色調

  • 範例二：原生關鍵字：生活、休閒、舒適

    1. 確定原生關鍵字與衍生關鍵字
    2. 搜集與篩選情緒板圖片，並產生風格色調

  • 範例三：統一發票兌獎APP——原生關鍵字：快速、理性、生活

    • 範例Figma檔案
    1. 確定原生關鍵字
    2. 確定衍生關鍵字
    3. 搜集情緒板圖片
      4. 可至相關網站搜尋情緒版關鍵圖。搜集好圖片後，我們可以先在公司內部篩選一次，再將挑選出來的圖片打亂並依次排列，邀請目標用戶進行再次挑選。
    4. 篩選情緒板圖片
    5. 產生風格色調
      6. 將選定的情緒板，以photoshop利用高斯模糊，選取三組主色調。

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

  1. Image Palette｜ 圖像配色提取｜

    2. 點選連結後，點擊Install安裝Image Palette plugins。

    Image Palette 幫你從所選圖片中提取5種顏色，很適合用來定義產品與品牌形象類型的介面色彩 使用設定好的情緒板（MoodBoard），選取 image Palette｜ 圖像配色提取工具，快速產生產品建議色彩。可由這些色彩中調整為主色調與輔助色等。當然也可以直接使用從photoshop中取得的色彩。
  2. 選取圖庫框架，在搜尋框下拉選擇Image Palette
  3. 利用Image Palette，快速產生產品建議色彩
  4. 選取產生之色彩建立標準色樣式
  5. 選取產生之色彩建立標準色樣式
  6. 建立完成主色調標準色樣式

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

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

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

    7. 學長姐參考範例：109-2 北作業回覆區、109-2 竹作業回覆區

建立專案

新方案價格

請參考2021年4月21日起，新的付費方案，每個免費帳號，專案可以有1個團隊項目以及無限編輯3個團隊文件
Figma Pricing

建立專案步驟

  1. 建立新團隊
  2. 新團隊命名(可自行命名)
  3. 建立完成新團隊，免費方案，每個專案可新增三個文件，每個文件最多三頁。
  4. 選擇新團隊專案，建立新的設計文件
  5. 為新文件命名，並建立三個頁面，分別為：簡報（期中前加上後續情緒板、精稿內容）、WireFrame、Mockup。將期中檔案複製過來，繼續完成後續內容。
    6. 目前不建議以專案建立來製作。因為頁數限制，較難將頁數完整呈現。