UI设计比较之Flyme5与iOS9

4年前发布

原创文章 / UI / 教程
谁是波波曹 原创,如需商业用途或转载请与谁是波波曹联系,谢谢配合。

本文通过视频和图例,来分析和比较魅族机的Flyme5与苹果机iOS9 UI界面设计的差别。通过了解它们,对于移动设计,用户体验或许会有更深的认识。一起来看看苹果和魅族是怎么做UI界面设计的。

419557433be432f8759a3e954ae0.jpg


今天比较的是我所欣赏的2套UI界面设计,Flyme5.1与iOS9.3,分别代表了魅族和苹果的界面设计水平,关注的几年下来,二者都有很大的进步,他们如此不同,又那么相似;不同在于他们的个性,一个大胆突破,色彩缤纷,一个沉着冷静,步步为营;相似在于他们对于简洁的追求,设计上精益求精;我是一个喜新厌旧的人:),iOS系统下用了很久之后,真的觉得很单调,没什么生气,升级之后的改动也是很细微,虽然如此,其简单易用确实屌,连我6岁的小侄子,没碰过iphone手机,很快就能上手打游戏。;魅族Flyme系统给了我不一样的感觉,赋予每个应用性格,而又和谐统一于一体,下面的部分内容我将以视频和截图结合自身的体验来对比他们的界面设计。

我手机的使用经历

从iPhone4开始了解和使用苹果机,当时是朋友的手机,后面开始用5,iPhone5s用的时间最长,差不多2年时间直到最近,2013年时出来的ios7感觉非常漂亮,至今还记得当时拿到手机感觉棒棒哒;魅族机应该是从Flyme4开始用起来的,当时为了给我爸买台能过我审美关的手机(其实是因为没钱),就选择了魅族魅蓝系列,把玩了一段时间才寄给我爸,当时的感觉就是界面还蛮精致舒服,ID设计的手感也不错;今年3月买了自己用的魅族MX5,结合这2个月闲暇时间的把玩,抽空总结一下二者之间的差异,顺便和同好交流一下;

关于视频

视频主要比较苹果手机与魅族手机UI界面设计,分别进行了基础功能、部分系统app、还有一些常用的app界面的设计比较,观看视频可以直观感受其中差别,从系统操作,和app设计,动效设计等方面;这个视频分别用的魅族MX5 Flyme5系统和苹果iphone 6s plus iOS9系统进行的操作演示。非常感谢同事建冬帮忙拍摄视频~,拍摄仓促,许多精彩的功能点没有录进去,不足的地方还望多多指教~~~





PART1【发展历程】

不了解过去就理不清现在,先把它们系统迭代的进程理出来,方便比较。他们都是在第一代的风格的基础上不断完善的结果,比如苹果一直坚持每个icon都是圆角,魅族则将icon设计成不规则形态;在使用手机时,有时会感觉魅族是故意再跟苹果对着干,你上我就下,你左边我就右边→_→,打的很欢。

Flyme 1.0 ~ 5.0  更新了5代,期间 魅族在界面设计上的大胆尝试,比如,从2.0上的“侘寂”美学到体现的年轻多彩的设计风格的5.0,跨度很大;

eecd574185be32f875b70fdc89d2.jpg


iOS1.0 ~ 9.0,更新了9代,从图中看到iOS6到iOS7是iOS界面设计的转折点。

87d9574185cc6ac725ac3f8ab49c.jpg



PART2  【系统ROM设计比较】

(1)关键词对比,这是从网络上了解到,和自己的体验中提炼出来的关键词;


c3655741864832f875b70f81d078.jpg



(2)基础操作、基本功能的比较

Flyme在易用性上做了很多的创新,设计上下足了功夫,虽然有明显的“借鉴”的痕迹存在,但Flyme有很多地方青出于蓝胜于蓝。

01/

任务管理,采用了安卓原生的任务切换方式,不如iphone目前的方便,向上滑动似乎更加符合人使用手机的习惯操作,Flyme一键清除所有任务的功能还是很讨巧的,比iphone一个一个删除来的高效;

删除应用,flyme稍显复杂,因为要移动app到界面顶部才可删除,不如iphone来的那么轻松,适当的增加难度对于app的留存是有帮助的,但是这是用户想要的吗?我觉得苹果的icon删除更人性化~

0ba85741866a6ac725ac3f622e3c.jpg


02/

通知中心和控制中心,都是毛玻璃的处理,Flyme可一键清除,而ios还是要一条一条清除。ios系统下控制中心通知中心是分开的,分别为上滑动界面和下滑界面展现,而FLyme系统下则是集中处理。在手机屏幕较大的情况下,处于屏幕下方的内容更适合单手操作,也就更高效一些;

icon通知角标,Flyme取消了icon通知角标,使得界面看起来变整洁了许多,app消息通知可以去通知中心查看,或者打开app,否则不可见,起初我以为会让我不够及时的处理消息,使用一段时间后,觉得并不会对我产生影响,反而感觉世界变得清净了许多,不用再天天强迫症的点完所有的未读消息才睡觉了,我觉得这是一个很大胆的设计,且体验还不错;41e75741868d32f875b70fc431ec.jpg

