首页

会员功能持续升级,背后是设计师的满满用心

清阳 交互设计及用户体验

兰亭妙微UI设计公司:在用户需求日益多元化的旅游市场中,会员权益的价值不仅在于提供优惠,更在于创造差异化的体验与长期归属感。本次会员权益感知升级,我们通过权益展示规则优化和场景化等方式,加强用户对会员权益的感知,让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。

一、背景

当前,集团持续加大在会员权益方面的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度,更能有效提高权益使用率和订单转化率。此次会员体验升级,正是希望通过优化权益设计和服务体验,实现用户价值与平台效益的双赢,最终形成"投入-体验提升-效益增长"的良性循环。

二、问题洞察

通过走查线上各业务线(如机票、酒店等)的页面,我们发现了以下 2 个问题:

1. 不同业务线间:权益的展示节点和感知强度不同,缺少一致的设计原则

目前各业务线在会员权益方面的设计手段不同,在权益展示点位和感知强度上存在明显差异,缺少一致的设计原则进行规范。具体表现为:

酒店:主要通过货架展示强化会员权益感知

机票:侧重在列表页和中间页等固定位置展示

火车票:则聚焦于权益使用环节的触达

image.png

2. 单个业务线内:优势权益在流程中没有充分传达

通过对各业务线现有页面的走查,我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息,但整体感知度仍有不足。

image.png

针对上述问题,我们需要建立统一的设计原则,在保持各业务线自身特色的同时,形成协同一致的会员体验,提升用户对会员权益的整体感知效果。

三、设计优化——从"能看到"到"感知好"

本次优化主要围绕两个核心目标展开:一是建立规范的权益展示原则,二是提升用户对权益的感知度。具体将从以下几个方向着手:

1. 权益前置,强化展示

根据历史机票和酒店的项目数据,我们发现将具有明显优势的权益提前展示,能够显著增强用户的感知,并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合,将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益,加强感知。

image.png

什么样的权益需要前置?——设定强弱权益规则

为提升会员权益展示效果,我们通过对权益内容的系统分析,将其划分为两大类别:强权益和弱权益。

强权益:指与产品线直接相关或对价格产生显著影响的权益,例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用,能有效提升用户满意度和预订转化率,因此需要在核心预订节点进行重点展示。

弱权益:指与产品线关联度较低的权益,例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策,但可作为增值服务提升用户体验,间接促进转化。

image.png

为确保权益展示的客观准确,我们也可以借助内部的权益价值计算公式,量化每项权益的实际价值,帮助我们精准评估和展示权益,为用户提供更有价值的会员体验,最终提升用户满意度和忠诚度。

2. 让权益贯穿各节点的策略

在对各业务线的线上页面进行走查时,我们注意到订前、订后部分节点常常出现权益感知缺失的情况。

为了充分提升权益的曝光,我们制定了强弱权益展示的规则,定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决策紧密相关的强权益,并在相关性较低的节点提前展示弱权益,以加深用户印象并促进转化。预定后,对收益、转化率和 CPO(客服来电率)的影响较小,需要做到尽可能强的展示。

image.png

根据以上规则,我们在实际点位进行了应用:

以火车票业务为例,我们通过优化权益展示策略,在首页新增曝光点位、强化现有页面展示效果,并完善订后权益展示,使会员权益的触达贯穿用户全流程。优化后,权益曝光率和用户感知强度有了明显的提升。

image.png

3. 更加严格的设计规范

此前制定的会员权益视觉规范,因各业务线复杂度不同,在多次迭代后逐渐出现差异,导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此,本次优化中我们也重点明确了各类场景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员身份的表达。

image.png

经过以上几点优化,上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性。

四、强化重要节点的感知

除了常规流程中的会员感知,我们也在思考如何进一步加深用户的印象,让用户订票时优先选择携程。

1. 出行中节点——提供好用的体验

订后的节点往往容易被忽视,以机票的快速安检权益为例,用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销,步骤较长,导致体验打折。

新版本中,我们将出行相关的会员权益(如快速安检)直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益,无需多层跳转。改版后,用户体验和权益使

image.png

用率都得到了提升。

 

2. 会员升级节点——制造惊喜感

基于 KANO 模型,我们可以将用户需求分为三类:基本型、期望型、兴奋型,在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号,不同高度代表不同等级,用户每次升级,都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。

因此,在用户升级时,我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就,并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。

image.png

结语

通过系统化的设计与持续迭代,会员权益体系能够深度释放用户价值,推动品牌的长期可持续增长。在这个过程中,我们需要确保用户在全渠道触点中获得连贯一致的体验,从而建立稳固的品牌信任,降低用户的学习与决策成本。同时,我们需要强化会员的价值感知,通过具象化的权益呈现和情感化的设计表达,让用户切实感受到专属特权与归属感,最终打造出更具黏性的用户体验闭环。

转载:优设

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

 

image.png

兰亭妙微UI设计:Neemo Project 企业AI项目管理后台全案运营价值解析

之晨 交互设计及用户体验

Neemo Project 企业AI项目管理后台全案运营价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套企业AI项目管理后台的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

一、项目基础概述

截屏2026-06-11 15.15.17.png

1.1 项目背景与核心用户痛点

Neemo Project 是搭载 AI 辅助能力的企业级项目管控后台,核心服务两类人群:企业项目管理者、跨部门协作执行团队成员。

传统项目管理工具普遍存在运营与使用痛点:

管理者视角:项目工时、任务完成率、周期进度数据分散,需要手动汇总多表格统计,无法实时全局把控项目风险与交付节点;多团队协作成员、会议、截止任务分散在不同页面,统筹效率低下;

执行团队视角:任务缺少清晰时间规划,到期提醒滞后,流程重复工作占用大量人力,缺少自动化辅助工具简化重复性工作;

界面体验痛点:多数传统管理后台布局拥挤、深色界面色彩杂乱,数据图表层级混乱,长时间办公浏览极易视觉疲劳,缺少标准化状态区分体系,任务进度难以快速识别。

本产品以「AI 自动化赋能 + 全维度数据可视化 + 轻量化任务协同」为核心设计思路,从管理层全局管控、执行层高效落地两个维度,解决企业项目协同低效、数据统计繁琐、节点管控缺失的行业痛点。

1.2 项目核心设计目标(以企业真实运营需求为核心)

