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

一、项目定位与行业现存痛点
产品简介
TX Plan Pro是面向牙医、口腔诊所的AI诊疗规划SaaS工具，官网作为品牌唯一获客落地页，分为深色PC大屏版本、轻量化手机移动端版本。核心解决牙医诊疗沟通痛点：可视化生成治疗方案，缩短椅旁沟通时长、提升患者方案接受率。官网完整传递五大核心价值：减少患者异议、快速问诊、AI智能助手、成交转化率提升、营收增长，配套产品工作流程、数据效果可视化、品牌自定义模板、保险费用拆分等功能模块，适配牙医浏览、诊所管理者评估采购两大目标人群。

传统齿科软件官网四大行业痛点
1. 医疗页面同质化、堆砌俗套牙科元素：大量牙齿、口腔俗套插图，缺少高级简约专业质感，无法凸显数字化工具科技属性；
2. 明暗视觉割裂，PC与手机页面设计语言不统一，品牌识别断裂；
3. 信息排布杂乱，卖点分散，牙医无法一眼看懂工具能节省多少沟通时间、提升成交；
4. 配色轻浮廉价，大量纯白亮底色长时间浏览刺眼，缺少适合医疗行业沉稳高级深色模式。

二、完整齿科SaaS获客信息传递闭环
一套极简视觉打通品牌价值展示→核心卖点拆解→产品流程演示→效果数据佐证→移动端轻量化预览完整转化闭环
1. PC深色首屏价值区：顶部简洁导航（工作原理/优势/上手方式/定价），居中核心slogan直击牙医痛点，四周悬浮轻量化数据卡片展示产品收益指标，底部等待名单转化按钮，首屏完成核心价值传递；
2. How it works功能流程板块：分网格卡片拆解产品完整链路，从AI生成可视化方案、舒缓患者焦虑、节省椅旁时间、自定义品牌模板、保险费用简化五大维度拆解产品能力；
3. 产品质感与优势板块：轻量化折线、点阵数据图表，低认知负担、贴合牙医思考逻辑、开箱即用三大产品体验卖点；
4. 效果数据可视化板块：节省时长、转化率、就诊成交数据图表，用直观数字佐证工具实际收益；
5. 移动端响应式页面：精简导航、压缩图文尺寸，保留全部核心卖点与转化按钮，适配牙医手机碎片化浏览。

三、核心页面模块设计拆解
 模块1：PC深色首屏着陆页
纯哑光深黑低反光基底，极简无冗余装饰，橙红作为唯一点缀强调色
1. 顶部极简细文字导航，右上角登录入口；
2. 四周悬浮半透明圆角数据卡片，搭配轻量化简约图表展示产品核心收益；
3. 居中衬线高级标题直击行业痛点，简短副文案解释产品定位；
4. 底部醒目浅灰行动按钮引导用户加入试用名单；
5. 整体留白充足，无多余装饰，凸显医疗专业克制质感。

模块2：产品工作原理网格板块
纯白基底分多组圆角卡片，线性流程图串联AI生成、可视化展示、患者确认完整链路，每张卡片搭配简短文案说明对应功能收益，排版宽松整洁，降低阅读压力。

模块3：数据可视化与产品体验模块
极简线条折线、点阵图表，仅用橙红色标注增长数据，卡片文字克制简短，只保留牙医最关心的效率、转化相关指标，无冗余修饰图形。

模块4：移动端轻量化页面
竖屏重新排布网格，压缩卡片尺寸，保留全部核心slogan、卖点图表、转化按钮，极简汉堡菜单替代顶部多栏导航，单手滑动即可浏览完整官网内容。

四、视觉设计体系：深黑极简橙红点缀专业医疗商务风
1. 色彩系统
- 双基底体系：哑光纯深黑（专业高级展示）、低饱和米白（功能介绍板块），兼顾氛围感与可读性；
- 品牌点缀识别色：低饱和暖橙红，仅用于数据高亮、小标题、重点行动提示，克制不浮夸，适配医疗稳重调性；
- 文本色：浅灰白正文、浅灰辅助说明文字，深色页面文字柔和不刺眼，浅色页面层次干净清晰。

