前 Meta AI 团队创立的 Hero 公司,推出专利技术 AI Autocomplete SDK,能实时预测任务所需全部参数,输入 “订机票” 即刻呈现所有选项,让交互速度提升 10 倍、成本大降。这篇文章深入解析这项革命性技术的工作原理、应用场景与商业价值,探讨它能否成为未来 AI 应用的标配,带你看懂人机交互的下一场变革。
你有没有想过,为什么和 AI 聊天总感觉像在玩猜谜游戏?你说想订机票,AI 问你去哪儿。你说去纽约,它问什么时候出发。你说下周三,它又问几点。你说早上,它接着问要直飞还是转机,经济舱还是商务舱,要不要托运行李。这种来回问答的过程让人抓狂,就像是在玩一场永无止境的”二十个问题”游戏。更糟糕的是,有时候你都不知道 AI 需要什么信息,只能等它一个一个问。这种交互方式看似自然,实则效率低下,完全违背了 AI 应该让我们生活更简单的初衷。
前 Meta AI 团队成员创立的 Hero 公司刚刚发布了一项专利技术,可能会彻底改变这种局面。他们推出的 AI Autocomplete SDK 不是简单的自动补全功能,而是一个能够实时预测并呈现完成任务所需全部信息的系统。想象一下,当你开始输入”订机票”的时候,屏幕上立刻出现所有相关参数:出发地、目的地、日期、时间、航空公司、座位偏好、行李选项等等,你只需要填写或选择就好,不需要等 AI 一个一个问你。这听起来像是一个小改进,但实际上它可能会让 AI 交互速度提升 10 倍,成本降低 10 倍,并且为未来的增强现实设备奠定基础。
Hero 不仅将这项技术用在自己的助手应用中,还通过 SDK 向其他公司开放。这意味着我们可能很快就会在各种应用中看到这种全新的交互方式。而且,他们刚刚获得了 Forerunner Ventures 领投的 300 万美元追加投资,这是在去年 400 万美元种子轮之后的又一次资本认可。我深入研究了这项技术后发现,它的影响远比表面看起来要深远得多。
这个现象背后反映的是当前 AI 交互方式的根本缺陷。大语言模型虽然能理解自然语言,但它们并不知道用户想要完成什么任务需要哪些具体信息。就像 Hero 的 AI 工程师 Saharsh Vedi 说的:”现在的问题是,负担都在用户身上,他们需要思考 AI 需要什么信息。”这完全颠倒了技术服务人类的关系。

我自己在使用 AI 工具时也深有体会。比如用 AI 生成图片,我经常需要反复调整提示词,尝试不同的描述方式,才能得到满意的结果。有时候我花在琢磨提示词上的时间,比直接用传统工具做图还要长。更令人沮丧的是,即使你精心设计了提示词,AI 也可能遗漏某些重要细节,导致结果不符合预期。然后你又得重新生成,这不仅浪费时间,对于按次收费的服务来说,还意味着额外的成本。
当前主流的 AI 应用都试图通过各种方式解决这个问题。有些添加了建议按钮,提供预设的提示词模板。有些使用引导式问答,一步步收集用户需求。还有些像 Adobe 的 Firefly 应用,把提示词拆分成多个部分,比如创作音乐时分别输入情绪、风格和用途。这些方法都在一定程度上改善了用户体验,但都没有从根本上解决问题:用户仍然需要主动思考和输入信息,AI 仍然处于被动等待的状态。
Hero 的方法则完全不同。他们不是让 AI 更聪明地问问题,而是让系统主动预测并呈现完成任务所需的全部信息。这种思路的转变看似简单,实则颠覆了整个交互范式。就像创始人 Brad Kowalk 说的:”我们基本上意识到,你在互联网上能做的任何事情,都只是一系列参数。一旦你看到了这一点,就很难再忽视它。”这句话听起来简单,但它揭示了一个深刻的洞察:无论多么复杂的任务,本质上都可以分解为一组参数,而这些参数是可以预测和呈现的。
AI Autocomplete 的核心理念是前置加载所有必要信息,而不是通过反复问答来收集。当你开始输入或说话时,系统会实时更新界面,显示完成这个动作所需的所有参数。这不是简单的文本补全,而是一个理解任务结构、预测所需信息、动态呈现选项的智能系统。
拿订机票这个例子来说。在传统的 AI 助手中,你可能需要经历这样的对话:你说”我想订机票”,AI 问”您要去哪里?”,你说”纽约”,AI 问”什么时候出发?”,你说”下周三”,AI 问”您希望几点的航班?”,你说”早上”,AI 问”经济舱还是商务舱?”,你说”经济舱”,AI 问”需要托运行李吗?”,以此类推。整个过程可能需要十几轮对话,每次都要等待 AI 的回应。如果你在某个环节说得不够清楚,或者 AI 理解错了,还得重新来过。

