首页

兰亭妙微UI设计公司设计解析:Rythea 健康监测系统 UI/UX

蓝蓝设计的小编 移动端UI设计文章及欣赏

兰亭妙微科技公司作为专注多赛道 UI 设计的专业团队,长期深耕健康医疗、数据监测类产品的界面设计与体验优化,对医疗级健康监测系统的 UI 设计有着持续的探索与研究。Rythea 心脏健康监测系统,正是这类产品中极具参考价值的优质范本,为医疗健康类移动端 UI 设计提供了专业的思路与方向。Rythea 是一款专注于心脏健康追踪的医疗级健康监测系统,设计以专业、直观、科技感为核心,打造了覆盖移动端、穿戴设备端、PC 端的全链路用户体验,是健康医疗类产品 UI/UX 设计的优质范本。
 

 

一、视觉设计:专业与温度的平衡,打造医疗级质感

1. 品牌与色彩体系

 
以深邃黑为基底,搭配高辨识度的酒红色作为品牌主色,既传递出医疗产品的严谨专业感,又避免了纯黑界面的冰冷;用红色作为健康数据的可视化主色,既直观呼应心脏健康的产品定位,又能清晰区分数据状态,同时搭配柔和的白色、浅灰色,保障数据可读性,降低用户使用时的焦虑感。
 

2. 数据可视化设计

创新采用点阵式波形图呈现心电图、心率数据,既保留了专业医疗数据的准确性,又通过简约的设计弱化了数据的生硬感;动态粒子效果、数据点动画让健康数据更具科技感,同时不同场景(浅色 / 深色模式)下的视觉表现保持统一,适配不同使用环境。
 

3. 全端视觉风格统一

 
从移动端 App、手表端界面,到 PC 端后台,保持一致的色彩规范、字体层级、数据可视化风格与图标设计,强化品牌认知,让用户在多端切换时体验连贯无断层。
 

 

二、信息架构:全链路闭环,覆盖健康管理全场景

 
产品围绕 “心脏健康监测” 的核心需求,搭建了从数据采集、实时监测、数据分析到用户管理的完整信息架构,层级清晰、功能完整:
 
  • 移动端 / 手表端采集页:支持 ECG 心电图记录、心率实时监测,界面聚焦核心数据,操作极简,适配用户日常快速监测的场景;
  • 用户数据页:聚合用户个人信息、历史监测数据、健康趋势分析,数据分类清晰,用户可快速查看单次监测结果与长期健康变化;
  • PC 端后台管理页:整合多用户数据、设备管理、历史记录查询等功能,数据可视化全面,满足用户或医护人员的专业管理需求;
  • 注册登录页:采用简约设计,兼顾用户信息安全与使用便捷性,适配医疗产品的隐私保护需求。
 

 

三、交互体验:精准适配场景,兼顾专业性与易用性

 
交互设计完全贴合健康监测的核心场景,兼顾专业性、易用性与用户体验:
 
  • 极简采集流程:手表端监测界面仅保留核心操作按钮,用户可一键开始 / 停止监测,进度条与状态提示清晰直观,避免操作干扰;
  • 数据即时反馈:监测过程中实时显示心率、监测进度,完成后即时呈现数据结果与健康状态,降低用户等待焦虑;
  • 多端协同交互:移动端、手表端、PC 端数据实时同步,用户可在任意设备查看、管理健康数据,操作体验连贯;
  • 轻量化操作设计:界面布局简洁克制,核心数据突出展示,减少冗余信息,让用户快速获取关键健康信息,适配不同年龄段用户的使用习惯。
 

 

四、设计总结

 
Rythea 的设计完美诠释了医疗健康类产品的核心设计逻辑:用专业的视觉与数据可视化传递医疗可靠性,用简洁的交互与架构降低用户使用门槛,用全端统一的体验保障多场景使用便捷性。它不仅是一套功能完善的健康监测系统,更通过优秀的 UI/UX 设计,让专业的医疗数据变得直观易懂,为同类健康医疗产品提供了优质的设计范本。
 
兰亭妙微 UI 设计公司深耕健康医疗、移动端、企业级产品 UI/UX 设计多年,拥有丰富的多端产品设计、改版、重构经验,擅长在专业场景与用户体验之间找到平衡,打造贴合产品定位、用户友好的界面设计。如果您有健康类 App、多端协同产品的 UI/UE 设计需求,可搜索兰亭妙微官网了解更多实战案例。
 

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

 

image.png

 

超多案例!教科书级数据可视化几何设计指南

清阳 设计思维

