Voltera 新能源停车充电系统 UI 全案深度拆解

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

一、项目基础概述

项目背景与核心痛点

Voltera 是一套服务于新能源停车场的一体化智能管控系统，主要面向两大使用群体：停车场运营管理人员、新能源车主。

在传统模式下，双方都存在明显使用困扰：车场管理者无法直观查看车位状态、充电桩使用数据，场地利用率难以把控；新能源车主寻找空闲充电车位费时费力，充电进度、能耗情况也无法实时了解，双方使用体验都大打折扣，信息不通畅成为最大问题。

项目核心目标

1. 面向车场运营者：把繁杂的运营数据简化呈现，支持全天候实时监控、数据趋势查看、车位预约管理，让管理工作更高效；

2. 面向新能源车主：简化操作步骤，快速找到合适的充电车位，实时查看充电状态与能耗，打造便捷的用车体验；

3. 全场景视觉与体验统一：电脑管理后台、手机 App、线下广告屏保持体验一致，线上线下服务无缝衔接。

1.3 项目覆盖终端

系统支持多设备使用，包含 PC 端管理后台、苹果移动端 App、户外立式信息屏，全面适配不同场景下的使用需求。

二、全场景使用体验解析

使用流程：逻辑清晰，操作简单

整套系统根据两类人群的使用习惯，规划了专属操作流程：车主可完成登录、查找车位、在线预约、实时查看充电状态等操作；车场管理人员可查看全场车位数据、统计使用趋势、管理充电订单。

使用优势：

1. 功能分区明确：系统划分为登录首页、全场数据总览、车位筛选、充电数据查看、系统设置几大板块，功能划分清晰，上手零门槛；

2. 体验持续优化：结合大量真实用户的使用反馈反复调整流程，规避操作卡顿、查找困难等问题，适配不同年龄、操作习惯的使用者；

3. 人群需求区分：管理端侧重全场宏观数据，车主端聚焦个人用车需求，功能不冗余，每个人都能快速找到自己需要的内容。

多设备使用体验（电脑后台 + 手机 App）

（1）PC 管理后台：功能全面，管理高效

电脑端专为车场管理人员打造，布局规整合理：左侧为常用功能入口，中间展示车位信息，右侧搭配全场停车场全景视图，底部呈现各类运营数据。

使用特点：

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。

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

────────────────────────────────────────

一、智能 AI 卡片设计：弹窗层级的克制表达

手机端 iPhone Mockup 中的 AI 智能洞察弹窗卡片，白色卡片浮层覆盖在主界面之上。

手机端的这张 Smart AI Insight Card，展示了 B 端弹窗设计的一个重要原则：层级的建立靠光影，不靠线条。

• 主界面采用浅灰背景（约 #F5F6FA），弹窗卡片是纯白浮层 + 微投影（Y-offset 4px, blur 8px），层次关系干净利落，无需额外边框来界定卡片范围

• 卡片内部包含车辆碰撞示意图、型号信息（Ford Model 2017）、事件类型标签、CTA 链接共四类信息层，通过纵向网格对齐排布，视觉密度控制在舒适区间

• 左上角的蓝色警示标签（高饱和蓝，类似 #0047FF）是整个卡片唯一的色彩重心——它同时承担了"信息类型标识"和"视觉激活点"两个职能，让用户 0.3 秒内锁定核心信息

设计启示：弹窗卡片中，单一高饱和色点 + 大量灰白留白 = 最高效的注意力引导策略。不要用多个颜色"争抢"用户视线——在 B 端场景下，克制即高级。

────────────────────────────────────────

二、配色体系：蓝白双色的技术感构建

iPad 宽屏 Mockup 展示的 Advanced Visual Data Graph 界面，左侧浅灰数据区 + 右侧高饱和蓝详情面板形成强烈对比。

全系界面仅使用蓝 + 灰白两个色系，却呈现出强烈的科技感和专业感。这种配色策略的背后是一套严格的色彩分工：

