什麼是 Moodboard (情緒版),它們的用途是什麼?在本指南中學習 UI 設計師需要知道的一切,包括如何創建自己的情緒版。

作為一名設計師,能夠有效地傳達你的想法至關重要。無論是與客戶分享你的創意願景,還是向內部利益相關者展示概念,將抽象的想法轉化為具體的東西都是至關重要的。

這就是情緒版的用武之地。情緒版可以幫助你組織你的想法,為特定項目定義清晰的創意方向,並最終確保你的設計能夠在最終用戶中喚起所需的情緒。

如果你不熟悉情緒版,那麼本指南將是你最佳的選擇。我們將向你展示關於這個絕妙設計工具的一切,包括如何創建自己的情緒版的步驟說明。

  • 什麼是情緒版?
  • 情緒版的用途是什麼?
  • 實體 vs. 數位情緒版:哪個更好?
  • 你的情緒版應該包含哪些內容?
  • 為你的情緒版收集靈感
  • 如何創建情緒版:分步指南
  • 最佳情緒版工具和軟體
  • 總結

什麼是 Moodboard (情緒版)?

情緒版是一種視覺工具,用於捕捉和傳達項目應採取的創意方向。 它是由不同視覺元素的集合,這些元素結合在一起,喚起特定的外觀、風格和感覺。

情緒版通常在創意項目的早期階段創建。它們代表了設計師的初步想法和概念,這些想法和概念將在之後塑造最終產品的外觀和感覺。

以下是一個室內設計項目情緒版的示意,傳達了「現代波西米亞風臥室」的氛圍:

情緒版的用途是什麼?

情緒版用於將雜亂無章或無法表達的想法轉化為單一、連貫的願景。它們有助於將抽象的概念轉化為視覺化和具體化的東西,使你能夠分享和交流你的想法。它們也是組織你的設計研究和靈感的絕佳工具。

作為一名設計師,你可能會創建情緒版來:

  • 組織你自己的想法,並將重點放在你的願景上
  • 記錄你對特定項目的研究
  • 與客戶或其他主要利益相關者分享你的創意願景,使你能夠收集反饋並確保在繼續進行線框圖和原型設計之前,每個人都達成一致
  • 在整個設計項目中用作視覺參考點,不斷提醒你正在努力實現的願景

數位設計師並不是唯一使用情緒版的人。情緒版幾乎可以用於任何類型的項目,無論是室內設計、規劃派對或婚禮,還是將你的個人目標和願望視覺化。

無論在什麼情況下,情緒版都用於呈現清晰的創意願景,描繪最終結果的外觀和感覺。

實體 vs. 數位情緒版:哪個更好?

實體情緒版是通過在實體板上排列不同的元素和素材製成的。 它們可以包含從雜誌剪報和紋理織物到照片和色板的任何東西。

數位情緒版是使用電腦軟體創建的。 它們可以包含(幾乎)任何類型的數位媒體,包括圖像、影片、GIF、動畫、調色板和字體。

你的情緒版的格式將取決於你的項目的性質。雖然實體情緒版非常適合室內設計項目(因為它們使你能夠傳達不同的紋理和織物),但數位情緒版通常最適合 UX 和 UI 設計項目。當你為網站和應用程式製作情緒版時,你會希望你的願景主要基於數位素材,而使用數位情緒版會更容易實現這一點。

但在為你的情緒版收集靈感時,不要讓這一點限制你。你可以通過拍攝照片或影片並將它們上傳到你的數位板上,輕鬆地融入來自現實世界的靈感。

數位情緒版的另一個主要優點是它們更適合分享和協作。如果你遠端工作或與外部客戶合作,這一點尤其重要。

情緒版中應包含的內容

如果你正在為 UX/UI 設計項目創建情緒版,則可以包含任何有助於傳達你的願景的數位素材。數位情緒版的一些常見元素包括:

  • 照片(這可以包括實體素材的照片)
  • 插圖
  • 圖庫圖片
  • GIF 和動畫
  • 影片
  • 聲音
  • 圖示
  • 排版
  • 調色板
  • 文字

我們將在下一節中向你展示在哪裡可以為你的情緒版找到靈感。

為你的情緒版收集靈感

在你開始創建情緒版之前,你需要準備好靈感庫。幸運的是,靈感可以有許多不同的形狀和形式,而且幾乎可以在任何地方找到。