数据可视化的核心,是点、线、面的科学组合与艺术表达。兰亭妙微UI设计公司,从平面构成底层逻辑出发,拆解点、线、面三大几何要素在图表中的作用规律,结合散点分布、柱状宽度、趋势表达等实战案例,揭示几何形态如何提升数据传达效率与视觉美感。
 
在进入图表几何设计前,先掌握设计核心基本功 —— 平面构成的点、线、面。我们视觉所见的一切形态,都可抽象为这三种基础元素:点是图形的起点与最小单元,线由点连续运动形成,是形态的高度概括,面由线围合或延展而成,承载画面主体体量、决定视觉基调。
 

 

一、点线面的几何形态特征

 
从形态学与几何学双维度,解析点、线、面的视觉语言与设计规律。
 

1. 点:一切图形的基础单元

image.png

点是相对视觉概念,指画面中面积占比极小的图形,面积增大时,点的视觉属性会逐步弱化。
 
  • 形态因素:大小、形状、色彩、肌理。点的大小由空间对比关系决定,无固定尺寸;形状不限、色彩与肌理用于强化视觉特征。
  • 几何因素:面积、位置、数量、方向。面积包含空间对比与点间比例;位置分绝对坐标与相对关系;多点点阵可形成方向感,进而构成线、面、体。
 

2. 线:点的运动轨迹

image.png

线是点的移动路径,核心表达方向与趋势
 
  • 形态因素:宽度、形状、色彩、肌理。细线轻盈精致,粗线沉稳大气;直线简洁明确,曲线柔美多变;渐变、透明、阴影可丰富层次。
  • 几何因素:位置、长度、方向。定点运动形成直线,变向运动形成曲线;两点定位决定直线属性,斜向上表上升、斜向下表下降;多点连接可形成折线、曲线与封闭图形。
 

3. 面:承载数据的视觉主体

image.png

面是有体量的形态,可由点扩大、线封闭、点 / 线密集排列三种方式构成。
 
  • 形态因素:几何形、有机形、偶然形、不规则形;棱角面硬朗尖锐,圆角面圆润饱满;虚实可通过渐变、透明度、肌理实现。
  • 几何因素:大小、位置。面积决定视觉体量,位置影响画面平衡,是图表视觉调性的核心掌控者。
 

 

二、数据可视化的几何图形分类

 
按点、线、面几何属性,可将主流可视化图表分为三大类,叠加 3D 效果可延伸至 “体”。

image.png

1. 点图:聚焦分布与相关性

image.png

以小体量单元呈现,核心表达变量关系:
 
  • 散点图:展示两个连续变量的相关性,通过点的位置判断分布规律,识别异常值,用颜色、形状区分多组数据。
  • 气泡图:散点图升级版,承载 3 个及以上变量,X/Y 轴定位置,额外变量映射气泡大小、颜色,适合多维度对比与关联分析。
 

2. 线图:聚焦趋势与变化

image.png

以线条轨迹表达数据动态:
 
  • 折线图:展示时间 / 有序类别下的连续趋势,直观体现变化速度、幅度、周期。
  • 衍生类型:阶梯图适配突变数据,雷达图、路径图用于多维度对比与轨迹呈现。
 

3. 面图:聚焦对比与占比

image.png

以封闭色块呈现,视觉体量感强:
 
  • 柱状图:分类数据对比首选,垂直柱适合少分类,水平柱适配多分类场景。
  • 面积图:折线图填充强化趋势,凸显峰谷与区间变化,多变量重叠时需控制透明度。
  • 饼 / 环 / 玫瑰图:饼图展示占比(建议≤7 类),环图提升空间利用率,南丁格尔玫瑰图适配相近数值对比与周期数据。
 

4. 体:3D 立体强化视觉

 
为点线面添加立体效果,增强体量感与视觉冲击力,适用于大屏、展示类可视化场景。
 

 

三、点线面在可视化中的实战设计技巧

 
结合数据特征,用几何形态优化图表可读性与美感。
 

1. 点图设计:用形态区分维度

image.png

  • 分类变量:用形状、颜色、肌理区分不同组别。
  • 连续变量:用渐变色映射数值区间,清晰呈现分布梯度。

image.png

2. 线图设计:用线条传递情绪

image.png

  • 线条样式:数据量少用曲线 + 标记点,柔美清晰;数据量多用直线,硬朗易读、凸显峰谷。
  • 多线区分:用颜色区分变量,用粗细、虚实对比基准值(均值、极值)。

    image.png

  • 3D 效果:添加阴影打造悬浮感,提升层次。

image.png