其中右侧蓝色详情面板的处理尤为出色：纯蓝底色上使用白色线稿风格的车辆技术插画，融合了"工程图纸"的美学质感与"数字大屏"的现代感。这种「工程蓝图 × 数字大屏」的混搭风格，是近两年 B 端设计中逐渐成熟的视觉语言，特别适合汽车、工业、安防等领域的产品界面。

iPad Mockup 的展示意义：宽屏设备框让仪表盘的宽屏布局优势一目了然——选对展示载体，本身就是最好的设计说明。

────────────────────────────────────────

三、信息架构：数据优先级的三层金字塔

Collision Analytics 完整看板，在笔记本设备 Mockup 中的实际效果展示，包含主数据区 + 底部卡片列表 + 右侧蓝色抽屉面板。

在完整的 Collision Analytics 看板中，信息被严格划分为三个优先级层级，每一层对应不同深度的阅读需求：

第一层：核心指标（0.5s 锁定）

• 「48.2%」以超大字号占据左上角视觉重心区

• 这是用户在任何场景下都能瞬间锁定的"那个数字"

• 时间维度切片（Year/Quarter/Week）以 Tab 形式置于指标上方，提供灵活切换的同时不侵占核心数字的空间

第二层：趋势与异常标注（5s 理解）

• 折线图上用蓝色竖线直接标出风险突增的时间节点

• 箭头线从竖线引出，连接到文字说明"Collision severity increased by 64.2%"

• 这种标注式数据可视化让用户不必在图表和说明文字之间来回跳转——上下文信息被直接嵌入图表内部

第三层：可对比的详情卡片（30s+ 深入）

• 底部三张卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等宽网格并列排布

• 每张卡片结构完全一致：左侧标签 + 中间标题 + 右侧关键百分比，支持快速横向对比

• 右侧蓝色抽屉面板作为"按需展开"的详情层，随时可召唤、不抢占主内容区域

核心方法论：B 端仪表盘的信息架构不是"把数据放上去"，而是精心设计一条「用户先看什么 → 再看什么 → 如何深入」的视线引导路径。

────────────────────────────────────────

四、移动端适配：减法设计的三个原则

手机端两张卡片并排展示，左侧为蓝色聚焦卡片（Collision Reconstruction），右侧为白色常规卡片，两张卡片形成对比。

移动端的 B 端设计面临的核心挑战是：在极有限的屏幕空间内，把复杂数据讲清楚。这组移动端卡片展示了三个可复用的设计原则：

原则一：一卡一事 每张卡片承载一个分析命题，不做多任务混合。蓝色卡片 = 需要用户关注的条目，白色卡片 = 常规信息条目。颜色在此承担了优先级语义，而非装饰功能。

原则二：图文合一 车辆技术插画与百分比数据（如 35% severity）在同一卡片内左右排布。插图不是装饰——它用视觉化的方式解释了"碰撞严重程度"这个抽象概念，大幅降低了用户的理解成本。右侧的折线小图同时提供时间维度的趋势感知。

原则三：时间轴极简化 折线图上方的时间维度切换（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整个交互区域高度不超过 40px——零控件感，零视觉冗余，却承载了五个时间维度的切换入口。

────────────────────────────────────────

五、设计强化数字感受力：+64.2% 的视觉叙事

Focused Analytics 界面，左侧大量留白区域居中展示 +64.2% 大数字，右侧为折线趋势图 + 蓝色聚焦行动卡片。

最后一张 Focused Analytics 画面，是全套设计中最值得细品的一个单页。+64.2% 的增长数据被单独放在整个左半屏，周围是大量留白。这种处理方式背后有一条被反复验证的设计法则：

数字的"说服力" = 字号 × 留白面积

具体执行层面：

• 巨大的无衬线字体 + 极简居中排版，让数字本身成为页面唯一的视觉锤，用户不需要阅读任何辅助文字，就能"感受"到这个数字的分量

• 右侧折线图从 0 开始缓慢爬升、斜率逐渐增大，用图形曲线的"加速感"还原了"问题在恶化"的紧迫性——这是叙事型数据可视化的经典手法，图形本身在讲一个"从平稳到恶化"的故事

