首页

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

清阳 行业趋势

随着鸿蒙系统的持续成熟、全场景生态不断完善,互联网产品正式迎来新一轮多端应用适配的核心挑战。当下数字产品界面功能愈发复杂、信息层级愈发繁琐,叠加操作系统多元、终端设备类型跨度极大的行业现状,单一的移动端设计思维早已无法适配全场景交互需求,设计师唯有跳出传统单端设计框架,彻底重构适配万物互联的全新设计思维,才能紧跟数字产品的发展趋势,打造出跨端流畅、体验统一的优质应用。本文结合鸿蒙系统官方设计理念与核心规范、主流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 设计的主流流行趋势进行系统梳理与深度分析,提炼出当下最具实践价值的设计思路与手法。

为什么AI目前搞不定UI界面设计?

清阳 行业趋势

既然 AI 已能通过文字直接生成图片,却仍无法独立完成专业的 UI 界面设计,核心原因在于其在理解复杂业务逻辑、创造性表达与情感传递上存在天然局限性,这也让我们清晰认知到 AI 并非万能。兰亭妙微 UI 设计公司在实践中发现,AI 虽能针对设计中的显性问题,为优化工作提供数据化的专业建议,但在深层设计维度仍有明显短板。以 58 同城商业地产页面设计稿的评审工作为例,AI 可精准识别设计中的亮点与待优化点:

在人工智能技术飞速发展的当下,从自动驾驶到智能助手,AI 的应用触角已延伸至各行各业。但在 UI 界面设计领域,尽管行业对 AI 寄予厚望,其实际落地效果却远未达到预期。本文将从 AI 对界面设计的实际影响、落地过程中面临的核心挑战出发,结合 Uizard 工具的实际应用案例展开分析,并探讨 AI 时代下设计师的核心竞争力提升路径。
 

一、AI 为界面设计带来的三大变革

 
AI 技术对 UI 界面设计的影响是全方位的,它并非简单的工具升级,而是从效率、体验、决策三个维度,为设计工作带来了全新的机遇与可能性。
 

设计效率的跨越式提升

 
AI 能高效自动化各类重复性设计任务,比如快速完成页面布局生成、品牌配色方案匹配、标准化组件排布等,将设计师从机械性工作中解放出来,使其能将更多精力聚焦于创意与策略设计。
 

产品个性化体验的深度增强

 
通过分析用户的行为轨迹、操作偏好与使用场景,AI 可实现界面的个性化定制,比如为不同用户群体推送适配的功能入口、调整信息展示优先级,让产品界面更贴合个体需求,大幅提升用户体验。
 

设计决策的科学化支撑

 
AI 能够整合分析海量的用户反馈数据、行业设计趋势与市场竞品信息,为设计师提供数据驱动的设计建议,帮助设计师跳出主观判断,让设计决策更具科学性与合理性。
 

二、AI 在 UI 界面设计中的三大核心挑战

 
尽管 AI 为界面设计带来了诸多便利,但在实际落地应用中,其仍面临着难以突破的核心挑战,这些挑战也决定了当前 AI 无法独立完成专业的 UI 界面设计。
 

难以理解复杂的业务逻辑与隐性需求

 
AI 对需求的理解高度依赖显性的文字输入,无法捕捉业务背后的隐性规则、商业逻辑与合规要求,更难以洞察用户的潜在需求。比如在垂直领域的界面设计中,AI 无法精准把握行业特有的业务流程与操作习惯,易出现 “技术正确但业务失焦” 的设计结果。
 

缺失创造性与情感表达能力

 
UI 界面设计不仅是功能的实现,更是情感与美学的表达,需要贴合品牌调性、契合用户心智,甚至传递独特的设计理念。而当前的 AI 本质是对训练数据的模式重组,而非原创生成,既无法突破既有设计语言体系实现颠覆性创新,也无法精准传递设计中的情感温度,难以满足用户对界面美学与情感共鸣的需求。
 

无法灵活适配动态的设计标准

 
不同行业、不同品牌有着各自专属的设计标准与使用习惯,且 Material Design、Apple Human Interface Guidelines 等通用设计规范也在持续迭代。AI 的模型更新存在天然滞后性,对本地化设计习惯与文化语境的理解也存在偏差,难以灵活适配动态变化的设计标准,更易出现违反无障碍设计规范、跨文化语义误读等问题。
 

