首页

兰亭妙微ui设计公司分享审美积累 | Momento 社交 App UI/UX 设计

丽洁 移动端UI设计文章及欣赏

让“认识附近的人”,先变成看得见的生活场景。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Momento,一组围绕附近发现与即时分享展开的社交 App 设计。照片、头像与活动把抽象的社交功能变成具体体验。


一、项目背景:让初次进入的用户理解连接的价值
附近的人、在线状态、生活分享和本地活动,各自承载不同期待。Momento 用连续的新手引导逐一介绍这些场景,让开始使用之前的认知过程保持轻松。

图片5.png图片6.png

图 1  发现身边朋友的引导

照片拼贴先建立真实的社交情境,标题再点出附近发现的价值。深色空间里,人物与蓝色按钮形成清晰焦点,顶部进度与跳过入口则保留轻松进入的余地。

图 2  在线与距离的关系展示

中心头像与周围节点把附近关系画成空间图形,距离与在线的概念因此更有画面感。文字、按钮与进度延续上一屏的位置,场景在变,浏览节奏保持熟悉。

 

二、设计策略:用稳定框架呈现不同社交情绪
①信息架构:每屏聚焦一种行为,从发现走向分享,再过渡到活动与登录。②视觉语言:黑色与深蓝衬托人物摄影,明亮蓝色标记主动作;圆角、头像与节点图形形成一致的视觉节奏。

Momento Social | 界面细节与设计启发    

图片7.png图片8.png

图 3  分享生活的内容预告

节点与头像继续作为主要图形,围绕分享生活展开新的叙事。与前一屏相近的构图让引导保持连贯,不同标题则为相似画面赋予清楚的功能含义。

图 4  本地活动与登录衔接

活动卡片预告进入产品后可以探索的内容,底部动作转向登录,并保留注册入口。前面的社交想象在这一屏落到开始使用,图片与动作之间的过渡十分自然。

③场景化交互:进度、跳过与下一步的位置持续出现,主要变化集中在图片和场景说明。最后一屏转入登录与注册,让前面的价值介绍接上实际入口,整段引导有明确的推进关系。

 

三、设计启发:新手引导也可以是一段有节奏的产品叙事
每一屏给出新的社交理由,同时保留熟悉的按钮和版式。摄影负责建立情绪,短标题负责解释用途。做社区或社交产品时,这种把功能讲成生活场景的表达,比逐项罗列模块更有画面感。

如有社交、兴趣社区类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微交互设计公司审美积累 | Rezo 房产服务 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

用深色与荧光绿,为复杂找房流程建立清楚的方向。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Rezo 房产服务 App 设计。找房涉及位置、价格、房型与配套,发布房源又需要填写大量属性。
一、项目背景:让多条件决策有条理地展开
面对这类信息密集的服务,界面要帮助用户缩小范围、了解房源,再找到联系或发布入口。Rezo 将筛选、详情、通知与表单组织在统一的视觉系统中。

     

图片1.png

图片2.png

图 1  通知列表与未读状态

通知页用头像、事件说明和时间组成整齐列表,全部、未读与批量处理入口集中在上方。暗色卡片保持轻微层差,荧光色点出关键动作,密集消息也有清楚的扫读节奏。

图 2  多条件筛选面板

租买切换放在顶部,房产类型、发布者与房龄等条件依次分组。底部荧光绿按钮收束整屏信息,各种选项沿用统一形态,让复杂筛选拥有明确的起点与终点。

 

二、设计策略:用鲜明主动作统合复杂信息
①信息架构:筛选条件分组,房源详情逐层展开,发布表单按属性收集信息。②视觉语言:深色背景衬托房产摄影,荧光绿集中提示关键操作;卡片、字段与标签维持一致秩序。

 

Rezo Real Estate Mobile App | 界面细节与设计启发     

图片3.png

图片4.png

图 3  房源详情与联系入口

地图、价格、房屋规格与图片逐步补足房源信息,联系入口位于底部。摄影负责呈现空间质感,数字与标签帮助判断,用户的注意力由整体印象自然转向具体条件。

图 4  发布房源的结构化表单

发布页把房源属性拆成输入框、数量控件和分组标签,长表单因此拥有可读节奏。深色底与荧光按钮延续前面页面的语言,填写任务与浏览体验保持同样的识别。

 

③场景化交互:租买切换、筛选选择和数量调整采用符合任务的控件,详情页保留联系入口。通知中的未读状态与批量处理也有明确位置,浏览、沟通与发布各自拥有清楚的操作重点。

 

三、设计启发:高端服务界面,需要让质感服务于判断
Rezo 的识别来自深色、荧光绿与摄影,使用秩序则来自分组、标签和稳定动作。做房产、汽车或其他多条件服务时,可以积累这种处理:先把决策过程拆清楚,再让统一视觉贯穿每一步。

如有房产服务、租房找房类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微UIUE设计公司分享审美积累 | Row 独自旅行 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

