在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬 浮层 、 弹窗 、抽屉等等。

B端设计 规范

5000 字干货！超全面的B端设计规范总结 不知不觉已经深耕在 B 端这个领域 3 年有余，很多人接触过 B 端后会觉得乏味，因为 B 端的设计在视觉上并没有 C 端那么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。

阅读文章 >

在面对数量庞大的 B 端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。

本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。

网页是一种可视化的 UI 界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。

在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。

不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。

而 B 端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。

如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。

早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。随着网页技术的发展，异步处理（AJAX 数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。

简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是 HTML 的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。

比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。

所以，在 B 端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。

其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。

首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。

浮层组件的设计

从4个部分，聊聊B端产品中的浮层组件的设计思考 浮层是在页面上方展示的浮层容器，可展示文本、按钮、列表、标签、表单项等内容，在 B 端产品中有着非常广泛的应用。

阅读文章 >

浮层是比较底层的形式，其展示的内容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。

比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。

浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。

如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。

弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。

弹窗设计

4 个方面层层递进，分析如何设计 B 端产品的弹窗 文章结构 1. 弹窗的定义 2. 常见的弹窗 3. 弹窗的分类：模态弹窗/非模态弹窗 （概念解析、常见案例、何时使用） 4. 对话框/抽屉 （概念、常见类型、案例、尺寸、如何使用、抽屉还是弹窗） 说说这篇文章的由来 在 2021 年终总结时发现这些年读了很多的文章，虽

阅读文章 >

基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。

而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。

之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以 Behance 或者花瓣等应用，都采用窗口模式加载新页面。

或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。

高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。

因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。

如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需要用户强行关注，就可以使用这种模式展示。

最后，就是最难选择，也最容易和其它组件搞混的抽屉了。

B 类产品细节设计指南（二）：对话框 vs 抽屉 对话框和抽屉都是在当前页面之上覆盖出现的组件，让用户在不离开主路径的情况下，查看信息/提示/反馈，或快速执行某些操作。

阅读文章 >

抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。

比如下方案例中，Jira 左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。

和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。

比如 Teambition 案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。

它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。

所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。

以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。如果有关于这部分的实际项目疑问，也可以在下方留言。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬 浮层 、 弹窗 、抽屉等等。

B端设计 规范

5000 字干货！超全面的B端设计规范总结 不知不觉已经深耕在 B 端这个领域 3 年有余，很多人接触过 B 端后会觉得乏味，因为 B 端的设计在视觉上并没有 C 端那么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。

阅读文章 >

在面对数量庞大的 B 端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。

本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。

网页是一种可视化的 UI 界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。

在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。

不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。

而 B 端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。

如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。

早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。随着网页技术的发展，异步处理（AJAX 数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。

简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是 HTML 的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。

比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。

所以，在 B 端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。

其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。

首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。

浮层组件的设计

从4个部分，聊聊B端产品中的浮层组件的设计思考 浮层是在页面上方展示的浮层容器，可展示文本、按钮、列表、标签、表单项等内容，在 B 端产品中有着非常广泛的应用。

阅读文章 >

浮层是比较底层的形式，其展示的内容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。

比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。

浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。

如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。

弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。

弹窗设计

4 个方面层层递进，分析如何设计 B 端产品的弹窗 文章结构 1. 弹窗的定义 2. 常见的弹窗 3. 弹窗的分类：模态弹窗/非模态弹窗 （概念解析、常见案例、何时使用） 4. 对话框/抽屉 （概念、常见类型、案例、尺寸、如何使用、抽屉还是弹窗） 说说这篇文章的由来 在 2021 年终总结时发现这些年读了很多的文章，虽

阅读文章 >

基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。

而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。

之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以 Behance 或者花瓣等应用，都采用窗口模式加载新页面。

或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。

高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。

因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。

如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需要用户强行关注，就可以使用这种模式展示。

最后，就是最难选择，也最容易和其它组件搞混的抽屉了。

B 类产品细节设计指南（二）：对话框 vs 抽屉 对话框和抽屉都是在当前页面之上覆盖出现的组件，让用户在不离开主路径的情况下，查看信息/提示/反馈，或快速执行某些操作。

阅读文章 >

抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。

比如下方案例中，Jira 左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。

和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。

比如 Teambition 案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。

它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。

所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。

以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。如果有关于这部分的实际项目疑问，也可以在下方留言。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

毕业季刚过，马上就迎来一波求职热潮了。想求职跳槽的设计师，这段时间都想多学点，为作品集增加竞争力。

2022 年设计师学什么最吃香？

