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

• 面向C端交易者： 产品致力于降低入门门槛，通过“个人仪表盘”和AI助手（Kaiana），将复杂的市场数据转化为可执行的洞察，让新手敢交易，老手交易快。
• 面向B端与生态： 通过区分Retail App、CFI Prime（机构版）和Web官网，构建分层服务体系。设计不仅要展示行情，更要传递“合规、透明、受监管”的品牌信任感，这是金融产品的生命线。

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

• 首页即驾驶舱： App首页打破了传统的列表式布局，采用模块化Widget设计。用户可以根据自己是偏向“看盘”、“学习”还是“资产管理”，自定义添加、移除或重排组件。这种架构将主动权交还用户，实现了“千人千面”的信息流。
• 资金流与交易流的解耦与重组： 在“Money Flows”板块，设计将存款、取款、历史记录从复杂的菜单中剥离，形成独立的线性任务流。而在“Trade & Portfolio”中，则将图表、下单面板、持仓列表紧密聚合，符合交易员“观察-决策-执行”的心流模型。
• 跨端体验的一致性： Web端侧重于品牌叙事、信任背书（如展示牌照、赞助商）和宏观产品介绍；移动端则聚焦于高频操作和实时反馈。两者在视觉语言上高度统一，但在信息密度上做了精准切割。

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

• 极简的资金操作路径： 存款和取款界面采用了“分步式”引导。例如转账界面，先选账户，再输金额，最后确认。每一步只展示必要信息（如预估到账时间、手续费），避免了传统银行APP那种填表式的压迫感。
• AI助手的对话式交互： Kaiana AI不仅仅是一个客服入口，它被设计为一种新的交互范式。用户可以通过自然语言（如“给我看看今天表现最好的资产”）直接获取图表和分析，缩短了从“产生疑问”到“获取答案”的路径。
• 暗色模式下的数据可读性： 针对交易员长时间盯屏的场景，交易界面默认采用深色背景。但在交互细节上，买涨（绿色）与买跌（红色）的按钮对比度极高，且数字键盘布局经过优化，确保在移动端单手操作的准确性。

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

• 科技蓝与金融黑的融合： 整体色调采用了深邃的蓝黑色系，这在金融行业通常代表稳重与科技感。高饱和度的霓虹色（如青色、亮蓝）仅用于关键数据点和CTA按钮，既突出了重点，又营造了类似彭博终端的专业氛围。
• 玻璃拟态与层级感： 在Web端和App的卡片设计中，运用了轻微的磨砂玻璃效果（Glassmorphism）。这种视觉语言不仅现代，更重要的是它在深色背景上有效地划分了信息层级，让复杂的数据看板显得轻盈而不杂乱。
• 实体化的数据隐喻： 宣传图中使用了悬浮的卡片、立体的手机模型和光线追踪效果，将无形的“数据流”具象化。这种视觉修辞暗示了产品的“流动性”和“即时性”。

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

• 模块化思维： 无论是App首页还是Web落地页，都采用了组件化思维。产品经理在设计时应考虑内容的“可配置性”，允许用户或运营人员根据需求组装页面。
• 情感化设计的克制应用： 金融产品通常冰冷，但CFI通过圆润的倒角、流畅的微交互和AI助手的拟人化形象，注入了温度。设计师应学习如何在保持专业性的前提下，通过细节缓解用户的焦虑感（特别是在亏损或操作失败时）。
• 全链路的信任构建： 设计不仅仅在App里，官网的“牌照展示”、“赞助商墙”也是用户体验的一部分。产品经理需要将“建立信任”作为核心指标，贯穿从落地页到开户再到交易的全流程。

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

• 深色模式的无障碍测试： 虽然深色模式很酷，但在户外强光下（很多交易员会在户外看盘），低对比度的灰色文字可能难以辨认。需要增加“高对比度模式”或自动感光适配。
• AI hallucinations（幻觉）风险： Kaiana AI如果提供错误的投资建议，会带来巨大的合规风险。设计中必须包含显著的免责声明，并且AI的回答应当基于实时数据源，而非大模型的通用训练数据。
• 自定义带来的混乱： 首页完全开放自定义可能导致用户把界面改得面目全非，找不到核心功能。需要设置“恢复默认布局”的一键重置功能，并对模块的最小/最大尺寸做限制。
• Web端的性能负载： 官网使用了大量高精度的3D渲染图和动效，在低端设备或弱网环境下可能导致加载缓慢，影响首屏转化率。需要做充分的性能优化和降级处理。

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

