Win8 Metro風格界面在iphone APP中的視覺體現

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

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

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

 

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

 

Metro在移動設備的界面設計語言,最早是出現在微軟推出的Windows Phone 7上

 

從視覺上看,比較突出的特點是:

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

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

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

《面包旅行》

榮獲蘋果App Store 2012 年度最佳應用,設計風格顛覆以往的漸變質感,清新的顏色和平面化的元素是亮點

 

《諾基亞HERE Maps》

HERE 的界面看上去和塞班系統很像,在細節處又凸顯出不少 Windows Phone 的風格。

 

《ISO500》

500px 第三方客戶端,Metro風格盡顯

 

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

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

 

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

補充一篇文章

【iShout】Metro UI 的簡潔是另一種復雜

作者:蘇園

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

細線

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

 

wps_clip_image-21527

以設定中“關于本機”選項為例,iOS 的細線分隔顯得更明快,獲取信息更清楚容易。細線是最簡單的內容區分的形式,Metro UI 對這區分形式的舍棄導致整個屏幕上只有孤零零的文字,直接發現有用信息困難。

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

顏色與圖標

Metro UI 在顏色的應用上既激進又保守,激進的是它可以把界面弄得五彩斑斕,保守的是在應用內的界面不著一墨。

wps_clip_image-17044

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

wps_clip_image-7293

而 iOS 除了字體還有不同的顏色來表現不同性質的信息,同時也有小圖標來表現相同信息的數目。各種要素各司其職,將信息表達得直觀明確。

活動格窗

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

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

wps_clip_image-470

簡潔的目的不是復雜

Metro UI 是一個形式上簡潔的系統,導致的是一個復雜的用戶體驗。與其相標榜的相反,用戶需要花更多的時間在屏幕上才能仔細甄別什么是有用的信息。Metro UI 為了簡潔,大多數時候忽視了內容的表現形式,比如細線這種最簡單區分內容的形式。Metro UI 在顏色上也有奇怪的特性,屏幕永遠處在斑斕和全無的兩極,內容的表現形式非常單一。

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!