2. 图形与可视化规范
1. 极简线性轻量化图表：折线、点阵、进度条无厚重填充，弱化商业嘈杂感，贴合医疗简约高级调性；
2. 超大圆角低透明度悬浮卡片，大面积留白，页面干净克制无杂乱元素；
3. 无俗套口腔、牙齿插图，依靠流程线条、数据图表传递产品能力，跳出行业同质化设计；
4. 纤细极简线性图标，统一复用PC与移动端，视觉体系统一。

 3. 文字层级规范
衬线标题搭配无衬线正文，三层清晰信息层级：核心痛点大号slogan→板块二级卖点标题→数据、流程辅助小字，远距离快速抓取产品核心收益信息。

 五、产品商业与齿科行业落地价值
1. 跳出齿科行业俗套视觉，极简深色高级质感打造差异化，更容易获得高端口腔诊所、资深牙医好感；
2. PC/手机一套统一组件视觉，品牌识别连贯，降低官网开发、迭代维护成本；
3. 痛点前置的信息排布，首屏直击牙医椅旁沟通耗时、成交率低核心困扰，提升线索转化；
4. 双基底明暗页面兼顾展示质感与阅读舒适度，长时间浏览视觉负担更低；
5. 全页面轻量化极简设计，加载速度更快，移动端碎片化浏览体验流畅，覆盖牙医多场景获客渠道。

图片来自Behance

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

多数设计师习惯被动接收产品经理输出的需求文档，仅围绕视觉、交互完成页面绘制，极易脱离业务本质，尤其复杂 B 端项目会出现设计方案偏离核心目标、团队沟通低效等问题。文章提出核心思路：设计师必须前置介入需求阶段，深挖需求根源，以产品定位为判断标尺，通过标准化流程挖掘、筛选真实用户诉求，而非单纯执行画图工作。

当下数字化项目成为互联网行业主流，但很多团队做产品时忽略用户体验前置调研，仅凭主观预判用户行为，导致产品体验割裂、商业目标难以落地。文章提出以用户为中心的设计逻辑，完整工作链路分为：收集问题→转化方案→划分模块优先级→落地执行，并介绍 6 套标准化 UX 工具，打通商业、用户、技术三方视角，搭建完整用户体验策略。
用户体验的核心目标：消除用户与品牌交互的阻碍，兼顾用户需求、情感感受与产品可用性，平衡商业收益、技术实现、用户诉求三大维度。

很多 UI、体验设计师都会对照行业能力分级表规划成长路径，初级、中级、高级的技能清单看似清晰，但实操中常会陷入瓶颈：单项技能达标，综合能力却难以匹配职级。兰亭妙微团队深耕体验设计多年，我们认为真正的进阶，不只是夯实视觉、交互基础，更要向上补齐业务、调研、落地类复合能力，站在产品与业务视角思考设计，以下六大核心提升方向，均来自团队真实项目沉淀。

兰亭妙微ui设计公司分享：在 UI 外包业务服务中，我们发现行业普遍存在痛点：低成本界面定制需求下，客户同样追求独特设计亮点。市面上同质化模板泛滥，常规标准化设计难以塑造品牌专属视觉记忆，这也是我们形成系统化行业属性设计方法论的核心初衷。

今天分享一套通用解法：利用行业属性植入打造专属设计亮点，学会这套分层逻辑，不管是低价小单还是商业项目，都能快速做出有辨识度的界面。

一、先搞懂：什么是行业属性设计？

简单来说，就是提炼产品赛道专属视觉符号，融入界面视觉体系，让用户一眼看懂产品定位：

