一、产品定位：从邮件发送工具转向营销决策工作台

从页面信息结构来看，Emaily 并不是一款单纯的邮件编辑或群发工具，而是一套围绕营销活动全生命周期建立的运营平台。顶部导航包含 Dashboard、Leads、Campaign、Analytics 和 Promote，基本对应邮件营销的核心业务链路：

1. 获取和管理潜在客户

2. 创建营销活动

3. 执行邮件发送

4. 追踪用户行为

5. 分析营销效果

6. 继续推动转化

因此，首页的设计目标并不是将所有功能平均呈现，而是回答运营人员每天进入系统后最关心的几个问题：

· 当前营销活动是否正常运行？

· 核心指标相比上一周期发生了什么变化？

· 哪些自动化任务正在执行？

· 邮件送达质量是否出现风险？

· 今天还有哪些活动需要处理？

这意味着 Dashboard 本质上不是一个“数据展示页面”，而是一个面向运营决策的状态入口。

二、视觉策略：用“轻盈感”降低专业工具的使用门槛

Emaily 最鲜明的视觉特征，是淡紫色背景、白色卡片、低饱和辅助色和大圆角容器共同形成的轻量化界面。这套视觉语言与传统 B 端后台强调秩序、效率和控制感的做法有所不同。它通过更柔和的界面氛围，降低用户面对大量营销数据时的心理负担。

 

图 1｜轻量化品牌视觉与移动端展示

1. 淡紫色不是装饰，而是界面分层工具

页面背景使用极浅的紫色或粉紫色，而内容卡片保持白色。两者之间的明度差并不强烈，却足以建立页面层级。背景色承担环境层，白色卡片承担内容层，深色按钮承担操作层，整个页面的视觉分工非常明确。

· 避免纯白背景造成的区域边界模糊

· 减少传统灰色后台的沉重感

· 让蓝色、绿色、黄色等指标色更容易被识别

2. 大圆角构建统一的产品气质

从导航标签、搜索框、数据卡片到按钮，界面大量使用胶囊形态和大圆角。这种设计让不同模块具有相近的轮廓特征，从而形成稳定的设计系统。当页面中存在大量相邻的数据模块时，圆角还能弱化网格的机械感，让用户感知到的是一个个独立的信息单元。

3. 深色仅用于强调关键操作

页面没有大面积使用品牌深色，而是将接近黑色的深紫色集中用于当前导航状态、主要操作按钮、图表浮层提示和重要页面标签。这种克制的色彩分配使深色获得了更高的视觉权重。

三、首页架构：不是平铺指标，而是组织决策顺序

 

图 2｜桌面端 Dashboard 信息架构

桌面端首页可以被划分为五个层级：全局导航层、快捷操作层、核心指标层、趋势分析层、质量与日程管理层。这种结构体现了一条清晰的决策路径：

决策路径  先确认全局状态，再查看异常变化，随后分析趋势，最后进入具体任务。

 

快捷操作：缩短高频任务路径

左上角的 Quick actions 提供创建 Campaign、导入联系人、设计模板和查看报告等入口。它的价值不在于功能数量，而在于消除“先找到模块，再进入页面，再寻找按钮”的多级导航成本。更成熟的策略是结合用户角色、近期行为与任务频率，动态配置快捷入口。

核心指标：数字、趋势和基准共同表达

Emails Sent、Open Rate 和 New Subscribers 等卡片并没有只给出一个孤立数字，而是同时包含当前结果、环比变化、趋势方向、简化图表与参考基准。一张有效的数据卡片，至少应回答三个问题：

7. 发生了什么？

8. 变化是否正常？

9. 是否需要采取行动？

Emaily 已较好地覆盖前两个层面，但第三个层面仍有提升空间。例如当打开率下降 27% 时，系统可以进一步说明可能原因，并提供“查看异常活动”或“检查受众质量”的行动入口。

四、图表设计：用轻量表达服务快速判断

首页中央的 Campaign Performance 是整个页面的信息核心。相比四周的小型指标卡，它使用更大的横向空间，展示收入、点击率与退订量随时间变化的关系。图表以细线、浅色竖纹和弱化网格构成，保持页面轻盈感，并避免成为视觉噪声。

 

