[玩转Flyme]这就是 Flyme 6 更好看更耐看的秘密:内容设计详解

167526

3479

2016-12-29 15:25

显示全部楼层

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

您需要 登录 才可以下载或查看,没有帐号?注册
x
Flyme 1130 正式版_佛.026.jpeg

Flyme 6发布亮相时推出了一种全新的视觉语言,那就是围绕着内容设计的核心理念,通过提炼产品本质,简化不必要的装饰,合理组织内容与功能的层次,让用户在使用系统时能专注于内容本身,而不会受到其他因素的干扰,为此Flyme 6搭建了以内容为中心轴的完整设计架构。

界面展现

接下来我们先一起看看具体哪方面体现出了“内容设计”的核心理念:

首先在图标上,应用内的插图图标或者称之为表现图标,比如应用商店中的必备、网游、首发、榜单、专题、分类等,还有生活服务中的美食、电影、外卖、机票等等都采用了轮廓更加精炼分明,更有识别性的形状,用户可以更加容易快速地理解它要表达的含义;

Flyme 5应用商店

Flyme 5应用商店

Flyme 6应用商店

Flyme 6应用商店


还有系统设置图标也增添了各种色彩,大大提高了辨识度,强化了图标本身所要传达给用户的真正意义。

Flyme 5设置

Flyme 5设置

Flyme 6设置

Flyme 6设置


其次在色彩上,将之前很多应用内标题栏的彩色背景都清除了,比如应用商店、主题美化、读书、音乐视频等,都调整为无干扰的浅白色,淡化了浓艳色彩所带来的强烈视觉刺激,让用户聚集于页面上的内容。

Flyme 5主题美化

Flyme 5主题美化

Flyme 6主题美化

Flyme 6主题美化


最后在文字排版上,Flyme 6选择了更加合理的字重及搭配不同的字号,提高了内容的阅读性,主次也更加分明。

Flyme 1130 正式版_佛.036.jpeg


比如通话记录里,第一行联系人或未知号码增加字重而第二行信息则减小字号,主次关系明了;

Flyme 5电话

Flyme 5电话

Flyme 6电话

Flyme 6电话


同时规划了全新的数学般精确的网格体系,重新调整版面的行间距,排版更加简洁和规整,提升了阅读上的舒适度和愉悦感,尤其在文字显示较多的应用比如资讯、邮件、信息等,这种排版上的优化提升效果更为明显。

屏幕快照 2016-12-29 下午3.02.16.png


理论根据

那Flyme 6为什么要采用内容设计,这背后有什么更深层次的原因,最重要的是到底能给用户带来哪些体验上的提升呢?

我们知道在智能手机发展萌芽的早期,主要推行的是拟物化的视觉语言,它遵循的核心理念是“所见即所得”,让界面十分鲜明地呈现在用户面前,强调的是界面的“指引性”,我们可以看到各种精细并富有真实感的图标、按钮等元素,逼真的拟物化可以跟现实生活产生映射,拉近用户的心理距离,降低学习成本,这对处于智能手机起步阶段“教育期”的用户来说,是最为直接有效的方式。

但过分强调突出的界面(即形式)不但占据了宝贵的屏幕空间,干扰用户视线,而且违背了内容为主体的宗旨,有点本末倒置,主次不分,没有聚焦于“内容”这个本质的核心,淡化了“信息”的重要性,这是它最大的不足和缺陷。

到了智能手机发展相对成熟的中期,对于“成长期”的用户来说,内容才是真正需要关注的焦点,必须弱化界面(形式)的存在感,减少它的显示面积,突出内容的“重要性”,回归到信息传递的本质上来。这也是扁平化视觉语言盛行背后的根本原因所在,所以我们可以看到之前存在感很强的按钮形状、大小以及色彩都逐渐弱化了,把更多的显示空间让位给了内容,同时大力提升内容(主要是文字)的阅读性和重要性。比如说浏览器,当用户进行下滑浏览时,上下的地址栏和底部栏会自动隐藏,让整个界面都显示网页画面,展示用户真正关注的焦点内容。

Flyme 1130 正式版_佛.037.jpeg


当然,广义上说的“内容”包括但不局限于文字,文字只是内容中的一个重要载体,只要是能让用户获取到所真正需要的信息都可以叫“内容”,比如部分色彩营造出的氛围、情景,甚至一些动画特效,最典型的例子就是天气应用,各种特效可以迅速让用户清楚当前的天气情况,这个时候,界面(形式)和内容相当于合为一体,并没有很明确的界线了。所以严格来说,只有当界面(形式)和内容有显著区别时,才应该突出内容而弱化界面(形式)。

如果再往深里一点说,这是主次关系发生了重大变化,按照“形式(界面)追随功能(内容)”的共性法则,功能(内容)必然优先于形式(界面),也就是保持功能(内容)为主形式(界面)为次的关系。

视觉演化

让我们再次把目光回到Flyme宏观的设计演化进程上,可以看到它的视觉风格从第一代开始的拟物化,循序渐进地过渡到了现在流行的扁平化,色彩体系也从相对保守的灰度逐步变换成大胆的彩色,形式(界面)和功能(内容)主次关系也趋向更为合理的方向,将功能(内容)提升到重要的第一位,让Flyme变得好“看”(视觉)的同时也变得更好“看”(阅读),这是视觉设计未来的趋势,也是信息传达原本该有的样子。

Flyme视觉演化.png