[Flyme新鲜事]焕然一新的设计结构-魅族资讯体验

22245

115

2015-10-27 11:37

显示全部楼层

轻松注册,让你轻松玩转Flyme社区

您需要 登录 才可以下载或查看,没有帐号?注册
x
本帖最后由 Flyme故事 于 2015-10-27 11:42 编辑
调查显示,61.1%的用户通过手机新闻客户端获取每天最新鲜的时事要闻。用户如何能快速、准确、方便地获取新闻,也许是新闻类软件一直在思考的事情。
banner.jpg

资讯(原阅读APP)作为Flyme内置的应用,聚合了主流媒体信息,致力打造高体验高效率的资讯阅读类应用,适逢Flyme 5的发布,资讯改版后的UI设计亦焕然一新,下面这篇文章就带领大家一起来尝尝“鲜”。


改变一
界面结构

首先,我们来看下旧版本的界面,会发现在上班途中的碎片化时间,你还得抽出些时间先熟悉下界面构成。
其次,看整个层级架构,一部大屏手机的界面,顶栏和底栏占去了三分之一,真正核心内容的阅读层面只占很有限的部分。
01-内容.jpg
为什么明明是大屏手机,还要去强奸用户的眼睛?
在目前这种快节奏、碎片化的信息时代中,快餐式的阅读无疑是最适合大众用户的。当我们打开资讯应用,映入眼帘的内容必须是层级分明,视觉压力极小的。而T型结构从上到下、从左往右,第一眼便可概览界面整体结构,可以快速筛选出自己需要的讯息,正是适应这种需求:
1、页面逻辑清晰,顶部的Tab引领下面页面的内容。
2、与“工”型结构对比,“T”型结构下用户的浏览视线更符合直觉,视线无需上下折返去捕捉两个导航的内容。
3、分类导航由底部抽象的图表形式具象为顶部的文字形式,使得表意更清晰。
4、左右横划切换Tab更加方便,可以在界面上盲操作,克服屏幕变大后点按操作的不便。

文字编排的易读性

资讯的体验至少没有让我产生“Flyme的设计师好像没有读过书啊”的感觉
在视觉设计工作中,大家总习惯将重点放在图标和色彩上。但实际上,作为一个阅读类app,思考如何让文章更易于阅读是和图形、色彩处理同等甚至更为重要的事情。

文字留白

以实体书举例,一行文字的过长而订口的空白处又太少,这种排版只会让我把书撕烂。

02-实体书.jpg

电子书亦如此,要做出理想的版面,作为设计者需要站在读者的角度考虑,应该寻找对于自己来说更便于阅读的排版。

03-文字排版.jpg
整个排版涉及的内容太多,如行间距、段间距、特殊符号处理,这里不做深度说明,只看资讯设计者给出的最终方案,是否满足一个读者的需求。
即便是字号相同的文字,字体不同看起来大小也不一样。而且选择文字大小时,需要考虑文章的阅读方式,比如,是在大屏幕机器还是小屏幕。
04-大小.jpg


保留了足够的段间距,读者从字行末尾折回,移向下一行的视线就不会与移向下一段的视线发生冲撞。

改变二
交互

终于可以谈谈交互了,Flyme 5在这一块的改动还是比较颠覆的。
全局式的页面滑动,可以在阅读的时候随心切换文章,这个功能能够弥补去掉SmartBar后带来的单手操作问题。
05-全局滑动.jpg


配合Flyme 5的丝滑顺畅,整个体验下来一气呵成。
06-订阅内容.jpg
订阅内容的界面从板块式改为纵向展示,显然照顾了视觉的感受,一眼扫过所获取的内容更多。
很多人会问为什么不把我们所订阅的内容直接展示到推荐页?
因为左右滑动的Tab页已经大大提高了阅读效率,滑动直达订阅板块的内容。此外后期接入了阿里的大数据,也会在智能分析筛选这一块的能力有所提升,从而在首页推荐上更贴近用户需求。

回顾完整个资讯的更新点,我们发现它所传递的内容很简单,就是尽可能在碎片化时间内给用户一种直观、高效的阅读体验,把之前强加的复杂操作、导航全部改为人的直觉性操作,在有限的时间内,看更多的内容。
使用得久了,相信你能感受得到这种细腻的变化。

自然,这种感觉很微妙,但如果我们静下心来梳理每个时代的设计,会发现其实都是顺应时代潮流,恰到好处的。拿最直观的界面说,每个不同的应用需要不同的结构设计,以传递合适的内容。
Flyme 5 在结构上最显著的改变无非是砍掉了当初极力推崇的SmartBar,用“T”型结构代替“工”型结构。

我们从视觉设计理念的角度来分析下这么做的原因。
德国有个发明家叫做约翰古腾堡,他提出了一个对角线平衡的设计理念-古腾堡法则。
他认为,人们在浏览页面的时候,视觉都趋向于从上到下,从左到右的眼动规律。左上角是视觉的第一落点区,而右下角是视觉最终落点区。用户的视觉中心往往在页面的左上方,而结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。因此,采用对角线平衡通常是一个好设计所需要考虑的因素,因为设计师遵从了用户习惯性的眼动规律。
07-古腾堡法则视觉落脚点.jpg
在古腾堡法则下,用户在界面留下的视线热区是这样的:

08-古腾堡法则视觉热线.jpg

通过这个视觉热区展现,我们发现原来的“工”型结构设计并没有覆盖到用户的主要视线,反而把画面切割了。因此,通过去掉底栏导航,精简结构层级,根据用户的视线浏览规律,Flyme 5最终把结构调整为“T”型,如下:

09-Flyme 5结构演变.jpg

通过这个分析我们可以得出,适合T型结构的必然是内容多元化、空间较大的界面。

10-T型的应用界面.jpg

改变的背景
时代因素

Flyme在交互上的变革大多是颠覆性的,而具体到产品方面,用户得出的感受可能仅仅是“嗯,好像看起来挺和谐的”,或者“阅读时间久了,眼睛不会疲劳”,确实很多小细节的变动你可能说不上来,但你可以感受得到。
因为作为版面设计的条件而言,如果视觉上没有任何新鲜的东西也是不行的。在对这些所使用的颜色以及文字的组合方式等问题细微地改变过程中,存在着无限种正确处理的可能。方法总是有很多,所以大家也一直在寻找最舒适易读的阅读编排方式。
加上了时代因素的大光环,很多Flyme 的所谓“打脸”就变得可以理解,繁华世界,我们并不非要去接受那些痛苦的设计,在过去的人机交互中,用户一直在被动地去接受手机,而现在让手机操作更直观些,给用户想要的内容,这才是手机该做的事。

总结

Flyme 5的资讯把整个界面结构设计得更符合消费者的需求,尤其是对于大屏手机而言,“T”型结构大幅度提升了阅读新闻的体验。相信未来结合智能算法,在资讯的首页推荐上会更加贴近用户需求。

★Flyme故事(微信号:Flymestory)系文章首发平台,点击「焕然一新的设计结构-魅族资讯体验」可查看原文。

Flyme故事二维码.png

本文照片及文字内容系Flyme故事原创,欢迎转发分享,如需转载请联系我们。