每个伟大的设计项目都始于一点灵感。无论你是在设计网站、应用程序,还是想重新装修房子,情绪板都可以帮助你激发创意,甚至,情绪板可以决定UI界面是否成功。本文我们将分享什么是情绪板、为什么需要情绪板以及如何充分利用它。现在,让我们开始进入今天的主题

1. 什么是情绪板

情绪板(MoodBoard)到底是什么?简单地说,它是一个结合了各种视觉元素的拼贴画——比如颜色、排版、图像和文字,目标是收集任何能在美学上激发你并代表你想要的最终外观的视觉创意。换句话说,它是关于确定你的设计的整体“情绪”。

情绪板和线框图、原型不一样,它不会显示未来项目所涉及到的详细图片,它旨在营造产品对应的正确的情绪和符合预期的感觉。最初的情绪板是用彩色剪纸张贴拼成的一个实体板,但是现在有很多工具(如Pixso)可以在屏幕上创建你的情绪板,这样不仅创建方便,而且非常方便与其他人合作或共享。

ui情绪板

2. 为什么需要UI情绪板

在深入任何设计项目之前,有一个明确的目标很重要。情绪板不仅可以帮助帮助设计师找到正确的设计方向,而且还可以为参与该过程的其他人提供极大的帮助。以下是使用情绪板的一些主要好处:

  • 为你的设计寻找愿景。如果你有一个设计项目,但不确定从哪里开始,你可以先构建一个情绪板,通过探索各种设计元素,充分激发你的设计灵感。

  • 与团队分享你的想法。设计和美学是个抽象的话题,想要用语言来描述设计想法有时候并不是那么容易。但是通过在情绪板上将你的设计构想可视化,有利于促进团队分享和合作。

  • 与客户进行有效的沟通。同样,情绪板是向客户展示设计理念并让他们保持参与的好方法,尤其是面向没有设计基础的客户,你可以借助情绪板来描述你的想法并帮助客户更形象化地理解项目的方向。

3. 如何创建UI情绪板

3.1 情绪板可以添加哪些元素

请记住,情绪板旨在激发灵感。因此,请随意添加你认为代表你的设计灵感的任何视觉元素,如:

  • 颜色:纯色、笔触或调色板,可以帮助你确定配色方案。

  • 图片:添加任何表达你想法的图片,无论是照片还是数字插图。图片选取方面,我们可以从多行业去发觉灵感,避免局限固定领域,比如可以家居、建筑、自然环境等。

  • 单词:你可以包含描述项目情绪的单词或短语。例如,你可以在关于素食食谱设计的情绪板中添加“植物性”字样。

  • 排版:比如错层网格、轻投影卡片、混合现实数字化叠加等。

3.2 如何寻找情绪板资源

如果你不确定在哪里可以找到情绪板的视觉元素,Pixso社区可以提供帮助。Pixso资源社区内置海量国内外大厂的设计系统及组件库,包括TDesign、Arco Design、Ant Design、Material design、阿里、京东、华为等优秀设计规范,设计系统、图标Icon、组件库、插画、线框图等设计资源应有尽有,并且更新频率非常快。设计师可以通过免费浏览和下载设计案例的方式获取灵感,还有很多实战项目设计资源也可以免费下载使用。

UI情绪板资源

3.3 如何用Pixso创建UI情绪板

下面,我们用一个简单的案例来帮助大家更好的学习使用情绪板。

主题:海洋动物科普类应用程序

Step1:关键词

一说到海洋动物我们会想到什么关键词呢?深海、保育、生态、自然、有趣......

UI情绪板资源

Step2:关键词联想

接下来,我们再对关键词进行细化和联想,得到更加详细具体的关键词,例如:深海可能联想到深蓝的海水、大海里的鱼等等。

Step3:通过关键词查找素材

通过上面的关键词,我们可以找到各种图片素材,有场景相关的、元素相关的、字体相关的、色彩相关的。

创建ui情绪板

Step4:创建情绪板

将收集到的素材和关键词放到一起,情绪板就创建好啦!

情绪板图片素材

简单来说,在设计中运用情绪板共有四个步骤:关键词、关键词联想、找素材、创建情绪板。Pixso社区上有许多关于情绪板创建的最新案例的教程和笔记,设计师小白可查看新手教程,手把手教你创建UI情绪板。有设计基础的设计师可查看情绪板设计指南,学习如何高效应用情绪板。Pixso设计资源集合产品、UI设计、UX设计技巧,向用户分享经验与想法,每月更新,创意快人一步,喜爱设计的你一定不容错过!

4. 小结

总的来说,情绪板对于项目设计风格的探索和制定有很好的帮助,将情绪板融入到所从事的设计项目中是一件有意义的事。话不多说,打开Pixso试试看吧!