• 左灰右蓝的分屏策略将界面分为"客观数据区"和"行动聚焦区"，完整闭环了「信息获取 → 风险感知 → 行动指引」的用户旅程

• 蓝色聚焦卡片内部包含标签、标题、技术插画、百分比数值、进度条、说明文字共 6 个信息层级，全部通过字号、字重、间距做出清晰区分，密而不乱

────────────────────────────────────────

六、总结：6条可迁移的设计原则

这套作品给我们提供了以下可直接应用到实际项目中的设计准则：

1. 配色做减法：2 个主色 + 灰白体系，足够构建完整的科技感 UI。颜色越多，信息噪音越大

2. 信息分三层：核心数字 → 趋势标注 → 对比详情，为用户建立有节奏的阅读路径

3. 弹窗靠光影：偏移投影 + 留白比边框分割更优雅，更符合现代 UI 的视觉趋势

4. 颜色即信息：界面上唯一的高饱和色，必须指向用户当前最该关注的区域

5. 移动端一卡一事：小屏不做多任务混合，一张卡片讲清一个命题，宁可多滑一屏

6. 数字要能被"感受"：超大字号 + 充足留白 + 叙事型曲线，比干巴巴的百分比数字更有冲击力

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

做UI/UX设计的同学几乎每天都要和切换类组件打交道，但很多人总会在开关、复选框、单选按钮之间踩坑——要么用错场景，要么给用户造成认知混淆，甚至引发操作失误。

苹果HIG (人机界面指南) 里明确把开关、复选框、单选按钮这三类，都归为「切换开关」组件。它们的核心共性是让用户在对立的状态间做选择，通过差异化的视觉形态清晰区分选中/未选中的状态。

一、开关（Switch）

开关是用来瞬间切换单个功能/设置的开启/关闭状态的组件，一次只能控制一个设置的开关，工作逻辑和我们家里的物理电灯开关完全一致，能让用户一眼看清当前的生效状态。

1. 开关核心结构

开关的结构非常简洁，核心分为3个部分：

1. 轨道（背景）：开关的背景区域，也是手柄滑动的路径，通常会用颜色差异区分开/关状态，直观告诉用户当前是否激活
2. 手柄：用户可以点击、拖动的可交互按钮部分，手柄上可添加对勾、叉号、圆圈等辅助图标
3. 图标（可选）：用来强化状态认知的辅助元素

2. 开关使用规范

如果要添加辅助图标，必须选表意清晰、强二元对立的样式，千万别用含义模糊、没有明确正反属性的图标（比如月亮、编辑图标），用户没法一眼对应开/关状态。

开关的核心交互逻辑是操作后立即生效，不需要用户额外点击确认按钮，切换状态时，可配合手柄尺寸的微动效强化操作反馈。

开关必须和描述控制功能的标签搭配使用，标签要简洁直白，不要把文字放到开关内部。这样会压缩视觉空间，还会破坏组件通用性，增加用户识别成本。

二、复选框（Checkbox）

复选框的核心定位，是支持用户对一组关联选项，做单项或多项的选中/取消操作。

记住一个核心原则：当用户可以在一个列表里选择多个选项时就用复选框，不用开关或单选按钮。单选按钮的语义是「请选其中一个」，而复选框的语义是「可以选多个，也可以全不选」，二者的底层逻辑不同。

1. 复选框核心结构

复选框的结构清晰，核心就是选择容器+选中状态图标，通过勾选/未勾选的视觉差异，直观传递用户的选择结果。

2. 复选框使用规范

如果选项列表较长，建议添加「全选父复选框」提升操作效率，它的交互逻辑有明确的行业规范：

1. 父复选框勾选，所有子复选框自动全部勾选；
2. 父复选框取消勾选，所有子复选框自动全部取消勾选；
3. 子复选框仅部分被勾选时，父复选框需显示「半选（不确定）」状态，点击半选的父复选框，会自动全选所有子项。

   

