▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 6667 字，預(yù)計(jì)閱讀 18 分鐘

TCC 情報(bào)局的第 244 篇干貨分享

2024 年的第 24 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。這份文件是關(guān)于德古拉是 WordPress 的黑暗模式插件全面分析，它這是一個(gè)免費(fèi)的增值插件, 該插件提供實(shí)時(shí)編輯，并且可以預(yù)覽對(duì)網(wǎng)站前端所做的更改，同時(shí)允許用戶(hù)將其配置為與網(wǎng)站相匹配。

德古拉是 WordPress 的黑暗模式插件，這是一個(gè)免費(fèi)的增值插件，點(diǎn)擊鏈接https://wordpress.org/plugins 可以輕易的安裝。該插件提供實(shí)時(shí)編輯，并且可以預(yù)覽對(duì)網(wǎng)站前端所做的更改，同時(shí)允許用戶(hù)將其配置為與網(wǎng)站相匹配。

我的角色：

作為德古拉黑暗模式 WordPress 插件的產(chǎn)品設(shè)計(jì)負(fù)責(zé)人，我負(fù)責(zé)以下部分：
進(jìn)行用戶(hù)研究，以確定痛點(diǎn)和用戶(hù)需求。
根據(jù)競(jìng)爭(zhēng)對(duì)手分析了解市場(chǎng)價(jià)值。
創(chuàng)建線(xiàn)框和原型以測(cè)試設(shè)計(jì)概念。
領(lǐng)導(dǎo)視覺(jué)設(shè)計(jì)工作，創(chuàng)造一個(gè)視覺(jué)統(tǒng)一和用戶(hù)友好的界面。
與開(kāi)發(fā)團(tuán)隊(duì)合作，確保插件的設(shè)計(jì)和功能符合用戶(hù)的需求和公司的目標(biāo)。
與營(yíng)銷(xiāo)團(tuán)隊(duì)分享有趣的營(yíng)銷(xiāo)理念，以獨(dú)特且令人難忘的方式推廣插件。

時(shí)間線(xiàn)：

14周

1.用于UX/UI規(guī)劃的工具：

1）Tools Used for UX/UI Planning:

Figma, FigJam, Miro & Google Docs

UX/UI項(xiàng)目規(guī)劃工具

WordPress

WordPress 是一款使用 PHP 語(yǔ)言和 MySQL 數(shù)據(jù)庫(kù)開(kāi)發(fā)的個(gè)人博客系統(tǒng)，也是一款逐步演化成內(nèi)容管理系統(tǒng)的軟件。它可以在支持 PHP 和 MySQL 的服務(wù)器上建立自己的網(wǎng)站，也有許多第三方開(kāi)發(fā)的免費(fèi)模板可供選擇。

1.該項(xiàng)目的設(shè)計(jì)流程:

1.The Design Process I followed:

我把精益用戶(hù)體驗(yàn)和設(shè)計(jì)思維的方法論結(jié)合，創(chuàng)建了一個(gè)設(shè)計(jì)解決方案。該方案不僅用戶(hù)友好、高效，而且能滿(mǎn)足黑暗模式用戶(hù)的核心需求。MVP（minumim virable product, 最小可行性產(chǎn)品）是針對(duì)精益用戶(hù)體驗(yàn)快速開(kāi)發(fā)的，并應(yīng)用設(shè)計(jì)思維過(guò)程來(lái)確保黑暗模式插件滿(mǎn)足用戶(hù)需求并有效解決問(wèn)題。

精益用戶(hù)體驗(yàn)與設(shè)計(jì)思維過(guò)程的結(jié)合

1)目標(biāo)用戶(hù):

1)Target audience:

Dracula Dark Mode 插件的目標(biāo)受眾包括 WordPress 網(wǎng)站所有者、網(wǎng)站設(shè)計(jì)師和 WordPress 開(kāi)發(fā)人員，他們希望通過(guò)提供黑暗模式選項(xiàng)來(lái)增強(qiáng)網(wǎng)站的用戶(hù)體驗(yàn)。

此外，在他們的網(wǎng)站上啟用黑暗模式選項(xiàng)只需點(diǎn)擊幾下，不需要任何編碼知識(shí)。

2)用戶(hù)故事:

2)User Stories:

