談談Metro UI與Windows Phone應用
據說 Windows Phone 標志性 Metro UI 的靈感最初來源于倫敦地鐵指示圖的設計，而這也是 “Metro” 這個名稱的來歷。從其對明亮色彩的廣泛應用、以簡單方塊形式不斷更新的動態磁貼(Live Tile)界面、以文字為核心的設計思路、聚合多來源信息的 Hub 中心、全景式的滑動界面、簡潔的通知系統等處，我們的確可以看到這一說法的驗證。
相 比設計理念基本一致的 Android 與 iOS 采取的以圖標為核心的界面風格，Windows Phone 基于文字的 Metro UI 設計將應用的內容本身放到了系統展示的最前端。Metro 無關多余的修飾，一切都是為了更好、更快的信息獲取。在這里，UI 就是內容本身。
用戶最關心的是應用能為他們帶來什么樣的信息。而在 Windows Phone，乃至于 Windows 8、Xbox 360 中，所有的設計重心都集中在如何讓內容本身更好的凸顯出來。這就意味著，一款應用想要在 Metro UI 風格下吸引用戶，強化自身內容的呈現效果是最直接、也是最重要的元素之一。
關于 Metro UI 究竟好不好看的爭論很多。實際看來，在現有市場上的應用中，應用的外觀設計參差不齊，有非常漂亮的，也有不少難以入目的。正如工具本身不決定其最終用途， 風格本身也不決定其最終設計效果。極簡的風格并不意味著簡陋的用戶界面，Metro UI 僅僅是一套規程，應用要想真正達到讓人眼前一亮的效果，同樣需要大量的設計和對 Metro 理念的深刻理解，這對于習慣了 iOS 和 Android 的設計者來說無疑需要更大的思維轉換過程。最近一位開發者 Vangos Pterneas 發布了其開發的一款 Windows Phone 時尚應用Vassilis Zoulias，我們可以從中窺視 Windows Phone 開發時一些值得注意的地方。實例：如何設計一款好的 Metro UI 應用時 尚類應用是一個非常挑剔的領域，它們往往包含大量高質量的圖像素材、同時需要擁有脫穎而出的獨特風格。開發者 Vangos Pterneas 表示，如何保持應用本身的個性，同時協調 Metro 風格是在設計時需要仔細考量的問題。這款應用的設計本身很簡單，借鑒了 Windows Phone 應用市場的方格圖標樣式、粗體標題、淡色次標題、字母大寫等風格、同時將設計師的作品應用到界面元素中，體現出了應用本身的個性。這款應用有哪些值得借鑒 的設計思路呢?
使用與內容、品牌相關的素材做為應用的設計元素
在默認情況下，Windows Phone Metro UI 的應用背景被設定為單一純色。乍看上去，這會使內容本身凸顯出來，但一方面采用單調的背景會讓用戶產生厭倦感，另一方面這也讓應用本身失去了自己獨特的設 計感。對于 Vassilis Zoulias 這一款應用，其每一個子板塊都采用了與內容高度相關的、設計師自己的作品做為背景，這使得應用的背景本身得到了充分的利用，凸顯了設計師的個人風格。此 外，在主界面還采用了 T 型臺視頻作為應用的背景，這帶給用戶的視覺沖擊是非常顯著的。與之類似，HTC Hub 采用的動態天氣背景也同樣讓人眼前一亮。但在進行設計時需要注意的是，設計元素本身不能喧賓奪主。Metro UI 的核心畢竟仍然是文字內容，設計元素如果太過于花哨，很可能分散或影響用戶對于內容本身的關注。目前大多數應用在個性化方面都采取了比較隱性的設計風格， 或是淡化的個性化背景、或是應用首尾的品牌設計元素。
合理利用動態磁貼(Live Tile)
作為 Windows Phone Metro UI 給人***印象的動態磁貼功能，如何實現充分而合理的利用對于增強應用本身的體驗可謂非常重要。動態磁貼的主要功能在于將內容更新用最直接的方式實時告知用 戶，而無需用戶進行任何操作。對于 Vassilis Zoulias 這款時尚展示類應用，內容更新相對較少，開發者采用了與系統圖片 Hub 類似的做法，將設計師的產品(如裙子、女鞋、包具等)隨機在動態磁貼上進行展示，從而在視覺上給用戶不斷帶來新的印象。而對于社交、新聞、日程、音樂等需 要不斷更新的應用，動態磁貼的功能尤為有用。Facebook 社交網絡的更新信息、AP Mobile 的新聞動態、日歷的***事項提醒、正在播放的音樂信息，這些原本需要打開應用才能看見的信息可以通過動態磁貼在桌面上一眼獲知。在很多應用中，用戶甚至可 以把某個特定功能或特定內容以動態磁貼的形式貼到首頁去，便利查看和使用。
乍看上去，動態磁貼和 Android Widget 的概念有些相似。但正如 WPDang 的文章里提到的，在 Widget 增多的情況下，其耗費的處理器和內存資源會隨之增加，如果操作平臺優化不佳，會導致系統性能大大降低，影響用戶體驗的效果(Android 新版本中這個問題已經基本解決)，而 Live Tile 則沒有這個問題。使用 Panorama 全景視圖和 Pivot 應用標簽像 其他典型 Metro UI 一樣，Vassilis Zoulias 應用了其另一個標志性界面風格 - 畫卷一樣的橫向全景視圖風格和應用標簽。通過滑動手勢，用戶無需打開一層層的操作窗口即可瀏覽到所有的信息，同時通過后一屏幕內容的半顯式設計給用戶了足 夠的視覺提示。(與之相對比的是，Windows 8 在設計上卻被廣泛詬病，認為像系統設置、任務切換等許多重要功能在界面上缺乏視覺提示，讓用戶難以找到。 iOS 新增的手勢操作也存在同樣的問題。)
相對 iOS、Android 上很多應用多級界面層疊的設計，這種風格對用戶應該說更加友好，而我們也看到 Android 4.0 Ice Cream Sandwitch 中也借鑒了這種全景視圖和滑動手勢。重視應用的可用性設計及其他細節一個細節是，在設計“聯系我們”頁面時，Vassilis Zoulias 不僅僅提供了聯系人的文字信息，而在對應的電話號碼、電子郵件、網址，乃至地址條目上都添加了對應的操作。這一界面可用性細節上的關注對于用戶的體驗來說是微小但非常加分的一筆。
除此之外，如果應用本身的類型適合，整合入 Windows Phone 另一特色的 “Hub 中心"框架中則無疑會為其更加增光。目前 Windows Phone 內建的 Hub 包括了圖片、音樂和視頻、人脈、游戲等，豆瓣電臺與音樂 Hub 的整合、Twitter 與圖片 Hub 的整合、Facebook 與人脈 Hub 的整合都是很好的例子。
Metro 固然很酷，但其對于字體的過于依賴使其目前在非拉丁字母的語種下視覺效果還不夠理想，對圖標的弱化降低了應用的個性化，過于革新的界面對于用戶使用習慣的 沖擊等，這些都是微軟需要在 Windows Phone、Windows 8，乃至 Xbox 360 中需要解決的問題，也是開發者在設計應用時需要考慮的。
Vassilis Zoulias 開發者 Vangos Pterneas 給 Windows Phone 應用開發的建議：
盡量使用能體現個性的應用背景
強化頁面切換效果
重視動態磁貼的應用
合理使用腳注來區分應用的不同區域
按自己需求調整字體顏色(系統默認為黑白)
優化圖標和預覽圖的設計
恰當使用全景視圖和應用程序標簽選項卡(Pivot Control)
重視可用性設計和細節
【編輯推薦】
