魅族官方詳解Flyme界面設(shè)計(jì)

2014-5-27    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.820esy.cn  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://news.mydrivers.com/1/300/300328.htm

魅族官方今天發(fā)文,詳細(xì)解釋了有關(guān)Flyme界面的設(shè)計(jì)理念和進(jìn)化。魅族表示,簡潔,一直是魅族崇尚的信條之一。從早期M8的驚艷亮相開始,魅族概括式的設(shè)計(jì)理念已經(jīng)貫穿了整個(gè)機(jī)器內(nèi)外。

Flyme系統(tǒng)是魅族專門為旗下手機(jī)開發(fā)的一套基于Android深度定制的系統(tǒng)。2009年2月18日魅族推出第一個(gè)基于Windows CE6.0內(nèi)核的正式版本手機(jī)操作系統(tǒng)(只適用于魅族M8,稱為Mymoblie操作系統(tǒng)),此后推出了為M9及MX深度定制的基于Android 2.2和Android 2.3的操作系統(tǒng)(未正式確立專有名稱),直到2012年6月25日才將為旗下手機(jī)基于Android 4.0.3的手機(jī)操作系統(tǒng)正式確立為“Flyme”。Eico Design亦參與其設(shè)計(jì)。此系統(tǒng)正式版本為適用于MX3的Flyme 3.0。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

Flyme系統(tǒng)是魅族設(shè)計(jì)理念在軟件更深層上的體現(xiàn),也是魅族手機(jī)的核心競爭力之一,被魅族稱為“產(chǎn)品的靈魂所在”。

借此之機(jī),讓我們一起來了解一下Flyme的設(shè)計(jì)精髓

簡潔,一直是魅族崇尚的信條之一。從早期M8的驚艷亮相開始,魅族概括式的設(shè)計(jì)理念已經(jīng)貫穿了整個(gè)機(jī)器內(nèi)外。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

而同期的主流智能手機(jī)長相是這樣:

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

這些曾經(jīng)紅極一時(shí)的設(shè)備在當(dāng)時(shí)算是潮物了,可今天看來,依然有上個(gè)時(shí)代濃濃的印記?;仡^看看M8,現(xiàn)在仍然是一款值得欣賞的機(jī)器。這是為什么?

至簡,方不能被超越

M8的設(shè)計(jì)高度概括了手機(jī)的外形,除了手機(jī)本身的圓滑輪廓之外,沒有額外多余的凹凹凸凸。任何的異形都會被賦予嚴(yán)重的時(shí)代印記,只有朝著至簡的方向前行,才能獲得恒久。

這也是我今天想說的,借助M8的ID設(shè)計(jì)開頭,談一談Flyme系統(tǒng)的圖標(biāo)進(jìn)化演變的歷程。

先上一張預(yù)覽圖,這是從M8至MX3(Flyme 3.0)的部分圖標(biāo)進(jìn)化過程。(感謝魅族匯整理)

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

雖然M8搭載的是Windows CE時(shí)代的產(chǎn)物,M9及之后的MX系列都轉(zhuǎn)變?yōu)锳ndroid系統(tǒng),但M8的一些圖標(biāo)在今天仍然得到了很好的傳承。

簡潔是進(jìn)化

在人類的進(jìn)化歷程中,隨著人們對事物的認(rèn)知提高,由具象到抽象的映射能力更加完善。我們生活中的產(chǎn)品也在慢慢的變的更為抽象。

例如,我們可以清晰地知道魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念這個(gè)按鈕是播放, 魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念而這個(gè)按鈕是暫停。

它們與現(xiàn)實(shí)中我們所認(rèn)識的樣貌相去甚遠(yuǎn),甚至在使用它的過程中我們從不會去考究它為什么是這個(gè)樣子,只知道這是播放與暫停。實(shí)際上這都是一步步演化而來,在這過程中摒棄一些復(fù)雜的元素,歸納為簡單明了的形狀,讓人們逐漸習(xí)慣、理解并適應(yīng)了這樣的認(rèn)知過程。

再例如下載,這是一個(gè)現(xiàn)實(shí)中并不存在的行為,人們?nèi)绾闻c其建立映射關(guān)系?

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念初始,人們覺得一個(gè)箭頭表示下載,一個(gè)硬盤代表本機(jī),箭頭指向自己的硬盤,表示“下載”。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念而如今,你可能只畫成這樣,人們便可以理解它是做什么用的。類似圖標(biāo)還有分享(Share)、刷新(Refresh)、更多(More)等。

歸根結(jié)底,這是具象到抽象的一個(gè)過程,在這當(dāng)中,人們逐漸拋棄無用的過多元素,改用更簡潔的線條(方式)去概括原本的形狀。在傳播過程中,簡潔的內(nèi)容可以更低成本但卻更形成快速傳播和記憶,無需人們?nèi)ハ?xì)節(jié),直接觸碰大腦最直接的記憶輪廓。所以,簡潔,是人類社會的趨勢。

好的歷史需要傳承

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

時(shí)鐘:從M8到MX3的視覺變化在于:去除表盤外殼的高光,去除指針的外發(fā)光,簡化表盤邊緣的金屬質(zhì)感,去掉秒針和去除表盤的黑色漸變。最終你所看到的形狀,仍然可以非常清晰地知道它就是個(gè)“時(shí)鐘”,冗余的“效果”在演化過程被一一剔除,而配色仍得到很好的傳承,設(shè)計(jì)方向也愈加明確。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

設(shè)置:具象的齒輪本身屬于擬物的設(shè)計(jì)方式,形狀太過粗暴,是似而非。最終,提取其金屬灰色,將整個(gè)齒輪變?yōu)橐粋€(gè)按鈕,上面的圖形則簡化為剪影,遠(yuǎn)比單色的齒輪剪影要更好。

創(chuàng)造新形狀:

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念
 

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

瀏覽器:M8時(shí)代的瀏覽器是一個(gè)具象的地球,與當(dāng)時(shí)的PC瀏覽器外觀一致,但恰恰由于細(xì)節(jié)復(fù)雜,難于記憶,并且沒有打出魅族品牌與其它瀏覽器的差異化。然而,創(chuàng)造一個(gè)新形狀的成本很高,人們對新事物的未知會造成對圖標(biāo)表意的理解缺失。新的瀏覽器圖標(biāo)外輪廓仍然保持了圓形(映射地球),中心的M意在強(qiáng)調(diào)魅族品牌,圓環(huán)則表示載入進(jìn)度,我們通過這種方式來讓用戶在數(shù)年間成功建立了映射關(guān)系,并以此維護(hù)用戶對“魅族瀏覽器”的認(rèn)知。

在系統(tǒng)主界面的背景設(shè)計(jì)上,我們同樣盡可能為扁平化的圖標(biāo)提供視覺景深。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

所以我們并沒有試用傳統(tǒng)的實(shí)景圖片,實(shí)景圖片會對扁平的圖標(biāo)造成視覺上的干擾,所以我們選擇用色彩的跨度去區(qū)分桌面與圖標(biāo)之間的視覺景深,選用了更灰、更深的顏色,而圖標(biāo)則選用更明快的色彩。通過明度、飽和度的區(qū)分,在視覺上可以更直接快速的分層。

魅族官方發(fā)文詳解Flyme界面設(shè)計(jì)理念

如同保時(shí)捷的汽車一樣,在Flyme數(shù)年的進(jìn)化中,我們保持了屬于Flyme的DNA,好的設(shè)計(jì)一定有可以恒久傳承下來的東西。

If you have something good,don’t change it,make it better.

分享本文至:

日歷

鏈接

個(gè)人資料

存檔