随着 UI 设计行业的持续发展，虽然已不再是一才难求的状态，但依然有很多人希望跻身这个行业。一面是不断涌入的新人，一面是在行业中步履维艰的奋斗者。面对这样的状态，你是否反思过：以自己当前的环境与专业能力，真的会 UI 设计吗？

UI 的美不只体现在表面，更藏在内在的体验中。

兰亭妙微在项目中经常遇到这样的情况：运营同学提需求说 "界面太乱、很难用，改得好看舒服一点"。但 "好看舒服" 背后，是对业务逻辑、用户场景和信息层级的系统性梳理。今天我们用一个真实的 H5 问卷后台改版案例，解析从需求到设计的完整过程。

兰亭妙微ui设计公司分享：交互设计师输出方案时，除吃透业务需求、研究用户行为与心理之外，一套成熟的交互设计原则是保障方案可用性的重要依据，尼尔森十大可用性原则就是行业最常用的设计标尺。本文结合真实项目实战，拆解其中的人性化帮助原则在业务中的落地方法。

所谓人性化帮助原则，就是在界面中通过各类功能、提示机制，辅助用户顺畅完成任务。尼尔森将帮助提示划分为三类实现形式：一次性提示、常驻提示、帮助文档。下面结合一次产品 2.0 改版项目，讲解三类提示该如何落地。

项目背景

本次迭代为产品某功能板块的 2.0 升级。前期收集用户反馈发现，大量用户的核心痛点：看不懂、不会用该板块功能。 基于业务诉求与用户痛点，我们确立改版在交互体验上两大核心目标：

1. 让用户感知到 2.0 版本的更新与功能变化；
2. 给用户提供有效指引，帮助用户顺利完成操作目标。

一、如何帮助用户感知新版功能

版本迭代后，页面入口重新整合、同时新增功能点位，新老用户进入页面很容易产生认知迷失。我们需要设计合理的引导，让用户快速读懂本次改版。

App 大版本更新，常会用全屏引导页介绍新能力；针对局部功能改版，常见方案有两种：页面定位式遮罩引导、更新弹窗，二者需要结合业务场景取舍。

• 更新弹窗：把全部改版信息集中弹窗展示，但弹窗空间有限，信息堆砌，用户很难逐个理解各个新入口的作用；
• 页面定位引导：以遮罩锚点聚焦单个功能入口，分步讲解，用户可以对照新旧版本差异理解，还可以顺着页面核心操作流程做演示，加深对功能与流程的记忆。

  

本次改版将原先零散入口收拢到同一页面，还新增了具备操作连续性的快捷入口，更适合分步聚焦讲解。因此最终选用页面定位遮罩引导，引导用户逐步认识改版后的页面结构。

二、如何帮助用户上手使用功能

理想的交互是足够直观，用户无需额外提示就能上手。但用户的产品经验参差不齐，新手、低频用户很容易在页面里陷入困惑，产生挫败感。就像逛超市，熟客清楚区域分布，而初次到访的顾客、老年用户，则需要清晰的区域标牌来指引方向。

针对不同场景，可以分别使用一次性提示、常驻提示、帮助文档三类帮助手段。

1. 一次性提示

一次性提示仅在特定时机出现：用户首次使用功能、版本更新，或是针对隐藏、不易察觉的操作；用户阅读关闭后就不再重复弹出。

场景案例 1：资料填写领优惠券弹窗 业务需要引导用户完善个人基础信息，完成后发放优惠券。最初方案是弹窗引导跳转填写，但是用户关闭弹窗、或是填写后返回页面，就再也找不到填写入口。 优化方案：用户关闭弹窗返回页面后，触发一次性气泡提示，告知用户入口位置，提示阅读完毕关闭后，就不再重复打扰。