全局数据直观可视化:整合工时、任务完成量、周期活跃度、团队协作信息,首页一站式呈现,管理者无需多页面跳转即可掌握项目全貌;

AI 自动化降本增效:内置 AI 辅助模块,自动简化常规流程、分析项目绩效、动态管控任务截止时间,减少人工重复操作;

标准化任务协同体系:统一任务状态标识、日历排期、会议管理、截止预警模块,跨团队成员快速看懂任务优先级与进度;

统一高端深色专业视觉体系:搭建完整组件库,深色基底搭配高区分度功能色,兼顾长时间办公护眼需求与 B 端产品专业科技感,全页面操作逻辑、视觉语言高度统一。

1.3 完整企业项目管理闭环

产品覆盖完整项目全生命周期管理:项目总览数据大盘 → AI 绩效分析辅助 → 月度日历任务排期管理 → 截止节点风险监控 → 团队协作人员管理 → 会议日程统筹 → 任务状态动态更新与自动提醒。

二、全链路企业使用体验拆解

2.1 项目总览首页:一站式全局管控大盘

页面左侧固定侧边导航栏,收纳全部一级功能入口,便于管理者随时切换模块;页面顶部为项目基础信息栏,展示总投入工时、进行中 / 已完成任务总量、协作人员头像组,配套独立 AI 助手快捷入口,一键调用智能分析功能。

页面核心区域分层排布多维度可视化图表:长条柱状图展示项目全周期每日任务活跃度,环形进度环直观呈现整体任务完成率;右侧分区独立卡片承载截止任务清单、团队会议日程两大核心模块,卡片内自带进度条清晰展示各子任务交付进度,主次信息层级分明,管理者打开页面即可快速定位风险滞后任务。

2.2 日历任务排期模块:清晰规划每日执行工作

首页下方嵌入月度日历视图,按日期纵向排布当日全部待执行任务;不同状态任务采用标准化色块区分:绿色代表已核验完成、橙色代表进行中、紫色代表待启动规划、红色代表风险逾期任务。

单条任务卡片精简展示任务名称、归属模块,鼠标悬浮可展开详情弹窗,支持快速筛选任务状态、自定义视图排序,团队成员可快速认领、查看自身负责工作,管理者可直观查看每日团队负载,合理分配工作量。

2.3 AI 绩效分析与截止管控模块:自动化降低管理成本

独立 AI 绩效分析模块自动测算流程简化效率,量化 AI 为团队节省的工作量;截止管控功能实现全自动化管理:系统自动识别变更交付节点,推送到期提醒,任务逾期时自动重新分配对接人员,无需管理者手动跟进督促。

整套状态标签组件统一规范,Active、In Progress、Validation 三类核心进度标识色彩固定,全页面通用,团队成员无需额外学习即可快速分辨任务阶段。

2.4 团队协作与会议管理模块:打通跨部门信息同步

页面右上角聚合全部项目协作人员头像,点击可快速查看成员分工、在线沟通;独立会议卡片统一记录会议主题、时间段、会议规划内容,区分「已规划 / 进行中 / 已结束」状态,自动留存会议记录,避免跨部门信息断层,减少线下同步沟通成本。

截屏2026-06-11 15.16.56.png

三、视觉与标准化组件系统:高端深色 B 端专业体验

3.1 色彩视觉体系(适配企业长时间办公场景)

基底主色:低饱和深紫深色背景,弱化屏幕强光刺激,长时间办公不易视觉疲劳,塑造科技感专业企业氛围;

数据高亮色:明黄色用于整体进度环形图、绩效重点数据,紫色作为 AI 功能、待启动任务主色,绿色代表完成 / 核验状态,橙色代表进行中任务,四色形成强区分度,快速识别数据与任务状态;

文字层级:纯白色大号数字展示核心指标,浅灰色小字承载辅助说明,高对比度保障深色界面文字清晰可读;

操作功能色:白色作为按钮、弹窗基础底色,与深色背景形成柔和对比,不刺眼。

3.2 全场景可复用标准化组件库

整套后台搭建完整统一组件体系,覆盖:侧边导航、数据柱状图、环形进度指标、任务日历卡片、截止任务卡片、会议日程卡片、任务状态标签、弹窗浮窗、AI 功能按钮、人员头像组件等全部页面基础元素。

统一组件带来双重企业使用价值:

管理 & 执行端:全页面视觉、交互逻辑统一,新入职团队成员快速上手系统,降低工具学习成本;

产品迭代端:新增项目模块、AI 功能、管理报表可直接复用现有组件,大幅缩减设计、开发人力成本,系统拓展性更强。

3.3 品牌视觉体系配套

项目配套专属点状抽象品牌 Logo,以圆点阵列构成字母 M 图形,简约几何风格和后台科技极简视觉完全统一,线上后台、宣传物料视觉语言贯通,强化企业项目管理工具专属品牌记忆点。

截屏2026-06-11 15.17.34.png

四、交互与企业管理体验核心亮点

全局信息前置设计:首页聚合工时、进度、任务、会议、协作人员全部核心数据,减少多层级页面跳转,提升管理者统筹效率;

AI 自动化全流程赋能:自动绩效分析、到期提醒、任务重分配,替代大量人工统计、跟进工作,压缩管理人力成本;

标准化色彩状态体系:任务、数据、功能通过固定色彩区分,无需阅读文字即可快速抓取核心信息;

轻量化悬浮弹窗交互:任务详情、人员信息、操作菜单均采用浮窗展示,无需新开页面打断当前工作流;

多模块分区独立卡片设计:截止任务、会议、周期数据分区隔离,信息互不干扰,逻辑清晰不杂乱。

 

 

五、项目商业落地价值

提升企业项目交付效率:全局可视化管控 + AI 自动化工具,提前识别项目滞后风险,降低延期交付概率,提升项目交付质量;

缩减企业管理人力成本:自动统计、智能提醒、任务重分配功能,减少项目专员、行政跟进、数据统计的人工工作量;

差异化市场竞争力:市面多数项目管理工具缺少内置 AI 辅助模块,深色高端可视化界面精准面向中大型企业、科技团队,形成独特产品优势;

可持续业务拓展:模块化组件架构可后续拓展多项目台账、财务工时统计、客户对接模块,满足企业长期数字化管理升级需求。

