网易新闻安卓客户端Material design实战

8f4f254c65dd11b97edcf542074d4bdd

编者按:光说不练假把式,聊了这么多的Material design技巧,是时候来看看国内APP怎么跟上这股潮流了。今天网易的同学分享了新闻客户端的Material design改版过程。

项目背景

网易新闻安卓版一直以来照搬IOS版的交互和视觉,这在一定程度上保持了不同平台上应用风格和用户体验的 一致性,也相应的减少了设计和开发的人力成本。市面上的大部分移动应用也是如此。所以,一直以来给用户的感觉是Android没有独立鲜明的视觉风格,但 是事实并非如此。不久前Google推出AndroidL系统,视觉语言Material design也相应诞生。Google为设计师提供了一套完整的官方交互视觉设计指引,扁平化、华丽又稳重的色彩,将卡片的功能发挥到极致。

以此为契机,网易新闻也尝试将安卓平台的视觉进行优化改版。在原有架构不变的基础上,对现有的视觉进行优化,使其更加符合安卓平台的气质。

主要优化内容:

1、新闻列表

Material design较多的运用了大面积的色块,其提供的导航样式如下图:

b78d2904593cf9561ee4b67fa7073978

左图:默认的 app bar + tab bar

右图:默认的 app bar + 可滚动的 tab bar

网易新闻的二级导航栏目很多,必须可以左右滚动切换,上述的两种方式显然是右图更适合。于是依据上图的视觉样式并配合网易新闻的特性,对头条列表的导航尝试了以下几种改良方案:

方案一:

照搬Goolge导航视觉样式,配网易新闻原有的主色红色,设计出下图。

因红色导航条高度过高,显得压抑,并影响用户的阅读体验,最终没有采用此方案。

ef5eb0f06fffa7ac269c1cf96362e890

方案二:

去掉红色导航条,加大了头图的高度,以图片为主体,视觉集中点更为突出;首屏图片和文字比例1.6:1。但因改动较大,最终也未采用此方案。

34bef4ccd15935bcfa935d28da2452bd

头条列表向上推动出现红色二级导航,如下:

6401

方案三:

最终线上版本,与原有版本相比改动较小,风格保守。

38bccbe8c577042167c1be3411249175

2、左右侧抽屉

左侧抽屉,将原有的黑色背景替换成了白色,并将icon风格扁平化,简洁多彩。

926d873dc4777d3a97175ddec05ea0ab

右侧抽屉,在交互同学的配合下进行信息分类,分为上中下三部分,上部:用户相关信息,中部:活动类信息,底部:功能类操作入口;并加入菜单项。

997a95ee538899e99f3cab40546e52ee

3、文章页细节调整

Material design很具体的规范了字号大小与相应行高之间的数值,如图:

a196b794baf5dba6e9e930da763dfc02

以1080*1920px的安卓手机尺寸为例,易于阅读的正文字号大小规定为54px,即18sp。在此基础上根据正文字号大小来调节平衡,决定大标题、时间、来源、导语等文字大小。

图片在文章页内部的位置关系demo,如下:

5a33a0d5c27f89c23a8101ef5f51f376

对于文章页底部的栏目,如:相关新闻、热门跟贴等,进行卡片化设计,对各个栏目进行视觉规范统一,并突出各个栏目的主题,与左侧抽屉的icon颜色保持统一,如相关新闻与新闻icon的颜色值相同;热门跟贴与跟贴icon的颜色值相同。

d4e9492b9d87b4e240678436de74256f

4、跟贴页

Material design对带有图标或者头像的内容做了具体规范,左右各有16dp的垂直边距。带有图标或者头像的内容有72dp的左边距。如下图:

ea876519becec933891f57f00f5e8e7a

Inbox案例:

dd3a2d39229fa63d8008b0e4e15b7880

依据以上规范,试着对新闻跟贴页做出如下demo设计:

34be703ada4efca1008e8bf4e5dea767

可以看出,Google规范下的各种间距在实际应用时都显得比较大,也可能是中文排版的原因。于是,在此基础上进行修改,设计出如下最终版本:

除了缩小头像大小之外,还缩小了页面左右间距,最终的视觉效果文字显得比较紧凑。

bfeb8ad33ccdabab2e556c0dd1e57706

5、写跟贴页面

530cfbc84a5f5e26d9dadda61adc7ca5

Floating action button(FAB)是Meaterial design的一个视觉亮点。所以,我也想尽可能的把这一亮点运用到网易新闻中,于是试着做了以下方案。