• 音乐类 App：提取音符、耳机、唱片、麦克风等音乐元素；
• 运动健身类 App：提取篮球、跑道、跑鞋、赛事奖杯等运动符号；
• 旅游出行类 App：提取飞机、轮船、行李箱、风景窗等出行意象。

把行业元素和界面视觉结合，就能摆脱千篇一律的模板感。而元素植入有清晰的能力分层，从入门到高阶共 5 个层级，逐层递进。

第一层：直接表达（新手入门，零思考成本）

最基础的落地方式，直白摆放行业具象图形，无需创意融合，只要做好图形精致度即可。 适用场景：功能入口、标签栏、分类模块。 举例：体育页面直接搭配篮球、网球图标；K 歌页面直接放置麦克风图形，直观传递品类属性，门槛最低，适合快速出稿。

第二层：勉强拼凑（轻度融合，易踩同质化坑）

比直接表达多一步排版思考，将行业图形叠加在原有界面空白处，但元素与界面本体完全割裂。 判断标准：移除图形后，整套界面依旧完整可用，元素只是附加装饰。 举例：机票行程页中间添加飞机简笔画、音乐空白页铺满音符装饰，只是简单堆砌，创意单薄，很难成为真正的设计亮点。

第三层：巧妙结合（进阶创意，元素与界面共生）

行业符号不再是额外贴纸，而是构成界面 / 图标本身的结构，图形和基础视觉融为一体，拿掉元素后组件直接失效。 案例 1：行程图标将飞机、轮船线条合并为统一轮廓，出行属性藏在图形结构里； 案例 2：任务编辑图标，把常规竖线替换为树叶造型，一眼传递环保、健康赛道属性。 这个层级是大部分商业 UI 出彩的核心区间，兼顾落地效率与创意质感。

第四层：意境传达（高阶抽象，氛围感拉满）

跳出具象图形堆砌，用抽象意象、场景氛围暗合行业内核，靠情绪与故事传递赛道属性，留白感、高级感更强。 典型案例：飞猪旅游空状态页面，用「推开窗户眺望远方」的画面，隐喻旅行、看世界的产品内核，没有直白摆放飞机、行李箱，却精准传递旅游调性，氛围感记忆点极强。

第五层：动态加持（顶级创意，交互赋予生命力）

在静态视觉的基础上增加动态交互，还原行业真实动态行为，让设计亮点从 “看得见” 升级为 “有体感”，差异化直接拉满。

• 音乐产品：播放页加入 CD 旋转、音浪跳动动效；
• 运动产品：吉祥物搭配运球、奔跑循环动画； 动态能极大强化产品赛道感知，是打造爆款界面、提升甲方满意度的加分利器。

全文总结

想要摆脱平庸界面、快速产出客户认可的设计亮点，核心就是用好行业属性植入 5 层逻辑：

1. 直接表达｜直白摆放具象元素，新手快速落地
2. 勉强拼凑｜附加装饰图形，创意薄弱易同质化
3. 巧妙结合｜元素融入组件结构，商用最优解
4. 意境传达｜抽象场景氛围，提升高级质感
5. 动态加持｜搭配行业专属动效，打造记忆爆款

这套方法适配 UI、图标、空白页、活动页全场景，无论预算高低，都能快速做出有专属辨识度的设计，看完就能上手实操。

转载：站酷

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

北京兰亭妙微常年承接 APP、网页、管理系统全案 UI/UX 设计，在项目迭代中发现，多数产品体验差并非功能缺失，而是设计环节缺少完整的用户视角把控。很多设计师只关注视觉美观，忽略底层使用逻辑，最终导致用户操作繁琐、留存走低。结合多年落地案例，本文拆解七大核心优化维度，分享从设计层面改善用户体验的完整思路。

