4000-888-103

资讯动态丁香园 8.0 全新改版升级,设计背后的故事资讯详情

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

2019-11-25 16:22:09

 

发现问题

在丁香园 APP 多年来不断的更新迭代中,积累很多亟待解决的问题,本次升级产品经理、交互设计师、视觉设计师一起对目前的产品存在的问题进行了整理归纳:

1. 界面内容显示过于密集与混杂、重点不够突出

2. UI 整体风格过时而且不规范、主色暗沉、辅色繁多,没有统一的设计语言

3. App 丁香园的品牌基因不够突显、关联性不强

4. 互动性内容与消费性内容呈现没有区分,体验没有侧重

5. 论坛与话题隐藏过深,发贴流程复杂,不利于内容生产

6. 公开课作为移植模块,风格与丁香园 App 有偏差

 

问题总结

 

升级方向

针对发现的问题,我们经过多次多方讨论后,最终确认了升级方向:品牌、轻量,专业。期望本次的升级不仅可以解决目前存在的问题,还可以让产品在体验上有一次大的提升。

 

一.  打造并渗透 APP 品牌基因

1. 品牌色

年初,丁香园 VI 进行了整体升级,新的品牌紫色更加明亮,本次的升级的颜色和新的品牌色保持一致,让新的品牌在产品得以延续。明亮的色彩更吸引用户注意力,也会显得轻快,同时,我们重新定义了辅色,让产品整体更加统一轻量。

 

2. 品牌纹理

新的品牌增设了品牌纹理图形,本次升级在 App 中延续使用了品牌纹理,让品牌元素在产品中得以体现,不断加大丁香园的品牌渗透,加深用户对丁香园品牌的感知度。

 

3. 图标品牌化、统一化

旧版的 App 中,图标的使用较杂乱,装饰性图标和交互性图标在不同的模块中风格各异,形状不一。本次升级中,我们对所有图标都进行了重设计,对图标的风格进行了再探索,确定了统一的使用规范。

为延续品牌感,在图标设计前,我们对丁香园 Logo 风格进行分析研究,提取了 Logo 中的特有的风格元素(色彩渐变、明暗对比),在图标设计中融合品牌基因。

 

TabBar,功能入口,列表中使用面性图标,利用同色系渐变,同色系色差,统一端点和圆角等创作细节,统一设计不同场景下的图标。

 

标题栏,工具栏中交互性图标设计,使用高识别度且拓展性较好的线性图标,统一粗细,圆头端点,转角半径。

 

4. 情感化插画

为减少用户的负面情绪,增强品牌形象,加强用户的参与感,使产品更加有趣味。本次升级对产品内插画进行了整理和设计。

在情感化插画的设计上,我们沿用与品牌图标一样的创作细节,使用同色系渐变,色彩变化,明暗对比等进行设计,让图标和插图有较强的统一性。

引导页的插画

 

无网络、无结果、未登录,空白页面,弹窗等场景下的系列渐变插画

 

二.  新的设计语言,统一视觉规范

1. 轻量化设计语言

对丁香园 App 表现层进行了整体梳理,新的设计尽可能的做减法,去掉不需要的修饰元素,尽可能凸显内容本身。

恰到好处的留白

通过大标题进行不同模块的内容分隔。导航栏,标题栏都采用了与页面背景一样的纯白色。去掉学术圈卡片大色块的分隔条,使用留白和分割线来区分信息层级。对各个模块分隔间距、卡片间距、列表间距、内容详情阅读排版间距等都适当进行增加,增加视觉的呼吸感,减轻浏览大量内容时的压迫感,让用户阅读信息时,更加愉悦。

 

轻盈的阴影

增设带有投影效果的卡片,给需要突出的内容固定的样式容器。另外,Tabs,工具栏,导航栏中也使用了阴影效果,当页面滚动时出现,增加页面层次,方便用户浏览信息。

 

2. 统一视觉规范

完成主框架与风格设定以后,我们对页面常用的基础控件进行了组件化,包括标题栏,导航栏、按钮、列表、输入框、弹窗、Android 差异化等等,形成了一整套丁香园移动端产品的设计语言,并可以灵适运用到丁香园的各个业务需求中,完成统一的视觉体验,也给到用户更加统一的品牌认知。

 

三.  产品架构,信息呈现专业化

1. 精简产品架构

a. 减少学术圈过多定制化分类,突出用户高频使用的重点分类,让信息的的呈现与用户的浏览更加高效

b. 加强内容生产入口的呈现与关联性,将底部导航的全局发贴按钮移到学术圈的右下角,减少用户的探索与无效点击

c. 优化用户生产内容的整体流程,去掉了点击发贴按钮后选择发病例(专业人士可见)与讨论弹窗,降低用户的理解成本,提升转化率

 

2. 区分信息呈现

丁香园作为移动端的内容互动与分发平台,将内容信息进行区分处理,除了将学术圈首页的卡片样式进行模块块化处理,我们也按内容场景排布信息优先与参与的信息(讨论与评论)进行区分化处理,突出不同的功能使用。

贴子内容页,强调交流与互动,有时候优质的回贴内容也是整个内容页的精彩部分,需要尽可以保持与主贴的一样的显示权重。资讯内容页,侧重消费与传播,需要加强分享与突出主题内容。

 

3. 信息呈现的规范化与延展性

丁香园学术圈的卡片作为承载论坛交流与内容分发的最重要容器,也我们这些升级的重点之一,相对于旧版,我们调大了头像,更加突显学术交流的氛围,调换了大图与标题的位置,让文字内容的浏览更具连贯性,同时减少了摘要的行数,在浏览、点赞与评论的参数展示上用图标替代了文案,缩小了标题的字号,放大了摘要的字号。同时也增加头像、图片、标题、摘要与参数之间间距,让整个卡片的视觉呼吸感更强,也可以让用户浏览卡片内容时更加高效与聚焦。

 

我们同时对头像、图片、标题、摘要与参数五个部分进行模块化处理,通过不同模块的组合与替换,可以得不同业务需求的卡片类形,除了可以承载不同的内容形态,可以在学术圈,编辑推荐、病例集、话题与论坛版块等模块同时延续使用,给用户更加一致的浏览体验。

 

结语:

丁香园 8.0 版的全新改版升级,对我们移动组来说有非常多的收获,不仅从多角度看待和思考一个产品的改进优化,而且也体现了我们团队的协作与高度配合,每一位成员都各有所长地在这个项目中参与与付出。从最初设计方向的制定、概念设计的雏形、到后续设计的量产与细节的打磨,最终大家团结一致与积极推进完成了所有设计的定稿。

同时,这次改版也得到产品同事与交互同事的大力支持。全新版本的实现对开发来说也是一次挑战,因为工期有限,虽然我们尽力做到一些老旧页面的改造只是基于 UI 的调整,但更多交互细节的加入也带给了他们了很多的实现成本,也非常感谢他们的配合与支持,努力去与我们实现上线版本做到最接近设计的还原。

虽然新版本的发布,细节上还有很多不足,但我们会在后续进行持续优化完善。此次升级其实还有很多想说,因为篇幅无法详尽,我们会陆续有针对性做一些更为详细的设计分享。这次改版为我们后续其他产品的优化与升级也提供了全新的思路,是一次尝试,也是一次实战与实践,积累的宝贵经验也会帮助我们在以后设计之路更好地前行。

 

丁香园 8.0 全新界面部分设计展示:

 

关键词:h5是啥 比较火的h5页面 h5页面模板

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png