Windows Phone 及 Metro UI 設計討論

openkk 12年前發布 | 20K 次閱讀 Windows Phone

微軟最新的移動操作平臺為Windows Phone提供了全新的內容組織方式和不同的用戶體驗，在此基礎上，Windows 8 也將采用同樣的Metro設計原則。與以往的側重點不同，Windows Phone更注重于用戶的社交生活，尤其是針對那些生活中離不開社交網絡的用戶們。

那么，作為設計師要關注些什么呢？

首先，這是一個全新的平臺和用戶界面，因此，我們有更多的空間為之提供更好的創意。Windows Phone目前正處在一個上升通道內，對設計師來說，也是一個全新的挑戰。我們需要更多的探索來學習如何為用戶提供更好的體驗。

其次，Metro是一個我們不可忽視的新興設計領域。作為Windows 8的界面基礎，Metro在今后會有更多的跨平臺特性，不同于當前的手機、平板、電腦界面各自為政，Metro今后會為用戶帶來更加一致的操作體驗。尤其是在微軟與諾基亞的攜手之后，擁有Metro界面的設備將擁有不可忽視的市場地位。

界面設計的新定義

Metro界面的出現源于typography in way-finding design（路標指示系統）帶給Windows Phone開發團隊的靈感。在去除所有無關元素后，內容（標題或文本）成為界面表現的核心，明顯區別于其他傳統界面：傳統界面消失了，內容取而代之。在此基礎上，實時內容被直接顯示，用戶直接與內容互動，減少了交互層級。

圖形設計中的網格系統, by Josef Müller-Brockman

Windows Phone的界面系統來自于先鋒圖形設計師 Josef Müller-Brockman：構建于基本背景之上的純文本、純色塊。而圖標不再扮演傳統界面中那種重要的角色了，只用于針對內容的交互，大多是為對內容的定向和導航提供引導。

典型簡約設計&文本表現, 參考來自 Cocktail Flow 和 Fuse.

所有這一切變化帶給用戶一種懷舊感和制圖感，這一切看上去就像一張地圖，只需清晰的文字標注，就能明確的告知用戶想往哪里去，能往哪里去，以及如何到那里去。其他的視覺元素都是浮云。

一套全新的內容化網格

Metro設計需要更嚴格的組織規劃，參考一下地鐵線路圖吧。在移動應用的環境下，信息內容提供者需要更強的表達能力，因為在圖形元素都被剔除的情況下，網格所展示的信息就是內容本身，所以，當用戶在掃視界面布局的時候，他就已經在閱讀內容了。同時，設計師需要選擇一些重點的元素來建立閱讀路徑，錯誤的元素選擇會讓用戶迷失方向，不知如何才能找到他們所需要的內容。

米蘭地鐵線路圖 (圖片來自: Wikipedia)

內容的結構搭建需要遵循嚴格的等級規范，并且基于你想推送給用戶何種信息。因此，你首先必須確定你的目標用戶群。想要開發一個人人適用的應用是不那么現實的。

Flipboard 內容即界面的典型代表.

Metro界面的目標就是期望幫助用戶能夠更快的確認是否希望能夠深入的閱讀內容以及如何深入。類似Flipboard這種電子雜志，就是Metro界面的經典范例。

用以組織內容的界面元素

Metro界面提出了幾種新概念的內容組織元素（或稱控件？），主要包括: “panorama”、”pivot”以及”Live Tiles”。如何選擇，取決于應用的目的和你期望用戶閱讀內容的方式。以下是關于這幾種控件的簡要介紹：

Panorama

正如其名，全景模式為用戶提供了一個全面概覽內容的最佳方式。當用戶打開應用，所有的內容都展開在一張全景圖的不同區域上，通過拖拽，用戶可以一覽應用的全部內容。Panorama利用文本和圖片創造出一條內容銜接的路徑，視覺上讓用戶立刻直觀的了解到鏈接的內容。

FeedTso, panorama樣例參考.