无论是视觉设计师还是 UI 设计师 ，3D 已经成为大家绕不开的门槛：

京东和天猫的开屏页

除了电商平台，3D 风格也逐渐占据 UI 的一席之地：

最近求职的设计师应该也发现了，掌握 C4D 已经成为加分项甚至必备项：

作为一个体量庞大，知识点繁杂的软件，如何在短时间内上手 C4D，学完能直接应用到工作中呢？

《3D 轻拟物插画特训营》第 5 期来了！

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

课程开设了 4 期，完全零差评！到底有多好，直接看真实学员反馈：

零基础也能学会！彻底告别建模的恐惧！

为了让零基础的同学打好基础，小哈老师特意录制了 25 节基础录播课，价值 150 元，报名即可免费观看。

保姆式教学！作业点评超详细！

学完就能用到工作中，给作品集加分！

*以上学员反馈全部真实可查

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

如何用一个课程，同时掌握 2 大技能？ 课程中总计有 6 组实战项目带练+练习+作业讲解，每 2 组项目为一对，主题相同，但是分别会以轻拟物化插画 和 3D 插画来进行呈现，在这过程中，你不仅能够循序渐进掌握相应的技能，而且能在转换之间，两相对照，更加深入理解 2D 轻拟物插画和 3D 插画之间的关联和差异。

来看看你最关心的课程大纲和上课时间：

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

2D & 3D 双绝的张小哈 建筑的专业背景，帮助张小哈将不少技能点加在了「结构性」和「条理性」上，从她入行直到现在，从作品的变化到学习成长，都非常均匀规整地逐步提升。

现如今，当你审视她的作品的时候，你会发觉她的作品是没有明显的「偏科」或者说缺陷的，色彩丰富又讨喜，构图严谨且规整，氛围协调又舒适，角色活泼且可爱，2D 轻拟物插画质感妥帖，3D 建模场景结构合理光影正好。

找准对的方向，然后认真吃透，大概是张小哈最令人钦佩的地方。而这，也是这次课程的底气所在。

张小哈作品 在 Dribbble 和 Behance 超火的 Living in Space 系列 2D & 3D 插画：

小镇生活系列：

为抖音综艺栏目「羽仔的花园」做的插画+文字主视觉设计：

租房产品页面设计：

未来之家系列插画：

一双手的故事 系列作品：

I love it when you 系列插画：

学员作品

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；万一错过直播课也别担心，直播录屏永久可回放

大家好呀~这里是和大家一起进步的南清音~最近几天看到“糖豆人免费”的消息冲上热搜，借此机会，今天给大家分享几个摸鱼必备放松身心的小游戏！在休闲娱乐的同时还能给自己的设计带来一些灵感。

上期回顾：

边玩边学第二弹！5个设计师必玩的在线小游戏 哈喽大家好，这里是和大家一起进步的南清音~今天继续推荐大家5款设计师玩的小游戏，让大家在玩的同时也可以学到设计知识！

阅读文章 >

《星季》 推荐指数：3 颗星

《星季》作为一款休闲类跑酷小游戏，它的玩法十分简单。只需要轻触屏幕跳跃，如果想要飞起来的话，就长按屏幕就好啦！但是要注意躲避黑色的光芒，被吞掉你就失败了。游戏虽然很简单，但是游戏内的细节刻画很棒，比如偶尔划过的流星，飘浮的云朵，随风飘扬的花儿等等，越来越多彩色在这个星球出现，悠扬的画面随着你的往前，逐渐变得丰富起来，原本的荒芜变成了的生机勃勃，体验感非常好~

《彼得兔：隐藏的世界》 推荐指数：4 颗星

彼得兔从 1902 年出版至今已经有 120 年的历史了，是英国乃至全世界儿童优秀漫画图书之一。现如今，我们除了可以通过书本看到彼得兔妙趣横生的故事，还能通过游戏来体验了，《彼得兔：隐藏的世界》就是其衍生产品！作为一款治愈休闲的绘本寻物探索游戏，它玩法很简单，通过寻找建筑材料来装扮庄园，不断解锁新的村民，送给他们喜欢的东西提升好感度，让村民搬到庄园来居住。整个游戏的画风就是原绘本风格，画面精美，在玩的过程中，仿佛是在看精美的绘本一样。

《绘真 妙笔千山》 推荐指数：4 颗星