图 3｜Dashboard 与移动端重点数据对照

多指标叠加的意义

将 Revenue、Click Rate 和 Unsubscribes 放在同一个时间轴中，可以帮助用户理解指标之间的关联：

· 收入增长是否来自点击量上升

· 发送量扩大后退订率是否同步增加

· 某次营销活动是否带来短期峰值

· 指标变化是否具有持续性

这种图表比三个独立趋势图更接近真实决策场景。但多指标叠加也存在风险：如果量纲、数值跨度和统计口径不一致，就可能形成错误的视觉相关性。产品设计阶段应明确是否使用双坐标轴、各指标是否归一化、时间粒度是否一致、缺失数据如何呈现，以及图例是否支持显隐控制。对专业型 SaaS 而言，图表的可信度比视觉冲击力更重要。

五、信息密度控制：卡片化不等于碎片化

卡片是这套设计最主要的页面容器，但设计并没有简单地把每个指标都装进独立卡片，而是根据业务语义组织信息。

· Emails Sent、Open Rate、New Subscribers 属于核心结果

· Active Automations 属于运行状态

· Reputation Score 和 Deliverability Score 属于质量评估

· Schedule Campaign 属于时间与执行计划

· Campaign Performance 属于综合趋势

这说明卡片边界是按照“用户要完成的判断”划分的，而不是按照数据库字段划分的。这是 B 端产品设计中非常重要的一点：后端数据结构不应该直接决定前端信息结构。用户关心的不是某个字段存储在哪里，而是多个字段能否共同解释一个业务问题。

六、活动列表：从视觉型仪表盘切换到效率型管理界面

 

图 4｜Campaign 活动列表页面

Dashboard 强调感知和判断，Campaign 列表则明显转向检索、比较和批量管理。列表页采用“状态标签＋数据列＋进度条＋行内操作”的经典结构，涵盖活动名称、类型、状态、受众数量、打开率、点击率、收入与执行进度，较好地解决了营销活动的横向比较问题。

状态标签具有双重作用

Completed、Draft、Sending、Scheduled 等状态通过不同颜色区分，既降低阅读成本，也构成列表扫描时的视觉锚点。Emaily 同时保留图标和文字，避免让颜色单独承担信息表达，是正确的无障碍设计方向。

筛选系统服务于任务定位

搜索框、状态筛选、时间范围和排序选项被集中放置在列表上方，形成完整的检索工具栏。对于数据量较大的运营平台，用户进入详情再返回列表时，应尽量保留搜索条件、筛选组合、排序方式、页码位置和已选活动，否则用户需要反复重建工作上下文。

七、活动详情：围绕“结果—原因—构成”逐层展开

 

图 5｜单次营销活动数据详情

活动详情页比首页呈现了更深一层的数据分析。顶部首先明确活动名称、状态、发送时间和受众规模，随后通过 Overview、Content、Audience 和 Deliverability 四个标签建立分析框架。

· Overview：活动最终表现如何

· Content：发送了什么内容

· Audience：发送给了哪些用户

· Deliverability：邮件是否成功到达

页面从摘要指标进入诊断数据：上方展示发送量、打开率、点击率与收入，中央展示趋势，底部进一步提供高点击链接、设备分布、地域分布、转化率和退订数量，形成从宏观结果到细节原因的分析路径。

例如，当点击率下降时，用户可以继续检查哪些链接点击量下降、是否集中在移动端、是否来自特定地区、打开率与点击率是否同步变化，以及退订率是否异常。这种渐进式分析比一次性展示所有数据更符合用户认知规律。

八、响应式设计：移动端不是桌面端的缩小版

 

图 6｜移动端模块化布局

移动端延续了桌面端的视觉语言，但在信息结构上进行了明显调整。桌面端采用多列 Dashboard，通过横向空间建立指标对照；移动端则转化为纵向卡片流，按照优先级依次排列。

· 桌面端适合全局分析、跨指标比较与复杂操作

· 移动端适合快速查看、状态确认和轻量处理

