首页

兰亭妙微ui设计公司分享:巧思破同质化|8 组极具创意的 UI 设计实战案例

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:随着行业设计师专业能力整体提升,线上产品视觉完成了基础品质升级,但界面同质化问题愈发突出。想要让自家产品在海量应用中形成记忆点,设计师需要从视觉风格、产品特征、交互细节多维度挖掘差异化表达。本文精选 8 个成熟 APP 落地案例,拆解可复用的创新设计思路,为 UI/UX 设计提供实操灵感。

全文导读

  1. 业务符号融合:特征化卡片设计
  2. 空间布局巧思:重构个人中心视觉
  3. Z 轴层次升级:异形卡片 + 图标叠层设计
  4. 情感氛围营销:APP 图标应景化改造
  5. 人性化交互:兼顾需求与隐私的通知引导
  6. 叙事化动效:用动态画面建立用户信任
  7. 材质光影塑造:高质感会员等级卡片
  8. 动态导航创新:可形变底部标签栏

一、业务特征化卡片设计

image.png

卡片是当下 UI 体系中最高频的信息承载形式,优势在于规整信息模块、清晰划分视觉层级,同时拥有造型、色彩、空间光影丰富的改造空间。
闲鱼租房频道给出了很好的落地参考:将房屋户型、租住相关业务符号图形化,直接融入卡片造型体系。一方面强化赛道专属识别属性,具象的房屋图形更易抓取用户视线;另一方面专属视觉符号能加深用户对平台业务的记忆,摆脱通用卡片的平淡感。

二、重构布局逻辑:巧思满满的个人中心

image.png

个人中心是所有 APP 的标配模块,也是最容易出现设计撞款的区域,绝大多数方案局限在纯色背景、标准圆角头像的固定模板里。而嘀嗒出行跳出固有框架,在空间结构上做出差异化:
 
采用超椭圆头像,搭配卡片左上角内凹造型,填补页面空白区域,让整体版面饱满均衡。既自然突出用户头像核心视觉,又规避大面积留白带来的空洞感,结构改造简洁且辨识度极强。

三、异形卡片叠层:打造立体 Z 轴视觉

image.png

卡片设计的核心价值是构建界面空间层次,而进阶设计的关键,就是深挖纵向 Z 轴的视觉表现力。
 
闲鱼副业栏目采用「局部内凹异形卡片」方案:裁切卡片一角预留图标专属位,底层衬底卡片拉开前后景深。一凹一衬双重结构强化立体层次,不规则外形区别于常规圆角矩形,能快速抓住用户视线,是低成本做出差异化的高效手段。

四、应景式 APP 图标:用视觉唤醒情绪共鸣

image.png

节日、季节主题图标早已成为主流运营手段,核心逻辑是借场景化视觉烘托氛围,联动用户感官与情感,拉近产品和用户距离。
以夏季的饿了么图标为例:整体替换冰晶质感造型,搭配上升气泡细节,视觉直接传递清凉体感。无需文字说明,就能唤醒用户夏日消暑的需求联想,温和提升用户好感,实现轻量化营销表达。

五、兼顾用户体验的系统通知引导

image.png

如今多数用户会批量关闭 APP 推送,过度消息打扰是核心痛点。如何引导用户开启通知,同时规避推送扰民,是设计需要平衡的矛盾点。
嘀嗒出行消息设置页提供了人性化解法:主按钮清晰引导开启系统通知,同时增设「一键免打扰」功能。从用户视角给出选择权,允许自主管控消息频次,消解用户对推送的抵触心理,在运营目标与用户体验之间找到平衡。

六、叙事动效:可视化流程建立用户信任

image.png

商品品质、服务保障、平台公信力是用户信任的核心来源,单纯文字说明说服力有限,而动态视觉可以把抽象保障具象化。
闲鱼数码频道用连贯动效完整演绎商品标准化链路:质检、封装、物流全流程动画叙事。相比静态文字,动态画面拥有更强场景代入感,把复杂服务流程简化为直观视觉,降低用户理解成本,同时大幅提升平台专业、可靠的感知。

七、光影质感塑造:区分层级的会员卡片

image.png

卡片创新不止局限外形结构,材质、光影、肌理的精细化处理,同样能拉开设计差距,细微质感往往能带来超出预期的精致度。
小象优品 PLUS 会员卡片做了完整质感体系设计:异形卡片适配多会员等级切换,不同等级采用差异化材质肌理做视觉区分;卡片边缘增加细腻渐变光影,强化卡片与页面背景的纵深感,高级质感直观凸显会员权益的价值感。