北京兰亭妙微深耕 UI/UX 设计十余年，在电商、工具、阅读类 APP 项目中落地过数十套签到体系，近期不少产品同行咨询签到功能的设计逻辑与落地要点。结合我们经手的项目案例与全网主流产品调研，本文从签到类型、用户分层、页面交互三大维度，拆解签到设计完整思路，帮设计师理清签到底层逻辑。
签到的核心目标统一：依靠物质奖励（积分、优惠券、金币）、精神激励（徽章、连续打卡成就）拉升日活、强化用户粘性，最终服务产品商业转化。但并非所有产品都适合上线签到功能，兰亭妙微总结两个判断标准：社交类原生自带高频访问，新增签到易显得冗余；政务、办公类强工具产品，用户仅按需打开，签到很难撬动留存，投入产出比较低。

一、前言

兰亭妙微ui设计公司分享：真实 C 端产品改版实战，本次优化对象是国内头部证券 App—— 同花顺核心高频使用模块：自选板块。 文末附全文逻辑速览图，方便快速梳理整体设计脉络。

二、同花顺自选模块现状与用户底层需求拆解

自选是承载用户收藏个股、实时查看行情数据的核心页面，用户可自主创建分组收纳不同标的，覆盖 A 股、港股、美股等多市场股票。 收藏分组是互联网产品通用功能，短视频、电商、资讯 App 均有同类设计，但证券类产品的收藏逻辑和使用场景存在本质区别：

1. 普通 App 收藏仅作内容归档，用户低频回访，核心诉求是 “事后查找内容”；
2. 同花顺自选属于高频刚需功能，用户打开的核心目的不是找单只股票，而是批量监控一整组标的实时行情，页面本质是可横向滑动的数据表格，无需点进个股详情即可快速对比涨跌。

除此之外，分组本身对资深投资者具备极强决策价值： 多数股民习惯自建自定义分组替代官方行业板块，按照科技、有色、消费、化工等赛道划分，分组会自动计算组内个股平均涨跌幅，用来判断整体板块行情。 官方自带板块个股繁杂、标的关联度低，无法贴合个人交易逻辑，自定义分组是短线、波段交易者的核心看盘工具。

基于高频交易场景，原版自选模块存在三大致命体验痛点，直接干扰看盘、选股效率：

痛点 1：分组切换操作成本极高

原有分组仅靠页面顶部窄标签栏承载，触控区域狭小、点击容错率低；分组数量多时横向滑动距离过长。即便打开侧边分组列表，展示空间有限，需要反复滚动才能定位目标分组，切换流程繁琐。

痛点 2：分组行情数据隐藏太深

分组平均涨跌幅是板块判断关键指标，但原版必须展开侧边栏才能查看；侧边栏弹出后会锁定页面，无法同步操作个股列表，打断连续看盘流程。

痛点 3：分组无层级管理能力，分类混乱

仅支持一级分组，不支持父级分类。以金属赛道举例，投资者需要拆分铜、铝、贵金属、稀有金属等细分赛道，单层列表会造成分组泛滥、杂乱无章。 用户只能手动添加标题 + 分割线勉强区分大类，属于治标不治本的补救方式，管理效率极低。

以上问题看似不多，但对短线高频交易者影响显著：频繁切换分组、查看板块数据会增加操作步骤，错失行情判断时机，直接影响交易决策。下文将围绕痛点，完整还原整套优化设计落地思路。

三、自选页面完整优化方案推演

（一）优化核心目标

结合用户刚需与现存缺陷，本次改版锁定三大核心目标：

1. 重构分组展示形式，降低分组查找、切换成本；
2. 分组行情数据默认外露，无需弹窗即可直观查看板块涨跌；
3. 支持多级分组架构，实现大类 - 细分赛道分层管理。

在此基础上深挖股民深层诉求：看盘既要盯个股分时，也要同步追踪全赛道板块走势，页面承载的有效行情信息越多，越便于快速判断交易机会。 但移动端改版存在三大天然约束，需要在设计中平衡取舍：