移动端保留的是决策价值，而不是全部内容

邮件发送量、打开率、新增订阅、趋势表现、自动化状态、活动日程和送达质量均被拆分为独立卡片。这比单纯缩小桌面界面更合理，因为移动端的核心问题不是“能不能放下”，而是“用户在短时间内最需要看到什么”。

实际落地时仍需验证小屏图表的可读性，包括图例是否拥挤、坐标标签是否清晰、Tooltip 是否易于触发、多条曲线是否容易区分，以及图表是否支持横屏或详情展开。

九、设计系统：统一不只是组件外观统一

从多个页面可以看出，Emaily 已经形成一套相对稳定的设计语言：

设计对象	主要特征	体验作用
页面背景	淡紫、淡粉与浅蓝	建立柔和的产品氛围
内容容器	白色大圆角卡片	划分信息边界
主按钮	深紫色胶囊按钮	强调主要行动
状态标签	低饱和语义色	支持快速扫描
图表	细线、浅网格、轻填充	降低数据噪声
图标	线性图标配浅色底	提升功能识别
导航	胶囊形标签	清晰表达选中状态
间距	规则化卡片间距	维持页面节奏

真正成熟的设计系统不应只规定颜色、圆角和间距，还应定义正负趋势的语义、空数据和异常状态、图表颜色一致性、卡片点击区域、指标更新时间与统计口径，以及响应式状态下的信息保留优先级。若这些规则没有系统化，即使视觉统一，用户仍可能产生理解偏差。

十、值得警惕的问题：柔和视觉不能削弱业务信号

1. 弱对比可能影响可读性

浅色文字、细线图表和低对比背景带来了精致感，但也可能降低小字号信息的识别效率。设计阶段应通过 WCAG 对比度标准和真实设备测试，验证正文、状态文字与图表辅助线的可读性。

2. 卡片数量较多，页面容易产生平均化

当所有信息都以相似尺寸、圆角和白色背景呈现时，页面可能缺少明确主次。可考虑通过异常状态、业务目标和用户角色动态调整卡片权重。

3. 指标变化缺少原因解释

“打开率下降 27%”是一条事实，却不一定是一条可执行的信息。系统应结合历史活动、发送时段、主题行表现和受众结构提供原因提示。

4. 移动端需要明确操作边界

手机端适合快速查看，但不适合完成复杂的活动配置、受众筛选和内容编辑。产品需要明确哪些操作可直接完成，哪些应引导用户回到桌面端。

行动建议示例  本次打开率低于近 30 天平均值，主要下降来自移动端用户；建议检查邮件标题长度与移动端首屏预览。

 

十一、对产品经理与设计师的启示

先建立任务模型，再设计 Dashboard

不要从“首页放哪些图表”开始，而应先确认用户进入系统后需要完成哪些判断。每一张卡片都应该对应一个明确问题，而不是为了填充页面空间存在。

区分监控指标、诊断指标和行动入口

首页适合呈现监控指标，详情页负责诊断原因，操作页负责执行任务。三个层级混在一起，会让 Dashboard 既拥挤又缺乏重点。

响应式设计必须重新排序信息

移动端不是把桌面端从三列改成一列，而是重新判断哪些信息必须出现、哪些可以折叠、哪些不适合操作。

数据表达要走向“解释与建议”

成熟的数据产品不应停留在 What happened，还需要逐步回答 Why did it happen、Does it matter 与 What should I do next。

结语

Emaily 用轻盈、友好的视觉风格，重新包装了一个高数据密度的邮件营销工作台。它通过卡片化结构降低复杂度，通过克制的色彩建立层级，通过跨端重组适应不同使用场景，并通过活动列表与详情分析形成完整的业务闭环。

设计结论  优秀的 SaaS 界面不是把复杂业务隐藏起来，而是把复杂业务重新组织成用户能够快速理解、判断和行动的结构。

 

对于产品经理而言，这意味着 Dashboard 的设计必须从业务决策出发；对于资深设计师而言，则意味着视觉美感、信息架构与数据语义必须被视为同一个系统，而不是三个彼此独立的设计环节。

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