▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 6667 字，预计阅读 18 分钟

TCC 情报局的第 244 篇干货分享

2024 年的第 24 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。这份文件是关于德古拉是 WordPress 的黑暗模式插件全面分析，它这是一个免费的增值插件, 该插件提供实时编辑，并且可以预览对网站前端所做的更改，同时允许用户将其配置为与网站相匹配。

德古拉是 WordPress 的黑暗模式插件，这是一个免费的增值插件，点击链接https://wordpress.org/plugins 可以轻易的安装。该插件提供实时编辑，并且可以预览对网站前端所做的更改，同时允许用户将其配置为与网站相匹配。

我的角色：

作为德古拉黑暗模式 WordPress 插件的产品设计负责人，我负责以下部分：
进行用户研究，以确定痛点和用户需求。
根据竞争对手分析了解市场价值。
创建线框和原型以测试设计概念。
领导视觉设计工作，创造一个视觉统一和用户友好的界面。
与开发团队合作，确保插件的设计和功能符合用户的需求和公司的目标。
与营销团队分享有趣的营销理念，以独特且令人难忘的方式推广插件。

时间线：

14周

1.用于UX/UI规划的工具：

1）Tools Used for UX/UI Planning:

Figma, FigJam, Miro & Google Docs

UX/UI项目规划工具

WordPress

WordPress 是一款使用 PHP 语言和 MySQL 数据库开发的个人博客系统，也是一款逐步演化成内容管理系统的软件。它可以在支持 PHP 和 MySQL 的服务器上建立自己的网站，也有许多第三方开发的免费模板可供选择。

1.该项目的设计流程:

1.The Design Process I followed:

我把精益用户体验和设计思维的方法论结合，创建了一个设计解决方案。该方案不仅用户友好、高效，而且能满足黑暗模式用户的核心需求。MVP（minumim virable product, 最小可行性产品）是针对精益用户体验快速开发的，并应用设计思维过程来确保黑暗模式插件满足用户需求并有效解决问题。

精益用户体验与设计思维过程的结合

1)目标用户:

1)Target audience:

Dracula Dark Mode 插件的目标受众包括 WordPress 网站所有者、网站设计师和 WordPress 开发人员，他们希望通过提供黑暗模式选项来增强网站的用户体验。

此外，在他们的网站上启用黑暗模式选项只需点击几下，不需要任何编码知识。

2)用户故事:

2)User Stories:

通过收集许多与黑暗模式网站相关的用户故事，分析表明：包括网站所有者、开发人员和设计师在内的所有类型的用户都有兴趣在他们的网站上实现 Dark 模式。

用户故事

3)使用暗模式的重要性和好处.

3)Importance and benefits of using dark mode in a website.

在过去这几年，黑暗模式已经成为网页设计中的一种流行趋势。

减少眼睛疲劳和疲劳（尤其是在光线昏暗的环境中）。
增强有视觉障碍或对强光敏感的用户的使用体验。
为用户提供了一个可自定义的选项，用户可以根据自己的喜好或一天中的时间在光亮和黑暗模式之间切换。
使网站设计看起来更加现代时尚。

4)用户画像

4)User persona

用户画像1

用户画像2

5)良好用户体验的关键产品目标

5)Key Product Goals for Better User Experience

提供定制选项以适应各种设计偏好。
用户可以轻松安装并激活插件。
对于喜欢深色界面的用户，提高可读性以减少眼睛疲劳。
通过优化黑暗模式功能，提高网站性能和速度，实现高效加载和操作。
为寻求提高用户参与度和留存率的网站所有者提供经济高效的解决方案。

6)竞品分析

6)Competitor features analysis

通过进行对竞品的功能分析，我可以确定我的竞争对手提供了什么以及他们缺乏什么功能，来改进自己产品，更好地满足目标受众的需求。

点击 check the live comparison 查看实时对比

7)通过感知地图发现竞争对手的市场定位

7)Discover Market Positioning for competitors by perceptual map.

我使用感知地图来分析竞品和自身的市场定位。

SWOT Analysis

8)用户流程（基于我观察到的信息）

8)User flow based on the information I was noted

用户流程是用户完成特定任务所采取的一系列步骤——从最初的进入点到最终目标。

根据开发团队的信息处理用户流程

2.发散和草图阶段

2.Ideation and Sketching Phase

从草图开始已经成为我设计过程中不可或缺的一部分。在最终的用户界面之前，我总是尝试使用一个粗略的草图。

粗略草图用于插件内部和实时编辑器小工具的高保真线框

插件屏幕内部线框

实时编辑器组件的线框图

为了验证设计决策并快速迭代设计思想，我从创建高保真模型开始，然后再转到最终的视觉效果。此外，我生成了一个线框流程图，以便与开发团队有效地交流设计思想。

线框流程图

1)进入UI设计阶段

1)Now time to move part of UI Design

为什么我选择使用矢车菊蓝（#675ED5）作为品牌色？

视觉效果：矢车菊蓝是一种有活力的、吸引眼球的颜色，可以让用户更好的关注重要组件。
可信任的：这种颜色给人一种可靠的、可信任的安全感；对于商业和组织来说，该颜色传递可依赖性。
性别中立：该颜色男性气质和女性气质适中，适合多样的用户群体。
情感化：该颜色给人一种宁静的感觉。
可兼容的：该颜色从色相上和其他颜色都可以很好的搭配。

为什么我选择使用 Manrope 字体？