这是一款解谜游戏，跟着剧情和提示走就很容易通关，游戏对原画的复刻非常细致。泛黄的色调营造出绢本的质感，再加上“青绿”的点缀，使人乍一看无法分辨究竟是游戏页面还是原件。不过虽然说是复刻原画，但是其实还是不拘泥于原画的。为了将更多《千里江山图》原画景致收入有限的手机游戏界面，在对画面主要部分完全复刻的同时，游戏界面改变了透视方法，变散点透视为焦点透视，再增加纵深感，以现代观看习惯，使玩家“身临其境”。这种优质的游戏，大家可以来看一看！感受一下国风的美！

《我们相距十万光年》 推荐指数：3 颗星

《我们相距十万光年》是由白小白工作室开发的独立游戏，讲述了一颗小星星在宇宙中的旅途和寻觅的过程。游戏玩法很简单，只需要控制光线在夜空中从一颗星星飞向另一颗星星，游戏记录总的飞行距离，很简单但又很有挑战性。游戏画面致敬了梵高的《星月夜》，油画般的画面描绘出各种大小的恒星，深蓝色的夜空宁静而优美。游戏将《星月夜》这幅作品的两种线条风格，一是弯曲的长线，一是破碎的短线完美的表现了出来，非常适合消遣。

《纸境》 推荐指数：5 颗星

《纸境》是一款以日式书立形式巧妙构建而成的冒险游戏，玩家只需借着翻页/滑动等简单的动作来解开各式的谜题并发现隐藏的秘密。该游戏还获得了 SXSW；IndieCade；SOWN 以及 Develop Showcase 等国际知名竞赛的提名。神奇的折纸画风让游戏看上去别具一格，游戏中蕴含多个不同章节，且每个章节开启的方式也不尽相同，画面层次感强烈，柔光立体感突出，“意境”贯彻游戏的始终，是一款体验感极强的游戏。

今天的 游戏推荐 就到这里结束啦，等下次找到更棒的之后，咱们再见吧~

大家好呀~这里是和大家一起进步的南清音~最近几天看到“糖豆人免费”的消息冲上热搜，借此机会，今天给大家分享几个摸鱼必备放松身心的小游戏！在休闲娱乐的同时还能给自己的设计带来一些灵感。

上期回顾：

边玩边学第二弹！5个设计师必玩的在线小游戏 哈喽大家好，这里是和大家一起进步的南清音~今天继续推荐大家5款设计师玩的小游戏，让大家在玩的同时也可以学到设计知识！

阅读文章 >

《星季》 推荐指数：3 颗星

《星季》作为一款休闲类跑酷小游戏，它的玩法十分简单。只需要轻触屏幕跳跃，如果想要飞起来的话，就长按屏幕就好啦！但是要注意躲避黑色的光芒，被吞掉你就失败了。游戏虽然很简单，但是游戏内的细节刻画很棒，比如偶尔划过的流星，飘浮的云朵，随风飘扬的花儿等等，越来越多彩色在这个星球出现，悠扬的画面随着你的往前，逐渐变得丰富起来，原本的荒芜变成了的生机勃勃，体验感非常好~

《彼得兔：隐藏的世界》 推荐指数：4 颗星

彼得兔从 1902 年出版至今已经有 120 年的历史了，是英国乃至全世界儿童优秀漫画图书之一。现如今，我们除了可以通过书本看到彼得兔妙趣横生的故事，还能通过游戏来体验了，《彼得兔：隐藏的世界》就是其衍生产品！作为一款治愈休闲的绘本寻物探索游戏，它玩法很简单，通过寻找建筑材料来装扮庄园，不断解锁新的村民，送给他们喜欢的东西提升好感度，让村民搬到庄园来居住。整个游戏的画风就是原绘本风格，画面精美，在玩的过程中，仿佛是在看精美的绘本一样。

《绘真 妙笔千山》 推荐指数：4 颗星

这是一款解谜游戏，跟着剧情和提示走就很容易通关，游戏对原画的复刻非常细致。泛黄的色调营造出绢本的质感，再加上“青绿”的点缀，使人乍一看无法分辨究竟是游戏页面还是原件。不过虽然说是复刻原画，但是其实还是不拘泥于原画的。为了将更多《千里江山图》原画景致收入有限的手机游戏界面，在对画面主要部分完全复刻的同时，游戏界面改变了透视方法，变散点透视为焦点透视，再增加纵深感，以现代观看习惯，使玩家“身临其境”。这种优质的游戏，大家可以来看一看！感受一下国风的美！

《我们相距十万光年》 推荐指数：3 颗星

《我们相距十万光年》是由白小白工作室开发的独立游戏，讲述了一颗小星星在宇宙中的旅途和寻觅的过程。游戏玩法很简单，只需要控制光线在夜空中从一颗星星飞向另一颗星星，游戏记录总的飞行距离，很简单但又很有挑战性。游戏画面致敬了梵高的《星月夜》，油画般的画面描绘出各种大小的恒星，深蓝色的夜空宁静而优美。游戏将《星月夜》这幅作品的两种线条风格，一是弯曲的长线，一是破碎的短线完美的表现了出来，非常适合消遣。

