首页

兰亭妙微UI设计公司:这种全新的交互方式,会成为未来AI应用的标配吗?

清阳 行业趋势

前 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 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 可能不只是一家应用公司,而是下一代计算平台的基础设施提供者。

SDK 策略的深远意义

Hero 选择以 SDK 形式开放 AI Autocomplete 技术,这是一个非常聪明的战略决策。CTO Seung Woo Lee 解释说:”我们三年前就意识到,AI agent 的瓶颈不会是 AI 浏览互联网和完成任务的能力,而是用户知道该说什么的能力。所以,我们不是再造一个玩’十个问题’游戏的聊天界面,而是推出一个让用户能一次性完成任何多步骤动作的系统。我们相信我们的技术有能力增强今天所有使用自然语言输入的产品。”

这段话揭示了他们的雄心:不是造一个更好的聊天机器人,而是改变整个行业的交互方式。这就需要让其他公司也能使用这项技术,而不是把它封闭在自己的应用中。从商业角度看,这是一个高风险高回报的策略。风险在于,开放技术意味着竞争对手也能使用,可能会削弱自己的差异化优势。回报在于,如果技术被广泛采用,Hero 就能成为这个新交互范式的标准制定者和基础设施提供者。

我认为这个选择体现了创始团队的格局。他们在 Meta 工作过,见识过平台级技术的威力。他们知道,真正改变世界的不是一个优秀的应用,而是一个被广泛采用的标准。就像 HTTP 协议定义了网页浏览,触摸屏定义了智能手机交互,AI Autocomplete 有潜力定义自然语言交互的标准。

SDK 策略还有助于快速验证技术价值和收集反馈。通过让不同行业、不同应用场景的公司使用这项技术,Hero 可以快速发现技术的优势和局限,找到最有价值的应用场景,并根据实际使用情况不断改进。这比自己闷头做一个应用要高效得多。

从生态系统角度看,SDK 策略有助于建立网络效应。使用 Hero AI Autocomplete 的应用越多,用户就越熟悉这种交互方式。用户越熟悉,新应用采用这种交互方式的价值就越大。这种正反馈循环一旦启动,会形成很强的护城河。就像用户习惯了触摸屏之后,任何新的移动设备都必须支持触摸,未来用户习惯了 AI Autocomplete 之后,任何新的自然语言应用可能都需要支持这种交互方式。

这对整个 AI 行业意味着什么

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 未来的期待

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。

 

image.png

2026 年必关注的 8 大 UX/UI 设计新趋势

清阳 行业趋势

设计师真正迎来了站上行业主角位的黄金时代。我们终于跳出只纠结产品颜值与基础易用性的固有框架,回归设计本质 —— 用心洞察用户界面使用感知,自主构建产品体验、主导产品商业价值落地。
 
兰亭妙微ui设计公司始终坚信:每一次行业效率的飞跃,都源于新工具的诞生与普及。当下设计行业亦是如此,率先吃透 AI 设计工具的从业者,早已切身感受到技术带来的效率革新,同时也直面着行业变革带来的挑战。
 
当下设计师更需要跳出专业工具的舒适圈,主动涉猎跨领域工具,打破能力边界,重新定位 AI 时代设计师的核心价值。
 
随着 AI 技术深度赋能设计赛道,设计迭代效率大幅提速,视觉表现力实现质的飞跃,既能瞬间抓取用户注意力,也让产品视觉层次更丰富、交互逻辑更流畅、触控反馈更具真实质感。AI 普惠设计能力,也让超级个体成为设计圈热词。
 
如今的 AI,早已进阶为设计师具备深度洞察力的智能伙伴。任务自动化只是初级形态,现阶段 AI 已具备情绪、场景、用户意图理解能力,未来更将为用户打造高度个性化、自然无感的沉浸式体验。
 
即便 AI 工具能实现超乎想象的设计效果,但最终呈现上限,始终受制于使用者的认知格局与审美素养。
 
下面为大家拆解 2026 年 8 大 UX/UI 核心设计新趋势,也是当下留住用户、打造深度体验的核心方法论。
 

2026 UX/UI 设计趋势总览

 
AI 重构设计师角色,从视觉美化转向情感共鸣 + 商业主导;依托 AI 技术打造自然个性化沉浸式体验,八大趋势涵盖:
 
  1. 触觉极致主义:打造柔软治愈感界面,聚焦数字纹理拟物按压反馈
  2. 科幻赛博渐变:暗黑未来风,深色模式叠加霓虹全息潮流配色
  3. 交互叙事卷轴:滚动即叙事,页面元素随滑动动态演绎沉浸式体验
  4. 动态字体排版:文字承载情绪,随滚动形变演绎情感表达
  5. 便当网格 2.0:模块化有序排布,实现「有序的混乱」视觉美感
  6. 涂鸦与人为瑕疵:融入手绘随性质感,用不完美营造真实烟火气
  7. AI 智能角色适配:读懂用户心境,界面氛围随情绪场景实时切换
  8. 沉浸式 3D 购物:虚拟交互赋能,3D 模型预览 + 虚拟空间实景体验
 

一、触觉极致主义:打造柔软拟物的治愈界面

image.png

扁平化极简设计热潮逐渐褪去,2026 年 UI 设计将数字纹理作为核心发力点。
 
行业将涌现大量果冻、黏土、合金质感的拟物化按钮,不再局限于单一点击交互,按压后可实现物理级挤压、回弹动态反馈,高度还原现实触感。
 
设计风格:高光泽 3D 视觉、充气软糯质感图标,拟物化肌理复刻现实材质
 
典型案例:Blinkit 节日专属图标,Q 弹通透的视觉质感,仿佛可直接从屏幕中触摸拿捏。
 

二、动态字体排版:让文字成为情绪载体

image.png

静态文字已无法满足当下体验需求,2026 年动态字体成为设计标配:页面标题可随屏幕滚动实现扭曲、弹跳、消融等动态效果,以文字形态传递情绪,让文字不止于信息表达。
 
设计风格:适配拇指滑动操作,文字动态响应交互,灵动有温度
 
典型案例:CRED 率先落地动态字体设计,Zomato 等热门 APP 相继跟进,应用在订单追踪等场景,让信息展示更活泼生动。
 

三、便当网格 2.0:模块化布局,有序的视觉美学

image.png

苹果将在 2026 年前持续完善并普及便当网格设计风格。
 
以平滑圆角矩形卡片为基础,模块化组合各类内容,适配当代用户碎片化、短时注意力浏览习惯,兼顾整洁性与视觉层次感。
 
设计风格:模块化排布、简约耐看、信息层级清晰,兼具美感与实用性
 
典型案例:Myntra FWD 摒弃传统单调产品列表,依托便当网格打造产品情绪板,视觉呈现高级且浏览体验极佳。
 

四、AI 智能角色主导:千人千面的情绪化定制设计

image.png

标准化通用 UI 设计已成过去,2026 年产品界面将随用户状态自适应变化:用户高效办公时段,界面自动切换简约清爽模式;夜间休闲、情绪亢奋时,一键切换霓虹渐变潮流风格。
 
设计风格:情绪感知、场景适配、高度定制化,读懂用户潜在需求
 
典型案例:印度版 Spotify 小众精选板块已落地试用,平台整体界面布局、色彩风格均可根据用户实时情绪自动适配切换。
 

五、科幻赛博渐变:暗黑未来感潮流配色

image.png

淡雅柔和配色逐渐退场,赛博朋克风成为 2026 年主流视觉趋势。
 
