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

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

• 桌面端/平板端：承担全局洞察与复杂决策，如多航司对比、长航线规划与商务舱选座，主要面向高频差旅人士与追求效率的用户。
• 移动端：承接高频执行与即时反馈，如登机口变更通知、电子登机牌展示与快速改签，强调在移动场景下的单手操作便捷性。
• 核心价值：通过“Book. Fly. Repeat.”的极简理念，将繁琐的购票流程压缩为“3次点击”，解决传统航空应用中信息过载、决策链路长的问题。

二、信息架构：把功能转译为旅客的出行节奏

• 全局层：首页以巨大的出发地/目的地代码（如 JFK ⇌ MXP）为视觉锚点，确立行程的核心上下文；搜索栏置于顶部中央，支持快捷键（⌘ + Space），符合桌面端高效操作习惯。
• 执行层：将“Upcoming Flight”（即将开始的航班）卡片化，突出时间与舱位；“Hot Propositions”（热门推荐）则以列表形式展示，便于快速比价。
• 沉浸层：右侧或独立页面的“Select Seats”（选座）模块，将抽象的座位图转化为可视化的机舱模型，让用户在预订阶段就能预演飞行体验。

三、关键交互：从填写表单走向可视化决策

• 动态航路图：不仅仅是静态地图，而是通过光点移动、虚线轨迹和实时距离计算（Distance to arrival），让“正在飞行”的状态变得可感知。
• 即时反馈闭环：在选座环节，用户点击座位后，底部的结算栏（Checkout）实时更新价格与座位号，无需跳转页面即可完成确认，极大缩短了决策路径。
• 拟物化票据：电子登机牌采用了带有撕裂线设计的拟物风格，配合二维码与关键信息（Gate, Seat, Class），既保留了传统票据的仪式感，又具备数字化的便捷性。

四、视觉系统：品牌表达必须承担高端与科技感

• 色彩语义：深邃的墨绿色背景（#006A4F）奠定了高端、稳重的基调，象征夜空与深海；高饱和度的荧光绿（#8EFEEE）作为核心操作色，用于指引路径与选中状态；橙色（#FF6803）仅用于强调价格或紧急状态，形成强烈的视觉层级。
• 光影质感：界面大量运用了微弱的顶光与磨砂玻璃效果（Glassmorphism），模拟机舱内的氛围灯效，让数据卡片仿佛悬浮于深色背景之上，增强了界面的通透感与层次感。
• 字体排印：采用大字号的无衬线字体展示机场代码（如 CDG, HND），利用字重对比区分信息层级，确保用户在余光扫视时也能瞬间获取关键信息。

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

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

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

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

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

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

• 桌面端：承担全局洞察与深度数据分析，主要面向全科医生（GP）和专科医生，解决多源数据分散、难以快速掌握患者现状的痛点。
• 移动端：承接即时通知、快速查阅与远程监控，让医生在查房或移动场景下也能保持对患者状态的感知。
• 核心价值主张：“Designed for doctors. Loved by patients.”（为医生设计，受患者喜爱）。它试图通过“Technology that cares”（有温度的科技），将冰冷的医疗数据转化为可信赖的临床洞察，帮助医生在繁忙的日常中迅速 grasp（掌握）每位患者的状况。

二、信息架构：把功能转译为医生的诊疗顺序

• 全局层（Dashboard）：首页不再是简单的列表，而是以“Blood sugar”（血糖）、“Sick leave”（病假/休假状态）、“Patient profiles”（患者画像）为核心的仪表盘。这种布局直接回应了医生“病人现在怎么样”的首要问题。
• 分析层：将复杂的生理指标（如心率、血糖）转化为可视化的趋势图，而非单纯的数字表格。
• 执行层：将“Make appointment”（预约）、“Auto Reminders”（自动提醒）等高频操作置于显眼位置，形成从“发现问题”到“解决问题”的短路径。

三、关键交互：从阅读病历走向即时洞察

• 数据可视化：血糖图表不仅仅是折线，还引入了“Range”（正常范围）的阴影区域和“7 Day Average”（7天平均值）参考线。这让医生一眼就能判断数值是否异常，无需心算。
• 卡片式叙事：每个指标（如 Sick leave, Heart Rate）都被封装在独立的卡片中，配合圆弧进度条和状态标签（如“Good”, “Improving”），将复杂的健康状况简化为可读性极强的图形语言。
• 无缝连接：User Flow 展示了从登录、绑定设备（Apple Health/Google Fit）到关联诊所（Link GP Clinic）的流畅过程，降低了技术门槛，确保数据能自动流入系统。

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

