扫一扫 扫一扫 扫一扫 扫一扫 丁香园 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 全新界面部分设计展示: 欢迎关注作者的微信公众号:「花厂设计招待所」 「优秀团队的改版设计案例」
手机扫一扫,阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。