截屏2026-06-11 15.16.43.png

六、全案设计总结

双人群需求平衡设计:同时兼顾企业管理者全局数据统筹、一线执行团队轻量化任务操作两类核心诉求;

B 端深色数据界面分层设计,核心指标放大前置,辅助信息收纳至次级区域,解决海量数据阅读困难问题;

AI 功能深度融入产品全流程,用自动化设计解决企业重复性管理工作痛点;

全组件化界面搭建,统一视觉与交互标准,兼顾团队使用流畅度与产品长期迭代拓展能力。

图片来自Behance

 

 

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

 

image.png

 

兰亭妙微原创作品 血型分析系统UI设计

丽洁 B端ui设计文章及欣赏

谁说B端医疗软件只能是枯燥的表格?

今天分享一个把严谨科技做成艺术品的案例——德祥生物全自动血型分析系统。

由兰亭妙微(蓝蓝设计)操刀,这次不仅是UI升级,更是一场关于“效率与美感”的深度重构!

ScreenShot_2026-06-12_143450_894.png

亮点一:色彩心理学的应用 

摒弃传统高亮色,采用冷调蓝+浅灰背景。

目的:降低视觉噪点,缓解检验科医生长时间工作的视觉疲劳,同时保持医疗设备的严谨感。

ScreenShot_2026-06-12_143504_507.png

 亮点二:信息层级重构(左-中-右)

左侧导航:功能分区明确,快速切换;

中间核心区:模拟物理卡盘形态,直观展示运行状态;

右侧数据区:关键指标(样本数、完成率)实时悬浮。

目的:符合人眼扫描习惯,缩短寻找信息的时间,提升操作效率。 

ScreenShot_2026-06-12_143518_652.png

亮点三:异常状态的强提醒 

利用红/绿/蓝三色建立条件反射。

目的:无需阅读文字,余光扫过即可判断设备是“正常”、“进行中”还是“报错”,极大降低事故风险。 

ScreenShot_2026-06-12_143542_703.png

ScreenShot_2026-06-12_143550_370.png

设计师碎碎念: 

好的B端设计,是在克制中找平衡。 既要满足微流控技术的复杂参数展示,又要保证界面的清爽易用。 这套设计做到了“始于颜值,忠于效率”,值得所有医疗SaaS产品经理参考!

 

 

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

 

image.png

 

兰亭妙微UI设计:线上医疗问诊预约 App 全案用户体验价值解析

之晨 交互设计及用户体验

线上医疗问诊预约 App 全案用户体验价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套线上医疗问诊预约 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

截屏2026-06-11 15.12.11.png

一、项目基础概述

1.1 项目背景与核心用户痛点

本项目是一站式线上医生预约诊疗 App,核心覆盖两类使用人群:有问诊、复诊需求的普通就医用户、多科室私立诊所 / 综合医疗机构运营方。

传统线下就医与老旧医疗预约产品存在多重体验短板:

用户端:挂号流程繁琐,科室查找复杂,医生资质、出诊时间、收费标准信息分散,预约操作步骤冗长;无法直观查看患者真实评价,难以快速匹配适配自身需求的医师;

机构运营端:多科室数据分散,预约、改期、取消流程依赖人工客服,人力成本高,缺少统一的患者管理与线上获客渠道;

界面体验:多数医疗软件色调沉闷、信息堆砌,页面层级混乱,中老年用户操作门槛高,缺乏安全感与专业舒适感。

本产品以「简化全流程预约、透明化医疗信息、轻量化多科室管理」为核心设计思路,从患者就医体验、机构运营效率两大维度解决行业现存痛点。

1.2 项目核心设计目标(以用户真实需求为核心)

截屏2026-06-11 15.11.53.png

降低用户就医操作门槛:科室分类直观,预约链路极简,全年龄段用户均可独立完成挂号;

医疗信息透明化:集中展示医师从业年限、接诊人数、收费、出诊时段、真实患者评价,帮助用户快速决策;

优化机构运营效率:线上自助改期、取消预约,减少客服接待压力,打通多科室统一管理后台;

统一专业温和的视觉体系:医疗向低饱和蓝为主色调,搭建标准化组件库,全页面视觉、操作逻辑连贯,塑造安心可靠的医疗品牌感知。

1.3 完整用户使用闭环

产品覆盖完整就医线上流程:科室快速筛选 / 搜索 → 医师列表浏览对比 → 医师详情资质查看与评价查阅 → 选择就诊日期时段 → 一键完成预约 → 预约单管理、线上改期取消、就诊后评价反馈。

截屏2026-06-11 15.11.42.png

二、全链路用户使用体验拆解

2.1 首页科室筛选页:快速定位就诊需求

页面顶部设置全局搜索框,支持医生、病症、科室关键词检索;下方以统一图标色块分区展示全科室入口,心内科、牙科、妇科、心理科等八大常见科室一目了然,无需多层菜单查找。

下方医师推荐卡片集中展示核心信息:医师姓名、所属医院科室、综合评分、每日出诊时段,底部放置醒目黑色预约按钮,用户无需进入详情页即可快速发起挂号,大幅缩短操作路径。同时支持收藏心仪医师,方便后续复诊快速查找。

2.2 医师详情页:完整透明展示医疗信息

点击医师卡片跳转详情页,分层陈列全部决策所需信息:

基础资质:从业年限、累计接诊患者数量、每小时诊疗费用;

就诊预约模块:下拉选择就诊月份、具体日期,多时段分时选择框清晰区分可预约档期;

患者真实评价板块:拆分接诊沟通、院内环境两大评价维度,星级直观展示医师服务水平。

全部信息分区清晰,主次分明,用户无需反复翻页即可完整了解医师情况,减少决策顾虑。

2.3 预约与订单管理页:自助化降低人工成本

预约成功后生成专属就诊订单卡片,清晰标注就诊医师、时间、地址;支持用户线上自主更改就诊时间、取消预约,全部操作无需联系客服。

订单配套核对清单,区分线上问诊、线下到院诊疗两类服务,就诊前自动留存预约凭证,方便到院核验,同时减少机构前台核对工作量。

2.4 就诊评价页面:完善双向反馈体系

就诊结束后用户可提交多维度星级评价,分别针对医师沟通服务、医院环境两大板块打分,评价数据实时同步至医师主页,为后续患者提供真实参考,同时帮助机构优化服务短板。