把探索世界的松弛感,留在每一次浏览里。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Row,一组围绕独自旅行展开的品牌与 App 设计。目的地发现、旅行记录和个人档案,让出行前后的体验有了共同空间。
一、项目背景:兼顾发现的灵感与回看的秩序
旅行内容需要足够动人,地点、作者与收藏入口也要清楚。Row 让摄影成为主角,用轻量布局承接信息,让风景与功能在同一屏里保持舒展。

图片1(5).png

图片1(6).png

     

图 1  旅行动态内容流

旅行照片占据动态卡片的主体,作者、地点与互动信息围绕图片展开。蓝色动作点缀在白色空间里,重复的照片比例与留白让内容流呈现轻松、连续的浏览节奏。

图 2  个人足迹与照片档案

个人页从头像与发布统计进入照片网格,旅行经历逐渐拼成一份可回看的足迹档案。和动态页相比,网格更强调整理与回顾,同一套色彩因此呈现出不同的使用节奏。

 

二、设计策略:让影像带路,让版式维持节奏
①信息架构:动态采用纵向内容流,个人足迹使用图片网格,两种布局回应不同浏览目的。②视觉语言:白底、冷蓝与圆角摄影保持统一,大幅图片与适量文字共同营造轻盈感。

 

Row Solo Travel | 界面细节与设计启发

     

图 3  配色 字体与旅行影像

这张品牌系统展示将蓝色、文字与旅行影像放在一起,说明界面轻盈感的来源。照片圆角、颜色与字形之间保持协调,品牌气质由此延续到实际卡片与导航。

图 4  路线主题与品牌延伸

这张品牌延伸图用路线标记、交通场景与蓝色物料强化旅行主题。它展示的是品牌表达,与前面的 App 页面互相呼应,让独自出发的主题在功能之外也有鲜明记忆。

图片1(7).png

图片1(8).png

 

③场景化交互:动态里的地点与互动信息帮助理解内容,个人页的统计与分类帮助回看记录。蓝色强调入口在照片周围保持清楚位置,品牌中的路线语言也为旅行主题补充了连贯的识别。

 

三、设计启发:内容型产品的氛围,往往来自稳定的框架
Row 的美感与照片有关,也与图片比例、留白和重复卡片有关。框架越稳定,用户越容易把注意力交给内容。做旅行、生活方式或影像社区时,这种让内容充分呼吸的处理值得积累。

如有旅游出行、旅行社区类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

 

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

 

image.png

 

兰亭妙微用户体验设计公司分享审美积累 | Abyss 数字资产 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

在深色界面里,让每一组数字都有自己的位置。

 

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Abyss 数字资产 App 设计案例。余额、行情、收益和钱包同时出现时,信息密度很容易压过阅读体验。
一、项目背景:为密集数据建立优先级
从资产总览到单个钱包,用户需要先掌握概况,再追踪变化,最后进入相关操作。Abyss 以分层卡片与数字排版组织这条路径,呈现出冷静、集中的产品气质。

     

图片1(1).png

图片1(2).png

     

图 1  资产首页与主要导航

总余额先抓住视线,钱包与收益卡片随后展开,关注列表接住更多行情。不同深度的蓝黑色划出内容区域,大数字与小摘要各司其职,密集首页依然保持明确重心。

图 2  收益统计与时间维度

收益页将金额、柱状趋势与周期选择集中呈现,下方再展开具体项目。蓝色图形在暗底上很醒目,图表与列表的先后关系也让总体变化和单项数据自然衔接。

 

二、设计策略:用对比度组织深色空间
①信息架构:总资产是起点,钱包、收益与列表逐步补充细节。②视觉语言:蓝黑背景、稍亮的卡片与鲜明蓝色形成层次;字号、字重和数字对齐共同区分总量、变化与明细。

 

Abyss | 界面细节与设计启发

图片1(3).png

图片1(4).png

     

图 3  钱包列表与资金操作

亮蓝色总额卡片成为钱包页的视觉锚点,存入与转出并列其下,资产列表继续向下延伸。总量、动作与单项金额形成三个层级,色彩与字号共同建立阅读秩序。

图 4  单个钱包的分析视图

单个钱包把余额、趋势和币种明细放在连续结构里,分段选项提示查看维度。与首页对照,可以看到同一套图表、卡片和导航规则如何延续到更细的分析页面。

 

③场景化交互:总览、收益统计与独立钱包使用相近的图表和列表规则,切换页面后依然容易找到熟悉信息。存入、转出等动作靠近资产摘要,让资金状态与操作上下文保持相连。

 

三、设计启发:深色主题的精致,需要有分寸的亮度
这组设计值得积累的,是背景、卡片、文字与高亮之间的细微差别。最亮的位置留给关键数字和动作,其余内容通过分组与间距建立秩序。这种方法也适用于设备监控和专业数据工具。

如有数字资产管理、行情工具类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微移动端UI设计审美积累 | Niva 家庭助手 UI/UX 设计

丽洁 系统UI设计文章及欣赏

把琐碎的家庭事务,整理成有温度的日常。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Niva,一组围绕家庭协作展开的 AI 助手设计。家务、照护和个人安排交织在一起,难点在于让每个人看见任务,也看见彼此的时间。