03/

搜索以及语音。搜索对于快速找到app,寻找联系人什么的还是很方便的,至于语音,我看2者都没太大用处,离智能还差很远。苹果的“Hey,siri”功能, 即便手机熄屏也可直接唤醒siri,不用点按,可谓解放双手啊~~需要设置才可以使用,苹果的语音系统相对来讲还是成熟一些吧;

4c165741869c6ac725ac3f1b28cf.jpg


PART3   【系统自带app设计比较】

2者都有自己的设计语言,看到一个app,就可以轻松分辨所属哪个平台,iOS整个系统的app是非常统一的,基本上结构非常固定,上面展现内容,下面切换tab,配色也相对统一;而Flyme则更加多样化,正如其官网所述:“遵守设计规范与偶尔俏皮写意”,总之动感十足,下面举几个栗子,抛砖引玉~


同样都是短信,Flyme则进行了信息的分类,通知类分开查收(比如银行短信),搭配相应的设计,让人更加直观地看到内容。头像自动分配颜色,方便区分;


Flyme关于store这里也是分类清晰些,app展示页下载应用时,由于app介绍信息内容突出,下载button很大,动效设计合理,因此给人感觉很爽啊;


在时钟应用这里其实可以明显感觉到,2者在应用布局上面的差异,Flyme将大的分类放在顶部,而iOS则放置下方,然后一般Flyme添加新内容按钮在底部居中,而iOS则在右上角;


早上打开天气app基本能直观感受到今天的天气状况,FLyme,将温度的变化设计成一条会随着温度高低变化的曲线,如下图,直观且有点趣味性,让原文硬生生的分割不再单调,下面还提供空气重量,风力,湿度等信息,也会提供出行建议,相对iOS的天气会更加全面贴心;还是国产魅族的了解人们关心什么;



相机app主要的差别在于功能切换方式,如下图,iOS是左右滑动,相对Flyme的点击切换,是更加容易误操作的,我就经常拍照片的时候,按成了视频;但苹果的切换更加简单方便,Flyme则更加准确;



日常第3方app使用差别则并不大,比如下载个站酷,微信,支付宝什么的,界面都差不多,你不去比较是不好分辨的,可能是为了便于管理,节约设计成本。很多app为了节约开发成本,一般先开发ios,再针对安卓做屏幕,性能适配;另一方面,有些第3方的应用,为了追求更好的体验,会适配不同平台的用户习惯与设计规范,比如说Flipboard和light这2款app,如下图;

0e1757432b9232f8759a3e450ae3.jpg



PART4  【 Flyme的亮点与糟点】

iOS上有许多牛叉技术和功能大家耳熟能祥,比如3Dtouch,airdrop,Live Photos,单手模式等,糟点也不少,比如自带超多无用app,还卸载不了,这里就不细讲了,重点说说Flyme;

 Flyme亮点

(1)手机分屏,看起来酷炫,但是目前我还没找到比较合适的使用场景,一般来讲都是无用的,不是写这篇文章,我是记不起要用它的;边聊微信边购物,边看地图,边写备忘录,这些都不是问题。

(2)电话黄页&智能识别诈骗。黄页可以轻松找服务啊;通过建立数据库来识别和发现诈骗推销等电话,通过设计让人提高预警,非常直观的分辨诈骗电话推销电话等,情景化设计杰作~

e439574187506ac725ac3f75de11.jpg

(3)摇一摇整理图标&批量整理图标,在整理图标模式下手机摇一摇,图标便能从左到右,从上到下自动排列。对于安卓机经常出现的图标不整齐,一键调整,处女座福音。。(此图源自网络)


c709574187716ac725ac3fe226b9.jpg



Flyme的糟点

fllyme系统下依然可以看到各种浮窗,不加节制的浮窗,各式各样的都有,影响观感,为何不统一样式?

5f9b57418d326ac725ac3faff8ca.jpg

另外很多应用只能在ios上面下载到,比如psplay(可以去网页搜索后下载),sketch mirror(受平台限制) 买个安卓机难道还要标配一个苹果机?是的,做UI设计确实应该标配一台iphone



小结

设计和科技有一个共同点就是更新换代特别快,今天看这个设计还好,等到明年再来看就不一样的味道了,就像你现在看iphone4s的界面一样,可能会想当时怎么会觉得那个界面这么漂亮,现在看明明很挫。在iOS越来越安卓化,安卓越来越iOS化的大背景下,如何继续保持差异性的同时,依然有非常好的易用性,并持续提升用户体验,这是任何做手机的公司都需要思考的问题;关注当下设计的意义,不止是为了“借鉴”,也是为了搞清楚规则,总结和思考,并不断突破。


c2cf574194e232f875b70f0b938b.jpg


(笔者水平有限,期待补充,批评或交流)

如果觉得本文有用,帮点赞,祝升职加薪,射~

 


19
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息