【丰富例子】很神奇的B端设计模式

原创小果知果日记

这是知果日记的第 151 期分享

关键词：设计模式、B端体验

Hello，你好呀，我是知果。

欢迎来到知果日记公众号，看我的心得分享。

今天要和你分享B端设计模式。

在我第一次接触到设计模式的时候，我觉得这东西很神奇，我简直太喜欢这东西了，其提炼了很多设计方法，供我们在定位到设计场景后，直接调用。

然而，设计模式并不是界面设计中优先提出的，在建筑领域、研发领域，早已有设计模式的概念。

设计模式的本质在于抽象和复用。虽然一个设计模式不能覆盖所有场景，但是只要能覆盖一部分相似的场景，就是一个可被收录的设计模式👍。

比如，表格多条件查询、回到首页、表格字段设置、数据筛选等，可以解决对应场景下的问题，它们就可以被称为设计模式。

听着如果有点晦涩难懂的话，我们具体来看几个例子哈。

1、结构化模式

结构化模式是指当用户输入的时候，不是单纯的输入框，而是具备数据格式的组件。例如验证码、IP输入，都可以采用结构化模式。

结构化设计模式的优势在于所见即所得，不会少输入，也不会多输入。

2、格式化模式

格式化模式是指在某些场景下，数据有固定的格式要求。但对于用户来说，并不会按照系统要求的格式输入，例如打空格，打英文标点。

因此我们要让系统来做这件事（系统自动格式化），帮助用户按照习惯输入。如身份证号、银行卡号。

3、填空模式

在文本较多，且文本之间非一句话可简单表述，需要中间加入很多用户侧选择的操作时，可以采用填空模式。例如苹果系统「键盘」操作：整句话是“是否允许闲置（）秒后关闭键盘背光灯”。

这个模式真的很好用，我现在很多界面上就用到了此类模式，文字描述地越准确清晰，越可以引导用户高效完成填写、选择内容。

4、说明模式

对于一些较为难以理解的字段；或者选择某个选项后，期望把重要的信息告知到用户，就需要采用说明模式。

采用信息说明模式时，建议文案精简、设计直观，保证用户在无需猜测，便可以根据说明自己操作和成功完成操作。例如密码说明、账号名称取名说明。

5、线索模式

大家记不记得时间控件中有“请选择日期”，搜索框中会有“请输入IP地址”等线索文字，这就是线索设计模式。

假如搜索框中什么文字也没有，用户就会搜索一次错一次，因为设计者没有给用户框定搜索边界。因此线索设计模式可以让界面不言自明。

线索模式和说明模式我们有时候会混淆，当然问题也不是很大，我梳理了线索模式和说明模式的区别，大家以后用的时候会更有数。

6、自动化模式

自动化模式是指用户在输入过程中，系统会不断精确匹配用户所需的内容，从而方便用户在推荐结果中直接做出选择，提升用户选择效率。例如课程搜索、学生姓名搜索等。

7、联动模式

表单中有些信息是不适合全都平铺展开给用户的，很多信息是因为联动才出现的，它们具有出现的条件，因此我们可以考虑采用联动模式进行设计。

8、收纳模式

当某个表单项可让用户选择的选项很多，且有些信息是非高频使用信息时，适合收纳起来展示，当用户有需要时再打开。例如更多颜色选择。

9、默认值模式

当表单中的某些信息用户在选择时基本都为一个值时，可以采用默认值设计模式，这有利于减少用户填写时长。例如女孩子身高基本取值在155厘米~165厘米之间。

10、禁用模式

当一个操作因某种场景不可被用户使用的时候，需要有明确的视觉化展示，那么采用禁用模式就很好呢。

例如，弹窗表单的必填字段没填完之前，「确定」按钮是禁用的。

11、首页模式

首页模式是针对页面层级很深的系统。当页面层级很深，需要让用户可以快速找到页面出口的时候，所使用的的模式。

一般在系统顶部导航上会有首页的图标，引导用户去点击。

12、多条件查询模式

当用户要对视图上的数据进行联合查询时，可以采用多条件查询。多条件查询可以满足不同用户的不同需求，进而帮助用户高效检索数据。

设计模式的意义

那么，我们既然要去整理设计模式，就要知道设计模式的价值是什么。在此，我总结了构建设计模式的五大意义。

让数字界面具备体系化设计方案

没有设计模式的指导，体验设计师在设计B端界面时会有多种可能性：要么从需求出发、要么从经验出发、要么从想象出发，或者以产品经理的意见为主。

特别是对于新手设计师来说，这种情况就更加明显了。

还记得在没有梳理设计模式时，新手设计师在设计界面的时候各种奇奇怪怪的情况都出现了。