《纸境》 推荐指数：5 颗星

《纸境》是一款以日式书立形式巧妙构建而成的冒险游戏，玩家只需借着翻页/滑动等简单的动作来解开各式的谜题并发现隐藏的秘密。该游戏还获得了 SXSW；IndieCade；SOWN 以及 Develop Showcase 等国际知名竞赛的提名。神奇的折纸画风让游戏看上去别具一格，游戏中蕴含多个不同章节，且每个章节开启的方式也不尽相同，画面层次感强烈，柔光立体感突出，“意境”贯彻游戏的始终，是一款体验感极强的游戏。

今天的 游戏推荐 就到这里结束啦，等下次找到更棒的之后，咱们再见吧~

毕业季刚过，马上就迎来一波求职热潮了。想求职跳槽的设计师，这段时间都想多学点，为作品集增加竞争力。

2022 年设计师学什么最吃香？

无论是视觉设计师还是 UI 设计师 ，3D 已经成为大家绕不开的门槛：

京东和天猫的开屏页

除了电商平台，3D 风格也逐渐占据 UI 的一席之地：

最近求职的设计师应该也发现了，掌握 C4D 已经成为加分项甚至必备项：

作为一个体量庞大，知识点繁杂的软件，如何在短时间内上手 C4D，学完能直接应用到工作中呢？

《3D 轻拟物插画特训营》第 5 期来了！

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

课程开设了 4 期，完全零差评！到底有多好，直接看真实学员反馈：

零基础也能学会！彻底告别建模的恐惧！

为了让零基础的同学打好基础，小哈老师特意录制了 25 节基础录播课，价值 150 元，报名即可免费观看。

保姆式教学！作业点评超详细！

学完就能用到工作中，给作品集加分！

*以上学员反馈全部真实可查

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

如何用一个课程，同时掌握 2 大技能？ 课程中总计有 6 组实战项目带练+练习+作业讲解，每 2 组项目为一对，主题相同，但是分别会以轻拟物化插画 和 3D 插画来进行呈现，在这过程中，你不仅能够循序渐进掌握相应的技能，而且能在转换之间，两相对照，更加深入理解 2D 轻拟物插画和 3D 插画之间的关联和差异。

来看看你最关心的课程大纲和上课时间：

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放

2D & 3D 双绝的张小哈 建筑的专业背景，帮助张小哈将不少技能点加在了「结构性」和「条理性」上，从她入行直到现在，从作品的变化到学习成长，都非常均匀规整地逐步提升。

现如今，当你审视她的作品的时候，你会发觉她的作品是没有明显的「偏科」或者说缺陷的，色彩丰富又讨喜，构图严谨且规整，氛围协调又舒适，角色活泼且可爱，2D 轻拟物插画质感妥帖，3D 建模场景结构合理光影正好。

找准对的方向，然后认真吃透，大概是张小哈最令人钦佩的地方。而这，也是这次课程的底气所在。

张小哈作品 在 Dribbble 和 Behance 超火的 Living in Space 系列 2D & 3D 插画：

小镇生活系列：

为抖音综艺栏目「羽仔的花园」做的插画+文字主视觉设计：

租房产品页面设计：

未来之家系列插画：

一双手的故事 系列作品：

I love it when you 系列插画：

学员作品

报名即可免费领取 价值百元的 25 节 C4D 基础录播课 ！

课程原价 499 元，限时特惠价 399 元！

之后立刻恢复原价，想学的抓紧啦！

移动端微信扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail

注：报名后请添加客服微信进课程群；万一错过直播课也别担心，直播录屏永久可回放

大家好，我是和你们聊设计的花生。

之前向大家推荐了 5 款经典 英文字体 的免费替代字体，受到了很多小伙伴的喜爱。但上次推荐的字体都是英文无衬线体，今天就继续为大家推荐 5 款高质量的英文衬线字体，它们都是免费可商用的，可以作为很多需要付费的经典英文衬线字体的替代，一起来看看吧~

今天就大家推荐 5 款经典西文字体的免费可商用替代字体，它们的字体风格与原版相似，字形齐全，质量也非常高，用来替代 Helvetica、DIN 这样经典的西文字体进行排版设计完全没有问题。

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！ 大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？

阅读文章 >