但在 Hero 的 AI Autocomplete 系统中,当你输入”订机票”的瞬间,屏幕上就会出现所有相关字段:出发地、目的地、出发日期、出发时间、航空公司偏好、返程日期、座位类型、行李选项等等。你可以随时停下来,只填写你知道的信息,然后发送查询。系统会根据你已经提供的信息,智能地建议或填充其他字段。你不需要等待 AI 一个一个问你,所有信息都在你眼前,你完全掌控着交互的节奏。
这种方法的优势是多方面的。第一,速度快。Hero 声称可以让操作速度提升 10 倍,因为省去了大量来回对话的时间。第二,成本低。每次 AI 的响应都需要服务器计算,减少对话轮次意味着大幅降低运营成本。Kowalk 特别强调了这一点:”因为涉及的消息更少,规模化运营的公司可以节省服务器成本。”第三,用户体验更好。你不会感觉自己在被 AI 审问,而是在一个清晰的框架内主动提供信息。
我特别欣赏 Hero 工程师 Vedi 说的那句话:”希望我们回头看时,几乎不记得’提示词’这个概念。”这体现了他们的雄心:不是改进提示词,而是让提示词成为历史。在他们的愿景中,未来的 AI 交互应该是结构化的、可预测的、高效的,而不是开放式的、充满不确定性的对话。
AI Autocomplete 的应用场景远比订机票更广泛。Hero 在发布时特别强调了几个重要领域,每个都有可能被这项技术彻底改变。
搜索和电商是最直接的应用场景。现在在电商平台搜索商品,你需要输入关键词,然后在成百上千的结果中筛选,使用各种过滤器来缩小范围。这个过程既费时又费力。但如果有了 AI Autocomplete,当你输入”咖啡”时,系统立刻显示出品牌、烘焙程度、包装规格、配送时间、订阅频率等参数。你可以快速选择你想要的选项,甚至可以设置”每月配送”这样的重复订单。Hero 展示的咖啡订购例子就很好地说明了这一点:不仅可以快速完成当前订单,还能轻松设置定期订购,就像你说”每个月”一样简单。

媒体生成是另一个会被改变的领域。我之前提到过用 AI 生成图片时需要反复调整提示词的痛苦。AI Autocomplete 可以在你开始输入时就实时展示各种参数:主体、动作、风格、光线、相机角度、分辨率等等。你可以从这些选项中选择,而不是试图用文字准确描述你想要的效果。这不仅能激发创意,让你看到自己可能没想到的选项,还能显著减少生成次数,从而降低服务器成本。对于视频生成这种计算密集型任务来说,减少迭代次数的意义更加重大。
客户服务和企业表单填写也是重要应用场景。现在的客服聊天机器人通常需要通过一系列问答来收集信息,比如你的订单号、问题类型、联系方式等等。这个过程对用户来说很繁琐,对企业来说也低效,因为经常需要后续跟进来补充缺失的信息。有了 AI Autocomplete,聊天机器人可以根据用户的初始问题,立即呈现所有相关字段,引导用户一次性提供完整信息。这既节省了用户时间,也降低了企业的运营成本。
我认为这项技术最具潜力的应用可能还没有被充分认识到。比如在教育领域,AI Autocomplete 可以帮助学生构建更好的学习查询,展示他们可能没想到的相关主题和角度。在医疗领域,它可以帮助患者更准确地描述症状,提供结构化的问诊表单。在法律、金融等专业服务领域,它可以帮助非专业人士更有效地表达需求,获取更精准的服务。这些场景的共同点是:专业性强、信息复杂、普通用户难以准确表达需求。AI Autocomplete 恰好可以弥合这个知识鸿沟。
Hero 的 AI Autocomplete 不仅改变了用户体验,还开创了一种全新的广告模式。这让我感到特别兴奋,因为它解决了自然语言界面商业化的一个核心难题:如何在对话式交互中自然地融入广告,而不破坏用户体验?
传统的搜索广告模式是基于关键词和搜索结果的。你在 Google 搜索”咖啡机”,顶部会显示付费广告。这种模式在图形界面中运作良好,但在纯对话界面中却很难实现。你总不能让 AI 助手在回答问题的中途突然推销产品吧?那会让对话变得非常生硬和令人反感。
Hero 的方法则巧妙得多。在 AI Autocomplete 系统中,品牌可以通过三种方式出现:第一,类似 Google Ads,品牌可以付费成为决策过程中的优先建议选项。比如在订咖啡的例子中,Peet’s Coffee 可以付费让自己出现在品牌选择列表的前面。第二,品牌可以建议互补产品,添加到当前订单中。比如在你订咖啡时,建议搭配某款点心或咖啡杯。第三,品牌可以从更高的重复购买率中受益,因为在 AI Autocomplete 系统中,设置定期订单就像说”每个月”一样简单。

