丁香園 App 是丁香園面向醫生、醫學生與醫療行業從業者推出的一款綜合性應用。專注于通過病例討論、話題互動的形式開展深度的社區交流。從專業技能、醫學考試、職稱晉升等方面真正幫助用戶成長。

發現問題

在丁香園 APP 多年來不斷的更新迭代中，積累很多亟待解決的問題，本次升級產品經理、交互設計師、視覺設計師一起對目前的產品存在的問題進行了整理歸納：

• 界面內容顯示過于密集與混雜、重點不夠突出。
• UI 整體風格過時而且不規范、主色暗沉、輔色繁多，沒有統一的設計語言。
• App 丁香園的品牌基因不夠突顯、關聯性不強。
• 互動性內容與消費性內容呈現沒有區分，體驗沒有側重。
• 論壇與話題隱藏過深，發貼流程復雜，不利于內容生產。
• 公開課作為移植模塊，風格與丁香園 App 有偏差。

問題總結

升級方向

針對發現的問題，我們經過多次多方討論后，最終確認了升級方向：品牌、輕量，專業。期望本次的升級不僅可以解決目前存在的問題，還可以讓產品在體驗上有一次大的提升。

一、打造并滲透APP品牌基因

1. 品牌色

年初，丁香園 VI 進行了整體升級，新的品牌紫色更加明亮，本次升級的顏色和新的品牌色保持一致，讓新的品牌在產品得以延續。明亮的色彩更吸引用戶注意力，也會顯得輕快，同時，我們重新定義了輔色，讓產品整體更加統一輕量。

2. 品牌紋理

新的品牌增設了品牌紋理圖形，本次升級在 App 中延續使用了品牌紋理，讓品牌元素在產品中得以體現，不斷加大丁香園的品牌滲透，加深用戶對丁香園品牌的感知度。

3. 圖標品牌化、統一化

舊版的 App 中，圖標的使用較雜亂，裝飾性圖標和交互性圖標在不同的模塊中風格各異，形狀不一。本次升級中，我們對所有圖標都進行了重設計，對圖標的風格進行了再探索，確定了統一的使用規范。

為延續品牌感，在圖標設計前，我們對丁香園 Logo 風格進行分析研究，提取了 Logo 中的特有的風格元素（色彩漸變、明暗對比），在圖標設計中融合品牌基因。

TabBar，功能入口，列表中使用面性圖標，利用同色系漸變，同色系色差，統一端點和圓角等創作細節，統一設計不同場景下的圖標。

標題欄，工具欄中交互性圖標設計，使用高識別度且拓展性較好的線性圖標，統一粗細，圓頭端點，轉角半徑。

4. 情感化插畫

為減少用戶的負面情緒，增強品牌形象，加強用戶的參與感，使產品更加有趣味。本次升級對產品內插畫進行了整理和設計。

在情感化插畫的設計上，我們沿用與品牌圖標一樣的創作細節，使用同色系漸變，色彩變化，明暗對比等進行設計，讓圖標和插圖有較強的統一性。

△ 引導頁的插畫

△ 無網絡、無結果、未登錄，空白頁面，彈窗等場景下的系列漸變插畫

二、新的設計語言，統一視覺規范

1. 輕量化設計語言

對丁香園 App 表現層進行了整體梳理，新的設計盡可能的做減法，去掉不需要的修飾元素，盡可能凸顯內容本身。

恰到好處的留白

通過大標題進行不同模塊的內容分隔。導航欄，標題欄都采用了與頁面背景一樣的純白色。去掉學術圈卡片大色塊的分隔條，使用留白和分割線來區分信息層級。對各個模塊分隔間距、卡片間距、列表間距、內容詳情閱讀排版間距等都適當進行增加，增加視覺的呼吸感，減輕瀏覽大量內容時的壓迫感，讓用戶閱讀信息時，更加愉悅。

輕盈的陰影

增設帶有投影效果的卡片，給需要突出的內容固定的樣式容器。另外，Tabs，工具欄，導航欄中也使用了陰影效果，當頁面滾動時出現，增加頁面層次，方便用戶瀏覽信息。