Cinzel Cinzel 是一款灵感来源于古罗马铭文的全大写字体，保留了古典铭文的比例特征，与著名字体 Trajan 的风格非常相似，并更加精致现代。Cinzel 分为 Regular 和 Decorative 两款字形，各有 6 个字重，字体气质高贵典雅，具有历史的厚重感。

Cormorant Cormorant 是一款出色的全能衬线字体，适用于印刷媒体和在线媒体等各种场景。字体包内有 45 个字体文件，涵盖 Cormorant、Cormorant Garamond、Cormorant SC、Cormorant Infant 等 9 种样式和 5 种粗细，可作为经典旧风格衬线体 Garamond 的免费可商用替代。

新手如何做好字体管理？快来看资深设计师的的4点建议 大家好，我是和你们聊设计的花生~ 与字体相关的话题一直都是社群小伙伴讨论的热点，比如免费可商用的字体哪里找、如何识别陌生字体并找到相应资源、下载的字体太多了有没有什么好的管理工具、字体版权范围如何弄清楚等。

阅读文章 >

Playfair Display Playfair Display 是一款具有过渡时期衬线风格的字体，衬线细平而简短，与字体主体粗细对比十分明显，Playfair Display 有 6 个字重，且都带有对应的斜体，一共是 12 个字体样式。字体气质精致华丽，极具美感，可以作为经典过渡性衬线体 Baskerville 的免费可商用替代。

Butler Butler 是一款灵感来自 Dala Floda 和 Bodoni 的衬线字体，字体线条粗细对比极大，有比以往更为纤细的衬线；字体细节完全摒弃手写特征，整体呈现出现代几何的美感。Butler 包含 Regular 和 Stencil(漏字板)两种样式，各有 7 粗细，一共 14 个字体文件，适合海报、大标题、书籍和装饰性排版，可以作为经典“现代风格衬线体”Bodoni 的免费可商用替代。

这篇15000多字的文章，可能是最全面的字体基础知识大全 @不知语冰 ：本篇文章将介绍一些关于字体的基础知识，主要会介绍一些常见术语的含义还有英文、中文字体常见的分类方式，另外简单介绍一下各平台下字体渲染的相关的问题，还有标点使用和排版规范。

阅读文章 >

Roboto Slab 上期为大家推荐了可以作为 Helvetica 免费可商用替代的 Roboto，而 Roboto Slab 就是在 Roboto 的基础上修改而来的粗衬线体字体。Roboto Slab 字体气质复古怀旧，有 9 种字重可供选择，可以作为经典粗衬线体 Rockwell 的替代。

以上就是今天推荐的 5 款高质量免费可商用英文衬线字体，字体的文件都已经打包好了，下载链接见文末与文字开头的链接。我是花生，我们下期见~

大家好，我是和你们聊设计的花生。

之前向大家推荐了 5 款经典 英文字体 的免费替代字体，受到了很多小伙伴的喜爱。但上次推荐的字体都是英文无衬线体，今天就继续为大家推荐 5 款高质量的英文衬线字体，它们都是免费可商用的，可以作为很多需要付费的经典英文衬线字体的替代，一起来看看吧~

今天就大家推荐 5 款经典西文字体的免费可商用替代字体，它们的字体风格与原版相似，字形齐全，质量也非常高，用来替代 Helvetica、DIN 这样经典的西文字体进行排版设计完全没有问题。

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！ 大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？

阅读文章 >

Cinzel Cinzel 是一款灵感来源于古罗马铭文的全大写字体，保留了古典铭文的比例特征，与著名字体 Trajan 的风格非常相似，并更加精致现代。Cinzel 分为 Regular 和 Decorative 两款字形，各有 6 个字重，字体气质高贵典雅，具有历史的厚重感。

Cormorant Cormorant 是一款出色的全能衬线字体，适用于印刷媒体和在线媒体等各种场景。字体包内有 45 个字体文件，涵盖 Cormorant、Cormorant Garamond、Cormorant SC、Cormorant Infant 等 9 种样式和 5 种粗细，可作为经典旧风格衬线体 Garamond 的免费可商用替代。

新手如何做好字体管理？快来看资深设计师的的4点建议 大家好，我是和你们聊设计的花生~ 与字体相关的话题一直都是社群小伙伴讨论的热点，比如免费可商用的字体哪里找、如何识别陌生字体并找到相应资源、下载的字体太多了有没有什么好的管理工具、字体版权范围如何弄清楚等。

阅读文章 >

Playfair Display Playfair Display 是一款具有过渡时期衬线风格的字体，衬线细平而简短，与字体主体粗细对比十分明显，Playfair Display 有 6 个字重，且都带有对应的斜体，一共是 12 个字体样式。字体气质精致华丽，极具美感，可以作为经典过渡性衬线体 Baskerville 的免费可商用替代。

