b端产品设计与开发_b端产品设计与开发 pdf下载

发布时间：2023-03-16 03:35:36 作者：定制工业设计网 33

大家好！今天让小编来大家介绍下关于b端产品设计与开发_b端产品设计与开发 pdf下载的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

文章目录列表:

1、B端产品如何做好竞品分析
2、B类与C类产品设计异同之思辨
3、好的B端文章分享1
4、B端网页设计规范

一、B端产品如何做好竞品分析

相比C端产品，B端产品很难做竞品分析，原因大概有以下几点：

除非是一些标准化程度很高的行业（比如财务管理系统、图书管理系统等），否则很难找到功能相似度很高的竞品。标准化程度高的行业里基本没必要做竞品分析，因为经过红海中的残酷市场竞争，产品已经同质化（行业标准决定的），小公司被巨头用成本和服务品质碾压。

在标准化程度比较低的行业，通常产业链较长、商业模式复杂、地域差距较大，同时产品受到早期典型客户需求特征影响较大，又因为B端产品迭代周期较长，所以产品形态五花八门，各有各的细分市场。

B端产品不公开发表，客户内部使用，很难找到测试帐号。

最难的一点是，就算拿到测试帐号，看了别人的产品，可能没什么太大的借鉴意义。做B端的产品，每个产品都有自己路，自身条件不同、市场定位不同、商业模式不同、对行业的理解不同、技术不同，走的路可能截然不同，学习功能和产品特征基本很难成功（说是找死也不过分吧）。如果你想从产品中去学习别人对行业的理解，这也不是普通人能做到的。真正的行业专家、解决方案专家、产品架构师，有几个有时间去写竞品分析报告的呢？就算有时间，也只能写给自己看吧，在这个层面上，可以交流的人太少了。

但是不管怎么说，分析同行的产品总能带来一些启发，也是B端产品经理提升的途径之一，如何进行分析，还是有一些方法可循，所以试着归纳几点。

B端产品不像C端的产品的设计逻辑那么明显，或者说有的设计逻辑相当的隐晦。多收集一些背景资料有助于对产品的理解，这些背景资料可能包括：

公司背景，比如成立时间、地点、规模、发展史和关键大事。

技术背景，比如产品使用到的关键技术、技术合作伙伴、技术变革史。

早期版本，对比版本升级路线和行业发展路线可以对行业有更深的理解。

典型客户，典型客户的需求对产品的功能影响很大，也对自己对行业的理解有帮助

政府关系，中国国情，你懂的。

B端产品的定位方法与C端产品不同，C端产品定位的要素是：

细分人群

关键需求

B端产品的定位要素是：

产业链（价值链？资金链？信息链？）上的位置（在哪个环节）

发展方向（向上游还是下游）

C端产品的用户和客户身份通常是重合的，而B端产品复杂的多。尤其是基于工作流的产品，用户身份会非常多。共性的分析方法里边，以下几个角色是需要在产品里找到的：

交易双方

数据采集人员

决策者

系统实施人员

客服人员

技术维护人员

前三类人用的功能决定了产品的业务逻辑，后三类人用的功能决定了产品的单位客户成本。业务逻辑决定了产品的竞争力，单位客户成本决定了产品的市场生存能力。

业务场景主要有两大类：

生产场景（重视数据采集、协作效能、责任确认等）

管理场景（重视决策分析、风险控制、过程监管、质量控制等）

对于不同的行业和产品你可能能想出各种对业务场景分类的方法，但是做竞品分析真的没必要搞的太复杂。生产场景分析的目标是找出效能优化的手段，这就是需要对行业有深刻理解的地方，管理场景分析的目标是找出卖掉产品的方法，这是客户购买你产品的动力。

在任何行业全产业链产品毕竟凤毛麟角，既然多数B端产品都是只解决一个环节的问题，那与其它产品的集成方式就很重要，友好的集成方式决定了你的生存空间。一个没有API的B端产品就像食谱特别窄的生物物种，离开特定的环境根本没办法生存。粗略的分析产品生态大致可以看这几个方面：

是否有开放式的帐号系统（接受第三方帐号授权，开放帐号API）

是否有数据交换机制，比如文件数据交换（导入导出、兼容多种文件格式、兼容数据交换标准）、数据交换API

是否可以适配多种硬件

是否有代理商和分销商的支撑体系

分析竞品的生态环境，对比自己产品的生态环境，可以分析出很多问题。

分析商业模式有三个要点：

