恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Flyme6 UI 设计分析
0.0°
2017-02-17 原创文章 经验/观点 举报 3542 6 15 3

关注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的音乐播放器风格的转变上,大字体加上大间隔的风格让人的印象尤为深刻,简洁而不失优雅。魅族这次在锁屏通知上借鉴了这种风格,在我看来是个不错的选择。会显得锁屏页面更加的清爽。不过这种设计的缺点就是增加使用的空间,尤其在通知比较多的时候,原本一屏可以看完的通知却需要滑动,可能会影响到用户体验。

Image title


2.页面图标投影的加重

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

Image title


3.图标的设计的改变:粗线条和MBE风格图标的使用

Flyme6中图标的变化是令我比较欣喜的。首先,在魅族一些系统应用中,默认图标的风格更加的统一,都采用的是粗描边加单色的线性图标,相当一致,让人看起来十分的舒服。当然这在国产的系统UI中已经相当不错了,但我的建议是如果图标可以采用现在比较流行的双色线性图标,用一种明度饱和度较低的颜色作为基础色,其他的颜色作为点缀设计的话,视觉效果可能会显得更加统一。

然后,就是Flyme6中大量的运用巴黎设计师MBE风格的图标,这种图标自从在dribbble上大热之后,就成为16年最为流行的一种风格。但是很奇怪的是我在国内的应用中并不常见,这次Flyme6的大量使用,甚至都已超过了大部分国产app的UI。Flyme6中MBE风格的图标主要应用在缺省页,动效加载以及某些需要大图标的页面上。尤其在手机管家中,一键优化之后的动效以及图标的使用都比较的巧妙。

Image title

Image title


4.弥散投影的运用

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

Image title


5.Tab切换短线的使用

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

Image title


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






更新:2017-02-17

收藏

6人已收藏

执迷Obsession

站酷:obsession.zcool.com.cn

  • 15

    作品

  • 116

    粉丝

  • 16

    关注

  • 交互分析:什么时候该使用target=_blank
  • 预加载下页的创新交互方式
  • mBack交互方式分析
  • C4D菜鸟练习
相关标签

    猜你喜欢

      2017-02-17 原创文章 经验/观点 举报 3542 6 15 3

      Flyme6 UI 设计分析

      0.0°

      你确定要举报Flyme6 UI 设计分析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年02月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      6
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录