Dorun Dorun 结伴跑步社交 App 全案体验价值解析
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套结伴跑步社交 App 的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
Dorun Dorun 是一款主打「结伴慢跑、运动社交」的轻量化跑步记录 App，核心服务两类人群：日常慢跑爱好者、想要养成运动习惯却难以独自坚持的普通用户。传统运动类产品普遍存在用户体验短板：
1. 独自运动缺少陪伴与正向激励，用户极易放弃打卡，运动留存率低；
2. 运动页面数据繁杂冰冷，纯数字图表枯燥，缺少情绪共鸣；
3. 社交链路薄弱，无法实时查看好友运动状态，运动分享形式单一；
4. 界面视觉生硬严肃，长时间使用容易产生疲惫感。本项目通过「陪伴式 IP + 实时社交 + 轻量化运动记录」的设计思路，从情绪、功能、视觉三层解决用户坚持运动难、社交互动弱的核心痛点。
1. 降低运动门槛：新手引导清晰易懂，操作步骤极简，零基础用户也能快速上手；
2. 打造陪伴式情绪体验：专属卡通 IP 贯穿全流程，消解独自运动的孤独感，持续给予运动激励；
3. 完善运动社交闭环：实现好友实时位置 / 运动状态查看、运动成果个性化分享、长期运动数据沉淀；
4. 统一全页面视觉语言：搭建标准化组件库，保证从引导页、运动页到个人中心，操作逻辑、视觉感受连贯统一。
产品完整覆盖运动全生命周期：新手引导 →运动前好友状态查看→运动中轨迹实时记录→运动后个性化打卡分享→个人长期运动数据存档，形成完整的“运动—社交—复盘”闭环。
开屏三页引导完全站在用户视角，直白展示三大核心功能：结伴跑步、查看好友实时运动、打卡分享运动日常。页面搭配治愈 IP 形象，文字简短易懂，底部统一行动按钮，无多余信息干扰，用户 3 秒就能明白产品能为自己带来什么，大幅降低新用户认知成本。
运动前页面：社交激励唤醒运动动力
用户进入 App 首页即可实时查看全部好友运动动态：包含好友跑步距离、上次运动时间、在线状态。配套暖心唤醒通知机制：针对 3 天以上未运动的好友推送提醒，通过社交督促激发用户运动意愿，解决 “独自运动没动力” 的核心痛点。页面信息分层清晰：好友动态列表为核心区域，底部放置一键开启跑步的主按钮，用户无需多次跳转就能快速开启运动。
跑步过程页面摒弃繁杂数据堆砌，只保留用户最关心的 4 项核心信息：实时距离、运动时长、配速、步频；搭配彩色渐变地图轨迹，直观展示跑步路线，视觉柔和不刺眼；全程仅保留 “暂停记录”“结束跑步” 两个核心操作按钮，避免多余功能分散用户运动注意力，适配户外跑步单手简易操作的使用场景。
跑步结束后支持两种打卡展示形式：标准轨迹地图、自定义实景照片背景；用户可自由替换背景图，搭配运动数据生成专属运动动态，丰富分享素材，提升用户主动分享至社交平台的意愿。极简一键发布按钮，完整打通 “运动完成 - 分享互动” 的社交链路。
个人主页分为两大模块：打卡相册、月度运动记录清单。打卡相册以日历图文形式留存每一次运动瞬间，月度清单清晰展示每日跑步数据，让用户直观看见长期运动收获，强化坚持运动的成就感，提升用户长期留存。
项目打造专属蓝色软萌球形 IP，覆盖全套情绪表情：开心奔跑、疲惫低落、加油鼓励、心动点赞等，适配 App 全部使用场景。核心设计逻辑：将冰冷的运动数据赋予情绪温度，用户运动时、懈怠时、完成目标时都有对应 IP 形象陪伴，消解独自运动的枯燥感，建立情感联结。IP 统一应用在弹窗、气泡提示、卡片、引导页，品牌记忆点极强。
· 主色调：柔和浅天蓝色，低饱和度不刺眼，适配长时间户外、室内看手机场景，传递轻松治愈的运动氛围；
· 辅助色：浅灰、纯白作为页面基底，深蓝色作为主操作按钮，区分主次操作；
· 状态色：火焰橙、爱心粉、星星浅黄作为情绪点缀色，仅用于 IP、标签小元素，不破坏整体干净清爽的视觉基调。
整套 App 搭建完整可复用 UI 组件库，覆盖按钮、输入框、列表、卡片、弹窗、底部导航、标签气泡等全部基础元素。统一组件带来两大用户优势：
1. 全页面操作逻辑一致，用户切换页面无需重新适应操作方式；
2. 界面整洁统一，无杂乱视觉元素干扰，查找功能、阅读信息效率更高。
1. 实时好友同步机制：无需主动刷新，一键查看好友当前跑步位置与进度，实现“线上结伴跑步” 的陪伴感；
2. 轻量化信息减法：运动页面只保留刚需数据，非必要功能全部收纳至次级页面，适配户外单手操作；
3. 情绪化反馈设计：所有弹窗、通知、结果页面搭配对应 IP 表情，运动完成给予正向鼓励，懈怠时给予温柔提醒；
4. 多形式分享载体：支持地图轨迹、实景照片双模式打卡，满足不同用户的社交分享喜好；
5. 数据可视化沉淀：日历相册 + 月度清单双重形式记录运动成果，直观强化用户运动成就感。
1. 提升用户留存：依靠陪伴 IP + 社交激励双设计手段，解决运动类 App 普遍存在的 “三分钟热度” 流失问题，拉长用户使用周期；
2. 降低用户获客成本：丰富个性化打卡素材，驱动用户自发向外分享传播，实现自然流量裂变；
3. 差异化市场竞争力：市面上多数跑步软件偏向专业硬核数据，本产品主打治愈陪伴社交，精准切入普通休闲慢跑人群空白赛道；
4. 低研发迭代成本：全套标准化组件库，后续新增活动、功能页面可快速复用，降低产品迭代开发成本。
1. 以用户情绪需求为底层逻辑，不止做运动数据工具，更打造陪伴式运动社交空间；
2. 全流程轻量化信息设计，区分运动前 / 中 / 后不同场景的用户操作需求，精准简化页面信息；
3. 专属 IP 贯穿全场景，建立独特品牌情绪记忆点，和同类运动产品形成明显视觉差异化；
标准化组件系统统一全端体验，兼顾用户使用流畅度与产品长期迭代效率。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
最近一直在做GIS监测类的项目，从大气污染到生态资源，从气象预报到城市管网。越做越觉得，GIS监测的设计，真的不只是“画个好看的地图”那么简单。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司：在用户需求日益多元化的旅游市场中，会员权益的价值不仅在于提供优惠，更在于创造差异化的体验与长期归属感。本次会员权益感知升级，我们通过权益展示规则优化和场景化等方式，加强用户对会员权益的感知，让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。
当前，集团持续加大在会员权益方面的投入，旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度，更能有效提高权益使用率和订单转化率。此次会员体验升级，正是希望通过优化权益设计和服务体验，实现用户价值与平台效益的双赢，最终形成"投入-体验提升-效益增长"的良性循环。
通过走查线上各业务线（如机票、酒店等）的页面，我们发现了以下 2 个问题：
1. 不同业务线间：权益的展示节点和感知强度不同，缺少一致的设计原则
目前各业务线在会员权益方面的设计手段不同，在权益展示点位和感知强度上存在明显差异，缺少一致的设计原则进行规范。具体表现为：
酒店：主要通过货架展示强化会员权益感知
机票：侧重在列表页和中间页等固定位置展示
火车票：则聚焦于权益使用环节的触达
2. 单个业务线内：优势权益在流程中没有充分传达
通过对各业务线现有页面的走查，我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息，但整体感知度仍有不足。
针对上述问题，我们需要建立统一的设计原则，在保持各业务线自身特色的同时，形成协同一致的会员体验，提升用户对会员权益的整体感知效果。
本次优化主要围绕两个核心目标展开：一是建立规范的权益展示原则，二是提升用户对权益的感知度。具体将从以下几个方向着手：
1. 权益前置，强化展示
根据历史机票和酒店的项目数据，我们发现将具有明显优势的权益提前展示，能够显著增强用户的感知，并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合，将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益，加强感知。
什么样的权益需要前置？——设定强弱权益规则
为提升会员权益展示效果，我们通过对权益内容的系统分析，将其划分为两大类别：强权益和弱权益。
强权益：指与产品线直接相关或对价格产生显著影响的权益，例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用，能有效提升用户满意度和预订转化率，因此需要在核心预订节点进行重点展示。
弱权益：指与产品线关联度较低的权益，例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策，但可作为增值服务提升用户体验，间接促进转化。
为确保权益展示的客观准确，我们也可以借助内部的权益价值计算公式，量化每项权益的实际价值，帮助我们精准评估和展示权益，为用户提供更有价值的会员体验，最终提升用户满意度和忠诚度。
2. 让权益贯穿各节点的策略
在对各业务线的线上页面进行走查时，我们注意到订前、订后部分节点常常出现权益感知缺失的情况。
为了充分提升权益的曝光，我们制定了强弱权益展示的规则，定义了在各节点展示的必要性。在预订前节点，我们优先展示与用户决策紧密相关的强权益，并在相关性较低的节点提前展示弱权益，以加深用户印象并促进转化。预定后，对收益、转化率和 CPO（客服来电率）的影响较小，需要做到尽可能强的展示。
根据以上规则，我们在实际点位进行了应用：
以火车票业务为例，我们通过优化权益展示策略，在首页新增曝光点位、强化现有页面展示效果，并完善订后权益展示，使会员权益的触达贯穿用户全流程。优化后，权益曝光率和用户感知强度有了明显的提升。
3. 更加严格的设计规范
此前制定的会员权益视觉规范，因各业务线复杂度不同，在多次迭代后逐渐出现差异，导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此，本次优化中我们也重点明确了各类场景的标签使用规范和文案规范，全面提升展示一致性，同时加强会员身份的表达。
经过以上几点优化，上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升，验证了设计方案的有效性。
除了常规流程中的会员感知，我们也在思考如何进一步加深用户的印象，让用户订票时优先选择携程。
1. 出行中节点——提供好用的体验
订后的节点往往容易被忽视，以机票的快速安检权益为例，用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销，步骤较长，导致体验打折。
新版本中，我们将出行相关的会员权益（如快速安检）直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益，无需多层跳转。改版后，用户体验和权益使
用率都得到了提升。
2. 会员升级节点——制造惊喜感
基于 KANO 模型，我们可以将用户需求分为三类：基本型、期望型、兴奋型，在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号，不同高度代表不同等级，用户每次升级，都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。
因此，在用户升级时，我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就，并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。
通过系统化的设计与持续迭代，会员权益体系能够深度释放用户价值，推动品牌的长期可持续增长。在这个过程中，我们需要确保用户在全渠道触点中获得连贯一致的体验，从而建立稳固的品牌信任，降低用户的学习与决策成本。同时，我们需要强化会员的价值感知，通过具象化的权益呈现和情感化的设计表达，让用户切实感受到专属特权与归属感，最终打造出更具黏性的用户体验闭环。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在接触和学习 UI 设计的时候，我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618，相信大家没少被国产应用的广告“亲切的”问候。
一方面是寻找设计灵感时要做区分，另一方面则是我们学习 UI 时看的书籍，学习的理论、规范，都是由西方国家产出的，而国内设计的方向却和它们背道而驰，用一个词来形容现状，那就是 —— 割裂。
所以在初学阶段，理论学的越多，受到的冲击也就越大，疑问也就越多。所以我们今天的目标，就是来帮大家解答这个疑问。
当我们研究国内外 UI 设计的差异时，样式上的差异只是表象，它们是由更深层次的因素所激发，所以我们首先要深究这些问题的根源。
根据过去十几年的 UI 研究经验，我总结的设计差异包含下面这些因素：
1. 盈利模式的差异
国外产品相对国内的盈利模式相对简单、健康，排除掉大型平台和其它服务配套应用外（比如会员、硬件的配套），基本就是买断、订阅、广告这三个途径。
比如我们熟悉的 Figma、Canva、Notion 等，都是订阅制服务，在产品具备足够竞争力的条件下发展出海量的付费用户，获得巨大的收益和估值（团队只有一两百人时估值过百亿刀）。既然做好产品就能盈利，那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。
而国内市场我们都知道，用户付费的意愿是非常非常低的，这就导致很多产品即使做的还不错也看不到盈利希望，尤其是大厂产品，比如迅雷，百度网盘，网易云等等。
靠基础付费模式做不出让人满意的营收，产品团队自然要使出浑身解数来找到盈利点，不管是增加一些奇怪的功能，还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的，所以就得一直想，一直尝试，一直投放。
虽然吃相往往看上去很难看，但不这么做就会“暴毙”，而这么做至少还可以“苟延残喘”，为了生存和盈利，产品团队做出什么离奇的操作都能做出来。
这里还要澄清一点，有很多优秀的工具产品不是国内做不出来，是做出来也很难盈利，所以有能力的团队和开发者是不会轻易往火坑里跳的。
2. 人工成本的差异
第二点就是国内外人工成本上的巨大差异，发达国家的人工成本非常高昂，不只局限在产品开发团队的成本，还包括底层运营、客服、销售、业务员、快递员等等。
而产品的衍生业务往往要借助大量的底层劳力，比如京东做外卖服务，得有充沛的、廉价的骑手作为依托才办得起来，而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣，线上发展不起来。主要原因之一就是快递员的成本差了好几倍，做不出即廉价又便捷的网购体验。
加上西方国家对雇佣关系的保护，招人容易，裁员可就没有那么简单，所以多数产品团队对扩张都持非常谨慎的态度。人数少，又不能轻易搞 996，就大大限制了产品作妖的范围，这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动，设计需求自然也会低很多。
3. 用户习惯的差异
最后一点，就是用户习惯的差异。除了前面说的付费意愿低以外，还有很多其它因素。其中在我看来影响最大的因素，就是国内用户对互联网的依赖是远高于国外用户的。
国内的移动互联网行业爆发并不仅仅是局限在互联网行业里，而是把触手拓展到各行各业，用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费，办理银行卡通过线上就能完成，而很多发达国家甚至到今天还要你去营业厅手写填表。
并且互联网产品已经成为我们购物、娱乐的重要载体，大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了，离不开这些产品了，那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户，同时把用户对这类负面操作的耐受度都拉高了。
既然用户都适应了，那么为什么还要“装清高”，做个简约的、有原则的、有尊严的产品？当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力，像孔雀开屏一样，在最鸡肋的器官上比划……
以上三点，就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的，但随着市场的反馈和验证，我们最终走出了自己的道路。这是商业的选择，而不是简单归因给审美、民族、文化、消费力的限制。
不管创业者抱着什么样的想法，进入这个牌桌以后，最终都会被市场调教成相同的模样。
作为 UI 设计师来说，也不要认为这是错误的发展方向，因为这种模式大大增加了 UI 设计的需求量，间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计，那对于国内 UI 设计行业来说真正的天塌了，设计岗位会锐减 8 成以上，而这是 AI 设计根本实现不了的破坏力。
有了内因，下面再对国内外 UI 设计的具体差异做对应的拆解，帮助大家更好理解国内市场的设计特征。
1. 中英文字形排版差异
第一个差异，就是中英文的字体形态差异。中文文字是方块化等宽的，而英文字母则是大小长短不一，词组长度更长，节奏感更强。所以英文设计中，往往会将字体作为一部分融入到排版中，丰富视觉观感。
而中文设计中文字的节奏感较弱，文本的主要作用基本就是传递信息，所以只用中文排版很难出现英文的相同效果，就会促使设计师添加更多的内容，来丰富界面的效果。
2. 运营需求的平面视觉
第二个差异，就是运营设计上的差异。欧美产品中运营活动不是没有，但是数量少，而且往往在设计上也做的很随意，说好听点叫简约，说难听点就是敷衍。
而国内运营活动数量多，且投入精力更大，运营的设计是没有限制的，可以用上广告平面的所有视觉手段，不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作，小公司就要 UI 设计师自己负责，所以没有固定的设计要求，水平之间差距也巨大。
运营设计的差异，源自国内广告设计方向的特色，从早年追求隐喻、创意的合成设计，到现在追求视觉冲击力的大标题、大色块设计。
而国内运营设计在今天绝不只出现在一般广告位中，会见缝插针到所有元素中，比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。
3. 字段和信息数量差异
国内有大量产品的功能和服务都更完善，这也就催生了更多的信息量和交互需求，单一页面、组件的信息量、交互、状态就远远比国外产品多。
这就导致我们在设计时要考虑这些复杂的情况，需要设计师做具体的业务分析整理字段，还需要做大量的稿件做测试和评审。
不像国外很多简单的产品内容就那么点，可以花大量精力去搞用研或者测试，在这种情况下光是完成产品需求就很困难，更遑论围绕那么海量的内容做用研也是很麻烦的。
所以国内团队虽然会强调体验，但实际设计过程中必然业务优先，体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的，绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。
4. 品牌视觉特征的差异
在国内激烈的竞争环境中，建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了，要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线，使用简单的配色和大量的留白。
同时，UI 的组件样式又高度统一，使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案，就是给组件增加更多样式细节，通过局部的创意来塑造视觉上的差异，同时再和其它应用做出区分。
于是，主流产品就陷入这种样式上的竞赛，非常高频的更新组件和视觉的设计，希望做出和别人不同的设计同时又有自己的特点。
这种现状不能说是消极的，因为它确实推动了整个 UI 行业视觉的发展，但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师，转入国外 UI 市场以后都能实现降维打击，就是因为市场的要求对自身的磨练远比外部市场高。
基于以上的差异，可以说在国内做 UI 和和在国外做 UI 是两种难度，要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因，并不会无脑迷信国外的设计要求和标准，才可以帮助我们更好融入真实的工作。
结尾再说点有趣的问题，从我们之前学员到国外工作的反馈来看，虽然国内设计容易被嫌弃，但是从设计质量和输出上已经远超欧美的平均水平。
而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时，我们在解决更复杂的商业问题，如果有机会，建议你们也可以去卷国外的 UI，会有你们想象不到的优势。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
当 Toast 内图标、装饰元素较多时，画面容易杂乱松散。可以在主体元素后方增加专属背板，既能收拢零散元素、强化整体感，还能快速增加视觉层次。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。
项目背景：
该系统由青海师范大学委托进行重点页改版，旨在参加环保信息化领域的比赛。原系统界面功能区划分明确，但数据堆叠较为拥挤，视觉比重失衡，信息层级模糊，导致用户难以快速聚焦核心内容。
设计策略与优化：
1、风格定位：采用科技感设计语言，以深蓝为基底，通过背景图案增强纵深感，辅以科技感边框与线条点缀，在丰富页面层次的同时突出关键数据。
2、信息重构：面对庞杂数据，去粗取精，提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用，强化主次层级，使用户能够以直观的方式获取信息，有效降低理解难度。
3、视觉优化：以清晰图表替代文字堆砌，适度留白营造呼吸感。关键数据浮于场景之上，形成空间层次，在有扩展性的同时提升阅读体验。
4、场景落地：完成全国页面及山西省临汾市专题页的精细化设计，涵盖治理事件、效果分析及污染浓度趋势等核心模块。
一点感悟：
大屏设计的核心难点从来不是炫技，而是将复杂数据转化为清晰易懂的信息。界面之美，在于让用户"一眼就懂"。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
民宿预订平台的首页设计如何精准捕捉年轻用户？木鸟、途家、美团三大平台通过差异化的首页布局，分别满足了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。
Voltera 新能源停车充电系统 UI 全案深度拆解
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套双端停车充电系统的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
Voltera 是一套服务于新能源停车场的一体化智能管控系统，主要面向两大使用群体：停车场运营管理人员、新能源车主。
在传统模式下，双方都存在明显使用困扰：车场管理者无法直观查看车位状态、充电桩使用数据，场地利用率难以把控；新能源车主寻找空闲充电车位费时费力，充电进度、能耗情况也无法实时了解，双方使用体验都大打折扣，信息不通畅成为最大问题。
1. 面向车场运营者：把繁杂的运营数据简化呈现，支持全天候实时监控、数据趋势查看、车位预约管理，让管理工作更高效；
2. 面向新能源车主：简化操作步骤，快速找到合适的充电车位，实时查看充电状态与能耗，打造便捷的用车体验；
3. 全场景视觉与体验统一：电脑管理后台、手机 App、线下广告屏保持体验一致，线上线下服务无缝衔接。
系统支持多设备使用，包含 PC 端管理后台、苹果移动端 App、户外立式信息屏，全面适配不同场景下的使用需求。
整套系统根据两类人群的使用习惯，规划了专属操作流程：车主可完成登录、查找车位、在线预约、实时查看充电状态等操作；车场管理人员可查看全场车位数据、统计使用趋势、管理充电订单。
使用优势：
1. 功能分区明确：系统划分为登录首页、全场数据总览、车位筛选、充电数据查看、系统设置几大板块，功能划分清晰，上手零门槛；
2. 体验持续优化：结合大量真实用户的使用反馈反复调整流程，规避操作卡顿、查找困难等问题，适配不同年龄、操作习惯的使用者；
3. 人群需求区分：管理端侧重全场宏观数据，车主端聚焦个人用车需求，功能不冗余，每个人都能快速找到自己需要的内容。
电脑端专为车场管理人员打造，布局规整合理：左侧为常用功能入口，中间展示车位信息，右侧搭配全场停车场全景视图，底部呈现各类运营数据。
使用特点：
1. 信息主次分明：首页优先展示空闲车位、占用车位、充电车位等核心数据，再延伸至车位详情、月度 / 周度使用率等辅助信息，查看逻辑循序渐进；
2. 操作灵活便捷：支持全景地图缩放、鼠标悬停查看车位详情，还可自由切换年、周、日不同时间维度的数据，满足多样化管理需求，适配长时间办公查看的使用场景。
（2）手机 App：轻量化设计，随手即用
手机屏幕空间有限，系统遵循 “核心功能优先展示” 的原则，打造极简使用体验：
1. 底部设置固定导航栏，将充电这一高频功能放在核心位置，点击即可直达；
2. 首页优先展示停车场全景与推荐车位，充电页面重点突出充电进度，能耗数据也以简易图表呈现，一目了然；
3. 全设备体验统一：手机端沿用电脑端的信息展示样式，仅精简内容，用户切换设备使用时，无需重新适应，学习成本极低。
整套界面采用简约商务风格，以易用性为核心打造视觉体验：
· 整体以白色、浅灰色为基底，色调柔和，长时间查看屏幕也不易产生视觉疲劳；
· 用不同颜色区分设备与车位状态：绿色代表车位空闲、充电运行正常，蓝色专属标识新能源充电桩，橙色提示使用高峰，黑色按钮标注主要操作选项，无需阅读文字，仅凭颜色就能快速判断状态；
· 品牌视觉统一：简约品牌标识贯穿所有设备，线下宣传物料也保持同款风格，整体观感整洁专业。
文字大小区分明确，核心数据放大展示，辅助说明文字简洁精炼；页面预留充足留白，内容排布疏密得当，不会出现信息拥挤的情况。
系统搭配实景图片、简易图表辅助展示：用车场、车辆实拍图让场景更直观；用折线图、柱状图展示数据变化；用彩色区块区分不同车位类型，告别密密麻麻的文字描述。
系统将各类信息整合为标准化展示模块，分类清晰：
1. 车位信息模块：清晰标注车位位置、步行距离、收费标准、充电标识与预约按钮，电脑端多列展示、手机端单列排布，查阅方便；
2. 数据统计模块：突出核心数据，搭配简易图表，使用率、能耗等数据直观可见；
3. 充电详情模块：整合车辆状态、充电功率、剩余时长等信息，电脑端、手机端均可灵活查看。
规整的展示形式，让信息查找更快捷，大幅提升使用效率。
1. 重点数据放大呈现，车位占用率、充电进度、使用涨幅等核心信息第一眼就能捕捉；
2. 支持多维度数据对比，管理人员可清晰区分普通车位与充电车位的使用差异，为运营决策提供参考；
3. 悬浮提示功能：鼠标点击或悬停即可查看数据解读，不用反复跳转页面，查看数据更省心。
1. 智能推送贴心便捷：车主打开 App，系统会自动推荐距离最近的空闲充电车位，省去手动筛选的麻烦；车场管理后台首页直接展示全场运营数据，无需层层点击查找；
2. 数据实时同步：电脑后台与手机 App 数据实时联动，车位状态、充电进度毫秒级更新，信息零延迟；
3. 操作流程极简：从找车位、预约、充电到结束订单，全程仅需几步核心操作，无多余弹窗与繁琐表单，使用流畅；
4. 线上线下体验联动：线下户外信息屏与手机 App、电脑后台使用同款视觉与内容，服务体验保持统一。
1. 兼顾管理与使用双重需求：一套系统同时满足车场运营的大数据管理需求，和车主轻量化的用车需求，帮助停车场降低运营成本，提升整体服务效率；
2. 用数据赋能智慧运营：系统将车位空置率、充电桩使用率等运营数据直观呈现，帮助车场管理者合理调整定价、规划充电桩布局，实现精细化运营；
3. 贴合新能源行业调性：整体风格简约大气，契合新能源汽车科技、高端的行业定位，区别于传统老旧的停车系统，提升车场整体形象。
1. 多设备无缝适配：电脑、手机、线下屏体验统一，不同场景使用都顺手；
2. 数据展示通俗直观：不管是管理人员还是普通车主，都能轻松看懂各类数据；
3. 流程前置优化：结合真实使用习惯规划操作路径，从源头减少操作麻烦；
4. 精准区分人群需求：针对管理者、车主打造专属功能，各司其职，实用性拉满。
转载自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统（TDTR）的软件UI设计。
不得不说，做科研设备设计真的太“上头”了！
这不仅仅是一个软件界面，更是连接科学家与纳米世界的窗口。
分享一下我们的设计思考，希望能给做B端、科研仪器设计的姐妹们一点灵感～
1. 项目背景：让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。
设备用途： 测量纳米薄膜热导率、界面热阻等。
核心挑战： 如何把微纳尺度的复杂数据，转化成直观、易操作的视觉语言？ 我们输出了深色和浅色两套方案，客户一眼相中了浅色方案！理由是：干净、通透，长时间盯着屏幕做实验眼睛不累。
2. 设计亮点：严谨中的“小心机”
配色逻辑：红灰CP太绝了！
灰色背景： 作为基底，最大程度保证了数据图表的清晰度，不抢戏。
红色点睛： 作为品牌主色和警示色，关键操作按钮和重要数据用红色突出，既符合工业严谨性，又增加了视觉活力。
图标设计：低饱和度的“科研风” 没有用花里胡哨的渐变，而是采用几何图形+数据可视化元素。
线条扁平化，小尺寸下也能看清，降低科研人员的认知成本。
布局：多面板分栏 左侧控制参数，中间展示实时数据，右侧显示拟合分析。
这种布局让科研人员可以“一眼看全”，不用频繁切换页面，大大提升了实验效率。
3. 从设计到落地：高还原度的秘密 让人骄傲的是，我们不仅做了UI设计，还负责了QT前端开发！
通过多轮的效果走查，我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件，这种成就感真的爆棚！
4. 设计师碎碎念
做科研仪器设计，“克制”是最大的美德。 我们不需要炫技，只需要让数据更清晰，让操作更流畅。每一个像素的打磨，都是为了致敬科学的严谨。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
现在 AI 产品这么多，作为 UIUX 设计师，我到底应该使用哪一款？
Figma Make、Gemini、Claude Code、Codex，每一款产品看上去都能生成内容、写代码、做页面。
但真正深度使用过后，你会发现：它们擅长解决的问题并不相同。
兰亭妙微UI设计：今天，我们就站在 UIUX 设计师的真实工作流程中，聊聊每一款产品的能力边界，以及究竟应该如何选择。AI 产品更新很快，后续能力仍然会不断变化。
在对比之前，我们需要先明确一件事：
AI 产品不是功能越多越好，而是要看它能否进入你的真实工作流程。
比如，我要写一篇公众号文章、整理用户访谈，这和我要搭建一个复杂的页面 Demo，完全是两种任务。
如果没有理解差别，我们就很容易陷入一个误区：
今天看到别人用 Claude Code，我就去折腾 Claude Code；明天发现 Figma Make 更新了，又把所有流程搬回 Figma。
工具收藏了一堆，最后真正工作时依旧不知道应该打开哪一个。
那对于 UIUX 设计师而言，我们应该重点关注哪些问题？
接下来，我们逐个拆解。
如果你本身就在使用 Figma，又不想折腾复杂配置，那么 Figma Make 应该是最容易开始的工具。
它最大的优势在于：距离设计师原本的工作环境足够近。
你只需要在 Figma Make 中通过对话，就可以创建交互原型、Web 页面和功能 Demo。
同时，它支持将现有设计稿、竞品截图、产品文档和图片素材作为参考内容。比如，你可以丢给它一张竞品截图，让它参考页面布局、颜色和内容结构，生成一个相近的页面。
如果公司已经有相对成熟的设计系统，还可以通过 Make Kits 引入组件、变量、样式和使用规则，让生成结果更接近团队规范。
不过，这里大家需要留意：
接入设计系统，不代表生成结果一定正确。
特别是复杂业务页面，仍然需要设计师反复检查信息结构、组件使用和交互逻辑。竞品截图也只能作为参考，并不等于可以像素级还原。
这里稍微多说一点，现如今很多设计师都非常依赖 AI 工具，根本不用自己去做设计，但从来没有思考过 AI 生成的结果是否正确。比如今天有同学来咨询一个小的问题，在AI生成的页面中，他没有做任何的思考，直接使用结果导致提案失败，所以我们现在是需要具备判断能力的。
所以，Figma Make 更适合：
在我的日常使用中，Gemini 更多承担的是“内容助手”的角色。
它支持较长的上下文，也具备文本、图片、音频和视频等多模态理解能力。
因此，无论是阅读行业报告、分析竞品资料、整理访谈记录，还是拆解一段视频内容，它都非常合适。
在我自己的工作流里，无论是视频文案、公众号文章，还是课程资料，我都会使用 Gemini 做初步整理和润色。
从个人体验来看，它在表达层面会更自然一些，也更适合处理较长的文本内容。
不过，如果你的目标是直接修改 Figma 页面，或者搭建一套完整的设计工程化流程，它并不是第一选择。
Gemini 更适合：
Claude Code 的定位相对明确：
它首先是一款面向工程任务的代码智能体。
如果你需要理解复杂项目、梳理代码结构、定位 Bug，或者将一个页面 Demo 做得更加稳定，那么 Claude Code 会是非常不错的选择。
它能够读取项目文件、执行命令、修改代码，也可以通过 MCP 连接 Figma、Google Drive、Slack 等外部工具。
所以，Claude Code 并不是不能接入 Figma，而是它的重心依旧偏向工程实现。
在我的使用体验中，如果任务涉及复杂代码逻辑、项目级修改和稳定落地，我会优先考虑 Claude Code。
但如果目标是生成图片素材、调整视觉风格，或者希望在设计工具之间快速往返，它就不是我的第一选择。
Claude Code 更适合：
最后，我们来聊聊 Codex。
目前在日常辅导中，我更建议 UIUX 设计师重点尝试 Codex。
原因不是它在每一个单点能力上都绝对领先，而是：
它能够把设计师原本割裂的工作流程串联起来。
首先，Codex 可以通过 Figma MCP 读取组件、变量、布局和设计上下文，也可以将代码页面重新传回 Figma，生成可编辑的设计图层。
这就意味着，设计稿与真实页面之间不再是单向交付，而是能够反复往返。
其次，Codex 支持图片生成和迭代修改。
比如页面缺少图标、插画、背景图或者产品素材，你可以直接让它生成，再根据页面效果反复调整。
然后，它还支持 Computer Use、应用内浏览器和插件。
这就让设计师可以进一步串联：
需求梳理 -> 页面生成 -> 素材补充 -> 浏览器验证 -> 设计走查 -> 继续优化
比如我们之前讲过的设计验收，就可以让 Codex 通过浏览器查看真实页面，再对照设计稿检查问题。
当然，功能多也意味着使用时需要先想清楚任务。
Codex 并不是一个“一句话解决所有问题”的魔法工具。你依旧需要明确自己的目标，逐步搭建适合自己的工作流。
Codex 更适合：
如果你只是想快速生成原型，可以优先使用 Figma Make。
如果你需要整理资料、理解长文本和润色表达，可以优先使用 Gemini。
如果你要处理复杂代码和工程逻辑，可以使用 Claude Code。
如果你希望进一步串联设计、代码、素材和验收流程，可以重点尝试 Codex。
其实在我看来，设计师不需要强行选择唯一一款 AI 产品。
我自己更常用的方式是：
工具永远会不断更新。
我们真正需要掌握的，不是某一个软件的固定操作，而是理解它们的能力边界。
当你面对一个新任务时，能够快速判断应该使用什么工具，把想法真正落地，这才是 AI 带给 UIUX 设计师最重要的价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com