Butler Butler 是一款灵感来自 Dala Floda 和 Bodoni 的衬线字体，字体线条粗细对比极大，有比以往更为纤细的衬线；字体细节完全摒弃手写特征，整体呈现出现代几何的美感。Butler 包含 Regular 和 Stencil(漏字板)两种样式，各有 7 粗细，一共 14 个字体文件，适合海报、大标题、书籍和装饰性排版，可以作为经典“现代风格衬线体”Bodoni 的免费可商用替代。

这篇15000多字的文章，可能是最全面的字体基础知识大全 @不知语冰 ：本篇文章将介绍一些关于字体的基础知识，主要会介绍一些常见术语的含义还有英文、中文字体常见的分类方式，另外简单介绍一下各平台下字体渲染的相关的问题，还有标点使用和排版规范。

阅读文章 >

Roboto Slab 上期为大家推荐了可以作为 Helvetica 免费可商用替代的 Roboto，而 Roboto Slab 就是在 Roboto 的基础上修改而来的粗衬线体字体。Roboto Slab 字体气质复古怀旧，有 9 种字重可供选择，可以作为经典粗衬线体 Rockwell 的替代。

以上就是今天推荐的 5 款高质量免费可商用英文衬线字体，字体的文件都已经打包好了，下载链接见文末与文字开头的链接。我是花生，我们下期见~

“虚假的事物可以被随意想象，唯有真实的事物才能被理解。”

我们在讲述自己设计作品的时候经常会说“我觉得”、“我感觉”这样的词，这些在旁人看来都是随意想象出来的。而那些被分析、论证、测试过的，经过时间沉淀的，可能就是牛顿说的真实的事物。

设计中视觉、交互都存在一定的规律和逻辑。当设计师能够熟练掌握一些相关的设计规律之后，无论做什么设计创新都会更加准确和有效率。 但总结这些规律需要大量的实际工作经验或行业案例分析、论证，完善一个逻辑，需要付出极大的精力。如果已经有人总结出了相关的设计规律和逻辑供我们学习，那我们就不要轻易错过。——《规律与逻辑-用户体验设计法则》

文字有点多，建议大家不用一次看完，可以利用碎片化时间看。

拓展阅读

超多干货！B 端表单设计的 3 大模式和 4 大使用场景 本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。

阅读文章 >

即时验证 尽管我们保证表单问题设置清晰，而且提供有意义的输入暗示，但总有些问题的答案不止一个。此时，直接反馈有助于再次确保用户的回答有效。这种实时沟通方式即为即时校验。

1. 确认

填写表单就是一次系统与用户之间的对话，用户可能不知道是否回答正确，那么确认他们的回答就显得非常重要。用户名就是一个常见的例子，用户不知道哪些用户名可以使用，所以只能不停地尝试，直到能被使用为止。这个过程中需要表单对用户提供帮助，告知那些是不能用那些是可用。

如果表单无法提供帮助，情况会变得很糟糕，用户需要不断的猜用验户名的同时还要不断输入证码，点击确定后才能知道是否能用。

2. 建议

系统反馈并不仅限于确认所提供的答案，还能提供回答建议。如果有一组特定答案都有效，但范围太广，无法设计成单一用户界面。

例如：我输入城市“武”会带出与“武”相关的城市，使用即时建议来帮助用户提供旅行目的地的有效答案；

3. 限制

有些问题没有明确定义的答案，但有明确定义的限制，在这种情况下，即时验证也能发挥作用。

例如：飞书添加会议室，备注最多 100 字符，输入框下方会显示计数器，以显示用户还能输入多少字符。 这类即时验证有助于避免由于超过输入限制而产生的潜在错误。

4. 最佳实践

即时确认最适合用于错误率高、或者有特定格式要求的问题； 即时建议最适合用于有大量可供选择有效答案的情况； 如果需要即时验证答案，应当在用户输完答案之后进行，不要在输入过程中进行； 如果有输入限制，应当采用实时、动态更新的方法传递输入限制。

多余输入 向用户提出的任何问题，用户都需要解析，形成答复，并在表单提供的地方输入答案。如果某个问题并非绝对必要，要么可以去除，要么可以在更好的时间或者位置提出，要么可以自动推断出答案。 提出的问题越少，用户可能越快越容易填完表单。

1. 去除问题

在满足用户需求或者商业目标的基础上，减少多余的输入框。

例如：N 年前我记得添加银行卡是需要选择所属银行的，现在只要输入银行卡号，所属银行就自动带出来了。

