11228722 2015年10月27日
Flyme故事 金牌会员
本帖最后由 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故事原创,欢迎转发分享,如需转载请联系我们。


0分

112条回复

雪幻伤城 荣誉版主 2015年10月27日
面貌一新啊
侧脸君 白金会员 2015年10月27日
在配图中看到少数派了,红红的 icon 尤其醒目
ddm95 银牌会员 2015年10月27日
今天也面貌一新,明天也面貌一新,
就是迟迟不能适配,然并卵。
ddm95 银牌会员 2015年10月27日
你们的工程师是不是都跑到论坛来吹水,都没有人写代码做设计了?
ddm95 银牌会员 2015年10月27日
新闻这东西,界面做得再好,没有独特的内容,也是白搭啊。
czwong 魅友版主 2015年10月27日
看新闻更舒坦啊
皮卡丘Flying 论坛精英 2015年10月27日
beautiful~
莫名的醉意 论坛精英 2015年10月27日
支持创新~
ddm95 银牌会员 2015年10月27日
话说 ANDROID 6 都来了吧,你这里 5 还停留在吹的阶段啊
ddm95 银牌会员 2015年10月27日
我看不看一本书,和这本书怎么装订的,用的什么纸张,没什么关系。
快来崇拜我 论坛元老 2015年10月27日 来自手机
喜欢手势滑动
kanek9999 论坛精英 2015年10月27日
非常的不错
蓝莓科技 论坛元老 2015年10月27日 来自手机
阅读体验越来越好了
jack洪 论坛精英 2015年10月27日
顶贴!!
淡丶随心飞 白金会员 2015年10月27日
不错啊。。。。
小狗等梦 论坛元老 2015年10月27日
可是一直在用今日头条
小园无敌 魅友公摄组 2015年10月27日
支持一下!!!
tuohai35 钻石会员 2015年10月27日
看着不错   
笨笨的一天 荣誉版主 2015年10月27日
体验还不错!
岁月无痕灬灬 白金会员 2015年10月27日
继续加油!
卡卡yrjns 论坛元老 2015年10月27日
魅族资讯,
卡卡yrjns 论坛元老 2015年10月27日
我喜欢用头条
卡卡yrjns 论坛元老 2015年10月27日
魅族的也看看有时
笪屹超人 钻石会员 2015年10月27日
侧脸君 发表于 2015-10-27 11:56
在配图中看到少数派了,红红的 icon 尤其醒目
五毛请转~~~
笪屹超人 钻石会员 2015年10月27日
ddm95 发表于 2015-10-27 12:06
我看不看一本书,和这本书怎么装订的,用的什么纸张,没什么关系。
你不追求没有问题,我不拦你。
但你不追求不代表别人不追求,你喜欢排版混乱的阅读体验,不代表别人就不可以去追求排版精细、阅读舒适的体验。

你没关系,我有关系。
笪屹超人 钻石会员 2015年10月27日
ddm95 发表于 2015-10-27 12:01
新闻这东西,界面做得再好,没有独特的内容,也是白搭啊。
内容再独特,没有优质精美的界面和排版,也是白搭啊。
严小筷 荣誉版主 2015年10月28日
极致源于梦想 事儿哥
cylmy 论坛精英 2015年10月28日
内测用户路过,新的资讯真心比以前的好很多
微笑的石頭 论坛精英 2015年10月28日
期待Flyme 5尽快适配MX4.
Fy刘欢 论坛精英 2015年10月28日
非常不错,已经体验很久了
blueflysky 白金会员 2015年10月28日
现在看来确实好多了哈
TECH文举 论坛元老 2015年10月28日
支持支持
谁年少时不迷茫 银牌会员 2015年10月28日 来自手机
左右滑动,这种操作必须传承下去,也很喜欢!希望浏览器也能添加
钟皇 等待验证会员 2015年10月28日 来自手机
魅3用了一年半了。就是卡了点。其他没什么。不知道该不该换魅蓝metal。回收给魅族官网220块。再掏880。
晨here 等待验证会员 2015年10月28日 来自手机
我都不看的。内容为王。其他新闻客户端我也不看,内容和评论都比较水。有一些媒体和公众号做得还可以,都以犀利见解为长。如果仅仅看看最近发生了什么,cctv,路透这些才是好吗?没有第一手的信息源,没有独立风格辛辣犀利的见解,仅仅界面优化不足以成为理由
蓦然兰庭 钻石会员 2015年10月28日 来自手机
首先让我们用上,且不闪退啊
翻滚吧V牛宝宝 论坛元老 2015年10月28日
不错               
唐唐lau 论坛元老 2015年10月28日 来自手机
我一直很喜欢这个app
706798621 钻石会员 2015年10月28日 来自手机
愿我们的魅族越来越好