以下是一些有價值的情緒版靈感來源,可以幫助你進行搜尋:

  • 競爭對手的產品。 如果你正在設計一個應用程式或網站,請看看同一領域的其他品牌是如何做的。你可以在不抄襲的情況下借用某些元素來啟發你自己的設計。
  • Google 圖片。 嘗試在 Google 圖片搜尋中輸入某些關鍵字,看看會出現什麼。例如,你可以搜尋「熱帶」或「復古」等詞語,看看通常與這些主題相關的圖像和顏色是什麼。
  • 雜誌和其他印刷媒體。 雜誌可以是視覺靈感的絕佳來源,即使它們與你正在設計的產品沒有直接關係。例如,如果你正在設計與食物相關的應用程式,你可能會從食譜雜誌和書籍中獲得靈感。
  • 實體空間,例如百貨公司、陳列室和博物館。 即使你正在設計數位產品,也要將你的搜尋範圍擴展到數位領域之外。如果你正在為一家奢侈化妝品品牌設計網站,你可能會去百貨公司瀏覽他們的視覺展示以獲得靈感。如果你正在設計一個科學應用程式,你可能會去科學博物館一趟,為你的創意願景加油。跳出固有思維模式思考!
  • 瀏覽社群媒體(尤其是 Instagram 和 Pinterest)。 與 Google 圖片搜尋類似,你會在 Instagram 和 Pinterest 等網站上找到無盡的情緒版靈感。
我們在為一個來自杜拜的 Crypto 交易所設計品牌制定視覺策略的 Moodboard - Web3 Marketing Service by Tenten
無論你去哪裡尋找靈感,請記住始終專注於你的最終目標。牢記品牌、產品、你的目標用戶,以及——最重要的是——你想要喚起的情緒或氛圍。

如何創建情緒版:指南

在你進行了用戶研究、定義了用戶角色,並且對你的最終產品應解決的用戶問題有了很好的了解之後,你就可以開始創建情緒版了。

準備好為你的下一個設計項目創建情緒版了嗎?請按照以下 5 個步驟操作:

  1. 定義氛圍
  2. 定義風格
  3. 選擇你的情緒版元素
  4. 編譯你的情緒版
  5. 分享你的情緒版並收集反饋

讓我們更詳細地了解每個步驟。

1. 為你的情緒版定義氛圍

線索就在名稱中:你的情緒版在你看它的時候應該會讓人聯想到某種氛圍。因此,第一步是準確定義你的情緒版應該喚起什麼樣的氛圍和情緒。

問問你自己:當最終用戶看到並與我正在設計的產品互動時,他們應該有什麼感覺?

這就是你的情緒版應該捕捉到的東西。盡可能多地集思廣益,想出與情緒/氛圍相關的描述詞,然後回顧並挑選出三個最能傳達你的情緒版應採取的方向的描述詞。

以下是一些示例:

  • 在設計約會應用程式時,你可能希望你的最終用戶感到興奮、好奇和樂觀
  • 在設計冥想應用程式時,你可能希望你的最終用戶感到平靜、舒適和放鬆
  • 在設計線上學習平台時,你可能希望你的最終用戶感到自信、勇敢和熱情

2. 為你的情緒版定義風格

你已經確定了你的情緒版的氛圍。現在,你需要定義有助於喚起這種氛圍的風格和基調。

問問你自己:如果我的情緒版是一個人,他們的穿著風格如何 [風格],他們的個性如何 [基調]?

同樣,在這裡進行集思廣益的練習會有所幫助。一些描述風格的詞語包括:

  • 簡約
  • 優雅
  • 現代
  • 色彩豐富
  • 簡約主義
  • 復古
  • 懷舊
  • 鄉村風
  • 工業風
  • 時尚
  • 時髦
  • 經典
  • 務實
  • 專業
  • 嚴肅
  • 戲劇性
  • 大膽
  • 空靈
  • 樸實
  • 都市
  • 冒險
  • 有機

一些描述基調的詞語包括:

  • 俏皮
  • 外向
  • 厚臉皮
  • 權威
  • 自信
  • 大膽
  • 喜慶
  • 直接
  • 善解人意
  • 溫柔
  • 快樂
  • 輕鬆愉快
  • 充滿活力
  • 異想天開
  • 寧靜