八、可形变动态底部导航栏

image.png

底部标签栏是用户高频操作区域,迭代空间充足,造型、图标、动态交互都能成为创新突破口。
爱奇艺底部导航针对「桃豆」功能做差异化凸起造型,强化曝光;点击「免费」频道时,凸起模块自动收缩为常规样式,搭配顺滑过渡动效。动态形变既解决凸起结构遮挡视频进度条的问题,又通过动态变化持续吸引用户注意力,兼顾功能实用性与视觉趣味性。

总结

打造产品差异化,不必一味追求颠覆性视觉风格,页面细节、模块结构、交互动态、材质光影的微小创新,同样能塑造专属产品识别度。以上 8 个落地案例均来自线上成熟产品,可直接拆解复用,希望能为各位设计师带来创作新思路。
 

转载:站酷

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

 

image.png

兰亭妙微设计实战:平淡界面快速提升设计感完整方案

涛涛 移动端UI设计文章及欣赏

很多设计师都会遇到同一个难题:功能完整、信息齐全的页面,整体观感平淡乏味,没有视觉亮点,客户总会提出 “缺少设计感” 的修改需求。本次我们以直播平台「心动榜」排行榜页面为落地案例,完整拆解从简陋基础界面到精致氛围感页面的全套优化逻辑,无需复杂特效、大幅改动业务结构,依靠分层视觉改造、主题元素适配、细节质感升级,就能让普通界面焕然一新,为各类榜单、列表类页面提供可直接复用的优化思路。

兰亭妙微创意设计分享:打造高质感界面的形式感设计手法

涛涛 设计思维

如今大量 C 端、运营类 UI 页面都陷入统一圆角矩形、标准弹窗的同质化困境,常规版式平淡乏味,很难形成视觉记忆点。兰亭妙微深耕消费互联网、文娱、电商界面设计多年,拆解多款主流成熟产品落地案例,梳理出异形弹窗、拟物会员卡、创意异形信息卡片三类经典形式感设计思路,用低成本视觉巧思提升页面氛围感与差异化辨识度,为设计师提供可直接复用的创意参考。

兰亭妙微实战总结:B 端列表页标准化设计全指南

涛涛 B端ui设计文章及欣赏

在政企、制造、金融等 B 端系统落地项目中,列表页是承载海量业务数据、批量处理单据、跳转详情的核心页面,也是企业员工每日高频操作的核心模块。兰亭妙微深耕企业后台设计多年,服务数百套管理系统后发现,大量产品存在列表层级混乱、检索逻辑低效、交互容错缺失等问题,严重拖慢业务处理效率。本文结合团队一线实战案例,完整梳理 B 端列表页设计目标、底层原则、三大列表类型、全链路交互规范,输出一套可直接复用的标准化设计方案。

兰亭妙微实战总结:B 端表单页标准化设计方法论

涛涛 B端ui设计文章及欣赏

深耕政企、工业制造、金融财税等 B 端系统设计多年,兰亭妙微服务过数百套企业后台产品,在项目落地中发现,表单是打通业务数据、实现系统管理价值的基础载体。很多企业后台因表单布局杂乱、信息层级模糊、填写容错机制缺失,大幅增加员工录入、修改数据的时间成本。本文结合团队大量实战案例,完整梳理 B 端表单页的底层逻辑、分级布局规范、页面落地细节与复杂表单解决方案,输出一套可直接复用的标准化设计思路。

长图排版总是又乱又挤?7个步骤把文字排出高级感

之晨 平面设计

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载自优设网

 

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

 

image.png

免费开源!写给设计师的印刷基础知识指南

之晨 平面设计

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

一、全文速览图

image.png

二、基础印刷工艺文档

以丝网、胶版、凹版、凸版、垫白、印专色、印金、烫金、冷烫、击凸、压凹、压纹、压痕、激光模切、浅雕、刀模、压点线、覆膜、亮膜、哑膜、珠光膜、拉丝膜、触感膜、镭射膜、上光、过油、珠光油、发泡油、替塑油、局部 uv、逆向 uv、磨砂 uv、uv 折光、光刻、猫眼、彩葱、植绒、视高迪、光栅、刮刮银、刷边等等印刷中我们常用但细节比较粗糙的印后加工知识。对于这类知识,我也是边整理边学习,例如烫金,其实之前以为的烫金工艺只有一种,实际上还有冷烫这种性价比更高的方式;覆膜和上光的区别;水性油、油性油和 uv 油的区别;磨砂膜、磨砂 uv 和逆向 uv 的工艺区别和呈现效果都是不一样的;还有谷子经常使用的 uv 折光和光刻的区别,猛一看效果有点类似,但成本和质感天差地别。

