Win8 Metro風(fēng)格界面在iphone APP中的視覺體現(xiàn)

0 評論 19049 瀏覽 1 收藏 10 分鐘

Win8的界面設(shè)計,顛覆了Windows傳統(tǒng),大膽引用了WP7的Metro界面,又結(jié)合了Win7的傳統(tǒng)操作界面,打破了人們對微軟操作系統(tǒng)一成不變的看法,并揭示出Windows引領(lǐng)未來操作系統(tǒng)的決心和野心。

Win7的界面風(fēng)格大受歡迎,影響了微軟對Win8的界面設(shè)計。在Win7大受歡迎的基礎(chǔ)上,本人完全沒想到Win8會設(shè)計成這個樣子……但是他就這么來了。雖然本次Win8未曾提到Aero透明效果,但我們還是從它的傳統(tǒng)界面上看到了一些相似的地方,但Win8界面確實(shí)再次得到了提升,已經(jīng)不以Aero為主打,轉(zhuǎn)向Metro和Ribbon界面。

 

什么是“Metro”?“Metro”已經(jīng)不是一個新詞,本意是指“地鐵”??v觀機(jī)場、地鐵、公交線路圖等,會發(fā)現(xiàn)這些導(dǎo)視設(shè)計都具有高度概括性,對比度強(qiáng)烈等特點(diǎn),并被用來指導(dǎo)人們更快的找到自己要往的目的地。這個設(shè)計語言正是源于交通導(dǎo)視圖的這些特點(diǎn)而產(chǎn)生的靈感。

 

Metro在移動設(shè)備的界面設(shè)計語言,最早是出現(xiàn)在微軟推出的Windows Phone 7上

 

從視覺上看,比較突出的特點(diǎn)是:

整個界面展現(xiàn)出的“圖標(biāo)”完全跟 “圓角、漸變、陰影、光澤感”說拜拜,用純二維以及高度概括性弱化了視覺上的復(fù)雜性,讓用戶沒有過多的往關(guān)注圖標(biāo)本身,而是增加其辨識性和標(biāo)識性,達(dá)到強(qiáng)化內(nèi)容和信息的目的。

在一個充斥著各種漸變和各種效果的時代,WP7能如此大膽地拋開了傳統(tǒng)視覺設(shè)計語言的束縛,不惜代價地進(jìn)步視覺上的清楚度和辨識度,把追求簡潔發(fā)揮到了極致。

如今,隨著iphone 各種APP的不斷更新,我們可以從一些APP中,看出明顯的Win8 Metro風(fēng)格:

《面包旅行》

榮獲蘋果App Store 2012 年度最佳應(yīng)用,設(shè)計風(fēng)格顛覆以往的漸變質(zhì)感,清新的顏色和平面化的元素是亮點(diǎn)

 

《諾基亞HERE Maps》

HERE 的界面看上去和塞班系統(tǒng)很像,在細(xì)節(jié)處又凸顯出不少 Windows Phone 的風(fēng)格。

 

《ISO500》

500px 第三方客戶端,Metro風(fēng)格盡顯

 

“Metro”作為一種新的設(shè)計語言出現(xiàn)在移動終端中,更像是一種現(xiàn)象的延續(xù),不管是在界面還是體驗(yàn)上,都需要有一個差異化的核心價值,當(dāng)這種體驗(yàn)的核心價值表現(xiàn)在內(nèi)容至上時,無所謂對與錯,進(jìn)步或后退。

所謂的視覺次于內(nèi)容,并不意味著視覺設(shè)計的地位被減弱了,相反更需要設(shè)計師提煉“設(shè)計”。

 

————————————-華麗的分割線—————————————–

補(bǔ)充一篇文章

【iShout】Metro UI 的簡潔是另一種復(fù)雜

作者:蘇園

Metro UI 推出來的時候,對比其他系統(tǒng)的圖標(biāo)海洋,確實(shí)讓人眼前一亮,活動格窗取代圖標(biāo),內(nèi)容取代形式,微軟的宣言是讓智能手機(jī)用戶有更高的效率得處理事務(wù),而不是專注于智能手機(jī)本身。
但果真如此嗎?在我看來,Metro UI 設(shè)計得的最初目的是簡潔,最后產(chǎn)生的結(jié)果卻不一定是簡潔。

