首页

兰亭妙微原创作品 | 胖东来线上商城UI拆解

丽洁

胖东来不仅是一个超市,更是一种生活方式的标杆。当我们将这种线下体验搬到线上时,面临的挑战是:如何在方寸屏幕间,既保留“对标一流”的品质感,又传递出“自由·爱”的品牌温度?

今天分享兰亭妙微团队为胖东来打造的线上商城APP全案设计,看我们如何用设计语言翻译这份独特的品牌基因。

 

一、视觉风格:去“电商味”,做“温润感”

市面上的电商APP大多大红大紫,生怕你不买。但胖东来的气质是内敛、质朴的。

配色系统上,我们摒弃了高饱和度的促销色,选用了低饱和度的茶褐、麦色、原木色;质感营造上,采用大面积留白 + 浅肌理纸张背景,模拟真实纸张的阅读触感。让用户打开APP不是想“剁手”,而是像翻开一本杂志一样放松。

 

二、架构重构:购物与文化“双轨并行”

常规电商把文化内容藏在角落,但在胖东来,文化才是灵魂。

我们采用双架构页面,将“商品售卖”与“品牌文化”分区落地;打造沉浸式体验,首页不仅仅是货架,更是“东来讲堂”、“幸福生命手册”的展示窗。用户在浏览商品间隙,能自然读到品牌理念,实现“润物细无声”的文化输出。

 

三、交互细节:克制营销,回归服务

胖东来的核心是“对人好”,设计也要体现这一点。

轻量化运营方面,弱化夸张的价格标签和倒计时,用规整的模块化网格提升选购效率;精细化体验上,详情页清晰拆分多规格阶梯售价(多买多惠直观可见);下单页提供快递、同城、自提三种模式,完美匹配线下门店优势;会员体系方面,个人中心不仅是订单管理,更集成了积分打卡、心愿单等互动功能,增强用户粘性。

 

好的设计不仅仅是好看,更是价值观的载体。在这个项目中,我们试图在“商业效率”与“人文关怀”之间找到完美的平衡点。希望每一位打开这个APP的用户,都能感受到那份来自胖东来的真诚与温暖。

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

8.jpg

9.jpg

10.jpg

11.jpg

12.jpg

13.jpg

14.jpg

15.jpg

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

 

image.png

长图排版总是又乱又挤?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

兰亭妙微设计分享:AURA算力节点数字孪生监控Web后台+移动端整套设计拆解

之晨 系统UI设计文章及欣赏

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

截屏2026-06-30 11.01.17.png

 一、项目定位与行业现存痛点
产品简介
AURA是面向Web3算力节点运维者的全链路硬件监控管理平台,分为PC网页管理后台与手机移动端APP两大端口,依托硬件3D数字孪生可视化载体,整合实时硬件遥测数据、算力波动曲线、散热温控参数、网络流量、挖矿收益资产、全球节点地图六大核心模块,解决分布式算力机房远程运维需求,支持远程诊断、冷却参数调节、节点重启、资产质押提现等操作,统一整合多设备、多指标分散数据,为节点运营者提供单一可视化管控入口。

截屏2026-06-30 11.02.02.png

Web3算力硬件运维四大行业痛点
1. 硬件数据极度碎片化:温度、风扇转速、算力、带宽、收益分散在多款工具,运维人员需要切换多个系统查看指标,故障预警存在延迟;
2. 专业硬件晦涩难懂:电路板、水冷、算力参数纯数字堆砌,无可视化硬件模型,新手运维无法直观定位故障部件;
3. 缺少随身移动端管控:机房运维依赖固定PC,外出无法实时监控节点状态、接收高温宕机预警;
4. 业务数据割裂:硬件性能监控与代币收益、质押资产管理分属两套系统,无法联动分析算力产出收益效率。

二、产品完整运维业务闭环
整套产品PC+移动端双端打通,形成硬件监控→故障诊断→远程调控→收益管理一体化闭环
1. PC总览仪表盘层:3D拆解式硬件数字孪生作为视觉核心,一站式展示温度、负载、算力、流量、冷却系统全局指标,多图表实时展示24小时波动趋势;
2. 硬件远程诊断层:读取风扇、水冷、芯片负载实时参数,一键执行全设备诊断,识别高温降频、网络卡顿等隐患;
3. 全球节点管理层:点阵地图可视化全球分布节点,统一查看在线数量、网络延迟、总流量;
4. 资产收益管理层:实时统计挖矿产出代币、质押周期收益,支持质押、提取、查看历史收益流水;
5. 移动端随身管控层:复刻PC核心监控功能,户外随时查看硬件状态、接收故障推送、远程调节冷却参数。

三、核心页面模块设计拆解
模块1:PC端硬件总览Dashboard(核心运维页面)
左侧固定功能导航栏+右侧多卡片数据网格布局,平衡科技专业感与数据可读性
1. 侧边完整功能导航:总览、硬件中心、AI任务、全球地图、财务钱包、质押、治理、诊断、设置、支持,覆盖全运维需求;
2. 3D数字孪生主视觉卡片:透明拆解式硬件模型,光纤、水冷管路霓虹线条可视化硬件结构,直接标注温度、风扇转速核心参数;
3. 多维度硬件指标卡片:核心负载、在线节点总数、网络延迟、总流量、水冷冷却效率独立轻量化卡片,超大粗体展示关键数值;
4. 算力趋势分层折线图:区分活跃算力、硬件上限、温控降频三条曲线,直观查看全天算力波动;
5. 水冷系统可视化模块:3D水冷设备搭配流速、进出口温度参数,支持一键增强冷却调节。
设计价值:运维人员打开首页即可完整掌握单台节点全部硬件健康状态,无需逐层翻阅子页面定位故障。