• 色彩心理学：主色调采用温暖的金黄色/橙色与冷静的深蓝色搭配。蓝色代表医疗的专业与科技（如 App Icon、图表线条），而大面积的暖色背景（如 Dashboard 头部、卡片背景）则打破了传统医疗软件的冰冷感，传递出“Cares”的品牌温度。
• 字体与排版：使用清晰无衬线字体，关键数据（如 92 mg/dL）加粗放大，次要信息弱化，层级分明。
• 拟人化元素：Logo 设计采用了类似人形的抽象符号，配合真实医生的摄影图片，强化了“以人为本”的视觉暗示。

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

• 对产品经理而言：最值得借鉴的是“挑战-解决方案”的设计推导过程。面对“等权重指标导致阅读困难”的挑战，团队没有堆砌功能，而是通过建立层级结构（Hierarchical structure）和优先级排序（Prioritized main trend graph）来解决。这证明了好的设计是做减法。
• 对设计团队而言：要重点维护数据的可解释性。Cinex 没有只展示一个总分，而是展示了分数的构成（如 +4 from yesterday），这种透明度是建立用户（尤其是专业人士）信任的关键。

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

• 小屏风险：虽然移动端展示了核心卡片，但在手机窄屏上，复杂的血糖图表和多个卡片并列可能会导致横向滚动过多或内容拥挤。建议针对移动端进一步简化图表，仅保留异常警示和最新数值。
• 隐私与合规：作为医疗产品，界面上展示了大量敏感数据（如具体诊断 Mild Hypertension）。在实际落地中，需要增加更明显的隐私保护机制（如模糊预览、FaceID 解锁后才能查看明细），并在 UI 上给予用户足够的安全感暗示。
• 异常处理：目前的界面主要展示正常或轻微波动的数据，对于危急值（Critical Values）的视觉强提醒（如红色闪烁、弹窗）在现有截图中体现不足，这是医疗产品的安全底线。

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

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

筛选是移动端产品里十分高频的交互控件。当页面数据量大、条目繁杂时，筛选功能可以帮助用户快速收缩范围，定位目标内容。兰亭妙微在电商、OTO、教育类项目实践中，梳理了市面上主流筛选控件类型，同时明确每种组件的适用边界，方便设计师做组件选型。

很多人都有这样的经历：睡前只想刷几条短视频，不知不觉就耗费一两个小时。为什么我们会难以自主停下浏览？兰亭妙微结合 C 端产品项目实践，剖析短视频、信息流产品背后的交互机制，同时探讨设计套路与良性体验之间的边界。

很多交互设计师做完项目，交付完原型文档就算工作结束，忽略项目复盘环节。复盘是设计师实现能力迭代非常关键的手段，尤其新人设计师，大量细碎基础项目，如果缺少复盘沉淀，工作做完很难转化为个人经验。兰亭妙微团队在内部项目流程中，会要求设计师在项目收尾一周内完成复盘文档，把项目过程中的感触、问题、解决方案梳理沉淀下来。

B 端系统业务逻辑复杂，数据内容不可控，再加上浏览器窗口可以自由缩放，极限内容场景是设计师绕不开的难题。实际评审中，开发、测试经常会提出疑问：当文字、选项、数据超出预设版面，页面该如何表现。兰亭妙微在大量政企后台、管理系统项目中发现，多数设计只覆盖 80% 常规使用场景，常常忽略剩下 20% 的极限边界情况。一套完善的设计规则，必须提前定义各类内容溢出的处理方案。

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

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

• 移动端：作为核心载体，承接球场上的实时记录、GPS测距与赛后复盘，强调在户外强光下的可读性与操作的便捷性。
• 品牌层：通过高度抽象的符号系统，传递“精准、清晰、现代”的价值观，解决传统高尔夫应用界面老旧、数据杂乱的问题。
• 核心价值：将复杂的高尔夫运动数据转化为直观的表现洞察，帮助球员从“凭感觉打球”转向“数据驱动决策”。

二、信息架构：把功能转译为球员的击球顺序

• 启动层：App图标与启动页（Splash Screen）采用高饱和度的黄绿色调，在视觉上直接关联草地与活力，建立鲜明的品牌识别。
• 功能层：底部导航栏简洁明了，核心功能（如搜索球场、开始回合）被置于拇指热区；Dashboard（仪表盘）作为数据汇总页，承载了长期的表现趋势。
• 视觉层级：Logo设计采用几何化的三圆点结构，既像高尔夫球，又像挥杆的人体动态，这种极简的图形语言贯穿了整个UI界面，降低了认知负荷。

三、关键交互：从机械记录走向流畅体验

