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

不同于一些简单的 C 端项目，即使对需求内容没有什么理解，只要拿到了产品的原型也能轻松完成设计。而 B 端的需求往往非常的复杂，一个界面或者组件会有非常多不同的状态和细节变化，且操作内容相互交叉，在我们对需求缺乏理解的时候，做出来的设计只会漏洞百出。

2. 交互特点

对于一般的 C 端产品来说，产品通常只是用来获取信息的载体，我们通过操作界面来获取商品、视频、动态、新闻等内容。很多时候，会将部分操作状态、交互方式进行隐藏，以更好的展示内容。

但在 B 端产品中，虽然信息的展示也很重要，但更重要的目的是通过一系列的操作去筛选或者处理信息。因为这些操作往往步骤比较多，且可操作的选项也多，所以产品对于交互要有更清晰明确的反馈。

例如，可操作的功能都要罗列展示出来，鼠标悬停，跳转，状态变更等等也要有对应样式，并且许多操作步骤需要通过文字提示告知用户结果。和 C 端的交互比起来，虽然 B 端产品会显得「啰嗦」，原因就是为了给用户带来更准确的操作感受，不让用户去「猜」或者刻意「探索」小细节。

3. 设计特点

当我们面向 C 端用户设计的时候，往往需要增加一些额外的视觉元素来呈现品牌和情感化的表达，并且也要去满足目标用户的个性化需要，所以多数 C 端产品看起来会显得「花哨」。

而 B 端产品是为了解决企业的问题，是需要用户长时间操作并完成工作任务的，对于操作和展示内容无关的元素，越少越好。很多新人会热衷于下方这类以 C 端视觉标准进行设计的管理界面，但它们对于真实的使用体验来说显得过于冗余。

优秀的 B 端界面设计在视觉的表现上一定是克制、简洁、干练的，因为超出操作需要的视觉元素越多，对于用户认知的负担就越重。

4. 技术特点

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

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

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

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

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

B端设计的内容

1. 布局设计

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

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

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

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

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

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

2. 控件设计

作为 UI 设计的一部分，控件的设计自然也少不了。多数控件的设计和一般网页设计所需的控件差不多，类似按钮、菜单栏、分页栏、面包屑、通知栏、下拉菜单等等。

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

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

3. 表单设计

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!