成本分析。评估竞品的研发固定成本和单位客户变动成本。如果竞品为客户做了大量的定制开发，那他的单位客户变动成本就很高，可能就很难做大。

销售分析。看典型客户数量，代理商数，二次开发商数量，评估销售能力

有无辅助产品线。如果该竞品有其它辅助产品线，已经形成产品群，那要看这个产品在产品群中的定位，是个防守型产品还是进攻型产品。防守型产品负责抵御竞争，进攻型产品可能才是盈利的金牛。

结束语

为什么谈了这么多都没提到产品功能分析？为什么没提到竞争优势分析？B端产品的优势是企业的内功，绝不是什么功能。产品定位、商业模式、技术积累、成广东会化、行业理解和产品生态这都是内功，是心法，产品功能只是招式而已。

二、B类与C类产品设计异同之思辨

用户体验这个概念最先是从C端开始出现的，随着行业的渗透，B端产品也慢慢开始重视了起来，这两年兴起的新零售和全链路，让B端供应链背后的产业慢慢浮出了水面。

B端行业是一块神奇的领域，对于普罗大众来说它是陌生的，也是神秘的，大部分的普广东会户无法接触到这背后的产业链条，然而生活中的一切都与其无时无刻地产生关联，我们使用的每个物品都是从其生产加工-制造-分销-流通-零售等等流程，最后到达我们消费者手中，而我们接触最多的只是零售这个环节而已，其背后的供应链关系却是非常复杂的。

由于本人最近同时在做装修行业的B类和C类产品，对这个领域有一点小小的思考，所以在这里做一个简单的分享。
首先，根据用户角色我们来区分一下B类和C类用户的区别，这里以装修行业为例：

C端用户即装修业主，指的是有装修需求和潜在需求这类群体，其用户画像大多数为刚购新房有强烈的装修意愿但不知如何装修的小白用户；

而B端用户用户角色就要复杂很多了，我们现平台的B端用户主要有装修公司、设计师、建材商、采购商等等，而每个角色端都有非常多的使用者，比如装修公司里面就有管理员、老板、客服、设计师、项目经理等等一系列的使用者角色，并且每个角色的使用场景和使用目标都完全不一样，所以这也大大增加了B端产品的角色权限等功能的复杂性；

然后再对比一下两者流程之前的区别：

C端用户的使用流程相对来说比较单一，比如一些浏览、发布、下单等操作流程，所以对C端用户来说，我们需要尽量简化其任务流程，通过运营和设计的引导促使其完成这些操作；

而B端用户的使用流程就比较复杂了，就拿装修为例，装修公司从装修前接单到最后装修完成竣广东会大小小的流程至少有几十个，就算是主要的的节点都有十多个，流程周期一般都是几个月甚至更久，而且有相当数量的流程节点是在线下完成的，这对B端产品的设计带来了极大的挑战，大多数的线下场景的所带来的问题会更复杂，所以对于B端业务流程的设计会提出更高的要求；

最后看下其二者使用场景的区别：

C端用户的使用场景多数是稳定的，比如app和pc，用户通过固定的用户端就能完成所有的任务，不管是室内还是室外都是在一个相对较为稳定的环境下完成的，所以C端用户对沉浸式的体验拥有更高的要求；

而B端用户真实的使用场景是比较复杂的，比如一个装修公司设计师用户，他可能前期需要在pc端上去派单，然后在手机端上接单，然后给业主打电话沟通量房，线下量房时用app签到拍照等等，回去在pc端设计方案，最后再次跟业主沟通报价方案，线下签订装修合同，手机端同步更新等等这些操作。当然真实的场景会更复杂多变，这里涉及到大量的线上和线下对接的使用场景，所以我们在分析B端用户的使用场景的时候需要更深入的思考，需要更加具象地还原每个用户角色在不同的流程下其真实的使用场景是什么样子的，角色与角色之间是如何进行信息的交互，而不是仅仅局限于线上的使用环境，要把线上和线下融合在一起才能真正明白使用者的使用场景和其心理模型。

通过上面三个差异点的分析，能够大致了解了B端和C端用户设计的差异性， B端用户角色众多且复杂，用户操作周期长流程冗长，使用场景多样化；而C端用户角色比较单一，用户画像明确，操作流程简单舒适，使用场景稳定。因此我们在做产品设计的时候针对其不同的特性去做差异化的设计，比如B端用户角色众多的问题，如果按照每个角色都去做定制化功能，那么这个产品最后肯定是不堪重负的，那么我们的思路是做功能模块化设计，把角色和角色之间的区别用权限来隔开，不同的权限拥有不同的功能，然后让装修公司自己去定义角色和权限，这样就实现了功能可配置的差异化设计。

