案例復(fù)盤！用藥助手9.0 升級(jí)背后的設(shè)計(jì)思路

文章詳細(xì)講述了用藥助手9.0升級(jí)改版項(xiàng)目從前期準(zhǔn)備到設(shè)計(jì)執(zhí)行，設(shè)計(jì)驗(yàn)證的整個(gè)過程。

一、項(xiàng)目背景

用藥助手運(yùn)行多年來，為超過千萬人次提供了藥品查詢服務(wù)，致力于幫助醫(yī)生實(shí)現(xiàn)「一站式解決臨床決策問題」。用藥助手已不僅僅是一款藥品查詢工具，我們希望用戶逐漸感知到產(chǎn)品的變化，提升用戶對(duì)用藥助手的認(rèn)知。

用藥助手擁有大量數(shù)據(jù)，數(shù)據(jù)查詢和展示是用藥助手體驗(yàn)設(shè)計(jì)的重點(diǎn)和難點(diǎn)。舊版本存在樣式不統(tǒng)一，瀏覽體驗(yàn)不佳，交互不一致等易用性問題亟待解決。

品牌設(shè)計(jì)方面，產(chǎn)品沒有形成完整的視覺識(shí)別體系，存在顏色，圖形等使用無序的情況。

由此，我們確認(rèn)了我們的升級(jí)方向：強(qiáng)化定位、設(shè)計(jì)增值。

二、關(guān)鍵目標(biāo)

根據(jù)升級(jí)方向，我們確認(rèn)了本次的具體關(guān)鍵目標(biāo)：

• 增加功能模塊和內(nèi)容曝光，提升用戶自發(fā)的內(nèi)容輸出和互動(dòng)，從而提升活躍和產(chǎn)品認(rèn)知。
• 解決目前存在的不統(tǒng)一，不一致等易用性問題，讓產(chǎn)品操作效率更高，瀏覽更加舒適。
• 為用藥助手升級(jí)視覺體系，包括Logo，顏色，圖標(biāo)，紋理，插圖，組件庫(kù)等。

三、升級(jí)方案

全面升級(jí)整個(gè)產(chǎn)品是個(gè)龐大的工程，我們按照功能模塊，梳理了產(chǎn)品所有界面。從業(yè)務(wù)方向，易用性，品牌感出發(fā)，深入到改版方案的方方面面。

1. 強(qiáng)化產(chǎn)品認(rèn)知，提升易用性

我們針對(duì)用戶常用關(guān)鍵性頁(yè)面，借助數(shù)據(jù)分析，幫助決策設(shè)計(jì)方案。用藥助手是一款成熟的工具型產(chǎn)品，大部分用戶已養(yǎng)成使用習(xí)慣，我們需要盡量在不影響原有用戶的使用習(xí)慣的基礎(chǔ)上，進(jìn)行優(yōu)化改進(jìn)，幫助強(qiáng)化產(chǎn)品認(rèn)知，提升易用性。因篇幅有限，將選擇部分頁(yè)面舉例說明。

例1：首頁(yè)優(yōu)化

首頁(yè)模塊分為：主搜索，功能區(qū)，熱門推薦，TabBar。

主搜索：根據(jù)對(duì)以往頁(yè)面PV，UV數(shù)據(jù)發(fā)現(xiàn)，絕大部分的用戶會(huì)在首頁(yè)使用主搜索。主搜索一直以來都是用戶最常使用的絕對(duì)優(yōu)勢(shì)功能，因此首頁(yè)需在不改變主搜索的主導(dǎo)位置的情況下，進(jìn)行優(yōu)化。

功能區(qū)：功能區(qū)承載了用藥助手提供給用戶的更加多樣化的各類數(shù)據(jù)服務(wù)，幫助醫(yī)藥工作者更好的進(jìn)行臨床決策，我們加高了區(qū)域的高度，并重設(shè)計(jì)了圖標(biāo)，希望以此提升用戶對(duì)功能區(qū)的關(guān)注度。功能區(qū)圖標(biāo)保持原有的位置，色調(diào)，避免影響用戶的查找效率。