以纯黑深色模式为基底,叠加霓虹电光色、日落珊瑚色、全息银色等高饱和撞色,打造极具冲击力的暗黑未来感,适配年轻用户审美偏好。
 
设计风格:深色基调为主,霓虹光影叠加,复古未来感拉满
 
典型案例:Pocket FM、Jar 等平台大量运用赛博霓虹光影元素,精准吸引年轻夜间用户群体。
 

六、交互叙事卷轴:滑动即观影,沉浸式叙事体验

image.png

区别于普通页面滑动,卷轴叙事是全新的交互叙事形式:用户滑动屏幕时,页面元素自动渐入、变色、形变,无需额外操作,仅凭拇指滑动即可体验沉浸式故事感,如同掌上动态影片。
 
设计风格:沉浸式场景演绎,虚拟开箱感拉满,交互代入感极强
 
典型案例:Tata Neu 新品发布页面采用滚动叙事设计,为用户打造全虚拟沉浸式开箱体验。
 

七、涂鸦与人为瑕疵:褪去完美,回归真实质朴

image.png

AI 打造的极致规整设计大行其道时,随性不完美的真实质感反而更具温度。
 
手绘涂鸦、随性下划线、丑萌趣味贴纸等元素广泛应用,刻意保留人为设计瑕疵,摆脱工业设计的刻板感,拉近品牌与用户距离。
 
设计风格:质朴接地气、随性手绘感、小众个性,自带生活化烟火气
 
典型案例:Cult Fit 旗下 Curo 品牌 UI 设计,以涂鸦和随性瑕疵元素塑造古怪鲜活的品牌人设,像个性十足的亲密好友。
 

八、沉浸式 3D 购物:打破平面局限,虚拟实景消费

image.png

2026 年 3D 产品预览设计再度爆发,彻底打破传统平面商品展示模式。用户可 360° 实时旋转产品模型,放大查看材质、细节;更可通过虚拟技术,实现虚拟试衣、实景家装预览等体验。
 
设计风格:可交互实时 3D 模型,虚拟空间沉浸式漫游,所见即所得
 
典型案例:Pepperfry 等平台上线 3D 虚拟体验功能,支持用户虚拟进入居家空间、实景预览商品搭配效果。
 

设计趋势总结

 
未来,数字设计不再只是产品体验的附属支撑,设计本身就是核心体验
 
AI 时代下,用户对产品的期待,早已超越基础功能与视觉美观,更追求情绪响应、个性化适配与情感共鸣。而平衡用户个性需求与产品商业定位,将成为每一位产品设计师的核心必备能力。
 
转载:优设
 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

B端产品的设计风格,原来还有这些讲究!

清阳 行业趋势

今天兰亭妙微UI设计公司,来讲解 B 端产品界面的视觉风格,聊聊在整个行业当中视觉风格的变化与目前的现状。以及给大家说说未来应该如何选择自己产品的视觉风格~

我们会将整体分为行业初期,萌芽期、成长期、野蛮发展期、新阶段 ,每一个阶段给大家总结一个最为流行的风格,并分析这个风格出现的原因,方便大家进行理解。

一、行业初期-经典传统风

我们把时间拉回到 2012 年。在那时,Ant Design 还没有出现,也没有什么 Element、Semi Design,行业当中最早的 B 端系统都是以客户端的形式进行呈现。

整体风格也非常老旧,像是那会儿的 Office、SAP、Salesforce,你可以看到都是他们青涩的模样。

在经典传统的设计风格当中,会使用大面积的白色作为底色,同时在页面中用灰色进行分割,使得整个页面散乱抢眼,导致整体的视觉很难被大众所接受,总体感觉信息较散,难以进行聚焦。

而在早期,出现这些老旧风格主要有三个原因:

1.技术框架限制:因为当中成熟的前端框架较少,没有太多技术栈提供给到开发进行使用,因此没有精力将页面做得漂亮

2.认知不足:设计师对于客户端、网页端的设计理解认知本身不够,做得较为粗糙,比如当时的 Office 的界面设计也大致是如此的模样

3.风格一致:早期 Windows 系统就是这样的风格,与 Windows 一致更容易被大众所接受,因此就很难进行创新

关于这类风格的产品,大家不要觉得这夸张,其实在目前依旧有很多产品会延续这个风格。比如 医疗类产品、工业生产类系统,对于他们而言,能用即可,不必纠结太多。

但随着时间的推移,行业中对于 B 端设计的要求也在逐渐变高。

二、萌芽期-清爽整洁风

我们将时间推移到 2015 年前后,随着行业不断发展,在国外 Fiori、Salesforce 的出现让大家意识到,这类型的 B 端产品也是需要设计的。

因此国内外的很多系统都是在这一时间面世,像是 Ant Design 、Element 都相继发布。

由于这些设计系统的诞生,你会发现大家对于整个 B 端设计有了一点自己的想法。

在设计上,会去考虑使用 区块划分,将整个页面进行规整呈现。

比如 SAP 在使用了 Fiori 过后,就会使整个界面更干净。

同样非常老牌的 Salesforce 在2015年的时候。也带来了相当大的视觉变化。整体都能感受到,整个页面会通过不断的分层颜色的划分通过黑白灰的方式去呈现页面当中的基本信息。

三、成长期-沉稳侧黑风

我们的时间来到 2018 年前后,在这个时间节点,很多产品都推出了自己的设计系统,对于 B 端设计风格而言,也会提出更高的要求。

比如 Teambition 产品当中,它们提供了自己的设计系统的内容去指导整个产品来进行迭代和优化。同样 Ant Design它们也推出了自己的 Ant Design Pro 来演示使用设计系统过后,能够搭建出什么样的产品。

同样,这个时段很多产品也开始进行自己产品的视觉优化,这时候整体的风格是以:黑色侧边导航为主,然后内容形态进行延展。

比如像有赞、Coding、微盟、飞书,之前都是这样的设计风格来进行呈现。

你会发现它们在整体的设计上都会更加重视页面的分块颜色的区隔,整体页面的识别效率。同时这段时间爆发出来非常多的 B 端产品,随后国内都会按照侧边黑色导航的样式进行进一步设计,这一定程度上提高了国内 B 端设计的下限~

四、野蛮发展期-新拟态风

我们随后将时间推移到 2019 年后,在这时诞生了新拟态设计风格。

它最早是乌克兰设计师 Alexander Plyuto 在追波和 ins 发布的一副系列作品,随后大家发现非常奇特,所以得到广泛的关注。

新拟态的设计风格是以立体效果与浮雕元素,呈现更为三维立体的效果,会给人一种奇特、梦幻的界面体验。

随后就会有很多产品都开始进行跟进,比如 智能家居的产品、金融类产品都有所涉及,甚至很多B端产品也勇敢尝试,但大多数设计师设计完过后,整体评价都不算太高。

为什么没有大规模的推行,我觉得有 3 点原因:

1.因为新拟态风格整体所占面积较大,比较浪费空间。像是一个按钮,都需要使用较大空间才能呈现。

2.需要大面积的留白,但是对于 B 端设计来说无法做到,因此很难进行使用。

3.同时很多用户刚开始觉得好看,但随着时间的推移,出现审美疲劳,因此就不太喜欢。

现在还会使用新拟态风格的界面设计越来越少,大多数只会在官网设计的局部进行使用,这样可以转换视觉感受,给到用户更好的视觉冲击~

五、新阶段-灰白风

时间来到 2022-2024 年左右,你会发现很多产品都开始在这个时间节点进行更新。