2. 統一視覺規范

完成主框架與風格設定以后，我們對頁面常用的基礎控件進行了組件化，包括標題欄，導航欄、按鈕、列表、輸入框、彈窗、Android 差異化等等，形成了一整套丁香園移動端產品的設計語言，并可以靈適運用到丁香園的各個業務需求中，完成統一的視覺體驗，也給到用戶更加統一的品牌認知。

三、產品架構，信息呈現專業化

1. 精簡產品架構

• 減少學術圈過多定制化分類，突出用戶高頻使用的重點分類，讓信息的呈現與用戶的瀏覽更加高效。
• 加強內容生產入口的呈現與關聯性，將底部導航的全局發貼按鈕移到學術圈的右下角，減少用戶的探索與無效點擊。
• 優化用戶生產內容的整體流程，去掉了點擊發貼按鈕后選擇發病例（專業人士可見）與討論彈窗，降低用戶的理解成本，提升轉化率。

2. 區分信息呈現

丁香園作為移動端的內容互動與分發平臺，將內容信息進行區分處理，除了將學術圈首頁的卡片樣式進行模塊化處理，我們也按內容場景排布信息優先與參與的信息（討論與評論）進行區分化處理，突出不同的功能使用。

貼子內容頁，強調交流與互動，有時候優質的回貼內容也是整個內容頁的精彩部分，需要盡可能保持與主貼一樣的顯示權重。資訊內容頁，側重消費與傳播，需要加強分享與突出主題內容。

3. 信息呈現的規范化與延展性

丁香園學術圈的卡片作為承載論壇交流與內容分發的最重要容器，也我們這些升級的重點之一，相對于舊版，我們調大了頭像，更加突顯學術交流的氛圍，調換了大圖與標題的位置，讓文字內容的瀏覽更具連貫性，同時減少了摘要的行數，在瀏覽、點贊與評論的參數展示上用圖標替代了文案，縮小了標題的字號，放大了摘要的字號。同時也增加頭像、圖片、標題、摘要與參數之間間距，讓整個卡片的視覺呼吸感更強，也可以讓用戶瀏覽卡片內容時更加高效與聚焦。

我們同時對頭像、圖片、標題、摘要與參數五個部分進行模塊化處理，通過不同模塊的組合與替換，可以得不同業務需求的卡片類型，除了可以承載不同的內容形態，可以在學術圈，編輯推薦、病例集、話題與論壇版塊等模塊同時延續使用，給用戶更加一致的瀏覽體驗。

結語

丁香園 8.0 版的全新改版升級，對我們移動組來說有非常多的收獲，不僅從多角度看待和思考一個產品的改進優化，而且也體現了我們團隊的協作與高度配合，每一位成員都各有所長地在這個項目中參與與付出。從最初設計方向的制定、概念設計的雛形、到后續設計的量產與細節的打磨，最終大家團結一致與積極推進完成了所有設計的定稿。

同時，這次改版也得到產品同事與交互同事的大力支持。全新版本的實現對開發來說也是一次挑戰，因為工期有限，雖然我們盡力做到一些老舊頁面的改造只是基于 UI 的調整，但更多交互細節的加入也帶給了他們很多的實現成本，也非常感謝他們的配合與支持，努力去與我們實現上線版本做到最接近設計的還原。

雖然新版本的發布，細節上還有很多不足，但我們會在后續進行持續優化完善。此次升級其實還有很多想說，因為篇幅無法詳盡，我們會陸續有針對性做一些更為詳細的設計分享。這次改版為我們后續其他產品的優化與升級也提供了全新的思路，是一次嘗試，也是一次實戰與實踐，積累的寶貴經驗也會幫助我們在以后設計之路更好地前行。

丁香園 8.0 全新界面部分設計展示：

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

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

• 《看似簡單的喜馬拉雅FM主播等級體系，是如何做改版設計的？》
• 《上億人使用的唱吧APP V8.6 改版設計過程揭秘》
• 《上億人使用的泛娛樂微信店，是如何做改版設計的？》