[image credit: 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”。

Harlequin

inside作者

More Posts