三、Uizard:AI 设计工具的实际应用案例分析

 
Uizard 作为一款主流的 AI 驱动型 UI 设计在线工具,依托人工智能技术实现了设计流程的加速,能为设计师提供从原型生成到设计评审的全流程辅助。以下结合其在不同设计阶段的应用,解析 AI 设计工具的实际表现与优劣势。

 

原型设计:快速实现从草图到可交互原型的转化

image.png

image.png

Uizard 的原型设计功能,可通过识别手绘草图、现有设计截图中的设计元素,快速将其转换为标准化的数字界面元素,生成可交互的初步原型。
 
例如,设计师为 58 同城商业地产板块设计移动端大类页面时,仅需向 Uizard 明确设计需求:头部导航包含返回、搜索、消息功能,入口金刚区以图标形式展示租赁商铺、商业转让等 10 个功能,下方搭配包含图片、标题、标签、价格的推荐列表,并选择高精度生成模式,AI 即可在几分钟内完成初步的界面原型生成,大幅缩短了从草图到数字原型的转化时间,让设计师能快速验证设计概念。
 

设计评审:自动化检测问题,提供标准化优化建议

image.png

在设计评审阶段,Uizard 可基于设计原则与行业最佳实践,对上传的设计稿进行 AI 分析,自动识别并指出设计中的显性问题,为设计优化提供数据化建议。
 
以 58 同城商业地产页面设计稿的评审结果为例,AI 能精准识别设计中的亮点与不足:
 
设计亮点:图标风格统一清晰,助力用户快速识别功能;合理利用大小与色彩建立视觉层次,区分不同信息模块;全界面采用统一的蓝色配色,保持品牌视觉一致性;房产列表信息布局清晰,便于用户快速扫描关键内容;完成中文本地化适配,贴合目标用户的使用习惯。
 
待优化点:深蓝色背景与蓝色文本对比度不足,影响可读性,尤其对视觉障碍用户不友好;导航栏图标未搭配文字标签,增加用户的理解成本;属性列表按钮样式不统一,易造成用户体验混乱;金刚区图标数量过多,易让用户产生选择困惑;房产列表的文本与图像周围留白不足,降低了界面的可读性与美观度。
 
不难发现,Uizard 能高效检测布局、配色、组件等显性设计问题,但无法对设计背后的业务策略与用户心智匹配度进行评估。
 

焦点预测:基于数据优化界面视觉布局

image.png

Uizard 的焦点预测功能,融合了眼动追踪数据与机器学习算法,能精准预测用户在界面上的注视点,用红色标注高关注度区域、蓝色标注低关注度区域,为界面布局优化提供核心依据。
 
比如在电商产品详情页设计中,设计师可通过焦点预测功能,预判用户的视觉注视模式,据此调整价格、优惠、购买按钮等核心信息的布局,确保关键信息能快速吸引用户注意力,不仅能提升用户体验,更能有效促进产品转化率。这一功能让设计优化从 “主观判断” 走向 “数据驱动”,但仅能针对视觉焦点进行分析,无法兼顾交互逻辑与用户操作习惯。
 
整体来看,Uizard 这类 AI 设计工具的核心价值在于 “快速探索设计方向、压缩基础设计周期”,适合用于概念稿生成、初步原型验证与显性设计问题检测,但生成的设计稿多偏向 “概念级”,逻辑严谨度与细节打磨不足,无法直接用于正式项目评审,仍需设计师进行后续的优化与完善。
 

四、AI 时代,设计师的核心竞争力提升路径

 
AI 的出现并非为了替代设计师,而是推动设计师向更专业、更具策略性的方向转型。在 AI 时代,设计师需打造 AI 难以替代的核心能力,才能适应行业的发展与变化。
 

深耕业务,成为 “业务与设计的桥梁”

 
深入理解业务逻辑、行业规则与用户全旅程需求,是设计师的核心竞争力之一。设计师需穿透业务指标的表象,洞察真实的用户痛点与商业增长杠杆,将业务需求转化为贴合用户体验的设计策略 —— 这一能力是依赖显性输入的 AI 难以企及的。
 

提升创造性思维,打造原创设计能力

 
AI 的设计输出受限于训练数据,而设计师的原创性与创造性思维是独一无二的。设计师需持续提升自身的美学素养与创意能力,在遵循设计规范的基础上,实现设计语言的创新,打造兼具功能性、美学性与情感性的原创设计,让设计更具独特性与品牌辨识度。
 