通過(guò)收集許多與黑暗模式網(wǎng)站相關(guān)的用戶(hù)故事，分析表明：包括網(wǎng)站所有者、開(kāi)發(fā)人員和設(shè)計(jì)師在內(nèi)的所有類(lèi)型的用戶(hù)都有興趣在他們的網(wǎng)站上實(shí)現(xiàn) Dark 模式。

用戶(hù)故事

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

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

在過(guò)去這幾年，黑暗模式已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)中的一種流行趨勢(shì)。

減少眼睛疲勞和疲勞（尤其是在光線(xiàn)昏暗的環(huán)境中）。
增強(qiáng)有視覺(jué)障礙或?qū)?qiáng)光敏感的用戶(hù)的使用體驗(yàn)。
為用戶(hù)提供了一個(gè)可自定義的選項(xiàng)，用戶(hù)可以根據(jù)自己的喜好或一天中的時(shí)間在光亮和黑暗模式之間切換。
使網(wǎng)站設(shè)計(jì)看起來(lái)更加現(xiàn)代時(shí)尚。

4)用戶(hù)畫(huà)像

4)User persona

用戶(hù)畫(huà)像1

用戶(hù)畫(huà)像2

5)良好用戶(hù)體驗(yàn)的關(guān)鍵產(chǎn)品目標(biāo)

5)Key Product Goals for Better User Experience

提供定制選項(xiàng)以適應(yīng)各種設(shè)計(jì)偏好。
用戶(hù)可以輕松安裝并激活插件。
對(duì)于喜歡深色界面的用戶(hù)，提高可讀性以減少眼睛疲勞。
通過(guò)優(yōu)化黑暗模式功能，提高網(wǎng)站性能和速度，實(shí)現(xiàn)高效加載和操作。
為尋求提高用戶(hù)參與度和留存率的網(wǎng)站所有者提供經(jīng)濟(jì)高效的解決方案。

6)競(jìng)品分析

6)Competitor features analysis

通過(guò)進(jìn)行對(duì)競(jìng)品的功能分析，我可以確定我的競(jìng)爭(zhēng)對(duì)手提供了什么以及他們?nèi)狈κ裁垂δ?，?lái)改進(jìn)自己產(chǎn)品，更好地滿(mǎn)足目標(biāo)受眾的需求。

點(diǎn)擊 check the live comparison 查看實(shí)時(shí)對(duì)比

7)通過(guò)感知地圖發(fā)現(xiàn)競(jìng)爭(zhēng)對(duì)手的市場(chǎng)定位

7)Discover Market Positioning for competitors by perceptual map.

我使用感知地圖來(lái)分析競(jìng)品和自身的市場(chǎng)定位。

SWOT Analysis

8)用戶(hù)流程（基于我觀(guān)察到的信息）

8)User flow based on the information I was noted

用戶(hù)流程是用戶(hù)完成特定任務(wù)所采取的一系列步驟——從最初的進(jìn)入點(diǎn)到最終目標(biāo)。

根據(jù)開(kāi)發(fā)團(tuán)隊(duì)的信息處理用戶(hù)流程

2.發(fā)散和草圖階段

2.Ideation and Sketching Phase

從草圖開(kāi)始已經(jīng)成為我設(shè)計(jì)過(guò)程中不可或缺的一部分。在最終的用戶(hù)界面之前，我總是嘗試使用一個(gè)粗略的草圖。

粗略草圖用于插件內(nèi)部和實(shí)時(shí)編輯器小工具的高保真線(xiàn)框

插件屏幕內(nèi)部線(xiàn)框

實(shí)時(shí)編輯器組件的線(xiàn)框圖

為了驗(yàn)證設(shè)計(jì)決策并快速迭代設(shè)計(jì)思想，我從創(chuàng)建高保真模型開(kāi)始，然后再轉(zhuǎn)到最終的視覺(jué)效果。此外，我生成了一個(gè)線(xiàn)框流程圖，以便與開(kāi)發(fā)團(tuán)隊(duì)有效地交流設(shè)計(jì)思想。

線(xiàn)框流程圖

1)進(jìn)入U(xiǎn)I設(shè)計(jì)階段

1)Now time to move part of UI Design

為什么我選擇使用矢車(chē)菊藍(lán)（#675ED5）作為品牌色？

