商务类产品设计
1、to b 与to c 的区别
2、商务类产品的风格特征
3、商务类产品的web端设计要点
4、商务类产品后台设计要点
5、七鱼控制台实例解析
6、商务类产品的活动推广设计要点
1、什么是商务类的产品？
B2B，B2C
1.1、to b 与to c 的区别
01面向对象
- B2B是 企业面向企业的 （企业是：客户 ）企业与企业之间通过专用网络或Internet,进行数据信息的交换、传递、开展交易活动的商业模式
- ToB产品针对大小不同的企业的需求服务，客户是理性的，为了可用性第一美感第二的原则
- B2C企业面向消费者（终端消费者是 ：用户）企业直接面向消费者销售产品和服务商业零售模式
- ToC产品单价低或者免费，促销多，随个人意向和喜好决策,用户是感性的，toc产品面向的用户需求基本是一样的，只是程度不同
- 客户：To b有 大小之分 用户：to c 基本一样
02产品特点
- to c : 用户是需要舒适好玩的体验，价格亲民或者免费 ，帮企业拉人
- to b ：产品特点客户 为了减少成本、提高效率、提高性价比、提升企业的 竞争力
03商业模式
TOB商业模式--直接变现：实打实的一手交钱一手交货，就是 公司通过某种途径或方式来直接赚钱
TOC商业模式：是通过某种方式或途径来吸引顾客，然后达到赚钱多目的，间接变现（例如：百度浏览器，实质上是免费使用，利用广告的增值服务，进行变现）
2、商务类产品的风格特征是什么？
2.1商务类风格特征能学到什么？
- 拓展专业能力
- 加强TOB设计能力
- 01、了解商务类产品中“to”b与“to"c的区别
- 02、掌握商务类各平台设计的方法
- 03、提升商务类产品的可用性和美感，能独立完成商务类产品设计
B类电商在中国的整体发展状况及趋势：
中国B类电商交易规模大，且稳步增长，相比C类电商，B类电商规模更大，增长更稳健。
- 产生的影响：
1、供不应求，随着B类产品的发展趋势，有B类产品经验的设计师相对较少。
2、欲求不满，随着技术的进化和客户美感的提升，B类用户在满足效率的情况下对体验和美感期望越来越高。
2.2学B类产品风格特征的用处有哪些？
01、准确得解决B类业务端复杂性和模糊性
02、更好的平衡业务利益和客户利益
03、提升个人竞争力，提升身价
2.3影响产品风格特征的因素有很多
字体、配色、排版 、设计元素、icon 、动效
2.3、影响产品风格特征字体：
字体的多样性.png
字体的性格特征需要匹配产品风格.png
图片.png
图片.png
图片.png
-
使用系统默认字体为了更好的兼容
苹方（IOS系统自带字体）非衬线字体
微软雅黑（兼容性较高的字体）非衬线字体
Arial(Windows默认字体）非衬线字体
Helvetica(设计师最爱的字体）非衬线字体
图片.png
字体 的 透明度呈现不同的感觉 .png
为什么大多数B类产品用非衬线字体？
- 官方性
- 清晰易懂
- 现代 科技感
- 更好的兼容性
- 1、该类字体通常是机械的和 统一线条的，笔直的线条，锐利的转角，清晰易读。
- 2、为了 更好 的兼容性，产品优先选择系统自带字体，刚好是非衬线字体
衬线字体的特点
- 文艺感
- 历史感
- 艺术感
- 1、衬线字体更加文艺，适合一些带有情怀、个性的特殊产品
- 2、衬线字体 不适用于B类产品的内容 文章，18px以下的字号会 降低使用 者的阅读体验
总结
- 01、无衬线字体更适用于B类设计、注重 可读性、
- 02、衬线字不能 用于B类产品的正文内容，可以 用在 推广设计中
- 03、系统 默认非衬线字体能更好的兼容产品
- 04、个性化的 ToB产品也是可以 用衬线字体 的
2.3、配色
01、B类产品需要注意的色彩情绪
02、品牌色和辅助色的密切关系
03、黑白灰在 B类产品中的作用
色调分为：冷色调和暖色调
冷色调：蓝色代表 谨慎、安全、稳定、科技感
暖色调：红色 代表 紧张、激情、警告、购买欲
B类 产品中要以积极正确的色彩情愫呈现：明快、干净 、正能量、愉悦感，避免错误 的情绪：刺眼、黑暗、紧张、压抑等
案列：菜鸟物流的品牌色运用.png
蓝色：品牌色代表畅通速度，效率很高.png
- 品牌色、辅助色的确立根据产品的概念和发展方向制定。
品牌色：可以是突出色
辅助色：可以是突出色、提示色、链接色、特殊色
2.3、黑白灰在画面中的应用
每次选择黑白配的时候都要有所控制，.png
图片.png
左边的现实中比较实用的，右边的就要进一步改进页头的设计素材比列，这两个方案都是可以用就是看怎么去评估
右边是改进后的更加透气舒服了，左边的挨的太近了.png
黑白灰在页面中产生的节奏感
要达到一个视觉的舒适度的黑白灰，有层次感的过度.png
image.png
image.png
强对比的色块对比
B类产品排版的三大原则
01、降噪
颜色过多、图形复杂、图片不一致、都是分散用户注意力的噪音
突出重点内容，引导读者视线
统一设计表现手法和排版方式
02、留白
留出一定的空间，减少阅读的压迫感
适当的留白能 带给用户阅读舒适感
03、重复
重复使用辅助图形和样式能保持页面的一致性
避免使用与产品无关的元素
过渡重复会影响用户视觉疲劳和影响信息有效的传达
B类产品的信息是 如何布局的？
01整屏展示
保持内容与动效的了流畅性 ，提升用户阅读的愉悦感
避免过多复杂的动效操作
让用户看到中药信息，提升可用性
适合业务内容独立，信息量少的产品
02常规展示
适合业务 内容复杂，信息量多的产品
首屏的内容与设计决定用户在页面的存留率
信息展示注意图文比列，避免本末倒置的情况出现
3、商务类产品的web端设计要点
01、B类产品的三种服务模式你了解吗？
02、B类产品WEB端设计哪些坑需要注意？
3.1、3种服务模式
image.png
TOB产品在中 过 也是 稳步上升的阶段，依然还有很大的提升空间
SaaS
软件即服务 Software-as-a-Service
企业根据实际需要 ，向SaaS提供 商租赁软件服务，无需购买 软件 硬件、建设机房、招聘IT人员等
PaaS
平台即服务 Platform-as-a-Service
厂商向客户提供开发环境 或虚拟服务器
LaaS
基础设施即服务 Infrastructure as a Service
厂商 提供 场外服务器，存储和网络硬件，客户可以租用
image.png
3.2、流程与逻辑
商务类产品web端设计 的-流程与逻辑的正确步骤.png
01、理解需求
理解 产品需求，列出来几个的点，跟着这些点出发
01、不要在不理解需求的情况下动手设计
02、要理解 产品现阶段的需求目标，检验设计是否符合商业目的
02、竞品分析
找出竞品的优缺点，达到实现价值高的产品
竞品分析：intercom
设计标杆-设计最好的产品，注意设计在dribbble上还有team账号，注重创新，表现在设计风格和产品定位上
- 优点：以插画的形式来表达产品功能，故事性、趣味性强。
- 缺点：官网跟后台风格不统一，后台功能相对来说少，没有工单的机器人
- 机会：用户体验至上的一家公司，比较容易吸引用户，可以通过优秀的设计降低运营，用社会化的概念，算法自动分发的方式来解决问题，并且能查看相关人员的信息。
- 威胁：不专业化的问答工具有可能会影响公司的工作效率。
竞品分析：zendesk
行业标杆--国外最早的一个客服产品
- 优点：最早的云计算客服服务公司，颠覆了之前传统的客服方式，而且在纽交所上市，资金有保障客户数量超过5000家，包括巨头公司，Twitter,Sorry
- 缺点：在中国水土不符，没有搭建国内服务器，网速很慢，经常要翻墙才能看，很难展开业务
- 机会：有一定的知名度，产品相过来说比较成熟
- 威胁：财报不太理想，最近一个季度跌了20%，商业模式过于传统，竞争者众多，没有达到垄断地位。
竞品分析：美恰
国内标杆--2013年推出，打造最美的在线客服软件，重体验功能上跟七鱼90%重叠
- 优点：国内最早的一批客服云服务平台，起早步，抓住市场的空白
- 缺点 ：创业公司，资源有限，功能上与成熟产品无较大创新点，为了企业生存，增加了许多伤害用户体验的设计
- 机会：创业公司比较灵活，如果能及时抓住用户痛点，有机会开拓新的市场。
- 威胁：国内的投资人对这种客服系统关注很少，资金短缺，巨头企业进入
竞品分析小结
01、用swot 分析 法对竞品所处的情景进行全面、系统、准确的研究
02、通过分析，结合自身的优缺点，深入了解竞品是 做好设计的前提
03、竞品分析不要 行于表面，应从中得到启发，对后期设计有帮助
03、交互框架
01、尊重合格的交互稿，优化有Bug的交互稿
02、避免参考交互稿的排版 ，陷入交互稿的陷阱
03、跳出设计 框架，展现美感较好的界面
04、收集素材
01、避免参考有设计问题的素材
02、平时要 收藏一些高品质的TOB类产品的网站，作为获取灵感来源
03、将手机的素材在进行可行性的评估
05、内部讨论
01、提前准备好表达你想法的素材参加内部讨论
02、需要利用团队 的力量，寻找更多可行的设计方案
06、视觉表现
图片.png
小结
- 01、需要 提供2-3个方案来进行评审
- 02、交付物需要 完整的视觉股规范 ，表达审核及 思路
- 03、适当 的动效 能 增强页面浏览的活跃性
- 04、要 进行原创，避免用网上的素材作为背景
- 05、利用辅助图形提升品牌概念的统一性
07、内部评审
01、确定设计 思路是否符合产品定位和商业目标
02、确定设计方案是否能 满足用户的需求
03、确定设计是 否符合用户体验的标准
04、避免绕过内部评审直接跳到外部评审
08、外部评审
01、确定设计方案是否达到业务方的预期
02、确定设计方案中的 细节是否存在 开发实现性的问题
03、集中收集不同岗位的意见
09、修改定稿
需要提炼评审时所提的建议并修改
010、切图开发
在pc电脑上的1920屏显示下，1倍图和2倍图同样高清
在Mac屏显示下，1倍图会模糊，2倍图依旧高清
- 通常我们会使用2倍图来保证图片的质量
常见问题
时间 紧：需求方崔的紧，给的时间不充足
需求方强势：需求方强势控制你的设计，要 站在产品本身 和公司利益最大化的去理解这个问题
B类 产品WEB端设计流程
01、理解需求
02、竞品分析
03、交互框架
04、收集素材
05、内部讨论
06、视觉表现
07、内部评审
08、外部评审
09、修改定稿
10、切图开发
4、商务类产品后台设计要点
01、控制台的作用什么？
风险监控 ，实时监测异常 状态
全局概览，集中呈现 分散的中药信息
数据 分析，多维度控制数据显示、计算、过滤和分组等
02、控制台的类型有哪些？
-
02-1、工具类 ：工具类控制台的核心功能时操作，在设计工具类控制台的时候，要思考如何在该场景下简单便捷达到操作目的。
设计特点：
工具类控制台的设计特点.png
-
02-2、关系类：通过协调企业和顾客之间的关系，从而提升管理方式
1、按功能划分
2、客户需求导向
关系类控制台的设计
客户需求导向的经营策略，重视业务流程的设计
关系管理：获得新的关系、加强现有的关系、稳固顾客的关系 -
02-3、记录类：记录类产品比较注重：进行集中采集和准实时索引处理，提供搜索、分析、监控和可视化等功能。
原始内容》建立内容关联数据》形成数据报表》知道行动的信息。 -
02-4、配置类：对内容进行管理，例如提交、修改、审批、发布内容。
1、流程完善
2、功能丰富
5、七鱼控制台实例解析
- 5-1、七鱼控制台的访客端、客服端、管理端
访客端
给访客提供售前、售中、售后咨询平台
记录访客路径，判断访客意图和价值
客服端
解答访客售前、售中、售后问题
管理端
查看客服人员服务状况
通过数据进行分析 ，优化产品，调整销售和运营战略
- 5-2七鱼控制台设计过程中需要注意哪些坑？
- 标签的对齐形式 ：建议使用右对齐方式
- 建议加框会使不同的样式元素变得统一
- 建议前景和后景的要有拉开层次
- 有 描边使主体更突出
- 建议列表中内容前后要有缩进
- 建议弹窗不要 居中，稍微偏上，保持视觉平衡
- 建议外边距要大于内边距，保持同组元素的亲密性
- 根据主流屏幕的分布状况 来 进行“断点”适配
- 整个页面所有 元素不建议 使用 同色系，要 冷色或暖色点缀
- 要考虑到易用性，不建议使用 过于 复杂的图形
制定规范的要点分析
1、完成风格定位，设定规范
2、只对重要界面进行规范
3、针对80%的界面做规范
4、规范也不停的迭代
5、规范要有执行力
B类移动端
业务运营、营销推广、数据分析、协作管理
C类是以移动端为主 B类不一定有移动端
6、商务类产品的活动推广设计要点
6.1、B类推广与C类推广的区别
6.2、B类推广的两大主流风格
6.3、B类推广中的信息变现
6.1、B类推广与C类 推广的区别
图片.png
B类推广的特点
- 有照片、没商品，有插画、没有美女帅哥，有抽象图，风格单一，面对企业，注重信息传达
image.png
6.2、B类产品的两大主流风格
抽象风格、插画风格
01、抽象风格
参考元素：用几何元素、巧用光效、抽象虚拟现实、背景空间感设计、
如何制作：常用ps\ai\c4d软件
避免误区：
- 制作3D时，需要考虑物体的光感、材质，图形具有明暗关系，细节处理
- 不能用有版权的素材
- 绘制抽象图形时结合实际场景，不要凭空想象
抽象 风格小结
- 善用几何元素绘制抽象图形
- 模拟实体 绘制 虚拟的抽象图形
- 巧用 光效和星空背景结合实际需求
- 避免使用黑白图形和网络原创素材
插画风格的思路
参考元素：趣味性、
如何制作：常用手绘\ps\ai软件
避免误区：
1、字体的选择与插画风格的配图不搭
2、“立即领取"按钮没有明显的突出
3、视觉会被插画吸引，导致信息削弱
4、整个画面拥挤,留白空隙很少，不透气
插画风格小结
- 注重页面的 趣味性、互动性、创意性
- 结合需求主体和流行话题 绘制插画主视觉
- 巧用插画元素、卡通字体和愉悦的配色
- 避免图文风格不搭、压抑灰暗的配色
B类推广的信息表现
注意事项：
- 文案过多导致画面不透气
- 运营主要是要突出内容文案，插画比例过大影响了信息阅读
信息表现小结
- 正确理解需求的信息传达
- 弱化不必要的视觉元素
- 光效的聚集能让信息阅读集中
- 强调 信息的层级关系能 提高点击率 和转化率
