丁香園 App 是丁香園面向醫(yī)生、醫(yī)學(xué)生與醫(yī)療行業(yè)從業(yè)者推出的一款綜合性應(yīng)用。專注于通過(guò)病例討論、話題互動(dòng)的形式開(kāi)展深度的社區(qū)交流。從專業(yè)技能、醫(yī)學(xué)考試、職稱晉升等方面真正幫助用戶成長(zhǎng)。

發(fā)現(xiàn)問(wèn)題

在丁香園 APP 多年來(lái)不斷的更新迭代中，積累很多亟待解決的問(wèn)題，本次升級(jí)產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師一起對(duì)目前的產(chǎn)品存在的問(wèn)題進(jìn)行了整理歸納：

• 界面內(nèi)容顯示過(guò)于密集與混雜、重點(diǎn)不夠突出。
• UI 整體風(fēng)格過(guò)時(shí)而且不規(guī)范、主色暗沉、輔色繁多，沒(méi)有統(tǒng)一的設(shè)計(jì)語(yǔ)言。
• App 丁香園的品牌基因不夠突顯、關(guān)聯(lián)性不強(qiáng)。
• 互動(dòng)性內(nèi)容與消費(fèi)性內(nèi)容呈現(xiàn)沒(méi)有區(qū)分，體驗(yàn)沒(méi)有側(cè)重。
• 論壇與話題隱藏過(guò)深，發(fā)貼流程復(fù)雜，不利于內(nèi)容生產(chǎn)。
• 公開(kāi)課作為移植模塊，風(fēng)格與丁香園 App 有偏差。

問(wèn)題總結(jié)

升級(jí)方向

針對(duì)發(fā)現(xiàn)的問(wèn)題，我們經(jīng)過(guò)多次多方討論后，最終確認(rèn)了升級(jí)方向：品牌、輕量，專業(yè)。期望本次的升級(jí)不僅可以解決目前存在的問(wèn)題，還可以讓產(chǎn)品在體驗(yàn)上有一次大的提升。

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

1. 品牌色

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

2. 品牌紋理

新的品牌增設(shè)了品牌紋理圖形，本次升級(jí)在 App 中延續(xù)使用了品牌紋理，讓品牌元素在產(chǎn)品中得以體現(xiàn)，不斷加大丁香園的品牌滲透，加深用戶對(duì)丁香園品牌的感知度。

3. 圖標(biāo)品牌化、統(tǒng)一化

舊版的 App 中，圖標(biāo)的使用較雜亂，裝飾性圖標(biāo)和交互性圖標(biāo)在不同的模塊中風(fēng)格各異，形狀不一。本次升級(jí)中，我們對(duì)所有圖標(biāo)都進(jìn)行了重設(shè)計(jì)，對(duì)圖標(biāo)的風(fēng)格進(jìn)行了再探索，確定了統(tǒng)一的使用規(guī)范。

為延續(xù)品牌感，在圖標(biāo)設(shè)計(jì)前，我們對(duì)丁香園 Logo 風(fēng)格進(jìn)行分析研究，提取了 Logo 中的特有的風(fēng)格元素（色彩漸變、明暗對(duì)比），在圖標(biāo)設(shè)計(jì)中融合品牌基因。

TabBar，功能入口，列表中使用面性圖標(biāo)，利用同色系漸變，同色系色差，統(tǒng)一端點(diǎn)和圓角等創(chuàng)作細(xì)節(jié)，統(tǒng)一設(shè)計(jì)不同場(chǎng)景下的圖標(biāo)。

標(biāo)題欄，工具欄中交互性圖標(biāo)設(shè)計(jì)，使用高識(shí)別度且拓展性較好的線性圖標(biāo)，統(tǒng)一粗細(xì)，圓頭端點(diǎn)，轉(zhuǎn)角半徑。

4. 情感化插畫(huà)

為減少用戶的負(fù)面情緒，增強(qiáng)品牌形象，加強(qiáng)用戶的參與感，使產(chǎn)品更加有趣味。本次升級(jí)對(duì)產(chǎn)品內(nèi)插畫(huà)進(jìn)行了整理和設(shè)計(jì)。