一、项目背景:让家庭分工更容易被理解
从这一场景出发,界面需要回应三个问题:从哪里开始记录、如何共享日程、怎样看清时间分配。Niva 用对话与可视化工作区串起这些需求。

图片1.png

图片2.png

 

图 1  对话式入门

一个问题、一处输入区,再加上柔和的渐变语音图形,入门页像一次轻松的交谈。顶部进度与关闭入口保留流程感,大片留白则让注意力自然落在眼前的问题上。

图 2  家庭工作区首页

首页把添加、整理日历和委派任务放在对话入口周围,待办卡片接住当天的具体安排。蓝色按钮在暖色渐变中形成焦点,AI 的形象与家庭事务在同一张界面上建立联系。

 

二、设计策略:用柔和视觉承接具体任务
①信息架构:添加活动、整理日历与委派任务先给出行动方向。②视觉语言:蓝橙黄渐变带来温暖感,浅底、圆角与留白保持轻盈,卡片让不同家庭事务各归其位。

图片3.png

图片4.png

图 3  日历与共享日程

月历中的彩色短条提示日程分布,下方活动列表补充具体内容。上半屏看整体、下半屏看眼前,颜色与卡片共同把共享日程整理成容易扫读的生活节奏。

图 4  时间分配与数据洞察

面积和百分比让不同活动占用的时间变得直观,工作、清洁与照护有了可比较的形状。它延续前面页面的色彩,让偏理性的数据页仍然保有家庭产品的温度。

 

③场景化交互:从单步提问进入家庭工作区,再延伸到日历和时间洞察,对话始终围绕可处理的事情展开。输入、语音与快捷动作并置,让不同表达习惯都有自然入口。

 

三、设计启发:亲和力需要与清楚的秩序一起出现
这组设计的吸引力,在于温暖的图形与明确的动作彼此配合。渐变负责建立情绪,任务、日历和图表负责落到日常。做生活类 AI 产品时,这种从表达走向安排的衔接尤其值得积累。

 

如有家庭助手、生活服务类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微分享移动端UI设计 | 审美积累 | Finora 财务管理 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

让财务信息的专业感,来自清晰的阅读顺序。

 

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Finora 财务管理 App 设计。余额、收支、储蓄与交易明细都需要被看见,手机屏幕却只有有限空间。
一、项目背景:把复杂数字整理成可读的日常
这类产品需要同时回答“我有多少资金”“最近如何变化”“下一步可以做什么”。Finora 围绕这些问题组织首页,让数据与行动形成连续的阅读路径。

图片5.png

图片6.png

     

图 1  品牌色与首页整体展示

品牌展示把深浅蓝色与手机首页并置,白色空间让金融信息显得轻快。按钮、图表和品牌物料沿用同一色彩体系,能看到视觉识别如何进入日常使用的界面。

图 2  同作者的首页展示

同作者的另一张展示放大了首页细节:余额、收支摘要、目标进度与近期活动层层展开。它与后两张局部图对应同一首页,可以从整体布局一路读到具体组件。

 

二、设计策略:建立明亮、有秩序的金融界面
①信息架构:总余额先出现,收支摘要、储蓄进度与近期活动依次展开。②视觉语言:白底配合深浅蓝色,数字字号拉开主次;品牌色延续到按钮、图表和展示物料,整体清爽而统一。

 

Finora | 界面细节与设计启发

     

图片7.png

图片8.png

图 3  余额与储蓄操作 局部放大

这张局部放大聚焦首页上半部。总余额拥有最鲜明的字号,收入与支出退到下一层,添加资金和储蓄按钮则用色彩拉开差异,金额与操作的关系一眼可见。

图 4  活动列表与底部导航 局部放大

这张局部放大展示首页下半部。商户图标、名称、时间与金额形成有节奏的列表,金额对齐保持整洁,底部导航接住高频功能。细节克制,日常查阅的秩序却很完整。

 

③场景化交互:添加资金与储蓄动作紧邻资产摘要,活动明细承接日常查阅,底部导航提供稳定入口。页面把资金状态与相关操作放在相近位置,阅读之后便能找到下一步。

 

三、设计启发:金融界面的质感,藏在数字之间的关系里
大金额、辅助变化值、列表明细各有自己的权重,蓝色也承担了不同层级的提示。做数据类 App 时,可以从这组设计中积累一条思路:先建立阅读顺序,再用色彩与组件强化它。

 

如有财务管理、记账类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微UI设计公司分享:ParkFlow 智能停车与EV充电管理平台

丽洁 移动端UI设计文章及欣赏

导读

ParkFlow 通过极简现代的数据可视化与直观的3D空间映射,将复杂的停车与EV充电管理转化为清晰、高效的运营决策体验。 

1.png

一、产品定位:先回答系统替谁解决什么问题

ParkFlow 的核心用户群体是停车场运营方、车队管理者以及EV充电网络运营商。对于这类B端用户而言,他们面临的痛点并非缺乏数据,而是海量实时数据难以被快速消化并转化为行动。传统的停车管理系统往往充斥着密密麻麻的表格与状态灯,导致运营人员在高峰期难以迅速定位异常或空闲资源。

