Flyme6 UI分析

从大学时代开始我一共买过三款魅族手机：mx2,mx4和Pro5。使用过的Flyme系统也是从2.0到如今的6.0跨过了好几个阶段。在更新了Flyme6.0之后，我觉得魅族的UI设计可谓真的是走到的UI流行的前沿，MBE风格图标的绘制，短线导航栏的改变，banner图片运用的弥散投影，都是时下比较流行的UI风格。
Flyme的UI风格主要以清新淡雅为主。尤其是Flyme6.0开始，风格有比较大的转变，交互方面也有一些变化（尤其是我觉得让我十分菊紧的音量调节功能）。官方自称更新了几百项内容，增加了二百多个全新的动画效果，我今天想就我自己比较在意的地方谈一谈Flyme的更新。
1.锁屏界面的变化：采用大空隙分割代替线条分割
Flyme6的锁屏界面的通知将之前的线条去掉改成了空隙的风格，这种风格自从iOS10的发布以来大为流行。尤其是在iOS的音乐播放器风格的转变上，大字体加上大间隔的风格让人的印象尤为深刻，简洁而不失优雅。魅族这次在锁屏通知上借鉴了这种风格，在我看来是个不错的选择。会显得锁屏页面更加的清爽。不过这种设计的缺点就是增加使用的空间，尤其在通知比较多的时候，原本一屏可以看完的通知却需要滑动，可能会影响到用户体验。

893658a66aaca801219c777a65bf.jpg

2页面图标投影的加重
这次的Flyme6的更新，给系统所有的页面图标加上了一个小小的投影。虽然现在已经进入了扁平化2.0时代，受Material Design的影响，设计会有更多的维度，往空间上发展。许多扁平化的设计已经开始加了一些投影，走向“半扁平”的设计。但是其实这种投影更多地是运用在区分层次关系，明确操作逻辑而使用。而Flyme6这次图标投影的使用，却没有这种目的性，反而破坏了Flyme素来以清新淡雅的设计风格。如果桌面背景换成一个浅色甚至白色，就会发现图标的投影显得异常的突兀。更加令人尴尬的是，Flyme6的文件夹是没有投影的，如果一个页面中既有图标又有文件夹并且排列不规则的话，那页面会显得图标一高一低，十分难受。

ffe358a66ac7a801219c77e3dbb5.jpg

3.图标的设计的改变：粗线条和MBE风格图标的使用
Flyme6中图标的变化是令我比较欣喜的。首先，在魅族一些系统应用中，默认图标的风格更加的统一，都采用的是粗描边加单色的线性图标，相当一致，让人看起来十分的舒服。当然这在国产的系统UI中已经相当不错了，但我的建议是如果图标可以采用现在比较流行的双色线性图标，用一种明度饱和度较低的颜色作为基础色，其他的颜色作为点缀设计的话，视觉效果可能会显得更加统一。
然后，就是Flyme6中大量的运用巴黎设计师MBE风格的图标，这种图标自从在dribbble上大热之后，就成为16年最为流行的一种风格。但是很奇怪的是我在国内的应用中并不常见，这次Flyme6的大量使用，甚至都已超过了大部分国产app的UI。Flyme6中MBE风格的图标主要应用在缺省页，动效加载以及某些需要大图标的页面上。尤其在手机管家中，一键优化之后的动效以及图标的使用都比较的巧妙。

980f58a66b58a801219c774a9af1.jpg

4.弥散投影的运用
弥散投影也是在16年自dribbble火起来的一种风格，其设计风格就是给一些图标或者其他元素加上一个与它环境色相关的投影。在进入扁平化2.0时代之后，为了显示出某个元素的层级一般可以给它加一个投影。一般的投影都是黑色加不透明度，在一些页面中可能十分突兀。但是弥散投影因为加的是该元素的环境色，就会减少甚至避免这种尴尬，使整个页面的色彩更加的统一。然而这种投影方式在国内app和网页中也并不常见，只是可能一些提示性的小点会使用，并无大面积的使用。这次魅族很大胆的使用了弥散投影，在资讯页面应用商店等系统app的banner中，都可以看到。我觉得这是一种很好的尝试，如果更大胆激进一些的话可以在信息的Material Design悬浮按钮上甚至一些页面的功能性按钮上都可以尝试一下。

aa0558a66b7ea801219c77875e09.jpg

5.Tab切换短线的使用
魅族这次tab切换使用的短线是真短。短到让我觉得觉得已经不是很美观了，如果再长一点可能会更好。短线这里的处理风格和默认图标的风格一致，都是没有圆角的单色处理。我觉得如果再长一点，默认图标和它都加一点圆角，效果可能会好点。

187958a66b9fa801219c776a09c6.jpg

以上就是我对Flyme6 UI的一些看法~