image.png

image.png

image.png

image.png

image.png

image.png

三、基础印刷材质文档

以铜版纸、哑粉纸、轻涂纸、胶版纸、超感纸、高阶映画、白卡纸、灰底白板、双灰板、金银卡纸、瓦楞纸、相纸、刚古纸、珠光纸、金葱纸、触感纸、镭射纸、烫透纸、日式和纸、牛皮纸、羊皮纸、无酸纸、宣纸、洒金纸、云龙纸、落水纸、植物纸、绵纸、种子纸、咖啡纸、拉菲纸、蚕丝纸、大地纸、东巴纸、离型纸、淋膜纸、硅油纸、鸡皮纸、蛋壳纸、安格纸、布纹纸、凤尾纸、手揉纸、字典纸、洋葱纸、硫酸纸、拷贝纸、糯米纸、复写纸、热敏纸、美纹纸、水松纸、皱纹纸、杜邦纸、新闻纸、金银箔等等印刷中我们常用但细节比较粗糙的材质知识。其中很多知识也比较刷新我的认知,比如说道林纸其实也有白黄之分;蒙肯纸其实是一种专门的轻型纸,但因为比较早结果成了轻型纸的代称;超感纸、离型纸、淋膜纸都是一类纸的统称,有很多不同类型;布纹纸居然也有那么多种纹路。其中也根据常用的物料给到了纸的选择和克重建议,都是非常实用的。

image.png

image.png

image.png

image.png

image.png

image.png

四、基础印刷术语文档

以印刷、油墨、制版、印前和印刷术语为主,涵盖了很多名词解释,例如丝网、胶版、凹版、凸版、柔性、移印、数码、喷墨、激光、艺术微喷、riso、UV、转印、四色油墨、广色域油墨、专色、潘通、香味、荧光、夜光、热敏、微胶囊、磁性、可食用、大豆、水性、油性、生物基、溶剂、挥发干燥、氧化聚合、热固化、渗透干燥、能量固化、菲林、ps 版、ctp、光聚合柔性版、光聚合树脂版、金属基柔性树脂版等印刷常见知识点,也解释了拼版、纸张开法、单版、自翻版、正反版、天地版、出血、套印、叠印、印刷色、套色顺序、分版、分色、印前检查、完稿、网点角度、莫尔条纹、实地、绝网、加网、咬口、印刷标记、色令等等印刷中我们常用但细节比较粗糙的印刷知识。例如套色顺序和网点角度,居然有这么多学问是我没想到的,网上说的我们学的很多知识都是精简过的,甚至不是最标准的;例如暖色和冷色建议的网点角度就是不一样的;套色顺序也是;还有实地油墨也可能有空隙;绝网很多人都没听过;黑色有些人知道四色黑单色黑,但具体用在哪是不清楚的。可见隔行如隔山,所以我把这些问题总结在一起,在文档中都能找到答案。

部分预览:

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

转载自优设网

 

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

 

image.png

 

兰亭妙微设计分享:AEROX F1赛车赛事实时策略监控大屏整套设计拆解

之晨 交互设计及用户体验

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

一、项目定位与行业现存痛点
产品简介
AEROX是面向F1方程式车队赛事指挥团队的专业实时策略监控大屏系统,专为正赛实时战术调度打造,分为三大可视化模块:赛道全局战术面板、整车机械硬件数字孪生遥测面板、车手脑电波与人体生物体征监测面板。系统实时同步赛道地图、天气雷达、轮胎损耗、动力单元温度、空气动力学下压力、G值负荷、车手心率脑波等上百项核心数据,AI同步推演夺冠概率、安全车时差、轮胎更换窗口期,为赛事策略师提供一站式实时决策可视化平台。

截屏2026-06-30 11.00.25.png