ParkFlow 的设计初衷正是为了解决这一"认知过载"问题。它不仅仅是一个记录工具,更是一个实时的资源调度中枢。通过覆盖实时停车状态监控、EV充电桩管理、车位预约及充电会话追踪等核心功能,该平台旨在帮助管理者在桌面端与移动端无缝切换,以最低的认知成本掌握全局,从而提升车位周转率与充电设施的利用率。

 

二、信息架构:把功能转译为用户的工作顺序

在信息架构层面,ParkFlow 摒弃了传统SaaS平台按"功能模块"平铺罗列的做法,转而采用以"空间与状态"为核心的逻辑结构。

导航系统采用了左侧垂直侧边栏配合顶部胶囊标签的复合结构。侧边栏使用线性图标配合选中项白色高亮,确保了在浅灰白背景下的视觉层级清晰,同时保持了界面的呼吸感。这种布局将高频操作(如实时监控、充电管理)与低频设置进行了合理的物理隔离。

更为巧妙的是,ParkFlow 将3D停车场透视地图作为Dashboard的核心载体,而非单纯的数据列表。3D地图不仅是视觉展示,更是信息架构的骨架。彩色地面高亮直接映射车位状态,蓝色虚线路径可视化连接入口与目标车位。这种设计将抽象的数据库状态转译为符合人类直觉的空间关系,让用户在浏览信息时,大脑无需进行"列表-位置"的二次转换,直接完成了从"看数据"到"看现场"的认知跨越。

2.png

三、关键交互:从浏览信息走向完成任务

优秀的B端设计不仅要"好看",更要"好用"。ParkFlow 在交互细节上体现了对运营工作流的深刻理解。

在数据可视化交互上,平台采用了多维度的图表组合。折线图配合渐变填充展示趋势变化,弧形仪表盘直观呈现百分比进度,柱状图反映能耗趋势。这些图表并非静态展示,而是与3D地图形成联动。当用户在地图上点击某个充电区域时,右侧或悬浮面板会即时刷新该区域的详细能耗与占用数据,实现了"宏观概览"到"微观钻取"的流畅体验。

针对EV充电这一核心场景,ParkFlow 引入了3D渲染的白色电动车模型置于淡蓝色光晕底座上。这一设计不仅提升了界面的科技感,更承担了状态指示的语义功能。结合电光蓝(充电状态)与荧光绿(可用/活跃状态)的动态反馈,用户无需阅读文字即可通过颜色与光效判断设备状态。此外,地图悬浮控件的设计减少了页面跳转,让用户在不离开主视图的情况下即可完成缩放、筛选与详情查看,极大缩短了任务完成路径。

3.png

四、视觉系统:品牌表达必须承担信息语义

ParkFlow 的视觉系统严格遵循"形式追随功能"的原则,其极简现代的风格并非为了单纯的审美,而是为了降低视觉噪音。

在配色方案上,黑白灰的主色调构建了稳定的信息容器,而强调色的使用则具有严格的语义规范。电光蓝专用于充电状态与核心数据曲线,荧光绿代表可用与活跃,橙黄色则用于警示或次要趋势对比。这种色彩编码系统(Color Coding)确保了在复杂的Dashboard中,用户的视线能被自动引导至关键信息,避免了色彩滥用导致的注意力分散。

卡片样式采用圆角矩形配合轻微阴影与边框,这种悬浮式设计在浅灰白背景上建立了清晰的Z轴层级。它模拟了真实办公环境中的纸张或屏幕叠加感,既区分了信息模块,又保持了整体的通透性。背景采用的柔和浅蓝渐变,模拟了明亮办公环境的光照感,有效缓解了B端用户长时间面对屏幕产生的视觉疲劳。

4.png

五、面向产品与设计团队的可复用价值

ParkFlow 为同类B端SaaS产品提供了一套可复用的设计范式。

首先是"空间化数据"的设计思路。对于涉及物理资产管理的系统,将数据锚定在空间地图上远比纯列表高效。ParkFlow 证明了3D渲染与2D UI的融合是可行的,关键在于克制——3D仅用于状态映射,而非炫技。

其次是"语义化色彩系统"。在设计规范中,颜色不应仅由品牌色决定,更应由业务状态决定。ParkFlow 的电光蓝与荧光绿不仅是品牌资产,更是交互反馈的一部分,这种将UI组件与业务逻辑深度绑定的做法,值得所有工具类产品借鉴。

最后是"渐进式披露"的交互策略。通过胶囊标签与悬浮控件,ParkFlow 避免了将所有功能一次性堆砌在用户面前。这种设计降低了Onboarding的学习成本,让新手用户能快速上手,同时为专家用户保留了深度操作的入口。 

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

5.png

六、专业审视:仍需补齐的体验边界

尽管ParkFlow 在视觉与核心交互上表现优异,但在实际落地中仍需审视以下体验边界:

• 3D地图的性能与无障碍性:3D渲染对设备性能有一定要求,在低配终端或弱网环境下,需考虑提供2D平面地图的降级方案。同时,纯视觉的状态映射需辅以文字标签或屏幕阅读器支持,以满足无障碍访问标准。