处理一组有关联的多选项时优先用复选框，而非一堆独立的开关。

一方面，复选框能天然传递「选项之间互相关联」的语义，另一方面，它比开关占用的视觉空间更小，页面会更整洁有序。

三、单选按钮（Radio Button）

单选按钮的核心是互斥单选。在一组选项里，用户有且只能选择一个，选中新选项后之前选中的选项会自动取消。

它的语义非常明确：这一组选项里，「你必须、只能选一个」和复选框的「可多选、可全不选」形成了清晰的边界。

1. 单选按钮核心结构

单选按钮的结构核心是选中/未选中的状态图标+对应的选项标签。行业通用的视觉规范是：用实心圆点表示选中，空心圆圈表示未选中，保证用户的视觉识别度。

2. 单选按钮使用规范

不能打破互斥单选的核心逻辑，更不能让单选按钮出现布局重叠，否则会完全颠覆用户的固有认知，造成操作混乱。

如果选项数量较多、屏幕空间有限，可用下拉菜单替代单选按钮。

但要注意：下拉菜单需要用户多一步点击展开的操作，会增加交互成本，也没法让用户一眼看到全量选项，降低认知效率。因此选项较少时，优先用单选按钮。

单选按钮优先垂直排列，不建议水平排列。

垂直排列时每个选项的图标和标签对应关系更清晰，用户不会看错；水平排列不仅容易让页面拥挤、可读性下降，还会破坏布局一致性，在响应式适配中也更容易出问题。

四、一张表搞懂：三者到底怎么选？

前面讲了每个组件的细节，这里给大家整理了最简使用规则，设计时直接对照即可。

开关、复选框、单选按钮，都是设计里最基础、最常用的组件。设计时要先看场景、定语义，再选对应的组件，而不是凭感觉、看颜值随便乱用。

当然，我们也会看到一些特殊的设计案例，比如iOS在深色模式的选择里，用了圆形复选框，和我们今天说的常规用法不一样。这种情况，要么是为了整个系统的设计语言统一，要么是有特殊的产品考量，不建议盲目照搬。对于设计师来说，先搞懂这些基础组件的用法、可用性底层逻辑，才是做好设计的根基！

转载自 优设网

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

大家一定经常听说 UI 设计师需要具备产品思维，但又不知道产品思维具体是什么，尤其是很多同学只把产品思维当成是产品经理做需求的能力。

兰亭妙微UI设计公司：今天我们的主题就是分享产品思维的具体思考方式和应用

产品思维一句话总结，就是——通过规划产品形式来解决产品问题的思考模式。

这里我们先明确 “产品问题” 是什么，它是一个非常宽泛的概念，可以说所有产品相关的问题都可以是产品问题，包括但不局限于功能、交互、体验、视觉、技术、服务等领域。

在产品的研发和运营过程中，产品团队总会发现和积累出各式各样的问题，比如功能太简陋不能满足用户需求、交互太复杂用户用不懂、逻辑太复杂技术实现不出来等等。这些问题当然需要被解决，而解决的方式有两种，一种就是直接使用相关领域的 “技术方案” 解决，另一种就是提供新的 “产品方案” 来解决。

这里技术方案是泛指，指产品以外的其它类岗位使用自身专业技能来解决问题的方案。比如用户觉得页面信息混乱，设计师通过布局、尺寸、间距、色彩的视觉调整，就能解决这个问题。或者某些交互设计需要非常复杂的编程方案，前端自己通过钻研技术，来实现这个效果。

比如下面这些就是纯粹的视觉优化方案：

产品方案则是指通过制定或调整产品的功能、服务、表现形式，来解决相关的问题。比如上面觉得信息混乱，不再是改设计，而是直接优化和增减字段信息。交互设计开发起来太难，那就直接调整产品功能，分拆交互步骤降低开发难度。

比如下面这个就是对产品的形式做出了一定的调整：