三、视觉与组件系统:塑造专业安心的医疗氛围

3.1 色彩视觉体系(适配医疗行业信任感需求)

主色调:干净柔和的深海蓝,医疗行业通用信任色,低饱和度不刺眼,弱化就医焦虑感;

基底色:纯白 + 浅灰页面底色,弱化视觉压迫,长时间浏览无疲劳感;

功能区分色:纯黑色作为主行动按钮(预约、提交),高对比度突出核心操作;浅灰用于次要标签、辅助文字;红色爱心作为收藏标识,轻微点缀提升页面活力。

3.2 标准化可复用组件库

整套 App 统一标准化组件,覆盖科室图标按钮、医师信息卡片、星级评分模块、日期时段选择器、评价表单、底部操作按钮等全部基础元素。

统一组件带来双重用户价值:

患者端:全页面操作样式、交互逻辑一致,老人、新手无需反复学习页面操作;

机构运营 & 迭代端:新增科室、活动页面可直接复用组件,大幅降低开发与设计成本,系统扩展性更强。

 

四、交互与用户体验核心亮点

需求前置筛选:首页直接展示全科室入口 + 热门医师推荐,用户打开 App 即可完成核心操作,减少跳转层级;

信息分层减法:医师卡片只保留关键决策信息,详细资质、评价收纳至详情页,首页不堆砌冗余文字;

全自助预约管理:支持自主改期、取消预约,减少机构人工客服压力,提升用户自主操作便捷度;

透明化评价体系:多维度星级评价直观展示医师服务水平,消除用户线上挂号信息不对称的顾虑;

极简预约链路:从选科室到完成挂号仅 3 步核心操作,无多余弹窗、表单拦截。

截屏2026-06-11 15.10.59.png

五、项目商业落地价值

提升患者留存与转化:简化挂号流程、信息透明化,降低用户就医决策成本,提升线上预约转化率,为医疗机构拓宽线上获客渠道;

降低机构运营人力成本:线上自助改期、取消、评价全流程自动化,大幅减少客服、前台接待工作量;

打造差异化线上医疗品牌:温和简约专业的视觉风格,区别于市面上杂乱繁杂的医疗 App,塑造安心可靠的品牌形象;

可持续业务增长:模块化系统架构支持后续拓展会员套餐、线上问诊、治疗套餐等增值业务,帮助机构提升长期营收。

 

图片来自Behance

 

 

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

 

image.png

Dorun Dorun 结伴跑步社交 App 全案体验价值解析

之晨 交互设计及用户体验

Dorun Dorun 结伴跑步社交 App 全案体验价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套结伴跑步社交 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

截屏2026-06-10 18.13.26.png

一、项目基础概述

项目背景与核心用户痛点

Dorun Dorun 是一款主打「结伴慢跑、运动社交」的轻量化跑步记录 App,核心服务两类人群:日常慢跑爱好者、想要养成运动习惯却难以独自坚持的普通用户。传统运动类产品普遍存在用户体验短板:

1. 独自运动缺少陪伴与正向激励,用户极易放弃打卡,运动留存率低;

2. 运动页面数据繁杂冰冷,纯数字图表枯燥,缺少情绪共鸣;

3. 社交链路薄弱,无法实时查看好友运动状态,运动分享形式单一;

4. 界面视觉生硬严肃,长时间使用容易产生疲惫感。本项目通过「陪伴式 IP + 实时社交 + 轻量化运动记录」的设计思路,从情绪、功能、视觉三层解决用户坚持运动难、社交互动弱的核心痛点。

项目核心设计目标(以用户体验为核心)

1. 降低运动门槛:新手引导清晰易懂,操作步骤极简,零基础用户也能快速上手;

2. 打造陪伴式情绪体验:专属卡通 IP 贯穿全流程,消解独自运动的孤独感,持续给予运动激励;

3. 完善运动社交闭环:实现好友实时位置 / 运动状态查看、运动成果个性化分享、长期运动数据沉淀;

4. 统一全页面视觉语言:搭建标准化组件库,保证从引导页、运动页到个人中心,操作逻辑、视觉感受连贯统一。

完整用户使用链路

产品完整覆盖运动全生命周期:新手引导 →运动前好友状态查看→运动中轨迹实时记录→运动后个性化打卡分享→个人长期运动数据存档,形成完整的“运动—社交—复盘”闭环。

二、全链路用户使用体验拆解

新手引导页:直观传递产品核心价值

开屏三页引导完全站在用户视角,直白展示三大核心功能:结伴跑步、查看好友实时运动、打卡分享运动日常。页面搭配治愈 IP 形象,文字简短易懂,底部统一行动按钮,无多余信息干扰,用户 3 秒就能明白产品能为自己带来什么,大幅降低新用户认知成本。

截屏2026-06-10 18.14.41.png

运动前页面:社交激励唤醒运动动力

用户进入 App 首页即可实时查看全部好友运动动态:包含好友跑步距离、上次运动时间、在线状态。配套暖心唤醒通知机制:针对 3 天以上未运动的好友推送提醒,通过社交督促激发用户运动意愿,解决 “独自运动没动力” 的核心痛点。页面信息分层清晰:好友动态列表为核心区域,底部放置一键开启跑步的主按钮,用户无需多次跳转就能快速开启运动。

运动中记录页:轻量化呈现运动数据

跑步过程页面摒弃繁杂数据堆砌,只保留用户最关心的 4 项核心信息:实时距离、运动时长、配速、步频;搭配彩色渐变地图轨迹,直观展示跑步路线,视觉柔和不刺眼;全程仅保留 “暂停记录”“结束跑步” 两个核心操作按钮,避免多余功能分散用户运动注意力,适配户外跑步单手简易操作的使用场景。

截屏2026-06-10 18.14.47.png

运动后上传分享页:个性化打卡丰富社交场景

跑步结束后支持两种打卡展示形式:标准轨迹地图、自定义实景照片背景;用户可自由替换背景图,搭配运动数据生成专属运动动态,丰富分享素材,提升用户主动分享至社交平台的意愿。极简一键发布按钮,完整打通 “运动完成 - 分享互动” 的社交链路。

截屏2026-06-10 18.14.53.png