场景案例 2：上传图片调整顺序 用户反馈：上传商品图片提交后，才发现图片排序不符合预期。为此新增拖拽调整图片顺序的能力，但该操作属于隐藏手势，用户很难主动发现。 解决方案：图片上传完成后弹出一次性气泡：「长按可调整图片位置」，用户手动关闭提示后，后续不再展示，完成操作认知传递。

2. 常驻提示

常驻提示会持续展示，多用于操作流程中必须知晓的警示、规则说明，提示文案紧贴对应的操作模块，不会自动消失。

场景案例 1：图片上传风险免责提示 用户自主上传商品图片，存在图片侵权风险。在图片上传模块下方放置常驻免责声明，持续提醒用户承担图片发布对应的相关责任，兼顾用户告知与平台风险规避。

场景案例 2：提交审核规则提示 用户编辑完商品信息提交审核，容易产生等待焦虑，不清楚审核时长、去哪里查看结果。 我们将审核周期、结果查看路径，以常驻说明文字放在「提交审核」按钮上方。用户提交之前就能完整知晓规则，消除等待过程的心理不确定感。

3. 帮助文档

帮助文档主要承载复杂规则解释、高频 FAQ，适合体量较大、不适合放在操作流程内的内容。 调研发现部分用户甚至不理解这个板块本身的用途。我们在页面增加「操作手册」常驻入口，里面收纳板块功能介绍、完整操作步骤、高频常见问题。当用户遇到困惑，可以主动查阅文档，自主解决疑问。

总结

人性化帮助原则不是简单堆砌弹窗、提示文字，而是分层设计：

• 改版、首次操作场景：用一次性提示做轻量化科普，避免长期打扰；
• 风险、关键规则类信息：用常驻提示紧贴操作，确保用户操作前能够看见；
• 复杂规则、大量 FAQ：收拢进帮助文档，供有需要的用户主动查阅。

好的帮助设计，是做用户的 “安全网”：优先做到界面本身足够易懂；在此基础上分层提供帮助，新手有指引，熟手不受干扰，遇到问题的用户可以找到解决方案。

转载：优设

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

前言

兰亭妙微ui设计公司分享：百度优选作为百度在 2023 年 5 月全新推出的电商业务，提出“百度优选，超会选”品牌主张，目标为广大消费者提供高效、精准、专业的消费决策参考。新品牌起步阶段，想要快速建立用户认知，设计团队借由大促营销、行业生态活动等关键事件持续输出品牌内容，层层夯实用户心智，逐步加深大众对百度优选的品牌印象。

一、新品牌基础体系搭建

LOGO 是品牌对外的一面镜子，承载品牌内核。本次设计围绕购物、亲和、优选三大核心关键词发散创意，提取购物袋、笑脸表情、代表 “优” 的字母 U&YOU、百度 “度” 首字母 D 作为视觉原型，传递轻松愉悦的购物体验感。

历经 5 轮迭代，产出 70 余套设计方案，最终确定整合 D 字母、笑脸、购物袋、U 元素的 LOGO 形态。品牌主色选用优选红，借暖色调的情绪感染力，调动消费者购物欲望，同时建立信任感。

配套完成整套品牌视觉规范：定制专属字体「百度综艺体」，输出横排、竖排多套 LOGO 组合版式，统一品牌视觉输出标准。后续依托 11.11、12.12、3.8、8.18 等核心电商大促，反复曝光品牌形象，持续强化用户认同感。

二、大促品牌心智的概念定位

伴随夜经济兴起，夜间消费需求持续释放。百度优选在 2023 双十一落地数字人直播 “日不落计划”，依靠 7×24 小时不间断数字人直播服务 C 端用户；搭配搜索端 AI 购物助手智能导购，为用户提供专业商品推荐，提升选购效率，催生全新消费业态。

基于 AI 驱动的新消费模式，设计团队确立四大心智建设方向：造场景‑节日化、造趋势‑智能化、造品质‑营销化、造记忆‑品牌化，为整个双十一大促视觉搭建顶层逻辑。

1. 造场景：紧扣夜经济，烘托大促节日氛围感
2. 造趋势：诠释全新消费模式，传递智能化消费感知
3. 造品质：聚焦优质商品，用营销视角放大商品价值
4. 造记忆：放大 IP 与品牌曝光，完成品牌化传播