可读性：简洁，现代的风格，即使在较小的字号下也可清晰阅读。
多样性：有多种字重和风格，与设计风格保持一致性。
整合性：该字体很容易在wordpress和saas产品上使用，不同设备和平台都可兼容。
网页流畅度和设计自由度：该字体可优化网页的运行速度，同时有对应的标题，正文和按钮字体。

插件设置

https://www.figma.com/proto/OJ55bSDghb7X6u7JPsGrsK/Dark-Mode-WP-Plugin-(Case-study)?kind=&node-id=2863-34258&page-id=2863%3A34242&scaling=scale-down-width&starting-point-node-id=2863%3A34243

我为实时编辑组件设计了浅色和深色变体，适用于安装高级版本插件的前端版本。

设计系统和组件库

2)与营销团队分享社会推广理念

2)Sharing Social promotional Ideas with the Marketing team

作为一名产品设计师，我与营销团队合作创建了一个表情（meme），即如何在社交媒体上营销我们的插件的图像，它可以影响用户心智模型。

3)关键业务挑战

3)key business challenges

确保能够为与功能相关的任何技术问题提供足够的支持和资源。
制定整合和优化的综合战略。
制定和实施有效的定价和货币化战略。
有效的营销和推广黑暗模式的特点去吸引目标受众。

4)成功道路上的挑战

4)Challenge to succeed

为黑暗模式插件实施有效的定价和货币化策略，这需要全面了解目标受众及其付费意愿，以及市场趋势和竞品定价。同时，也需要了解如何优化该功能以获得最大性能和可用性。

5))成果展示

5)Now time to show our product on the website

这是我们的登录页以及其他页面，用户可以在这里Dracula Dark Mode: Revolutionary Dark Mode Plugin for WordPress了解我们的功能并采取行动购买高级版本。

德古拉黑暗模式WordPress插件网站

ORG的屏幕截图

营销活动的电子邮件模板

6)社交横幅和营销资产

6) Social Banner & Marketing asset

这是成功的数字营销活动的重要组成部分。它们包括各种视觉元素，如图像、视频和图形，旨在吸引目标受众的注意力并有效传达我们品牌的信息。

Youtube视频缩略图

3.发布和结果

3.Launch and results

德古拉黑暗模式在WordPress插件目录上的推出是一个巨大的成功。在推出后的短短几个月内，该插件就被超过 460 名用户下载，并获得了令人印象深刻的五星肯定。仅在 1.0.0 版本上，它就有 70 多个用户安装。

检查WordPress目录中的插件

我们的目标始终是获得尽可能多的用户。然而更重要的是，增长并不总是在一夜之间发生的。随着时间的推移，产品的下载量和用户会缓慢而稳定地增加。

截至2023年3月27日用户激活和评分的统计数据

我们很高兴看到我们的竞争对手购买了我们插件的高级版本，并留下了积极的五星评价，称赞了用户体验。

您可以查看实时预览：

Yes it’s a Revolutionary - [Dracula Dark Mode - The Revolutionary Dark Mode Plugin For WordPress] Review | WordPress.org

4.未来改进

4.Future Improvements

提高与其他插件的兼容性：未来需要改进的一个领域是提高德古拉黑暗模式插件与其他WordPress插件的兼容性。这有助于增强用户体验，降低冲突并规避技术风险。
增强自定义选项：通过提供更多的自定义选项，用户可以根据自己的特定需求和偏好定制插件，从而增加价值和吸引力。
扩展平台支持：目前，德古拉黑暗模式插件仅适用于WordPress。未来将支持扩展到其他平台，有助于增加插件的覆盖范围并吸引更广泛的受众。

5.经验教训

5.Lessons Learned

在确定最终设计之前，始终要考虑市场价值和竞争，以确保其在市场上脱颖而出。
在没有进行彻底研究的情况下，千万不要认为完全了解用户的需求和痛点。
在向公众发布之前对插件进行广泛测试，有助于尽早发现和解决潜在问题，改善用户体验，降低负面反馈的可能性。
有效的营销和推广对任何插件的成功都至关重要。
通过营销策略和利用一系列渠道和策略，开发人员可以接触到更广泛的受众。

认识一下我们才华横溢的团队，他们在这个项目上与我密切合作。

我们的团队由高技能人员组成，他们热衷于创造卓越的产品。每个成员都为项目带来了独特的优势和专业知识，从用户研究和设计到开发和测试。我们相信协作方法，每个人的想法和反馈都会受到重视，并融入到最终产品中。

Israil Ahmed Prince ( Sr. Software Engineer )

Akash Ahmed ( Frontend Developer )

Ashikur Rahman -Me- ( Product Design lead )

Naziur Rahaman ( Digital Marketing Executive )

感谢您花时间阅读我的案例研究。我希望你能发现它提供了信息，有助于深入了解我们的项目和我们用来开发德古拉黑暗模式插件的过程。如果你有任何问题或意见，请随时联系我。我感谢你的关心和支持。

原文：https://medium.com/@ashikxql/ux-ui-case-study-dracula-dark-mode-plugin-for-wordpress-website-users-85f6d7838127

作者：Ashikur Rahman

译者：戴一泓

审核：李泽慧

编辑：林庭婷

本文翻译已获得作者的正式授权（授权截图如下）

往期精选文章：

UX/UI设计案例研究：适用于WordPress网站用户的德古拉-黑暗模式插件

本文共 6667 字，预计阅读 18 分钟 TCC 情报局的 第 244 篇 干货分享 2024 年的 第 24 篇