丁香园 8.0 全新改版升级，设计背后的故事

本文是转载丁香园设计团队的一个APP改版案例总结，

非常详细的介绍了公司级的实际项目过程中的设计思考，以及设计产出。

可以帮助UI初学者，对UI设计工作内容有更直观的了解。

丁香园 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 全新界面部分设计展示：

欢迎关注作者的微信公众号：「花厂设计招待所」