理性设计-情绪板在移动端的运用

Recommanded by editor
西安/UI设计师/5年前/5240浏览
理性设计-情绪板在移动端的运用Recommanded by editor
GLD蛮

最近总结一下自己使用情绪板的方法,希望可以帮助到你~(文章时长约10分钟)

一、设计小白通用痛点


当你从产品经理那拿到一个黑白原型,是否无从下手?面对甲方爸爸的奇怪要求,你无力反驳,只能乖乖一次次改设计稿?作为一个设计师怎么掌控一个项目或者活动页的整体风格?

这个时候--我们通常就要采用情绪板进行一系列的设计推导,它能为你的页面提供有理有据的设计支撑,同时也可快速过稿~


二、什么是情绪板?


首先,让我们了解一下情绪。

情绪-是对一系列主观认知经验的通称,是多种感觉、思想和行为综合产生的心理和生理状态。

我们的产品最终想要带给用户的感受,就是一种情绪表达。

从设计角度来讲,我们通过色彩、版面对用户进行感官刺激,在不同颜色、不同质感的的刺激下,会产生不同的心理和生理状态。举个例子~

情绪板,是设计师通过可视化的沟通方法,解决图像风格、色彩、文字排版,图案以及整体外观等视觉主观因素的方法。

它可以让我们快速定义设计方向,帮助设计师明确设计需求,用于提取配色方案、视觉风格、质感材质,以指导视觉设计,为设计师提供灵感。

情绪板到底如何使用呢?让我们看看整体构成和操作流程。

三、情绪板在移动端设计中的运用


同理,可以将情绪板运用到移动端界面视觉设计中,通过探索用户的心理情绪和需求,可以将感受可视化,并作用于界面视觉风格、图标风格的走向、关键图标的选取等各个方面。为视觉细节的产出奠定理论基础。

接下来,我将通过我们产品-每日瑜伽,实操讲解情绪板在工作中的运用。


  1. 1 明确目标用户所带属性标签




  2. 2 将目标用户、产品定位/公司理念、使用愿景相结合,提取原生关键词

  3. 注意:原生关键词都是抽象化的词,大多是形容带给你感受的词语,而不是具体一个事物。提取原生关键词的数量在3-5个左右,避免花费过多时间和精力去提取和采集图片。

  4. 3 三个维度确定衍生关键词

  5. 由于原生关键词都是选用抽象的词语,第三步我们会根据原生关键词通过视觉映射、感受映射、具象映射三个维度来再次衍生出3个关键词,便于我们寻找素材图片;相应的,我们就可以在衍生关键词中提取出用于页面设计的颜色和元素。

  6. 视觉映射包含了颜色情绪和视觉表现形式。


  7. 4 收集图片素材

  8. 根据关键词寻找相符合的图片,每个衍生关键词产生的图片也很多,这个时候就需要经过设计师和公司内部初步筛选出每关键词3张左右的图片提供给目标用户,询问目标用户哪张图片能带给她相应的感受。

  9. 并且深度挖掘出,为什么这张图会带给她这样的感受?找到能给用户带来情绪感受的点。

  10. 5 情绪板如何确定主色

6 情绪板如何运用在移动端页面

通过情绪板,我们确定了品牌色,你以为这样就结束了??提取了那么多关键词,都没用了吗?不不不~这才刚刚开始!

我们都知道产品主色占页面比重为70%以上,点缀色占用5%左右,拿两个小模块为例:

用户访谈后,我们知道用户希望产品能带来舒适的使用感受,在视觉映射上,舒适=渐变+低饱和度。有没有很简单?颜色说的差不多了,让我们来看看关键词元素的运用:

还有很多小心思我就不一一列举了,让我们总结一下

情绪板可以用于产品设计前期或改版时的风格梳理,理清思路,让你的页面有理有据~但也希望大家不要拘泥形式,展开想象,多多尝试~

希望这篇文章可以帮到你~




理论参考:EDC、应骏、海洛创意➕我自己哈哈哈哈哈哈



121
Report
|
231
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一大波可爱小动物
Homepage recommendation
相关收藏夹
UI
UI
UI
UI
作品收藏夹
UI
1532
00学习资料
00学习资料
00学习资料
00学习资料
作品收藏夹
02_界面设计_教程
02_界面设计_教程
02_界面设计_教程
02_界面设计_教程
作品收藏夹
规范观点
规范观点
规范观点
规范观点
作品收藏夹
移动端设计规范
移动端设计规范
移动端设计规范
移动端设计规范
作品收藏夹
干货
干货
干货
干货
作品收藏夹
大家都在看
Log in