拥抱新技术,实现 “人机协同” 的设计模式

 
设计师无需抗拒 AI 技术,反而应主动学习并掌握 Uizard、Figma AI 等主流 AI 设计工具的使用方法,理解其底层逻辑与能力边界,将 AI 作为设计的辅助工具,让 AI 承担重复性、机械性的设计工作,自己则聚焦于创意构思、策略设计与细节打磨,通过 “人机协同” 实现设计效率与设计质量的双重提升。
 

结语

 
当前,AI 技术在 UI 界面设计领域的应用仍处于初级阶段,它能成为设计师高效的辅助工具,带来设计效率的提升与设计模式的创新,但受限于业务理解、创造性与设计标准适配等方面的短板,始终无法独立完成专业的 UI 界面设计。
 
对于设计师而言,AI 时代的核心并非 “与 AI 竞争”,而是 “驾驭 AI”。唯有持续深耕业务、提升原创能力、拥抱新技术,打造 AI 难以替代的核心竞争力,才能在人机协同的设计新范式中,始终占据主导地位,让设计真正成为连接产品与用户的核心纽带。

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

 

image.png

2026 UI设计10大趋势前瞻…这些设计方向要火

清阳 行业趋势

2026年的UI设计,不再强调严苛的视觉规则,而是更注重结合使用场景做出合理的设计选择。

设计师不再默认选用极简或极繁风格,而是根据用户需求、情感诉求以及产品的实际使用方式来设计。

其中一个重大变化是,只要设计目的明确,人们对复杂设计的接受度大幅提升。

界面可以层次感丰富或富有表现力,只要易于理解就是合理的设计。

适配性是塑造2026年UI设计的另一核心趋势。界面的响应性不断升级,不仅能适配屏幕尺寸,还能根据用户的行为和偏好做出调整。

动效、色彩与布局的设计,不再只是为了装饰界面,更是为了传递设计意图。

这些变化共同指向了一种更平衡的设计思路,让视觉风格与产品易用性同步发展、相辅相成。

01 触觉极致化和3D纵深感

历经多年的扁平化界面设计后,2026年UI设计在视觉上的一大重要变化,是重新聚焦于设计的纵深感与质感。

通过分层布局、立体组件和细腻的三维元素,让界面重新拥有空间维度。

触觉极致化并非让界面变得杂乱无章、令人眼花缭乱,而是让数字元素更具物理质感和交互反馈感。

按钮设计看起来触手可及,而非单纯的符号;

图标设计兼具重量感与质感。

这些细节能让用户无需额外说明,就能理解各元素的使用方式。

渲染技术、产品性能和浏览器支持度的提升,让设计师能轻松为界面添加3D效果,且不会拖慢产品运行速度、影响产品的可访问性。

02 动态排版

2026年的排版设计不再局限于静态布局,为文字赋予动态效果的动态排版,正从纯粹的装饰元素,成为界面设计的核心组成部分。

用户滚动页面时,标题文字可能会拉伸、位移或做出其他响应;用户点击或悬停时,标签文字也会产生细微的动态变化。

这些动效能清晰传递视觉焦点、层级或状态的变化,且设计的核心是提升文字的可读性,而非分散用户注意力。

合理运用动态排版,能为界面赋予情感与韵律,让产品呈现出更活泼、精致或趣味的气质,同时也能帮助用户更轻松地浏览复杂的界面布局。

2026年,排版不再只是承载内容的载体,更在塑造整体用户体验中扮演着主动且关键的角色。

03 柔和光影和杂志质感

在大胆且富有表现力的界面设计成为潮流的同时,受杂志排版启发的柔和、简约设计风格也愈发受青睐。

这一设计趋势借鉴印刷杂志、摄影作品和高端出版物的设计思路,并将其适配应用于数字产品设计中。

柔和光影风格的UI设计,通过柔和的渐变、漫射的阴影和细腻的纹理营造温暖的氛围与视觉纵深感,同时又不会造成视觉杂乱。

配色方案通常以低饱和度的中性色、暖白色为主,搭配少量点缀色,整体呈现出舒缓、简洁且设计感十足的视觉效果。

兼具杂志质感的界面布局,注重留白设计、视觉韵律与清晰的层级划分,让内容有足够的呼吸空间,同时又能保持精致的设计感。