截屏2026-06-30 11.01.45.png

模块2:移动端硬件监控首页
单列垂直轻量化卡片布局,适配手机窄屏单手操作
1. 顶部节点状态栏:设备名称、在线状态、运维用户头像;
2. 缩小版3D硬件数字孪生缩略图,直观展示设备整体;
3. 核心健康指标卡片:设备在线率、芯片温度、风扇转速简洁陈列;
4. 核心行动按钮:一键硬件诊断,快速排查硬件隐患;
5. 底部五宫格常驻导航:硬件、算力、资产、全球地图、个人中心。

截屏2026-06-30 11.02.11.png

模块3:移动端算力&收益专项页面
1. 算力监控页:完整复刻PC端算力折线图表,实时记录算力波动、后台运行任务日志,展示芯片负载、带宽参数;
2. 资产收益页:总代币余额、当日收益、周期奖励进度条,质押、提现两大核心操作按钮,历史挖矿收益流水列表;
3. 全球节点地图页:点阵分布图展示全球节点分布,汇总在线总量、网络延迟、流量数据。

截屏2026-06-30 11.02.17.png

模块4:用户调研推导页面
纯白极简信息卡片,量化行业运维痛点,用调研数据支撑产品设计逻辑,分为用户痛点占比图表、运维人员访谈语录两大板块,清晰展现碎片化数据、高温延迟预警两大核心行业矛盾。

四、视觉设计体系:浅白极简赛博科技算力风
 1. 色彩系统
- 基底底色:纯净哑光浅灰白基底,长时间查看大量数据图表无视觉疲劳,适配机房暗光、户外强光多场景;
- 科技主色:电光绿、冰蓝霓虹,用于3D硬件光纤、水冷管路、正向增长数据,代表正常运行、算力收益;
- 警示区分色:浅红线条用于算力上限、温控降频预警曲线,直观提示硬件负荷临界值;
- 行动按钮色:深紫渐变深色按钮,用于诊断、质押、提现等高权重操作,视觉层级突出。

 2. 图形与可视化规范
1. 拆解式3D数字孪生硬件模型:半透明电路板、水冷、风扇立体建模,霓虹管线区分电路与冷却回路,将抽象硬件参数可视化;
2. 轻量化分层折线图表:细线条低饱和度配色,多曲线同屏对比无视觉杂乱;
3. 极简圆角功能卡片:低弱柔和阴影,模块分区干净利落,无厚重边框压抑感;
4. 线性极简图标:芯片、风扇、网络、钱包统一线性科技图标,视觉体系高度统一。

3. 文字层级规范
无衬线现代工业字体,三层清晰信息层级:超大粗体核心硬件/收益数值→模块标题→参数辅助小字,远距离快速抓取关键运维数据。

截屏2026-06-30 11.01.40.png

五、产品商业与用户落地价值
1. 数字孪生降低运维门槛:3D拆解硬件模型搭配实时标注参数,零基础运维人员也能看懂硬件故障位置;
2. 双端数据完全同步:PC机房深度管控+手机随身预警,外出实时接收高温、掉线故障提醒,减少算力停机损失;
3. 全业务数据统一整合:硬件监控、算力统计、代币资产三大业务合并一套系统,无需切换多款工具;
4. 量化行业痛点的产品逻辑:基于真实运维人员访谈数据设计页面,精准解决数据碎片化、预警滞后核心痛点;
5. 轻量化界面适配长时间办公:浅白低饱和基底,机房长时间盯屏幕不易视觉疲劳,数据分区清晰降低信息负担。

 

图片来自Behance

 

 

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

 

image.png

设计的原点:依托用户研究,挖掘真实设计洞察|兰亭妙微设计课堂

涛涛 用户研究

在 UI、工业与数字化产品设计全流程里,用户研究是指引设计方向的核心标尺,能彻底规避设计师闭门造车的自嗨式创作。兰亭妙微深耕多行业设计服务十六年,经手大量消费数码、政企系统、户外用品项目,我们始终坚持:所有成熟设计方案,都建立在完整用户调研与深度需求洞察之上。本文结合落地经验,拆解用户研究完整链路,讲解调研方法、数据梳理工具,以及如何把调研结论转化为可落地的设计创新点。

以细节赋予共情,有温度的设计方能留住用户|兰亭妙微设计观察

涛涛 用户研究

当下数字化产品赛道日趋饱和,同类产品在功能、性能层面差距不断缩小,单纯的界面美观、流程顺畅早已无法构建差异化竞争力。兰亭妙微深耕 UI/UX 设计多年,服务消费、文旅、政务、医疗等数百款产品,在长期落地实践中得出结论:能真正打动、留存用户的核心,是藏在交互、视觉、场景细节里有温度的情感化设计。它跳出冰冷的工具逻辑,以用户真实情绪为核心,让产品不再只是操作载体,而是能感知、共情用户的陪伴载体。

UI 设计师进阶核心:不可或缺的产品思维|兰亭妙微设计视角

涛涛 设计思维

不少 UI 从业者都会听过 “设计师要具备产品思维”,但多数人简单将其等同于产品经理的需求梳理能力,难以理解它在设计工作中的实际价值。兰亭妙微深耕 UI/UX 全案设计多年,服务过户外工具、企业管理、生活服务类多款产品,结合大量真实项目落地经验,拆解产品思维的底层逻辑、区分设计优化与产品方案,并结合实战案例讲解落地方法,帮助设计师跳出单纯画图的执行思维。

日历

链接

个人资料

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

存档