• 拟物与扁平的结合：启动页中的3D Logo质感细腻，具有实体球的光泽感，而进入界面后迅速转为扁平化设计，保证了信息读取的效率。
• 色彩心理学应用：大面积的绿色背景不仅仅是装饰，它模拟了真实球场的视觉环境，让用户在打开App的瞬间就能进入“打球”的心流状态。
• 符号化导航：底部的搜索与菜单按钮采用了圆润的胶囊形设计，配合高对比度的图标，确保用户在移动中或戴手套时也能准确点击。

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

• 色彩策略：主色调选用了接近果岭草皮的鲜绿色，搭配明亮的黄色作为点缀（如Logo中心、App图标背景），形成强烈的视觉冲击力，象征能量与专注。
• 字体与图形：Logo的几何构建过程（如第一张图所示的节点与连线）展示了设计的严谨性，这种“工程感”暗示了产品在数据分析方面的专业性。
• 跨端一致性：从手机桌面图标到App内部界面，再到品牌宣传物料，视觉语言高度统一，强化了“Smarter Golf Performance”的品牌承诺。

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

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

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

不少 UI 从业者会疑惑，UI 设计师是否需要掌握交互设计能力。答案是肯定的，只做视觉美化，不懂交互逻辑的 UI 并不完整。UI 设计不只是把需求转化为界面视觉，更要兼顾完整的用户体验，也就是用户和产品之间的整套交互行为。

“如无必要，勿增实体”，这句古老的哲学箴言，便是奥卡姆剃刀原理的核心内核，也印证了爱因斯坦的名言：“万事万物应当尽可能简洁，但不能过度简化”。在 UI 与交互设计实践当中，奥卡姆剃刀早已成为设计师做取舍的重要思想工具，帮助我们剥离冗余，打造高效友好的用户体验。

兰亭妙微ui设计公司分享：随着跨设备办公成为主流，B 端业务系统早已不再局限 PC 网页。手机、平板打破办公时空限制，业务人员可以随时随地处理审批、查看数据、完成业务操作。但B 端移动端不等于 PC 页面简单缩小，不能直接把 PC 端复杂功能全盘搬运到小屏设备。

本文将从设计认知、模块实操、项目落地三个维度，结合表单、列表、数据看板、工作台与医疗行业实战案例，完整讲解 B 端移动 App 该如何设计。

一、建立设计认知：认清多端能力差异

PC、Pad、App 三者是一套功能逐级下放的关系：屏幕尺寸越小，功能越要做减法，只保留角色的核心业务能力，剥离复杂配置、低频操作。

表格

以有赞美业工作台为例：

• 手机端：仅保留宫格形式核心功能入口；
• Pad 端：除功能入口外，直接展示待办业务内容；
• PC 端：完整呈现经营图表、批量操作、高级配置等全套管理能力。

不同终端，使用者角色、使用场景完全不同。PC 多是店长坐班管理店铺；Pad 给到前台员工接待使用；手机端则随时随地可用，家里、路上、门店都可能操作。移动端设计的核心命题，就是在有限屏幕下平衡操作效率与可用性。

二、核心模块实操：四大高频页面设计要点

B 端移动端最核心的四类页面：表单、列表、数据页、工作台，几乎覆盖绝大多数业务场景。

2.1 B 端移动端表单设计

B 端表单核心作用是数据录入，基础组成包含：标题、标签、必填标记、提示说明、输入区、操作按钮。

表单设计存在两种相反诉求：多数场景希望用户快速完成填写；资质审核、认证类场景，则需要引导用户审慎仔细填写。同时还要适配小屏幕空间约束、多语言国际化场景。

表单标签对齐方式，直接影响填写效率，眼动实验可以给到明确参考：

① 左对齐标签（左标签‑左内容）

优势：符合阅读习惯，适合陌生、复杂业务字段； 劣势：填写速度最慢，用户眼动跳转次数多； 适用：资质认证、金融申请，需要用户仔细阅读每一项内容的页面。

变体：左标签‑右内容。优化长标签空间适配，视觉整齐，但标签与输入框关联感减弱，更适合选择类录入。

② 顶对齐标签（标签位于输入框上方）

优势：阅读填写效率极高，眼动实验显示标签到输入框定位仅需 50 毫秒；对长文本、多语言国际化友好； 劣势：占用纵向屏幕空间； 适用：追求快速填写，字段数量不多的业务表单。

实践提示：不要固定一套对齐方案全局复用，根据业务目的做选型。

2.2 B 端移动端列表设计

列表用于信息浏览、检索、快速操作，基础构成：卡片容器、搜索、筛选。

• 卡片：移动端优先使用卡片组件，可以承载丰富信息与操作，适配多端适配；
• 筛选：帮助用户在海量业务数据快速过滤，降低信息查找成本；
• 搜索：支持关键词直达目标条目。