像我们熟知的 飞书、有赞、微盟、ONES、Coding,再到 Ant Design 、Salesforce,你会发现非常多的产品都在进行界面风格上的迭代。

对于这个风格,我们愿意叫它为 灰白风。

整体页面是以 灰色和白色 进行的页面划分,在分布上灰色占据弱侧信息,白色占据核心信息,进而形成对页面内容的划分。

聊到这里,可能有部分同学不太理解,这里我们以飞书管理后台的迭代作为示例,给大家进行讲解。

在 2018年,飞书管理后台的第一个版本,采取的就是沉稳侧黑风,

在 2022 年,飞书的管理后台开始改变为灰白风格

由于业务的叠加,2023 年时,在此基础上增加了顶部导航的业务维度,最终形成了现在这样的界面。

为什么这类型的风格会大受追捧,我觉得有以下几个原因

1.减少信息层级,给用户减负:之前沉稳侧黑风格,会发现页面明显进行大面积的分割,导致视觉感受出现较大差异。现在只用灰色作为底,去区分主副信息这样会更简单的突出主要信息内容。

2.平台型产品更容易嵌入:因为国内 B 端产品大多需要依附“钉钉、企微、飞书”三大平台,因此使用灰白风能够让自己产品快速嵌入,不需要过多调整。如果你的产品是沉稳侧黑风,那结果想都不敢想…

3.更容易进行适配:针对多产品的业务,也能够使用同一套业务完整呈现才会更加合理。比如飞书的灰白风,在飞书的其他很多产品里面也会存在

转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

资讯/灵感全都有!2026年4月设计资讯第二波!

清阳 行业趋势

兰亭妙微 UI 设计公司行业资讯分享,持续解读 UI 设计新风向、拆解优秀设计案例、传递实用设计方法论,与您一同探索设计美学与用户体验的更多可能。

 

 

 

一、全文速览图

image.png

二、安全边界:Anthropic泄露潜藏的暗网危机

Anthropic 内部文件意外流出,揭示了其最强模型 Mythos 的恐怖算力。该模型虽具备重塑行业的潜力,但也因可能被攻击者用于挖掘系统漏洞而引发安全危机。官方声明称,在正式发布前需确保防御者已做好应对这种新型算力冲击的准备。

image.png

 

图源:Anthropic, Getty Images

此次泄露迅速波及资本市场,导致网络安全相关股价剧烈波动。分析师指出,Mythos 揭示了 AI 技术在安全攻防中深度嵌入的现状,反映出利用 AI 进行威胁防御已成常态,同时也暴露出单点泄露可能引发的系统性金融风险。

image.png

 

图源:Anthropic, Getty Images

随着 Mythos 的曝光,OpenAI 等巨头的对标模型也浮出水面,预示着 AI 正从辅助工具进化为攻防核心。未来技术博弈将进入“以 AI 对抗 AI”的新阶段,攻击者与防御者在更高维度上的算力对决,将彻底改写网络安全的竞争格局。

三、技术边界:英伟达仅凭矢量数据渲染

NVIDIA证实DLSS 5并非通过读取游戏引擎的3D几何或材质数据运行,而是仅凭2D渲染帧与运动矢量进行AI推断。这意味着该技术本质上是通过分析图像来“幻化”细节(如皮肤与光照),而非精确重建场景。

image.png

 

图源:NVIDIA

虽然这带来了惊人的视觉增强,但也导致AI会在早期预览中产生原画中不存在的细节“幻觉”,引发了外界对画面真实性与艺术还原度的质疑。

四、设计边界:谷歌 AI 画布的无限可能

Stitch 正在重构 UI 设计范式,推出 AI 原生无限画布并引入“氛围设计”概念。用户不再受限于枯燥的线框图,只需通过自然语言描述业

image.png

务目标或灵感,AI 代理即可理解设计意图并并行处理多模态输入,让创意探索从底层逻辑转向感官体验。

 

图源:Google

平台实现了人机交互的自然化,支持用户通过语音指令进行实时设计对话与方案筛选。同时,Stitch 能将静态画面瞬间转化为交互原型,由 AI 自动推演点击逻辑与用户旅程,并支持通过 URL 提取设计系统,极大简化了从规则制定到原型生成的复杂流程。

image.png

 

图源:Google

五、法律边界:Vogue 与 Dogue 的商标博弈

时尚巨头康泰纳仕正式起诉恶搞杂志《Dogue》,指控其封面设计侵犯《Vogue》商标权。这本由独立创作者创立的实体刊,因让狗狗模仿人类大片而走红。目前,康泰纳仕不仅要求经济赔偿,更强制要求销毁所有库存杂志。

image.png

 

图源:dogue

创始人 Portnaya 坚称《Dogue》是基于对话与重新诠释的艺术创作,旨在为独立创作者争取表达空间。然而,面对销量微薄与高昂法律费用的悬殊对比,这场“大卫与歌利亚”式的博弈陷入僵局,创作者正通过众筹寻求法律援助。

image.png

 

图源:vogue

六、自然边界:皇家植物园的品牌新姿态

Johnson Banks 为爱丁堡皇家植物园(RBGE)打造的品牌重塑旨在整合四个园区的品牌感知,确立了“四处花园,一个植物世界”的品牌愿景,将爱丁堡、本莫尔、道伊克和洛根的花园融为一体。

image.png

 

图源:johnsonbanks

还专门设计了边框,可以用来框住作品,并提醒人们它们始终存在,而不是事后才想起来的。

image.png

 

图源:johnsonbanks

这些标志首次展示了一款全新的定制字体,共有四种字重。它是Nomada Incise的定制版,线条棱角分明,优雅别致。最细的字重中包含一系列连字,呼应了西巴尔迪亚符号及其边框的生动呈现。

image.png

 

图源:johnsonbanks

七、文明边界: 剑桥创新对历史的推动

剑桥地区以其创新和发现而闻名,而这一切始于其世界闻名的大学校园内,如今已发展成为环绕该地区的欧洲领先的知识生态系统——融合了 5000 家创新驱动型公司、60 家跨国公司、5 个医院信托机构、36 个研究园区、2 所大学(剑桥大学和安格利亚鲁斯金大学)以及蓬勃发展的初创企业和投资者群体。

image.png

 

图源:johnsonbanks

以图解为主题,并将其运用到代数、方程式、图表和文字游戏中。这既充分利用了该地区的科学声誉,又为方案增色不少,同时还创造了一种独特的视觉和语言。

image.png

 

图源:johnsonbanks

将自己最喜欢的创意与剑桥郡广袤无垠的天空的静态和动态影像相结合,打造出一套可应用于多种媒体的设计工具包。

image.png

 

图源:johnsonbanks

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微 UI 设计|蓝色配色实战指南:界面高级感这样做

涛涛 行业趋势

大家好,这里是兰亭秒微设计。作为专注 UI/UX 视觉体系搭建的设计团队,我们在金融、科技、生活服务等多领域项目中发现:蓝色是 UI 设计里适配性最强、容错率最高的主色,但想做出高级、耐看、有品牌记忆点的界面,配色逻辑远比 “选个蓝” 更重要。

如何提升AI交互设计能力?这篇总结超全面!

清阳 行业趋势

一、全文速览图

image.png

二、前言

2025 是智能体的元年,2026 年将更加成熟和普及,应用程序的体验方式因为智能体而逐步发生改变。

马斯克和扎克伯格曾预言“在未来 5-6 年内,传统的手机和应用程序(App)的形态将因为 AI 发生根本性变革”,兰亭妙微ui设计公司与您一同学习。

三、设计师已经迎来了「AI 交互设计」窗口期

