丁香园 8.0 全新改版升级,设计背后的故事 - 优设-UISDC

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

2018/07/04 20962评论区

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

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

「优秀团队的改版设计案例」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/dxy-8-new-revision-upgrade

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 神器下载 海报设计 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里