文章詳細講述了用藥助手9.0升級改版項目從前期準備到設計執行，設計驗證的整個過程。

一、項目背景

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

用藥助手擁有大量數據，數據查詢和展示是用藥助手體驗設計的重點和難點。舊版本存在樣式不統一，瀏覽體驗不佳，交互不一致等易用性問題亟待解決。

品牌設計方面，產品沒有形成完整的視覺識別體系，存在顏色，圖形等使用無序的情況。

由此，我們確認了我們的升級方向：強化定位、設計增值。

二、關鍵目標

根據升級方向，我們確認了本次的具體關鍵目標：

• 增加功能模塊和內容曝光，提升用戶自發的內容輸出和互動，從而提升活躍和產品認知。
• 解決目前存在的不統一，不一致等易用性問題，讓產品操作效率更高，瀏覽更加舒適。
• 為用藥助手升級視覺體系，包括Logo，顏色，圖標，紋理，插圖，組件庫等。

三、升級方案

全面升級整個產品是個龐大的工程，我們按照功能模塊，梳理了產品所有界面。從業務方向，易用性，品牌感出發，深入到改版方案的方方面面。

1. 強化產品認知，提升易用性

我們針對用戶常用關鍵性頁面，借助數據分析，幫助決策設計方案。用藥助手是一款成熟的工具型產品，大部分用戶已養成使用習慣，我們需要盡量在不影響原有用戶的使用習慣的基礎上，進行優化改進，幫助強化產品認知，提升易用性。因篇幅有限，將選擇部分頁面舉例說明。

例1：首頁優化

首頁模塊分為：主搜索，功能區，熱門推薦，TabBar。

主搜索：根據對以往頁面PV，UV數據發現，絕大部分的用戶會在首頁使用主搜索。主搜索一直以來都是用戶最常使用的絕對優勢功能，因此首頁需在不改變主搜索的主導位置的情況下，進行優化。

功能區：功能區承載了用藥助手提供給用戶的更加多樣化的各類數據服務，幫助醫藥工作者更好的進行臨床決策，我們加高了區域的高度，并重設計了圖標，希望以此提升用戶對功能區的關注度。功能區圖標保持原有的位置，色調，避免影響用戶的查找效率。

熱門推薦：區域名稱在舊版中為「用藥經驗」，其實，模塊中包含了專題，問答，經驗，學術等多種文章類型。因此，在新版中，我們更改模塊名稱為「熱門推薦」，并且對展示樣式進行了優化。考慮到文章標題長度，閱讀流暢度，以及圖文，收藏量，分享量的呈現更有利于吸引點擊，熱門推薦模塊改成統一的圖文列表樣式進行展現。

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

例2：用藥指南改版

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

標題和搜索：根據分析觀察以往數據發現，用戶習慣使用搜索查找指南，因此保持搜索的主導位置。新版增加了空間利用率，并在主標題旁邊加入簡明扼要的功能介紹，幫助用戶理解功能點。

最新指南：舊版最新指南使用了彩色卡片，橫向滑動形式展示，不利于內容展示，閱讀，查找。新版設計梳理并統一了整個產品中指南列表樣式，方便用戶閱讀查找。

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

2. 品牌設計

品牌色

品牌設計之初，我們首先升級了品牌色，我們從場景提取色調，結合情緒板，最終提煉并定義了我們的品牌色「皇室藍」。新的品牌色相對之前的顏色，更加明快，會給人「新」的感覺，并且用戶通過相關場景的聯想，很容易與品牌色建立聯系，加深品牌印象。

品牌標志

用藥助手從開始運營至今，一直采用 「藥」字形結合丁香園花瓣元素，識別性較強，和丁香園品牌延續較好。我們繼承了這個設計點，在此基礎上優化升級。從產品出發，提煉關鍵字 「端正」「有力」作為設計方向，對字體進行了重設計。

APP 品牌基因

用藥助手擁有大量的藥品數據，我們聯想到藥物常見的分子結構-苯環，由此提取了「六邊形」這一基礎圖形進行延伸，并結合 「端正」「有力」構建我們的視覺語言。

用藥助手產品頁面中，到處可以看到 「六邊形」這個視覺語言的融入，從圖標，按鈕，組件，背景紋理，插圖等，都采用統一的，成體系的視覺表達。

設計規范

在項目全面開始設計之前，我們在丁香園 DUI 組件庫的基礎上，制定了擁有用藥助手品牌特色的組件庫，以此來保持設計過程中的統一性以及提高團隊之間的協作效率。

本次升級，很大一部分工作量是視覺和交互的調整，涉及到所有列表，搜索樣式，文章展示等 ，我們推動開發團隊在搭建頁面時，建立通用開發組件庫，從而提升后續的開發效率和走查效率。

設計驗證

對本次關鍵改動點進行數據埋點，驗證改版效果。如：用藥指南查詢效率對比，下載落地頁轉化率等。我們還在上線后做了產品滿意度調查，用于驗證改版效果接收用戶反饋。

例1：整體滿意度調查

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

△ 注：本次問卷調查共有4072人次參與，其中完成人次3206人。本次參與調研的用戶主要為有瀏覽用藥經驗文章習慣的用戶，且存在部分用戶選擇版本與其本身使用版本不符的情況。調研結果僅供團隊內部參考。

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

我們對比了8.5/9.0版本從臨床指南頁面點擊「科室」、「制定者」的平均時長。由數據結果易知，9.0版本相比8.5版本從臨床指南頁面點擊「科室」、「制定者」所花費的平均時長均明顯縮短。本次改版用戶查詢指南的效率明顯提高。

寫在最后

項目啟動到順利上線，得到了來自產品，設計，開發，測試，數據分析師同事的全力支持和配合。設計的全面升級，很多情況下是低優先級的需求類型，這次升級的順利推動，除了項目本身升級目標以外，還得益于團隊內部對產品體驗的重視和認同。

本次升級不盡完美，還有很多需要完善的地方，我們將關注改版后的反饋和數據，持續迭代，給醫藥工作人員提供更好的產品體驗。

歡迎關注作者的微信公眾號：「花廠設計招待所」

「優秀團隊的改版設計案例」

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