这种设计思路特别适用于创意工具、内容平台和生活方式类产品——这类产品的设计氛围与基调尤为重要。

04 科幻风未来感渐变

在设计风格的另一维度,科幻风渐变在2026年的使用频率大幅提升,尤其适用于科技类和实验性产品设计。

这类界面常运用高对比度、大胆的色彩搭配和富有氛围感的光影效果,打造极具未来感的视觉体验。

未来感渐变设计通常以深色为背景,搭配霓虹蓝、亮紫、金属色等鲜艳的电光色系,营造出极具电影质感的视觉效果,现代感与沉浸感拉满。

合理运用这类渐变设计,既能凸显产品的创新属性,又不会让整体设计显得杂乱。

这种设计风格在深色模式下的表现尤为出色,发光的点缀元素与分层的光影效果,能为界面增添更多纵深感与氛围感。

渐变的应用场景也不再局限于背景,如今还被广泛运用于按钮、文字和交互元素的设计中。

2026年,渐变不再只是装饰性的设计元素,更在品牌塑造与视觉叙事中发挥着关键作用。

05 新一代动态图形

2026年的动态图形设计已完全融入UI设计体系,不再局限于基础的悬停效果或加载动画。

动效设计被用于诠释各界面元素之间的关联、提供清晰的交互反馈,还能让不同交互场景间的过渡更流畅。

屏幕切换的动效设计目标明确、衔接自然,动画效果能根据用户的操作做出实时且自然的响应。微交互动效则无需过多文字说明,就能清晰展示系统状态、引导用户操作。新一代动态图形设计的核心优势,在于动效的细腻度与一致性。

动效不会刻意吸引注意力,而是通过让界面更易懂、更好用,为整体使用体验赋能。

随着设计工具与框架的不断升级,动态图形设计已不再是特殊的可选设计元素,而是优质UI设计的必备组成部分。

06 新极简主义

极简主义在2026年依然是主流设计思路,但已进化为更具表现力、更以人为本的新极简主义。

这种设计风格保留了传统极简设计的清晰性与简洁性,同时融入了温暖的氛围、细腻的质感与灵活的设计手法。

新极简主义的界面设计摒弃强烈的色彩对比与刻板的网格布局,转而采用柔和的色彩过渡、圆角元素与更具有机感的留白方式。

字体的选择经过精心考量,不再追求中性化,细微的视觉细节为设计增添独特个性,又不会造成视觉杂乱。

这一设计趋势的兴起,反映出人们逐渐意识到:极简主义并非只能营造冰冷、缺乏人情味的视觉效果。

新极简主义在追求设计清晰性的同时,将使用舒适度放在重要位置,打造出既高效又富有情感温度的界面。

07 叙事化设计

叙事化设计已成为UI设计中愈发重要的组成部分,尤其适用于以教育、启发用户或引导用户完成复杂操作为核心目标的产品。

2026年的界面设计不再追求一次性展示所有内容,而是遵循叙事逻辑,随用户操作逐步呈现内容。

基于滚动的叙事设计、渐进式信息展示和随操作变化的视觉效果,让用户能以结构化、沉浸式的方式浏览内容。

动效、色彩与布局的变化,能清晰传递内容的推进节奏与使用场景,让用户的交互过程成为一场连贯的体验之旅。

这种设计思路将信息传递与用户自然的探索习惯相结合,有效提升用户对内容的理解度与参与度。

主打叙事化设计的界面,不会用繁多的选项让用户感到无从下手,而是为用户提供清晰的操作指引与体验节奏。

08 新复古风格

怀旧风依旧在影响UI设计,但在2026年,这种风格呈现出更精致、更具设计意图的新形态。

新复古风格将早期的数字美学与现代设计标准、技术相结合,做出全新的设计诠释。

像素纹理、复古配色方案和经典的界面设计元素,通过高分辨率视觉效果、流畅的动效和自适应布局被重新演绎,最终呈现的设计既带有熟悉的怀旧感,又不会显得过时。

这一设计趋势能引发用户共鸣,因为它将情感记忆与当代的产品易用性巧妙结合。

在致敬经典的同时拥抱现代设计,新复古风格的界面营造出一种跨世代的视觉延续感,能吸引不同年龄段的用户。

09 舒缓式界面