比如我见到过导航栏去了右边，我见到过设计了放大内容却没有设计缩小内容的，我见到过为了突出某列表格数据专门放大的，等等。这些不是不可以去做，而是站在设计模式的角度，这些做法很少见，不符合常见的设计方案。

而有了设计模式后，体验设计师在设计B端界面时，会先分析业务场景与用户场景，再选用合适的设计模式，最后验证设计模式是否合适该场景。

同时，体验设计师在遇到类似的场景时，会优先考虑一致的设计模式，保证产品用户体验的一致性。

如此往复，不但体验设计师提升了体系化的设计思维，产品也在潜移默化中具备了体系化的设计方案。

提升数字界面用户体验一致性

毫无疑问，设计模式可以提升产品界面的用户体验一致性，既有视觉方面的，也有交互方面的。

这里我举一个交互方面的例子。

某产品团队在列表页采用模糊搜索时，总是会出现自动搜索和人工搜索随意使用的情况。

虽然团队成员均知道模糊搜索的含义，可具体哪种场景该使用哪种交互模式，没人能讲明白，以致于出现随意用的情况。

于是体验设计师梳理了模糊搜索的设计模式，给出了自动搜索与人工搜索各自的适用场景。

至此，在采用模糊搜索时，团队成员不再手足无措，可以很轻松地确定模糊搜索的交互方式，并且体验设计师在设计原则中提出“一致性设计原则”，因此，两者结合起来用，就顺利地统一了整个产品中列表模糊搜索的交互体验。

可见，如果我们能不断抽取优秀的设计模式，那么人机交互会更加符合用户的内心期望。

促进团队成员在设计上的统一认知

建立设计模式库，并同步到产品组的每一位成员，包括产品经理、研发工程师、测试工程师等，那么在设计评审阶段，将有效提升大家对界面设计方案的一致性认知。

成员们不会再为自己的喜好提出各种意见，而将会给出更加有依据支撑的方案。

我们原来设计评审会上，与会者总是会对弹窗主次按钮的位置重复提出意见。

当有了企业级设计模式后，与会者基本不会再针对此问题反复提问，因为我们对设计模式的使用方式做了清晰地描述，文档就挂在网上，任何人都可以随时取用和查看。

还有比如我们也为表格紧凑模式、翻页器默认页数也交流过很多次，定下来以后，这个方法就不断沿用了。

提升体验设计师的设计效率

设计模式有一个显著的优势，其可以提升体验设计师的设计效率。

特别对于新项目来说，直接采用合适的设计模式（拿来即用），大大缩短了产品设计周期。（这一点真的是每次开个新产品，我就深深有体会）

虽然不断总结设计模式是一件费力且耗时的事情，但设计模式一旦建立，将极大提升工作效率，是一件非常有意义的事情。

设计师和我说：“以前拿到需求要思考半天界面该如何展示，现在设计模式都在脑海里，直接拿来就用，非常高效。”

正如《交互设计精髓4》中提到的：“一套全面的模式类目表可以帮助设计新手迅速且轻松地整合出协调的设计方案。”

帮助体验设计师成长

设计模式代表了团队在多年实战经验基础上总结出来的优秀设计成果。因此，对于每一位体验设计师来说，手中备一份设计模式文档，不时翻阅与学习，可以提升设计能力。

毫不夸张的说，见过设计模式和没见过设计模式的设计师，能力是会显著拉开的。

而使用过设计模式的设计师，其结构化思维也会更好。

最后的话

就我自己来说，我是设计模式的忠实追随者和拥护者。在我接触到设计模式后，打开了我的设计思路，此后我对如何提升数字界面用户体验产生了新的认知，并通过边总结边实践的方式，来验证自己的思考。

我认为，数字界面是一个舞台，但体验设计不可在之上随意舞蹈，需要遵循一定的规则，而这个规则就是设计模式。

由于设计模式是以用户为中心的最佳实践，因此其具备一定时期内的稳定性与生命力。

当然，设计模式并不是一成不变的，而是根据业务、技术、用户需求的变化而不断演进的，我们需要不断迭代与拓展设计模式。

· · · END · · ·

最后要说，《B端体验设计：企业级视角的系统化方法》一书对设计模式及B端体系化体验设计还讲了好多，想在2023年的年终总结中将自己的汇报提升几个级别，或者想在2024年把B端产品体验做好/提升职场竞争力的小伙伴绝对不容错过。

另外，现在购买书籍还免费赠送27次主题分享+一次重磅直播，赶紧下单吧。

原价108，限时59

现在下单购买有福利哦，看这儿 ↓ ↓ ↓

具体福利见下图

继续滑动看下一个