Moodboard 在你看它的時候應該會讓人聯想到某種氛圍。因此,第一步是準確定義你的情緒版應該喚起什麼樣的氛圍和情緒。

3. 選擇你將添加到你的情緒版中的元素和素材

在定義了你的氛圍、風格和基調之後,你的創意願景開始成形。下一步是篩選你的靈感庫,並仔細選擇你將添加到你的情緒版中的元素。

如果你收集了很多不同的素材,那麼首先將它們分組可能會有幫助。例如,你可以為顏色靈感設置一個類別,為圖像設置另一個類別,為排版設置另一個類別,依此類推。然後,你可以從每個類別中挑選出最能代表你想要的氛圍和風格的幾個元素。

請記住,雖然你的情緒版不必完全統一,但你正在努力創造一個一致的視覺敘事。你選擇的所有單個元素都應該和諧地協同工作,以準確地傳達正確的氛圍。

4. 創建你的情緒版(遵循視覺層次規則)

你已經選擇了最能傳達你的願景的元素和素材。現在是時候將你的願景變為現實,並真正創建你的情緒版了。

如果你正在創建數位情緒版,請打開你選擇的工具(我們將在下一節中列出一些用於創建情緒版的最佳工具),然後選擇一個情緒版模板或從空白畫布開始。

上傳/添加你選擇的每個情緒版元素,並在此過程中嘗試不同的佈局和組合。在創建你的情緒版時,請遵循視覺層次規則,使用大小和位置來傳達某些元素的突出性或重要性。如果需要,你還可以包含文字,以提供(簡要)描述元素。

5. 與相關利益相關者分享你的情緒版並收集反饋

一旦你對你的情緒版感到滿意,你就可以與相關利益相關者分享它——無論是你正在為之設計的客戶,還是你團隊中的其他設計師。

在你分享它之前,你可能想要進行一輪用戶測試(與沒有直接參與該項目的人)。例如,你可以與其他部門的朋友或同事分享你的情緒版,並請他們描述情緒版給他們帶來的感受。這將使你能夠很好地了解你是否準確地捕捉並傳達了正確的基調。

根據客戶或利益相關者的反饋,你可以改進你的情緒版。然後,當你繼續進行原型設計時,使用你的情緒版來指導你,並提醒你應該遵循的創意方向。

最佳 Moodboard 情緒版工具和軟體

有很多工具可以幫助你創建數位情緒版。其中最受歡迎的包括:

  • Figma: Figma 是我們最常用的 BrainStorming, 與 Moodboard 的工具 。
  • Canva:免費的情緒版工具,它配備了一個簡單的拖放編輯器和一個廣泛的情緒版模板庫。
  • Pinterest:一個備受喜愛的線上拼貼工具,用於將圖像、GIF 和影片「釘」到虛擬釘板上。
  • Moodboard: 一個免費的基本工具,非常適合創建簡單、可分享的情緒版。你可以從空白板開始,或者從(少量)起始板中進行選擇。
  • Milanote: 另一個免費工具,被描述為「創意人士的 Evernote」。你可以使用 Milanote 將你的想法組織成視覺板、撰寫筆記和待辦事項列表,甚至可以將其用作數位白板工具進行協作。
  • Miro: 是 UX 和 UI 設計師使用的最流行和最通用的工具之一,因此你也可以使用它來創建情緒版也就不足為奇了。在此處了解有關如何使用 Miro 創建情緒版的更多資訊。

總結

最終,Moodboard 情緒版是一個優秀的設計思維工具,用於組織你的想法、定義創意方向,並將你的願景轉化為具體的東西。這對於讓每個人在最終產品的外觀和感覺上達成一致至關重要——在你開始更耗時的創建原型和單個設計素材的過程之前。

除了顯而易見的好處之外,創建情緒版還是一項有趣的任務。不要害怕跳出固有思維模式思考、嘗試不同的組合,並從不太可能的來源中汲取靈感。任何有助於喚起所需氛圍和傳達你的概念的東西都可以包含在內。

想要了解更多關於設計的資訊嗎?

Moodboard 情緒版只是設計師可能承擔的眾多任務之一。剛接觸設計領域?通過專業課程學習所有你將在該領域取得成功所需的基本理論、技術和工具。探索 UX 設計學院的 UI 設計認證,或者借助設計課程來權衡你的選擇。

Share this post