个人中心页面:可视化沉淀长期运动成果

个人主页分为两大模块:打卡相册、月度运动记录清单。打卡相册以日历图文形式留存每一次运动瞬间,月度清单清晰展示每日跑步数据,让用户直观看见长期运动收获,强化坚持运动的成就感,提升用户长期留存。

截屏2026-06-10 18.15.06.png

三、品牌 IP 与视觉体验体系:用治愈感提升用户粘性

专属陪伴式卡通 IP 形象

项目打造专属蓝色软萌球形 IP,覆盖全套情绪表情:开心奔跑、疲惫低落、加油鼓励、心动点赞等,适配 App 全部使用场景。核心设计逻辑:将冰冷的运动数据赋予情绪温度,用户运动时、懈怠时、完成目标时都有对应 IP 形象陪伴,消解独自运动的枯燥感,建立情感联结。IP 统一应用在弹窗、气泡提示、卡片、引导页,品牌记忆点极强。

截屏2026-06-10 18.14.24.png

色彩视觉体系(适配长期手机浏览)

· 主色调:柔和浅天蓝色,低饱和度不刺眼,适配长时间户外、室内看手机场景,传递轻松治愈的运动氛围;

· 辅助色:浅灰、纯白作为页面基底,深蓝色作为主操作按钮,区分主次操作;

· 状态色:火焰橙、爱心粉、星星浅黄作为情绪点缀色,仅用于 IP、标签小元素,不破坏整体干净清爽的视觉基调。

截屏2026-06-10 18.14.34.png

标准化全页面组件系统

整套 App 搭建完整可复用 UI 组件库,覆盖按钮、输入框、列表、卡片、弹窗、底部导航、标签气泡等全部基础元素。统一组件带来两大用户优势:

1. 全页面操作逻辑一致,用户切换页面无需重新适应操作方式;

2. 界面整洁统一,无杂乱视觉元素干扰,查找功能、阅读信息效率更高。

截屏2026-06-10 18.14.18.png

四、交互与用户体验核心亮点

1. 实时好友同步机制:无需主动刷新,一键查看好友当前跑步位置与进度,实现“线上结伴跑步” 的陪伴感;

2. 轻量化信息减法:运动页面只保留刚需数据,非必要功能全部收纳至次级页面,适配户外单手操作;

3. 情绪化反馈设计:所有弹窗、通知、结果页面搭配对应 IP 表情,运动完成给予正向鼓励,懈怠时给予温柔提醒;

4. 多形式分享载体:支持地图轨迹、实景照片双模式打卡,满足不同用户的社交分享喜好;

5. 数据可视化沉淀:日历相册 + 月度清单双重形式记录运动成果,直观强化用户运动成就感。

 

五、项目商业落地价值

1. 提升用户留存:依靠陪伴 IP + 社交激励双设计手段,解决运动类 App 普遍存在的 “三分钟热度” 流失问题,拉长用户使用周期;

2. 降低用户获客成本:丰富个性化打卡素材,驱动用户自发向外分享传播,实现自然流量裂变;

3. 差异化市场竞争力:市面上多数跑步软件偏向专业硬核数据,本产品主打治愈陪伴社交,精准切入普通休闲慢跑人群空白赛道;

4. 低研发迭代成本:全套标准化组件库,后续新增活动、功能页面可快速复用,降低产品迭代开发成本。

六、全案设计总结

1. 以用户情绪需求为底层逻辑,不止做运动数据工具,更打造陪伴式运动社交空间;

2. 全流程轻量化信息设计,区分运动前 / 中 / 后不同场景的用户操作需求,精准简化页面信息;

3. 专属 IP 贯穿全场景,建立独特品牌情绪记忆点,和同类运动产品形成明显视觉差异化;

标准化组件系统统一全端体验,兼顾用户使用流畅度与产品长期迭代效率。

 

图片来自Behance

 

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

 

image.png

 

做了几年GIS监测大屏,兰亭妙微说几句掏心窝子的话。

丽洁 随笔的一些文章

最近一直在做GIS监测类的项目,从大气污染到生态资源,从气象预报到城市管网。越做越觉得,GIS监测的设计,真的不只是“画个好看的地图”那么简单。

分享几点做下来最真实的感悟,希望能给做B端和可视化的同行一点启发:
 
1. 克制,是GIS设计的第一课
很多甲方一上来就说“要科技感”“要炫酷”,但真正好用的GIS监测界面,往往是克制的。深蓝底色、发光边框、粒子特效……这些元素堆多了,反而会让核心数据淹没在视觉噪音里。好的设计,是让用户三秒内知道“哪里出了问题”,而不是“这个页面好帅”。
 
2. 地图不是背景,是主角
很多设计师把地图当装饰,随便铺个底图就往上叠图表。但GIS监测的核心是空间关系,地图本身就是信息。哪里是热点区域、哪条路径在变化、哪个图斑在扩张……这些都需要通过地图的视觉层级来传达。地图的底色、标注的密度、图层的透明度,每一个参数都在说话。
 
3. 数据密度和呼吸感,是一对永恒的矛盾
GIS监测天然就是高密度信息的场景,但人眼能处理的视觉通道是有限的。我现在的习惯是:先做减法,把非核心信息藏进交互里;再做分层,让重要数据浮上来,次要数据退下去。留白不是浪费空间,是给用户的眼睛一个喘气的机会。
 
4. 别忽视“异常”的设计
正常状态下的地图可以很安静,但异常状态必须足够醒目。颜色、动效、弹窗、声音……这些告警手段要形成体系,而不是各自为战。我见过太多项目,告警红得刺眼,但用户根本分不清是设备离线还是数据超标。好的告警设计,是让用户一眼就知道“发生了什么”和“有多严重”。
 
5. 设计师要懂一点业务
GIS监测不是纯视觉项目,它背后是真实的业务逻辑。国土调查的图斑规则、大气污染的浓度分级、林场的资源分类……如果你不懂这些,设计出来的东西就会“好看但没用”。我现在做项目前,一定会花时间跟业务方聊,甚至去看他们的操作手册。只有理解了数据背后的故事,才能设计出真正解决问题的界面。
 
做GIS监测设计这几年,最大的感受是:我们不是在画界面,而是在帮用户“看懂”一个复杂的地理空间世界。
 
这条路还很长,继续摸索。
 

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

 

