-
从3个方面,总结B端设计师要了解的产品思维
UI交互 2022-10-05这篇文章从概念出发,深入浅出地介绍了设计师提升产品思维的方法,推荐 B 端设计师阅读。用网易的实战案例,帮你掌握3种产品思维工具前言:关于产品思维的迷思 网易邮箱大师 徐恺:在业务工作中,我们经常会讨论到:处理这个问题你需要运用产品思维;我想要提高一下自己的产品思维…阅读文章 > 一、产品思维概念产品思维拆...这篇文章从概念出发,深入浅出地介绍了设计师提升 产品思维 的方法,推荐 B 端 设计师 阅读。
用网易的实战案例,帮你掌握3种产品思维工具 前言:关于产品思维的迷思 网易邮箱大师 徐恺:在业务工作中,我们经常会讨论到:处理这个问题你需要运用产品思维;我想要提高一下自己的产品思维…
阅读文章 >
一、产品思维概念 产品思维拆解开就是产品+思维。
产品是什么?产品是满足用户需求、解决用户问题的载体,是一系列功能的集合。
思维是什么?思维是思考问题的方式,不同的人因为经历和经验不同,思考问题的方式也不同。
所以,个人对“产品思维”的理解是:产品思维是一种解决问题的综合思维,是进一步把问题解决方案产品化的过程。
1. 什么是解决问题 解决问题=定义问题 +分析问题 +如何解决
① 定义问题:指问题是什么
在产品设计中,我们用的最多的是“用户思维和数据思维”。
用户思维:是我们最重要的一种思维方式,站在用户的角度来思考问题。你需要把自己看成产品的用户,利用同理心,思考在 B 端产品工作使用场景中遇到同样的情况时,你会做什么样的选择、有什么样的感受。
数据思维:通过数据分析发现问题,是发现问题的重要方式。在面对一些业务问题的时候,我们通过数据的方法去做分析,从而给出建议来解决业务问题。
② 分析问题:指为什么会产生这个问题
我们用得最多是“本质思维”。
本质思维:本质思维是一种寻根究底、找出问题根本原因的思维。通常借助“5 why 分析法”去开展。“5 问法”,也就是对一个问题点连续问 5 个“为什么”来追究其根本原因。
③ 解决问题:指如何解决这个问题。
我们用得最多是“效率思维”。
效率思维:商业的发展方向,一定是向着更高效率的方向发展。效率思维模型就是将效率思维应用到解决问题上,在解决问题、做决策、行动时,有意识地提高效率,以期花最少的投入,获得最大的产出。
综上所述,产品思维是一种解决问题并将解决问题的方案产品化的综合思维。
它通过用户思维、数据思维去发现问题。通过本质思维去分析问题。通过效率思维去解决问题。通过标准化方法将解决问题的方案产品化。
二、设计师如何提升产品思维 B 端设计师需要具备的产品思维 5 个维度:以用户为中心、逻辑思维、数据思维、市场营销思维、项目思维。
1. 以用户为中心 产品设计是从用户需求和用户感受出发,围绕用户为中心设计产品,而不是让用户去适应产品。无论是产品的使用流程、产品的信息架构,还是人机交互方式等,都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。
当我们关注用户时,除了关注用户要完成的任务,即产品将提供的功能及操作流程,也应该充分关注其完成任务时的目标,即用户为什么要执行这个行动、任务或操作。
2. 逻辑思维 逻辑思维更多的是一种能力。在产品设计中,我们在着手开发前需要将预想的方案结合各种因素,一步一步地分析可能产生的结果,去选择最优路径。
逻辑思维是可以提升的,在训练自己逻辑思维时,首先要保证信息的完整性。分享 4 种思维方式以及其运用方法,分别是目标思维(论点论据论证)、结构化思维(拆解问题)、推理思维(归纳演绎类比法)、逆向思维(发散)。
3. 数据思维 在 B 端产品设计师的工作中,我们会经常与数据打交道,通过数据来分析用户在使用产品或功能的过程中的问题。
从时间角度,数据分析可分为:
前期调研数据 中期测试 后期结果数据 从分析对象来讲,数据思维可分为:
用户行为 市场运营 技术性能 设计师要有关注并主动提出数据埋点的意识。如果设计师觉得某些功能或设计需要关注用户的行为,那么要在产品上线前找相关的数据人员去埋点,并且后期拉出数据分析结果。
4. 市场营销思维 企业的根本目的是把产品卖出去,所以产品设计方案能够吸引目标用户群才是最重要的。这里要特别强调下“目标用户”,每个产品都有对应的群体,想要设计面向各阶层的产品是不现实的。设计师应该去研究了解目标用户,针对他们的特点做设计,才能保证设计思路清晰,效果明显。
从视觉美学角度说,设计师不应将自己的审美强加给用户,每个行业和年龄段都会有自己的审美,要去分析目标群体,设计出符合他们审美的产品,这也是一种针对性的营销思维。
但是在某些界面设计层面,设计师又有责任去引导用户的审美,合理规划布局展示类的内容。至于做到何种程度才是最佳的引导方式,不同的人群的接受度和忍耐性不同,这就需要不断的测试和数据分析才能确定。
举个例子:我们经常在接到看板界面的设计需求的时候,客户反馈需要放很多维度的数据信息,这样界面更加丰富不会太空,也显得更专业;但是从信息设计的层面,用户在短时间点能接受的信息是有限的,并且人有信息过滤的本能。
所以我们在和客户需求沟通时,从专业角度要讲人接受信息的能力有限,还要分析目标人群最关注的是哪种信息。
5. 项目思维 项目思维更关注项目自身的目标实现,关注项目的产出,重点关注已定义的功能或软件的交付,甚至不管交付物是否来自错误的需求。项目思维时间观念比较强,把任何活动看作有始有终的、明确的时间段过程。
项目思维可以细分为以下 3 点:
了解项目组成和自己所处的位置 关注项目进展和自己的设计推动能力 协调项目其他成员达到最佳效率 ① 了解项目组成和自己所处位置
一个完整的项目组,是由多个岗位环节组成的。了解每个环节、每个岗位的职责,可以知道整个项目的运作模式、每个人对项目起到的作用。
项目组中的每个成员都会有直接间接的工作联系,B 端设计师要知道自己的直接需求方和最终的需求方来自哪里,需求是否合理,自己的设计对接下游有哪些,最终方案在哪里落地。一些与设计师没有直接交集的环节出现问题时,设计师也要去思考是否可以从设计角度解决问题。
近些年很多公司都在推行敏捷研发,敏捷研发模式相比传统的瀑布流研发,设计师的参与感更强。在传统的公司研发模式下,设计师往往掌握很少的话语权,在项目中很被动,成为不重要的边缘角色。
而在敏捷研发模式下,设计师能够全流程参与从业务分析到设计落地的全流程环节,因此 B 端设计师一定要深度了解参与业务。
② 关注项目进展和自己的推动力
某些设计师觉得接到需求后,确定需求和交付时间,按时交付就可以了。对于功能何时上线,产品何时发版,项目今年的计划目标并不关注。那么带来的结果就是,这个设计师在项目中的作用就仅仅局限于自己的设计产出。
要提高自己在项目中的重要性甚至话语权,就要积极推动项目。某些时候,好的设计方案或方法可以提高设计效率,加速方案产出,从而推动项目,比如使用可以小组协作的设计工具。
推动项目,就要尽量保证项目的产品版本发布按计划的日期上线。
比如:一些设计方案的实现比较复杂,开发人员评估或在实际编写时发现工期会延长,影响版本发布,B 端设计师应该要快速给出可以替代的设计方案,保证功能能够顺利上线可用。因为发版计划都是提前定好的,不能因为设计方案影响最终上线功能,这可能导致严重的后果,最后造成全年的项目计划延期。
更进阶的推动项目,设计师要主动去思考产品功能去提高体验,从设计角度针对当前业务提出解决方案。不要做一个仅仅是接需求和给方案的角色。
③ 协调项目成员达到最佳效率
作为 B 端设计师而言,很多时候在产品小组内都是听从产品经理的相关安排,在实际的研发流程岗位环节中,设计师处在中游阶段,上面是产品经理,下面是开发测试。
当我们的设计方案在小组内部得到通过之后,我们可以尝试从设计稿落地的角度出发,去积极与每个环节岗位的成员进行沟通。成员相互知晓每个人在负责的业务和进度,定期的开展周会,通报工作进度和结果,都有利于小组的能力和效率提升,从而促进整个项目发展。
三、B 端设计师如何通过产品思维来指导设计 初级设计师往往在工作中会有一个误区,就是要做好看的设计。许多设计师在一拿到原型就开始设计,最后设计出来的作品,同事和朋友都说十分好看,可是开发出来的产品却得不到用户与老板的认可,这样的工作方式其实是错误的。
当设计师在拿到产品需求时,不要急忙就去网上查找素材资料开始做,也不要急忙去询问,因为一般决策者或者 Boss 都非常忙碌,不一定有那么多时间去回答你的问题。
我们 B 端设计师需要整理好整个项目的相关的资料,花费一些时间,了解用户的使用场景、业务流程、操作步骤,把存在疑问的地方记录下来,找个固定的时间统一问快速沟通,修正方案。
那么怎么具体运用产品思维去设计呢?方法其实很简单,只要 4 步就可以了。
绘制用户画像 制定设计目标 还原使用场景 整体思维 1. 绘制用户画像
用户画像(Persona),又称用户角色、人物模型、典型用户等。用户画像概念是 Alan·Cooper 发展出来的关于用户的描述性模型。用户画像并非真正的人,他是基于研究和观察真实用户的行为和动机,提炼并虚构出来的一个或多个“用户”,他比任何一个真实的个体都更能代表一个用户群。
用户画像能够帮助设计师建立更丰满的用户形象,方便后续做其他设计决策。带入用户角色视角,审视一下当下产品的设计,思考每个界面的核心用户角色是谁?它是如何帮助用户角色实现其目标的?多种用户角色都会使用的产品界面,次要用户角色的需求是否有影响到主要角色的需求?
根据这些思考,发现并优化产品体验。
5000字干货!为什么你做的「用户画像」是一页废纸? 去年我看了很多交互作品集,假如问我最怕在交互设计师或者 UI 设计师的作品集里看到哪个东西,那必然是这个叫“用户画像/Persona”的玩意,假如你的作品集里也有这个部分,并且和我下面这张图相似度超过 80%,建议看下去: 2018 年 ux planet 有一篇爆文叫“用户体验的
阅读文章 >
2. 制定设计目标
设计目标是通过设计策略能够实现的目标,在制定设计目标时,我们首先要对产品目标和用户目标进行拆解,找到双方共同诉求的契合点。再考虑用什么样的设计策略来实现。设计的最终目的是服务用户,完成业务目标,设计目标可以帮助我们了解如何服务好用户,以便于对设计结果进行验证。
3. 还原使用场景
还原用户使用场景,清楚用户如何使用产品,提出假设梳理清楚用户怎么使用产品,在基于用户场景的情况下,结合业务诉求设计。运用场景公式帮助我们分析:用户+环境+需求+事件。
在「某环境」下,「某用户」做了「某事」来满足「某需求」,具体描述为了完成某任务,跟产品怎么交互的过程。
4. 整体思维
有些设计师觉得,接到需求,按时交付就行了,上线后会出什么问题就不管了。如果不去了解,你就真的仅仅是设计产出的工具而已,因为你没有担当起设计师该有的体面与责任。如果你想在职场中走得更远,就需要提高自己的设计价值,实际解决用户的需求。
B 端设计师需要在设计流程的各个环节介入,从需求分析到交互设计,都需要提供对应的策略,甚至洞见机会点,通过设计对业务产生正向价值。在做完项目之后,我们需要对常用模块进行梳理,沉淀业务组件库。
总之设计师要想掌握话语权,就要在各个环节中找准定位,利用自己的专业知识提出解决方案。
总结 产品思维能够帮助设计师基于正确的人群设计合理的功能,从而更全面地理解产品的用户体验,而不是单纯的思考界面布局或视觉表现。
B 端产品的设计师,需要钻研业务知识,成为半个产品经理,暂时摈弃掉怎么把界面做得好看吸引人的思维,确保设计师解决用户的真实需求,而不是浪费成本,做一些无用功。
-
从3个方面,总结B端设计师要了解的产品思维
UI交互 2022-10-05这篇文章从概念出发,深入浅出地介绍了设计师提升产品思维的方法,推荐 B 端设计师阅读。用网易的实战案例,帮你掌握3种产品思维工具前言:关于产品思维的迷思 网易邮箱大师 徐恺:在业务工作中,我们经常会讨论到:处理这个问题你需要运用产品思维;我想要提高一下自己的产品思维…阅读文章 > 一、产品思维概念产品思维拆...这篇文章从概念出发,深入浅出地介绍了设计师提升 产品思维 的方法,推荐 B 端 设计师 阅读。
用网易的实战案例,帮你掌握3种产品思维工具 前言:关于产品思维的迷思 网易邮箱大师 徐恺:在业务工作中,我们经常会讨论到:处理这个问题你需要运用产品思维;我想要提高一下自己的产品思维…
阅读文章 >
一、产品思维概念 产品思维拆解开就是产品+思维。
产品是什么?产品是满足用户需求、解决用户问题的载体,是一系列功能的集合。
思维是什么?思维是思考问题的方式,不同的人因为经历和经验不同,思考问题的方式也不同。
所以,个人对“产品思维”的理解是:产品思维是一种解决问题的综合思维,是进一步把问题解决方案产品化的过程。
1. 什么是解决问题 解决问题=定义问题 +分析问题 +如何解决
① 定义问题:指问题是什么
在产品设计中,我们用的最多的是“用户思维和数据思维”。
用户思维:是我们最重要的一种思维方式,站在用户的角度来思考问题。你需要把自己看成产品的用户,利用同理心,思考在 B 端产品工作使用场景中遇到同样的情况时,你会做什么样的选择、有什么样的感受。
数据思维:通过数据分析发现问题,是发现问题的重要方式。在面对一些业务问题的时候,我们通过数据的方法去做分析,从而给出建议来解决业务问题。
② 分析问题:指为什么会产生这个问题
我们用得最多是“本质思维”。
本质思维:本质思维是一种寻根究底、找出问题根本原因的思维。通常借助“5 why 分析法”去开展。“5 问法”,也就是对一个问题点连续问 5 个“为什么”来追究其根本原因。
③ 解决问题:指如何解决这个问题。
我们用得最多是“效率思维”。
效率思维:商业的发展方向,一定是向着更高效率的方向发展。效率思维模型就是将效率思维应用到解决问题上,在解决问题、做决策、行动时,有意识地提高效率,以期花最少的投入,获得最大的产出。
综上所述,产品思维是一种解决问题并将解决问题的方案产品化的综合思维。
它通过用户思维、数据思维去发现问题。通过本质思维去分析问题。通过效率思维去解决问题。通过标准化方法将解决问题的方案产品化。
二、设计师如何提升产品思维 B 端设计师需要具备的产品思维 5 个维度:以用户为中心、逻辑思维、数据思维、市场营销思维、项目思维。
1. 以用户为中心 产品设计是从用户需求和用户感受出发,围绕用户为中心设计产品,而不是让用户去适应产品。无论是产品的使用流程、产品的信息架构,还是人机交互方式等,都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。
当我们关注用户时,除了关注用户要完成的任务,即产品将提供的功能及操作流程,也应该充分关注其完成任务时的目标,即用户为什么要执行这个行动、任务或操作。
2. 逻辑思维 逻辑思维更多的是一种能力。在产品设计中,我们在着手开发前需要将预想的方案结合各种因素,一步一步地分析可能产生的结果,去选择最优路径。
逻辑思维是可以提升的,在训练自己逻辑思维时,首先要保证信息的完整性。分享 4 种思维方式以及其运用方法,分别是目标思维(论点论据论证)、结构化思维(拆解问题)、推理思维(归纳演绎类比法)、逆向思维(发散)。
3. 数据思维 在 B 端产品设计师的工作中,我们会经常与数据打交道,通过数据来分析用户在使用产品或功能的过程中的问题。
从时间角度,数据分析可分为:
前期调研数据 中期测试 后期结果数据 从分析对象来讲,数据思维可分为:
用户行为 市场运营 技术性能 设计师要有关注并主动提出数据埋点的意识。如果设计师觉得某些功能或设计需要关注用户的行为,那么要在产品上线前找相关的数据人员去埋点,并且后期拉出数据分析结果。
4. 市场营销思维 企业的根本目的是把产品卖出去,所以产品设计方案能够吸引目标用户群才是最重要的。这里要特别强调下“目标用户”,每个产品都有对应的群体,想要设计面向各阶层的产品是不现实的。设计师应该去研究了解目标用户,针对他们的特点做设计,才能保证设计思路清晰,效果明显。
从视觉美学角度说,设计师不应将自己的审美强加给用户,每个行业和年龄段都会有自己的审美,要去分析目标群体,设计出符合他们审美的产品,这也是一种针对性的营销思维。
但是在某些界面设计层面,设计师又有责任去引导用户的审美,合理规划布局展示类的内容。至于做到何种程度才是最佳的引导方式,不同的人群的接受度和忍耐性不同,这就需要不断的测试和数据分析才能确定。
举个例子:我们经常在接到看板界面的设计需求的时候,客户反馈需要放很多维度的数据信息,这样界面更加丰富不会太空,也显得更专业;但是从信息设计的层面,用户在短时间点能接受的信息是有限的,并且人有信息过滤的本能。
所以我们在和客户需求沟通时,从专业角度要讲人接受信息的能力有限,还要分析目标人群最关注的是哪种信息。
5. 项目思维 项目思维更关注项目自身的目标实现,关注项目的产出,重点关注已定义的功能或软件的交付,甚至不管交付物是否来自错误的需求。项目思维时间观念比较强,把任何活动看作有始有终的、明确的时间段过程。
项目思维可以细分为以下 3 点:
了解项目组成和自己所处的位置 关注项目进展和自己的设计推动能力 协调项目其他成员达到最佳效率 ① 了解项目组成和自己所处位置
一个完整的项目组,是由多个岗位环节组成的。了解每个环节、每个岗位的职责,可以知道整个项目的运作模式、每个人对项目起到的作用。
项目组中的每个成员都会有直接间接的工作联系,B 端设计师要知道自己的直接需求方和最终的需求方来自哪里,需求是否合理,自己的设计对接下游有哪些,最终方案在哪里落地。一些与设计师没有直接交集的环节出现问题时,设计师也要去思考是否可以从设计角度解决问题。
近些年很多公司都在推行敏捷研发,敏捷研发模式相比传统的瀑布流研发,设计师的参与感更强。在传统的公司研发模式下,设计师往往掌握很少的话语权,在项目中很被动,成为不重要的边缘角色。
而在敏捷研发模式下,设计师能够全流程参与从业务分析到设计落地的全流程环节,因此 B 端设计师一定要深度了解参与业务。
② 关注项目进展和自己的推动力
某些设计师觉得接到需求后,确定需求和交付时间,按时交付就可以了。对于功能何时上线,产品何时发版,项目今年的计划目标并不关注。那么带来的结果就是,这个设计师在项目中的作用就仅仅局限于自己的设计产出。
要提高自己在项目中的重要性甚至话语权,就要积极推动项目。某些时候,好的设计方案或方法可以提高设计效率,加速方案产出,从而推动项目,比如使用可以小组协作的设计工具。
推动项目,就要尽量保证项目的产品版本发布按计划的日期上线。
比如:一些设计方案的实现比较复杂,开发人员评估或在实际编写时发现工期会延长,影响版本发布,B 端设计师应该要快速给出可以替代的设计方案,保证功能能够顺利上线可用。因为发版计划都是提前定好的,不能因为设计方案影响最终上线功能,这可能导致严重的后果,最后造成全年的项目计划延期。
更进阶的推动项目,设计师要主动去思考产品功能去提高体验,从设计角度针对当前业务提出解决方案。不要做一个仅仅是接需求和给方案的角色。
③ 协调项目成员达到最佳效率
作为 B 端设计师而言,很多时候在产品小组内都是听从产品经理的相关安排,在实际的研发流程岗位环节中,设计师处在中游阶段,上面是产品经理,下面是开发测试。
当我们的设计方案在小组内部得到通过之后,我们可以尝试从设计稿落地的角度出发,去积极与每个环节岗位的成员进行沟通。成员相互知晓每个人在负责的业务和进度,定期的开展周会,通报工作进度和结果,都有利于小组的能力和效率提升,从而促进整个项目发展。
三、B 端设计师如何通过产品思维来指导设计 初级设计师往往在工作中会有一个误区,就是要做好看的设计。许多设计师在一拿到原型就开始设计,最后设计出来的作品,同事和朋友都说十分好看,可是开发出来的产品却得不到用户与老板的认可,这样的工作方式其实是错误的。
当设计师在拿到产品需求时,不要急忙就去网上查找素材资料开始做,也不要急忙去询问,因为一般决策者或者 Boss 都非常忙碌,不一定有那么多时间去回答你的问题。
我们 B 端设计师需要整理好整个项目的相关的资料,花费一些时间,了解用户的使用场景、业务流程、操作步骤,把存在疑问的地方记录下来,找个固定的时间统一问快速沟通,修正方案。
那么怎么具体运用产品思维去设计呢?方法其实很简单,只要 4 步就可以了。
绘制用户画像 制定设计目标 还原使用场景 整体思维 1. 绘制用户画像
用户画像(Persona),又称用户角色、人物模型、典型用户等。用户画像概念是 Alan·Cooper 发展出来的关于用户的描述性模型。用户画像并非真正的人,他是基于研究和观察真实用户的行为和动机,提炼并虚构出来的一个或多个“用户”,他比任何一个真实的个体都更能代表一个用户群。
用户画像能够帮助设计师建立更丰满的用户形象,方便后续做其他设计决策。带入用户角色视角,审视一下当下产品的设计,思考每个界面的核心用户角色是谁?它是如何帮助用户角色实现其目标的?多种用户角色都会使用的产品界面,次要用户角色的需求是否有影响到主要角色的需求?
根据这些思考,发现并优化产品体验。
5000字干货!为什么你做的「用户画像」是一页废纸? 去年我看了很多交互作品集,假如问我最怕在交互设计师或者 UI 设计师的作品集里看到哪个东西,那必然是这个叫“用户画像/Persona”的玩意,假如你的作品集里也有这个部分,并且和我下面这张图相似度超过 80%,建议看下去: 2018 年 ux planet 有一篇爆文叫“用户体验的
阅读文章 >
2. 制定设计目标
设计目标是通过设计策略能够实现的目标,在制定设计目标时,我们首先要对产品目标和用户目标进行拆解,找到双方共同诉求的契合点。再考虑用什么样的设计策略来实现。设计的最终目的是服务用户,完成业务目标,设计目标可以帮助我们了解如何服务好用户,以便于对设计结果进行验证。
3. 还原使用场景
还原用户使用场景,清楚用户如何使用产品,提出假设梳理清楚用户怎么使用产品,在基于用户场景的情况下,结合业务诉求设计。运用场景公式帮助我们分析:用户+环境+需求+事件。
在「某环境」下,「某用户」做了「某事」来满足「某需求」,具体描述为了完成某任务,跟产品怎么交互的过程。
4. 整体思维
有些设计师觉得,接到需求,按时交付就行了,上线后会出什么问题就不管了。如果不去了解,你就真的仅仅是设计产出的工具而已,因为你没有担当起设计师该有的体面与责任。如果你想在职场中走得更远,就需要提高自己的设计价值,实际解决用户的需求。
B 端设计师需要在设计流程的各个环节介入,从需求分析到交互设计,都需要提供对应的策略,甚至洞见机会点,通过设计对业务产生正向价值。在做完项目之后,我们需要对常用模块进行梳理,沉淀业务组件库。
总之设计师要想掌握话语权,就要在各个环节中找准定位,利用自己的专业知识提出解决方案。
总结 产品思维能够帮助设计师基于正确的人群设计合理的功能,从而更全面地理解产品的用户体验,而不是单纯的思考界面布局或视觉表现。
B 端产品的设计师,需要钻研业务知识,成为半个产品经理,暂时摈弃掉怎么把界面做得好看吸引人的思维,确保设计师解决用户的真实需求,而不是浪费成本,做一些无用功。
-
越来越流行的B端C化行得通吗?来看高手的分析!
UI交互 2022-10-04用To C的方式去设计B端产品是否行得通?本文从3个方面对此进行了深入分析。4个步骤,总结B端设计师的竞品分析方法竞品分析方法很多,但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的,真正在 B 端设计中的方法比较少,这次为大家介绍适合 B 端设计师使用的竞品分析方法。用To C的方式去设计 B端产品 是否行得通?本文从3个方面对此进行了深入分析。
4个步骤,总结B端设计师的竞品分析方法 竞品分析方法很多,但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的,真正在 B 端设计中的方法比较少,这次为大家介绍适合 B 端设计师使用的竞品分析方法。
阅读文章 >
听说“B 端 C 化”这个概念有一段时间了,起初并没有觉得有什么不妥,直观感觉应该是有些传统 B 端产品习惯堆砌功能、在设计上都投入度比较低,所以应该像 C 端那样更尊重用户体验,做出更加用户友好的东西来。但是如果仔细想一下这个概念,会发现这个说法并不能讲得通。
B 端与 C 端的业务模式、用户任务、使用习惯都存在巨大差异,即便 C 端在体验细节上做的好些,那么直接用 C 的方式来做 B 也是行不通的。不要简单地认为 C 端比 B 端做得好、做 C 的产品经理和 设计师 来做 B 端就是降维打击,这种想法是无知的。
一、C 端的设计师和产品经理,并不能轻易胜任 B 端的工作 我现在在做的产品是一个双边交易平台,天然存在 B 端和 C 端两个端口,所以日常工作要频繁的和不同端口的产品与设计同学打交道。我观察到一个很直观的现象:C 端的设计师转到 B 端产品之后往往不能快速直接胜任,需要学习很多东西,得需要几个月的过渡期。并且原来 C 端的很多设计方式和经验在 B 端产品设计过程中并不能直接复用。
这个差异主要体现在:
B 端业务复杂、理解成本高,需要较强的逻辑思维能力和业务理解能力才可以胜任。这一点并不是每个 C 端设计师都可以驾驭; B 端产品往往以 PC 端为主,C 端大部分设计师的知识结构中并没有 PC 端的设计知识,比如不熟悉 AntDesign 之类的设计系统、不能很好的处理 PC 大画布的信息关系等; B 端产品的设计难度高于 C 端,尤其在产品结构层和框架层,这对交互设计能力是一个考验,而大部分设计师都是美术生、UI 背景,能力更偏重表现层。 产品经理也是一样,B 端业务讲究的是垂类深耕,以流量思维工作的 C 端产品经理也不是可以轻易找到并胜任一份 B 端产品的工作的。
IBM-Carbon design system
二、好的 B 端产品并不是通过“C 化”获得成功的 关于 B 端是不是要“C 化”,我们需要冷静地看到事实:
Salesforce、workday 这样优秀的 B 端产品没有做“C 化”,他的 UI 看上去甚至有一点“老旧”,这并没有妨碍他依旧是 saas 领域的巨头; 阿里的 AntDesign、IBM 的 Carbon design 这样优秀的 B 端设计系统,他们也只是在自己的节奏和 B 端场景中按照自己的理念来迭代,并没有进行所谓的“C 化”; 阿里云设计团队并没有按 C 端插画的思路来包装产品,他们的方式超越了大部分 C 端产品。有人认为阿里云的设计是 B 端 C 化的典范,主要是出于阿里云官网上用 3D 图形和动画对阿里云的系列产品做了成功的视觉包装,但同时我们还可以看到阿里云 B 端产品的设计体系与阿里云官网的设计体系是两个不同的 gulideline。阿里云的团队也没有讲过他们在做“C 化”的设计,他们在讲的是设计团队如何根据云计算领域的特性用充满想象力的几何来构建自己的产品形象; Qualtrics、Slack、飞书,他们的成功并不是因为“C 化”了,并不是因为他们的 logo 设计的像 C 端产品,而是他们懂得 B 端实际场景的 know how,并用生动的产品方式来提供方案。
typeform 把 B 端在线调研工具搞的有声有色,但我们不能把这种成功简单理解为 C 化
三、“B 端 C 化”讲的是什么,并没有在业内达成共识 “B 端 C 化”兴起的原因众说纷纭。有说 C 端设计师和产品过于饱和,纷纷转向 B 端工作,从而把 C 端经验带来了 B 端。有说 B 端竞争太过激烈,核心功能的竞争已经成了一片红海,只有把战场外扩,演变成 UI 层、体验层的竞争。
“B 端 C 化”这个说法,带着一种 C 端的傲慢。用了类似传统行业“互联网化”的说法——大家似乎对“所有行业都应该用互联网思维做一遍”这个观点颇为坚定,而实际情况是很多互联网的产品经理到了传统行业之后并没有实现什么降维打击,活也不好干。—— B端C化 这个提法并不像是做B端的人提出来的,我猜测可能是在C端有成功经验的人到了B端之后提出的。
关于“B 端 C 化”到底讲的是什么,我觉得目前业内并没有形成一个完全统一的共识。为了搞清楚这个概念的来源和脉络,我做了 2 点研究,一是随机调研几位产品经理和设计师,二是我花了点时间搜索了一些中文网络上的相关的热门文章,以下是调研的整理:
部分从业者的看法:
“B 端 C 化就是用上已经在 C 端成熟的用户体验的方法论,对产品进行改造。” “B端C化的本质,是一种商业上的策略,进而影响了产品的形式、设计、发展,具体可见 国内比较有名的案例 teambution、有道云笔记、石墨,最经典的例子:slack”(郭人豪) “搞一波花里胡哨的 UI,逻辑都没讲通,要那个 UI 有啥用?!跟C比,B 端更加看中业务流程的规律性,需要做活的地方要多的多,很考验产品经理面向对象的能力…除此之外,B 端产品对于角色的设计,不是 C 端的那种泛化角色,而是具体角色,需要揣摩乃至于了解角色的工作内容来设计权限系统。讲真,这些都还是商业模式和可行性已经走通的情况下实操的步骤而已。这还不包括,你调研业务流程,能否把复杂流程按三级分解法分解出来,如何梳理其中实体联系,如何归纳其中具体类等工作”(阳衡) “C的人没工作了来做B,那套东西不就带过来了”(克洛泽克) “B 端 C 化的前提是商业价值做的足够好,然后锦上添花。也是设计师群体讲故事提高自己话语权的方式而已。”(韩信) 看完了这些观点,你作何想法?
腾讯云官网为头部 banner 制作了科技感十足的 3D 图形和炫酷动效
四、“B 端 C 化”不值得作为理念来指导设计工作 总结一下我的看法:
“B 端 C 化”这个概念首先是说的业务策略,其次是营销、产品
B 端 C 化的策略对于小 B(小微企业)更容易行的通,对于中大型企业未必; 不能简单粗暴的理解 B 端 C 化,如果认为提升用户体验、重视易用性、更好看一点就是“C 化”,那就对一直以来的 B 端从业者很不公平,你以为这年头了人家 B 端不懂这些吗? B C 两端差异巨大,“B 端 C 化”在设计层面讲不通,也行不通
B C 两端差异很大,不能简单的把 C 端的设计方式移植到 B 端,一切设计形式都需要在对 B 端业务和目标用户充分理解的基础上建立,这是通用工作方法和设计思维,不分 B、C; B 端需要用研,并且需要持续的深度用户研究,如何做 B 端用户的访谈和问卷与 C 端差异很大,执行难度也很高。B 端产品的用户角色多样,如决策者(老板)、管理者(业务部门负责人)、执行者(使用的人)、商户等,C 端做用户画像(persona)的方式在 B 端也不太好使; C 端的微动效、情感化这样的设计工作会对 B 端产品体验有所帮助,但解决的并不是核心问题; B 端的设计语言不会与 C 端趋同
B 端的设计语言不需要模仿 C 端,B 端已经在自己的生态内发展出优秀、成熟的设计语言了,不需要邯郸学步; B 端产品追求确定性、高效率、重操作,C 端产品鼓励用户探索、注重活跃与留存,环境差异很大,B 端设计语言在用色、造型、布局等方面都与 C 端有明显差异。 “B 端设计在未来的方向是 3D 化、情感化、个性化”这样的理解有些表面; “B 端 C 化”不值得作为 B 端设计理念来遵循
“B 端 C 化”只是一个概念,并不是一个“理念”,不能作为设计理念来指导具体的体验设计工作; “B 端 C 化”的说法之所以被传播,是因为 B 端的产品与设计在过去几年中得到了更多的关注,但是如何做好 B 端,没有一个简单的答案。没有简单的答案是因为这就不是一个简单的问题。 如果你在追求“如何做好 B 端产品设计”这个问题的答案,那么请留意:
无论答案是什么,肯定不是“B 端 C 化”。
欢迎关注作者微信公众号:「柴林的设计笔记」
-
越来越流行的B端C化行得通吗?来看高手的分析!
UI交互 2022-10-04用To C的方式去设计B端产品是否行得通?本文从3个方面对此进行了深入分析。4个步骤,总结B端设计师的竞品分析方法竞品分析方法很多,但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的,真正在 B 端设计中的方法比较少,这次为大家介绍适合 B 端设计师使用的竞品分析方法。用To C的方式去设计 B端产品 是否行得通?本文从3个方面对此进行了深入分析。
4个步骤,总结B端设计师的竞品分析方法 竞品分析方法很多,但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的,真正在 B 端设计中的方法比较少,这次为大家介绍适合 B 端设计师使用的竞品分析方法。
阅读文章 >
听说“B 端 C 化”这个概念有一段时间了,起初并没有觉得有什么不妥,直观感觉应该是有些传统 B 端产品习惯堆砌功能、在设计上都投入度比较低,所以应该像 C 端那样更尊重用户体验,做出更加用户友好的东西来。但是如果仔细想一下这个概念,会发现这个说法并不能讲得通。
B 端与 C 端的业务模式、用户任务、使用习惯都存在巨大差异,即便 C 端在体验细节上做的好些,那么直接用 C 的方式来做 B 也是行不通的。不要简单地认为 C 端比 B 端做得好、做 C 的产品经理和 设计师 来做 B 端就是降维打击,这种想法是无知的。
一、C 端的设计师和产品经理,并不能轻易胜任 B 端的工作 我现在在做的产品是一个双边交易平台,天然存在 B 端和 C 端两个端口,所以日常工作要频繁的和不同端口的产品与设计同学打交道。我观察到一个很直观的现象:C 端的设计师转到 B 端产品之后往往不能快速直接胜任,需要学习很多东西,得需要几个月的过渡期。并且原来 C 端的很多设计方式和经验在 B 端产品设计过程中并不能直接复用。
这个差异主要体现在:
B 端业务复杂、理解成本高,需要较强的逻辑思维能力和业务理解能力才可以胜任。这一点并不是每个 C 端设计师都可以驾驭; B 端产品往往以 PC 端为主,C 端大部分设计师的知识结构中并没有 PC 端的设计知识,比如不熟悉 AntDesign 之类的设计系统、不能很好的处理 PC 大画布的信息关系等; B 端产品的设计难度高于 C 端,尤其在产品结构层和框架层,这对交互设计能力是一个考验,而大部分设计师都是美术生、UI 背景,能力更偏重表现层。 产品经理也是一样,B 端业务讲究的是垂类深耕,以流量思维工作的 C 端产品经理也不是可以轻易找到并胜任一份 B 端产品的工作的。
IBM-Carbon design system
二、好的 B 端产品并不是通过“C 化”获得成功的 关于 B 端是不是要“C 化”,我们需要冷静地看到事实:
Salesforce、workday 这样优秀的 B 端产品没有做“C 化”,他的 UI 看上去甚至有一点“老旧”,这并没有妨碍他依旧是 saas 领域的巨头; 阿里的 AntDesign、IBM 的 Carbon design 这样优秀的 B 端设计系统,他们也只是在自己的节奏和 B 端场景中按照自己的理念来迭代,并没有进行所谓的“C 化”; 阿里云设计团队并没有按 C 端插画的思路来包装产品,他们的方式超越了大部分 C 端产品。有人认为阿里云的设计是 B 端 C 化的典范,主要是出于阿里云官网上用 3D 图形和动画对阿里云的系列产品做了成功的视觉包装,但同时我们还可以看到阿里云 B 端产品的设计体系与阿里云官网的设计体系是两个不同的 gulideline。阿里云的团队也没有讲过他们在做“C 化”的设计,他们在讲的是设计团队如何根据云计算领域的特性用充满想象力的几何来构建自己的产品形象; Qualtrics、Slack、飞书,他们的成功并不是因为“C 化”了,并不是因为他们的 logo 设计的像 C 端产品,而是他们懂得 B 端实际场景的 know how,并用生动的产品方式来提供方案。
typeform 把 B 端在线调研工具搞的有声有色,但我们不能把这种成功简单理解为 C 化
三、“B 端 C 化”讲的是什么,并没有在业内达成共识 “B 端 C 化”兴起的原因众说纷纭。有说 C 端设计师和产品过于饱和,纷纷转向 B 端工作,从而把 C 端经验带来了 B 端。有说 B 端竞争太过激烈,核心功能的竞争已经成了一片红海,只有把战场外扩,演变成 UI 层、体验层的竞争。
“B 端 C 化”这个说法,带着一种 C 端的傲慢。用了类似传统行业“互联网化”的说法——大家似乎对“所有行业都应该用互联网思维做一遍”这个观点颇为坚定,而实际情况是很多互联网的产品经理到了传统行业之后并没有实现什么降维打击,活也不好干。—— B端C化 这个提法并不像是做B端的人提出来的,我猜测可能是在C端有成功经验的人到了B端之后提出的。
关于“B 端 C 化”到底讲的是什么,我觉得目前业内并没有形成一个完全统一的共识。为了搞清楚这个概念的来源和脉络,我做了 2 点研究,一是随机调研几位产品经理和设计师,二是我花了点时间搜索了一些中文网络上的相关的热门文章,以下是调研的整理:
部分从业者的看法:
“B 端 C 化就是用上已经在 C 端成熟的用户体验的方法论,对产品进行改造。” “B端C化的本质,是一种商业上的策略,进而影响了产品的形式、设计、发展,具体可见 国内比较有名的案例 teambution、有道云笔记、石墨,最经典的例子:slack”(郭人豪) “搞一波花里胡哨的 UI,逻辑都没讲通,要那个 UI 有啥用?!跟C比,B 端更加看中业务流程的规律性,需要做活的地方要多的多,很考验产品经理面向对象的能力…除此之外,B 端产品对于角色的设计,不是 C 端的那种泛化角色,而是具体角色,需要揣摩乃至于了解角色的工作内容来设计权限系统。讲真,这些都还是商业模式和可行性已经走通的情况下实操的步骤而已。这还不包括,你调研业务流程,能否把复杂流程按三级分解法分解出来,如何梳理其中实体联系,如何归纳其中具体类等工作”(阳衡) “C的人没工作了来做B,那套东西不就带过来了”(克洛泽克) “B 端 C 化的前提是商业价值做的足够好,然后锦上添花。也是设计师群体讲故事提高自己话语权的方式而已。”(韩信) 看完了这些观点,你作何想法?
腾讯云官网为头部 banner 制作了科技感十足的 3D 图形和炫酷动效
四、“B 端 C 化”不值得作为理念来指导设计工作 总结一下我的看法:
“B 端 C 化”这个概念首先是说的业务策略,其次是营销、产品
B 端 C 化的策略对于小 B(小微企业)更容易行的通,对于中大型企业未必; 不能简单粗暴的理解 B 端 C 化,如果认为提升用户体验、重视易用性、更好看一点就是“C 化”,那就对一直以来的 B 端从业者很不公平,你以为这年头了人家 B 端不懂这些吗? B C 两端差异巨大,“B 端 C 化”在设计层面讲不通,也行不通
B C 两端差异很大,不能简单的把 C 端的设计方式移植到 B 端,一切设计形式都需要在对 B 端业务和目标用户充分理解的基础上建立,这是通用工作方法和设计思维,不分 B、C; B 端需要用研,并且需要持续的深度用户研究,如何做 B 端用户的访谈和问卷与 C 端差异很大,执行难度也很高。B 端产品的用户角色多样,如决策者(老板)、管理者(业务部门负责人)、执行者(使用的人)、商户等,C 端做用户画像(persona)的方式在 B 端也不太好使; C 端的微动效、情感化这样的设计工作会对 B 端产品体验有所帮助,但解决的并不是核心问题; B 端的设计语言不会与 C 端趋同
B 端的设计语言不需要模仿 C 端,B 端已经在自己的生态内发展出优秀、成熟的设计语言了,不需要邯郸学步; B 端产品追求确定性、高效率、重操作,C 端产品鼓励用户探索、注重活跃与留存,环境差异很大,B 端设计语言在用色、造型、布局等方面都与 C 端有明显差异。 “B 端设计在未来的方向是 3D 化、情感化、个性化”这样的理解有些表面; “B 端 C 化”不值得作为 B 端设计理念来遵循
“B 端 C 化”只是一个概念,并不是一个“理念”,不能作为设计理念来指导具体的体验设计工作; “B 端 C 化”的说法之所以被传播,是因为 B 端的产品与设计在过去几年中得到了更多的关注,但是如何做好 B 端,没有一个简单的答案。没有简单的答案是因为这就不是一个简单的问题。 如果你在追求“如何做好 B 端产品设计”这个问题的答案,那么请留意:
无论答案是什么,肯定不是“B 端 C 化”。
欢迎关注作者微信公众号:「柴林的设计笔记」
-
用大厂实战案例,帮你学会金融领域的产品设计方法
UI交互 2022-10-03本文从腾讯移动金融开发平台的实战案例出发,帮你掌握金融领域的产品设计方法。金融产品如何做好惠农设计?来看腾讯的实战案例!本文从腾讯移动金融开发平台的实战案例出发,帮你掌握金融领域的产品设计方法。
金融产品如何做好惠农设计?来看腾讯的实战案例! 窥见“乡村金融困境”一角 去年夏天的时候,我曾随父母和一群叔叔阿姨回到他们当年下乡的村庄游历。
阅读文章 >
一、项目背景 互联网行业的发展重点已经从消费互联网逐步转向产业互联网。对金融机构来说,数字化转型也成为企业面向未来发展、改善客户服务、提升商业利益的必要手段。面对数字化时代所需要的高效响应、敏捷调整等业务需求,腾讯金融云从“业务与技术融合”的角度出发为金融行业打造了移动金融开发平台这一产品。
腾讯移动金融开发平台(TMF)是一款整合了腾讯在移动产品中开发、测试、发布和运营的技术能力,为银行、互联网金融、保险以及证券客户提供一站式、 覆盖全生命周期的移动端金融技术平台,产品目前已交付多个客户使用。
移动金融开发平台业务介绍
二、定位问题找到设计目标 在之前版本中,平台的主要产品目标是进行业务验证和客户拓展,是一种小步快跑的状态。而现在产品的业务模式已经得到了闭环,商业上也积累了一定的客户群体。因此我们新的产品目标是“提升体验,从工具进一步转为开发者中心”,在这个目标背后蕴含着什么样的业务需求,是我们接下来需要梳理清楚的。在收集了业务侧、客户侧、用户侧的反馈之后,我们把问题进行了结构化的梳理和总结,最终收敛出业务的核心问题,并可以有针对性地制定设计策略和设计目标了。
业务遇到的问题
如何解决问题、达成目标
三、针对目标制定设计策略 目标一:独立的品牌表达助力业务 产品在之前并没有独立的品牌,导致业务方在进行市场推广营销方面缺少了品牌助力,不利于产品从工具向平台的转型,所以我们首先需要对产品进行品牌的建立。
业务目标一
1. 品牌设计策略
在与业务方深度沟通后,我们根据业务的核心价值点和品牌关键词梳理出 TMF 品牌的设计策略。同时我们也希望能够利用腾讯进行品牌背书,所以在策略上我们也加入了腾讯基因的表达。
设计策略
2. 品牌基因
接下来我们进行了设计方向的探索,主要的目的是找到核心的品牌基因,通过品牌基因进行品牌图形的推导。经过多轮的迭代考量,以及和业务方沟通交流后,我们最终确定了“数字金融建筑师”这一核心品牌基因,它形象的表现了产品所解决的核心业务问题。
关键词探索
品牌基因
3. 品牌图形
明确了核心基因之后,接下来是对核心图形的发散和收敛。在经过了多轮的迭代更新之后,我们最终确定了如下的品牌图形,将“金融行业移动应用搭建平台”为主要着手点,用立体的积木形式来隐喻平台搭建移动应用这一核心的业务属性。
标志图形展示
标志图形设计理念
品牌色彩
logo 设计只是进行整个品牌体系构建的第一步,接下来还需要在品牌图形上进行延展,创造完整品牌体系。但是根据当前的项目周期我们必须先着手处理优先级更高的目标二,未来再继续完成这部分的工作。
未来规划
目标二:产品体验优化提升满意度 之前我们收到了较多关于产品体验的反馈,产品体验不够好不仅会影响用户使用效率,也会对产品口碑影响力造成伤害。那么第二步我们要做的就是进行产品整体体验的优化提升。
业务目标二
在达成这个目标之前,我们首先以交互和视觉两个维度来分析 TMF 当前到底存在什么样的体验问题。
TMF 的体验问题定义
1. 解决交互体验问题:产品体验不顺畅
① 痛点归纳
产品体验不顺畅是一个笼统的表述,我们需要进一步找出问题的症结。工单是我们了解用户实际使用体验的重要依据,所以我们决定以工单为切入点来找出体验问题的症结。
深挖体验问题
② 设计策略及方案
根据对现有工单的分析,我们将体验问题归结为两类,一类是操作不熟悉,一类是功能找不到,并根据问题产生的原因分别做出相应的设计策略。总结起来就是站在用户视角,通过实际使用流程的串联来重塑产品的信息架构,同时加强功能引导,使其更符合用户实际使用场景,并按不同的角色组织功能排布和按任务流来组织模块的跳转。
重塑信息架构
重塑信息架构
强化引导功能并建立帮助中心提供随时随地的指引和帮助。
增强功能引导
增加帮助引导
2. 解决视觉体验问题:风格过于技术向,没有亲和力
① 痛点归纳
“风格过于技术向,没有亲和力”,这是客户反馈的原话。当我们看到这个反馈时,第一反应是比较迷茫的,为什么一个 ToB 的后台产品需要有亲和力?带着这个问题,我们再次将目光转回到用户,研究用户真实的使用场景。研究后发现这句话反映出的问题其实是“作为一个每天日常工作使用的工具,严肃的视觉氛围会容易产生疲劳和枯燥感”、“页面图形化引导太少,用户学习成本很高”。
深入探索用户背后的诉求
② 设计目标
理清问题的本质之后,我们开始制定相应的设计目标,除了解决“亲和力”的问题之外,我们同时也希望能够融合品牌传达,这是我们设计方案的两大目标。
两大设计目标
③ 设计策略及方案
我们从色彩、质感、情感、品牌四个维度来分析和展现如何达成设计目标的。
色彩
以新品牌色为基础基因,以浅色系蓝灰色为背景氛围,降低画面色彩重量给人以平静、平和心理感受。
平台的色彩系统
色彩的情感氛围
质感
在质感的设计上,我们将数字金融 C 端的设计语言引入到 B 端设计中来,通过较为柔和、亲肤感材质和使用微投影、微圆角来提升页面内视觉元素的亲和度,降低纯技术感带来的疲劳和枯燥,而这一点已经在数字金融的 C 端设计上得到了验证。
元素质感探索
界面质感表现
情感化
在情感化设计的维度,我们以情感化的三个层次来考量。在本能层次,通过色彩、质感视觉氛围的营造来解决“好看”的问题;在行为层次,我们结合体验层面的痛点,在页面增加图形化的引导与反馈,解决“好用”的问题。
情感化三层次上的设计策略
根据情感化的强度不同,共分了三个层面进行视觉元素的设计。
图形化设计策略
在使用流程的核心节点上,我们尝试增加图形化的表达与引导,帮助用户快速理解页面信息。同时增强反馈,在不同的情况下给予用户合理的情感表达。
图形化的功能引导
增加新手引导
四、品牌 在品牌层面我们的主要的考量点在于如何将提炼出来的品牌基因,通过图形化的方式融入到页面之中,最终的设计策略是将“积木”这一核心元素作为构建视觉的基础,潜移默化的体现出建筑师这一概念。同时在产品的核心节点,将品牌 logo 和业务元素通过一致的表现形式呈现,不断加强用户对于品牌的记忆。
引导与反馈的视觉表达
平台的品牌基因
品牌记忆点
五、总结 在后台体验优化类项目中,我们首先要对当前的问题进行调研和梳理,找出问题的根因,之后根据问题的根本原因来明确设计目标,制定相应的设计策略。视觉设计的策略重点在于如何通过视觉手段来解决当前的体验问题,这样才能产出有价值的设计。
欢迎关注作者微信公众号:「腾讯云设计中心」
-
用大厂实战案例,帮你学会金融领域的产品设计方法
UI交互 2022-10-03本文从腾讯移动金融开发平台的实战案例出发,帮你掌握金融领域的产品设计方法。金融产品如何做好惠农设计?来看腾讯的实战案例!本文从腾讯移动金融开发平台的实战案例出发,帮你掌握金融领域的产品设计方法。
金融产品如何做好惠农设计?来看腾讯的实战案例! 窥见“乡村金融困境”一角 去年夏天的时候,我曾随父母和一群叔叔阿姨回到他们当年下乡的村庄游历。
阅读文章 >
一、项目背景 互联网行业的发展重点已经从消费互联网逐步转向产业互联网。对金融机构来说,数字化转型也成为企业面向未来发展、改善客户服务、提升商业利益的必要手段。面对数字化时代所需要的高效响应、敏捷调整等业务需求,腾讯金融云从“业务与技术融合”的角度出发为金融行业打造了移动金融开发平台这一产品。
腾讯移动金融开发平台(TMF)是一款整合了腾讯在移动产品中开发、测试、发布和运营的技术能力,为银行、互联网金融、保险以及证券客户提供一站式、 覆盖全生命周期的移动端金融技术平台,产品目前已交付多个客户使用。
移动金融开发平台业务介绍
二、定位问题找到设计目标 在之前版本中,平台的主要产品目标是进行业务验证和客户拓展,是一种小步快跑的状态。而现在产品的业务模式已经得到了闭环,商业上也积累了一定的客户群体。因此我们新的产品目标是“提升体验,从工具进一步转为开发者中心”,在这个目标背后蕴含着什么样的业务需求,是我们接下来需要梳理清楚的。在收集了业务侧、客户侧、用户侧的反馈之后,我们把问题进行了结构化的梳理和总结,最终收敛出业务的核心问题,并可以有针对性地制定设计策略和设计目标了。
业务遇到的问题
如何解决问题、达成目标
三、针对目标制定设计策略 目标一:独立的品牌表达助力业务 产品在之前并没有独立的品牌,导致业务方在进行市场推广营销方面缺少了品牌助力,不利于产品从工具向平台的转型,所以我们首先需要对产品进行品牌的建立。
业务目标一
1. 品牌设计策略
在与业务方深度沟通后,我们根据业务的核心价值点和品牌关键词梳理出 TMF 品牌的设计策略。同时我们也希望能够利用腾讯进行品牌背书,所以在策略上我们也加入了腾讯基因的表达。
设计策略
2. 品牌基因
接下来我们进行了设计方向的探索,主要的目的是找到核心的品牌基因,通过品牌基因进行品牌图形的推导。经过多轮的迭代考量,以及和业务方沟通交流后,我们最终确定了“数字金融建筑师”这一核心品牌基因,它形象的表现了产品所解决的核心业务问题。
关键词探索
品牌基因
3. 品牌图形
明确了核心基因之后,接下来是对核心图形的发散和收敛。在经过了多轮的迭代更新之后,我们最终确定了如下的品牌图形,将“金融行业移动应用搭建平台”为主要着手点,用立体的积木形式来隐喻平台搭建移动应用这一核心的业务属性。
标志图形展示
标志图形设计理念
品牌色彩
logo 设计只是进行整个品牌体系构建的第一步,接下来还需要在品牌图形上进行延展,创造完整品牌体系。但是根据当前的项目周期我们必须先着手处理优先级更高的目标二,未来再继续完成这部分的工作。
未来规划
目标二:产品体验优化提升满意度 之前我们收到了较多关于产品体验的反馈,产品体验不够好不仅会影响用户使用效率,也会对产品口碑影响力造成伤害。那么第二步我们要做的就是进行产品整体体验的优化提升。
业务目标二
在达成这个目标之前,我们首先以交互和视觉两个维度来分析 TMF 当前到底存在什么样的体验问题。
TMF 的体验问题定义
1. 解决交互体验问题:产品体验不顺畅
① 痛点归纳
产品体验不顺畅是一个笼统的表述,我们需要进一步找出问题的症结。工单是我们了解用户实际使用体验的重要依据,所以我们决定以工单为切入点来找出体验问题的症结。
深挖体验问题
② 设计策略及方案
根据对现有工单的分析,我们将体验问题归结为两类,一类是操作不熟悉,一类是功能找不到,并根据问题产生的原因分别做出相应的设计策略。总结起来就是站在用户视角,通过实际使用流程的串联来重塑产品的信息架构,同时加强功能引导,使其更符合用户实际使用场景,并按不同的角色组织功能排布和按任务流来组织模块的跳转。
重塑信息架构
重塑信息架构
强化引导功能并建立帮助中心提供随时随地的指引和帮助。
增强功能引导
增加帮助引导
2. 解决视觉体验问题:风格过于技术向,没有亲和力
① 痛点归纳
“风格过于技术向,没有亲和力”,这是客户反馈的原话。当我们看到这个反馈时,第一反应是比较迷茫的,为什么一个 ToB 的后台产品需要有亲和力?带着这个问题,我们再次将目光转回到用户,研究用户真实的使用场景。研究后发现这句话反映出的问题其实是“作为一个每天日常工作使用的工具,严肃的视觉氛围会容易产生疲劳和枯燥感”、“页面图形化引导太少,用户学习成本很高”。
深入探索用户背后的诉求
② 设计目标
理清问题的本质之后,我们开始制定相应的设计目标,除了解决“亲和力”的问题之外,我们同时也希望能够融合品牌传达,这是我们设计方案的两大目标。
两大设计目标
③ 设计策略及方案
我们从色彩、质感、情感、品牌四个维度来分析和展现如何达成设计目标的。
色彩
以新品牌色为基础基因,以浅色系蓝灰色为背景氛围,降低画面色彩重量给人以平静、平和心理感受。
平台的色彩系统
色彩的情感氛围
质感
在质感的设计上,我们将数字金融 C 端的设计语言引入到 B 端设计中来,通过较为柔和、亲肤感材质和使用微投影、微圆角来提升页面内视觉元素的亲和度,降低纯技术感带来的疲劳和枯燥,而这一点已经在数字金融的 C 端设计上得到了验证。
元素质感探索
界面质感表现
情感化
在情感化设计的维度,我们以情感化的三个层次来考量。在本能层次,通过色彩、质感视觉氛围的营造来解决“好看”的问题;在行为层次,我们结合体验层面的痛点,在页面增加图形化的引导与反馈,解决“好用”的问题。
情感化三层次上的设计策略
根据情感化的强度不同,共分了三个层面进行视觉元素的设计。
图形化设计策略
在使用流程的核心节点上,我们尝试增加图形化的表达与引导,帮助用户快速理解页面信息。同时增强反馈,在不同的情况下给予用户合理的情感表达。
图形化的功能引导
增加新手引导
四、品牌 在品牌层面我们的主要的考量点在于如何将提炼出来的品牌基因,通过图形化的方式融入到页面之中,最终的设计策略是将“积木”这一核心元素作为构建视觉的基础,潜移默化的体现出建筑师这一概念。同时在产品的核心节点,将品牌 logo 和业务元素通过一致的表现形式呈现,不断加强用户对于品牌的记忆。
引导与反馈的视觉表达
平台的品牌基因
品牌记忆点
五、总结 在后台体验优化类项目中,我们首先要对当前的问题进行调研和梳理,找出问题的根因,之后根据问题的根本原因来明确设计目标,制定相应的设计策略。视觉设计的策略重点在于如何通过视觉手段来解决当前的体验问题,这样才能产出有价值的设计。
欢迎关注作者微信公众号:「腾讯云设计中心」
-
如何做好SaaS类产品的小程序设计?来看腾讯的实战案例!
UI交互 2022-10-02小程序是 SaaS 类产品实现商业价值的载体,针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?我们通过千帆易销小程序设计实践,对此进行了思索和实践,以期提供一个更佳的答案。ToB新视角:小程序生态评估方法探索2020 年新冠疫情后,如“健康宝”...小程序是 SaaS 类产品实现商业价值的载体,针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?我们通过千帆易销 小程序设计 实践,对此进行了思索和实践,以期提供一个更佳的答案。
ToB新视角:小程序生态评估方法探索 2020 年新冠疫情后,如“健康宝”这类的小程序逐步成为大家生活中必不可少的应用工具,并且大量线下商业场景如教育培训、百货购物等通过小程序方式快速实现了线上“营业”,使得“小程序”这类商业解决方案,更加被大众认可并获得新一轮快速发展。
阅读文章 >
一、小程序的特点 小程序是 SaaS 类产品实现商业价值的载体,也是构建产品生态的重要组成。随着微信生态愈加丰富和壮大,小程序对于商业目标的达成也起到越来越大的作用。
小程序具有轻量、聚焦、快捷等特点,这有别于 web 端类和移动端 app 类产品。
小程序的特点
目前主流的设计理论,如设计思维、双钻模型、环形模型等,设计流程比较长,使用比较复杂、耗时久。针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?
我们通过千帆易销小程序设计实践,对此进行了思索和实践,以期提供一个更佳的答案。
二、构建千帆易销小程序设计方法 千帆易销小程序的主要场景围绕商品的营销推介展开,可跟进商品使用情况,并进一步转化和完成商务合作。
基于项目需要,我们先后完成了千帆商品价值感知提升、商品内容优化、物料使用提效等设计内容。在这个过程中,对于小程序的设计流程进行了进一步的提炼,发现小程序的设计流程可以总结为如下步骤:
包括「首页价值设计」「定位路径设计」「信息组合设计」「场景化内容设计」以及「效率提升设计」。
小程序设计的关键步骤
1. 首页价值设计——首页多维价值露出,打造第一印象的冲击
引发用户兴趣,实现促活
小程序的第一印象非常关键,因此对于首页设计,关键要加强业务价值的露出,给予用户尽可能直观的信息感知,加快建立其对于业务价值的兴趣,加强用户的正向期待。
首页价值露出有三种模式:点状价值、面状价值、条状价值。
价值露出模式
在千帆易销小程序中,通过多种模式的价值的呈现,在首页构建出 F 形价值流,增强商品等价值感知效果,提升用户活跃度。
提炼多维度价值属性
首页的注意力表达要点在于线索要鲜明突出。通过精致、统一、明确的元素来进行引导,赋予用户深入使用的线索。所以,可以通过细化多维度属性进一步增强用户价值判断,提升体验观感,包括精简的文本、精致的图标、指向性符号、探索性入口、联想性元素等。
多维度属性细化
下图是在千帆易销小程序设计中,对首页卡片属性进行的相关细化,充分阐释多维度价值,进一步丰富价值内涵。
千帆易销小程序的多维度属性细化
加深用户印象感知
由于第一印象的建立过程比较短暂,可以采用灵活多样的交互形式加深用户印象感知,比如凸显核心触点、提供模块级沉浸感、平滑进退机制等方式。
在千帆易销小程序中,在查看商品的过程中提供全时段吸顶可见,加强信息触点映射,从而吸引用户点击深化使用;对于商品的属性类信息内容,提供模块级沉浸查阅,提升首页时效,最大可能覆盖用户查阅细分的需要;保证首页高频操作尽可能平滑,比如在滑动查看信息的过程中提供数量信息,方便用户感知下探情况。由此建立起平滑的进退机制,营造操作的畅快感。
千帆易销小程序的首页操作设计
当用户建立起良好的第一印象之后,将会进入使用阶段,并更有可能深层次的使用产品,从而带来更多转化的可能。
2. 定位路径设计——构建多元导航路径,丰富用户定位链路
丰富多元路径感知
因为信息的多样性及其价值呈现的差异,需要我们通过构建快捷导航,来提升不同信息的定位效率。导航设计的关键点在于识别信息类型的特点,提供适当的导航方式,提升用户参与度。
对于首页的关键内容信息,应提供快捷路径或沉浸式的导航路径:
首页-浮窗-二级页面:适用于关键内容快速感知 首页-顶部标签导航-二级页面:适用于主内容下细分的内容导航
首页关键信息导航设计
对于独立性更强的信息,则可以通过切换底部 tab 标签或者二级页面来进行导航:
首页-底部 tab 导航-二级页面:适用于相互独立的主内容模块 首页-二级页面-子页面:适用于详细内容的渐进查阅图片
二级页面导航设计
提供多种定位方式,满足不同用户选用
不同的用户类型可能有不同的体验诉求,如新用户和存量用户有不同的用户目标。
对于新用户:信息推荐、信息分类、场景化分类等可以提供较好的定位体验,帮助用户快速带入产品场景,降低流失。 对于存量用户:全局搜索、列表筛选、信息分类等可以提供更稳定的定位体验,有助于加强用户粘性,提升转化概率。 如下图在千帆易销小程序部分定位方式的效果,定位方式嵌套使用,比如在解决方案场景化的定位过程中,同时提供了推荐和筛选等来增强方案定位效果。
不同的定位方式
3. 信息组合设计——理顺关键信息组合,加深业务感召力
从信息组合视角塑造整体感
每一类信息都有其特点,要尽可能选取最适合的信息组合来最大化提升业务感知,搭建适用的信息组合。通常信息组合有以下四类:
不同的信息类型
在千帆易销小程序改版前,提供了商品的简介、交付信息、咨询联系人、解决方案、客户案例、售卖支持、物料等信息。
我们在新版本补充了商品的优势和价值、适用场景、销售机会、销售政策等售卖说明类信息,从整体上丰富和完善了商品信息组合,增强了对用户的吸引力。
改版前后的信息差异
提供差异化信息表达,加深印象
信息表达的要点是直观、清晰、高效,对于信息类型多样化的页面,可以通过差异化信息表达,加深用户印象,加强信息传达效果。下图是在易销设计中使用的信息表达图谱,有助于我们诠释这种印象做法。
差异化信息表达
4. 场景化内容设计——贴近真实用户场景,提供针对性内容
情境化提供所需内容
对于内容数量较多的场景,诸如列表页、产品页、详情页等内容页面,如何提供内容则非常重要。
在千帆易销小程序中,我们对于解决方案和案例提供了行业情境的区分,此外还提供了按照角色提供,以及按照使用流程提供等情境化方式。从而加强文档物料的快速感知,方便用户按相应情境使用,提升导航效率。
情境化信息设计
大颗粒场景容器聚合内容
对于场景,存在不同的颗粒,大颗粒的场景容器,信息层级更多,信息表达也更加丰富,所以更需要精心设计。比如解决方案以及专题,均融合了多种场景的容器形式,它们最大的特点是“汇聚”。
在这类大颗粒场景容器中,需要传达其价值点、内容包和联络线。
价值点:提炼具有感召力的文案;
内容包:提供强相关的内容组合;
联络线:实现大颗粒的商务接触和商机转化。
大颗粒场景容器
如下图是易销解决方案场景和专题场景的价值点/内容包/联络线的设计,沉浸式的内容交互保证用户快捷触达核心价值,同时联络线的指引暗含其中,加强了用户转化。
千帆易销小程序大颗粒场景容器
5. 效率提升设计——连贯用户操作触点,提升使用效率
在设计中,需要综合场景流程触点进行有效衔接,从而贯通流程体验,提升用户总体使用效率。这个环节可以在前四步的过程中同步开展,并在设计进入后期时再次集中开展,确保全流程、全场景、全周期覆盖。
连通流程衔接点,打造无缝体验
采用衔接流程节点、缩短流程路径、边界节点兜底等举措来提升效率,提供沉浸式无缝体验。
衔接流程节点:
对于使用过程,提供返回首屏/返回首页/吸顶等,有效衔接用户返回流程。 对于下钻类操作,在返回初始页面时提供锚点定位,方便用户接续操作 缩短操作路径:
通过浮窗提供关联内容快速触达,协助用户快速完成关联信息定位。 通过横向滑动查看同类型内容,便于比对和加深首尾效应。 边界节点兜底:
对于初始页面/无资源页面提供空状态引导 对于搜索/筛选无结果场景提供快反馈途径等。图片
沉浸式无缝体验
拉通信息容器交互,提升信息获取效果
对于信息,既要考虑其特性,也要兼顾共性。小程序中大量使用卡片、列表、对话框等容器,而这些信息容器可以通过标签化、统一样式、突出重点、快捷联动等交互方式,提升信息交互效率。
以千帆易销卡片设计为例: 对商品、解决方案、文档等多种核心信息卡片样式,通过拉通标签、文本、图标、按钮等多种组成元素,加强卡片信息扫描的统一性和交互的一致性。
千帆易销小程序信息容器设计
提供快捷分享,提升多端联动效率
小程序一个重要的优势在于微信生态,有必要充分利用微信生态,借力发力,实现更好的产品触达效果。小程序分享,关键在于要快捷,同时要协同多端联动。
首先,提供统一的分享入口并引导用户完成前置的相关操作,可以通过提供初次引导以及明显的悬浮按钮等方式来加强用户对分享的感知和了解。
其次,给用户明确的分享牵引,提升用户分享意愿。
最后,要考虑多端分享使用联动,小程序的分享不仅仅在于移动端,还有大量的 pc 端使用环节,需要有效的联动。
小程序分享的三个关键
千帆易销小程序的分享流程是这样的:
在分享前置阶段:提供统一的常驻入口并引导用户完成预前的操作;
分享中给予引导和辅助:提供用户明确的分享牵引,提升用户分享意愿;
分享后可在 PC 端快捷下载使用:打通 PC 端物料的使用流程,完成物料下载使用。
通过贯通分享前、中、后环节,提升用户分享使用效率。
千帆易销小程序分享流程设计
三、总结 小程序设计要贴合其轻量、聚焦、快捷的特点,千帆小程序设计方法核心在于通过一个系统性的设计框架来贯通小程序设计流程,减少设计阻塞,提升小程序设计交付的质量和效率。
小程序设计是一个不断创新和发展的设计领域,我们也会不断的拓展和完善小程序设计方法的内涵,打造更先进更具创造力的方法论。
欢迎关注作者微信公众号:「腾讯云设计中心」
-
如何做好SaaS类产品的小程序设计?来看腾讯的实战案例!
UI交互 2022-10-02小程序是 SaaS 类产品实现商业价值的载体,针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?我们通过千帆易销小程序设计实践,对此进行了思索和实践,以期提供一个更佳的答案。ToB新视角:小程序生态评估方法探索2020 年新冠疫情后,如“健康宝”...小程序是 SaaS 类产品实现商业价值的载体,针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?我们通过千帆易销 小程序设计 实践,对此进行了思索和实践,以期提供一个更佳的答案。
ToB新视角:小程序生态评估方法探索 2020 年新冠疫情后,如“健康宝”这类的小程序逐步成为大家生活中必不可少的应用工具,并且大量线下商业场景如教育培训、百货购物等通过小程序方式快速实现了线上“营业”,使得“小程序”这类商业解决方案,更加被大众认可并获得新一轮快速发展。
阅读文章 >
一、小程序的特点 小程序是 SaaS 类产品实现商业价值的载体,也是构建产品生态的重要组成。随着微信生态愈加丰富和壮大,小程序对于商业目标的达成也起到越来越大的作用。
小程序具有轻量、聚焦、快捷等特点,这有别于 web 端类和移动端 app 类产品。
小程序的特点
目前主流的设计理论,如设计思维、双钻模型、环形模型等,设计流程比较长,使用比较复杂、耗时久。针对小程序设计轻量、聚焦、快捷的特点,是否有一种轻量高效的设计方法,可以把已有的设计能力更高效的投射到小程序设计中呢?
我们通过千帆易销小程序设计实践,对此进行了思索和实践,以期提供一个更佳的答案。
二、构建千帆易销小程序设计方法 千帆易销小程序的主要场景围绕商品的营销推介展开,可跟进商品使用情况,并进一步转化和完成商务合作。
基于项目需要,我们先后完成了千帆商品价值感知提升、商品内容优化、物料使用提效等设计内容。在这个过程中,对于小程序的设计流程进行了进一步的提炼,发现小程序的设计流程可以总结为如下步骤:
包括「首页价值设计」「定位路径设计」「信息组合设计」「场景化内容设计」以及「效率提升设计」。
小程序设计的关键步骤
1. 首页价值设计——首页多维价值露出,打造第一印象的冲击
引发用户兴趣,实现促活
小程序的第一印象非常关键,因此对于首页设计,关键要加强业务价值的露出,给予用户尽可能直观的信息感知,加快建立其对于业务价值的兴趣,加强用户的正向期待。
首页价值露出有三种模式:点状价值、面状价值、条状价值。
价值露出模式
在千帆易销小程序中,通过多种模式的价值的呈现,在首页构建出 F 形价值流,增强商品等价值感知效果,提升用户活跃度。
提炼多维度价值属性
首页的注意力表达要点在于线索要鲜明突出。通过精致、统一、明确的元素来进行引导,赋予用户深入使用的线索。所以,可以通过细化多维度属性进一步增强用户价值判断,提升体验观感,包括精简的文本、精致的图标、指向性符号、探索性入口、联想性元素等。
多维度属性细化
下图是在千帆易销小程序设计中,对首页卡片属性进行的相关细化,充分阐释多维度价值,进一步丰富价值内涵。
千帆易销小程序的多维度属性细化
加深用户印象感知
由于第一印象的建立过程比较短暂,可以采用灵活多样的交互形式加深用户印象感知,比如凸显核心触点、提供模块级沉浸感、平滑进退机制等方式。
在千帆易销小程序中,在查看商品的过程中提供全时段吸顶可见,加强信息触点映射,从而吸引用户点击深化使用;对于商品的属性类信息内容,提供模块级沉浸查阅,提升首页时效,最大可能覆盖用户查阅细分的需要;保证首页高频操作尽可能平滑,比如在滑动查看信息的过程中提供数量信息,方便用户感知下探情况。由此建立起平滑的进退机制,营造操作的畅快感。
千帆易销小程序的首页操作设计
当用户建立起良好的第一印象之后,将会进入使用阶段,并更有可能深层次的使用产品,从而带来更多转化的可能。
2. 定位路径设计——构建多元导航路径,丰富用户定位链路
丰富多元路径感知
因为信息的多样性及其价值呈现的差异,需要我们通过构建快捷导航,来提升不同信息的定位效率。导航设计的关键点在于识别信息类型的特点,提供适当的导航方式,提升用户参与度。
对于首页的关键内容信息,应提供快捷路径或沉浸式的导航路径:
首页-浮窗-二级页面:适用于关键内容快速感知 首页-顶部标签导航-二级页面:适用于主内容下细分的内容导航
首页关键信息导航设计
对于独立性更强的信息,则可以通过切换底部 tab 标签或者二级页面来进行导航:
首页-底部 tab 导航-二级页面:适用于相互独立的主内容模块 首页-二级页面-子页面:适用于详细内容的渐进查阅图片
二级页面导航设计
提供多种定位方式,满足不同用户选用
不同的用户类型可能有不同的体验诉求,如新用户和存量用户有不同的用户目标。
对于新用户:信息推荐、信息分类、场景化分类等可以提供较好的定位体验,帮助用户快速带入产品场景,降低流失。 对于存量用户:全局搜索、列表筛选、信息分类等可以提供更稳定的定位体验,有助于加强用户粘性,提升转化概率。 如下图在千帆易销小程序部分定位方式的效果,定位方式嵌套使用,比如在解决方案场景化的定位过程中,同时提供了推荐和筛选等来增强方案定位效果。
不同的定位方式
3. 信息组合设计——理顺关键信息组合,加深业务感召力
从信息组合视角塑造整体感
每一类信息都有其特点,要尽可能选取最适合的信息组合来最大化提升业务感知,搭建适用的信息组合。通常信息组合有以下四类:
不同的信息类型
在千帆易销小程序改版前,提供了商品的简介、交付信息、咨询联系人、解决方案、客户案例、售卖支持、物料等信息。
我们在新版本补充了商品的优势和价值、适用场景、销售机会、销售政策等售卖说明类信息,从整体上丰富和完善了商品信息组合,增强了对用户的吸引力。
改版前后的信息差异
提供差异化信息表达,加深印象
信息表达的要点是直观、清晰、高效,对于信息类型多样化的页面,可以通过差异化信息表达,加深用户印象,加强信息传达效果。下图是在易销设计中使用的信息表达图谱,有助于我们诠释这种印象做法。
差异化信息表达
4. 场景化内容设计——贴近真实用户场景,提供针对性内容
情境化提供所需内容
对于内容数量较多的场景,诸如列表页、产品页、详情页等内容页面,如何提供内容则非常重要。
在千帆易销小程序中,我们对于解决方案和案例提供了行业情境的区分,此外还提供了按照角色提供,以及按照使用流程提供等情境化方式。从而加强文档物料的快速感知,方便用户按相应情境使用,提升导航效率。
情境化信息设计
大颗粒场景容器聚合内容
对于场景,存在不同的颗粒,大颗粒的场景容器,信息层级更多,信息表达也更加丰富,所以更需要精心设计。比如解决方案以及专题,均融合了多种场景的容器形式,它们最大的特点是“汇聚”。
在这类大颗粒场景容器中,需要传达其价值点、内容包和联络线。
价值点:提炼具有感召力的文案;
内容包:提供强相关的内容组合;
联络线:实现大颗粒的商务接触和商机转化。
大颗粒场景容器
如下图是易销解决方案场景和专题场景的价值点/内容包/联络线的设计,沉浸式的内容交互保证用户快捷触达核心价值,同时联络线的指引暗含其中,加强了用户转化。
千帆易销小程序大颗粒场景容器
5. 效率提升设计——连贯用户操作触点,提升使用效率
在设计中,需要综合场景流程触点进行有效衔接,从而贯通流程体验,提升用户总体使用效率。这个环节可以在前四步的过程中同步开展,并在设计进入后期时再次集中开展,确保全流程、全场景、全周期覆盖。
连通流程衔接点,打造无缝体验
采用衔接流程节点、缩短流程路径、边界节点兜底等举措来提升效率,提供沉浸式无缝体验。
衔接流程节点:
对于使用过程,提供返回首屏/返回首页/吸顶等,有效衔接用户返回流程。 对于下钻类操作,在返回初始页面时提供锚点定位,方便用户接续操作 缩短操作路径:
通过浮窗提供关联内容快速触达,协助用户快速完成关联信息定位。 通过横向滑动查看同类型内容,便于比对和加深首尾效应。 边界节点兜底:
对于初始页面/无资源页面提供空状态引导 对于搜索/筛选无结果场景提供快反馈途径等。图片
沉浸式无缝体验
拉通信息容器交互,提升信息获取效果
对于信息,既要考虑其特性,也要兼顾共性。小程序中大量使用卡片、列表、对话框等容器,而这些信息容器可以通过标签化、统一样式、突出重点、快捷联动等交互方式,提升信息交互效率。
以千帆易销卡片设计为例: 对商品、解决方案、文档等多种核心信息卡片样式,通过拉通标签、文本、图标、按钮等多种组成元素,加强卡片信息扫描的统一性和交互的一致性。
千帆易销小程序信息容器设计
提供快捷分享,提升多端联动效率
小程序一个重要的优势在于微信生态,有必要充分利用微信生态,借力发力,实现更好的产品触达效果。小程序分享,关键在于要快捷,同时要协同多端联动。
首先,提供统一的分享入口并引导用户完成前置的相关操作,可以通过提供初次引导以及明显的悬浮按钮等方式来加强用户对分享的感知和了解。
其次,给用户明确的分享牵引,提升用户分享意愿。
最后,要考虑多端分享使用联动,小程序的分享不仅仅在于移动端,还有大量的 pc 端使用环节,需要有效的联动。
小程序分享的三个关键
千帆易销小程序的分享流程是这样的:
在分享前置阶段:提供统一的常驻入口并引导用户完成预前的操作;
分享中给予引导和辅助:提供用户明确的分享牵引,提升用户分享意愿;
分享后可在 PC 端快捷下载使用:打通 PC 端物料的使用流程,完成物料下载使用。
通过贯通分享前、中、后环节,提升用户分享使用效率。
千帆易销小程序分享流程设计
三、总结 小程序设计要贴合其轻量、聚焦、快捷的特点,千帆小程序设计方法核心在于通过一个系统性的设计框架来贯通小程序设计流程,减少设计阻塞,提升小程序设计交付的质量和效率。
小程序设计是一个不断创新和发展的设计领域,我们也会不断的拓展和完善小程序设计方法的内涵,打造更先进更具创造力的方法论。
欢迎关注作者微信公众号:「腾讯云设计中心」
-
如何做好B端产品的体验优化?来看京东行云的实战案例总结(二)
UI交互 2022-10-01本文结合产研协作工具「京东行云 3.0」体验升级,分享B端设计中工作台的优化步骤和方法。一、前言上一篇文章《「京东行云 3.0」B 端产研协作工具体验升级的思考与实践(一)》,介绍了我们在迭代场景下是如何从降低认知负担、提高操作便捷性入手优化用户体验,提升协作效率的。如何做好B端产品的体验优化?本文结合产研协作工具「 京东行云 3.0」体验升级,分享 B端设计 中工作台的优化步骤和方法。
一、前言 上一篇文章《「京东行云 3.0」B 端产研协作工具体验升级的思考与实践(一)》,介绍了我们在迭代场景下是如何从降低认知负担、提高操作便捷性入手优化用户体验,提升协作效率的。
如何做好B端产品的体验优化?来看京东行云的实战案例总结! 本文结合产研协作工具「京东行云 3.0」体验升级,分享一下京东行云团队在降低用户认知负担、提高操作便捷性的一些思考与实践。
阅读文章 >
全局来看,“迭代”模块的优化提升了协作链路上的多场景、多角色的效率,如果想进一步提升协作效率,那么用户在单人场景、单一角色下的效率提升是非常重要的一环,单人的效率提升更能帮助整个协作链路效率的提升。所以,我们将下一个优化目标锁定在了个人“工作台”。工作台作为平台的门户,本应该是流量最大的产品模块,但在现状基本处于被“视若无睹”的状态,例如很多用户倾向于去平台的各个角落逐一查找待办事项进行处理;甚至在调研中发现多数用户“不清楚工作台是做什么的”、“从来不使用工作台”等问题。此外,随着平台业务的扩大,我们需要一个全新的工作台来展现平台的业务特色,同时帮助企业、组织以及个人提升产研效能。
二、现状分析 旧版工作台在漫长的迭代和业务调整中,俨然已成为具有数据汇总、工作事项待办、平台介绍、运营等复杂功能集合体。另一方面由于缺少规划和接入标准,很多模块不断累加新功能,导致不同模块信息割裂、视觉风格迥异。
针对以上问题,早期我们也曾做过一些设计探索,但这种头疼医头,脚痛医脚的方式,最终都不能从根上解决以上问题。我们还是要回归到整个平台和用户角色进一步分析。
三、用户角色分析 上一篇「迭代」中不同角色是根据用户本身的职责参与到协作链路中,旧版工作台也沿袭了这一角色划分方式(按照用户的职责划分为不同角色),不同角色下匹配不同功能模块集合的视图。在调研中我们发现,因为系统配置的不合理,用户很难在默认的功能模块下完成工作,导致用户开启很多与自己不相关的模块。
实际场景下,工作台的用户角色并非按照职责去区分。而是回归到日常部门的上下级关系:部门成员和部门管理者,这两种角色有着不同的诉求:
to 部门成员
部门成员参与到不同的协作链路中,他们的诉求是高效的查找、管理个人相关的待办事项,避免因遗漏而产生逾期等情况。
to 部门管理者
部门管理者的诉求是掌控部门参与到不同协作链路下的工作进度,并根据人员排期情况及时进行调整资源投入,以便更好的推进业务。
通过以上分析,我们也就明确了工作台在不同角色下的定位:
四、优化目标 问题被定位后,此次工作台优化的目标也就清晰了:我们希望发挥工作台应有的价值,通过优化部门成员/部门管理者的使用体验,直接/间接的提升整体协作链路的效率,同时为平台业务延伸提供扩展能力。具体分为:
随着优化目标的敲定,我们的优化策略也就清晰了。
五、解决方案 1. 重塑工作台信息架构
将复杂系统分解成可独立运行的模块化子系统的管理方式有利于系统本身的维护、评测和迭代。—— William Lidwell、Kritina Holden、Jill Butler《通用设计法则》
工作台的使用人群由部门成员和部门管理者两类人群组成,那就要根据他们的业务诉求对工作台的内容进行科学的、合理的信息结构设计。
由于旧版工作台中缺少规划,在漫长的迭代和业务调整中很多冗余的模块揉杂在了用户的待办、数据统计分析的关键操作路径上,加上个性化配置功能过于灵活,对用户的认知造成了一定负担,降低了用户操作效率。所以在新版工作台我们引入了将部门成员和部门管理者关键操作路径进行隔离的模式,将不同角色的用户引流至不同的使用场景下。
如上图,部门成员默认进入「我的」页签下,部门管理者默认进入「部门的」页签下,「我的」专注于待办事项的查看与处理,「部门的」专注于展示部门数据统计分析。
2. 打造高效的待办体验
此次改版的出发点是让用户快捷查找、高效处理待办事项。那么如何将待办事项信息高效的呈现,让用户直击待办事项的核心功能是关键。
旧版工作台中将不同的信息模块平铺展示,使其一屏可以展示更多的内容。但在实际使用中给用户带来了很多问题:由于页面内容堆砌过多,小屏电脑需要滚动多屏才能看到全部信息模块;加之在后期由于功能分属不同的团队,并且对视觉的监管也不严格,导致每个模块都在各自不断迭加功能,新增的组件风格不统一,损害了工作台的使用体验。
在新工作台的信息架构基础上,我们从以下几点进行了优化:
将主区域平铺的模块改为 tab 页签切换的形式,用户可以清楚的获取到所有待办事项的分类,也可通过页面内的页签切换不同类型的待办事项。再此基础上,也保留了一定的个性化设置能力,用户可以根据自身职责开启或是关闭所需的待办事项类型。
把单一类型的待办事项进行了全屏化展示,一屏只专注一类工作事项的处理,既解决了之前页面中模块多、滚动条多的问题,又提升了信息展示效率。
除此之外,保留了右侧栏用于展示平台公告、热门应用、平台介绍等信息。并新增了快捷导航模块,用户可以将自己常用的项目、空间、迭代等收藏到工作台,缩短查找的步骤。
3. 让数据清洗易读
在部门管理者侧虽然已经有人力资源日历排期模块,但仅仅将任务按照排期的形式呈现了出来,部门管理者并不能直观的获取到当前任务总数以及不同阶段下的数量信息,为管理增加了一定的沟通成本。
所以在整体优化时,我们在关键工作事项类型中增加了数据汇总能力,对其进行结构化处理:将汇总数据按照未开始、进行中、已完成三个阶段进行呈现,通过结构化的数字,直观的感知总体进度。
此外在数据的呈现上也进行了反复打磨,通过采用浏览器页签的形式展示数据框架,方便用户点击切换,快速查看该阶段/该状态下的详细信息,一目了然。
六、上线后反馈 新版工作台在上线几个月后,还有一些功能点在陆续上线中。在 Q2 的满意度调研中,新版工作台无论是在使用数据、满意度层面都有较高的提升,并得到了很多用户的好评。同时也收到了其它一些优化建议,我们会及时对用户的问题和建议进行评估并响应。
七、写在最后 在工作台模块优化中,我们没有直接陷入解决现有问题的细节中,而是从业务全局出发明确工作台的定位。再通过对工作台角色的分析,重新搭建符合不同角色诉求的信息架构,排除了当前用户操作主流程上的干扰,增加在各自使用场景下的体验流畅度,从而直接/间接的提升了协作链路上的效率。我们相信此次体验升级是工作台变好的一小步,随着后续越来越多信息模块的接入,我们会朝着将工作台打造成提升管理、协作效率利器的方向迈进。
上一篇文章发布后,我们收到部分设计师小伙伴私信询问优化过程中的一些细节问题,受制于文章篇幅没有详细讲解,后续我们会发出优化细节解析整理的文章,敬请期待…