F1赛事车队监控行业痛点
1. 赛事数据维度繁杂割裂:赛道排名、气象、轮胎、动力、车手体征分属多套独立系统,策略师需要切换多块屏幕整合信息,错失战术调整窗口;
2. 机械硬件参数晦涩抽象:发动机、刹车、悬挂、冷却系统纯数字参数无可视化载体,无法直观定位高温、负荷过载故障;
3. 缺少车手人体负荷监测维度:高速过弯G值、脑波专注度、心率脱水状态无法实时同步,难以预判车手体能极限;
4. 气象与赛道路况联动缺失:降雨、路面湿度数据无法和轮胎损耗曲线联动,难以精准预判换胎时机。

二、产品完整赛事战术决策闭环
整套大屏三大页面数据互通,形成赛事观测→硬件诊断→人体负荷评估→AI战术推演完整决策闭环
1. 赛道全局战术监控层:等高线赛道地图可视化全场车手位次,叠加多普勒气象雷达、轮胎温度磨损、分段时差、AI胜率曲线,实时推送赛道突发路况预警;
2. 整车机械数字孪生遥测层:线框全息3D赛车模型可视化气流、动力单元、刹车、悬挂、冷却系统,同步展示温度、压力、下压力、能耗实时曲线,识别硬件过载风险;
3. 车手生物体征监测层:3D人脑、人体骨骼全息模型展示脑电波频谱、侧向纵向G负荷、脊柱压迫、心率体温血氧,实时监控车手体能与专注度;
4. AI策略推演层:基于实时全量数据自动计算夺冠概率、最佳换胎窗口、安全车时差,输出标准化战术日志。

截屏2026-06-30 11.00.30.png

 三、三大核心页面模块设计拆解
 模块1:银石赛道全局赛事战术总览大屏
中心等高线赛道地图+左右双侧多数据卡片网格深色专业布局
1. 顶部赛事全局状态栏:当前圈数、总圈数、比赛时长、赛道绿旗状态;
2. 中心等高线赛道载体:霓虹分色赛道线路区分高速弯与低速段,车手头像直接标注实时位次;
3. 左侧数据集群:多普勒气象降雨雷达、四轮轮胎温度摩擦矩阵、三种配方轮胎损耗衰减曲线;
4. 右侧数据集群:AI实时夺冠概率曲线、分段安全车时差矩阵、赛事实时战术日志信息流;
设计价值:赛事策略师单屏掌握全场位次、天气、轮胎、胜率全部关键信息,无需切换页面快速制定进站策略。

截屏2026-06-30 11.00.09.png

模块2:整车机械硬件全息数字孪生遥测页面
居中透明线框3D赛车模型,左右对称六组硬件监控卡片
1. 中心气流可视化全息赛车:霓虹流线展示整车空气动力学气流走向,标注DRS、冷却、悬挂工作状态;
2. 左侧硬件分区:ERS混动冷却储能状态、前后翼空气动力负荷图表、整车下压力径向分布环形图;
3. 右侧硬件分区:动力单元缸体温度压力、悬挂行程减震负荷、碳刹车盘温度热力网格;
每一组硬件模块均搭配实时波动折线图表,异常高温、高负荷自动高亮警示。

截屏2026-06-30 11.00.42.png

模块3:车手生物体征脑波监测页面
居中全息人脑3D模型,四周分布人体负荷与生命体征卡片
1. 核心脑电波频谱图表:分层展示阿尔法、贝塔、伽马脑波频率,实时判定车手专注度;
2. G力人体负荷模块:三维G值坐标曲线、脊柱颈部压迫热力人体骨骼图,直观显示高速过弯带来的身体损伤负荷;
3. 右侧生命体征矩阵:实时心率、脱水度、体温、血氧、呼吸频率,全部搭配动态波形可视化。

 

四、视觉设计体系:深色全息赛博竞速专业大屏风
1. 色彩系统
- 基底底色:极致哑光纯黑基底,赛场昏暗指挥室环境下降低屏幕反光,高亮数据辨识度拉满;
- 竞速主霓虹色:冰蓝、橙金、电光紫三色全息线条,分别对应赛道气流、高温硬件、气象降雨,层次区分清晰;
- 风险警示色:浅红用于刹车高温、脊柱高负荷、硬件过载预警,快速捕捉故障风险点;
- 指标基准色:浅青、浅绿代表硬件正常工况、车手健康平稳体征。

截屏2026-06-30 11.00.52.png

 2. 图形与可视化规范