image.png

为什么国内的UI设计比国外复杂?兰亭妙微UI设计公司总结了3个深层原因

清阳 行业趋势

在接触和学习 UI 设计的时候,我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618,相信大家没少被国产应用的广告“亲切的”问候。

image.png

一方面是寻找设计灵感时要做区分,另一方面则是我们学习 UI 时看的书籍,学习的理论、规范,都是由西方国家产出的,而国内设计的方向却和它们背道而驰,用一个词来形容现状,那就是 —— 割裂。

所以在初学阶段,理论学的越多,受到的冲击也就越大,疑问也就越多。所以我们今天的目标,就是来帮大家解答这个疑问。

 

一、设计差异的根源分析

当我们研究国内外 UI 设计的差异时,样式上的差异只是表象,它们是由更深层次的因素所激发,所以我们首先要深究这些问题的根源。

根据过去十几年的 UI 研究经验,我总结的设计差异包含下面这些因素:

  1. 盈利模式的差异
  2. 人工成本的差异
  3. 用户习惯的差异

1. 盈利模式的差异

国外产品相对国内的盈利模式相对简单、健康,排除掉大型平台和其它服务配套应用外(比如会员、硬件的配套),基本就是买断、订阅、广告这三个途径。

比如我们熟悉的 Figma、Canva、Notion 等,都是订阅制服务,在产品具备足够竞争力的条件下发展出海量的付费用户,获得巨大的收益和估值(团队只有一两百人时估值过百亿刀)。既然做好产品就能盈利,那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。

image.png

 

 

而国内市场我们都知道,用户付费的意愿是非常非常低的,这就导致很多产品即使做的还不错也看不到盈利希望,尤其是大厂产品,比如迅雷,百度网盘,网易云等等。

image.png

靠基础付费模式做不出让人满意的营收,产品团队自然要使出浑身解数来找到盈利点,不管是增加一些奇怪的功能,还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的,所以就得一直想,一直尝试,一直投放。

虽然吃相往往看上去很难看,但不这么做就会“暴毙”,而这么做至少还可以“苟延残喘”,为了生存和盈利,产品团队做出什么离奇的操作都能做出来。

这里还要澄清一点,有很多优秀的工具产品不是国内做不出来,是做出来也很难盈利,所以有能力的团队和开发者是不会轻易往火坑里跳的。

2. 人工成本的差异

第二点就是国内外人工成本上的巨大差异,发达国家的人工成本非常高昂,不只局限在产品开发团队的成本,还包括底层运营、客服、销售、业务员、快递员等等。

而产品的衍生业务往往要借助大量的底层劳力,比如京东做外卖服务,得有充沛的、廉价的骑手作为依托才办得起来,而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣,线上发展不起来。主要原因之一就是快递员的成本差了好几倍,做不出即廉价又便捷的网购体验。

image.png

加上西方国家对雇佣关系的保护,招人容易,裁员可就没有那么简单,所以多数产品团队对扩张都持非常谨慎的态度。人数少,又不能轻易搞 996,就大大限制了产品作妖的范围,这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动,设计需求自然也会低很多。

3. 用户习惯的差异

最后一点,就是用户习惯的差异。除了前面说的付费意愿低以外,还有很多其它因素。其中在我看来影响最大的因素,就是国内用户对互联网的依赖是远高于国外用户的。

国内的移动互联网行业爆发并不仅仅是局限在互联网行业里,而是把触手拓展到各行各业,用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费,办理银行卡通过线上就能完成,而很多发达国家甚至到今天还要你去营业厅手写填表。

并且互联网产品已经成为我们购物、娱乐的重要载体,大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了,离不开这些产品了,那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户,同时把用户对这类负面操作的耐受度都拉高了。

image.png

既然用户都适应了,那么为什么还要“装清高”,做个简约的、有原则的、有尊严的产品?当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力,像孔雀开屏一样,在最鸡肋的器官上比划……

以上三点,就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的,但随着市场的反馈和验证,我们最终走出了自己的道路。这是商业的选择,而不是简单归因给审美、民族、文化、消费力的限制。

不管创业者抱着什么样的想法,进入这个牌桌以后,最终都会被市场调教成相同的模样。

作为 UI 设计师来说,也不要认为这是错误的发展方向,因为这种模式大大增加了 UI 设计的需求量,间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计,那对于国内 UI 设计行业来说真正的天塌了,设计岗位会锐减 8 成以上,而这是 AI 设计根本实现不了的破坏力。

二、国内外 UI 的具体差异

有了内因,下面再对国内外 UI 设计的具体差异做对应的拆解,帮助大家更好理解国内市场的设计特征。

1. 中英文字形排版差异

第一个差异,就是中英文的字体形态差异。中文文字是方块化等宽的,而英文字母则是大小长短不一,词组长度更长,节奏感更强。所以英文设计中,往往会将字体作为一部分融入到排版中,丰富视觉观感。

image.png

image.png

而中文设计中文字的节奏感较弱,文本的主要作用基本就是传递信息,所以只用中文排版很难出现英文的相同效果,就会促使设计师添加更多的内容,来丰富界面的效果。

image.png

2. 运营需求的平面视觉

第二个差异,就是运营设计上的差异。欧美产品中运营活动不是没有,但是数量少,而且往往在设计上也做的很随意,说好听点叫简约,说难听点就是敷衍。

image.png

而国内运营活动数量多,且投入精力更大,运营的设计是没有限制的,可以用上广告平面的所有视觉手段,不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作,小公司就要 UI 设计师自己负责,所以没有固定的设计要求,水平之间差距也巨大。

image.png

运营设计的差异,源自国内广告设计方向的特色,从早年追求隐喻、创意的合成设计,到现在追求视觉冲击力的大标题、大色块设计。

而国内运营设计在今天绝不只出现在一般广告位中,会见缝插针到所有元素中,比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。

image.png

3. 字段和信息数量差异

国内有大量产品的功能和服务都更完善,这也就催生了更多的信息量和交互需求,单一页面、组件的信息量、交互、状态就远远比国外产品多。

image.png

这就导致我们在设计时要考虑这些复杂的情况,需要设计师做具体的业务分析整理字段,还需要做大量的稿件做测试和评审。

