從大學(xué)時代開始我一共買過三款魅族手機：mx2,mx4和Pro5。使用過的Flyme系統(tǒng)也是從2.0到如今的6.0跨過了好幾個階段瓷蛙。在更新了Flyme6.0之后歌径，我覺得魅族的UI設(shè)計可謂真的是走到的UI流行的前沿亿絮，MBE風(fēng)格圖標(biāo)的繪制鼠锈，短線導(dǎo)航欄的改變，banner圖片運用的彌散投影晨抡，都是時下比較流行的UI風(fēng)格氛悬。
Flyme的UI風(fēng)格主要以清新淡雅為主。尤其是Flyme6.0開始耘柱，風(fēng)格有比較大的轉(zhuǎn)變如捅，交互方面也有一些變化（尤其是我覺得讓我十分菊緊的音量調(diào)節(jié)功能）。官方自稱更新了幾百項內(nèi)容调煎，增加了二百多個全新的動畫效果镜遣，我今天想就我自己比較在意的地方談一談Flyme的更新。
1.鎖屏界面的變化：采用大空隙分割代替線條分割
Flyme6的鎖屏界面的通知將之前的線條去掉改成了空隙的風(fēng)格士袄，這種風(fēng)格自從iOS10的發(fā)布以來大為流行悲关。尤其是在iOS的音樂播放器風(fēng)格的轉(zhuǎn)變上，大字體加上大間隔的風(fēng)格讓人的印象尤為深刻娄柳，簡潔而不失優(yōu)雅寓辱。魅族這次在鎖屏通知上借鑒了這種風(fēng)格，在我看來是個不錯的選擇赤拒。會顯得鎖屏頁面更加的清爽秫筏。不過這種設(shè)計的缺點就是增加使用的空間诱鞠，尤其在通知比較多的時候，原本一屏可以看完的通知卻需要滑動这敬，可能會影響到用戶體驗航夺。
893658a66aaca801219c777a65bf.jpg
2頁面圖標(biāo)投影的加重
這次的Flyme6的更新，給系統(tǒng)所有的頁面圖標(biāo)加上了一個小小的投影崔涂。雖然現(xiàn)在已經(jīng)進入了扁平化2.0時代敷存，受Material Design的影響，設(shè)計會有更多的維度堪伍，往空間上發(fā)展。許多扁平化的設(shè)計已經(jīng)開始加了一些投影觅闽，走向“半扁平”的設(shè)計帝雇。但是其實這種投影更多地是運用在區(qū)分層次關(guān)系，明確操作邏輯而使用蛉拙。而Flyme6這次圖標(biāo)投影的使用尸闸，卻沒有這種目的性，反而破壞了Flyme素來以清新淡雅的設(shè)計風(fēng)格孕锄。如果桌面背景換成一個淺色甚至白色吮廉，就會發(fā)現(xiàn)圖標(biāo)的投影顯得異常的突兀。更加令人尷尬的是畸肆，F(xiàn)lyme6的文件夾是沒有投影的宦芦，如果一個頁面中既有圖標(biāo)又有文件夾并且排列不規(guī)則的話，那頁面會顯得圖標(biāo)一高一低轴脐，十分難受调卑。
ffe358a66ac7a801219c77e3dbb5.jpg
3.圖標(biāo)的設(shè)計的改變：粗線條和MBE風(fēng)格圖標(biāo)的使用
Flyme6中圖標(biāo)的變化是令我比較欣喜的。首先大咱，在魅族一些系統(tǒng)應(yīng)用中恬涧，默認(rèn)圖標(biāo)的風(fēng)格更加的統(tǒng)一，都采用的是粗描邊加單色的線性圖標(biāo)碴巾，相當(dāng)一致溯捆，讓人看起來十分的舒服。當(dāng)然這在國產(chǎn)的系統(tǒng)UI中已經(jīng)相當(dāng)不錯了厦瓢，但我的建議是如果圖標(biāo)可以采用現(xiàn)在比較流行的雙色線性圖標(biāo)提揍，用一種明度飽和度較低的顏色作為基礎(chǔ)色，其他的顏色作為點綴設(shè)計的話旷痕，視覺效果可能會顯得更加統(tǒng)一碳锈。
然后，就是Flyme6中大量的運用巴黎設(shè)計師MBE風(fēng)格的圖標(biāo)欺抗，這種圖標(biāo)自從在dribbble上大熱之后售碳，就成為16年最為流行的一種風(fēng)格。但是很奇怪的是我在國內(nèi)的應(yīng)用中并不常見，這次Flyme6的大量使用贸人，甚至都已超過了大部分國產(chǎn)app的UI间景。Flyme6中MBE風(fēng)格的圖標(biāo)主要應(yīng)用在缺省頁，動效加載以及某些需要大圖標(biāo)的頁面上艺智。尤其在手機管家中倘要，一鍵優(yōu)化之后的動效以及圖標(biāo)的使用都比較的巧妙。
980f58a66b58a801219c774a9af1.jpg
4.彌散投影的運用
彌散投影也是在16年自dribbble火起來的一種風(fēng)格十拣，其設(shè)計風(fēng)格就是給一些圖標(biāo)或者其他元素加上一個與它環(huán)境色相關(guān)的投影封拧。在進入扁平化2.0時代之后，為了顯示出某個元素的層級一般可以給它加一個投影夭问。一般的投影都是黑色加不透明度泽西，在一些頁面中可能十分突兀。但是彌散投影因為加的是該元素的環(huán)境色缰趋，就會減少甚至避免這種尷尬捧杉，使整個頁面的色彩更加的統(tǒng)一。然而這種投影方式在國內(nèi)app和網(wǎng)頁中也并不常見秘血，只是可能一些提示性的小點會使用味抖，并無大面積的使用。這次魅族很大膽的使用了彌散投影灰粮，在資訊頁面應(yīng)用商店等系統(tǒng)app的banner中仔涩，都可以看到。我覺得這是一種很好的嘗試粘舟，如果更大膽激進一些的話可以在信息的Material Design懸浮按鈕上甚至一些頁面的功能性按鈕上都可以嘗試一下红柱。
aa0558a66b7ea801219c77875e09.jpg
5.Tab切換短線的使用
魅族這次tab切換使用的短線是真短。短到讓我覺得覺得已經(jīng)不是很美觀了蓖乘，如果再長一點可能會更好锤悄。短線這里的處理風(fēng)格和默認(rèn)圖標(biāo)的風(fēng)格一致，都是沒有圓角的單色處理嘉抒。我覺得如果再長一點零聚，默認(rèn)圖標(biāo)和它都加一點圓角，效果可能會好點些侍。
187958a66b9fa801219c776a09c6.jpg
以上就是我對Flyme6 UI的一些看法~