以前的体验设计经验,已经跟不上如今 AI 能力逐渐普及的应用端设计开发趋势。

如今,各产品研发团队基于 AI 能力用户体验设计需求将会大幅增加。

即将到来的 2026 年金三银四求职季,产品和开发设计岗的招聘必然会对求职者结合 AI 的能力提出更高要求。

率先掌握 AI 体验设计能力的设计师,在求职时更有竞争力,在职场团队 AI 设计这一块也更有知识话语权。

换个角度看,AI 体验设计对于交互设计师在一定程度上也是一次洗牌的机会。

image.png

四、从 UX 到 AI Experience,具体有哪些转变

1. AI 将重塑以往的交互方式

当 AI 能够理解自然语言并主动完成任务时,许多传统的 UI 组件:信息架构、导航设计、表单流程、数据筛选等交互方式将会逐渐被重构。

用户与应用交互的过程将会改变。比如:

用户发起交互,由原来的用户主动操作+操作的路径,变成了用户的一句意图表达+AI 直接推送入口。

再比如对于用户输入错误的处理方式,由原来的表单验证与提示,变成了与 AI 的自然语言澄清,然后多轮对话修正。

再比如帮助决策上,用户由原来的面对多选项,变成了 AI 根据情境理解目标,并直接推荐最优路径。

image.png

3. 基于 AI 的场景设计与思考

根据尼尔森诺曼设计机构(简称 NN/g)在 2024 年的 AX 设计研究,优秀的 AI 体验设计要有具备以下几个素质:

  1. 用户能够容易地使用提示词:这意味着需要设计引导用户有效输入的界面元素
  2. 划清 AI 主导 与 用户主导 的边界:当不应该让 AI 做决定时,在合适的时机让用户介入
  3. 多模态交互设计:语音、文本、控件输入的设计结合
  4. 渐进式建立信任 AI:顺滑地让用户从发现、尝试到依赖 AI 功能
  5. 品牌下的 AI 人格化:AI 人设、开场白风格、拟人化、专有音效设计

五、如何提升 AI 体验设计能力

1. AI 交互设计知识

① 来自大厂的 AX 设计原则与模式

来自 Google、Microsoft、Ant 公司的 AI 设计规范与原则。

理解设计原则背后的原因、场景,就像以往我们接触过刚在技术窗口爆发期的「新颖」交互,比如 PC 时代的鼠标输入、移动互联网的触屏输入、虚拟现实时代等...交互模态各有差异。

  1. https://design.google/library/people-ai-research
  2. https://pair.withgoogle.com/guidebook/
  3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
  4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

image.png

② 建立 AI 交互设计基本认知框架

AI 的软件分为:AI 能力应用软件、各行业场景应用软件的 AI 赋能。

AI 的交互形态:

  1. Chat 对话式(对话式交互为主)
  2. Assist 助手式(隐藏为主,需要协助时唤醒)
  3. Spread 散布式(隐藏为主,固定节点出现相关的 AI 功能)

AI 交互组件:Think 思考过程、ThoughtChain 思维链、Prompts 提示集、Conversations 管理对话、Suggestion 快捷指令......

image.png

Ant-design-x

③ 积累 AI 交互设计经验

  1. 体验优秀的 AI 功能,并搜集到案例夹。
  2. 建议按场景分类收集:内容创作类、数据分析类、任务自动化类、客户服务类、等等。
  3. 大致的框架可以像产品体验日记一样,记录设计细节,比如:产品名称与截图、核心交互流程描述、AI 介入的具体方式、优秀设计细节(如何处理加载、错误、歧义的)。

image.png

④ 尝试理解 AI 大模型底层的技术原理

这是偏技术的知识,对于非专业人群来说,比较难啃,但回报是最高的。

因为它是我们认识 AI 的原理性起点,一旦掌握,做许多 AI 项目都能受益,比如:快速判断 AI 能力边界、规划大模型训练等。

而对于设计师来说,也包括能有效指导 AI 领域的设计。

就像以往我们落地自己的设计方案,最好提前摸清前端框架、组件、数据交互,才不容易在开发环节被卡脖子,更顺利地实现设计方案。

了解方式:查阅关于 LLM 工作原理的科普类文章;相关大模型的官方网站查找文档。

2. Ai 交互设计思维

在现有设计项目中,多一层关于「AI 交互辅助」的思考

在做设计项目中,在传统交互设计思路上,有意识地思考「假设现在有 AI 智能体的帮助,这个功能可以是什么样的更好用法?」。

如果你想更好地验证 Ai 设计模式的成果,可以做一些进阶的学习研究:

首先像以往的项目一样,拆解用户操作;

然后针对每个环节思考“如果这里有 AI 能力,能否提效或者减负?

再将 传统方案 vs AI 加持方案的可视化,并进行对比,量化提升的效率

image.png

基于上图,我们把有 AI 协助退货整个过程,背后的动作和实现原理拆解分析:

  1. 用户与系统的交互是通过「多轮对话」,
  2. 然后 AI 在对话中「识别意图」,与用户确认需求,
  3. AI「搜集关键信息与用户资料」提交,
  4. AI 发起退货申请,并对接商家「退货系统」,
  5. AI 推荐「最优」的退货方式(上门取件),
  6. 只把最少的操作「确认」留给用户。

而以上这些动作,都需要设计师具备了理解前后台的交互链路(前端如何自然地与用户交流、后端对接哪些接口)、Ai 工具调用的能力、等等知识经验,才能顺利地完成 Ai 的交互设计方案,并落地。

3. 争取实战机会,让自己新学习的能力在落地中验证

战略性参与有 AI 的项目:

如果你的团队项目正好有 AI 智能体对业务场景赋能的规划,那么对你来说,参与进来将是一个转型的好机会。

其中,从 redesign 小的功能点中 加入 AI 的交互方案开始,比如:搜索功能智能化、表单自动填充、智能推荐卡片。这类功能点改造见效明显,往往投入产出比高,易于快速验证和迭代。

当然得在方案支撑足够有理的前提下。比如:准备传统交互 vs AI 加持的交互这两套方案对比,用预期收益、技术可行性和数据说话。

主动创造机会和环境:

定期向产品团队分享竞品的优秀 AX 设计案例,进行团队设计扫盲,同时也能提升队内影响力,后面参与项目设计更有话语权。

4. 大胆点,用 AI 颠覆玩法

进阶到挖掘大的场景中,能够利用 AI 重塑体验方式的机会。

比如:

传统的进度条,用户需要拖动查看逐个视频帧寻找他想看的目标片段。

而 AI 播放器中,可以把识别到的字幕,加入到进度条中作为锚点,让用户根据具体的字幕内容,就可以精准定位并直达该进度点,找片段的效率大大提升,直接使体验升维。

image.png

最后

预计 2-3 年之后,AI 交互设计将普及为交互设计师的基本能力。那些率先掌握的设计师,将在 AI 重塑产品形态的浪潮中,找到属于自己的新位置。

现在就是最好的开始时机。

你,做好准备了吗。

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微:UI 设计趋势实践与行业创新探索

涛涛 行业趋势