两种方案各有优劣，但在真实项目中，产品是先于设计和开发的，好的产品方案不仅能提高产品的实际表现，同时还可以大大降低技术实现的成本。所以在解决问题时，团队必然会倾向先使用产品思维来创建产品方案，然后再去实施。

总结起来，产品方案就是涉及对产品本身的调整方案。原则上，这种方案是由产品经理提供，设计师只要跟着产品的要求去做设计就好了。

但在真实项目中，产品不可能考虑到所有问题，尤其是和体验、交互、视觉高度相关的部分。

每当我们每做界面或功能时，碰到所有和产品有关的问题，都需要反馈给产品经理再等它做决策，那么他必然是处理不过来的，项目肯定也做不下去。所以设计师需要在自己力所能及的范围里，尽量自己去解决这些问题，提高项目整体运转的效率和质量。

尤其在一些对视觉要求不是特别严苛的环境中，UI设计的成果往往“能看”就够了，领导或者面试官对设计价值的定义就不会在视觉上，往往会聚焦在产品方案上。就是因为设计师自己有产品思维具备解决产品问题的能力时，可以极大的填补产品经理层面的空缺，还可以提高产品质量和研发效率。

但是，产品方案不是只提供解决方案就行了，还需要合理、有效，所以就要综合各方面的制约与影响，才能输出优质的结果，这就是一个非常综合性的分析过程，我很难用简单的语言进行归纳和总结。

所以，下面就通过前面的案例，来展示产品思维的具体思考过程

在原有两步路路线详情页中，顶部的大图和信息区域是我重点调整的区域之一。

之所以重点关注，不仅仅是因为它 “不好看”，而是这个大图的缺陷很多。作为浏览用户，图片的关注度不是没有但绝对不是重点，往往只是草草快速浏览一遍就够了，但现在的轮播形式就没办法高效看完相关图例，且占据的篇幅又过大，挤占下方的其它关键信息点。

当然也有同学可能会觉得看图怎么会不重要，你们看小红书找旅游地不就是被图吸引然后再点击进入做出选择的嘛？

不排除这种情况是存在的，但这不是小红书，这是一个比较硬核的徒步社区，不是给用户看大图就有问题，而是在发布用户这一侧，硬核优质的分享者（是去走或跑几十公里不是到打卡点自拍）大多不具备那种拍“美照”的能力，最终呈现的路线图景多数就是随手一拍的质量，浏览用户压根没必要仔细欣赏。

再进一步考虑，有很多经典线路本身景色就不是特别好，尤其是偏越野跑的线路往往杂乱又逼仄，照片带来的作用更多是一种对路线的概括（功能性），而不是作为吸引人的美照。在这个限制下面，大篇幅展示封面就不会获得常规以图片为导向的应用的结果。

这些就是针对问题的分析，而这里面既有体验的问题，也有产品的问题，甚至还有运营的问题，但具体去区分它们没有意义，只要它们不是纯粹的视觉问题我们都可以统一归纳为它们是产品问题。

基于这些问题去思考解决方案时，就可以问自己一个简单的问题，是不是只做视觉调整，如优化布局、更改尺寸、添加投影、增加圆角之类操作就能解决。如果不能，那就要涉及到对产品形式的调整了，也就是涉及功能、信息的改动。

这里我们先看改完之后的结果：

为了减少图片的面积和提高观看效率，我选择缩小图片并做成左右滑动的列表，把发布用户信息做到上面，合理利用空间且突出收藏、分享等操作。但光改这个依旧只是一个简单的视觉调整，缺乏深度和细节，没有什么解释的空间。

所以再往深一点挖掘，一屏只能展示一张图多一点，理由不是图片比例的问题，而是因为用户发布路线最小可以添加的封面图只有一张。如果只有一张，那么右侧留空显然是不能接受的，这样的方案也就做不了。而且只展示图片实在是有点不够看。

我会再想到链家之类看房软件的顶部区域，除了展示摄影图以外，还会添加固定的房型图，应用了多种图片类型。而在两步路中，如果发布路线，除了封面图外，路线图本身肯定也是能直接生成图片的，可以生成类似跑步软件的那种路径图。