• 复杂任务的批量处理:当前设计侧重于单点状态的监控与查看。对于车队管理者而言,批量预约、批量下发充电指令等高频任务,可能需要更高效的表格视图或快捷键支持,纯图形化界面在处理大规模并发操作时可能存在效率瓶颈。

• 暗色模式的支持:考虑到监控中心或夜间运营场景,浅灰白基调可能产生眩光。增加一套高对比度的暗色模式,不仅是视觉需求,更是B端产品的必备体验保障。

 

结语:设计的最终判断标准是业务与使用价值

设计的最终判断标准是业务与使用价值。ParkFlow 智能停车与EV充电管理平台通过精准的视觉语义、空间化的信息架构以及克制的交互细节,成功地将复杂的物联网数据转化为直观的运营洞察。它证明了在B端SaaS领域,极简现代的设计语言不仅能提升品牌质感,更能切实解决效率与认知问题。

未来,随着EV充电网络的进一步扩张,ParkFlow 若能在保持视觉一致性的基础上,持续优化大规模数据下的交互性能与多端协同体验,将有望成为该垂直领域的体验标杆。对于设计团队而言,ParkFlow 最大的启示在于:不要为了设计而设计,每一个像素、每一处光效,都应是业务逻辑的视觉翻译。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微UI设计公司分享:Rythea 智能心脏健康平台

丽洁 系统UI设计文章及欣赏

导读|从实时ECG录制、心率效率分析到多设备无缝协同,构建“监测-分析-干预”的心脏健康闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

— — —

一、产品定位:先回答系统替谁解决什么问题

Rythea 并没有把自己限制为一款普通的心率记录工具或简单的健康数据看板,而是试图建立一个覆盖心电图录制、心率效率分析、生物电阻抗评估与多设备协同的医疗级心脏健康操作系统。桌面端承担全局洞察与长期趋势,移动端承接高频执行,AI则被安排在心律判断、异常预警与健康管理建议等关键决策点。

1.png 

图1:Rythea 用户注册流程与个人健康仪表盘——从账号创建到心脏健康概览的一站式入口

从用户首次打开 App 的“Create an Account”注册页开始,Rythea 就传递出明确的信号:这不是一个娱乐化的健身 App,而是一个严肃的健康管理平台。左侧深色背景搭配红色点阵心脏视觉,右侧简洁的白色表单,建立了科技感+医疗专业的第一印象。注册完成后,用户直接进入以姓名、年龄、ECG结果为核心的个人仪表盘,无需额外配置即可获取关键健康信息。

 

二、信息架构:把功能转译为用户的工作顺序

信息架构围绕“当前心脏状态—历史趋势—设备管理”展开。首页以当日心率、ECG结果、心脏效率为优先层级;心电图录制、生物电阻抗和设备管理被组织为可进入的任务模块;长期数据则沉淀到进度看板。这样的分层既照顾即时行动,也保留专业用户对趋势和细节的需求。

2.png 

图2:桌面端健康仪表盘——心率对比、运动平均心率、心脏效率与设备状态的集中展示

桌面端仪表盘是信息架构的典型代表。以用户 Ryan Walker 的视图为例,页面顶部展示基础个人信息,中部以醒目的大字号呈现当前周平均心率(72 bpm)与上周对比(78 bpm),并通过“Down 6 bpm”的箭头指示变化方向。下方的运动平均心率区间(79-127 bpm)和心脏效率(87%)以卡片形式并列展示,既独立又关联。底部的设备连接状态(Apple Watch Series X,80%电量)和ECG录制入口则构成了操作层的快捷通道。

3.png 

图3:移动端仪表盘——ECG与Bio Impedance双卡片布局,支持滑动切换

移动端设计延续了桌面端的信息层级逻辑,但针对小屏进行了适配优化。首页采用“ECG卡片+生物电阻抗卡片”的双卡片布局,每张卡片清晰展示检测日期、核心数值和状态标签。关键健康指标通过简单的滑动即可切换,降低了用户在移动端的信息获取成本。底部导航栏采用胶囊式设计,“Dashboard”作为核心入口始终居中突出,其余功能图标环绕分布,符合单手操作习惯。

 

三、关键交互:从浏览信息走向完成任务

交互亮点是把复杂的心血管数据转译为可执行反馈。ECG波形、心率区间、录制进度不是装饰,而是把心脏状态直接显性化。ECG录制采用开始—录制—结果的三段式流程,减少用户在关键健康操作中的认知负担。

4.png 

图4:ECG录制交互流程——左侧浅色模式展示录制结果(窦性心律/正常ECG),右侧深色模式展示录制进行中的沉浸式体验

ECG录制界面是 Rythea 最具差异化的交互设计。左侧浅色模式展示录制完成后的结果页:顶部显示“Sinus Rhythm”(窦性心律)诊断结论,中部以红色点阵波形图呈现心电图,右侧标注心率数值(94 bpm)和“Normal ECG”状态标签。右侧深色模式则展示录制进行中的状态:巨大的心率数字悬浮于红色粒子球体之上,底部进度条实时反馈录制进度,“Touch the watch”提示用户完成操作。两种模式的并置展示了 Rythea 对深色/浅色双主题的完整覆盖。