三、落地：把品牌心智融入设计全链路

围绕四大心智方向提炼视觉关键词与设计元素，融合 3C 数码、食品酒水、服饰穿搭、美妆个护等主流品类，完成整套主视觉设计输出。

1. 主视觉设计理念

主视觉以 “夜生活” 为核心场景，还原电商 24 小时不间断经营的新业态。夜空礼花、环绕堆叠的商品渲染狂欢的大促氛围；数字人带货、智能推荐的视觉符号体现智能电商的行业新趋势；品牌 IP、超级符号反复露出加深用户记忆；高精度 3D 视觉表现，充分展示各品类商品，传递电商营销氛围感，本次双十一主题定为AI 购物狂欢节，狂欢日不落・24 小时嗨购不停。

2. 品类会场：AIGC 解决业务痛点

双十一期间要上线九大品类会场，面临两大现实难题：

• 活动频次高，物料需求量巨大，人力供给紧张；
• 既要统一品牌调性，又要实现不同会场之间的视觉差异化。

AIGC 恰好成为破局关键。团队先从 LOGO 中拆解提炼出微笑曲线超级符号，把微笑服务的品牌内核植入视觉，强化品牌记忆点。

工作流升级为：超级符号 + AIGC 生成品类素材 + 人工二次创作，产出最终页面。对比传统纯人工设计，单活动页面设计效率得到显著提升，高效化解素材多、人力不足的困境。

团队为九大品类会场规划五套差异化配色，在保证整体风格统一前提下，利用 AIGC 批量生成成套视觉物料。项目沉淀 80 + 可复用的品类设计组件，形成设计资产库，能够持续赋能后续运营活动，实现长期复用复利。

完成物料生产之后，将统一的主视觉风格完整覆盖搜索、商城、直播三大业务场域，落地 11 类营销玩法与全部重点资源位，保障全渠道活动视觉表达高度统一。

总结

百度优选通过多轮大促实践，持续输出品牌内容，不断扩大品牌曝光。未来，团队将继续围绕新一代智能电商平台的品牌定位持续迭代设计方案，进一步提升百度优选的用户感知与市场口碑。

转载：优设

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

兰亭妙微ui设计公司分享：在产品设计中，真正打动用户的，往往不是宏大的功能，而是一个个细腻巧妙的细节。一句共情的文案、一段独特的交互、一处别出心裁的视觉表达，都可以击穿用户心理，带来超出预期的体验惊喜。

本期整理了 10 个充满巧思的产品设计案例，拆解它们的设计思路，希望能够给各位设计师带来灵感，共同交流成长。

温馨提示：文中配图均来自各产品截图，仅用于设计学习交流，如有侵权，请联系删除。

目录

一、趣味二层楼交互：下拉刷新的创意玩法 二、情感化文案：用文字唤醒沉睡用户 三、鼓励式设计：强化用户的成就感 四、双向反馈设计：让用户感知被重视 五、弹出式金刚区：高效收纳拓展功能 六、重力交互徽章：让成就展示更鲜活 七、多元头像预设：降低个性化设置门槛 八、拟人化客服入口：拉近咨询的距离 九、场景化按钮：把产品场景融入控件 十、微动效按钮：调动用户点击欲望

一、趣味性的二层楼设计：下拉刷新的创意玩法

下拉刷新 “二层楼” 已经成为移动端非常成熟的交互模式，常被用于活动营销、功能推广，玩法也不断迭代出新。

麦当劳 App 猫窝 3.0 活动，就巧妙结合猫爪视觉符号与下拉刷新动作，打造极具趣味性的二层楼营销入口。把简单的下拉动作，变成充满仪式感的趣味体验，既抓住用户眼球，也提升用户参与意愿。

二、通过情感化的文案激活用户

用户活跃度，直接决定产品功能价值能否充分释放。如何唤醒长期沉寂的用户？情感化文案是成本很低却效果出众的手段。

钉钉运动为推动捐步功能的用户参与，针对久未使用功能的用户输出共情向文案，搭配 “天降幸运” 的心理暗示，给到用户意外的小奖励，用情绪共鸣完成用户唤醒，实现产品目标。