熱門推薦：區(qū)域名稱在舊版中為「用藥經(jīng)驗(yàn)」，其實(shí)，模塊中包含了專題，問答，經(jīng)驗(yàn)，學(xué)術(shù)等多種文章類型。因此，在新版中，我們更改模塊名稱為「熱門推薦」，并且對(duì)展示樣式進(jìn)行了優(yōu)化。考慮到文章標(biāo)題長(zhǎng)度，閱讀流暢度，以及圖文，收藏量，分享量的呈現(xiàn)更有利于吸引點(diǎn)擊，熱門推薦模塊改成統(tǒng)一的圖文列表樣式進(jìn)行展現(xiàn)。

TabBar：新版本我們交換了「用藥分類」「用藥指南」的位置。用藥助手擁有5,000+權(quán)威指南，用藥指南在現(xiàn)階段是比用藥分類更加需要突出的功能模塊，希望通過位置的調(diào)整，增加用藥指南的使用率。

例2：用藥指南改版

用藥指南模塊分為：標(biāo)題和搜索，最新指南，科室分類查找，制定者分類查找。

標(biāo)題和搜索：根據(jù)分析觀察以往數(shù)據(jù)發(fā)現(xiàn)，用戶習(xí)慣使用搜索查找指南，因此保持搜索的主導(dǎo)位置。新版增加了空間利用率，并在主標(biāo)題旁邊加入簡(jiǎn)明扼要的功能介紹，幫助用戶理解功能點(diǎn)。

最新指南：舊版最新指南使用了彩色卡片，橫向滑動(dòng)形式展示，不利于內(nèi)容展示，閱讀，查找。新版設(shè)計(jì)梳理并統(tǒng)一了整個(gè)產(chǎn)品中指南列表樣式，方便用戶閱讀查找。

科室分類，制定者分類查詢：新版設(shè)計(jì)重新規(guī)劃了模塊位置，把搜索，科室分類查詢，制定者分類查詢放在同一區(qū)域，方便用戶從不同維度快速找到需要的指南。

2. 品牌設(shè)計(jì)

品牌色

品牌設(shè)計(jì)之初，我們首先升級(jí)了品牌色，我們從場(chǎng)景提取色調(diào)，結(jié)合情緒板，最終提煉并定義了我們的品牌色「皇室藍(lán)」。新的品牌色相對(duì)之前的顏色，更加明快，會(huì)給人「新」的感覺，并且用戶通過相關(guān)場(chǎng)景的聯(lián)想，很容易與品牌色建立聯(lián)系，加深品牌印象。

品牌標(biāo)志

用藥助手從開始運(yùn)營(yíng)至今，一直采用 「藥」字形結(jié)合丁香園花瓣元素，識(shí)別性較強(qiáng)，和丁香園品牌延續(xù)較好。我們繼承了這個(gè)設(shè)計(jì)點(diǎn)，在此基礎(chǔ)上優(yōu)化升級(jí)。從產(chǎn)品出發(fā)，提煉關(guān)鍵字 「端正」「有力」作為設(shè)計(jì)方向，對(duì)字體進(jìn)行了重設(shè)計(jì)。

APP 品牌基因

用藥助手擁有大量的藥品數(shù)據(jù)，我們聯(lián)想到藥物常見的分子結(jié)構(gòu)-苯環(huán)，由此提取了「六邊形」這一基礎(chǔ)圖形進(jìn)行延伸，并結(jié)合 「端正」「有力」構(gòu)建我們的視覺語言。

用藥助手產(chǎn)品頁(yè)面中，到處可以看到 「六邊形」這個(gè)視覺語言的融入，從圖標(biāo)，按鈕，組件，背景紋理，插圖等，都采用統(tǒng)一的，成體系的視覺表達(dá)。

設(shè)計(jì)規(guī)范

