上篇我们介绍B端产品特点、风格、思路，本篇我们会介绍B端功能设计要点。

目录

B端特点、B端设计的工作---------------------------------（上篇）

一、B端设计-展示方面----------------------------------- （上篇）

二、B端设计-功能设计------------------------------------（本篇）

①业务角色          ②原子概念           ③可使用的框架工具          ④栅格化系统        

⑤规范制定-一致性体验          ⑥按钮butten        ⑦页面导航

⑧表格表单          ⑨动效

三、B端设计-设计验证------------------------------------（下篇）

       由于B端工具类产品根据其功能、目标、作用分为以下几种（ERP、中台、后台、OA 、CRM、SAAS、PASS.....）大家或多或少都使用过其中一款或者几款产品，也有些例如钉钉、公众号后台、阿里旺旺等这些一些偏C端的B端产品。

        B端功能产品相对与C端更复杂有深度且日常生活中不易接触（非一线工作人员用不到），所以设计过程最容易出现的问题是对产品业务流程认知不够，从而偏离轨道。最终使得产品出现一大堆问题。所以在着手B端产品设计前，要把“业务流程”和“功能梳理”作为最重要的一部，甚至自己亲自做一回“产品使用者（类似做一天客服小哥）”来去体会其中流程。从而让设计更贴合“实际使用者”

2.1-1业务角色大小     

       不知道大家在做B端功能设计时，有想过B和C之间最大的差异吗？在实际工作大量其他案例让我觉得“业务角色”是B和C之间最大不同点。

       B端用户有大小之分，而C端用户基本相同。B端使用者往往有不同角色属性，越大的公司业务角色越多，哪怕是一个小公司也有老板、管理层、基层员工这三类，就拿这三类举例，他们既可能同样的目标需求（例如财务），又存在完全不同的目标需求（员工需要请假，老板不需要）在设计呈现上存在功能优先级、功能数量的差异不同层级所关注的东西差异性较大，很多时候，做的产品只是为了满足付费者（高层领导）的需求，而不是实际用户（基层工作者），导致实际用户吐槽产品易用性差，其实是改变了他们的工作习惯而引发的抱怨，然而领导却达到了监控和实时获取数据的目的。

       因此在收集这些需求时，会受到来自付费者和真实用户两种角色声音的影响，这就需要产品设计者具有更理性的思考方式和处理手段使用者角色的不同例如某saas产品就分为客服、财务、管理、采购、产品、it、老板、销售等职位。这些人在同一个平台下用着几十种功能，例如技术最喜欢利用工具查看整个产品线运行情况、而客服倾向利用工具查看沟通效果。销售倾向查看实时数据和环比增减、而采购可能最常用报账申请采购商品。

所以不同职位在工作上对工作需求有着较大差异。

2.1-2使用者角色的不同

       严谨的业务流程设计设计师需要对产品业务和使用人员架构具有一定了解，如果产品只针对单一架构人员，设计师只需要了解对应业务特性和需求即可。若是平台类产品，需要面向多元架构人群，那设计师就需要了解目标人员业务特性，找到他们的异同点，针对不同使用场景，分析不同人员相同或不同的需求，最后产出合理且专业的流程方案。