細(xì)線

Metro UI 中的一大特色就是內(nèi)容的無邊框設(shè)計,通過間隔和字體使內(nèi)容產(chǎn)生自發(fā)性質(zhì)的分隔,而不必通過邊框等介質(zhì)。在展示少量內(nèi)容時,簡潔的特性可以很好的體現(xiàn),但在處理大量內(nèi)容時,卻會表現(xiàn)出“擁擠”。由于沒有分割線,不同的內(nèi)容之間只能通過留白來分隔,導(dǎo)致文字積壓,擠占了屏幕的表現(xiàn)空間,進(jìn)一步造成了內(nèi)容的“擁擠”。

 

wps_clip_image-21527

以設(shè)定中“關(guān)于本機(jī)”選項(xiàng)為例,iOS 的細(xì)線分隔顯得更明快,獲取信息更清楚容易。細(xì)線是最簡單的內(nèi)容區(qū)分的形式,Metro UI 對這區(qū)分形式的舍棄導(dǎo)致整個屏幕上只有孤零零的文字,直接發(fā)現(xiàn)有用信息困難。

細(xì)線的分隔也是一種更人性化的暗示,它讓內(nèi)容看上去更像一個按鈕,暗示著可以按下并激發(fā)新的內(nèi)容。而Metro UI 中的內(nèi)容則會讓人疑惑這是單純的文字還是可以繼續(xù)點(diǎn)擊查看。Metro UI 的功能性暗示更加不明確。

顏色與圖標(biāo)

Metro UI 在顏色的應(yīng)用上既激進(jìn)又保守,激進(jìn)的是它可以把界面弄得五彩斑斕,保守的是在應(yīng)用內(nèi)的界面不著一墨。

wps_clip_image-17044

從上圖看,Metro UI 的郵件界面上只有單純的文字,缺乏色彩,所有內(nèi)容的分隔都是通過字體和空白來完成。這樣的結(jié)果是信息同質(zhì)化,很難區(qū)分信息。界面沒有將有價值的信息第一時間呈現(xiàn)出來,因此當(dāng)面對這樣的界面時,需要更多的集中精力去尋找信息。這和做 PPT 時將所有的文字堆砌起來而不進(jìn)行有效的信息歸類并無區(qū)別。

wps_clip_image-7293

而 iOS 除了字體還有不同的顏色來表現(xiàn)不同性質(zhì)的信息,同時也有小圖標(biāo)來表現(xiàn)相同信息的數(shù)目。各種要素各司其職,將信息表達(dá)得直觀明確。

活動格窗

活動格窗是Metro UI 呈現(xiàn)給用戶的第一特色,它不僅是一個快速啟動的按鈕,同時也是一個信息更新的展示板,微軟宣傳這樣的設(shè)計可以更好的將信息第一時間呈現(xiàn)給用戶。

但問題是,活動格窗的面積太小了,只能顯示簡介性質(zhì)的數(shù)字,小圖標(biāo)表等等,缺少好的信息預(yù)覽功能,這樣的通知系統(tǒng)展現(xiàn)給用戶的結(jié)果就是“知道有這么回事,但不知道究竟是怎么回事?!庇脩粢廊皇敲H坏?。有價值的信息被淹沒,用戶沒有能夠便捷地獲取有用信息。

wps_clip_image-470

簡潔的目的不是復(fù)雜

Metro UI 是一個形式上簡潔的系統(tǒng),導(dǎo)致的是一個復(fù)雜的用戶體驗(yàn)。與其相標(biāo)榜的相反,用戶需要花更多的時間在屏幕上才能仔細(xì)甄別什么是有用的信息。Metro UI 為了簡潔,大多數(shù)時候忽視了內(nèi)容的表現(xiàn)形式,比如細(xì)線這種最簡單區(qū)分內(nèi)容的形式。Metro UI 在顏色上也有奇怪的特性,屏幕永遠(yuǎn)處在斑斕和全無的兩極,內(nèi)容的表現(xiàn)形式非常單一。

在我看來,微軟的界面設(shè)計陷入了一個誤區(qū),突出內(nèi)容忽略形式,并不是真正的簡潔,而是另一種復(fù)雜。

來源:http://mdc.sohu.com/?p=1639

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!