視覺(jué)效果：矢車(chē)菊藍(lán)是一種有活力的、吸引眼球的顏色，可以讓用戶(hù)更好的關(guān)注重要組件。
可信任的：這種顏色給人一種可靠的、可信任的安全感；對(duì)于商業(yè)和組織來(lái)說(shuō)，該顏色傳遞可依賴(lài)性。
性別中立：該顏色男性氣質(zhì)和女性氣質(zhì)適中，適合多樣的用戶(hù)群體。
情感化：該顏色給人一種寧?kù)o的感覺(jué)。
可兼容的：該顏色從色相上和其他顏色都可以很好的搭配。

為什么我選擇使用 Manrope 字體？

可讀性：簡(jiǎn)潔，現(xiàn)代的風(fēng)格，即使在較小的字號(hào)下也可清晰閱讀。
多樣性：有多種字重和風(fēng)格，與設(shè)計(jì)風(fēng)格保持一致性。
整合性：該字體很容易在wordpress和saas產(chǎn)品上使用，不同設(shè)備和平臺(tái)都可兼容。
網(wǎng)頁(yè)流暢度和設(shè)計(jì)自由度：該字體可優(yōu)化網(wǎng)頁(yè)的運(yùn)行速度，同時(shí)有對(duì)應(yīng)的標(biāo)題，正文和按鈕字體。

插件設(shè)置

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

我為實(shí)時(shí)編輯組件設(shè)計(jì)了淺色和深色變體，適用于安裝高級(jí)版本插件的前端版本。

設(shè)計(jì)系統(tǒng)和組件庫(kù)

2)與營(yíng)銷(xiāo)團(tuán)隊(duì)分享社會(huì)推廣理念

2)Sharing Social promotional Ideas with the Marketing team

作為一名產(chǎn)品設(shè)計(jì)師，我與營(yíng)銷(xiāo)團(tuán)隊(duì)合作創(chuàng)建了一個(gè)表情（meme），即如何在社交媒體上營(yíng)銷(xiāo)我們的插件的圖像，它可以影響用戶(hù)心智模型。

3)關(guān)鍵業(yè)務(wù)挑戰(zhàn)

3)key business challenges

確保能夠?yàn)榕c功能相關(guān)的任何技術(shù)問(wèn)題提供足夠的支持和資源。
制定整合和優(yōu)化的綜合戰(zhàn)略。
制定和實(shí)施有效的定價(jià)和貨幣化戰(zhàn)略。
有效的營(yíng)銷(xiāo)和推廣黑暗模式的特點(diǎn)去吸引目標(biāo)受眾。

4)成功道路上的挑戰(zhàn)

4)Challenge to succeed

為黑暗模式插件實(shí)施有效的定價(jià)和貨幣化策略，這需要全面了解目標(biāo)受眾及其付費(fèi)意愿，以及市場(chǎng)趨勢(shì)和競(jìng)品定價(jià)。同時(shí)，也需要了解如何優(yōu)化該功能以獲得最大性能和可用性。

5))成果展示

5)Now time to show our product on the website

這是我們的登錄頁(yè)以及其他頁(yè)面，用戶(hù)可以在這里Dracula Dark Mode: Revolutionary Dark Mode Plugin for WordPress了解我們的功能并采取行動(dòng)購(gòu)買(mǎi)高級(jí)版本。

德古拉黑暗模式WordPress插件網(wǎng)站

ORG的屏幕截圖

營(yíng)銷(xiāo)活動(dòng)的電子郵件模板

6)社交橫幅和營(yíng)銷(xiāo)資產(chǎn)

6) Social Banner & Marketing asset

這是成功的數(shù)字營(yíng)銷(xiāo)活動(dòng)的重要組成部分。它們包括各種視覺(jué)元素，如圖像、視頻和圖形，旨在吸引目標(biāo)受眾的注意力并有效傳達(dá)我們品牌的信息。

Youtube視頻縮略圖

3.發(fā)布和結(jié)果

3.Launch and results

德古拉黑暗模式在WordPress插件目錄上的推出是一個(gè)巨大的成功。在推出后的短短幾個(gè)月內(nèi)，該插件就被超過(guò) 460 名用戶(hù)下載，并獲得了令人印象深刻的五星肯定。僅在 1.0.0 版本上，它就有 70 多個(gè)用戶(hù)安裝。

檢查WordPress目錄中的插件