从宏观的维度来看的话，B类产品从某种意义上来说是为了实现价值最大化的一个过程，其主要是为了价值创造；而C类用户更在意的是个人价值体现的一个过程，简而言之为价值实现。针对二者的区别，体现了两种不同的设计方向和思路：

C端：1、价值传递；2、场景触达；3、氛围营造；

B端：1、价值呈现；2、任务管理；3、高效协同；

三、好的B端文章分享1

好的B端文章分享
前言

哈喽朋友们，我们许久不见，这一年经手了很多好项目，如百度的可视化大屏设计、ToG政务可视化大屏设计、B端产品的设计迭代等等，收获颇多，有很多新的感悟，后面要跟大家统统把这些案例都分享出来。

本期先分享一下B端产品设计原则，希望能给你带来不一样的思考。（内容较干，不建议扫读）

B端产品设计原则

B端产品服务组织群体，用户具有组织属性，需求来自组织和业务而不是用户本身，所以B端产品是以业务为导向制定产品的设计方案，这个过程需要PM、交互、UI都应该知道并遵循一致的产品设计原则。

1、B端产品0到1 — 稳定性

B端产品0-1最应该重视的是产品的稳定性，这也是B端产品第一大设计原则，产品稳定压倒一切。

推动产品的稳定性，首先产品的设计上不要做到大而全，而是小而精，满足最小可用版本即可（MVP）。

0-1阶段不要过于追求体验和视觉美感，打造小而精快速上线才是王道，毕竟产品问世才会产生价值。

如何定义小而精？

B端产品与C端产品不同，C端产品有一个核心功能即可上线，而B端产品通常是多个功能组成的业务线，所以小而精应该是满足最小业务全场景闭环，并不是以减少产品功能为依据。

对于单一业务的功能定制，如下图，依据主线业务定制功能，即A-B-C-D，对于周边体验性的、不影响主线业务的功能，此阶段都可以先不要。

对于混合多业务的功能定制，应该分模块开发，如下图，每块就是一个业务流程，所以做好优先级分模块开发最优。

产品经理需要注意的是，提前规划好开发的优先级，并与团队的每个角色一起规划探讨后续的工作，这样大家对后面的工作都能有一定的了解，在此阶段能做到思考后续的功能增加。

追求完美不重要

0-1阶段产品的开发不要过于追求完美，完美需要花费团队每一个人大量的时间和精力。

对于UI/UX设计师此阶段不要过于强调自己的“价值”，不需要着重去思考产品体验，也不需要设计太多的效果，这有可能会导致开发工作量增加，做到满足最小可用版本即可，尽可能化繁从简，UI/UX设计师这样做，才是发挥了真正的价值。

对于技术开发来说，简单的功能，开发人员心态也会更轻松，功能越多压力越大，出现问题的数量也会变多，最后测试阶段Bug就像打地鼠一样一个一个冒出来，最终会导致产品迟迟不能上线。

2、高效性

高效是B端产品设计必须要重视的一个方面，高效说的是用户长时间使用产品的效率。B端产品通常是为了解决业务需求，一般非常重视工作效率，如果产品的功能和交互设计的不合理，就会直接导致产品使用者的工作效率降低，甚至最终会影响企业的业绩。

案例解析

笔者曾经改版过一个巡查采集信息的产品，采集的信息为了保证真实性，后台需要专人对信息做审核，对于庞大的数据，如果审核功能设计的不合理，就会变得费时又费力。

而旧版的设计就是如此，页面的设计把采集的信息用列表呈现，审核人员需要点击列表中的审核小按钮进入详情页才可以进行审核，审核下一条需要重复前面的操作，交互上是标准的往复式操作逻辑，如下图所示。

为了解决审核效率问题，改版了审核的交互设计，最核心的改变就是“一键审核”，下图所示，同样是列表呈现，增加审核模式，点击进入审核模式后，全屏展示（可以显示更多内容），当点击审核通过时，立马切换下一条信息，这样就实现了连续性的交互审核方式。

在此案例中，为了助力审核效率，UI设计上把主要需要审核的信息，全部固定呈现在第一屏，对于有些板块信息过多时需要滚动查看，但也尽可能保证了信息不多时，能够一屏全部呈现出来，这样审核人员在不用挪动鼠标的情况下，只需要点点点即可完成每一条信息的快速审核。