3. 面图设计:用比例与色彩规范视觉

 
  • 柱状图:优先矩形 / 圆角矩形,最佳柱宽:间距 = 1:2;分类数据用不同色相,有序数据用同色系明度 / 饱和度渐变。

    image.png

  • 面积图:多变量重叠时设置低透明度,保证数据可读。

    image.png

  • 饼图:按从大到小顺时针排列,用不同色相区分分类。
 

进阶技巧:斐波那契数列规范柱宽

image.png

多图表连续展示时,柱宽易凌乱。可采用斐波那契数列固定柱宽(移动端推荐:21px、13px、8px、5px、3px、2px、1px),控制梯度范围、保证韵律感,同时兼顾数据可读性。
 

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

 

image.png

掌握工业 HMI 通用,彻底告别界面杂乱低效

清阳 设计资源

兰亭妙微UI设计公司,发现很多互联网设计师、刚入行的新手,甚至自动化工程师,在工控屏、产线中控界面的布局上极易陷入误区:按钮、数据、导航随意堆砌,要么界面拥挤信息混乱,要么元素摆放毫无逻辑,既加重一线工人操作负担,又无法满足工业场景的规范性与实用性。
 
今天给大家分享一套工业领域高频复用的实用布局技巧 ——三区布局法,逐区拆解实操规范,搭配可直接落地的案例与模板,新手也能快速上手,高效解决工业 HMI 布局难题。

 


 

一、为什么工业 HMI 首选三区布局法?

image.png
工业 HMI 的设计逻辑,与互联网 App、普通 B 端后台截然不同:它不追求个性化、情感化视觉效果,核心诉求是高效、规范、无干扰,操作效率与生产安全是第一准则。
 
三区布局法能成为工业 HMI 的通用标准模板,核心源于 3 点优势:
 
  1. 贴合操作员操作习惯:固定区域划分可让操作员快速形成肌肉记忆,无需反复寻找功能,大幅降低学习与操作成本;
  2. 信息层级清晰有序:核心设备状态、关键操作按钮优先置于显眼位,次要导航与辅助功能合理归位,彻底杜绝信息堆砌;
  3. 多场景灵活适配:小屏机床触控屏、大屏产线中控屏均可基于核心逻辑调整,通用性拉满,契合工业界面标准化布局要求。
 

 

二、三区布局法:核心规范与实操要点

 

三区布局的核心逻辑是顶区定状态、中区做核心、底区保便捷,三大区域功能定位明确,不可随意混用,具体规范如下:
 

1. 顶区:状态 / 报警区 —— 一眼掌控设备安全

image.png
顶区是操作员打开界面的第一视觉焦点,核心作用是快速呈现设备运行状态与报警信息,落实工业场景 “安全优先” 的设计原则。
 
  • 高度占比:界面总高度的 10%–20%,不占用中区核心操作空间;
  • 核心内容:设备运行状态(正常 / 停机 / 故障)、分级报警信息(红 = 故障、黄 = 警告,按优先级排序)、操作员 / 时间 / 班次等基础信息;
  • 设计要点:字体清晰易读,文字与背景对比度≥4.5:1;报警信息适度突出(可轻微闪烁,避免花哨干扰);顶区少放操作按钮,防止误触引发安全风险。
 

2. 中区:核心监控 / 操作区 —— 界面核心交互载体

image.png

中区是 HMI 界面的核心区域,占比最高、操作最频繁,布局合理性直接决定整体操作效率,完美契合工业 HMI “极简高效” 原则。
 
  • 高度占比:界面总高度的 60%–70%,为布局核心重点;
  • 核心内容:遵循 “一屏一核心” 原则,监控界面展示设备运行参数、工艺流程;操作界面放置启动、暂停、故障复位等核心按钮;
  • 设计要点:核心操作按钮优先置于右侧 / 中间,适配右手操作习惯;触控热区≥48px,兼容戴手套、螺丝刀操作;核心数据优先用仪表盘、折线图可视化呈现,避免大段文字与表格堆砌。

    image.png

image.png

image.png

 

3. 底区:导航 / 常用操作区 —— 便捷切换不占核心空间

 
底区主打界面快速导航与高频辅助操作,兼顾便捷性与界面整洁度,不挤占中区核心空间。

image.png

  • 高度占比:界面总高度的 10%–20%,与顶区呼应形成对称规整布局;
  • 核心内容:监控 / 参数设置 / 故障查询等导航按钮、画面切换、亮度调节等常用辅助操作;
  • 设计要点:导航按钮统一尺寸、均匀分布,采用 “图标 + 文字” 降低识别成本;常用操作按钮与中区核心按钮做视觉区分,严格遵循工业色彩规范,避免区域功能冲突。