三、鼓励式设计，放大用户成就感

闯关、刷题类产品中，鼓励式设计被广泛使用。通过正向反馈不断给予用户肯定，放大成就感，以此提升用户投入度。

驾考宝典 App 就运用了这套思路：用户刷题连续答对题目时，页面会弹出连对提示给予正向激励。不断强化用户的做题成就感，驱使用户更加专注刷题，激发学习进取心。

四、通过反馈提升双向体验感

收集用户评价与反馈，是产品迭代的重要依据。当产品涉及多方角色时，一套合理的反馈链路，能够同时提升多方体验。

高德地图打车业务，会在行程前后分别收集用户评价。一方面用户的意见可以给到司机作为改进参考；另一方面用户的反馈行为本身，也会让用户感受到自己的想法被平台重视，一举两得，优化整体服务闭环。

五、弹出式金刚区功能延展

金刚区是 App 首页核心流量位，创意主要集中在图标视觉与交互形式上。

携程旅行 App 做了一次有意思的迭代：不再把全部功能平铺展示在首页金刚区，将更多功能收纳进底部弹窗。点击金刚区入口，弹窗呼出更多功能。既压缩金刚区占用版面，提升首页空间利用率，也拓展了金刚区的交互可能性。

六、趣味性的徽章展示

徽章是用户线上成就的符号，徽章的视觉表现、交互形式，会直接影响激励效果。

B 站创作中心对创作者徽章做了创意表达：采用玻璃球质感，结合重力感应动态效果。转动手机，徽章就跟随重力滚动，互动感十足。既强化徽章的视觉权重，也激励创作者持续产出内容，努力解锁更多成就。

七、丰富多样的头像预设

头像作为用户个人标识，代表着自我表达需求。完备的头像预设库，能够降低用户个性化设置的操作成本。

嘀嗒出行 App 个人中心头像设置模块，准备了风景、美食、运动、动物、植物等多风格头像素材，同时支持一键随机更换。丰富的预设，满足不同用户审美偏好，让用户无需自行上传图片，也能快速设置个性头像。

八、让在线咨询更真实

在线客服是大多数产品的标配。常规入口多为图标、文字按钮，而加入人物形象，就可以弱化机器感，拉近和用户的心理距离。

马蜂窝 App 在线咨询按钮嵌入客服头像，仅仅一处微小改动，就让客服入口更具真实的人感。降低用户咨询的心理门槛，间接提升咨询转化。很多时候体验升级，就藏在这些不起眼的小细节之中。

九、场景化的按钮设计

同质化 UI 环境下，把产品业务场景融入控件，是打破千篇一律界面的有效思路。

携程机票权益中心的按钮设计十分巧妙：控件复刻飞机舷窗轮廓与挡板形态。默认状态挡板闭合，点击之后模拟挡板推开，露出窗外风景，把坐飞机的场景直接封装进按钮交互，创意直观易懂。

十、动态按钮更有点击欲

按钮的视觉表现，直接影响用户的点击意愿。相比静态样式，微动效能够带来更强的视觉吸引力。

红果短剧 App 广告按钮就使用气泡发散的微动效，动态元素让按钮在页面中脱颖而出，有效抓住用户视线，提升点击转化。

转载：站酷

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

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

以3D模型、进度与资源数据构建跨端施工项目驾驶舱

面向产品经理与资深设计师的案例研究

导读｜以3D模型、进度与资源数据构建跨端施工项目驾驶舱。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

Tectra面向建筑项目管理团队，通过3D建筑模型、进度、工时、材料和团队协作建立统一项目视图。产品希望让管理者从宏观进度快速进入楼层、专业或问题节点，并在桌面与移动端持续跟踪。

图1  项目界面与设计细节

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

首页以项目总览和3D模型为核心，顶部导航连接Dashboard、Progress、Timeline和Work Areas。模型热点、团队头像、完成率和趋势图共同表达项目状态；移动端压缩为关键指标、模型浏览和现场快速查看。

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

