什么是视觉化思维,产品经理为什么要掌握视觉化思维

引子

互联网运营工作多年,一直培养自己在互联网工具上的使用,希望通过使用最前沿的工具和掌握最先进的思维有效的提升自己的核心竞争力,之前写过如何利用表格和4p模型聚焦自己的思维,锻炼自己的逻辑思维能力,今天在分享给大家第二个分析利器,视觉化思维,俗称画图思维。

01 什么是视觉化思维?

视觉思维(Visual thinking)把想法或者收集来的信息,用可视的形式呈现出来。人类天生就具备画画的能力,最初是记录历史,描绘神话故事,随着社会的发展,视觉化思维有了一定的理论基础和实际应用,被广发地应用在企业管理,策略研讨,数据呈现,等多项重大决策领域。

02 视觉化思维的优点

  1. 能更清晰地表达心中的想法
  2. 易于描述多种复杂情况下的两者关系
  3. 对于整体观察有所帮助,能在多视角的情况下分析案例
  4. 更客观事实,描述的项目事件都是通过关系和数据进行节点分类,结论更客观有效
  5. 能持续锻炼自己的信息处理能力,更聚焦事件本身
  6. 图文并茂,展现形式更加丰富,在理性阐述的基础上又不缺失想象空间

03 塑造可视化思维过程

1. 明确目标与目标(目标)

无论做什么事情,明确的目标都是分析的前提,有了明确的目标其它的工作才有意义。目标可以是数字也可以是某项指标,我们常用的十字象限法,就是确定目标定位的有效工具,在视觉化思维里,它作为第一步明确地出现在方案的左上角成为方案前提。

2. 尽可能的收集完整数据

没有广泛调研和深度理解,就没有发言权。信息的收集和数据的整理是分析要点的前提,有效的整合信息尽可能的延展信息宽度,那么分析的结果也就更全面更准确。

举例:一个新的业务,除了收集它的市场信息、行业信息、竞品信息、以外,还要收集上下游产业信息,未来发展情况,国内外行业发展历史,企业自身资源信息等等,收集信息的深度与宽度越是丰富,得出来的结果就越是完整准确。

3. 尽可能地展示所有的数据或者信息

视觉化思维有一个化繁为简的过程,把收集到的信息尽可能地完整呈现出来,找到核心阶段,过滤无用数据,精炼数据的实际价值。

4. 建立基本坐标体系(模型)

坐标体系是视觉化思维体系内常用的模型工具,它的意义往往是制定内在规则和评估标准,什么是好的?什么是坏的?什么叫增长?什么是衰退?都在坐标体系中有所呈现。

除了我们常用的横纵坐标轴、十字象限、曲径坐标轴、区域分类、也经常被我们使用。

5. 将关系连接起来

视觉化思维除了能聚焦思维,有效地呈现信息结果,在明确两者关系上也非常好用,关系链往往呈现的是事件的因果,在其它数值不变的情况下,因为一个数值的改变导致另一个数据的改变,此为因果。关系链的建立能有效地帮助我们分析事件发生原因。

6. 得出相应结论

经历了以上的五步,我们就可以通过画图来完成视觉化思维模型的搭建,当所有信息、数值、关系链、因果、都放在你面前你通过视觉来分析结果的时候,你就能惊奇地发现,它是多么地好用而高效。你的领导常常用画图来完成复杂的工作任务是极其有道理的。

04 视觉化思维的应用

随着科技的进步,视觉化思维被应用的领域越来越广泛。特别是信息爆炸的这个时代,效率本身就是第一生产力。

  • 企业服务:神策、网盟、腾讯分析、其实都是视觉化思维的方式,
  • 职场办公:思维导图、幕布、亿图、
  • 科技领域:板书、图像呈现、图像识别、

1. 两道思维

很多UI拿到一个页面原型的时候,就立马打开各大设计网站找参考,然后照着参考页面上的效果,生搬硬套到原型上,这只是达到了美化页面的效果。

那么拿到原型后,应该带着怎样的思维来进行思考呢?

第一道思维-交互思维

先了解页面实现什么功能,功能的交互操作流程是怎样的,也就是说用户操作这个页面上的功能时,用户的行为路径是怎样的。

第二道思维-视觉思维

了解完功能、交互后,提取原型中视觉组成元素,细分归类,每一类应用统一性原则进行设计。

交互与视觉一同结合来设计界面。

2. 思维应用

结合案例我们来看下两道思维是如何进行的

第一道思维 – 交互思维:了解功能交互流程

根据实例原型分析出用户行为路径:

用户行为路径:

注意点:

  • 用户行为路径的获取,一定要跟产品经理、交互设计师进行沟通确认清楚。
  • 用户行为路径某些步骤中,也有先后之分,比如第1步中,用户输入了账户地址后,才会有账户的相关数据显示。
  • 用户行为路径可以支撑信息内容进行归类分组。

第二道思维 – 视觉思维:提取视觉组成元素

视觉元素:

注意点:

  • 提取视觉组件元素尽量详细归类。
  • 如有视觉规范,视觉组件元素风格应用请遵循视觉规范。
  • 如无视觉规范,同类视觉组件元素应用统一性原则进行设计。

3. 检验方案

我们带着两道思维来检验一下这位设计师输出的方案:

问题1 – 交互层级

(1)问题所在

数据显示在前,输入在后,交互操作层级有点混乱。

(2)问题截图

(3)问题解决