1. 半透明线框全息3D数字孪生:整车赛车、人脑、人体骨骼轻量化线框建模,霓虹流线可视化气流、电路、生物神经信号;
2. 多类型专业竞速图表:等高线赛道地图、径向环形下压力分布图、分层频谱脑波图、热力温度矩阵、分时衰减曲线;
3. 极简无衬线科技卡片:细窄分割线、极低柔和内阴影,不占用视觉焦点,突出核心数值与动态曲线。

 3. 文字层级规范
硬朗无衬线工业竞速字体,三层清晰信息层级:超大加粗核心温度/胜率/G值数字→模块功能标题→工况辅助小字,远距离指挥室也能快速读取关键赛事数据。

 五、产品商业与赛事落地价值
1. 全维度数据一体化整合:赛道、气象、机械、车手体征四大赛事核心数据统一单屏展示,大幅缩短策略决策反应时间;
2. 全息3D降低专业门槛:线框孪生模型把抽象动力、气流、人体负荷参数具象化,工程师快速定位硬件与体能隐患;
3. 适配赛场暗光环境:纯黑低反光基底,长时间盯屏不易视觉疲劳,不干扰指挥室夜间赛事调度;
4. AI数据联动推演:气象、轮胎、硬件数据自动联动计算换胎与超车战术,辅助车队做出最优赛事决策;
5. 双维度监测保障完赛:同步监控车辆硬件寿命与车手体能极限,提前规避机械故障、车手体能透支导致退赛。

 

图片来自Behance

 

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

 

image.png

兰亭妙微ui设计公司分享:不一样的标签页设计

清阳 设计资源

兰亭妙微ui设计公司分享:标签页是 UI 设计里高频通用的基础组件,不管是面向普通用户的 C 端产品,还是企业后台类 B 端系统,几乎都会用到。
 
市面上绝大多数标签页设计同质化严重,本篇整理多款差异化标签页方案,帮大家跳出固化设计思路,优化页面视觉层次与用户操作体验。

一、创意标签页基础样式分类

1. 图标 + 文字组合式

image.png

图标与文字采用上下分层排布,选中标签搭配圆角填充底色做区分。

image.png

 
图文搭配的形式能丰富页面视觉层次,弱化单调文字标签的乏味感,兼顾识别性与精致设计感,适配首页、分类导航等场景。

2. 主标题 + 副标题双层信息

image.png

image.png

标签分为上下两行:上层为主导航标题,下层放置精简副标题。
 
副标题可补充品类、数量、说明等关键辅助信息,用户无需点击就能快速读懂标签含义;选中 / 未选中状态依靠文字色差做区分,简洁清爽,适合内容信息量大的后台、资讯类页面。

3. 异形选中态标签

image.png

image.png

打破常规矩形底框,把选中标签的背景设计为不规则异形造型,常搭配卡片式布局使用。
 
造型独特、辨识度极高,能形成强烈视觉差异化,适合潮流 APP、活动专题、创意运营页面,强化页面专属设计美感。

二、多标签场景:标签数量超 5 个的适配方案

实际项目中经常出现标签数量过多、一行放不下的问题,网页与移动端分别有成熟落地解法:
  1. PC 网页端

    image.png

     
    在标签栏左右两端增加翻页箭头按钮,点击即可横向滚动,查看隐藏标签,交互直观、适配后台管理、网页商城等宽屏场景。
  2. 移动端 APP
     

     

    方案一:横向滑动标签栏,依靠左右滑动手势浏览全部标签,是电商、资讯类 APP 最常用的轻量化方案;
     image.png
    方案二:搭配下拉收纳菜单,超出可视区域的标签收拢在下拉面板内,适合标签总量极多、分类繁杂的产品。
     

    image.png

    image.png

     

    可根据自身产品业务量级、用户操作习惯灵活选用。

结语

以上就是本次标签页差异化设计的全部分享,希望能给各位 UI 设计师提供新的设计思路,落地更出彩的界面导航组件。感谢阅读与支持!
 
 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:Figma 组件系统化搭建完整思路

清阳 交互设计及用户体验

一、前言:组件化是设计系统的核心基石