image.png


 

三、导航设计补充建议

 
工业 HMI 优先采用直观外露式导航,相比西门子 HMI Template Suite 的隐藏式汉堡导航,虽少了部分显示空间,但学习成本更低、交互步骤更少,更适合一线工人快速操作。

image.png

同时,不建议使用超过 2 级的导航,多级导航会导致功能定位困难,大幅降低操作效率、增加学习成本。
 

 

四、实战适配:不同场景的三区布局调整

 
三区布局法并非一成不变,可根据屏幕尺寸、场景需求灵活调整,核心逻辑保持不变:
 
  1. 小屏机床 HMI:合并顶区状态与底区导航,最大化释放中区核心显示空间;

    image.png

  2. 标准屏设备 HMI:采用标准三段式布局,底部整合固定导航与常用操作,规整易用;

    image.png

  3. 大屏产线中控 HMI:扩充中区监控内容,展示全流程可视化界面,分模块呈现产线状态、报警、生产进度等复杂信息。

    image.png

 

 

五、总结

 
三区布局法是工业 HMI 设计的基础通用解法,也是最易落地、实用性最强的布局技巧。无论新手设计师还是资深从业者,都能借助这套方法,快速搭建规范、高效、安全的工业 HMI 界面,避开布局杂乱、操作低效的常见问题。
 

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

 

image.png

UI 设计日常规范全集|兰亭妙微设计公司实战整理

涛涛 设计管理与成长

在 UI 设计交付与团队协作中,统一规范是保证界面质量、提升效率、降低沟通成本的核心基础。兰亭妙微设计结合多年项目沉淀,把日常高频使用的设备尺寸、图标输出、字体、单位、命名、设计原则、交互准则完整整理,形成可直接落地的设计规范手册,方便团队随时查阅、复用。

APP UI 弹窗设计全解|兰亭妙微设计实战总结

涛涛 设计思维

弹窗是移动端界面交互的核心组件,贯穿用户操作全流程,直接影响产品体验与转化效率。兰亭妙微设计团队结合多年项目实战,从分类、样式、场景、规范四个维度,系统梳理 APP 弹窗设计逻辑,帮助设计师精准选型、高效落地。

兰亭妙微设计|版式设计四大核心知识体系,小白也能快速上手

涛涛 平面设计

很多刚接触版式的设计伙伴常会陷入迷茫:不知道版面怎么排、元素怎么放、视觉总显得乱、没有高级感。其实版式设计并非靠感觉,而是有完整的知识体系支撑。

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

涛涛 行业趋势

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

兰亭妙微UI设计公司,用11条总结,聊聊Vision Pro如何彻底改变UX设计行业

清阳 设计思维

Apple推出的突破性产品 Vision Pro 在科技界引起了轰动,新的设计趋势即将到来。苹果首席执行官蒂姆·库克在 WWDC 2023 上自豪地展示了这款全新设备,展示了增强现实 (AR) 和空间计算的新时代。

 

凭借 Vision Pro,Apple 再次展现了其突破创新界限的能力。本文将探讨 Vision Pro 如何彻底改变 UX 设计行业并改变我们与技术交互的方式。

一、摆脱传统显示器的束缚

Vision Pro 将用户从传统显示器的限制中解放出来,开创了空间计算交互的新时代。

image.png

通过无缝融合增强现实和空间计算,苹果推出了一种独特的输入方法(结合眼动和手势),类似于鼠标或触控板。这一创新让用户体验设计师有条件打造超越屏幕限制、身临其境和直观的用户体验,开辟了无限的可能性。

彩云注:当我们大多数人已经习惯了 2D UI 的设计模式,这种新的交互方式,给了我们很多创新的空间,比如结合眼睛和手势,我们可以给用户带来更自然直觉的新体验。

二、美学与功能的结合

Vision Pro 的设计将美学与功能无缝结合。这款设备采用铝制框架和曲面玻璃,外形类似滑雪护目镜,清楚地表明它的预期用途是在家庭和办公室等受控环境中。

包含用于图像捕获的物理按钮和用于调整的数字表冠确保了直观的控制,而灵活的表带和面罩使用户专注并屏蔽外部干扰。

image.png

彩云注:在考虑未来交互方式和视觉的时候,需要多结合硬件和软件的交互及视觉效果,怎样达到最直观的操作效果。

三、增强现实和空间计算

Vision Pro 主打增强现实,使其有别于以前的混合现实设备。通过将虚拟世界和物理世界无缝融合,用户体验设计师现在可以创造增强用户对现实感知的体验。

