作为设计师,对于新的项目,我们除了自己思考设计外,还时常需要与客户、老板、产品等非设计人员,输出我们的一些设计想法。而这可以通过情绪板的方式进行。情绪板也可以叫做风格参考图,它的作用主要是在做设计提案之前,方便设计本人与项目相关人员之间进行沟通交流,让各方人员对后面的设计提的风格调性达成一定的共识,从而提升设计效率

情绪板在UI设计中,可以具象设计师的设计想法,更好的与产品沟通交流,从而为最终设计方案提供指导。因此,学会创建情绪板是至关重要的。今天,Pixso设计师就通过Pixso软件,手把手教大家如何创建一个情绪板,希望可以帮助大家快速上手。

关键词提取

首先,在进行UI设计的情绪板制作前,我们需要获取3-5个必要的关键词组,这些关键词需要与产品进行沟通交流获取,且关键词须与本次设计所要实现的产品、交互或视觉目标有关。常见的比如:高端、时尚、简洁、质感、高效、新颖等等。然后,在原有这些词汇的基础上,来衍生出一些新的词语。而这种衍生词汇,不是简单脑暴一下就能产生出来的,而是要有目的性的进行提取出与其相关的视觉元素。比如高端可联想黑色、金色、宝马等。

假设这里Pixso设计师获取到的关键词为:简洁、安全、可依赖、明亮、平静、有趣。那么,可以衍生的视觉词组包括蓝色、天空、抽象插图等。

图片检索

我们既可以通过网络寻找UI视觉图像,也可以通过Pixso社区进行资源查找,Pixso社区拥有腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,并提供海量设计模板和素材,方便UI设计师收集大量视觉灵感和创意。另外,还可以参考杂志、报纸、海报等从不同来源获取灵感,这可以帮助我们获得更具创意性的视觉效果。

知道了图片检索渠道后,我们就可以花费半天时间进行素材收集了。这里Pixso设计师要重点强调一点,我们要尽可能的以前期获得的关键词为目标进行检索,且对于检索到的图片运用要有大概的判断,比如是颜色还是排版,又或者是材质等,要重点考虑UI设计中的内容。以下为Pixso设计师根据之前的关键词,通过Pixso社区资源获取的部分UI方面的风格参考图片。

情绪板素材
情绪板素材

创建情绪板

在获得了创建情绪板的图片素材之后,接下来我们可以进行制作情绪板设计的关键步骤了即创建情绪板风格故事。目前,搜索到的图片只是一些漂亮的图像,这些东西不能有效的传达出设计师的设计想法。因此我们需要把所有的图片用一条共同的线索将它们连接起来,讲述一个有凝聚力的故事,否则这些图片就只是一种随机的视觉组合。那么,要怎么做才能将这些图片连接起来,形成一个草图设计方案?因为Pixso支持设计师在任意浏览器完成所有工作,同步更新修改内容,有助于提高效率,所以这里通过Pixso设计软件来给大家演示操作步骤。

1. 新建文件

登入Pixso网站的账户,就会进入如下图所示的界面,点击“新建文件”创建出一个新的空白Pixso文件。


Pixso首页
3. 将图片素材拖入Pixso编辑器

在Pixso编辑器里,新建一个画板。然后,将之前收集好的情绪板所需的图片素材,直接拖动到Pixso编辑器里的画板上,方便我们制作情绪板。

情绪板素材准备
情绪板素材准备
3. 情绪板风格定义

UI设计师需要根据UI元素,将情绪板素材风格的应用且转化为设计方案草图。首先,在每个情绪板设计方案中,Pixso设计师建议用一个大图像来表达中心思想,周围是其他几个支持它的小图像,也就是说图像要区分主次。这样可使得大胆地传达信息变得容易,其他人可第一眼看到重点信息,因为大图像更引人注目,支持图像可以提供想法的较小细节或主题。

其次,情绪板的制作需要,将类似风格的图片作为一组对其进行风格命名,并需要从图标、颜色、字体等等一系列的内容进行细致的阐述,从而让其他人更容易的了解设计师的想法。

最后,对于最终的情绪板呈现方案,要尽可能多维度的进行对比,展现出一个完整性、系统性的设计方案。如下图所示为Pixso设计师,使用Pixso制作的UI设计的一个情绪板案例

 情绪板案例
情绪板案例
4. 情绪板分享

情绪板只是广泛的构思草图,可以随着原始想法的发展而改变。所以,我们在做好情绪板之后可通过Pixso的分享功能,将其分享给相关同事,同事可直接在Pixso进行评论,设计师可实时查看反馈。这些关于情绪板的反馈,也将在设计师制作真实演示文稿时,提供设计方向。这大大提升了团队协作的效率,相信Pixso将成为未来设计协作的新趋势

情绪板分享
情绪板分享

结论

最后,Pixso设计师认为,情绪板对于我们完成UI视觉风格的制定是有非常好的帮助,它可以让我们随心所欲地进行实验和创意,方便快速的传达出更多、更好的设计想法。但是在实际工作中,对于情绪板的制作与应用还需要灵活变通,不要像套公式般地制作,而是要真正地解决实际问题。另外,在情绪板制作后,当视觉不能传达出更有效的信息时,我们可以尝试使用文字进行辅助说明,以便更好地向他人进行解释。关于情绪板的介绍也就讲到这里,大家下次再见