2. 智能默认

即在满足多数人需要的地方放置选择，来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数，加速表单完成过程。

一组单选按钮中预先选择了一项，这可能是最简单的默认选择形式。如果无法为大多数人提供合适和默认选项，智能默认就不能很好的发挥作用。

3. 个人性化默认

根据上一次的记录进行设置。

例如：因为疫情，学校需要隔天上报学生情况，第一次全部需要自己填写，第二次只需要填写很少一部分，其它选择都被记住了。

4. 最佳实践

仔细检查表单所有问题，去除多余的问题； 通过恰当设置满足多数人需要的默认选择，智能默认可以帮助用户回答问题； 用户会忽视默认选项，所以要确保默认选项符合多数人目标； 设置个性化默认选择，客户能更快完成表单，因为答案具有“粘性”。

额外输入 并非所有时候所有人都需要填写表单的所有输入框。很多情况下，几个简单的选项就能满足多数人需要。其他情况下，可以借助额外输入：即时增加、层叠加和循序渐进。

1. 即时增加

即时增加提供额外输入框给需要的人，同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。

例如：填写目标任务，可能大部分人都只需要填写一个首要目标，就可以继续往下操作。小部分人，需要添加多个目标，这类用户可以选择继续添加，也可以删除，但原始输入框不能删除。每位填表人至少填一个目标，即时增加并不阻碍完成这项主任务。

2. 叠层

层叠是显示额外选项的另一种方式，额外输入框出现在表单上方，就像电脑桌面上出现的对话框。 日历控件可能是最常见的例子，用户能够选择特定日期回答表单问题。

使用场景：

如果有必要占用专门的屏幕空间放置编辑窗格，而且页面的上下文对编辑任务也不重要，就可以考虑使用覆盖层编辑。

使用覆盖层时应该考虑的因素：

展后的编辑模块可能会有一部分伸到窗口可见范围之外。而覆盖层则可以保证编辑模块完全可见。 你希望为用户提供一个清晰的编辑区域。 用户不会频繁编辑的内容。与其让用户单击编辑链接、调整弹出式窗口位置、编辑、关闭窗口才能编辑一组数据项，不如在页面上为每一项都提供专门的编辑空间，让用户可以选择修改；要么，就让用户在上下文中编辑，从而节省处理覆盖层的时间。 被编辑的多个项是一个整体。在编辑一组数据项时，不应该让覆盖层遮住类似的数据项。由于上下文得到保持，用户在编辑过程中可以参照其它项的值。

3. 循序渐进

在个别情况下，额外输入可用来显示一组选项，其效果比显示一组典型的输入框更好。

这里说的其实就是分类，就像我们会衣服分为春夏秋冬，放到不同的箱子（柜子）里，这样找起来就会快捷很多。

4. 最佳实践

额外输入可以提供更多选项或者高级选项，满足有需要的用户，同时不妨碍不需要的用户； 如果需要显示大量额外输入，可以考虑采用层叠方式代替即时显示方式，避免网页跳动以及用户迷失方向； 确保层叠不会遮住帮助用户填写的输入框，确保用户仍然可以自行填写； 确保提供用户明确办法关闭或者取消模式叠层并返回表单。

基于选择的输入 弹性输入允许用户按照希望的方式回答问题，额外输入允许用户补充回答想回答的问题，而基于选择的输入根据对初始问题的回答要求用户继续回答。

用户有两个初始选项：要么选择支持，要么选择不支持。根据用户的回答，会出现一系列要回答的后续问题。出现什么输入取决于最初选择–因此称为基于选择的输入。

其实每一种基于选择的输入解决方案都有很明显的优缺点，为了免去大家自己摸索的烦恼，可用性公司 Etre 进行了一系列研究，测试了 8 种不同的基于选择的输入解决方案，这里只列举常用的 6 种。

1. 页级选择

把过程明确分为两步，这可能是解决表单中选择性输入问题最简单的方法。互联网上常见的做法是采用两个单独的页面。

第一页或者称为过程第一步–向用户显示初始选项。如果用户选择其中一个，就出现相关的选择性输入，取代初始选择。对多数用户而言，初始选择和相关输入之间关系明确，一旦做出初始选择，就无法查看并访问到未选选项，除非退出重来。

在测试中，页级选择出错数量较少，眼动仪参数表现较好，例如眼睛固定次数、总固定时长以及平均固定时长。

2. 水平选项卡

为避免出现跳转页面，水平选择卡也是一种不错的选择性输入方法。

