兰亭妙微UI设计公司分享：在设计学校文艺汇演报名表单时，如何有效地实现基于选择的输入？本文探讨了隐藏非活动选项与显示非活动选项的设计方案，分析了页面级选项、水平Tab、垂直选项等多种形式的优劣及适用场景。
进入正题之前，大家可以先思考一下，以下情形大家会怎么做？
学校组织文艺汇演，老师、学生、家长可以任意组队报名表演节目。组队后，每个队伍都需要在学校教务系统上录入信息进行报名。
假如你是教务系统的设计师，你会怎么设计这个报名表单？
在上述案例中，对于“参与人员”这个信息，首先需要确定有哪几类人参加？其次再具体录入每一类的具体人员名称。比如：“三年5班队”表演的节目有40个人参加，其中只有老师和学生参加，那么老师分别是哪几位？学生又是哪几位？
那么根据对初始问题“有哪几类人参加？”的回答，要求继续回答“这几个人分别是谁？”，就是基于选择的输入。
基于选择的输入内容大体上可以分为两个部分：初始的选择、选择之后需要输入的内容，如下所示。
表单中基于选择的输入类型可选择的交互形式有很多种，那么在需求过程中，如何选择最适合的方式去进行设计？
表单基于选择的输入场景在B端产品中尤为多见。由于B端产品多为Web端，所以下列分析暂不考虑移动端的情况。
如果把基于选中的内容需要输入的选项称为活动的选项，那大致可分为两大类：隐藏非活动的选项、显示非活动的选项。以上三个案例均为隐藏非活动的选项类型。
显示所有未被选中选择的选择输入内容，会导致表单中出现大量无需用户处理的内容。除非用户需要这部分信息去辅助判断选择选项，否则不建议使用此类方法。
大部分设计方式都会通过隐藏非活动的选项，来降低输入过程中无效信息对用户的干扰。具体如何处理初始的选择和活动选项之间的关系，又可以分为以下几类：页面级选项、水平Tab、垂直选项、下拉选择、单选按钮下方显示、单选按钮内显示。
（1）页面级选项
把过程明确分为两步，这可能是解决表单中选择性输入问题最简单的方法。最常见的做法是采用不同的步骤进行表单内容的填写，如下：
对多数用户而言，初始选择和相关输入之间的关系明确，但一旦做出初始的选择，两者之间的联系会变得微弱。在第二步进行相关输入时，无法查看先前进行的初始选择。看上去这种方案比在当前页面完成所有输入任务的方式更慢。
但在实际测试中，通过该方案设计的表单，用户填写错误比较少，眼动测试参数表现也比较好（主要是眼睛固定的次数、总固定时长以及平均固定时长）。
（2）水平Tab
通过Tab的形式进行初始选择的区分，用户可以浏览表单的Tab，进入对应的Tab中进行选择输入的部分。例如：飞书的登录页。
Tab不仅作为一组筛选功能，还对选择之后输入的内容起到一个明显标题的作用。但大部分人都熟悉Tab作为导航的概念，对于Tab在表单中的应用可能会存在一定的歧义。比如Tab之间是否互斥？提交选择是针对表单中所有Tab还是当前选中的Tab？
对比以上两种设计形式，如果只从结果考虑用户的使用情况，水平Tab在测试过程中基本没有用户出错，并且可以快速完成任务。但根据页面级选项案例的眼动测试数据中会发现，用户浏览整个表单相比上面的方案所需要耗费更多的努力。
（3）垂直选项
从水平Tab方案中表现出来的眼动测试结果可以发现，其不符合用户自上而下的阅读模式。而垂直选项的方案则弥补了这一缺陷。如下图所示。
在选择选项之后，眼睛不需要做太多的移动，设计更有效率，如下方案例眼动数据所示。
（4）下拉选项
相比水平Tab和垂直选项，下拉选项在视觉上没那么独特。每一个选项对应一个初始选项，如下图所示。
下拉选项的解决方案利用选择后，输入的内容在下方特定的位置进行展示。所选选项可作为标题，更好的传达初始选项的范围和影响（看具体业务是否需要在表单中映射这个关系），上方案例中的映射关系就比较弱。
（5）单选按钮下方显示
展示所有选项，根据用户选择情况在下方显示具体需要选择输入的内容，如下图所示。
（6）单选按钮内显示
与单选按钮下方显示的办法类似，在初始选项内显示额外的输入内容。
基于选择的输入，在设计方案的选择中，需要考虑各个方面。
如果每个初始选项的额外输入选项数量很多，且同时存在其他需录入的信息时，那么页面级选项可能是最佳方案。虽然需要两个网页来拆分表单，但至少不会让用户产生困惑，也无需怀疑选项之间是否互斥。
垂直选项和水平Tab两个方案需要通过交互设计或者视觉设计来规避其互斥问题。
如果初始选项列表较长（4或者5个以上），并且每个选项都自带一套基于选择的输入，在设计时最好能针对额外选项采用下拉列表和视觉分组。
如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳的方案。但容易出现因选项切换而造成的页面跳动问题。
就整体而言，隐藏无关的输入项，可以减轻用户对表单的负担，帮助用户更快的完成表单内容。
最好能清晰的显示选项与基于选择的输入项之间的关系。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
知识科普
- 渐进式披露：按需展示高阶复杂功能，不一次性堆砌全部信息，降低用户认知负荷，适配新手渐进学习。
- 自我决定理论：产品设计满足用户自主性、胜任感、归属感三大心理需求，提升使用意愿与粘性。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
又到了分享界面改版优化的时候了，这次是近期C端学员做的体育场馆预约平台，主要用于在线预约羽毛球、网球、篮球等场馆。
下面是目前的设计图例：
学员作业
还是老规矩，我们从原设计的问题入手，然后逐步完成对它的改版优化。
问题分析：
问题的分析从不同维度入手，这里分享个最简单的分析方式，先从基础样式分析，再分析组件设计。
基础样式包含规范、字体、色彩、图片四个要素的分析，而组件设计则是检查样式的合理性为主。
首先基础样式的规范应用上，顶部状态栏和底部指示器、导航是没有太大问题的，所以我们可以直接进入下一个环节。
在字体应用上，问题就多起来了，主要还是特殊标题使用太多，且广告中的标题也和下方 UI 元素标题没有拉开差距，看起来就很别扭。而且大粗黑字体使用过多，使得信息权重被分散掉，没有对比性。
有问题的部分截图
在色彩层面，蓝色虽然是主色，但是使用过于频繁，且其它色彩的应用数量也过多，画面充斥了让人眼花缭乱的色彩，尤其色彩多的情况下图片色彩也丰富，外加一系列渐变色块，让场面变得更“错综复杂”。
使用的色彩过多
最后图片应用上，主要问题出在广告图里，图例和文字排版看起来很有年代感，加上瓷片区内的素材用图，和整体主体的关联性并不好。这里着重强调， 3D 拟人类图片素材的使用最好局限在特定运营活动物料里，不要作为正式的 UI 元素进行引用，怎么做效果都不会好。
接着分析组件样式，因为这次案例框架很简单，我们不用太多考虑组件排序依据还是产品问题，只需要每个组件孤立出来分析即可。
1 .首页顶部组件
主要问题就是广告图的设计，不符合当前应用的设计标准，字体用图排版都很简单。
2.快速入口组件
快速入口上下两排权重完全不同，虽然有大小的差异但依旧对比不够强烈，且色彩使用混乱。
3.瓷片区应用
两个页面都有瓷片区，布局过于接近，且没有实质性的内容全是装饰素材，非常影响点击欲望和观感。
4.常去场馆卡片
属于问题相对较小的模块，但标签的应用色彩不合理，而且标题也露不全，实际空间利用率没有必要的低。
5.列表卡片
列表卡片的主要问题还是和主色按钮有关，过于强调按钮的同时又要突出其它信息元素，就让卡片看起来非常聒噪，信息之间是会起冲突的。
6.底部导航
底部导航设计过于普通，且一般选项选中凸起只适合在首页选项中使用。中间添加按钮的尺寸过小，和两侧选项看起来不对齐，重心偏移。
以上就是对问题的简单总结，实际上改版就是围绕这些问题做出调整，你先分析得出问题，才能聚焦到具体设计的过程和细节。
基础规范是整体，而我们设计过程中大多从细节出发，所以我们对优化的内容解释就要反过来从组件开始。
1.顶部模块设计
首先调整顶部模块的设计，优化图例，使用比较突出的字体标题和更有冲击力的配图，符合运动类应用的主基调。同时因为之前主色用太多，这次顶部直接不加主色类背景。
2.快速入口的设计
快速入口设计上使用两种图标体系，上方用偏扁平插画型的风格（素材示意），下方用面性图标风格，弱化它们的权重。同时第二个页面的快速入口使用摄影图型图标，避免一直出现不同风格的图标。
3.瓷片区设计
瓷片区做大就需要有内容展示，但这些主体值得展示的内容并不是太多且需要那么大空间，所以缩小尺寸不会让设计那么难处理，也让画面更精致一点。
4.其它模块设计
因为首页上方已经有很花哨的模块了，所以常去场馆就不应该再花哨下去，可以务实点的设计，不再用复杂的外边框套娃。
第二个页面其它模块相对简单，拼团功能又重要所以可以突出它用包边型的组件设计。
5.列表模块设计
两个页面下方的列表模块，都移除原来主色的按钮，只保留关键信息，让卡片视觉看起来更简约和谐一点。
6.底部导航栏设计
放大中间的按钮，同时优化第一个选项选中的设计，可以更突出（时间够就做LOGO进去了）更强调选中。
完成这些处理以后，最后合并起来可以整体再调整一番进行最终输出。我们可以看看下面改版前后的对比，你们可以自己感受是否有差异：
这是纯视觉方向的优化，在新手阶段，不要过度去使用色彩和字体，实现样式的落差要通过组件样式和图片、素材应用的差异来塑造。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 组件 | 选择逻辑 | 核心特点 | 生效方式 | 最佳使用场景 |
|---|---|---|---|---|
| 开关 | 二元独立切换 | 单功能、无关联 | 操作立即生效 | 单独功能开启 / 关闭 |
| 复选框 | 可多选、可全不选 | 同组关联、支持全选半选 | 多为统一确认生效 | 关联选项批量勾选 |
| 单选按钮 | 互斥单选、必选其一 | 组内唯一、排他选择 | 选定即锁定选项 | 多选项只能选一个 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
登录页不只是入口，更是认知与信任的第一触点。本文系统梳理12种登录页设计切入点，从色彩、构图到情绪表达，揭示如何通过界面设计实现用户引导、品牌传达与转化效率的协同优化，是一次关于“界面战略”的深度解析。
我们设计师是不是最害怕众口难调，今天兰亭妙微UI设计公司，跟大家分享登录页的12种设计切入点，相信总有一款会入甲方爸爸的心。
作为设计师，我们常常面临一个窘境：要面对各式各样客户审美的挑剔，有时候被虐的都怀疑人生。
但找参考时，思维又容易被局限在常见的几种形式里，我通过分析大量优秀的登录页，总结了12个高级的设计切入点，希望能为你打开新思路。
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
通过以上12个案例的系统性拆解，我们发现B端登录页的设计可以有如此丰富的切入点。
它绝不仅仅是摆放表单的简单任务，而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。
希望这10个切入点的详细分析，能成为您应对登录页设计挑战的灵感源泉和实用工具箱。
一个高级的设计，其最高境界是让用户感觉不到“设计”的存在，却能高效、愉悦地完成目标，并对品牌留下积极而深刻的印象。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
参考价值：金融科技类产品的深色模式设计、数据呈现方式与交互逻辑，都有很高的借鉴意义。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com