设备管理页面则展示了多设备协同的交互逻辑。用户可以看到已连接设备(Watch)的持续时间(1m 30s)、状态(Normal)、信号质量(Good)和实时心率(83 bpm),所有关键参数以卡片列表形式排列,一目了然。

 

四、视觉系统:品牌表达必须承担信息语义

5.png 

图5:设备管理与实时监测页面——智能手表心率监测与底部数据卡片阵列

深色背景建立专注、专业与医疗级信任感,红色作为核心操作色和强调色,在大面积黑白灰中保持清晰焦点;点阵式数据可视化让医疗级数据不至于显得冰冷,同时保持跨设备视觉一致。

Rythea 的视觉系统有以下几个显著特征:

· 色彩策略:主色调采用纯黑白灰构建专业医疗基调,红色作为唯一的强调色,用于心电图波形、心率数字、关键按钮和加载进度条。这种“一色点睛”的策略确保了视觉焦点的绝对清晰——在健康类应用中,用户需要瞬间识别的是“正常”还是“异常”。

· 点阵可视化语言:Rythea 最具辨识度的视觉资产是点阵式数据呈现。无论是心电图波形还是心率数字,都采用红色圆点矩阵构成,既呼应了医疗监测中“像素化读取”的专业意象,又赋予了数据一种数字艺术的美感。

· 卡片与留白:所有功能模块以圆角卡片承载,卡片之间留有充足的呼吸空间。白色背景(浅色模式)与纯黑背景(深色模式)的切换不是简单的颜色反转,而是针对内容类型精心调校的——数据概览偏好浅色背景以保证可读性,实时录制偏好深色背景以营造沉浸感并减少视觉疲劳。

· 跨设备一致性:从桌面端浏览器到移动端 App,从浅色到深色主题,Rythea 保持了统一的点阵视觉语言、圆角卡片规范和红色强调色体系,确保用户在任何设备上都能获得一致的品牌体验。

 

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是“医疗级数据的轻量化表达”:心电图不是波形图的简单罗列,而是通过点阵艺术化呈现,让专业数据变得可感知。Rythea 证明了即使是高度专业的医疗指标,也可以通过精心设计的视觉转译,让非专业用户理解并关注自己的健康状况。

对设计团队而言,要重点维护“深色/浅色双模式”的一致性:Rythea 的浅色模式和深色模式不是简单的颜色反转,而是针对不同使用场景的精心调校。数据概览页面偏好浅色背景以保证长时间阅读的可读性,实时录制页面偏好深色背景以营造沉浸感并减少视觉疲劳。这种场景驱动配色的思路,值得在各类数据密集型产品中复用。

此外,Rythea 的多设备协同设计也值得借鉴:从 Apple Watch 的心率采集到手机 App 的数据展示,再到桌面端的趋势分析,形成了一个完整的数据流转闭环。设计团队需要关注的是不同设备间的数据同步状态可视化和操作延续性。

 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是医疗数据的隐私安全与AI判断的容错性。

 

结语:设计的最终判断标准是业务与使用价值

Rythea 展示了 AI 健康产品从工具走向陪伴式系统的路径:以数据建立理解,以即时反馈维持行动,以设备协同扩展服务边界。红色点阵心脏从注册页的装饰元素,逐步转化为 ECG 录制中的实时波形、仪表盘中的效率指标、设备管理中的状态指示——同一个视觉符号在不同场景中被赋予了不同的信息语义,这正是优秀设计系统的核心价值。

真正决定产品可信度的,不是界面有多炫酷,而是每条健康建议是否透明、可执行、可被用户理解。当用户看到心脏效率 87%时,他不仅需要知道这个数字是怎么来的,更需要知道87%意味着什么以及我该如何改善。Rythea 迈出了重要的一步,而如何在专业医疗严谨性与用户体验友好性之间找到最佳平衡点,将是这套设计持续演进的核心命题。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微ui设计公司分享:ParkVolt 智能停车与EV充电管理 App UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

导读|从智能找桩、无缝支付到充电状态实时监控,构建"找桩—停车—充电—支付"的完整出行能源闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

 

一、产品定位:先回答系统替谁解决什么问题

ParkVolt 并没有把自己限制为一款简单的导航找桩工具或传统的充电桩查找器,而是试图建立一个覆盖智能找桩、无缝支付、实时监控与充电管理的个人出行能源操作系统。移动端承担高频的找桩、支付与充电控制操作,AI则被安排在推荐最优充电站、预测充电时间与智能定价等关键决策点。

核心痛点解决:针对新能源车主面临的"找桩难、排队久、支付繁琐、充电过程不可控"等焦虑,ParkVolt 提出了"Effortless Parking & Charging"的核心理念。它解决了新手车主"不知道去哪充"和老手车主"充电体验碎片化"的双重难题。