把水平选项卡放在上方，用户可以浏览表单板块，并进入含有合适的基于选择的输入的部分。选项卡不仅显示了一组初始选项，而且还发挥了当前选择的强大指示作用。如果只考虑标准可用性指标，水平选项卡在所有测试中整体表现最佳，没有参加者出错，他们能够迅速完成任务，而且对这种设计打了满意度最高分。

3. 垂直选项卡

用户自上而下填写表单，但水平选项卡缺乏清晰性，为了弥补这一点，可将垂直选项卡直接放在扫描线之内。

就眼睛舒适度而言，垂直选项卡在测试中表现最佳。该方案中，眼睛固定总时长最短，平均固定时长最短，平均固定次数最少。像其他被测试的方案一样，垂直选项卡隐藏了无关的表单控件，只在用户需要时才出现。该因素似乎对眼睛舒适度和测试者完成表单的速度至关重要。在测试中垂直选项卡取得了近乎完美的满意分。可能因为显示的单选按钮和基于选择的输入彼此都很接近，而垂直选项卡确保了选择一个单选按钮后，眼睛不需要太多移动，设计更有效率。

在其他可用性测试中，垂直选项卡的表优于水平选项卡的。由于垂直选项卡在满意度、眼动指标和完成时长方面得分较高，我倾向于使用垂直选项卡，而不使用水平选项卡。

4. 下拉列表

水平选项卡和垂直选项卡都维持着独特的界面元素，每个选项卡对应一个初始选项。这样既能保持所有初始选项可见，而且会占用相当的屏幕区域。随着初始选项不断增加，这些方法往往无法保持很好的比例。而下拉列表利用菜单和分组框将所有基于选择的输入放在表单中的特定区域。尽管这种方法会隐蔽大部分初始选项，列表中一次只能显示一个选项，但使用单一控件可能会更好地传达初始选项的范围和影响。

和垂直选项卡一样，下拉列表解决方案隐藏了无关输入，仅在用户需要才会显示。也就是说，下拉列表中基于选择的输入对眼睛压力小，能迅速完成。 被测量的其他数据点中，下拉列表解决方案表现平均，满意度分数相对较高，而且 23 名参加者一共只犯了一个错误。因此，如果初始选项列表超过水平或垂直选项卡所能支持的范围，下拉列表基于选择的输入可能是安全方案。

5. 单选按钮下方显示

另一种基于选择的输入即时解决方案涉及到从各自额外输入中垂直分离初始选项。这种做法的优点在于能保持所有初始选项，以及这些选项中的个人选择始终可见。通过强烈视觉指示来表明初始选项和其额外输入之间的依赖关系，有助于更清晰地表明两者关系。

不过，如果人们改变选项、屏幕刷新来更改额外输入内容，页面跳转的效果会导致人们迷失方向，尤其是额外输入很长时。

像垂直选项卡一样，该解决方案的满意度也近乎完美，因为它显示的单选按钮和选择性输入在位置上非常靠近（视线是垂直的，不需要像水平选项卡左右移动）。然而，该解决方案也有缺点，因为所选单选按钮及其相关表单选项之间的视觉间隔会给用户带来更多视觉上的不适（需要深入体验可能才会有这种感觉）。

测试中也存在这种情况。用户尝试了初始单选钮中一些不同选项，分不清哪个选项是活动状态，也分不清与其基于选择的输入之间的关系。如果选择性选项的数量很多，这种现象更成问题，因为初始选项和额外选项之间的关系变得更不清晰。

6. 单选按钮内显示

与单选按钮下方显示的办法相似，单选按钮内显示的解决方案在初始选项内显示额外输入。如果额外输入很少（只有一两个）该方法可以保持初始选项的情境，同时又能在最相关的地方显示所需的选择性输入。因为显示的单选按钮及其选择性输入位置非常靠近，该解决方案的满意度也近乎完美，对眼睛压力小，能迅速完成。

但该方案不适合输入数量很多，和单选按钮下方显示类似，因为页面跳动加上初始选项移动两者之间的页面元素不断显示隐藏会造成交互迷失方向，用户会频繁困惑于哪个用户界面元素触发了哪套选项。

如果用户改变初始选项时，加入轻量级动画过渡可能会有助于弥补交互方向的迷失。

7. 最佳实践

如果每个初始选项的额外输入选项数量很多，那么页级别的基于选择的输入选项可能是最佳方案； 在综合可用性、满意度和眼动跟踪指标方面,垂直选项卡和水平选项卡的表现都不错； 如果选项比较多(4 或者 5 个以上)，而且每个选项都自带一套基于选择的输入，最好能针对额外选项采用下拉列表； 如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳方案。

谢谢大家观看~