随着数字产品的渗透度越来越高,设计中对用户心理舒适度和长期使用体验的重视程度也不断提升。

舒缓式界面设计将可预测性、可访问性和情感舒适度放在首位,而非追求持续的视觉刺激。

这类界面会减少不必要的通知提醒、降低视觉干扰,且谨慎使用动效;配色方案的选择以提升使用舒适度为核心,布局设计则注重一致性与清晰性。

舒缓式界面设计对生产力工具、健康类平台和用户日常高频使用的应用尤为重要。

2026年,尊重用户的注意力,已逐渐成为评判设计品质的重要标准。

10 手势交互设计

随着触控技术、运动传感器和空间计算技术的不断发展,手势交互设计的应用愈发广泛。

在许多界面中,滑动、拖拽、长按和多点触控等手势操作,正逐步取代传统的可视化控件。

合理的手势交互设计能减少视觉杂乱,打造更流畅的交互模式,但这需要设计师做好新手引导与交互反馈设计,确保手势操作的易发现性与可访问性。

2026年,成功的手势交互界面设计,都能在保证直观易用的同时,兼顾设计的清晰性。

转载:人人都是产品经理

最后

优秀的UI设计,能在表现力与克制感、创新性与易用性、美学设计与人文共情之间找到完美平衡。

设计师不仅关注界面的视觉效果,更重视用户的使用感受,才能打造出超越表面视觉吸引力、引发用户深度共鸣的产品体验

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

 

image.png

为什么 B 端产品的步骤条表单越来越少

清阳 行业趋势

今天兰亭妙微UI设计公司来和大家聊聊在 B 端设计当中十分基础,但是争议越来越大的组件:步骤条

因为在过去很长一段时间里,步骤条几乎是 B 端复杂表单的“标配”,只要遇到信息量大的任务,设计师的第一反应往往是:太长了,用步骤条切分一下吧;产品经理设计原型也是:逻辑复杂了,步骤条来一下吧。

但是在 2026 年的今天,我们重新在看很多表单时,经常会出现滥用表单的情况,而很多高效的 SaaS 产品正在让步骤条退场,取而代之的时更扁平、直观的单页交互。

为什么会出现这种变化?我们在设计表单时,到底该如何抉择?今天我们就来深入讨论一下。

一、步骤条的“舒适区”

首先,在交互设计初期,我们需要承认步骤条确实做出了很多贡献。在交互设计的理论当中,步骤条的核心价值在于“降低认知负荷”。

它利用的就是心理学中的“组块化”原理,将一个庞大的任务(比如 50 个填写项)拆解为若干个小任务(Step 1、Step 2、Step 3)。

这种逻辑非常线性,同时能够降低用户的理解成本,通过步骤引导用户,避免了他们在复杂的流程中迷路,所以最初在 C 端产品当中经常使用。

同样这样就造成了很多设计师的路径依赖:只要表单长,就用步骤条,产品经理的视角也是如此

二、B 端场景下的“水土不服”

然而,这种线性逻辑遇到复杂的 B 端业务时,问题就会出现。

因为 B 端通常都是专家型用户,他们在处理业务时,需要的往往不是“保姆式的引导”,而是“全局的掌控感”。

步骤条在 B 端复杂场景下,存在三个致命的体验缺点:

1. 全局感的缺失

这是最严重的问题。想象一下,一个采购员正在创建一个复杂的入库单,如果使用步骤条,他必须填完基础信息点击下一步,才能看到物料明细。

但在实际业务中,他可能需要看着“物料明细”的种类,反过来去修改“基础信息”里的仓库类型。

步骤条这时候就是一堵墙,切断了信息之间的联系。用户被迫在“上一步”和“下一步”之间反复横跳,导致使用步骤条表单异常痛苦,极大地降低了录入效率。

2. 录入流的中断

B 端的高效录入讲究的是 连贯、一气呵成,通常需要高效的无鼠标快速操作。

而步骤条的每一次“下一步”点击,本质上都是一次系统级的强打断,它强制用户从输入的心流中抽离出来,停下手中的动作去寻找按钮、等待页面校验或刷新。对于每天要处理上百个表单的业务员来说,这种高频的中断会成倍放大操作的疲劳感。

3. 修改成本高昂

在传统的单页长表单中,发现数据填错,用户只需鼠标滚动回去修改即可,所见即所得。