核心价值:通过将停车、充电、支付三个原本割裂的流程整合为一个连贯的数字体验,ParkVolt 让充电从一项"不得不做的家务"变成一种顺畅甚至愉悦的出行补充体验。

1.png

▲ 图1:ParkVolt 设计案例总览——三屏联动展示核心功能模块

二、信息架构:把功能转译为用户的工作顺序

信息架构围绕"我的车还有多少电—最近哪里能充—怎么付钱最方便"展开。首页以电池电量、剩余续航、最近充电站为优先层级;充电状态、支付方式和充电控制被组织为可进入的任务模块;长期充电记录与消费数据则沉淀到个人中心。这样的分层既照顾即时行动,也保留用户对历史数据和消费明细的追溯需求。

首页仪表盘设计采用卡片式布局,将电池电量(Battery 73%)和剩余续航(83km / 1h 34m)并排展示,用户一眼即可掌握车辆状态。下方直接呈现"Nearest Station"(最近充电站)信息,配合"Get Directions"按钮,将决策到行动的路径压缩到一步之内。

2.png

▲ 图2:移动端首页——电池状态与最近充电站一览

 

三、关键交互:从浏览信息走向完成任务

交互亮点在于把复杂的充电流程转译为可执行的简单操作。电池电量仪表、剩余续航估算、充电站距离和支付选择不是装饰,而是把目标、偏差和收益直接显性化。

充电状态实时监控:在充电过程中,界面以醒目的进度环展示充电百分比(如 Charging 71%),并同步显示充电速率(20kW)和已用时间(16 mins),让用户随时掌握充电进度。"Stop Charging"按钮以高饱和绿色突出显示,确保紧急停止操作触手可及。

无缝支付体验:充电完成后,系统自动带入充电金额(如 $48.00),用户可在预设的多种支付方式(Mastercard、VISA、PayPal)中快速选择,一键完成支付。整个支付流程无需跳出App,避免了传统充电桩扫码支付的割裂感。

3.png

▲ 图3:支付页面——多支付方式一键结算

 

充电完成反馈:充电结束后,界面以明确的"Charging Successful"状态和积极的反馈文案("Your vehicle is ready to go")给予用户完成感,同时提供"Back to Home"快捷返回,形成完整的任务闭环。

4.png

▲ 图4:充电完成页——正向反馈与快捷返回

 

四、视觉系统:品牌表达必须承担信息语义