我认为这种广告模式的天才之处在于,它不是打断用户的决策过程,而是增强这个过程。当你在选择咖啡品牌时,看到各种选项本来就是决策的一部分,付费推广的品牌只是在这个自然的选择过程中获得了更显眼的位置。这和传统搜索广告的逻辑一致,但执行方式更自然、更不突兀。
Hero 目前正在与 AI 广告平台 Koah Labs 讨论合作,将这种新广告形式推向市场。我觉得如果这种模式成功,它可能会成为自然语言界面商业化的标准模式。想想看,未来所有 AI 助手、AI agent 和对话式应用都可能需要这样一种不破坏用户体验的广告模式。Hero 作为先行者,有机会定义这个新兴市场的规则。
更重要的是,这种广告模式对小企业也很友好。不像传统的品牌广告需要巨额投入,自然语言广告可以非常精准地针对特定需求。一家本地咖啡烘焙商可以选择在用户搜索”小批量手工烘焙咖啡”时出现,而不需要和星巴克竞争”咖啡”这样的大词。这种精准性和可负担性可能会让更多中小企业进入数字广告市场。
AI Autocomplete 的诞生其实源于增强现实的需求,这是我觉得最有远见的部分。Hero 的联合创始人 Brad Kowalk 和 Seung Woo Lee 都曾在 Meta 工作,参与 AR 相关项目。离开 Meta 后,他们一直在思考 AR 大规模普及面临的一个核心问题:当 AR 设备的屏幕空间远小于智能手机时,如何让它同样有用?
这是一个很多人没有深入思考过的问题。我们习惯了智能手机的大屏幕、复杂菜单、多层导航。但 AR 眼镜不可能有那么大的显示空间,也不适合复杂的触摸操作。那么,如何在有限的界面上提供丰富的功能呢?
大公司的思路通常是将移动端的界面缩小,配合手势控制。但 Hero 认为这不是正确的方向。Kowalk 和 Lee 的洞察是:AR 设备需要的不是缩小版的图形界面,而是基于意图的交互系统。用户应该能够用自然语言表达意图,系统通过 AI Autocomplete 这样的技术引导用户提供必要信息,然后直接执行任务。整个过程不需要复杂的 UI,只需要清晰的参数呈现和简单的选择机制。
我觉得这个思路非常前瞻。它不是试图把现有的交互模式搬到新设备上,而是为新设备设计全新的交互范式。这种轻量级但强大的 AR 操作系统,可能会成为下一代计算平台的基础。就像触摸屏为智能手机带来的革命一样,基于意图的自然语言交互可能会为 AR 设备带来类似的变革。
Hero 三年前就开始申请这项技术的专利,说明他们很早就看到了这个方向。现在专利已经获批,技术已经成熟,时机也恰到好处。大语言模型的进步让自然语言理解变得可靠,AR 设备开始进入消费市场,用户对新交互方式的接受度也在提高。所有这些因素结合在一起,为 AI Autocomplete 这样的技术创造了完美的时间窗口。
虽然 Hero 现在主要在移动和 Web 应用中推广这项技术,但他们的长远目标显然是 AR。这也解释了为什么他们选择以 SDK 的形式开放技术,而不是只在自己的应用中使用。他们希望建立一个标准,一个未来 AR 交互的基础协议。如果成功,Hero 可能不只是一家应用公司,而是下一代计算平台的基础设施提供者。
Hero 选择以 SDK 形式开放 AI Autocomplete 技术,这是一个非常聪明的战略决策。CTO Seung Woo Lee 解释说:”我们三年前就意识到,AI agent 的瓶颈不会是 AI 浏览互联网和完成任务的能力,而是用户知道该说什么的能力。所以,我们不是再造一个玩’十个问题’游戏的聊天界面,而是推出一个让用户能一次性完成任何多步骤动作的系统。我们相信我们的技术有能力增强今天所有使用自然语言输入的产品。”
这段话揭示了他们的雄心:不是造一个更好的聊天机器人,而是改变整个行业的交互方式。这就需要让其他公司也能使用这项技术,而不是把它封闭在自己的应用中。从商业角度看,这是一个高风险高回报的策略。风险在于,开放技术意味着竞争对手也能使用,可能会削弱自己的差异化优势。回报在于,如果技术被广泛采用,Hero 就能成为这个新交互范式的标准制定者和基础设施提供者。
我认为这个选择体现了创始团队的格局。他们在 Meta 工作过,见识过平台级技术的威力。他们知道,真正改变世界的不是一个优秀的应用,而是一个被广泛采用的标准。就像 HTTP 协议定义了网页浏览,触摸屏定义了智能手机交互,AI Autocomplete 有潜力定义自然语言交互的标准。