兰亭妙微ui设计公司分享:搭建标准化设计系统时,组件化是保障视觉统一、提升团队产出效率的核心方案。早年多数 UI 设计师依赖 Sketch 完成组件库搭建,但随着企业团队规模扩张、多端业务同步迭代、跨地域协作需求激增,Sketch 在跨文件同步、多端适配、动态主题管理、多层级样式联动等场景的短板逐渐凸显。
而 Figma 凭借原生云端协作、灵活的组件嵌套与变体体系、完备的变量 Token 能力,成为现代设计系统搭建的最优载体,核心优势体现在两点:
  1. 组件支持多层级嵌套与多维变体,可快速承载复杂交互、多状态切换场景;
  2. 内置变量与样式模式,一键实现全局主题切换,适配黑白模式、品牌换色等需求。
借助 Figma 搭建标准化组件,不仅能提升素材复用率,更能从根源降低后期迭代、样式维护的成本。本文将从 Figma 核心变量能力、色彩体系规范、四层组件分层架构、实战案例对比四个维度,完整拆解一套可落地、易维护的 Figma 组件库搭建方法论。

 

二、Figma 核心底层能力:变量系统(参数化组件)

2.1 变量系统核心逻辑

image.png

变量系统本质是设计属性参数化:将颜色、字号、间距、圆角、文案等视觉属性抽离为独立可复用数据源,所有 UI 元素统一引用数据源,实现一处修改、全局同步更新。
 
Figma 支持四类基础变量:颜色、数值、字符串、布尔值。我们可以通过分层设计 Token 构建变量依赖关系,把基础色、功能色、组件色逐层关联,大幅简化组件搭建与迭代流程。

2.2 Sketch vs Figma 色彩变量核心差异

image.png

image.png

  1. Sketch
     
    仅支持图层样式 / 基础色值封装,本质是静态色值快照,不存在层级依赖关系;无法实现「变量引用变量」,若需要联动改色,只能逐个组件手动替换,多状态、多类型组件维护成本极高。
     
    举个例子:若 Toast 内图标色需要统一调整,Sketch 需要逐个修改所有 Toast 实例的图标图层,涉及上百种组件状态时工作量会指数级增长。
  2. Figma
     
    变量是独立数据载体,支持多层级嵌套引用,任意图层(填充、描边、文字、阴影)均可绑定变量;只需修改源头变量,所有引用该数据的组件、页面会自动同步更新,批量改色、换主题仅需一步操作。

三、组件库底层规范:基于可感知访问性的色彩体系

色彩是组件库的基础骨架,搭建前必须建立符合人眼视觉规律、满足无障碍规范的色彩体系,核心标准为可感知访问性

image.png

3.1 传统 HSL/HSB 色彩模型的先天缺陷

目前行业常用的 HSL、HSB 存在致命短板:同等饱和度、同等明度数值下,不同色相给人眼带来的感知亮度完全不一致。
  1. 人眼对不同波长色彩敏感度不同:彩虹渐变条中,黄绿色视觉亮度更高,蓝色、紫色观感更暗沉;

    image.png

  2. 同等明度数值下,黄色文字与紫色文字放在同一背景,对比度差异巨大,黄色文字可读性显著更低;

    image.png

  3. 明度趋近 0% 或 100% 时,饱和度视觉效果大幅衰减;50% 明度区间,色彩鲜艳度观感最强;

    image.png

  4. 受亥姆霍兹 - 科尔劳施效应、阿布尼效应影响,色相偏移时感知亮度会出现无规律波动。
基于 HSL/HSB 搭建的色板,会出现组件对比度失控、文字可读性不达标问题,即便套用 WCAG 对比度检测,也无法修正人眼感知偏差,难以满足 APCA 新一代无障碍色彩规范。

3.2 最优解决方案:OKLCH 色彩空间

为解决传统色彩模型感知亮度不均的痛点,CIE(国际照明委员会)先后推出 CIELAB、CIEHSL 等模型,经过多轮算法迭代后,OKLCH成为当下搭建无障碍、标准化色板的最优色彩空间。
 
OKLCH 以人眼真实视觉感知为基准统一明度,所有色相在相同明度参数下观感亮度一致,能稳定输出符合 WCAG、APCA 无障碍标准的色阶,从底层规避组件文字、按钮对比度失效问题,是企业级组件库色彩体系的首选方案。

四、分层嵌套架构:四级组件模块化搭建思路

掌握变量与色彩规范后,核心是搭建清晰的组件嵌套层级,遵循「自下而上、积木化组合」逻辑。
 