不像国外很多简单的产品内容就那么点,可以花大量精力去搞用研或者测试,在这种情况下光是完成产品需求就很困难,更遑论围绕那么海量的内容做用研也是很麻烦的。

所以国内团队虽然会强调体验,但实际设计过程中必然业务优先,体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的,绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。

4. 品牌视觉特征的差异

在国内激烈的竞争环境中,建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了,要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线,使用简单的配色和大量的留白。

image.png

同时,UI 的组件样式又高度统一,使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案,就是给组件增加更多样式细节,通过局部的创意来塑造视觉上的差异,同时再和其它应用做出区分。

image.png

于是,主流产品就陷入这种样式上的竞赛,非常高频的更新组件和视觉的设计,希望做出和别人不同的设计同时又有自己的特点。

这种现状不能说是消极的,因为它确实推动了整个 UI 行业视觉的发展,但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师,转入国外 UI 市场以后都能实现降维打击,就是因为市场的要求对自身的磨练远比外部市场高。

基于以上的差异,可以说在国内做 UI 和和在国外做 UI 是两种难度,要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因,并不会无脑迷信国外的设计要求和标准,才可以帮助我们更好融入真实的工作。

结尾

结尾再说点有趣的问题,从我们之前学员到国外工作的反馈来看,虽然国内设计容易被嫌弃,但是从设计质量和输出上已经远超欧美的平均水平。

而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时,我们在解决更复杂的商业问题,如果有机会,建议你们也可以去卷国外的 UI,会有你们想象不到的优势。

转载:优设

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

 

image.png

保姆级教程!4 个技巧,轻松打造吸睛创意 Toast 设计

清阳 设计资源

Toast 是 UI 设计里高频使用的基础组件,主要用于用户完成操作后,给出轻量化即时反馈,弹窗数秒后便自动消失。市面上常规 Toast 样式大同小异,想要做出亮眼、有质感的效果,不妨试试这 4 个设计思路,从造型、层次、色彩多维度优化,轻松跳出常规设计框架。
日常应用中,纯文字提示是最普遍的 Toast 形式,此外还有弹窗式贴纸式等衍生样式,风格更活泼、更具情感氛围。下面结合实操案例,拆解创意 Toast 的完整设计方法。

一、造型突破:巧用破形 + 异形,摆脱单调轮廓

image.png

常规 Toast 多为规整矩形,视觉平淡,我们可以通过破形异形两种手法重塑造型,提升视觉张力。
  1. 破形设计

    image.png

    让主体元素超出卡片边界,打破边框束缚。这种方式能弱化拘束感,让整体排版更大气舒展,视觉冲击力更强。
  2. 异形设计

    image.png

    在基础图形上做创意改造,常见形式有斜切边角、缺口造型、双弧形、馒头形等。最优思路是结合品牌 IP、Logo、专属图形延展造型(例如马蜂窝 APP 的蜂窝轮廓),让组件和品牌风格统一。若无固定品牌图形,优先选择斜切样式,兼顾美观与视觉舒适度。

    image.png

二、叠加背板:整合视觉元素,丰富画面层次

 

当 Toast 内图标、装饰元素较多时,画面容易杂乱松散。可以在主体元素后方增加专属背板,既能收拢零散元素、强化整体感,还能快速增加视觉层次。

image.png

搭配装饰图形时可巧用视觉对比:若主体元素线条圆润,可选用棱角分明的爆炸图形、几何图形做搭配,软硬结合让画面更有看点。在此基础上,还能继续叠加细节:添加卡片纹理、细线条装饰,进一步打磨精致度。

image.png

三、色彩搭配:冷暖对冲,平衡视觉氛围

image.png

色彩是影响观感的关键:大面积暖色会让画面显得躁动浮夸,大面积冷色则容易压抑沉闷。
 
设计时遵循冷暖色对比原则:若整体以暖色调为主,点缀少量冷色做中和;主色调偏冷时,加入暖色提亮。冷暖相互制衡,能让色彩体系更和谐,画面耐看度大幅提升。

四、色彩呼应:全域联动,避免色彩孤立

image.png

配色时切忌单一色彩集中在某一处,造成视觉割裂。当画面中出现跳脱的点缀色时,可在其他位置增加同色系小元素做呼应,让色彩贯穿整个 Toast,形成视觉联动。
 
最后还可以添加细微投影,拉开元素间的空间距离,强化立体层次感,完成整体优化。
 
转载:优设
 

 

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

 

image.png

 

兰亭妙微原创作品|大气污染可视化系统的UI进阶之路

丽洁 交互设计及用户体验

近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。

项目背景:

该系统由青海师范大学委托进行重点页改版,旨在参加环保信息化领域的比赛。原系统界面功能区划分明确,但数据堆叠较为拥挤,视觉比重失衡,信息层级模糊,导致用户难以快速聚焦核心内容。

 

设计策略与优化:

1、风格定位:采用科技感设计语言,以深蓝为基底,通过背景图案增强纵深感,辅以科技感边框与线条点缀,在丰富页面层次的同时突出关键数据。

ScreenShot_2026-06-11_095920_826.png

2、信息重构:面对庞杂数据,去粗取精,提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用,强化主次层级,使用户能够以直观的方式获取信息,有效降低理解难度。

3、视觉优化:以清晰图表替代文字堆砌,适度留白营造呼吸感。关键数据浮于场景之上,形成空间层次,在有扩展性的同时提升阅读体验。

4、场景落地:完成全国页面及山西省临汾市专题页的精细化设计,涵盖治理事件、效果分析及污染浓度趋势等核心模块。

ScreenShot_2026-06-11_095931_891.png

一点感悟:

大屏设计的核心难点从来不是炫技,而是将复杂数据转化为清晰易懂的信息。界面之美,在于让用户"一眼就懂"。

 

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

 

image.png

兰亭妙微分享:从木鸟、途家、美团首页设计,看流量分发和业务逻辑

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

民宿预订平台的首页设计如何精准捕捉年轻用户?木鸟、途家、美团三大平台通过差异化的首页布局,分别满足了00后的场景化需求、家庭度假的深度体验和95后的低价偏好。本文将深入拆解各家平台的流量分发逻辑,揭示从搜索框到金刚区的每一个设计细节,如何成为影响用户决策的关键因素。