但在步骤条模式下,修改成本被无限放大:用户可能需要连点两次“上一步”,修改完成后,再连点两次“下一步”才能回到原位。

更糟糕的是,B 端表单不仅用于“新建”,更常用于数据的“二次编辑”。如果是为了修改最后一步的某个小字段,用户却不得不把前面的步骤全部重新点击过一遍(甚至可能触发连环的必填项校验拦截)。在编辑场景下,步骤条带来的交互冗余是成倍增加的。

三、趋势变革与使用决策

目前我们看到越来越多的系统,正在提出一个新的要求:“非必要,不步骤”。

B 端产品开始转向“长表单 + 锚点导航”的模式。这种现象我认为其实就是在:把业务的处理掌控权,彻底交还给用户。

全局视角:目前其实最常见的做法就是将基础信息、详细配置、关联数据等所有模块,展示到一个空间当中,配合页面当中的 锚点定位,用于告诉用户页面的整体情况,这样就能消除未知的焦虑。

随机存取:在表单层面,我们希望彻底解放线性顺序的束缚。用户不再受制于系统,可以根据手头掌握的资料灵活决定录入节奏,对于很多当前信息缺失的情况,我们可以提供更多新增的入口,减少用户跳转。

同时需要考虑草稿箱、暂存等功能,给表单提供非线性的操作路径,才能契合真实的复杂业务场景。

沉浸式心流: 通过上下翻页替代步骤跳转,我们发现在单一页面中,能够使用户更容易沉浸心流,专注填写。

难道就不能用步骤条了?

作为设计师,我们需要明确步骤条的使用决策。

在决定使用哪种组件时,先问自己两个问题:

Q1:后续步骤的内容,是否与前一步内容会有依赖?是 → 使用步骤条。(比如:Step 1 选了“企业”,Step 2 才出现“营业执照”上传入口;选了“个人”,Step 2 则是“身份证”。前后有强逻辑耦合。)否 → 使用单页锚点。(比如:填写入职信息,基本信息和教育经历之间没有逻辑依赖,只是信息的类目不同。)

Q2:这个任务是否是一次性的、不可逆的?是 → 使用步骤条。(比如:大额转账汇款、极低频的系统初始化向导,需要用户步步确认,谨慎操作)否 → 使用单页锚点。(比如:日常的高频数据录入、编辑商品详情信息)

写在最后

其实在我看来,很多系统“去步骤条化”,本质上是要求设计师跳出组件库的舒适区,重新深挖业务场景。

作为 B 端设计师,我们不能成为盲目拖拽组件的执行者,而要在业务效率与交互心智之间找到最佳平衡点,这才是我们不可替代的价值。

转载:人人都是产品经理

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

 

image.png

新中式设计的九大细分风格,解锁东方美学的现代表达

涛涛 行业趋势

步入 21 世纪,文化自信的觉醒与全球化的深度融合,让新中式设计从传统美学的现代演绎,蜕变为当下主流的审美趋势。从故宫文创的破圈走红,到《黑神话:悟空》的全球圈粉,新中式早已超越单一的设计风格,成为兼具文化底蕴与时代活力的现象级符号,真正诠释了 “万物皆可新中式” 的美学魅力。

2026 年 AI 设计新趋势:从工具协作到生态共生的设计革命

涛涛 行业趋势

AI 技术的飞速迭代,正在彻底改写设计行业的底层逻辑。从最初的素材生成、效率辅助,到如今深度参与创作全流程,AI 早已超越工具的属性,成为设计师不可或缺的创作伙伴与思维延伸。2026 年,AI 设计的发展将迈入全新阶段,不再局限于单一的功能赋能,而是从创作模式、思维维度、协作方式等多方面重构设计生态,让设计从 “标准化产出” 走向 “个性化共生”。作为深耕设计领域的从业者,我们结合行业发展与实践探索,拆解 2026 年 AI 设计的六大核心趋势,洞悉设计行业的未来变革方向。

AI/UX 用户体验设计:智能产品的体验重构与指标落地

涛涛 行业趋势

