重磅改版!网易新闻安卓客户端Material design实战 - 优设-UISDC

重磅改版!网易新闻安卓客户端Material design实战

2015/04/19 22592评论区

material-design-163-news-client-1

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

之前有过两篇Feedly设计改版的实战文,参阅:

  1. 《MATERIAL DESIGN实战!FEEDLY创始人聊聊改版实战经验》
  2. 《MATERIAL DESIGN实战!FEEDLY创始人再聊改版实战经验》

项目背景

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

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

主要优化内容:

1、新闻列表

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

wy20150419 (2)

左图:默认的 app bar + tab bar

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

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

方案一:

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

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

wy20150419 (3)

方案二:

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

wy20150419 (4)

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

方案三:

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

wyhb201504192

2、左右侧抽屉

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

wy20150419 (7)

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

wy20150419 (8)

3、文章页细节调整

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

wy20150419 (9)

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

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

wy20150419 (10)

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

wy20150419 (11)

4、跟贴页

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

wyhb2015041923

Inbox案例:

wy20150419 (12)

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

wy20150419 (13)

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

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

wy20150419 (15)

5、写跟贴页面

wy20150419 (14)

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

方案一:

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

wy20150419 (16)

方案二:

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

wy20150419 (17)

方案三:

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

wy20150419 (18)

方案四:

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

wy20150419 (19)

6、其他页面

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

写在最后

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

【加上这三篇,Material design学习资料就够了!】

Material design到底有哪些过人之处?来这儿学习!
《超全面总结!深聊MATERIAL DESIGN引领的设计趋势》

同样来自学霸的自学笔记,干货满满!
《学霸的自学笔记!Material Design设计规范学习心得》

谷歌自家设计师对它的看法与实践心得:
《超赞!谷歌设计师的Material Design实践心得》

作者:@ME网易移动设计

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/material-design-163-news-client

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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