同时，审核按钮较大的设计，也是为了满足审核人员能够准确点击，按钮旁边增加了待审核量的统计，能给用户一种目标感。

3、易用性

易用性是指用户使用产品能够快速上手，这包括易理解、易操作、吸引性等。

易用性在产品迭代过程中是需要着重思考并优化的方面，用户一般是通过产品使用的易用性来衡量产品的好与坏，哪怕产品很稳定。

举个例子，笔者曾在过的一个家公司，财务报销系统使用效率及其低下，出差员工报销差旅费一般都需要花掉半天到一天的时间，因为产品操作难度大，以及线上线下结合的不够好。

例如报销功能入口在二级页面不容易找到、当信息提交后没有任何引导，不知道下一步该做什么，每次需要问有经验的老员工，然后老员工也是一顿操作加回忆，最后跟你说“好像应该打印单据找领导签字了”。

不仅如此，产品报销的表单设计，把各种分类全部集中在一起，使用者很难辨别应该填写哪个，很多时候填了半天，发现把报销填在了借款。这一系列不友好的产品体验，最后只会导致员工不愿意出差，不想面对繁琐的报销工作。

做好产品的易用性，要遵循一些原则，首先是保持产品设计的一致性，让用户有熟悉感，不要让用户迷失在产品中，当用户有疑惑时及时提醒，这点需要做可用性测试。

另外，要把产品首页设计好，做好流量分发，用户通常只爱在首页找东西，而不是二级页面或者更深。

B端产品有的服务企业员工，有的服务项目，比如OA系统，服务的是企业员工，这类产品要有协同工作的功能，需要了解组织架构，善于从多个角色视角去看待问题，避免因为产品设计导致某个角色工作量增加。

服务项目的产品，对外有商业属性，要做好个性化配置功能，因为客户总是有个性化的需求，但也要遵循产品的原则。

例如外卖的商家都希望有删差评的功能，但其实这样的功能是不可以有的，这会违背产品的商业逻辑，商家可以删差评，服务意识就会很难上去。

4、好看

B端产品0-1，好看是最后应该考虑的方面，但这并不代表不重要，而是当与稳定性、高效性...不能并辔而行时，需要合理作出让步。

产品应该是先问世，功能和架构都得到了验证后，然后再去着重优化视觉层面以及提高产品体验。

在视觉设计上，B端产品应该是干净整洁，B端产品通常是为了工作，经常长时间沉浸式使用，所以尽量少用过于强烈刺激性的色彩。

产品设计目标，应该是从用户使用产品的效率性、便捷性出发，不能让视觉效果喧宾夺主，这也就是B端产品惯用冷静理性的蓝色调原因。

另外，产品的UI设计要善于运用第三方组件库设计，比如选择器、折叠面板、上传、表格、表单等组件，这些成熟的组件都代表了用户常用的操作习惯，同时组件的使用有利于和技术人员高效协作。

总结：

综上所述，B端产品设计优先级方面应该是：稳定性-高效性-易用性-好看。

B端产品0-1，功能上做到最小可用版本即可，这样可以推动产品的稳定性。对于高效性、易用性、好看都是产品上线之后，需要着重优秀的方面。

最后

最后需要强调的是，产品设计原则没有标准，以上观点可能只适用于一部分B端产品的设计理念。

产品设计对于不同行业、不同公司、不同决策者都会有很大的差异，没有最好的设计原则，只有最适合你产品的原则。

原文链接：//zhuanlan.zhihu.com/p/249000055

四、B端网页设计规范

感谢作者 : Arche阿北
后台产品设计规范

以下数值为参考，请结合特定产品灵活运用。

1. 页面布局

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

2. 标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

辅助色用于提示其他场景，比如成功、失败、警告、无效等。

中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

3. 标准字

后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

4. 图标

图标是 UI 设计广东会要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

5. 按钮

按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

6. 导航

导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

侧栏菜单为垂直导航菜单，可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

7. 表单

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。

表单广东会题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。

选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。

单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。

开关按钮外框 40*20px，内部圆形 16*16px。

8. 表格

表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

对齐方式

表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

弹框

弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭，则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。

10. 缺省状态

绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。

11. 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

以上就是小编对于b端产品设计与开发_b端产品设计与开发 pdf下载问题和相关问题的解答了，b端产品设计与开发_b端产品设计与开发 pdf下载的问题希望对你有用！