随着生成式 AI、智能体(Agent)技术的全面普及,人工智能正从工具属性向产品核心架构深度渗透,最新行业数据显示,超 60% 的企业已将 AI 技术融入产品全链路设计,95% 的头部科技公司正加大智能体验的研发投入。AI 不再是产品的附加功能,而是重构用户体验的核心驱动力,如何让复杂的智能技术转化为用户可感知、可掌控、可信赖的体验,成为 UX/UI 设计的核心命题。作为深耕智能产品体验设计的专业团队,我们落地超 300 个 AI 产品设计项目,沉淀出从体验设计到数据指标落地的全流程方法论,助力产品实现技术价值与用户体验的双向赋能。

新手必懂!iOS26 系统级 UI 控件全解析

涛涛 行业趋势

在 UI 设计入门阶段,掌握系统原生控件的定义、用法和设计规范,是搭建合规且易用界面的基础。随着 iOS26 对设计风格的更新,不少控件的形态、功能边界和使用场景都发生了变化。本文将以 iOS26 官方组件库为标准,全面拆解核心系统级控件,帮新手快速理清控件分类与设计要点,避开常见误区。

UI 设计新范式:从国际案例看体验与商业的融合之道

蓝蓝设计的小编 行业趋势

兰亭妙微作为一家专业的设计公司,我们从全球优质 UI 案例中提炼共性与亮点,为自身的设计实践提供灵感与参考。以下是对这组精选案例的深度解析,展现我们对 UI 设计趋势的敏锐洞察。

 

 

一、趋势洞察:当代 UI 设计的核心走向

 
  1. 情绪价值优先
     
    设计不再仅仅满足功能需求,更注重营造符合产品气质的情绪体验。
     
    • 如 Lumio 智能家居平台,用米白和浅灰的低饱和色调,营造了温暖、安心的居家情绪价值。
    • Skillery 教育平台则用活力蓝,传递出专业且充满活力的学习氛围。
     
  2. 信息架构轻量化
     
    复杂功能被拆解为直观的模块,降低用户认知负荷。
     
    • AI 营销工具将复杂的营销链路,拆解为 “点赞 - 转发 - 推广” 等具象化微交互。
    • 智能家居平台则用卡片式布局,将设备控制、能源分析等功能清晰分区。
     
  3. 微交互与动效赋能
     
    细腻的动效反馈让界面充满生命力,提升用户操作的愉悦感。
     
    • 例如,Lumio 平台的空调温度调节,通过平滑的数值与指针动画,赋予日常操作以仪式感。
    • Skillery 平台的排行榜,通过成就徽章的弹出动画,强化了用户的成就感。
     
 

 

二、分案 UI 设计亮点拆解

 

1. Lumio

 
  • 色彩系统:采用 “无色彩 + 低饱和” 配色方案,以米白为基底,浅灰做区分,避免色彩干扰居家环境,让视觉焦点回归功能本身。
  • 布局逻辑:左右分栏的 “品牌叙事 + 功能体验” 双动线设计,左侧传递产品理念,右侧直接展示操控界面,形成从认知到体验的完整闭环。
  • 控件设计:卡片式控件采用圆角 + 微妙阴影的组合,模拟真实家居设备的质感,同时保持界面的呼吸感。
 

2. Skillery 在线教育平台

  • 视觉层次:通过 “顶部激励条 + 核心用户卡片 + 完整榜单” 的三层结构,建立清晰的视觉层级,让用户第一眼就能抓住核心信息。
  • 游戏化设计:将学习数据转化为 “积分、徽章、连续天数” 等游戏化元素,并配合 “你离 TOP 10 只差 9 分” 的精准文案,将数据转化为用户行动的动力。
  • 导航系统:侧边导航采用图标 + 文字的极简设计,在保证功能完整的同时,最大化释放主内容区的视觉空间。
 

3. AI 营销工具系列

  • 材质表达:大量运用半透明玻璃态卡片和柔和渐变,营造轻盈、智能的科技感,与 “AI 驱动” 的产品定位高度吻合。
  • 流动感布局:采用非对称悬浮布局,模拟信息在虚拟空间中的流动,直观体现产品的智能特性,让抽象的 AI 功能变得可感知。
  • 功能具象化:将复杂的营销功能转化为 “Repost products”、“Promote viral advertising” 等直白的行动指令按钮,降低用户的理解成本。
 

 

三、对我们的启发

 
这些案例印证了我们的设计理念:好的设计是商业目标、用户需求与视觉美感的完美平衡。在未来的项目中,我们将持续吸收这些优秀实践,为客户创造更具竞争力的产品体验。
 

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

 

image.png

日历

链接

个人资料

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

存档