网易新闻安卓客户端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

相关推荐

  • Alan-Cooper的交互设计理念

    阿西导读:交互不是界面设计,你可以说交互是画线框图的,但不能说交互是臭画线框图的! Alan是一位仅仅做了大约15年编程的交互设计师。如果你还要问我Alan-Cooper是谁,那么请先百度或Google后在来读这篇文章。 以…

    交互设计 2015-01-26
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07
  • 两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • 用户体验设计大赛开始啦

    关于举办福州大学第五届大学生用户体验设计大赛的通知用户体验是用户使用产品(服务)的过程中建立起来的心理感受。用户体验设计(User experience design,简称UXD)结合工业设计、心理学、界面设计、信息设计、人机交互、计算机科学、认知科学,以及人类学、社会学、传播学、建筑学、工程学等领域的知识,通过创新设计带给用户良好的交互反馈,提升产品(服务)的用户体验,是一个高度跨学科的领域。随着社会发展和经济增长,国家大力推动“互联...

    2018-04-04
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 产品原型设计之交互体验的思考过程(一)

    我有两种方式 来建立这种认识。
    简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。
    更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

    2017-05-23
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • 交互设计 | 这到底是交互设计还是黑科技?

    Create Your Difference.           by CYD01能看透你的灯光今天创艺典与你分享的交互装置不再是学习你、跟随你的灯光装置了无论你怎么装高冷当面瘫今天的它能把你扒光把你一览无余地看透我觉得你必需服Aura这是Aura,一个视听和互动装置它解读和翻译人类的情感,然后将其转化成发光窗帘光的强度、形状和颜色会随着人情绪的变化而精确地改变这样的绿,或许代表了平静而这位哥们儿的绿,恕我直言,或许是一种失恋的绿这样...

    2018-04-30
  • UED专访 | 魏娜:设计由情感而生

    📌 编辑 | Belinda.L《漂亮的房子》播至第三阶段,福鼎站的房子即将展现在观众面前,UED采访了“小溪家”的建筑师魏娜,探寻项目背后的情感设计。魏  娜WEI 建筑设计创始合伙人、主创建筑师魏娜于2013年发布过一条微博,感谢UED杂志的建筑师赠刊上精心的小细节。而她与UED的缘分其实从更早之前就已开始了。UED杂志特别赠刊烫印有建筑师姓名 ©魏娜“从2009年我们事务所刚刚成立的时候,UED就开始给予我们很大的支持,在这近9年...

    2018-02-02
  • 设计新人容易陷入哪些误区?又如何回归设计的本质

    关于体验设计,很多书里面都会讲到这三个方面:商业模式、技术和设计本身。有时会把这三者合而为一,叫用户体验,所以用户体验的概念是很广的,以至于很多入行的新人对体验设计产生很多的认知误区。

    2017-05-21