Pivot

Pivot利用邏輯排列將元素整合，將信息分解放入各類目錄和列表，從不同的維度展現相關內容，同時進行相應的操作（類似標簽頁tabs）。

4th & Mayor, pivot樣例參考.

Live Tiles

Live Tiles是一個等級嚴密的結構，由內容概要開始，逐級深入，級別越深，內容越詳細。下面的樣例中，Live Tiles用來顯示當前的天氣狀況。如果用戶只想了解當前天氣的基本狀況，那么他們并不需要去打開應用，因為基本信息已經完全顯示了。但如果他們希望能了解今后幾天的天氣預報或者其他細節，那么再去打開應用也不遲。

Live Tiles的另一個特性就是可以用來顯示循環信息，你可以將多條信息顯示在同一個方塊內，而他們會自動循環顯示。.

AccuWeather 和 AppFlow, Live Tiles樣例參考.

Accent Color（強調色彩）

當然，組織結構之外還會有你想要顯示的內容，頁面之上還有你想強調的內容，WP7 guidelines給出了他們的建議：使用accent color（強調色彩）來強調你想要用戶重視的內容。accent color是一個標準全局控件，用戶可以在系統設置內自定義，并且所有的應用都會自動適配該色彩。

設計提示

干凈簡潔的界面，沒有常規的圖標，意味著用戶以不同以往的方式與內容進行交互。因此，開發或設計Windows Phone應用（或所有的Metro界面應用），在享受新界面帶來的不同感受的同時，也要考慮到用戶對于傳統界面的習慣。

Clickable Text（可點擊文本）

Windows Phone的交互模型與傳統界面的第一個不同點就在于：文本是激活的控件，也就意味著它是可點擊的。這一點改變了”tap-safe area“（安全點擊區域）的概念，除了圖標、按鈕以及其他控件元素，文本的字號、尺寸也影響著點擊的范圍。

Animation（動畫）

Animation（動畫）也是Windows Phone的一個重要特性。它改變了以往動畫只出現在特定環境下的局面。現在，動畫和動態變形已成為基本控件并且深入Metro界面設計思想。它不僅能夠在系統提示或反饋時”彈出“，也能提醒用戶下一步也許是個不同的體驗方式（例如從全景界面切換到純文本新聞界面）。

Icons

Windows Phone有一系列關于icon設計的指導，因此建議設計師在設計icon之前仔細閱讀。唯一供以放置icon的地方就是application bar，所有針對內容的操作都來源于此。

The application bar for Pictures Lab, with four icons and the “more” button.

Text Wrapping

Windows Phone的Metro界面另一個特點就是文本換行不同與以往了。在這里，寬度大于屏幕寬度的文本是不會換行的，當然，普通文本例如新聞、郵件等不受此影響。因此，文本標題顯示不全成了家常便飯，不過這對引導用戶的操作到時候很大的好處。

The Color Theme

Windows Phone提供了不同于其他移動操作系統的色彩主題模式。除了明暗調整，背景色與前景色也都是可以供用戶自定義的。

因此在應用開發的色彩選擇上你必須要小心了，同時還要考慮用戶自定義的情況。當然，你也可以采用圖片做背景，但需要兩張，以適應亮和暗兩種主題效果。

結語

Metro界面為Windows Phone應用開發者和用戶帶來了全新的令人振奮的特性和體驗，完全不同于蘋果的iOS和Google的Android。微軟第一次將系統與硬件嚴格捆綁，雖然留給運營商和制造商自定義系統的空間非常小，但讓開發人員有了非常統一的設計標準。這未嘗不是一件好事。

本文僅是Metro設計開發的起點，供各位參考。今后會有更多的相關文章和資源提供給大家。

原文作者：Daniela Panfili

Daniela Panfili is a user experience designer, living and working in Brussels. She specializes in RIA and mobile experience design, and lately the WP7 platform. She writes about UX and UI design on her blog: tsoda.eu.