兰亭妙微作为国内顶尖的 UI/UE 设计领域标杆,深耕行业 16 年,始终以 “设计赋能业务、体验驱动价值” 为核心,在工业制造、医疗健康、半导体、航天军工等垂直领域,将当下前沿的 UI 设计趋势与行业场景深度融合,打造出兼具实用性、美学性与行业适配性的设计方案今日头条。从 3D 视觉的技术落地到个性化体验的精准打造,从交互创新到品牌视觉的 UI 化表达,兰亭妙微在每一个设计趋势的实践中,都坚持 “懂行业 + 懂技术 + 懂用户” 的核心定位,让设计不止于视觉美感,更成为解决企业业务痛点、提升用户操作效率的核心抓手。未来,UI 设计必将朝着更多元、更智能、更贴合用户需求的方向发展,而兰亭妙微也将持续探索设计与技术的融合边界,为各行业打造更具竞争力的数字界面体验。

2026年UI/UX设计趋势洞察:从“争夺注意力”到“尊重注意力”

清阳 行业趋势

站在2026年的节点回望,数字设计领域正经历一场历史性的转折。过去十年以“移动端优先”、扁平化设计与静态设计系统为核心的范式,正被一股更具动态性、智能性与沉浸感的新浪潮全面取代。

2026年的设计趋势,已不再停留于界面美学的修饰,而是深入至交互的底层逻辑重构。人工智能的角色,正从单纯的效率工具,进化为“联合设计师”乃至“实时的UI生成者”,驱动着“生成式UI”的兴起。与此同时,硬件形态的突破——如空间计算设备的普及、车载显示系统的革新——正迫使二维界面加速向三维空间拓展,催生了以“液态玻璃”为代表的新拟物美学与空间化叙事。

从技术与社会两个维度来看,2025年是设计行业最为动荡的一年

  • 技术层面,大型语言模型(LLM)与端侧算力的深度融合,使“智能”不再依赖云端高延迟请求,而是内嵌于每一台终端设备,为实时、个性化的界面生成提供了底层基础。

  • 社会层面,用户对数字成瘾的警惕达到顶峰,对隐私与心理健康的关注,迫使设计必须从“争夺注意力”转向“尊重注意力”。

这些深刻变化,正以不同形态融入2026年的设计趋势与方法策略之中。

基于对这一转型期的持续观察,兰亭妙微UI设计公司梳理出2026年真正值得关注的7大UI/UX趋势。在后续内容中,我们将逐一拆解“是什么”“为什么”以及“如何应对”,为数字产品团队提供可落地的方向参考。

一、生成式 UI:从「页面设计」到「规则设计」

image.png

2026 年,用户界面正在经历自 1976 年以来最深刻的变革。传统 UI 设计依赖于设计师预先定义每一个界面、状态与跳转逻辑;而生成式 UI 的核心在于,界面不再是预先画好的固定图像,而是由 AI 根据用户实时意图、上下文环境与设备状态,在毫秒级动态重组而成。这意味着,两位用户使用同一应用完成同一任务时,看到的界面可能完全不同。设计的对象正从「页面」转向「组件关系」与「生成规则」。

这一趋势成熟的关键在于端侧智能与组件化系统的深度融合。本地设备算力足以支撑复杂实时推理模型,解决了云端生成带来的延迟与隐私问题。用户操作——如语音指令、模糊搜索或点击行为——被端侧小模型解析为结构化意图,AI 从设计系统中检索符合品牌规范的原子组件,并根据屏幕尺寸、用户偏好与任务优先级实时排布,生成一个「用完即焚」的临时界面。

image.png

Figma Make、Google Stitch、妙多等产品,已是生成式 UI 的早期实践,未来将逐步深入一线应用。传统的 A/B 测试也将进化为「A/N 测试」,每个界面都成为对用户当前需求的最佳猜测。从用户体验角度看,这标志着「学习成本」的终结。

在生成式 UI 时代,设计师的角色发生根本性转变,工作重心聚焦于四个方向:

  • 定义约束:设定品牌风格、交互原则与安全边界,确保 AI 生成的 UI 不偏离品牌调性;

  • 提示词设计:编写与优化用于指导 AI 界面生成的提示词;

  • 系统架构:维护庞大而灵活的设计组件库,保障组件在任何组合下均能正常工作;

  • 设计兜底:处理例外情况,由设计师亲手解决具体设计问题,为 AI 提供保障。

设计师的价值正转向设计逻辑的健壮性与智慧程度,这或许是一个更「抽象」但必然到来的结果。


二、液态玻璃美学:数字材质的「生命力」

image.png

如果说 2010 年代的扁平化设计是为了适应低分辨率屏幕与性能受限的移动处理器,那么 2026 年的「液态玻璃」美学,则是硬件性能过剩与屏幕显示技术飞跃的自然产物。这一趋势由 Apple 在 2025 年 WWDC 上发布的系统更新(iOS 26、macOS Tahoe、visionOS 26)引爆,迅速蔓延至整个数字设计领域。

「液态玻璃」并非简单的拟物化回归,也不是「毛玻璃」效果的重复。它是一种高度动态、具有物理属性的数字材质:与静态半透明背景不同,液态玻璃界面是「活」的——背景元素在透过上层界面时,会根据距离、角度与运动速度产生实时光学扭曲与模糊。

这一趋势的核心在于「深度感」与「响应性」。在 2026 年的界面中,光影不再是装饰,而是信息层级的指示器:

  • 动态模糊:用户滚动列表时,底层内容不仅模糊,还会产生类似流体流过玻璃表面的拖影效果;

  • 镜面高光:按钮与卡片边缘根据设备陀螺仪感知的倾斜角度,呈现流动光泽;

  • 层级重构:通过精确光学模糊与深度分层,在不遮挡背景内容的前提下,清晰呈现前景操作区。

实现「液态玻璃」效果高度依赖先进图形渲染技术——在 iOS 生态中依托 Metal 图形 API 的深度优化,在 Web 端则因 WebGPU 的普及,使浏览器能以 60fps 甚至 120fps 流畅渲染复杂实时光照与模糊效果。

image.png

对品牌而言,「液态玻璃」提供了扁平化时代一度缺失的差异化手段。通过调整「玻璃」的折射率、厚度感、色散程度与「液体」的粘滞系数,不同品牌可打造出截然不同的质感。「数字材质学」正成为 UI 设计师的新必修课。


三、多模态交互与感知界面:告别「点击」中心主义

2026 年的交互设计,正式告别以「点击」与「滑动」为绝对核心的时代,进入多模态共生阶段。随着传感器成本降低与 AI 语义理解的质变,语音、手势、眼动追踪乃至面部微表情,均成为标准的一级输入方式。

image.png

这种转变的标志是「输入方式的流动性」。用户无需显式切换模式——在撰写文档时,可一边打字,一边用语音补充描述,同时用眼神注视角落唤起参考资料,系统流畅融合三种输入,理解综合意图。

更进一步,「感知界面」成为最具未来感的趋势。设备不再是被动工具,而成为具备情感计算能力的伙伴。通过分析用户打字速度、语音语调变化,甚至通过摄像头捕捉面部肌肉紧张度,界面可实时推断情绪状态(如焦虑、愤怒、困惑或专注)。如 Hume AI 等公司开发的语音接口,能表达与响应细微情感线索,使人机对话不再冰冷。

在汽车领域,多模态交互已成为部分车型标配。宝马 Panoramic Vision、现代摩比斯全风挡全息 HUD 等设计,将整个挡风玻璃下沿变为显示区域,结合增强现实(AR),将导航信息直接投射于路面。

image.png


四、空间化叙事与沉浸式滚动:从「无限瀑布流」到「叙事驱动」

传统的「无限瀑布流」因易导致成瘾与信息迷失而受到批判,取而代之的是「滚动叙事」。在这种模式下,滚动操作不再仅是移动视窗,而是驱动时间轴与叙事逻辑的引擎。用户向下滚动时,界面元素并非简单上移,而是根据预设叙事脚本进行复杂变换:

image.png

  • 场景转换:背景随内容深入从清晨渐变为黄昏;

  • 拆解展示:3D 产品模型旋转、拆解以展示内部结构;

  • 节奏控制:滚动速度决定故事流速,利用「智能吸附」技术让用户在关键叙事节点自然停顿,避免信息遗漏。

受 Apple Vision Pro、Meta Quest 等空间计算设备影响,即便在普通手机与电脑屏幕上,UI 也开始追求「空间感」。2026 年的设计广泛采用「伪 3D」与「2.5D」技术:

image.png

  • 视差效应:通过陀螺仪与光标位置,平面卡片与图像产生视差移动,仿佛悬浮于屏幕后方不同深度;

  • 光影互动:3D 卡片根据光标移动改变阴影投射方向,呈现近乎真实的物体存在感;

  • 打破网格:空间化设计打破传统网格布局,允许元素在 Z 轴堆叠与穿插。


五、超个性化与自适应布局:UI 的「千人千面」

image.png

借助 AI 的力量,2026 年的 UI 终于实现真正的超个性化。这超越了「猜你喜欢」的内容推荐,深入 UI 布局与功能逻辑层面。应用可根据用户使用习惯、当前情境与生物节律,动态重组界面。例如,财务经理看到的是报表导出与审核功能,数据分析师则突出可视化图表与 SQL 查询窗口。

image.png

这种自适应布局依赖高度灵活的动态设计系统。UI 元素不再固定位置,而是根据权重算法实时排布,这对品牌一致性提出挑战。设计师必须定义强大的「品牌基因算法」,确保无论 UI 如何变形,用户仍能一眼识别品牌。这通常通过以下方式实现:

  • 动态令牌:定义语义化颜色、间距与排版规则,而非硬编码数值;

  • 微交互签名:无论布局如何变化,按钮点击反馈动画、页面加载的独特「呼吸感」保持不变,成为品牌的指纹。


六、Zero UI 与 AI Agent:从「操作流」到「确认流」

image.png

「最好的界面就是没有界面」(Zero UI)的理念在 2026 年得到广泛关注。在智能家居、HMI 与可穿戴设备领域,屏幕不再是交互中心,而退居二线成为辅助信息展示板。交互主要通过传感器自动触发:

  • 接近感应:走近汽车时,通过蓝牙与步态识别自动解锁并调节座椅;

  • 行为预测:从冰箱拿出牛奶时,手势与重量传感器自动记录消耗量,在耗尽前加入购物清单。

Zero UI 的另一面是 AI Agent 的兴起。用户不再亲自操作复杂软件菜单,而是向 AI Agent 下达模糊目标,由 Agent 在后台自动跨应用完成任务。

UI 设计的重点从「操作流」转向「确认流」与「状态流」。设计师需要设计清晰的卡片,展示 AI 的思考过程、决策依据与最终结果,让用户快速扫视并「批准」或「微调」,而非亲自执行每一步。信任感设计成为核心——用户需要知道 AI Agent 做了什么,以及为什么这么做。

image.png

在没有屏幕的场景下,反馈需通过其他感官传达。空间音频利用声音方向感引导用户,触觉反馈则通过不同频率震动传递「成功」「错误」或「提醒」等信息。设计师不仅要「画图」,还要学会「编曲」与「编排震动」,这大大拓展了 UX 设计师的技能边界。


七、动态排版与微叙事:文字成为「视觉生命体」

2026 年,文字不再仅是承载信息的静态符号,而成为具有生命力的视觉元素。动态排版成为主流趋势:标题不再只是静态字体,它们会根据鼠标悬停、页面滚动或语音输入产生变形、变色、拉伸甚至破碎重组的效果。

image.png

这一趋势深受短视频文化和高刷新率屏幕普及的影响。静态文字被认为通过率低且乏味。设计师利用变量字体技术,让字体的粗细、宽窄、倾斜与衬线形状可无级调节,并与用户交互行为绑定。

与此同时,微交互也被赋予叙事功能。一个简单的「点赞」按钮不再只是变红,它可能爆发出彩色粒子,或像果冻般弹跳,甚至根据点赞次数展现不同等级的华丽动画。

image.png

这些微小的瞬间不仅仅是反馈,它们共同构成产品的性格。通过精心设计的微交互,设计师在不增加额外内容的情况下,向用户传递品牌的趣味、严谨或关怀——也就是情绪价值。


结语

综上所述,2026 年的 UI/UX 设计趋势呈现出一种深刻的辩证关系:技术越是先进(AI 生成、空间计算),设计越是追求回归人性(情感感知、神经包容、物理质感)。

对于企业与设计团队而言,应对这些趋势需进行战略层面的调整:

  1. 技能升级:设计师必须从「画图员」转变为「逻辑架构师」与「提示词工程师」。掌握 AI 工具不再是加分项,而是生存技能。

  2. 伦理优先:在 AI Agent 与情感计算日益强大的背景下,设计伦理(隐私、包容性、防成瘾)必须成为产品开发的第一性原理,而非事后补救。

  3. 系统思维:建立能够适应生成式 UI 与多模态交互的动态设计系统,是企业在 2026 年保持竞争力的基础设施。

2026 年的设计,不再是关于如何让界面「好看」,而是关于如何让技术以最自然、最尊重、最可持续的方式融入人类生活。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

研究鸿蒙系统后,总结了给设计师的未来多端应用设计指南

清阳 行业趋势

随着鸿蒙系统的持续成熟、全场景生态不断完善,互联网产品正式迎来新一轮多端应用适配的核心挑战。当下数字产品界面功能愈发复杂、信息层级愈发繁琐,叠加操作系统多元、终端设备类型跨度极大的行业现状,单一的移动端设计思维早已无法适配全场景交互需求,设计师唯有跳出传统单端设计框架,彻底重构适配万物互联的全新设计思维,才能紧跟数字产品的发展趋势,打造出跨端流畅、体验统一的优质应用。本文结合鸿蒙系统官方设计理念与核心规范、主流iOS及Android系统最新设计标准深度研究,联动兰亭妙微UI设计公司的多端适配实战项目经验,为广大UI/UX设计师系统梳理未来多端应用设计的核心思路、落地准则与实操指南,破解跨设备适配难题,助力精准贴合鸿蒙生态设计要求。

前言:鸿蒙,中国互联网生态的关键变量

image.png

“百年未有之大变局” 下,国家数字安全的重要性日益凸显,完全依托国外操作系统的应用生态,已难以匹配大国发展的未来需求。鸿蒙系统的崛起,不仅是一款国产操作系统的落地,更成为未来几年中国互联网行业的核心 “变量”,推动多端应用设计从 “单端适配” 向 “全场景融合” 的深层变革。
 
对于设计师而言,鸿蒙系统的到来绝非简单增加一套系统适配,而是设计理念、职能定位与实操方法的全面升级。如何理解并践行鸿蒙的全场景设计思维,成为应对万物互联时代设计挑战的核心命题。
 

一、互联网发展与操作系统的必然演变

 

1. 互联网发展:从单屏到多屏,设计思维的四次迭代

 
互联网的发展始终与设备形态、屏幕载体同频进化,每一次设备革新都催生新的设计理念与设计师职能,而屏幕的演变也从 “固定化” 走向 “碎片化、全场景化”。
image.png
互联网发展与设计思维的四个阶段清晰界定了设计师的核心目标转变:

image.png