image.png

从将信息叠加到真实世界的物体上,到创建交互式 3D 环境,设计引人入胜、情境丰富的新体验。

四、设计新的输入方式

对于 Vision Pro,用户体验设计师将需要考虑传统鼠标和触控板之外的新输入方法。

image.png

用于图像捕获的物理按钮和用于调整的数字表冠为设计师提供了交互设计的新途径。设计直观和无缝的控件对于确保流畅和沉浸式的用户体验至关重要。

五、空间音频和沉浸式声音场景

Vision Pro 的突出特点之一是它的空间音频功能。通过集成内置的“音频 pods”,苹果通过创造丰富而身临其境的声音场景来增强用户体验。

image.png

这种革命性的音频本地化方法使设计师能够从不同的方向模拟音频源,从而与数字环境进行更吸引人、更逼真的交互。

六、顶尖的硬件和技术

在底层,Vision Pro 由苹果的标准 M2 芯片和专用于视频流的新 R1 芯片提供支持。

image.png

微型 OLED 显示屏,每空间提供令人印象深刻的 64 个像素,相当于标准 iPhone 像素,确保呈现清晰、充满活力的视觉效果。此外,与蔡司合作提供定制嵌入玻璃也体现了 Apple 的包容性和可访问性体验标准。

七、EyeSight:协作体验和社交能力

苹果推出了一项名为 EyeSight 的突破性功能,利用前置显示屏向房间内的其他人展示用户的眼睛。

image.png

通过捕获初始面部扫描,Vision Pro 在弯曲的前玻璃上创建用户的“真实眼睛”。这种对个人头像的创新使用促进了更真实和身临其境的社交互动,使用户能够在数字领域进行更深层次的联系。

八、聚焦工作场景

Apple 对电子邮件和桌面等与工作相关的应用的重视表明,Vision Pro 是想主打一种生产力工具。

image.png

通过与 Microsoft Office 等现有应用和流行的线上会议服务无缝集成,这款头戴设备使专业人员能够增强他们的工作流程并更有效地协作。

这种工作第一的方法使 Vision Pro 与其他优先考虑游戏和娱乐的设备区分开来。

九、打开内容的新维度

Vision Pro 开辟了内容消费和创作的新维度。不透明显示屏允许较暗的环境,非常适合展示从 iPhone 拍摄的 2D 照片以及捕捉空间照片和视频。

image.png

影院选项为用户提供了完整大屏幕的错觉,而游戏体验则投射到虚拟大屏幕上,提供身临其境的游戏体验。

十、与内容巨头合作

苹果与迪士尼联手,正在建立令人兴奋的内容合作伙伴关系,这预示着 Vision Pro 的光明未来。

image.png

随着 Disney+ 的推出,用户可以期待一系列身临其境的互动娱乐体验。苹果和迪士尼之间的合作证明了 Vision Pro 在重新定义我们消费媒体方式方面的潜力。

十一、新的设计工具和工作流程

为了适应 Vision Pro 的独特功能,Apple 推出了 VisionOS,这是一款专为空间计算设计的新操作系统。

image.png

这个新平台提供了丰富的教育功能,包括天文学、健康和音乐创作应用。此外,现有 iOS 和 iPadOS 框架的集成确保了开发人员的无缝过渡,并为专门针对 Vision Pro 定制的广泛应用生态系统铺平了道路。

总结

凭借 Vision Pro,Apple 向用户体验设计行业的革命迈出了大胆的一步。通过将增强现实、空间计算和尖端硬件相结合,苹果公司创造了一款开启交互和沉浸新维度的设备。

随着用户体验设计师拥抱 Vision Pro 的功能,我们可以期待超越传统界面的突破性体验,使用户能够以前所未有的方式与数字内容和环境互动。

用户体验设计的未来已经到来,在 Vision Pro 的引领下,它看起来前景无限光明。

转载:优设

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

 

image.png

兰亭妙微设计|UI 设计必须死抠的细节(原创干货)

涛涛 前端及开发文章及欣赏

很多 UI 设计师软件熟练、审美在线,但产出总不够精致、不够专业、开发落地差,核心原因就是:细节没抠到位。

兰亭妙微设计|版式设计四大核心知识体系(原创干货)

涛涛 平面设计

很多刚入行的设计师朋友,软件操作很熟练、技法也学得快,但一接到真实需求就没思路、只会找参考、越抄越乱。本质问题是:缺底层理论、缺体系框架、缺落地逻辑。

日历

链接

个人资料

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

存档