用户行为路径中,第1步有个先后顺序,先输入地址,后显示数据,在进行信息内容布局设计的时候同样需要有先后顺序,所以交互操作层级一定程度上影响着布局排版。

问题2 – 步骤关联

(1)问题所在

“批量转账”按钮归类到了第1步的信息模块中,交互操作逻辑有点不通畅。

(2)问题截图

(3)解决方案

用户行为路径中,用户核心费用信息后,最有可能的行为就是点击“批量转账”按钮,所以“批量转账”按钮与转账费用信息的操作关联性比较大,应该在同一模块里会更符合交互操作逻辑。

问题3 – 颜色

(1)问题所在

主色、点缀色、辅助色各自的应用范围没有规则,颜色应用混乱。

(2)问题截图

(3)问题解决

一个页面或者项目中,各种颜色的应用范围需要有一定规范,文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。

问题4 – 输入控件

(1)问题所在

输入类组件样式存在多样性,同样是输入框,有多种样式,会造成用户交互操作上的认知有误。

(2)问题截图

(3)问题解决

一个页面或者项目中,输入类组件样式应用统一性原则,保持视觉风格一致,从而减少用户操作认知偏差。

问题5 – 按钮样式

(1)问题所在

按钮样式应用到不具备按钮点击属性的对象上,用户会认为也是可点击,会造成用户交互操作上的认知有误。

(2)问题截图:

(3)问题解决

一个页面或者项目中,不具备按钮点击属性的元素尽量不要套用按钮样式,减少用户操作认知偏差。

举个例子:人形的稻草套上人的衣服,成功了欺骗了人们,造成了认知偏差。

问题6 – 信息展示

(1)问题所在

同类信息内容的展示存在多样式,传达过程中加重了用户的认知负担。

(2)问题截图

(3)问题解决

一个页面或者项目中,同类信息内容的展示应用相似性原则保持视觉风格一致,因为相似性的布局可以更加高效地传达信息。

举个例子:电商页面,金额信息展示;理财页面,收益信息的展示;都是应用相似性的布局,即统一又高效地传达信息。

问7 – 图标风格

(1)问题所在

图标风格不一致,图形反白风格,立体风格,线性风格。

(2)问题截图

(3)问题解决

根据产品的特性,建议统一的图标风格,选择线性、面性、渐变、立体等风格。

问题8- 对齐、间隔

(1)问题所在

页面元素的对齐、间隔没有规律,整体视觉显得松散,不严谨。

(2)问题截图

(3)问题解决

可以利用栅格系统,把页面信息内容规整起来。

4. 优化方案

根据发现的问题,我们来看一下优化后的设计方案:

优化1 – 操作路径

根据用户行为路径,将相关联的信息归类到一个模块,每个步骤划分到一个模块,相关联的步骤合并到一个模块,模块内完成各自的操作展示任务,模块之间信息内容互补干扰,但从结构布局又能够形成符合交互操作逻辑。

优化2- 颜色

规范颜色,配色的方法在这里不做深入讨论,这里方法的是基于品牌色通过饱和度、亮度、透明度的变话来得出文字各层级的颜色、边框的颜色。

优化3 – 输入控件

对输入类控件的样式进行了统一,让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的,从而减少用户对交互操作上的认知成本,提高信息输入效率。

输入控件进行交互时,要有交互状态反馈,默认状态、选中状态、错误状态。视情况而定,可以增加鼠标移上状态和不可输入状态。

状态变化时的颜色应用,可以通过变换色相的透明度来保持色彩的一致性。

优化4 – 按钮

对按钮进行了分类,分为常规按钮、图标按钮、文字按钮;对按钮样式用颜色进行了统一;按钮要有交互状态反馈,不可点击状态、可点击状态、鼠标移上状态、鼠标按下。

状态变化时的颜色应用,可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。

优化5 – 信息展示

对信息内容应用相似性原则进行了排版的统一处理,每个小类信息的标题与内容采用统一排版格式,然后重复应用,有助于提高信息获取效率。

优化6 – 图标

这里的图标应用于功能性图标,统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。

优化7 – 对齐、间隔

应用栅格系统对视觉元素之间的对齐、间隔进行调整,使页面视觉更加严谨,页面信息更容易阅读。

总结

(1)交互思维

了解页面中的功能交互流程,梳理用户操作行为路径,可以对行为步骤中的信息内容进行归类分组提供依据,最终有助于页面信息内容的排版布局。

(2)视觉思维

提取视觉组成元素,对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计,再通过视觉元素本身相互组合,最终应用回信息内容上,建立规范的视觉感。

设计一个页面,交互思维和视觉思维是互相配合的,缺一不可,最终都是为了共同去构造符合交互操作

07 从使用视觉化工具到可视化思考

多数的视觉化工具使用者都简单地认为视觉化只是帮助我们分析问题的工具,但随着我们更深入地理解和使用你就会发现,视觉化工具就会升级为视觉化思维。它是我们解决问题与交流沟通的核心。

我们会自然而然地培养出视觉化思维,并选择一个恰当的方式一直思考下去。

不管未来如何发展,可视化思维所扮演的角色只会越来越重要,画图表达、数据呈现、将成为我们决策未来,有效沟通的重要组成部分,纵观我们的工作,一切都要从“看”开始。

文章由PM28网编辑,作者:海阁,如若转载,请注明出处:http://www.pm28.com/3879.html欢迎投稿

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息