互联网阶段 核心设备 设计核心 设计师职能特征
Web1.0(萌芽期) 固定显示器 信息密度优先,美观与交互次要 平面设计师,聚焦静态信息排列
Web2.0(爆发交互期) 固定显示器 + 笔记本电脑 网页风格、视觉效果与互动形式创新 网页设计师,基于虚拟世界的创意设计
移动互联网时代 智能手机触摸屏 以手机为核心的用户体验设计 UI / 交互 / 动效设计师,逐步融合为体验 / 产品设计师
万物互联时代 多类型屏幕(平板 / 可穿戴 / 智能家居 / VR/AR) 以人为核心的多设备协同场景化体验 全场景设计师,兼具多端适配与协同思维

 

当下我们正处于移动互联网向万物互联的过渡阶段,设计师的核心仍以体验设计为根基,但多设备、多场景的适配与协同已成为必须具备的核心能力。
 

2. 传统操作系统的弊端:单端设计思维的天花板

 
全球主流操作系统(Windows/MacOS/iOS/Android)均伴随巨头企业发展形成生态,并基于不同设备衍生出独立系统(如苹果的 iPadOS/WatchOS/VisionOS)。但随着设备与应用的持续丰富,单端设计思维的弊端愈发明显:

image.png

  • 多平台、多尺寸适配设计差异大,视觉与体验一致性难以保证;
  • 各系统底层代码壁垒高,需不同开发团队维护,开发成本剧增;
  • 设计师需维护多套规范、组件与素材,效率低下且易出现标准混乱。
image.png
即便苹果等企业尝试推进多端体验融合(如统一 MacOS 与 iOS 的组件样式),但受限于庞大的既有生态,难以从底层打通设备间的桥梁,仅能通过 “桥梁式连接” 实现浅层协同,而非真正的设备融合。

 

image.png

3. 鸿蒙系统的创新:从 “设备协同” 到 “设备融合”

 
鸿蒙系统作为全新的全场景智能操作系统,站在传统操作系统的成熟经验之上实现弯道超车,其核心设计理念彻底打破了单端设计思维的桎梏 ——一次开发、多端部署,这也是鸿蒙与传统操作系统的本质区别。

image.png

鸿蒙通过两大核心技术实现这一理念,为全场景设计奠定底层基础:
 
  1. 分布式软总线:打破设备物理壁垒,让所有设备如同单一设备般实现高效通信,实现设备间的能力共享与数据互通;
  2. 自适应 UI 框架(方舟开发框架):可根据设备的屏幕尺寸、像素密度、交互方式(触控 / 遥控 / 旋钮),自动适配对应的 UI 布局与交互逻辑,从技术层面减少多端适配的重复工作。

image.png

鸿蒙系统对设计师的核心要求,是建立全场景设计思维:从应用框架、组件形态、交互方式、反馈形式等维度,将多端设计整合为一套统一的全场景设计系统,而非对不同设备做孤立的设计适配。
 
一套完整的全场景设计系统,需具备四大核心要素:

image.png

  • 全场景的自适应 / 响应式布局规范:基于屏幕比例抽象,打造阶梯式自适应结构;
  • 全场景 API 的统一:实现全局配色、字体、组件、布局的统一管控;
  • 多模态组件库:适配不同设备 / 场景的组件样式、交互与反馈形态;
  • 全场景适配的成熟经验与实操指南。
 
下文将重点围绕全场景设计的框架与布局层面,梳理鸿蒙设计的核心实操要点。
 

二、全场景布局的基础要素:统一基准,抽象尺寸,建立秩序

 
多设备适配的核心前提,是建立一套统一的布局基础规则,解决 “尺寸不统一、比例差异大、布局无规律” 的核心问题,鸿蒙系统通过虚拟像素、断点系统、栅格系统三大要素,搭建了全场景布局的底层框架。
 

1. 基准倍率统一:vp 虚拟像素,实现跨设备尺寸归一

image.png

面对海量设备的像素密度与屏幕尺寸差异,鸿蒙采用虚拟像素(vp) 作为设计的基础单位,实现所有设备设计尺寸的归一化,其核心逻辑与 Android 的 dp 一脉相承,但更适配鸿蒙的全场景设备体系。

image.png

  • vp 的核心定义:针对应用的设备虚拟尺寸,区别于屏幕硬件的物理像素(px),可在任何屏幕上缩放以保证统一的视觉尺寸体量;
  • vp 的换算规则:1vp≈160dpi 屏幕上的 1px,鸿蒙 API 接口无单位时,默认单位均为 vp;
  • 注意点:因设备屏幕多样化,vp 与 px 的换算无固定整数倍率(如苹果 pt 的 2x/3x),需参考鸿蒙官方文档做精准适配。

image.png

2. 屏幕尺寸抽象:断点系统,划分跨设备布局区间

 
基于 vp 完成尺寸归一后,通过断点系统界定 “布局何时需要变化”,这是响应式布局的核心,鸿蒙从横向(窗口宽度)、纵向(窗口宽高比) 两个维度,将全场景设备的屏幕抽象为五大梯度,实现屏幕尺寸的标准化归纳:
 image.png
 
鸿蒙断点梯度 对应设备类型
XSmall 智能手表、小屏穿戴设备
Small 手机、竖屏折叠屏
Medium 横屏手机、小平板、展开折叠屏
Large 平板设备、车机
XLarge PC、智慧屏

 

 image.png
相较于 Android 的断点规范,鸿蒙的断点系统覆盖范围更广,充分考虑了可穿戴设备、折叠屏等万物互联时代的特色设备,更适配全场景设计需求。
 

image.png

 

3. 基础布局秩序:栅格系统,保证多设备布局一致性

 
在单设备设计中栅格系统并非必需,但在多设备全场景设计中,栅格是通用的辅助定位系统,为布局提供可循规律,解决动态布局的一致性问题,栅格会随屏幕、窗口、子容器尺寸的变化动态调整。
 

image.png

栅格的三大核心构成

 

 

  1. Margins(边距):元素与窗口左右边缘的距离,决定内容展示宽度,可按窗口尺寸定义不同数值;
  2. Gutters(间距):栅格之间的距离,控制元素间的视觉关系,取值通常不大于边距(符合格式塔原理);
  3. Columns(栅格):内容占位框架,数量决定布局复杂度,宽度由窗口宽度与栅格数量自动计算,不同窗口尺寸匹配不同栅格数量。
 

image.png

鸿蒙栅格系统的设计原则

 
鸿蒙采用窗口栅格系统,核心逻辑与 Android 一致:通过断点系统抽象窗口宽度区间,再匹配对应的栅格数量(边距、间距),实现内容布局的最佳适配。
 
  • 应用可根据自身风格(紧凑型 / 宽松型 / 通用型)定义专属栅格组合(如 8 间距 / 12 间距 / 16 间距);
  • 栅格内容区最大使用宽度为 2220vp,窗口宽度超过该值时,内容区不再放大,多余区域左右留白,避免大屏内容过度拉伸。
 

三、应用级自适应布局架构:随屏而变,适配不同设备交互逻辑

 
基础布局要素解决了 “统一规则” 的问题,而应用级自适应布局架构则针对不同设备的屏幕特性与用户操作习惯,设计可动态调整的应用整体框架,让应用在不同设备上都能实现高效的交互与信息展示。鸿蒙系统给出了 7 种核心的应用级布局适配方法,设计师可根据应用需求灵活组合:
 

1. Tab 栏响应架构:底部→侧边,适配大屏操作

