全面了解B端产品设计：基础扫盲篇

在今天，互联网的影响力与作用与日俱增，除了我们日常生活领域的改变以外，对于商业领域的渗透也见效颇丰。

越来越多的企业开始使用数字化的解决方案来助力企业发展，包括日常管理、运营、统计等等。或者通过互联网的方式开发出新的业务形态，进行产业升级，如这几年风头正劲的「新零售」领域，即通过互联网对传统零售业升级和改造的尝试。

4. 技术特点

和手机客户端不同的是，网页可以随意的更改宽度，显示内容区域差距极大。往往我们既要考虑 1024px 的正常显示，也要考虑在 2560px 宽下的显示效果。那么，这就需要设计师对于前端的知识和框架有深刻的理解，因为没有这方面的知识，那么页面的自适应布局设计将无从谈起。

所以，设计师在进行 B 端设计前，要能熟练掌握 HTML5 和 CSS3 的内容，并能理解 JS 对于页面布局的计算方法。

并且，除了完全独立设计开发的项目以外，还有大量的 B 端项目是采用第三方框架开发而成的，如 Ant、SBadmin、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力，避免重复造轮子。

而设计师需要根据这些第三方框架的特性对页面进行设计(类似换肤)，掌握前端的知识越扎实，那么设计的过程也就会越顺利。

实际上，B 端的设计内容是可以拆分成若干模块的，每个模块都有特定的知识点和理论需要掌握。所以最后，就来分享一下做 B 端设计时我们具体在设计什么内容。

B端设计的内容

1. 布局设计

B 端产品，就是一套商业系统，在这个系统需要包含众多的信息和操作功能，而设计的任务之一，就是定义一套布局框架，将信息和操作功能整合进去，实现有序、统一的操作体验。

通常，管理界面的布局会包含以下几种固定的内容：

• 导航
• 状态栏
• 内容区域
• 弹窗/边栏

比如常见的几种布局类型：

当然，布局的设计远不是到这里就结束了，除了部分具体的字段、链接以外，我们还要将自适应的前端技术考虑进去，如何在拉伸浏览器的同时，保证这套布局的正常使用。

比如在今天最主流的适配方式就是通过 CSS 删格等分体系，但这是一个非常复杂的话题，我们以后讨论。

2. 控件设计

作为 UI 设计的一部分，控件的设计自然也少不了。多数控件的设计和一般

这部分内容设计起来没有技术难点，但我们前面讲过，B 端产品在交互反馈上的需求，使得我们对控件进行设计时要充分考虑它们的状态。

例如，一个按钮可以包含默认、鼠标悬浮、点击、已点击、不可点、加载中等多种状态，这些状态设计得越全面，则操作的体验就越好。

3. 表单设计

表单是一个接触频率非常高，但对新人来说很陌生的词汇。简单点理解，它就是用来在界面中键入信息的控件的合集。比如输入框、复选框、单选框、下拉选框等等。

在 B 端设计中经常需要用一系列的表单控件组成一个完整的业务操作，比如在后台创建一个用户账号，可能就需要通过在输入框输入用户名、密码，然后用单选框选择性别，复选框选择爱好，日期下拉菜单选择生日等等。

或者，我们还会使用表单的内容进行高级的筛选操作，通过不同的表单控件来设置筛选条件，缩小结果的范畴。

4. 表格设计

在 B 端产品中，数据主要通过表格的形式展现。而多数设计师对于表格的理解一无所知，甚至连 Excel 都没有用过。

表格是 B 端产品呈现信息和数据最重要的组件之一，无论是用户、产品、订单或者记录，我们都需要依靠表格的展现形式进行梳理。

但是，表格的设计并不只是枯燥的画好线条方格，而是要根据业务的属性、字段的类型和显示数量灵活的调整，以及还要考虑如果对每一条数据进行编辑、选中、移动等操作的交互方式。

5. 图表设计

最后，就要讲讲图表的设计了。在大数据概念大热的今天，人们对数据的重视度越来越高，无论是在新闻还是在会议的 PPT 上，我们都会看见各种各样的数据内容。而这些数据，通常都以图表的形式呈现。

常见的图表包含折线图、扇形图、柱状图、曲线图等等，比较常见。但是，有一个普遍的谬误是，很多新手错误地将图表的设计理解成数据可视化设计。数据可视化是将数据以更复杂、多样的方式表现出来，不仅在设计上难度更高，且需要极其高昂的开发成本，我们会在后续的内容里说明。

所以，在 B 端设计中，我们对数据的展示只要专注于了解主流的图表类型，并明白如何根据数据展示的需要对它们进行运用即可。

总结

以上就是关于 B 端设计扫盲的第一篇内容，简单地对管理平台的设计进行扫盲，让大家有一个初步的认识，并对一些错误的想法进行纠正。

当前题目：全面了解B端产品设计：基础扫盲篇
文章分享：https://www.cdcxhl.com/news/103263.html

成都网站建设公司_创新互联，为您提供电子商务、软件开发、定制开发、外贸建站、网站设计公司、微信公众号

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联