在情感化插畫(huà)的設(shè)計(jì)上，我們沿用與品牌圖標(biāo)一樣的創(chuàng)作細(xì)節(jié)，使用同色系漸變，色彩變化，明暗對(duì)比等進(jìn)行設(shè)計(jì)，讓圖標(biāo)和插圖有較強(qiáng)的統(tǒng)一性。

△ 引導(dǎo)頁(yè)的插畫(huà)

△ 無(wú)網(wǎng)絡(luò)、無(wú)結(jié)果、未登錄，空白頁(yè)面，彈窗等場(chǎng)景下的系列漸變插畫(huà)

二、新的設(shè)計(jì)語(yǔ)言，統(tǒng)一視覺(jué)規(guī)范

1. 輕量化設(shè)計(jì)語(yǔ)言

對(duì)丁香園 App 表現(xiàn)層進(jìn)行了整體梳理，新的設(shè)計(jì)盡可能的做減法，去掉不需要的修飾元素，盡可能凸顯內(nèi)容本身。

恰到好處的留白

通過(guò)大標(biāo)題進(jìn)行不同模塊的內(nèi)容分隔。導(dǎo)航欄，標(biāo)題欄都采用了與頁(yè)面背景一樣的純白色。去掉學(xué)術(shù)圈卡片大色塊的分隔條，使用留白和分割線來(lái)區(qū)分信息層級(jí)。對(duì)各個(gè)模塊分隔間距、卡片間距、列表間距、內(nèi)容詳情閱讀排版間距等都適當(dāng)進(jìn)行增加，增加視覺(jué)的呼吸感，減輕瀏覽大量?jī)?nèi)容時(shí)的壓迫感，讓用戶閱讀信息時(shí)，更加愉悅。

輕盈的陰影

增設(shè)帶有投影效果的卡片，給需要突出的內(nèi)容固定的樣式容器。另外，Tabs，工具欄，導(dǎo)航欄中也使用了陰影效果，當(dāng)頁(yè)面滾動(dòng)時(shí)出現(xiàn)，增加頁(yè)面層次，方便用戶瀏覽信息。

2. 統(tǒng)一視覺(jué)規(guī)范

完成主框架與風(fēng)格設(shè)定以后，我們對(duì)頁(yè)面常用的基礎(chǔ)控件進(jìn)行了組件化，包括標(biāo)題欄，導(dǎo)航欄、按鈕、列表、輸入框、彈窗、Android 差異化等等，形成了一整套丁香園移動(dòng)端產(chǎn)品的設(shè)計(jì)語(yǔ)言，并可以靈適運(yùn)用到丁香園的各個(gè)業(yè)務(wù)需求中，完成統(tǒng)一的視覺(jué)體驗(yàn)，也給到用戶更加統(tǒng)一的品牌認(rèn)知。

三、產(chǎn)品架構(gòu)，信息呈現(xiàn)專業(yè)化

1. 精簡(jiǎn)產(chǎn)品架構(gòu)

• 減少學(xué)術(shù)圈過(guò)多定制化分類，突出用戶高頻使用的重點(diǎn)分類，讓信息的呈現(xiàn)與用戶的瀏覽更加高效。
• 加強(qiáng)內(nèi)容生產(chǎn)入口的呈現(xiàn)與關(guān)聯(lián)性，將底部導(dǎo)航的全局發(fā)貼按鈕移到學(xué)術(shù)圈的右下角，減少用戶的探索與無(wú)效點(diǎn)擊。
• 優(yōu)化用戶生產(chǎn)內(nèi)容的整體流程，去掉了點(diǎn)擊發(fā)貼按鈕后選擇發(fā)病例（專業(yè)人士可見(jiàn)）與討論彈窗，降低用戶的理解成本，提升轉(zhuǎn)化率。

2. 區(qū)分信息呈現(xiàn)