顶部图片也可以不止有用户自己拍的摄影图，还可以添加路线生成图，同时这张图因为是静态的，就可以在生成过程中添加一些数据信息或标注内容等，和下方可交互的地图路线展示区分开来。并且在下方区域添加一个类似电商中 “商品图/视频” 切换的标签快速选择。

甚至再仔细想想，当我进入路线详情页时其实更关注的是路线本身，第一张图直接放路线图而不是放在最后，可能对相当一部分用户来说也是更实用的做法。但这么做就有点激进，需要给出初步设计以后再套一些真实内容做出页面看效果，这就是内部评审或用户测试要做的事情了。

到这里这个模块基本解释的就差不多了，而我们为了优化它已经做出了一些超出视觉设计外的变更，且需要考虑尽可能多的细节，照顾到方方面面，这就是产品思维应用的过程。

再往下的路线模块改动也同理，我就不多做展开，你们可以自己深入解构一下：

设计过程中对产品思维的应用，不是成为产品经理构思新的功能需求，而是维持原先目标的不变的情况下，给出新的、更完整、更合理的产品方案。

而产品方案当然不是你们想怎么输出就怎么输出，这些方案还需要再后续经过团队的评审（我要验牌），也就是说服其他人同意你的设计方案。而光看图肯定不够，所以要进行解释说明，从一开始的问题分析出发，到如何完成这个结果的考虑过程。

在这个场景中只看设计图效果是最没价值的，如果你能说服团队通过，那这套方案就是好方案，如果不行，那不管你想的如何天花乱坠还是视觉做得多花里胡哨都没用。所以方案构建逻辑性是非常重要的，因为没有逻辑就没有说服力。

产品思维本身就是一种比较抽象的思维，提升这种底层思维能力需要通过自己大量的积累。我们后续还会陆续做一些相关的案例分享（这应该才是最有用的）。

同时，面对真实工作场景里产品思维很多时候会沦为一种过稿的武器，是一种职场“诡辩”的技术，毕竟上线有没有用无所谓，领导、客户觉得好，才是真的好……

转载自优设网

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

 

视觉设计：科技与驾驶氛围的融合

信息架构：驾驶场景优先的高效布局

交互体验：安全优先的轻量化操作

设计总结

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

北京兰亭妙微设计专注 UI/UX 体验设计十六年，在政务、医疗、企业 SaaS、工业可视化等项目中，我们已建立完整设计规范体系，用以提升效率、保证输出统一。但在真实项目里，客户个性化需求、特殊业务场景、跨终端适配等情况，常与规范产生冲突。

北京兰亭妙微科技有限公司（蓝蓝设计）深耕 UI/UX 设计 16 年，专注企业信息化、大数据、医疗健康、工业监控等领域的全链路体验设计与优化。近期我们完成某企业级综合服务平台可用性测试，现将报告输出思路完整复盘，供团队内部复用与同行交流。

在兰亭妙微，我们服务过金融、医疗、军工、智能制造等大量政企与企业级项目，见过太多设计师「软件很溜、想法很空、落地很慌」。同样是做界面，为什么有的人只能当美工，有的人却能拿高薪、控项目、带结果？

好的 UI 设计，从来不止是界面美化，而是品牌、场景、体验三位一体的系统能力。兰亭妙微深耕 UI/UE 设计 16 年，服务金融、军工、医疗、能源、智能制造等多领域，沉淀出一套可复制、可落地的高级 UI 设计方法论。我们认为，真正的高级 UI 设计师，必须具备三大核心特质 ——品牌体系化、场景业务化、体验心智化，这也是兰亭妙微所有项目的底层设计准则。

作为深耕网页设计与品牌视觉的专业团队，兰亭妙微在大量 Web 端项目中反复验证：字体排版是网页设计的底层骨架，直接决定阅读舒适度、信息传递效率与品牌专业度。遵循标准化字体排版规范，既能提升用户体验，也能让设计与前端对接更高效、落地零偏差。