首页作为每个平台的门面,不仅是形象的体现,也是所有业务的入口、用户的必经之路。不同功能的App有着不一样的首页模块,选择一种适合产品本身的首页展示方式非常重要。国内民宿预订平台们,又是如何通过APP首页设置实现增长的?

木鸟、途家、美团用户群体差异

开始进行APP首页对比分析之前,我们先看下木鸟、途家、美团用户的差异。

木鸟民宿近年的年度报告中多次提到,00后用户占比59%。从途家民宿五一客群看,报告中提到:“00后”和“80后”是小城民宿消费的两大主力,预订量占比都达到24%。美团旅行清明报告中提到,“95后”占比达到48%。

三大民宿预订平台纷纷聚焦95后及00后——那些已经不满足于“酒店住宿”逻辑,对住宿体验产生兴趣的年轻用户群。

据马蜂窝数据,年轻用户群基础功能型的“硬性消费”占比从2021年约70%降至2025年约50%,而精神体验型的“弹性消费”则从约28%升至约42%,沉浸式体验年增速超过30%。千人千面的消费需求正在倒逼供给侧从标准化产品转向个性化、场景化供给。

回顾民宿市场十余年发展,一条清晰脉络是“加法逻辑”:从最初的农家乐、日租房,再到网红特色民宿,再到各种“民宿+”的挖掘。用户不再满足于单纯的民宿入住,开始期待有更多住宿功能场景之外的体验。

木鸟的细分场景、途家民宿的度假需求、美团民宿的低价体验,都不是标准化复制,而是根据各自不同的定位、用户、体验需求定制设计。本质上,是回答清楚一个问题:用户在什么场景下住民宿,旅游出片、携宠出游、周末度假、同学聚会,不同场景对应不同需求,最终催生出不一样的产品设计。

从首页设计看流量分发逻辑

研究表明,较少的选择会让用户更愉悦一些。木鸟、途家、美团作为垂类民宿预订平台,核心目标非常直接,省去了多元业务的流量取舍,流量分发和路径非常清晰。

从三家民宿预订平台的首页来看,首页的结构制定逻辑决定了首屏内容是权重最高的,越往下权重越低,这是一种头重脚轻的布局结构。基于这种逻辑,视觉效果的强弱也是由上到下衰减的,而不是下方权重低的模块反而视觉最突出。

木鸟、途家、美团APP的首页都把最核心的民宿预订按钮放到了首页首屏中心位置,重要属性依次下降。木鸟民宿区别于途家和美团民宿的点在于,木鸟民宿只有首屏,没有下拉界面。这样做的好处有二:一是用户目光更聚焦,核心首屏只保留了必要的预订功能和服务展示,减少用户在首屏阶段的跳出;第二点则是避免了二屏往后的流量衰减,对一个垂类平台来说,后续屏的设置意义不大,用户的核心目的就是为了订民宿。

下面笔者结合各家APP的详细路径来详细拆解。

(木鸟民宿)

木鸟民宿首页,重要的分流模块为:搜索、订民宿、二级导航、金刚区,分发逻辑由明确需求和隐形需求两部分组成。

明确需求:用户有明确目的,通过城市及地标定位直接查找民宿;隐形需求:根据用户兴趣不同,潜在需要的分发逻辑,例如周末出游、人气好房、宠物出游等。

明确需求各家差异不大,核心差异点在隐形需求。首页的又一个关键目标,是为不同风格不同诉求的用户铺设合理的下单路径。

按入住目的来分,有的用户是精准型用户,很清楚自己要住在哪里要哪天出行,这样的结构就方便用户一次筛选入离时间、地标位置等;有的用户是半精准用户,知道自己要去哪个城市但不具体,就可以通过目标推荐给与用户选择。

按出行喜好来分,有的用户是问题导向型,只要有地理位置符合的民宿就可以入住;有的用户是场景指向或特殊需求,比如携宠出行、出片等等。

木鸟民宿的目的分区相对清晰,没有重复的部分。

(途家民宿)

途家民宿的首页功能则相对繁琐,各种需求穿插出现。明确需求部分和木鸟民宿的逻辑相同,不同点在于宫格设置。途家民宿的宫格重点在平台侧的套餐推广和会员,这个区别或许是由于途家民宿营收压力增大,流量下滑导致单纯的订房佣金收入下滑,不足以支撑途家民宿的自造血,从而平台侧变现需求大。

(美团民宿)

美团民宿首页没有平台业务需求的设计,单纯的展示内容资源。首页结构单一,视觉美观,但屏幕效率低。

用户为什么要留在这里?

从三家民宿预订平台的首页结构拆解可以看出,木鸟民宿用户侧和平台侧设计相对平均,途家民宿重平台需求,美团民宿重用户需求。这与各平台的运营现状紧密相关。

木鸟和途家是中国最早的那批民宿平台,在2017年之后进入长时间的木途美三大时期。但在2020年途家民宿关停20城直营房源之后,途家民宿的现金流和营收压力骤然增加,携程商旅流量下滑加之重心转向跨境游,途家民宿可谓雪上加霜,难以独立行走的途家靠自身引流的佣金费用并不足以支撑商业运转,从而平台侧变现需求增加,这也是途家在首页中增加套餐和会员业务的最大因素。

木鸟民宿自2020年实现连续盈利后,尽管是一个独立运营的平台,但80%的自有流量让木鸟实现了良好的“流量-订单-扩张”的循环,网红民宿以及延伸的细分场景成为平台引以为傲的产品力,这也使得木鸟兼具用户体验和营收增长的双端利好条件。

美团民宿在首页舍弃了平台侧内容,主要和美团本地生活的发展息息相关。自外卖大战开始以来,美团确立的就是高频带低频的战略,酒旅的变现压力更多的放在主站美团旅行板块,对独立APP的要求并不大。

首页设计的最终目标还是要围绕让用户多逛逛,多看些民宿,以更少的点击完成转化。除设计外,重要的还是民宿平台的房源和服务。木鸟民宿依托特色民宿体验场景守住核心用户,途家期待通过家庭度假需求弥补商旅流量流失及特色体验短板,美团聚焦绝对低价民宿削弱品质缺失。因此,真正能让用户留下来的,仍在于平台能否在民宿市场的发展更新中,找到不可替代的生态位。

转载自:人人都是产品经理

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

 

image.png

日历

链接

个人资料

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

存档