1. 手机屏幕尺寸有限，页面承载信息容量受限；
2. 移动端触控交互远不如电脑端便捷，无法大幅增加操作步骤；
3. 页面除分组模块外，还需保留个股行情、指标等基础字段，空间资源紧张。

明确约束与目标后，进入原型迭代推演，完整还原真实设计师方案打磨全过程：

版本 1：分组宫格卡片基础形态

先尝试两种主流宫格布局：3 列、4 列卡片排布，将每一个自定义分组转化为独立可视化卡片。 基础交互逻辑：点击分组卡片，页面下方弹出局部滚动区域展示个股列表，板块卡片区与个股列表区分上下两层，均可独立滚动；支持新增分组、添加分类标题、折叠 / 编辑分组栏。

版本 2：优化滚动误触，重构个股展开逻辑

初代分层滚动结构极易发生上下滑动误触，因此调整交互逻辑：点击分组卡片后，下方铺满全屏个股列表；顶部保留同级分组卡片栏，支持左右横向滑动切换其他分组；再次点击卡片即可收起列表，回到全分组宫格视图，规避多层滚动冲突。

版本 3：差异化卡片尺寸，强化行情信息展示

纯统一尺寸卡片视觉单调，信息承载不足，新增大尺寸 2×2 行情卡片，卡片内直接展示分组走势折线图，一眼看懂板块近期趋势。 3 列布局无法兼容大尺寸卡片并排展示，因此最终选定 4 列宫格方案：

• 4 列布局容纳更多分组卡片，适配手机竖屏空间；
• 支持自由缩放卡片大小，逻辑接近手机桌面小组件，兼顾极简浏览与深度行情查看。

版本 4：完善编辑、自定义交互体系

宫格布局参考系统桌面交互逻辑，补充批量管理能力：

1. 长按卡片进入编辑模式，支持多选批量删除、重命名分组；
2. 长按拖拽自由调整卡片排序，自定义分组展示优先级；
3. 开放卡片自定义配置：可自主选择展示组内领涨股、涨跌数值、分时 K 线等信息，适配短线、长线不同用户需求。

版本 5：沉浸式看盘模式 + 大屏设备适配

1. 全屏专注模式：一键隐藏顶部标题栏、底部全局导航栏，清除页面冗余元素，打造无干扰看盘界面；
2. 折叠屏 / 平板宽屏适配：利用横向大屏优势，常态展示更多分组卡片；点击分组后，页面左右分栏，左侧分组宫格、右侧个股列表，无需来回切换页面，大幅提升多板块对比效率。

至此整套优化方案框架搭建完成，还可延伸更多细节迭代，重点平衡普通散户与专业短线交易者的使用差异，设计师可结合自身理解补充细化。

四、设计复盘：改版背后的产品与设计思维

本次自选模块优化不只是视觉、交互微调，是完整的产品功能重构流程。 成熟团队中 UI/UX 设计师的核心价值，不是单纯落地产品给出的需求，而是主动挖掘用户隐性痛点，产出完整、大胆、可落地的解决方案，补足产品视角的盲区；方案能否最终上线落地，取决于设计评审中能否完整论证价值、说服团队。

五、结尾感悟

产品改版是锻炼产品思维、用户体验分析能力最好的方式：日常使用 App 时，把所有别扭、低效的设计拿出来自主推演优化方案，长期积累能快速建立完整的设计思考框架，这套完整的推导逻辑，是 AI 无法替代的设计师核心竞争力。

下篇内容再见～

转载：优设

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

兰亭妙微ui设计公司分享：Widget 是一个被全球生态验证了二十多年的成熟载体，却在旅行场景中一直“存在感不足”。这背后，不是技术或载体本身的问题，而是我们对旅行体验的理解还未真正延伸到桌面这一层。

本次分享以 Trip Widget 的设计实践为例，聊聊如何以 Widget 为智能载体，把“行前—行中—行后”的完整旅程整合进一个桌面组件，让服务真正适应场景，而不是让用户去管理碎片。

