C端设计师遇到B端笔试题，差点懵了

原创设计师ZoeYZ 体验进阶

收录于合集

最近一个我们知识星球有一个想要转 B 端的设计师给我看了的笔试题，希望给点建议。

题中给了一个完成度较高的的方案，要求进行优化。

我一看她这原版和新版对比，就知道如果拿这个方案去提交，新工作十有八九要落空。

因为原版的那个交互稿其实做的挺细致的，乍眼一看跟 UI 稿没什么区别了。

原方案经她这一改，并没有起到明显的加分的作用：视觉上既没有什么突破（依旧是中规中矩的白色背景蓝色按钮），交互也没什么改变。

为了保护隐私，我并没有直接将方案贴出来，而是画了两张类似的图：

主要的差别也就是背景色加点蓝、字体改一下、边框颜色变浅一点、按钮宽度统一一下……

最大的变化，也就是去除了创建人，因为这个地方填写的就是用户本人。

这种“不痛不痒”的小修小补，放在平时的工作上，倒也可以说是细节考究；但在笔试题时，就费力不讨好了。

对于招聘方来说，时间精力有限，必须在极短的时间内，极大地体现出个人能力价值。

而对于这种 B 端后台产品，视觉上的局限过大难有突破，交互体验上的优化更容易出彩。

可是这位同学之前主要做 C 端产品，对于 B 端产品的体验设计没有什么概念，看不出这么一个简单的表单，还能怎么优化。

于是我给她简单地说了几个优化点作为参考：

1. 规则最好有直接的反馈

原方案有个字符限制，但如果只是这一行字，看起来难免不直观。

当英文、符号、中文混在一起时，字符数究竟如何计算，就容易困惑了。

更好的方式，是像上图这样把当前的字符数和字符限制都写出来，如果超出了则立即出现警示。

这样用户就不会在填写时担心是不是有超出限制了。

2. 选项不多就都列出吧

下拉框在表格中运用很多，因为占用空间少，不管多少选项都能放下。

但是当选项很少时，下拉框就不是最佳选择了，不但无法预先查看选项，而且操作路径也比较长。

如果明确知道选项数量较少，最好像上图这样使用单选框之类的形式，将选项直接露出。

3. 避免依赖用户的记忆力

表单中，如果要填写人名，通常最终都要关联到数据库的，所以必须确保输入的精准性。

让用户凭记忆手动输入别人的名字，肯定不靠谱。用户不一定能记住全名，而且还可能写错字。

最通用的方法是上图这种带搜索功能的下拉框，用户只需要输入很少量的字，就能快速找到要找的人。

而且最好是默认选中第一个选项，这样就能通过上下箭头和回车，只用键盘填写完成了（切换鼠标和键盘真的很麻烦）。

4. 复杂问题提供范例

大部分的表单填项都是简短的字段，不需要有案例。

但如果遇到比较复杂的主观题，例如个人评价、礼品介绍、商品描述……而且还是必填项的话，那么填写难度就大大增加了。

除非确保用户都有经过培训，否则如果不提供点范例，填写起来会很吃力，也很容易让用户胡乱填写。

对于比较长的范例，可以像上图这样默认隐藏，点击或悬停时查看。

5. 需要保存的尽量自动保存

现在很多在线工具都提供自动保存功能，用户也渐渐习惯了不去手动点击保存，而是依赖系统的自动保存，甚至历史版本记录功能。

在这样的时空背景下，如果条件允许，最好就别再用保存按钮了。

以免有的用户担心无法保存，可以展示一个保存状态的提示，让人安心。

总结

这么小小的一张界面，就能找出 5 个优化点，可见 B 端产品体验提升的潜力还是挺大的。

如果在加上一些对「可用性」没有直接影响的体验提升，例如文字对齐、自动获取焦点、表单内容较少改用弹窗、按钮使用右对齐……可以改的地方就更多了：

当然，这些优化只是从一个笔试题的角度来看的“理想化”方案，侧重点在尽可能体现出自己的设计思路。

真实项目中，需要考虑用户习惯、设计规范、开发成本……等各种局限性，实际上能发挥的空间要小一些。

其实上面的示意图都是我为了写这篇文章才画的，当时只是写了几个建议作为参考给那位同学。

看完之后她也有所体会，说自己之前主要做 C 端产品，对于 B 端产品有点不知道如何下手才好。

在做 B 端产品体验优化时，如果找不到思路，可以试试这种方法：

看方案不要只看表面，把自己想象成真实场景的用户，一步一步地操作可能遇到什么问题。

因为大部分 C 端产品操作很简单，只要扫一眼就能发现问题，重点经常是放在视觉效果上。

但 B 端产品操作往往比较复杂，需要仔细体会操作步骤，才能发现问题。

否则，扫一眼看到的视觉效果，只会觉得 B 端产品都长得差不多，看不到体验上的具体问题。

近期正是招聘季，想要让我帮忙详细点评一下作品集，获得一些职业建议或内推机会的，欢迎加入我们知识星球。

还有各种课程、训练营和学习打卡活动，对成员全年免费开放：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：