列表视觉差异化：向真实业务场景借鉴

可以借鉴现实纸质单据的视觉语言，缓解纯数据页面的冰冷感。 例如途牛商旅复刻纸质差旅审批单线条样式；医鹿模拟病历本装订细节；饿了么商家版模仿外卖小票样式。把真实业务载体的视觉特征迁移到界面，让业务人员更容易理解。

2.3 B 端移动端数据页设计

移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选器 + 明细列表。 数据统计一般采用「主指标 + 辅助指标」结构；图表则把抽象数字图形化，降低理解成本。

激励性数据设计

国外电力公司曾做过经典案例：向用户推送对比邻居用电情况的条形图表，仅仅通过数据对比可视化，就实现用户平均用电量下降 2%。 核心思路：不只是陈列数字，通过对比参照，传递业务状态，引导用户行为。

移动端图表取舍

手机屏幕狭小，图表要做取舍：

• 直角折线：数据精准，适合需要精确读数场景；
• 平滑曲线：弱化细节误差，降低用户认知负担，侧重感知趋势；

移动端很多看板场景，优先传递趋势感知，而非绝对精准读数，可以简化 Y 轴刻度，换取更好视觉体验。

2.4 B 端工作台：产品价值的门面

工作台是用户进入产品后的首页，承担快速掌握工作进度、直达业务功能的作用，是产品体验与视觉体系的核心阵地。

以医蝶谷医生端改版为例： 业务层面 旧版首屏大比重给到极速问诊抢单，对于接单慢的新手医生体验不友好；改版收起抢单模块，把问诊待办整合首页，所有医生打开首页即可直观掌握工作任务。

视觉层面 弱化工具图标强视觉，减少干扰，把视觉重心留给待办、消息等高价值业务信息。

工作台设计不能只堆功能入口，要回归角色真实工作流，优先展示用户当下最关心的业务信息。

实战案例：医疗医生端排班设计

医生工作特征：突发事务多、工作多线并行、任务复杂（手术、查房、接诊、写病历），排班往往不是固定周循环，存在大量碎片化、不连续时段。针对该业务特征，设计落地三条策略：

1. 优化层级，提升屏幕利用率 列表采用顶对齐布局，压缩无任务空白时间轴，无需反复滑动，首屏即可看到晚间排期。
2. 色彩标签传递信息，克制视觉元素 放弃复杂业务图标，使用轻量化颜色标签区分不同问诊类型，提升查找效率。
3. 简化操作路径，减少步骤损耗 优化前添加 3 段不连续排班，需要 12 步操作；优化后压缩至 4 步完成，大幅降低操作负担。

B 端设计必须扎根行业真实工作场景，行业壁垒越强，越需要深度调研业务角色，而不是套用通用组件模板。

三、从设计到落地：设计师与开发协作避坑

B 端移动大多基于 H5、RN 技术实现多端复用，设计输出时，不能只交付视觉稿，还要考虑技术实现、性能、规范落地。

3.1 搭建页面框架，实现并行开发

不必等全部视觉完成再交付。先输出页面框架线框图，开发先行搭建 DOM 页面骨架；后续再交付视觉标注完成 CSS 样式还原，有效缩短项目周期。

3.2 图片资源优化，降低服务器与带宽压力

1. 素材尽量多处复用，减少新增图片资源；
2. 大图分层切图：把人像、主体元素和背景拆分，实测可以减少 50% 图片体积，同时支持跨页面复用；

图片越多、体积越大，用户加载越慢，服务器存储成本越高。

3.3 H5 环境常见坑点，提前和前端对齐约定

1. 空格占位符 （1 个空格）、 （半个汉字宽度）、 （1 个汉字宽度），文本换行间距，不能单纯靠 margin/padding，需要提前对齐规则。
2. 字重还原问题 PingFang 字体中 Medium（500）在 Web/H5 环境渲染失效，和常规字重几乎看不出区别。团队约定：设计稿 Medium，代码统一写font‑weight:600，保障粗细效果一致。

3.4 设计规范如何推动落地

很难依靠一个版本把全部规范整改完毕。设计师要具备项目管理思维：

• 将规范需求拆分、评估优先级，分版本迭代上线；
• 使用排期跟踪表格，记录需求、负责人、版本、上线时间，同步 PM 与研发，持续跟进落地。

写在最后

B 端移动 App，不是 PC 端的缩小版。 优秀的 B 端移动端设计，始于对业务角色真实工作场景的理解，中间依托表单、列表、图表、工作台等组件合理选型，最后还要兼顾技术实现、性能、规范迭代，才能真正给到业务人员高效好用的工具。

转载：优设

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