深色背景建立专注、科技与高端设备感,鲜绿色(#92D050 / #99FF00)作为核心操作色,在大面积黑灰中保持清晰焦点——这一色彩策略巧妙借用了"电力""能量""环保"的心理暗示,同时与新能源汽车的行业视觉语言保持一致。

橙色仅用于电量预警、价格等高唤醒指标,形成具有语义的第二强调色。卡片圆角、柔和阴影和清晰的层级分割让数据展示不至于显得冰冷,同时保持移动端界面的现代感与亲和力。

字体选择上,标题使用几何感强的无衬线字体传递科技感,正文使用高可读性的中性字体确保在驾驶场景下的快速扫读。整体视觉语言在"工具效率"与"品牌温度"之间找到了良好的平衡。

 

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是跨场景闭环设计:找桩并非终点,而是必须进入支付、充电监控、完成反馈的完整链路。ParkVolt 展示了如何将一个原本需要跳转多个App才能完成的流程,收敛到一个连贯的数字体验中。

对设计团队而言,要重点维护"状态可视化"与"操作便捷性"之间的平衡。充电百分比、充电速率、预计完成时间等关键指标需要以最小的认知成本被理解,而"停止充电"、"选择支付方式"等高频操作则需要以最少的步骤被完成。这种设计哲学可复用于任何涉及设备控制与状态监控的IoT类产品。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是功能密度较高,深色卡片在小屏上容易出现同权竞争。建议强化"当前唯一主任务",将次要指标折叠为按需展开;充电速率预测应增加置信度提示(如"预计充满时间基于当前电网负载"),避免用户对估算值产生过度依赖;支付环节也应增加交易确认与收据推送功能,满足用户对消费记录的管理需求。

此外,考虑到驾驶场景的安全性,App应增加驾驶模式(Driving Mode),在检测到车辆移动时自动简化界面、禁用非关键操作,并将核心信息(如剩余续航、最近充电站)以大字号、高对比度的形式呈现,确保行车安全。

结语:设计的最终判断标准是业务与使用价值

ParkVolt 展示了出行能源管理产品从"信息查询工具"走向"全程陪伴式服务"的路径:以实时数据建立掌控感,以无缝支付减少摩擦,以正向反馈维持使用习惯。真正决定产品竞争力的,不是它接入了多少充电站,而是它能否在用户电量告急的那一刻,用最少的步骤把车充上电、把钱付好、然后安心继续旅程。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微UI设计公司分享:Hoome 智能家居管理平台 UI/UX 设计深度解析

丽洁 系统UI设计文章及欣赏

导读

从设备发现配对到场景一键切换,从房间维度组织到跨品牌设备协同,构建"一 App 控全家"的智能家居体验闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解 Hoome 这套方案。

一、产品定位:先回答系统替谁解决什么问题

Hoome 并没有把自己限制为某个单一智能硬件品牌的配套 App,而是试图建立覆盖设备发现、房间组织、场景编排与跨品牌协同的智能家居操作系统。它面向的是拥有多品牌智能设备(摄像头、灯泡、空调、扫地机、音箱等)的普通家庭用户——这些人厌倦了每个品牌各装一个 App 的碎片化体验。

桌面端承担全局洞察与长期趋势,移动端承接高频执行,AI 则被安排在设备智能推荐、异常状态预警与自动化场景建议等关键决策点。Hoome 的核心主张是"3,000+ devices. 40+ brands. One app."——用统一入口消解生态割裂带来的认知负担。

1.png 图1:Hoome 品牌标识设计——屋顶剪影与"oo"双圆眼睛的语义融合

二、信息架构:把功能转译为用户的工作顺序

信息架构围绕"我的家有什么设备—设备在哪个房间—如何快速控制"展开。首页以房间为第一级导航维度,每个房间卡片展示设备数量与在线状态;设备控制被组织为可交互的卡片模块(灯光滑块、空调温控、摄像头实时画面);场景模式(Good Morning、Away、Movie Night)则被提升为一键触发的快捷入口。这样的分层既照顾即时操作,也保留用户对设备明细和状态追踪的深层需求。

2.png 

图2:核心界面概览——"The whole home, on one screen"的信息分层策略

三、关键交互:从浏览信息走向完成任务

交互亮点是把复杂的设备配对和控制转译为直觉化反馈。设备扫描发现流程将 Wi-Fi/蓝牙连接状态实时可视化,用户能清楚看到"Connecting..."到"Connected"的状态迁移;房间分配采用卡片勾选+底部导航的渐进式引导,减少首次配置的学习成本;场景模式以"一键触发"取代多层菜单嵌套,把"回家开灯+开空调+关窗帘"的复合操作压缩为单次点击。

3.png 图3:设备发现与配对流程——从扫描到连接的可视化状态反馈

房间与设备管理页则展示了"分配—组织—控制"的完整工作流:用户先选择目标房间(Kitchen / Main Hall / Bedroom),再从设备列表中勾选归属设备,最终在房间视图中以网格卡片呈现所有设备及其实时状态(连接/断电/运行时长/空气质量)。这种空间化的信息组织让用户"看一眼就知道哪个房间出了问题"。

4.png 图4:房间设备管理页——空间化组织与设备状态实时可视化

四、视觉系统:品牌表达必须承担信息语义

Hoome 的视觉语言以极简、干净为核心基调。大面积留白搭配浅灰背景,营造出智能家居应有的"科技感"与"静谧感"。蓝色作为核心操作色,用于选中状态、连接指示和品牌标识,在大面积白灰中保持清晰焦点;绿色圆点用于在线/连接状态,橙色用于房间图标高亮,形成具有语义的第二强调色。卡片圆角、柔和阴影和设备的 3D 渲染图让冰冷的技术参数(温度、亮度、运行时长、AQI)变得可感知、可亲近,同时保持跨设备、跨平台的视觉一致性。

5.png 图5:设备控制卡片群——空调/扫地机/摄像头各自的自然交互范式

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是"设备即服务"的闭环设计:设备配对并非终点,而是进入房间组织、场景编排、异常监控和自动化建议的起点。Hoome 用"2 min to pair any device. Any brand. No manual."的承诺,把技术门槛压到最低,让产品力从"能不能连上"直接跃迁到"连上之后能做什么"。

对设计团队而言,要重点学习"每类设备配自然控件"的设计策略:灯光用色温滑杆、空调用温度旋钮、摄像头用实时画面、扫地机用进度环——不是所有设备都用同一套开关+滑块,而是根据设备物理属性选择最直觉的控制隐喻。同时,Hoome 的社交媒体视觉规范(统一屋顶标记、Bold Inter 字体陈述、天空蓝点缀)展示了品牌资产如何在 App 内外保持一致的可识别性。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

6.png 

图6:社交媒体品牌规范——"Recognizable at thumb speed"的视觉一致性

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是设备类型多样带来的控件碎片化。当空调、灯泡、摄像头、扫地机各自采用不同的控制范式时,用户在不同卡片间切换可能产生认知摩擦。建议建立一套"通用控制壳"——在差异化控件之外提供统一的快捷操作层(如一键关闭房间所有设备、统一亮度/温度调节条)。此外,摄像头实时画面涉及隐私安全,应增加明确的录制指示和权限管理入口;多家庭(Multi-Home)管理场景下,设备跨家庭迁移的流程也需要更清晰的引导和确认机制。

结语:设计的最终判断标准是业务与使用价值

Hoome 展示了智能家居产品从"品牌配件管理器"走向"统一家庭操作系统"的路径:以设备发现建立连接,以房间组织形成秩序,以场景编排维持行动。真正决定产品竞争力的,不是它能连接多少品牌,而是用户每次打开 App 时,能否在三次点击之内让家变成自己想要的样子。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

日历

链接

个人资料

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

存档