01.旅行类 Widget 使用率为何偏低？

1) Widget 作为成熟载体的现状

Widget 已有二十多年发展历史。

1998 年诞生于桌面端，2008 年进入移动端，覆盖海量设备。

2020 年 iOS 14 将 Widget 提升为系统级核心功能，相关数据显示，iOS 14 后 Widget 使用显著增长。

作为信息触达载体，Widget 的价值已经被反复验证——它可以让信息更主动、更及时地触达用户。

2) 在旅行场景中的“错配”

尽管如此，在旅行场景下，Widget 的实际使用却远不如预期，我们看到两层问题：

1. 市场认知缺位：部分主流 OTA 尚未系统化提供 Widget 能力，或仅覆盖单端。用户缺乏对“旅行类桌面组件”的清晰认知和使用习惯。
2. 现有方案与旅行需求的结构性错配：许多 Widget 仍停留在“功能单一、信息静态”的形态，更像一块“会更新的壁纸”。部分方案按行前、行中、行后拆分成多个独立组件，用户需要为不同环节反复添加和管理多个 Widget，导致体验被割裂。

而旅行本质上是一个多场景、连续动态的体验流程：从灵感激发 → 行程规划 → 出行途中 → 目的地体验 → 行后总结。当前“单一功能、场景割裂”的 Widget，与“多场景、动态演进”的旅行需求存在根本性错配。

02.让 Widget 真正“理解旅程”

1) 设计问题的提出

依托一站式旅行生态，我们提出了一个核心问题：

能否以 Widget 为智能载体，深度整合生态能力，让它主动感知并响应动态旅程中的每一个场景？

换句话说：

能否打造一个真正理解用户旅行状态的 Widget，而不是一个只会展示静态信息的组件？

2) 设计答案: Trip Widget — 你的一站式随身旅行伙伴

它具备以下特征：

• 根据用户的旅行状态主动感知并切换模式。
• 在不同阶段整合展示最关键的信息与功能。
• 将“桌面组件”进化为“持续陪伴旅行流程的场景化服务入口”。

下面，我们用四个典型场景来说明这一范式转变。

03.场景拆解：从灵感到工具的全流程陪伴

场景一：行前没有规划 —— 灵感激发模式

用户状态

• 时间：慵懒的周日下午。
• 心理：想去旅行，但还没有确定目的地和方案。
• 核心问题：“上哪儿能找到优惠又靠谱的旅行灵感？”

Widget 行为

• 主动切换为「灵感激发模式」。
• 展示精选特价机票与热门目的地。
• 通过 TG 智能推荐，提供个性化旅行灵感（例如“周末短途”“亲子友好”“海岛度假”等）。

体验变化

• 用户不需要主动打开 App、搜索和筛选。
• 在桌面即可获得可能的旅行方案，实现从“自己找”到“被推荐到”的转变。

场景二：已有行程 —— 行程规划助手模式

用户状态

• 已经预订了前往某城市的机票。
• 核心问题：“还需要预订哪些项目？那里有什么值得体验的乐趣？”

Widget 行为

• 自动切换为「行程规划助手模式」。
• 提供接送机、租车等周边产品的快捷预订入口。
• 展示目的地热门景点等入口，帮助用户发现地道体验。
• 通过 TG 专业指导，给出必游景点的个性化推荐。

体验变化

• Widget 不再只是信息展示，而是行程规划的关键入口之一。
• 用户在桌面即可完成行程的补全与深化，减少频繁切 App 的负担。

场景三：赶飞机途中 —— 出行掌控模式

用户状态

• 正在乘车匆忙赶往机场。
• 核心问题：“我的航班号是多少？该去哪个登机口？会不会延误？”

Widget 行为

• 进入「出行掌控模式」。
• 实时展示航班时间、登机口信息与状态（值机、登机、延误等）。
• 提供一键查看后续行程的入口，高效管理当日行程。