在項(xiàng)目全面開始設(shè)計(jì)之前，我們?cè)诙∠銏@ DUI 組件庫(kù)的基礎(chǔ)上，制定了擁有用藥助手品牌特色的組件庫(kù)，以此來保持設(shè)計(jì)過程中的統(tǒng)一性以及提高團(tuán)隊(duì)之間的協(xié)作效率。

本次升級(jí)，很大一部分工作量是視覺和交互的調(diào)整，涉及到所有列表，搜索樣式，文章展示等 ，我們推動(dòng)開發(fā)團(tuán)隊(duì)在搭建頁(yè)面時(shí)，建立通用開發(fā)組件庫(kù)，從而提升后續(xù)的開發(fā)效率和走查效率。

設(shè)計(jì)驗(yàn)證

對(duì)本次關(guān)鍵改動(dòng)點(diǎn)進(jìn)行數(shù)據(jù)埋點(diǎn)，驗(yàn)證改版效果。如：用藥指南查詢效率對(duì)比，下載落地頁(yè)轉(zhuǎn)化率等。我們還在上線后做了產(chǎn)品滿意度調(diào)查，用于驗(yàn)證改版效果接收用戶反饋。

例1：整體滿意度調(diào)查

我們通過調(diào)查問卷的方式，調(diào)研用戶對(duì)用藥助手整體滿意度評(píng)分，量表為1-5分，用戶對(duì)舊版本整體滿意度均分為4.26分，對(duì)新版本的整體滿意度均分為4.35分；用戶對(duì)舊版本打5分比例為34.89%，新版本為42.24% ，結(jié)合其他反饋，總體來說，用戶對(duì)新版本的滿意度較高且相比于舊版本有所提升。

△ 注：本次問卷調(diào)查共有4072人次參與，其中完成人次3206人。本次參與調(diào)研的用戶主要為有瀏覽用藥經(jīng)驗(yàn)文章習(xí)慣的用戶，且存在部分用戶選擇版本與其本身使用版本不符的情況。調(diào)研結(jié)果僅供團(tuán)隊(duì)內(nèi)部參考。

例2：用藥指南改版前后查詢效率對(duì)比

我們對(duì)比了8.5/9.0版本從臨床指南頁(yè)面點(diǎn)擊「科室」、「制定者」的平均時(shí)長(zhǎng)。由數(shù)據(jù)結(jié)果易知，9.0版本相比8.5版本從臨床指南頁(yè)面點(diǎn)擊「科室」、「制定者」所花費(fèi)的平均時(shí)長(zhǎng)均明顯縮短。本次改版用戶查詢指南的效率明顯提高。

寫在最后

項(xiàng)目啟動(dòng)到順利上線，得到了來自產(chǎn)品，設(shè)計(jì)，開發(fā)，測(cè)試，數(shù)據(jù)分析師同事的全力支持和配合。設(shè)計(jì)的全面升級(jí)，很多情況下是低優(yōu)先級(jí)的需求類型，這次升級(jí)的順利推動(dòng)，除了項(xiàng)目本身升級(jí)目標(biāo)以外，還得益于團(tuán)隊(duì)內(nèi)部對(duì)產(chǎn)品體驗(yàn)的重視和認(rèn)同。

本次升級(jí)不盡完美，還有很多需要完善的地方，我們將關(guān)注改版后的反饋和數(shù)據(jù)，持續(xù)迭代，給醫(yī)藥工作人員提供更好的產(chǎn)品體驗(yàn)。

歡迎關(guān)注作者的微信公眾號(hào)：「花廠設(shè)計(jì)招待所」

「優(yōu)秀團(tuán)隊(duì)的改版設(shè)計(jì)案例」

• 《丁香園 8.0 全新改版升級(jí)，設(shè)計(jì)背后的故事》
• 《看似簡(jiǎn)單的喜馬拉雅FM主播等級(jí)體系，是如何做改版設(shè)計(jì)的？》
• 《上億人使用的唱吧APP V8.6 改版設(shè)計(jì)過程揭秘》