image.png

 
底部 Tab 是移动端核心全局导航,但大屏中会因拉伸占用过多空间,窗口宽度≥840vp 时,建议将底部 Tab 挪移至左侧,成为侧边 Tab;
 
  • 侧边 Tab 可融合更多导航选项、全局操作元素(如菜单栏、头像),充分利用大屏空间;
  • 该数值为鸿蒙建议值,可根据应用的空间需求灵活调整。
 

2. 分栏布局:父子层级→平行显示,释放大屏信息展示能力

image.png

 
大屏的核心优势是更大的信息展示空间,可将移动端的父子层级页面拆分为平行分栏,窗口宽度≥600vp 时,建议使用分栏布局
 
  • 鸿蒙默认两栏宽度比例为 4:6,特定场景可调整为 5:5 或 6:4;
  • 若页面以内容 / 商品展示为主,可适当提高分栏的窗口宽度阈值,或不采用分栏布局,保证阅读效率。
 

3. 悬浮式侧边导航栏:适配小屏 / 双折叠屏,节省核心空间

 

image.png

在竖屏手机、双折叠屏等空间有限的场景,侧边导航作为临时层级,采用蒙版 + 左侧唤起的悬浮形式,不占用核心阅读空间,同时让用户清晰感知层级关系。
 

4. 嵌入式侧边导航栏:适配大屏,提升操作效率

image.png

 
在 PC、智慧屏等空间充裕的大屏场景,侧边导航采用嵌入式布局,通过向右挤压主内容区,从双栏模式切换为三栏模式,兼顾操作效率与布局多样性。
 

5. 侧边面板:适配宽屏沉静式场景,实现轻交互

 
宽屏的视频、阅读等沉静式场景中,将原本的底部浮层操作(如评论、信息查看)改为侧边面板,在不打断核心体验的前提下,实现便捷的轻交互处理。
 

6. 跟手半模态:适配大屏 / 折叠屏,符合人体工学

image.png

 
移动端弹窗多置于屏幕中间,但大屏 / 双折叠屏中,用户单手难以覆盖全屏幕,需将操作弹窗放置在符合人体工学的位置(如靠近右手的边缘),提升操作便捷性。
 

7. 半弹窗与弹窗变化:适配多屏,实现模态自适应

 
移动端为减少页面跳转,常用底部半弹窗实现内容型临时页面;在折叠屏 / 平板等大屏场景,将半模态页面自适应为临时窗口模式,充分利用大屏空间,提升交互体验。
 

四、模块级响应式布局方法:细节适配,让界面过渡更自然

 
应用级架构解决了整体框架的适配,而模块级响应式布局则聚焦单个功能模块的动态调整,让模块随容器尺寸(屏幕 / 窗口)变化实时适配,并通过过渡动画实现自然的界面变化,鸿蒙梳理了 8 种核心的模块级适配方法,覆盖绝大多数设计场景:
 

1. 横向等距自适应

image.png

 
模块内元素左右间距固定,模块宽度随容器宽度等值变化,是最基础的模块适配方式,适用于简单的线性排列元素。
 

2. 横向均分自适应

image.png

 
容器尺寸变化时,将空间平均分配至元素间的空白区域;若尺寸变化幅度大,可在模块内设置断点,调整元素数量与尺寸,适配设计目标。
 

3. 等比缩放

 

image.png

元素长宽绑定并等比缩放,适用于对比例要求严格的元素(如 LOGO、固定比例图片),保证视觉形态的一致性。
 

4. 占比缩放

image.png

 
元素尺寸与容器 / 区域的某一维度(宽 / 高)按比例绑定,比等比缩放更灵活,能更稳定地分配布局与元素空间,是日常设计中最常用的缩放方式。
 

5. 自适应延伸

 

image.png

元素间距与大小固定,仅通过容器调整显示 / 隐藏的内容数量;需注意高频 / 必要元素需持续露出,避免核心功能被隐藏。
 

6. 自适应隐藏

image.png

 
聚焦小屏核心操作,将低频操作整合至 “更多” 按钮中,适用于空间有限的小屏 / 穿戴设备;核心原则是按操作优先级排序,保证核心操作的便捷性(如音乐播放器的播放 / 暂停始终居中)。
 

7. 自适应折行

 

image.png

层级相同的内容展示首选方式,容器宽度变化时,内容不隐藏,仅做折行显示,保证信息的完整性,适用于标签、列表项等元素。
 

8. 重复布局

 

image.png

利用大屏宽度优势,将同属性组件横向并列排布,适用于对宽高比敏感的图片 / 组合内容,避免内容放大超过 150% 导致的视觉变形。
 

五、空间哲学的变革趋势:容器化与悬浮化,未来跨端设计的核心方向

image.png

 
鸿蒙系统虽有后发技术优势,但在设计风格与趋势上,仍可借鉴苹果、Android 的最新探索,而空间与容器的具像化、导航 / 操作的悬浮化,已成为全球跨端设计的共同趋势,也是鸿蒙设计未来的重要发展方向。
 

 

1. 苹果 iOS26/VisionOS:空间容器化的先驱

image.png 
苹果 iOS26 的核心革新之一,是将 “空间” 与 “容器” 概念具像化,打破导航 / 操作按钮与页面的融合关系,将其置于独立的悬浮空间中;这一设计最早应用于 VisionOS,不仅让跨端适配更简单,也为用户适应 XR 设备的视觉风格与操作逻辑做铺垫。
 

2. Android Material Design 3:导航操作的容器化趋势

 

image.png

安卓的 Material Design 3 也明确体现出导航与操作的容器化趋势,通过独立容器承载导航与操作元素,减少对内容展示空间的占用,提升跨端适配的灵活性。
 

3. 鸿蒙设计的未来方向:融合容器化与悬浮化

 

image.png

容器化与悬浮化的设计逻辑,在跨端适配中具备显著优势:无需为导航刻意划分独立空间,元素悬浮于内容之上,让导航与内容的布局适配更高效。未来鸿蒙的设计体系,必然会融合这一趋势,设计师提前适应并应用该理念,将掌握未来跨端适配的主动权。
 

结语:全场景设计思维,让复杂回归简洁

 
形式追随功能,而功能的实现始终取决于底层技术的发展。从 PC 到移动互联网,再到万物互联,应用形态、操作系统、设备种类都在不断 “复杂化”,而鸿蒙系统的到来,让多端一体化设计从理念变为现实。
 
对于设计师而言,未来的核心命题,是在复杂的多设备、多场景中寻找设计的简洁性:如何在提供丰富功能与连续体验的同时,让用户感受到视觉与交互的秩序与统一?如何降低多端适配的设计与开发成本?
 
全场景设计思维,正是解决这一命题的关键钥匙。它要求设计师跳出单端设计的局限,以 “人” 为核心,以鸿蒙的技术框架为基础,从底层规则、应用架构、模块细节三个层面,打造一套统一、灵活、可适配的全场景设计系统。
 
万物互联的时代,设计的边界正在不断拓展,而唯有重构思维、紧跟技术趋势,才能让设计始终成为产品体验的核心驱动力。
 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

2016 年 UI 设计趋势深度分析 | 兰亭妙微设计

涛涛 行业趋势

进入 2016 年,UI 设计行业在体验设计领域涌现出诸多全新设计元素与表现手法,彩色投影、双色调渐变等设计形式在各大设计社区的出现频率持续攀升,逐渐成为行业新的设计风向。兰亭妙微设计深耕 UI 设计领域,始终关注行业前沿趋势变化,为了让设计实践更具方向感,也为给行业同仁提供参考,我们对 2016 年 UI 设计的主流流行趋势进行系统梳理与深度分析,提炼出当下最具实践价值的设计思路与手法。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档