3D模型中的热点应与问题、责任人和资料双向关联，用户从模型点击即可进入具体工作项。进度图和时间轴提供计划与实际对比，筛选器支持按楼层、专业和周期切换。移动端重点应是现场更新、拍照与确认，而非完整分析。

图2  项目界面与设计细节

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

高明度蓝色形成数字建造与图纸联想，橙黄色作为行动和预警色，在大面积蓝白中非常醒目。建筑线稿与3D模型结合品牌背景，既解释行业，也建立独特视觉资产；超细标题与大留白让复杂项目数据显得更轻。

图3  项目界面与设计细节

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

建筑管理产品必须把模型、数据和责任连接起来。产品经理应围绕问题闭环设计对象关系：发现、指派、处理、验证和归档；设计师则要让同一状态在3D模型、列表、时间轴和移动端保持一致，避免多视图之间产生认知断裂。

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

3D视图可能带来操作成本，应提供搜索、列表和快捷定位作为平行入口。浅色细线需要验证现场强光和大屏展示。进度百分比应明确计算口径，离线更新、版本冲突和现场网络不稳定也需要完整处理。

图4  项目界面与设计细节

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

Tectra的设计方向不是把BIM模型做得更炫，而是让模型成为项目工作的索引。当每个空间节点都能连接数据、责任与进度，数字建造界面才真正从展示走向管理。

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

在当下的设计工作中，"科技感" 一词对每位设计师来说都耳熟能详。科技的飞速发展如汹涌浪潮，深刻重塑了我们的生活模式，在 UI 设计领域更是占据着举足轻重的地位。在信息爆炸的当下，用户每天接触大量界面，那些展现出科技感的 UI 往往更容易在第一时间抓住眼球，激发进一步了解和使用的欲望。

很多 UI 设计师一遇到交互问题就紧张，觉得这不是自己的领域，老板能不能别给这样的需求。但在兰亭妙微的项目实践中我们发现，交互和视觉从来不是割裂的 —— 好的 UI 设计师本身就应该具备基本的交互思维。今天我们以一个 "买火车票千钧一发拼手速" 的场景为例，拆解一个信息密集型页面的优化全过程。

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

将速度、网络信息、路由与跨设备监测组织为专业工具体验

面向产品经理与资深设计师的案例研究

导读｜将速度、网络信息、路由与跨设备监测组织为专业工具体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

Netti是一款面向普通用户与技术用户的网络性能工具，提供测速、Ping、网络信息、路由追踪和历史数据，并扩展到Apple Watch等设备。产品需要同时满足一键测试与专业诊断两种深度。

图1  项目界面与设计细节

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

首页以速度测试为第一任务，网络信息、路由和Ping作为并列工具；测试结果保留下载、上传、丢包、延迟、服务器和历史。信息架构从简单入口到专业详情逐层展开，避免初次用户直接面对参数墙。

图2  项目界面与设计细节

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

大尺寸START按钮建立明确主动作，测试过程用动态仪表和状态文本持续反馈。完成页将结果、趋势和再次测试放在同一视图；网络详情采用分组字段，便于复制与诊断。手表端只保留Ping和关键结果，符合短时查看场景。

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

深色界面适合技术工具和长时间观察，多色渐变环把不可见的网络性能转化为具有能量感的视觉对象。橙、紫、绿既用于品牌，也区分不同指标；等宽数字和终端信息强化专业感，黑色背景则保证图表和仪表聚焦。

图3  项目界面与设计细节

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

工具型产品的专业度来自数据定义与结果解释。产品经理应明确测试方法、服务器、时间和网络环境，设计师要为结果提供正常区间、影响说明和下一步建议，让非专业用户也能理解“这个数字意味着什么”。

图4  项目界面与设计细节

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

渐变仪表视觉强，但不能替代精确数字与无障碍编码。结果页应说明Wi-Fi、VPN和后台流量对测试的影响，并提供测试隐私政策。专业字段可支持复制、分享和导出，同时避免默认暴露公网IP等敏感信息。

图5  项目界面与设计细节

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

Netti在“一键可用”与“参数可深挖”之间建立了良好层级。网络工具不需要复杂故事，只需要可靠过程、清楚结果和可执行解释；视觉应增强理解，而不是把测量变成表演。

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