所有页面容器均可拆解为标题区、内容区、操作按钮区三大模块,模块内部由更小单元组件组合而成;底层单元向上嵌套组合成复合组件,复合组件再拼接为完整业务页面。这套分层逻辑有三大优势:
  • 底层组件独立可控,单点修改全局同步,大幅降低迭代成本;
  • 各级组件变体自动向上继承,仅需少量基础变体即可组合出海量场景;
  • 分层逻辑贴合前端开发组件化思维,实现设计与开发对齐,减少沟通损耗。

层级 1:原子组件(最小基础单元)

  1. 定义:不可再拆分的最小 UI 元素,是整个组件库的底层素材,例如基础按钮、单选框、输入框、图标、分割线、标签等;
  2. 规范:所有视觉属性统一绑定全局设计 Token(颜色、字号、间距、圆角变量),保证全局风格统一;
  3. 作用:作为上层所有组件的基础素材,不可单独用于完整业务页面。

层级 2:子组件(布局组合模块)

  1. 定义:由多个原子组件嵌套组成的局部布局单元,服务于父组件内部区块;
  2. 典型案例:弹窗标题栏、弹窗底部操作区、表单条目(标题 + 输入框 + 报错提示)、卡片头部;
  3. 作用:可被上层父组件调用,单独封装区块样式与变体,实现区块复用。

层级 3:父组件(独立完整功能模块)

  1. 定义:由原子组件 + 多类子组件组合而成、可独立使用的完整 UI 模块;
  2. 典型案例:弹窗、图片预览弹窗、全局提示 Toast、下拉选择器;
  3. 能力:支持多维度变体配置(尺寸、状态、主次类型、是否带关闭按钮),可直接在页面中实例化使用。

层级 4:业务组件(业务场景页面片段)

  1. 定义:整合父组件、子组件、原子组件,适配特定业务场景的复合页面片段;
  2. 典型案例:完整新增表单、商品卡片列表、订单弹窗、用户信息模块;
  3. 作用:直接交付业务页面使用,面向业务设计师快速落地页面,无需重复拼装基础模块。

五、实战对比:弹窗组件看 Figma 组件化效率优势

以业务高频组件「弹窗」为例,直观对比 Sketch 与 Figma 的封装、维护成本差距:

5.1 Sketch 组件封装痛点

image.png

Sketch 不支持多维变体联动,所有标题、内容、按钮的组合样式必须全部穷举封装为独立组件。
 
假设弹窗标题区 3 种样式、内容区 4 种样式、底部按钮区 5 种样式,全部组合需要封装 3×4×5=60 个独立组件;
 
若后续需要修改按钮圆角、标题字号,必须逐个打开 60 个组件逐一调整,多页面复用场景下漏改、错改概率极高,维护成本极高。

 

5.2 Figma 模块化嵌套实现方案image.png

Figma 采用「底层子组件变体 + 上层组合调用」逻辑,无需穷举全部组合:
  1. 分别封装三级独立子组件:标题区 3 种变体、内容区 4 种变体、按钮区 5 种变体,仅需制作 3+4+5=12 个基础子组件;
  2. 将三类子组件嵌套进弹窗父组件,设置多维变体切换面板,自由搭配不同标题、内容、按钮组合;
  3. 叠加尺寸、弹窗类型、是否遮罩等控制维度,仅靠 12 个基础单元即可衍生上百种弹窗形态。

5.3 迭代维护优势

后续视觉改版时,仅需修改底层按钮 / 标题原子组件,所有嵌套该单元的子组件、弹窗父组件、业务页面会自动同步更新,无需人工排查修改,从根源减少重复工作量。

六、总结:积木式模块化设计系统核心价值

Figma 组件搭建的核心思路可概括为组合式积木模块化设计,依托变量数据驱动、多层级组件嵌套、多维变体三大核心能力,构建一套高复用、易扩展、视觉统一的设计系统。
对比传统 Sketch 工作流,Figma 组件化体系的价值覆盖全链路:
  1. 设计提效:减少 90% 重复组件封装工作,变体自由组合,无需穷举所有场景;
  2. 维护轻量化:变量 + 嵌套联动,单点修改全局同步,降低改版迭代成本;
  3. 协作标准化:云端组件库实时同步,全团队共用一套视觉规范,消除页面视觉偏差;
  4. 产研对齐:分层组件逻辑与前端组件架构完全匹配,降低设计交付、还原沟通成本。
设计师无需耗费大量时间处理重复素材搭建,可将更多精力投入业务体验、创意设计等高价值工作。
 

转载:站酷

 

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

 

image.png

日历

链接

个人资料

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

存档