情绪板在移动UI设计中的应用

用户头像
北京/设计爱好者/8年前/49192浏览
情绪板在移动UI设计中的应用

情绪板在移动UI设计中的应用

1、你的设计沟通或许只差一个方法论


相信很多设计师在项目中有遇到以下这些问题,这时候你是怎么应对的呢?是拿着设计稿“回炉再造”还是驳回呢?

这个时候,如果能有理有据地阐述出你的设计⽅法论支撑,以驳回对⽅的质疑,设计稿的通过率将⼤大提⾼,而且对项⽬后续的设计提供非常有指导意义的帮助,提⾼设计的效率。





2、正确的设计处理流


当我们接到一个界面改版需求时,会考虑哪些点呢?

相信我们大部分人都会重点关注美观度,但是这往往是不够的,我们既要把界面做得好看,也要做得科学。我们这次要说的情绪板,就可以帮助我们做出一个更加有理有据的界面设计。 





3、情绪板的正确入门


网易UEDC给出的情绪板的定义如下:

情绪板,是对要设计的产品和相关主题方向的色彩、图片、影像或其他材料的收集,从而引起某些情绪反应,以此作为设计方向或者形式的参考。帮助设计师明确视觉设计需求,用于提取配色方案、视觉风格、质感材质,以指导视觉设计,为设计师提供灵感。

那么情绪板到底如何使用呢?我们先来看看整体的操作流程: 





4、情绪板如何用于移动端设计


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

接下来我们通过金融类产品改版案例,帮助大家更好地学会使用情绪板。

情绪板实操过程中,我们模拟一款金融理财服务的产品。在这次改版中,改版目标是希望突显产品专业、及时、全面、权威的品牌调性,同时匹配出符合产品调性的用色和视觉风格的设计,以满足金融产品的目标用户对投资收益、资金安全、周转灵活的心理诉求。 





5、第一步 确定原生关键词


通过产品定位、涉众访谈和以往的用户研究数据,我们可以获得大量的关键词,而这些关键词并不是都能用得上,我们需要筛选出既符合产品定位又能达到用户心理预期的,最终提取3个基础关键词:收益、安全、灵活。

注意要点:基础关键词一般在3-5个之间,同时原生关键词,一定要抽象化,不能过于具体。(例如:咖啡就是个具体名次,脑海中一下子就能联想出该物体) 





6、第二步 确定衍生关键词


由于第一步的原生关键词大多都比较抽象,因此我们需要对其进行发散和联想。

从而需要更多具体关键词,这样我们后面才能更容易找到相应的图片,具体关键词一般都是具体的物体。

总结:为了更科学地找图,第一步确定3-5个原生关键词,第二步在每个原生关键词下拓展3个衍生关键词。





7、第三步 搜集图片素材


关键词确定好后,我们终于可以在图库中,使用关键词进行图片的搜集了。这时候如果图片太多,不但会增加我们搜图的工作量,后期也不方便用户进行筛选,

如果图片太多,则可能搜到的图片重复率太高,导致得出的结论不够准确。所以一般来说1个关键词对应搜3-5张图片就足够了。





8、创建图片库式的情绪板


搜集好图片后,我们可以先在公司内部筛选一次,再将挑选出来的图片打乱并依次排列,邀请目标用户进行再次挑选,因为图片较多,这里只给出了一部分: 




在用户挑选图片的过程中,我们需要问用户2个问题:

  1. 分别选择最能代表“投资收益”、“资金安全”、“周转灵活”的几张图片。

  1. 你为什么选择了这张图片?图片的哪个元素让你觉得有安全的感觉?

问题1的目的是为了:挑选出最终能代表关键词的图片;

问题2能让我们了解用户选择图片的原因,挖掘出用户的心理情绪,从而了解到用户的视觉偏好,而这2个点都可以为我们后面做视觉设计做好铺垫,如下图:

经过这样一轮分析,我们选择的任何一个颜色,都将会有理有据,具备科学度。



到这里,你是不是以为情绪板已经完成它的使命了?其实真正有趣的地方才刚刚开始,APP的视觉设计策略原来可以用得如此得心应手!



9、情绪板在彩色化卡片的运用


彩色化卡片,是一个非常常见的功能入口,拥有各类颜色,但问题是:我们如何行之有效地提升细节感?




经过之前情绪板的铺垫,彩色化版块在设计时应该做到了色彩属性与业务属性相连接,才能与用户的认知匹配。

比如稳健投资的业务属性是稳定,而蓝色的色彩属性也有安全、稳定的意思,那么就做到了图标色彩的选取连接业务属性。





10、情绪板在图标风格上的运用


根据用户画像可以发现用户在投资过程中容易出现紧张不安的心理情绪,大多数用户都倾向寻求一个“靠谱”的平台。

且通过之前情绪板的调研发现,用户觉得一个图片能给他安全感,除了颜色之外,坚固圆润的造型,同样也能传递安全的感受。

因此在图标设计中采用圆角而非直角的设计细节也是为了缓和用户情绪,表达一种稳重和安全感。如Tab栏图标和列表流图标,都采用较为圆胖的圆角设计。





11、情绪板在界面呼吸感的运用


同样的,界面风格采用大留白的设计来增加页面的呼吸感,也是了缓解用户紧张不安的心理情绪。

什么样的图片能给用户带来安全?探索图片本质,我们同样能运用至界面设计,这就是情绪板的多样性。





12、哪些环节适合用图库进行情绪板实操


前面讲了情绪板在产品设计中的重要性,情绪板是什么,以及我们为何要使用情绪板以及如何去使用。

那么在整个产品设计流程中,到底有哪些环节可以使用到情绪板呢?

通过对市面上产品的分析,大致可以分为以下4个方面:风格、颜色、版式、图标。





13、增加设计科学度 情绪板是个利器


在项目前期,我们可以通过情绪板来定义产品整体的设计风格和产品主色调,设计过程中,界面排版、图标的颜色、形状和设计细节都可以使用情绪板来定义。

无论我们做什么样的设计,情绪板都无疑是一个很好的工具,它不仅可以帮助我们明确设计需求,做出更容易被大众所接受的设计,也可以帮助我们更好地去与领导和其他需求方沟通,向他们传达设计的价值主张,最终达成共识,提高设计效率。

快使用图库进行情绪版实操吧,实操过程中的疑惑,也欢迎大家在评论区交流,

我们也会积极为大家解除困惑。



作者:EthankDesign

作者链接:http://ethankdesign.zcool.com.cn/

1452
举报
|
1870
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
矢量立体简约UI蓝白图标
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
3D卡通UI界面图标可爱插画免扣素
UI应用平面图标
【新年UI图标】30个图标
新拟态风格 UI设计组件库
柠檬黄主题UI作品集模版
UI 登录界面设计模板包
盲盒APP UI设计
【新年UI图标】银行卡icon
【新年UI图标】酒店icon
拟物风质感写实UI卡片合集源文件
UI界面 组件
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
【新年UI图标】家具icon
【新年UI图标】珠宝icon
高级感金属拟物 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI通用设计素材1
我的钱包-UI界面设计-app
手表表盘UI系列
你可能喜欢
大家都在看
登录注册