SDK 策略还有助于快速验证技术价值和收集反馈。通过让不同行业、不同应用场景的公司使用这项技术,Hero 可以快速发现技术的优势和局限,找到最有价值的应用场景,并根据实际使用情况不断改进。这比自己闷头做一个应用要高效得多。
从生态系统角度看,SDK 策略有助于建立网络效应。使用 Hero AI Autocomplete 的应用越多,用户就越熟悉这种交互方式。用户越熟悉,新应用采用这种交互方式的价值就越大。这种正反馈循环一旦启动,会形成很强的护城河。就像用户习惯了触摸屏之后,任何新的移动设备都必须支持触摸,未来用户习惯了 AI Autocomplete 之后,任何新的自然语言应用可能都需要支持这种交互方式。
Hero 的 AI Autocomplete 让我重新思考了当前 AI 交互的发展方向。整个行业似乎都在朝着”更自然的对话”这个方向努力,让 AI 更像人类一样交流。但 Hero 提出了一个反直觉的观点:也许最好的交互方式不是完全模拟人类对话,而是结合对话的自然性和表单的结构性。
人类之间的对话之所以高效,是因为双方共享大量背景知识和语境。你和朋友聊天时,可以用很简短的话表达复杂意思,因为你们互相了解。但人和 AI 的对话不一样,AI 不知道你的偏好、习惯和当前情境。如果完全模拟人类对话,就会导致大量不必要的来回确认。
Hero 的方法是承认这个差异,利用 AI 的优势来弥补。AI 可以快速分析任务结构,预测所需信息,实时更新界面。这些都是人类做不到的。通过展示结构化的参数,AI Autocomplete 实际上是在利用机器的优势,而不是试图完全模仿人类。
我认为这种思路会影响整个 AI 产品设计领域。未来我们可能会看到更多混合式交互:既有自然语言的灵活性,又有结构化界面的清晰性。这不是倒退到传统 GUI,而是在更高层次上综合了两种交互方式的优点。
从技术架构角度看,AI Autocomplete 也提出了新的要求。它需要 AI 模型不仅能理解用户意图,还要能预测任务结构和参数需求。这可能会推动一类新的 AI 模型发展,专门用于任务分解和参数预测。Hero 提到他们使用了一系列模型来预测用户可能输入的内容,说明这不是单一模型能解决的问题,而需要专门的技术栈。
对于正在开发 AI 产品的团队来说,Hero 的成功提供了重要启示:不要只关注 AI 的智能程度,还要关注交互设计。最聪明的 AI 如果交互方式糟糕,用户体验也会很差。反过来,即使 AI 能力有限,如果交互设计得当,也能提供很好的用户体验。Hero 的技术本质上是通过更好的交互设计,最大化了现有 AI 能力的价值。
我也在思考这项技术可能的局限性。它适合参数化的、结构化的任务,但对于真正开放式的、需要创造性的对话可能不太适用。比如你和 AI 讨论一个哲学问题,或者寻求情感支持,这种场景下强行展示参数就会显得生硬。所以 AI Autocomplete 可能不会取代所有类型的 AI 交互,而是在特定场景下提供更优选择。
另一个值得关注的是隐私和数据安全。AI Autocomplete 需要理解任务结构和预测用户需求,这意味着它需要访问相当多的上下文信息。如何在提供个性化服务和保护用户隐私之间找到平衡,将是这类技术普及过程中必须解决的问题。
Hero 目前正在自己的助手应用中测试这项技术,计划在几个月内向用户发布。他们重点展示的功能是帮助用户通过自动补全提示词找到会议时间或和朋友见面的时间。这是一个很实用的场景,也是一个很好的切入点。安排会议往往需要考虑多个人的时间、地点偏好、会议时长等因素,用自然语言描述清楚并不容易。有了 AI Autocomplete,这个过程会简化很多。
但我更期待看到 Hero 在更广泛场景中的应用。比如在旅行规划、购物、客户服务等领域,AI Autocomplete 的价值可能更加明显。Hero 的 SDK 策略意味着我们不需要等 Hero 自己去开发所有应用场景,而是会看到各行各业的公司将这项技术集成到自己的产品中。
从融资角度看,Hero 去年获得了 400 万美元种子轮,现在又获得了 Forerunner Ventures 领投的 300 万美元追加投资。Kowalk 表示,根据应用和 SDK 的增长情况,他们计划在未来几个月筹集更大一轮融资。我认为如果 SDK 能够吸引到一批有影响力的客户,证明技术价值,那么 A 轮融资应该不成问题。这项技术的潜在市场非常大,任何使用自然语言输入的应用都可能是潜在客户。