方案一:

此方案最终未能通过。原因是交互同学觉得FAB不适合运用在写跟贴这样与文章内容有一定依托关系的页面中。它比较适合发表一个新的想法,如Google+之类的。

d4da74480fede4bf48b51e5173351755

方案二:

写跟贴弹窗全屏页面显示,此方案最终也因上述原因未能通过。

2545e226d5078522a39287814fe06c26

方案三:

最终线上版本。与原先版本相比无太大改动。

e557dbe658d8c16cee3d7bb180a10e36

方案四:

基于大屏手机的设计,将写跟贴的按钮从右上角挪到左下角,便于用户单手操作。此方案正在进行小范围用户测试。

32200508bf4fa72496aa47ce11e1e10d

6、其他页面

订阅、视频、图片等栏目都相应做了卡片设计优化。

写在最后

在只有视觉优化的网易新闻安卓改版中,相对的限制太多,视觉设计起来蹑手蹑脚,上述一些方案得不到肯定,线上的设计又相对保守,对于安卓的改版也不 够彻底。在一直提倡创新设计的今天,作为设计者而言,此次的安卓视觉改版并没有达到预期效果。希望能在以后的工作中得到产品和交互的支持,能在视觉上做出 创新,加入适合的动画,及交互形式等。产品总是在不断摸索创新中进步,大家共同努力做一件事情,结局总是会向好的方向发展。

 

作者:@ME网易移动设计

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7358/

(0)
iouedioued
上一篇 2015-07-20
下一篇 2015-07-20

相关推荐

  • 长大的用户体验不好,想退货了

    来都说:本周,小编的桌上多了一盆仙人球,世界各地还发生了这些小事情:钻石兄弟情、无声面包店、「自杀式」教学、午夜「决斗」、从天而降的小女孩、我明白得有些晚、长大的用户体验……01钻石兄弟情近日,美国印第安纳波利斯市一处停车场内,一位 80 岁的老爷爷遭遇抢劫。由于行动不便,拄拐杖的老爷爷只能任凭灰帽衫劫匪的摆布……这时,一个身影冲过来,朝着劫匪的后背就是一拳,劫匪被打得踉跄了几步,脑袋也有点蒙了。这个身影是 80 岁老爷爷的哥哥,今...

    2018-04-13
  • 从交互设计角度,聊聊Web网站和移动App的六大差异

    做交互设计近4年,参与过Web网站和移动App的设计,前者依托于PC的浏览器,后者则是依托于手机/平板电脑。不同的设备/平台均有各自的特点,以至于在设计这两类产品时也有些许差异。

    2017-05-27
  • Axure官方教程中文版第5课:动态面板介绍-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(5).MP4 新建文件 1、添加一张图片和按钮 2、转换为动态面板并添加状态 3、为每个状态添加一张图片 4、设置点击“Next”按钮时进行下个状态的切换

    2015-01-26
  • 移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28
  • The Benefits of Mobile Interaction Design

    Mobile interaction design is the process of creating user interfaces for mobile devices. It involves creating a user experience that is tailored to the device’s size, capabilities, and context. Mobil…

    交互设计 2023-04-03
  • 超全面的APP数据图表展现方式深度总结

    之前研究过一段数据图 表的最佳表达方式,随着手机端应用层出不穷地发展,这次将数据图 表的表现延用到手机端。相比 Web 端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?是否有更加合适的表现方式?下面是翻阅或试用了各种有数据的 App 后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表 的特性有更深的理解。

    2017-05-30
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • 作为第一个接触小程序的设计师,是什么样的体验?

    自选股小程序已经上线,作为项目的一员,做了一下交互体验和视觉设计的总结。

    2017-05-08
  • 别让这五种错误毁了你的交互设计

    交互设计从来不易。它需要对用户行为进行深入分析的同时,还要进行细致的计划。尽管新的交互设计不断出现,但并未使它变得更容易一些。如何才能创建令用户满意的使用体验?如果你对交互设计中常见的错误有所警惕的话,无疑就会尽量避开这些错误,从而实现更完善的UX体验。

    2017-06-02
  • 2018年用户体验趋势(二)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#4每个界面都是一个故事设计世界中的讲故事和写作从未如此现实过。随着客户的体验旅程越来越碎片化,我们要确保在不同渠道中讲述连贯的品牌故事,并且这些故事清晰、有趣、富有人性。有段时间,大概是几年前,我们听说过显微术语。但是到了2017年,业内人士发现,不仅要重视在设计...

    2018-03-02