丁香園作為移動(dòng)端的內(nèi)容互動(dòng)與分發(fā)平臺(tái)，將內(nèi)容信息進(jìn)行區(qū)分處理，除了將學(xué)術(shù)圈首頁(yè)的卡片樣式進(jìn)行模塊化處理，我們也按內(nèi)容場(chǎng)景排布信息優(yōu)先與參與的信息（討論與評(píng)論）進(jìn)行區(qū)分化處理，突出不同的功能使用。

貼子內(nèi)容頁(yè)，強(qiáng)調(diào)交流與互動(dòng)，有時(shí)候優(yōu)質(zhì)的回貼內(nèi)容也是整個(gè)內(nèi)容頁(yè)的精彩部分，需要盡可能保持與主貼一樣的顯示權(quán)重。資訊內(nèi)容頁(yè)，側(cè)重消費(fèi)與傳播，需要加強(qiáng)分享與突出主題內(nèi)容。

3. 信息呈現(xiàn)的規(guī)范化與延展性

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

我們同時(shí)對(duì)頭像、圖片、標(biāo)題、摘要與參數(shù)五個(gè)部分進(jìn)行模塊化處理，通過(guò)不同模塊的組合與替換，可以得不同業(yè)務(wù)需求的卡片類型，除了可以承載不同的內(nèi)容形態(tài)，可以在學(xué)術(shù)圈，編輯推薦、病例集、話題與論壇版塊等模塊同時(shí)延續(xù)使用，給用戶更加一致的瀏覽體驗(yàn)。

結(jié)語(yǔ)

丁香園 8.0 版的全新改版升級(jí)，對(duì)我們移動(dòng)組來(lái)說(shuō)有非常多的收獲，不僅從多角度看待和思考一個(gè)產(chǎn)品的改進(jìn)優(yōu)化，而且也體現(xiàn)了我們團(tuán)隊(duì)的協(xié)作與高度配合，每一位成員都各有所長(zhǎng)地在這個(gè)項(xiàng)目中參與與付出。從最初設(shè)計(jì)方向的制定、概念設(shè)計(jì)的雛形、到后續(xù)設(shè)計(jì)的量產(chǎn)與細(xì)節(jié)的打磨，最終大家團(tuán)結(jié)一致與積極推進(jìn)完成了所有設(shè)計(jì)的定稿。

同時(shí)，這次改版也得到產(chǎn)品同事與交互同事的大力支持。全新版本的實(shí)現(xiàn)對(duì)開(kāi)發(fā)來(lái)說(shuō)也是一次挑戰(zhàn)，因?yàn)楣て谟邢蓿m然我們盡力做到一些老舊頁(yè)面的改造只是基于 UI 的調(diào)整，但更多交互細(xì)節(jié)的加入也帶給了他們很多的實(shí)現(xiàn)成本，也非常感謝他們的配合與支持，努力去與我們實(shí)現(xiàn)上線版本做到最接近設(shè)計(jì)的還原。

雖然新版本的發(fā)布，細(xì)節(jié)上還有很多不足，但我們會(huì)在后續(xù)進(jìn)行持續(xù)優(yōu)化完善。此次升級(jí)其實(shí)還有很多想說(shuō)，因?yàn)槠鶡o(wú)法詳盡，我們會(huì)陸續(xù)有針對(duì)性做一些更為詳細(xì)的設(shè)計(jì)分享。這次改版為我們后續(xù)其他產(chǎn)品的優(yōu)化與升級(jí)也提供了全新的思路，是一次嘗試，也是一次實(shí)戰(zhàn)與實(shí)踐，積累的寶貴經(jīng)驗(yàn)也會(huì)幫助我們?cè)谝院笤O(shè)計(jì)之路更好地前行。

丁香園 8.0 全新界面部分設(shè)計(jì)展示：

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

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

• 《看似簡(jiǎn)單的喜馬拉雅FM主播等級(jí)體系，是如何做改版設(shè)計(jì)的？》
• 《上億人使用的唱吧APP V8.6 改版設(shè)計(jì)過(guò)程揭秘》
• 《上億人使用的泛娛樂(lè)微信店，是如何做改版設(shè)計(jì)的？》