我也在想,Hero 会不会成为下一个 Twilio 或 Stripe 那样的基础设施公司?Twilio 让每个应用都能方便地集成短信和电话功能,Stripe 让每个应用都能方便地接入支付。Hero 有潜力让每个应用都能方便地提供优秀的自然语言交互体验。如果真的走到这一步,Hero 的价值将远超一个普通的应用公司。
但挑战也是存在的。技术再好,也需要市场教育和生态建设。开发者需要理解这项技术的价值,学会如何集成和使用。用户需要适应这种新的交互方式,培养新的使用习惯。这些都需要时间和持续投入。Hero 团队有 Meta 的背景,应该对这些挑战有充分认识。
我特别欣赏 Hero 团队的一点是,他们在三年前就开始布局这个方向,提前申请了专利。这种前瞻性在快速变化的 AI 领域特别难得。很多公司都在追逐最新的热点,而 Hero 则在思考更根本的问题:人机交互的本质是什么?未来的交互应该是什么样子?这种长期思维是真正有影响力的公司的特质。
最后,我想说的是,Hero 的 AI Autocomplete 提醒我们,AI 革命不只是关于更强大的模型,也关于更好的交互设计。技术进步和设计创新同样重要,甚至在某些场景下,好的设计比更强的模型更有价值。这也是为什么我对 Hero 的未来充满期待。他们不是在和其他公司比谁的模型更强,而是在重新定义人机交互的方式。这种创新往往更持久,也更有影响力。
我相信,几年后回头看,我们会惊讶地发现自己曾经需要花那么多时间和 AI 来回对话,就像我们现在回想起曾经需要记住各种命令行指令一样。AI Autocomplete 可能就是推动这个转变的关键技术之一。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微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。
蓝蓝设计的小编 http://www.lanlanwork.com