UI/视觉设计师如何确定一个产品的主视觉风格？ - 简书
UI/视觉设计师如何确定一个产品的主视觉风格？
参考自：网易UEDC、简书
庖丁开发整理
一个产品的视觉效果无异于一个人的外形打扮，它是用户对你的产品的第一印象，直接影响到用户接下来的使用体验，尤为重要，那么一个好的视觉风格是怎么设计出来的呢？今天丁丁给大家介绍一个名词：情绪板（Mood Board）。它是一个系统的确定主视觉风格的方法。
什么是情绪板？
MOOD BOARD（情绪板），是指对要设计的产品以及相关主题方向的色彩，图片，影像或其他材料的收集，从而引起某些情绪反应， 以此作为设计方向或者是形式的参考。帮助设计师明确视觉设计需求，用于提取配色方案、视觉风格、质感材质，以指导视觉设计，为设计师提供灵感。
视觉设计师可能会花很长时间产出了精致、高品质的设计，得到的却是用户或客户的一句话：这不是我想要的！一般来说，在没有见到效果前，人们并不清楚自己要的是什么。但是在看到成品后，他们可以轻易地判断是否符合自己的喜好或期望。因此，在为错误的设计方向投入过多前，了解用户对风格的期望和需求，从而确定整个网站或产品的视觉风格是有必要的。
情绪板是一种借助图像，启发和探索用户的体验，然后再作用于视觉设计的研究方法。 可以调查并形成具有指导意义的「风格感受」和「设计元素」。情绪板的核心原理是依靠「图像」，沟通产品与用户、用户的潜意识与意识、用户的感性（情绪）与理性，其神经心理学基础为：
大部分沟通为非语言的
思考是通过影像产生的
感官影像为重要隐喻，而这些影像大多是视觉的
思考中的深层结构是可触及的
体验是理性与感性（情绪）的混合
此外，情绪板也可以作为可视化的沟通工具，快速地向他人传达设计师想要表达的整体感觉（feel）。
如何创建一个情绪板
完整过程总览
首先，需要明确体验关键词。在一个设计项目中，通过进行涉众访谈和用户研究，研究设计人员创建了产品的人物角色，然后基于人物角色，综合用户研究结果以及品牌/营销文档，可以得出体验关键词。当人物角色和体验关键词都确定后，可以通过使用情绪板来探索网站或产品的视觉风格，并作为和内部人员进行早期沟通的基础。
丨确定体验关键词
主要是通过事先涉众访谈以及对既往用户的研究，比如这个产品给用户带来什么特别的感受，和 xx 竞品相比有什么差异等问题来确定体验关键词。
丨图片素材的收集
体验关键词提取好之后，可以在内部使用情绪板，由视觉设计师来完成，要注意以下几点：
1、需要制作3套以上情绪板供评审。
2、制作的过程是个迭代的过程，需要内部团队慎重讨论决定。
3、情绪板的形式可以有多种，如拼贴画或精致化的模板。
丨邀请用户来参与创建情绪板
最终你的产品时为用户服务的，所以还要由用户参与创建、更改情绪板。这时候要注意可以呈现给用户的图片有限的，因此，在挑选图片时，需要内部研究和设计人员协同，根据视觉设计所需要考虑的几个维度结合已有的关键词进行图片的筛选。一般来说，在将图片呈现给用户之前，内部人员已经明确了每一张图片所代表的意义，在用户选择和访谈结束后，两方面的数据综合分析才能获得最终的结果。
情绪板用于视觉设计的实践
实践才是真理。我们用一个案例来分析阐述如何利用情绪板的结果，并与视觉设计很好地结合起来。在 App Store 随意选择一款手机应用《老偏方》，用作实践。
对《老偏方》采用情绪板的用户研究方法（具体过程略去）。情绪板结果如下：
情绪板结果分析、及提取视觉元素：
设计过程如下：
丨点击导航
****丨最终成果（对比）
一个看似简单的 logo 其实是经过无数的调研，分析设计出来的，同样，一个页面的主视觉页面也不是随便设计出来的。周一学会用情绪板确定主视觉风格的目标完成了，如何去做好就要在工作实践中去摸索总结了。
简书、微信公众号同名作者。专注于互联网软件项目，为客户提供需求梳理、产品原型、UI 设计、软件开发等服务。
//我所经历的大数据平台发展史（三）：互联网时代 o 上篇http://www.infoq.com/cn/articles/the-development-history-of-big-data-platform-paet02 编者按：本文是松子（李博源）的大数据平台发展史...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
第一本感触深刻的产品书，本来是在看交互设计的主题阅读。误打误撞到这一本《启示录》，作者Marty Cagan是享有世界声誉的产品管理专家，曾担任Netscape副总裁、eBay产品管理及设计高级副总裁。 虽然是产品经理视角的，但是从对于人员、流程、管理3个角度的分析得是满满...
秋天，天气很冷…… 再难熬的时间都会熬成过往，伤心大哭也好，隐忍内伤也好，一直往前走，一直走，停下来会更疼。
童童和芳芳曾经是很好的闺蜜，就像电影《七月与安生》那样，她们亲密无间。 童童比芳芳小两岁，从小到大她什么都听芳芳的，因为妈妈说了，小朋友要听大朋友的。正是因为游戏时童童都听芳芳的指挥，所以她俩从小到大都没吵过架，两个人腻在一起像亲姐俩。 她们的友谊破裂，是因为一个突然闯进她...
故事是这样的，有一天，长腿欧尼加入了剽悍一只猫的行动营，然后变成了靠谱的长腿欧巴。当然现在还只是幻想啦，希望能成真。 长腿欧尼平时神经大条，常忽略身边的小确幸，所以平时想写这样的流水账都没素材，而剽悍营就是小确幸的集中营，只有21天的行动期，3天的预备期，光阴易逝，欧尼想一...
年龄越大，越觉得生活无时无刻都存在一个永恒的选择题：该不该较真儿。 早上天还没亮，你就被邻居家装修的声音吵醒，该不该去告诉邻居这样是扰民？ 出门上班，你感觉自己乘坐的公交车线路车辆实在太少，早高峰拥挤不堪而另外一个线路却经常空车呼啸而过，该不该去给运营单位反应情况？ 到了办...随着商业化竞争激烈程度不断增大，决定一个产品能否成功的关键有两点：一是过硬的质量和性能，二是优秀的“颜值”与体验。UI/UX设计师的重要工作就是为产品设计绝世美颜，优化产品的交互性能，从而给用户带来良好的体验。所以，想要成为一名优秀的UI/UX设计师，需要掌握的不仅仅是绘图，设计，在这里我们一起分享如何成为一名优秀UI/UX设计师的关键要素。一、优秀UI/UX设计师所需要具备的特质任何人通过基本学习都能够进入UI设计的大门，但是想要在设计的道路上走的更远，成为一名优秀的设计师，除了基本的设计能力之外，还需要具备以下特质：逻辑思维能力强、数据分析能力好、有同理心、有激情、有审美眼光、有创新意识、有良好的沟通能力、有敏捷的执行能力、胆大心细、有大局观、善于观察、仔细倾听。如果某些方面有欠缺，需要进行及时的弥补与针对性的锻炼。二、UI/UX设计需要美感UI设计最终作品的呈现，美感是第一位，视觉上第一感觉都没有俘获用户的心，让用户没有了欲望，更何谈用户的感受、体验、便捷、持久呢？因此想要成为一名优秀UI设计师，一定要注重培养UI设计师的美感。在平时可以通过练习设计一些手绘能力、色彩能力，同时养成收集、整理、欣赏优秀素材的良好习惯。三、关注UI/UX设计的发展趋势很多刚刚了解UI设计的职场新手，在面试之初会被问及一些类似“你怎么看UI设计的流行趋势”等诸如此类的问题，只有让自己拓宽眼界之后，才能让设计出的作品更具有内涵，让自己的设计变得越发合理。四、设计类软件的操作熟练很多UI设计小白觉得自己有各种想法，各种创意，满腹经纶，疏忽了设计软件的熟练程度。设计软件是UI设计师的武器，在面试中，我们很多时候都会要求设计师现场做一些简单的图标，或者图片，以便看看这个设计师的基本功是否扎实。因此你的软件使用熟练度，会让我们感到有些面试者根本不像一个UI设计师。优秀UI设计师必备的软件有：1）&- 最简单便捷的原型图制作工具2）Photoshop - （PS位图工具）3）illustrator（AI矢量工具）五、积极总结和分享UI/UX设计是一个要活到老学到了的职位了，你要持续关注最新产品，最新交互设计方法，保持自己的精力充沛和创意无穷是很难的。在每个阶段性的时间里，都要沉淀自己的案例，积累自己的理论，乐于总结和分享，这对你自己来说是个莫大的促进作用，对别人来说也是好事情。更多设计类相关干货（文章及经验教程），尽在：
提示本站所有资源仅供学习与参考，请勿用于商业用途。转载请注明来自：
您可能也喜欢
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。高级ui设计师岗位工作经历怎么写
简历本 发表于 日
工作经历（案例一）工作时间：2015-12到至今公司名称：百度 | 所在部门： | 所在岗位：高级ui设计师工作描述：1. 负责ios移动应用UI设计，及相关活动专题页等设计，包括风格设计，色彩搭配，页面布局、用户体验等。
2. 配合产品经理、用户研究员进行市场调研、用户研究和竞品分析，参与UE设计讨论，给出UI、UE方面建议，提出自己的想法，根据需求，完善优化视觉用户体验。3. 根据视觉设计的发展趋势及用户研究的结果不断优化产品的视觉体验。4. 跟踪产品的用户反馈，对现有产品的可用性测试和评估，提出改善方案，不断优化用户体验。工作经历（案例二）工作时间：15-11公司名称：北京鸿睿思博科技有限公司 | 所在部门： | 所在岗位：高级ui设计师工作描述：1. 负责移动端与PC端的整体风格定位和设计。 2. 负责制作具有创意和视觉冲击力的广告宣传和产品展示。 3. 独立完成多个具有代表性的商业案例，负责企业网站以及日常活动的宣传海报设计，并配合前端开发完成切图和标注图的输出。 4. 参与用户界面设计流程并提供建设性创意及方案设计。
5. 负责网站前台界面的视觉优化，配合交互设计师对用户的反馈进行分析，提出可行性的改善方案，不断优化用户体验。 工作经历（案例三）工作时间：2015-08到至今公司名称：北京怡合春天科技有限公司 | 所在部门： | 所在岗位：高级ui设计师工作描述：1、负责公司项目【京医通APP】V2.0版本整体UI交互设计，重新定义设计规范把控整体风格，输出所需设计图；2、负责运营【H5】的整体UI设计，以及京医通微信公众号界面的更新优化；3、负责【本木医疗官网】网站整体视觉设计；4、负责【京医通官网】网站首页改版设计；5、负责把控相应产品的设计实现效果，积极与开发沟通，推进界面及交互设计的最终实现。6、研究产品的用户群体根据各种相关应用的用户群，提出构思新颖、有高度吸引力的创意设计。工作经历（案例四）工作时间：17-09公司名称：玖富互金控股集团有限公司 | 所在部门：UED | 所在岗位：高级UI设计师工作描述：玖富钱包移动端及官网整体界面设计；与产品共同分析明确业务需求及用户诉求，模拟用户使用场景规划设计方案；参与制定玖富官网及玖富钱包设计规范；关注用户反馈与数据表现，配合测试人员实景操作，并根据用户操作习惯做出相应改版；根据运营需求设计线上活动流程，以及线上活动的页面设计。维护和更新UI设计视觉风格和相关设计文档与规范；分析用户的使用习惯，给主设提建议，提升产品体验，使用户操作更人性化； 参与产品界面视觉用户研究，设计流行趋势分析； 对公司产品的界面持续进行设计、编辑、优化，参与每次版本迭代后的内部测试；
i 以上内容均来自互联网，如果侵犯了您的权益，请立即删除（附上内容地址）
上一篇：&&&&&&&&&UI/视觉设计师如何确定一个产品的主视觉风格？
UI/视觉设计师如何确定一个产品的主视觉风格？
一个产品的视觉效果无异于一个人的外形打扮，它是用户对你的产品的第一印象，直接影响到用户接下来的使用体验，尤为重要，那么一个好的视觉风格是怎么设计出来的呢？今天丁丁给大家介绍一个名词：情绪板（Mood Board）。它是一个系统的确定主视觉风格的方法。
什么是情绪板？
MOOD BOARD（情绪板），是指对要设计的产品以及相关主题方向的色彩，图片，影像或其他材料的收集，从而引起某些情绪反应， 以此作为设计方向或者是形式的参考。帮助设计师明确视觉设计需求，用于提取配色方案、视觉风格、质感材质，以指导视觉设计，为设计师提供灵感。
视觉设计师可能会花很长时间产出了精致、高品质的设计，得到的却是用户或客户的一句话：这不是我想要的！
一般来说，在没有见到效果前，人们并不清楚自己要的是什么。但是在看到成品后，他们可以轻易地判断是否符合自己的喜好或期望。因此，在为错误的设计方向投入过多前，了解用户对风格的期望和需求，从而确定整个网站或产品的视觉风格是有必要的。
情绪板是一种借助图像，启发和探索用户的体验，然后再作用于视觉设计的研究方法。 可以调查并形成具有指导意义的「风格感受」和「设计元素」。
情绪板的核心原理是依靠「图像」，沟通产品与用户、用户的潜意识与意识、用户的感性（情绪）与理性，其神经心理学基础为：
大部分沟通为非语言的
思考是通过影像产生的
感官影像为重要隐喻，而这些影像大多是视觉的
思考中的深层结构是可触及的
体验是理性与感性（情绪）的混合
此外，情绪板也可以作为可视化的沟通工具，快速地向他人传达设计师想要表达的整体感觉（feel）。
如何创建一个情绪板
完整过程总览
首先，需要明确体验关键词。在一个设计项目中，通过进行涉众访谈和用户研究，研究设计人员创建了产品的人物角色，然后基于人物角色，综合用户研究结果以及品牌/营销文档，可以得出体验关键词。当人物角色和体验关键词都确定后，可以通过使用情绪板来探索网站或产品的视觉风格，并作为和内部人员进行早期沟通的基础。
丨确定体验关键词
主要是通过事先涉众访谈以及对既往用户的研究，比如这个产品给用户带来什么特别的感受，和 xx 竞品相比有什么差异等问题来确定体验关键词。
丨图片素材的收集
体验关键词提取好之后，可以在内部使用情绪板，由视觉设计师来完成，要注意以下几点：
1、需要制作3套以上情绪板供评审。
2、制作的过程是个迭代的过程，需要内部团队慎重讨论决定。
3、情绪板的形式可以有多种，如拼贴画或精致化的模板。
丨邀请用户来参与创建情绪板
最终你的产品时为用户服务的，所以还要由用户参与创建、更改情绪板。这时候要注意可以呈现给用户的图片有限的，因此，在挑选图片时，需要内部研究和设计人员协同，根据视觉设计所需要考虑的几个维度结合已有的关键词进行图片的筛选。一般来说，在将图片呈现给用户之前，内部人员已经明确了每一张图片所代表的意义，在用户选择和访谈结束后，两方面的数据综合分析才能获得最终的结果。
情绪板用于视觉设计的实践
实践才是真理。我们用一个案例来分析阐述如何利用情绪板的结果，并与视觉设计很好地结合起来。
在 App Store 随意选择一款手机应用《老偏方》，用作实践。
对《老偏方》采用情绪板的用户研究方法（具体过程略去）。情绪板结果如下：
情绪板结果分析、及提取视觉元素：
设计过程如下：
丨点击导航
丨最终成果（对比）
一个看似简单的 logo 其实是经过无数的调研，分析设计出来的，同样，一个页面的主视觉页面也不是随便设计出来的。周一学会用情绪板确定主视觉风格的目标完成了，如何去做好就要在工作实践中去摸索总结了。