淺談微軟 Windows 手機的 metro UI 設計

評論
評論

 

[image credit:Attribution Some rights reserved by malias]

不得不説這次微軟的 Windows Phone 請來的 UI/UX 設計師為微軟帶來了一些新風貌,這是很多人都沒有想過的事情。當大多數人正在等待著新的 iPhone 到手時,引起我注意的卻是微軟 Windows Phone 的 metro UI。這次微軟 Windows Phone 的 Metro UI 還滿有趣的,所以除了設計師,工程師應該要開始接觸外,一些正在開發軟體或打算開發軟體的人們也該暫時把對 Windows 的偏見放一邊,花點時間來看看 Metro UI 的特別之處。

Metro 是地下鐵(捷運)的意思,延伸的思考會讓人想到 metropolis(大都市),在與 UI 做結合前,微軟就已經給予使用者們一個清晰的畫面-一個圍繞著大都市,連結著各個點的重要載具。而事實上,Metro UI 也是根據微軟 HQ 位於西雅圖地區的 King County Metro Transit 裡的標示取得設計靈感的。

微軟這次把設計重點放 在設計過程以及視覺設計 上,所謂的 metro 是他們目前所寄望的現代設計語言,説的是:簡潔、輕巧、開放、快速(clean,light,open and fast)而設計元素所強調的是 動態,內容,字型

簡潔、輕巧、開放、快速 這些並不是新概念,但這次微軟要帶給大家的並不是要創造一個全新的界面(雖然看起來是很新穎),而是更進一步的發揮了 Swiss Style (Typographic style) 極簡風格(Minimalist Style)的特色,去除一切不必要的干擾:

  • 強調 typography(文字/字型設計):利用字體的大小來區分內容的重要度。
  • 樸素的圖文 :圖片以及 icon 都沒有沒有陰影、反光效果以及圓角。不需要留太大的邊框,讓文字做主角。
  • 強調畫面的轉變過程(transition):認為畫面轉換效果的重要性不亞於圖像的設計(Transitions are just as important as graphical design.)
  • 內容為主角 :“Content not chrome”,也就是去除 UI 裡對程式沒有太大實質幫助的元素,將重點放在 內容 上,因為手機螢幕普遍都很小,而且都是需要觸碰操作,能化繁為簡是最理想的做法。
  • 改變空間的運用 :不需要強迫性的把版面留白的空間填滿,保持簡潔,原因是因為情境設計的時候認為按鍵要好按又明顯,因此物件與物件之間建議餘留空間(留白)以免使用者誤觸。
  • 大膽使用顏色: 設計去除了邊框以及其他修飾的元素,但保留了最重要的色彩,大膽的顏色讓使用者的面板變得更有個性。雖然少了其他的設計元素,但運用了色彩配合字體的調整,讓內容依然可以層次分明。
  • 反應快速的動態磚(tile): 類似 android 將資訊直接呈現在面板上的方式,但是巧妙的用文字以及數字表達在每一個動態磚上,清晰傳達訊息之餘不會讓畫面看來太凌亂。

利用畫面的轉變以及內容為主的設計,試圖將使用者的注意力從多餘的裝飾上移到內容本身,讓使用者直接跟內容互動,強調所謂的“Contents is the UI”。

除了視覺上突破了過往微軟的刻板印象,為使用者著想的開發過程也讓微軟看齊來變得份外的貼心,Metro UI 聚焦在使用者的體驗, 想像岀一個具體的使用者,提供她/他與實際生活相關的功能。另外在 User Experience Design 方面也規劃岀一些嚴厲的規格,例如頁面底下的 tool bar:
在上圖我們只看到 3 個,但事實上 Windows 規定最多可以用 4 個 icon,所以建議設計師與開發者在設計的時候要慎選;另外 menu 的 icon,基本規定是 48px 乘以 48px,而各物件之間的最少距離是 2mm。
以上是遲來的 windows phone UI 簡介,不知道大家目前對於 windows phone 的評價如何,雖然這次的設計概念很有現代感,但目前在中文語系地區接受到的評價似乎都是認為版面看起來很不習慣,以及看起來並不是像 windows 自己所描述的有美感,的確,windows phone 在中文語系地區需要面對幾個問題,例如 typography 以及版面留白這兩個設計元素。字型設計原本應該是以歐美地區作為主要考量,而造字的方式會造成歐美語系的 typography 整齊美觀,但是中文化後:
觀感上的確造成了差異,原本理想是由文字的排列以及大小來營造層次的觀感,但是中文化後部份畫面的排版卻有些不平衡,而留白的地方也顯得突兀,人名直式的排列也看得不習慣。
另外過度留白的概念一直一來都是中文網頁避免的一種設計,因為會造成畫面空洞,而中文字型飽滿度不一也造成了不能像英文字母一樣能夠採用這樣的留白設計。暫不論使用者經驗,系統相容和 app 多寡的情況下,也許視覺設計太過與極簡就是造成 metro UI 在台灣沒有辦法立即受到使用者們青睞其中一個原因。不過,至少除了 android 和 ios,大家又多了一個智慧型手機的選擇。

相關文章

評論

知名廠商強力徵才中