我們的目標(biāo)始終是獲得盡可能多的用戶(hù)。然而更重要的是，增長(zhǎng)并不總是在一夜之間發(fā)生的。隨著時(shí)間的推移，產(chǎn)品的下載量和用戶(hù)會(huì)緩慢而穩(wěn)定地增加。

截至2023年3月27日用戶(hù)激活和評(píng)分的統(tǒng)計(jì)數(shù)據(jù)

我們很高興看到我們的競(jìng)爭(zhēng)對(duì)手購(gòu)買(mǎi)了我們插件的高級(jí)版本，并留下了積極的五星評(píng)價(jià)，稱(chēng)贊了用戶(hù)體驗(yàn)。

您可以查看實(shí)時(shí)預(yù)覽：

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

4.未來(lái)改進(jìn)

4.Future Improvements

提高與其他插件的兼容性：未來(lái)需要改進(jìn)的一個(gè)領(lǐng)域是提高德古拉黑暗模式插件與其他WordPress插件的兼容性。這有助于增強(qiáng)用戶(hù)體驗(yàn)，降低沖突并規(guī)避技術(shù)風(fēng)險(xiǎn)。
增強(qiáng)自定義選項(xiàng)：通過(guò)提供更多的自定義選項(xiàng)，用戶(hù)可以根據(jù)自己的特定需求和偏好定制插件，從而增加價(jià)值和吸引力。
擴(kuò)展平臺(tái)支持：目前，德古拉黑暗模式插件僅適用于WordPress。未來(lái)將支持?jǐn)U展到其他平臺(tái)，有助于增加插件的覆蓋范圍并吸引更廣泛的受眾。

5.經(jīng)驗(yàn)教訓(xùn)

5.Lessons Learned

在確定最終設(shè)計(jì)之前，始終要考慮市場(chǎng)價(jià)值和競(jìng)爭(zhēng)，以確保其在市場(chǎng)上脫穎而出。
在沒(méi)有進(jìn)行徹底研究的情況下，千萬(wàn)不要認(rèn)為完全了解用戶(hù)的需求和痛點(diǎn)。
在向公眾發(fā)布之前對(duì)插件進(jìn)行廣泛測(cè)試，有助于盡早發(fā)現(xiàn)和解決潛在問(wèn)題，改善用戶(hù)體驗(yàn)，降低負(fù)面反饋的可能性。
有效的營(yíng)銷(xiāo)和推廣對(duì)任何插件的成功都至關(guān)重要。
通過(guò)營(yíng)銷(xiāo)策略和利用一系列渠道和策略，開(kāi)發(fā)人員可以接觸到更廣泛的受眾。

認(rèn)識(shí)一下我們才華橫溢的團(tuán)隊(duì)，他們?cè)谶@個(gè)項(xiàng)目上與我密切合作。

我們的團(tuán)隊(duì)由高技能人員組成，他們熱衷于創(chuàng)造卓越的產(chǎn)品。每個(gè)成員都為項(xiàng)目帶來(lái)了獨(dú)特的優(yōu)勢(shì)和專(zhuān)業(yè)知識(shí)，從用戶(hù)研究和設(shè)計(jì)到開(kāi)發(fā)和測(cè)試。我們相信協(xié)作方法，每個(gè)人的想法和反饋都會(huì)受到重視，并融入到最終產(chǎn)品中。

Israil Ahmed Prince ( Sr. Software Engineer )

Akash Ahmed ( Frontend Developer )

Ashikur Rahman -Me- ( Product Design lead )

Naziur Rahaman ( Digital Marketing Executive )

感謝您花時(shí)間閱讀我的案例研究。我希望你能發(fā)現(xiàn)它提供了信息，有助于深入了解我們的項(xiàng)目和我們用來(lái)開(kāi)發(fā)德古拉黑暗模式插件的過(guò)程。如果你有任何問(wèn)題或意見(jiàn)，請(qǐng)隨時(shí)聯(lián)系我。我感謝你的關(guān)心和支持。

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

作者：Ashikur Rahman

譯者：戴一泓

審核：李澤慧

編輯：林庭婷

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

往期精選文章：

添加小助手微信，備注「社群」，即可加入讀者群。

UX/UI設(shè)計(jì)案例研究：適用于WordPress網(wǎng)站用戶(hù)的德古拉-黑暗模式插件

本文共 6667 字，預(yù)計(jì)閱讀 18 分鐘 TCC 情報(bào)局的 第 244 篇 干貨分享 2024 年的 第 24 篇