体验变化

• 用户无需打开 App 深层页面查找信息。
• 在桌面就可以完成航班确认与行程检查，显著降低出行焦虑。

场景四：目的地餐厅 —— 即时工具助手模式

用户状态

• 坐在异国餐厅，面对一份看不懂的菜单。
• 核心问题：“这道菜是什么？这瓶酒大概要花多少钱？我会不会点错？”

Widget 行为

• 切换为「即时工具助手模式」。
• 提供菜单翻译与菜品介绍，帮助跨越语言障碍。
• 提供实时汇率换算，辅助价格判断和决策。
• 通过 AI 智能推荐当日人气餐厅，引导用户发现更地道的选择。

体验变化

• 用户从“临时抱佛脚查资料”变为“随时有工具在身边”。
• 桌面组件成为真正的场景工具，而不仅是静态信息面板。

04.设计方法沉淀：从功能堆叠到场景范式

1) 以“旅行流程”为主轴重构结构

传统做法

• 按功能点/场景拆分为多个独立组件，用户需要为不同环节反复添加和管理。
• 导致体验割裂，信息分散，缺少贯穿旅程的整体感知。

我们的做法

• 以旅行全流程为主轴进行重构：行前：灵感激发 → 行程规划。行中：出行掌控 → 即时工具。行后：总结与分享（作为未来扩展方向）。
• Widget 通过场景识别和状态切换，将这些环节整合进同一个体验框架。

用户感知的是“一个能跟着旅程变化的桌面伙伴”，而不是多个分散的功能入口。

2) 场景化的 Modern Design 视觉语言

在有限的 Widget 空间内，我们为不同场景设计了差异化视觉策略：

1）行程场景：信息优先

强化时间、航班号、登机口等关键数据的可读性。使用清晰的层级和对比，减少装饰性元素，以效率优先。

2）AI 场景：智能感

沿用TripGenie 的品牌色彩与视觉语言，让 Widget 在桌面上与站内智能助手保持一致的识别度。

3) 信息聚焦：每个场景只保留最关键的 3–5 个信息点

挑战

Widget 空间极为有限，容易成为“信息堆砌”的重灾区。

策略

• 针对每个场景，我们先梳理用户任务，再反推最关键的信息点。
• 以“完成任务必须看懂的内容”为标准，控制在 3–5 个核心信息。
• 其他信息通过“进入详情页”等延伸交互承载。

4) 交互创新：内部场景的无缝切换

目标

希望一个组件就能承载旅程内的多重需求。

具体实践

• 在同一个 Widget 中，通过点击等轻量交互实现模式切换。
• 保持操作成本极低，同时提高用户对“Widget 会主动变化”的心理预期。

05.用户反馈

上线后，用户行为给出了清晰的肯定：

• Widget 日均曝光显著提升。
• 周留存率保持在较高水平，证明用户愿意长期保留并使用 Widget。
• 每日为站内带来可观的活跃访问量，成为有效的站内流量入口。
• Widget 用户的站内复访率明显高于整体大盘用户，呈现出更高的粘性。

最后，用一句话总结这次实践：

我们完成了一次从「让用户管理碎片」到「让服务适应场景」的范式转变。

• 不再把复杂性留给用户，让他们在多个 App、多个页面、多个组件之间反复切换。
• 而是让服务主动理解旅程，在合适的场景、合适的时机，把关键信息与功能送到用户面前。

这正是我们希望交付的新旅行体验范式，也是 Trip Widget 未来持续演进的方向。

转载：优设

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

用户体验是用户使用产品时形成的主观综合感受，评判体验优劣不能只停留在界面好不好看、操作顺不顺手。兰亭妙微深耕 UI/UX 设计多年，服务工具、电商、社区、品牌类产品过程中，落地一套以人为本的四维度体验评估体系，从界面、内容、人际、品牌四层完整拆解体验逻辑，搭建可落地、可复盘的设计标准。