2.1-3严谨的业务流程设计      

         如果你不了解人员分布和的工作业务流程，就很难产出高质量且满意的流程方案，所以做B端产品不光要学习本职岗位的技能，还要了解使用人员他们的工作流程、人员架构、业务知识。

      原子设计（atomic design）理论提供给设计五个层面，分别是原子、分子、组织、模板和页面，是不是很像产品设计五要素啊，表现层、框架层、结构层、范围层和战略层。

       通过理解这套原子化设计的规则，可以帮助设计师更好理解这些元素之间的关联，从而创造出统一且层次丰富的功能页面设计。

       在后台产品设计上，很多公司的前端页面搭建都用了框架工具，这些前端框架工具像是设计师的设计模板可以直接套用，大大减少前端工作量，提高页面构建效率。同时在在视觉层上这些框架工具都有原子化概念，方便开发以最小的成本完成所需要的页面搭建功能实现，也帮助设计师更高效完成页面设计工作。一般市面上以“Antdesign”“Element”、“Layui”这三款较为常用，也有其他优秀前端框架,对于设计师来说，可能不知道其底层框架逻辑是什么、怎么实现功能。但是在UI基础表现上其实有着极大的参考意义，

       设计师了解前端框架，并不是去代替前端的工作，而是对UI界面有个更深层次的认知，设计的同时会考虑到界面的交互性、扩展性、可用性。透过表象看到结构本质，提高自己的界面把控能力。

       栅格化系统(grid-design）最早作为帮助杂志书籍的排版规范性而孕育出现，后被引进到界面设计之中。由于栅格化系统拥有较强的规律性，使得搭建页面可以很大程度保证对功能模块的划分， 从而获得高度的“秩序感”和“规律感”，提升了页面的一致性和复用性，同时减少了设计、开发沟通成本。

2.5-1制定设计规范

         制定设计规范无论C端还是B端都尤其重要，即可以帮助同事更好理解设计，高效完成工作，又可以重复运用相同控件保证视觉上统一。还可以减少用户认知成本，

           没有一个统一的规范约束，不同开发、设计师、前端在页面构建时易产生极大设计偏差，使得最终页面产生视觉差异性，增加用户的理解负担，降低操作效率！

2.5-2开发理解业务、还原设计

       产品经理画原型图时一定程度遵循设计规范。会减少开发再看原型图和设计稿之间产生歧义。开发在还原设计图遵循规范也能极大保证页面的还原精度，减少返工。这样既不会给上下游造成过多的工作量，又能在出问题时候明确问题所在。

2.5-3多个设计师协同工作

       在设计规范的约束下，多个设计师协作完成设计工作可以极大程度保证产品视觉的统一性，减少设计返工效率。如按钮、行间距、字体大小、色值等等也有了良好的一致性保证。

2.6-1按钮类型

在功能页面中，常见的按钮有以下几种样式

2.6-2按钮状态

      在功能页面中，按钮状态一般有以下几种

2.6-3按钮主次

       在功能页面中，按钮主次是有一定讲究，一般重点按钮越少，用户聚焦越集中,设计理论中有个“席克定律”是介绍这一点的。

2.6-4按钮重要级

        在功能页面中，根据按钮样式也有强弱优先之分

2.6-5按钮圆角

        按钮圆角和直角也关系着按钮体验，硬朗与柔和，虽然大多数B端产品按钮偏硬朗直角些，但也根据实际产品情况而定，没有绝对。但要注意要保持整个产品按钮的视觉一致。

2.6-6按钮摆放-亲密度原则

       往往有些功能页面可能有多个按钮操作，这个时候一般把按钮布局分成三部分。操作路径最短、低频操作，易定位操作从而帮助用户更为精准的选择

2.6-7按钮Padding思维

       在按钮高度、宽度设计上，我们可以把按钮定义为“等距”和“等宽”两种，大家跟进自身项目情况来进行选择。

2.7-1导航样式

      在后台产品设计中，导航栏作为重要的组件为用户提供筛查和定位的功能，设计合理的导航栏无疑会提高用户的产品体验和使用效率。而我们常见的导航栏样式有以下三种。

2.7-2导航层级

       导航合理性，遵循7±2 原则

       在导航菜单中，超过9个会给用户查找带来困难，低于5个说明导航菜单的分发效率不够高。所以（7±2）梳理最合理

2.7-3导航层和内容层

        对于导航样式，有有弱导航和强导航之分，前者偏向把定位区域和操作区域强分割，从而达到高效操作。而后者定位整体样式，无需重导航和功能需要定位，至于使用哪种就看具体产品了。

2.8-1表单对齐

       在日常表单设计中，有三种样式的表单可以使用，分布是顶部对齐、右对齐、左对齐。有没有想过哪种样式是最适合的？

       用户体验中有个“眼动实现”，它目的是帮助用户研究员探究也些不难被发掘的的用户习惯，以下是对于表单的眼动实验

2.8-2表单对齐

       在表单设计时候，也容易产生表单对齐样式混乱情况，以下是三种表单对齐方式。

       可以看出不同对齐方式，用户在思考和判断时间有着较大的差异。也因得出的结果也可以帮助我们理解在什么情况下运用什么类型的表单。

2.8-3表单行高

       表格得行高影响了每行信息的易读性,根据常见做法,给出几个推荐行高值

关键流程步骤加入动效，可以更好使用户流程中提高反馈感，从而调高整个操作的愉悦性。

本篇介绍了B端功能设计方面的内容

下篇将介绍B端设计-验证设计

Powered by Froala Editor