Windows Phone及Metro UI設(shè)計討論
那么，作為設(shè)計師要關(guān)注些什么呢?
首先，這是一個全新的平臺和用戶界面，因此，我們有更多的空間為之提供更好的創(chuàng)意。Windows Phone目前正處在一個上升通道內(nèi)，對設(shè)計師來說，也是一個全新的挑戰(zhàn)。我們需要更多的探索來學(xué)習(xí)如何為用戶提供更好的體驗。
其次，Metro是一個我們不可忽視的新興設(shè)計領(lǐng)域。作為Windows 8的界面基礎(chǔ)，Metro在今后會有更多的跨平臺特性，不同于當(dāng)前的手機、平板、電腦界面各自為政，Metro今后會為用戶帶來更加一致的操作體驗。尤其 是在微軟與諾基亞的攜手之后，擁有Metro界面的設(shè)備將擁有不可忽視的市場地位。
界面設(shè)計的新定義
Metro界面的出現(xiàn)源于typography in way-finding design(路標指示系統(tǒng))帶給Windows Phone開發(fā)團隊的靈感。在去除所有無關(guān)元素后，內(nèi)容(標題或文本)成為界面表現(xiàn)的核心，明顯區(qū)別于其他傳統(tǒng)界面：傳統(tǒng)界面消失了，內(nèi)容取而代之。在此基礎(chǔ)上，實時內(nèi)容被直接顯示，用戶直接與內(nèi)容互動，減少了交互層級。
圖形設(shè)計中的網(wǎng)格系統(tǒng), by Josef Müller-Brockman
Windows Phone的界面系統(tǒng)來自于先鋒圖形設(shè)計師 Josef Müller-Brockman：構(gòu)建于基本背景之上的純文本、純色塊。而圖標不再扮演傳統(tǒng)界面中那種重要的角色了，只用于針對內(nèi)容的交互，大多是為對內(nèi)容的定向和導(dǎo)航提供引導(dǎo)。
典型簡約設(shè)計&文本表現(xiàn), 參考來自 Cocktail Flow 和 Fuse.
所有這一切變化帶給用戶一種懷舊感和制圖感，這一切看上去就像一張地圖，只需清晰的文字標注，就能明確的告知用戶想往哪里去，能往哪里去，以及如何到那里去。其他的視覺元素都是浮云。
#p#
一套全新的內(nèi)容化網(wǎng)格
Metro設(shè)計需要更嚴格的組織規(guī)劃，參考一下地鐵線路圖吧。在移動應(yīng)用的環(huán)境下，信息內(nèi)容提供者需要更強的表達能力，因為在圖形元素都被剔除的情 況下，網(wǎng)格所展示的信息就是內(nèi)容本身，所以，當(dāng)用戶在掃視界面布局的時候，他就已經(jīng)在閱讀內(nèi)容了。同時，設(shè)計師需要選擇一些重點的元素來建立閱讀路徑，錯 誤的元素選擇會讓用戶迷失方向，不知如何才能找到他們所需要的內(nèi)容。
米蘭地鐵線路圖 (圖片來自: Wikipedia)
內(nèi)容的結(jié)構(gòu)搭建需要遵循嚴格的等級規(guī)范，并且基于你想推送給用戶何種信息。因此，你首先必須確定你的目標用戶群。想要開發(fā)一個人人適用的應(yīng)用是不那么現(xiàn)實的。
Flipboard 內(nèi)容即界面的典型代表.
Metro界面的目標就是期望幫助用戶能夠更快的確認是否希望能夠深入的閱讀內(nèi)容以及如何深入。類似Flipboard這種電子雜志，就是Metro界面的經(jīng)典范例。
#p#
用以組織內(nèi)容的界面元素
Metro界面提出了幾種新概念的內(nèi)容組織元素(或稱控件?)，主要包括: “panorama”、”pivot”以及”Live Tiles”。如何選擇，取決于應(yīng)用的目的和你期望用戶閱讀內(nèi)容的方式。以下是關(guān)于這幾種控件的簡要介紹：
Panorama
正如其名，全景模式為用戶提供了一個全面概覽內(nèi)容的***方式。當(dāng)用戶打開應(yīng)用，所有的內(nèi)容都展開在一張全景圖的不同區(qū)域上，通過拖拽，用戶可以一覽應(yīng)用的全部內(nèi)容。Panorama利用文本和圖片創(chuàng)造出一條內(nèi)容銜接的路徑，視覺上讓用戶立刻直觀的了解到鏈接的內(nèi)容。
FeedTso, panorama樣例參考.
Pivot
Pivot利用邏輯排列將元素整合，將信息分解放入各類目錄和列表，從不同的維度展現(xiàn)相關(guān)內(nèi)容，同時進行相應(yīng)的操作(類似標簽頁tabs)。
4th & Mayor, pivot樣例參考.
Live Tiles
Live Tiles是一個等級嚴密的結(jié)構(gòu)，由內(nèi)容概要開始，逐級深入，級別越深，內(nèi)容越詳細。下面的樣例中，Live Tiles用來顯示當(dāng)前的天氣狀況。如果用戶只想了解當(dāng)前天氣的基本狀況，那么他們并不需要去打開應(yīng)用，因為基本信息已經(jīng)完全顯示了。但如果他們希望能了 解今后幾天的天氣預(yù)報或者其他細節(jié)，那么再去打開應(yīng)用也不遲。
Live Tiles的另一個特性就是可以用來顯示循環(huán)信息，你可以將多條信息顯示在同一個方塊內(nèi)，而他們會自動循環(huán)顯示。.
AccuWeather 和 AppFlow, Live Tiles樣例參考.
Accent Color(強調(diào)色彩)
當(dāng)然，組織結(jié)構(gòu)之外還會有你想要顯示的內(nèi)容，頁面之上還有你想強調(diào)的內(nèi)容，WP7 guidelines給出了他們的建議：使用accent color(強調(diào)色彩)來強調(diào)你想要用戶重視的內(nèi)容。accent color是一個標準全局控件，用戶可以在系統(tǒng)設(shè)置內(nèi)自定義，并且所有的應(yīng)用都會自動適配該色彩。
#p#
設(shè)計提示
干凈簡潔的界面，沒有常規(guī)的圖標，意味著用戶以不同以往的方式與內(nèi)容進行交互。因此，開發(fā)或設(shè)計Windows Phone應(yīng)用(或所有的Metro界面應(yīng)用)，在享受新界面帶來的不同感受的同時，也要考慮到用戶對于傳統(tǒng)界面的習(xí)慣。
Clickable Text(可點擊文本)
Windows Phone的交互模型與傳統(tǒng)界面的***個不同點就在于：文本是激活的控件，也就意味著它是可點擊的。這一點改變了”tap-safe area“(安全點擊區(qū)域)的概念，除了圖標、按鈕以及其他控件元素，文本的字號、尺寸也影響著點擊的范圍。
Animation(動畫)
Animation(動畫)也是Windows Phone的一個重要特性。它改變了以往動畫只出現(xiàn)在特定環(huán)境下的局面。 現(xiàn)在，動畫和動態(tài)變形已成為基本控件并且深入Metro界面設(shè)計思想。它不僅能夠在系統(tǒng)提示或反饋時”彈出“，也能提醒用戶下一步也許是個不同的體驗方式 (例如從全景界面切換到純文本新聞界面)。
Icons
Windows Phone有一系列關(guān)于icon設(shè)計的指導(dǎo)，因此建議設(shè)計師在設(shè)計icon之前仔細閱讀。唯一供以放置icon的地方就是application bar，所有針對內(nèi)容的操作都來源于此。
The application bar for Pictures Lab, with four icons and the “more” button.
Text Wrapping
Windows Phone的Metro界面另一個特點就是文本換行不同與以往了。在這里，寬度大于屏幕寬度的文本是不會換行的，當(dāng)然，普通文本例如新聞、郵件等不受此影響。因此，文本標題顯示不全成了家常便飯，不過這對引導(dǎo)用戶的操作到時候很大的好處。
The Color Theme
Windows Phone提供了不同于其他移動操作系統(tǒng)的色彩主題模式。除了明暗調(diào)整，背景色與前景色也都是可以供用戶自定義的。
因此在應(yīng)用開發(fā)的色彩選擇上你必須要小心了，同時還要考慮用戶自定義的情況。當(dāng)然，你也可以采用圖片做背景，但需要兩張，以適應(yīng)亮和暗兩種主題效果。
結(jié)語
Metro界面為Windows Phone應(yīng)用開發(fā)者和用戶帶來了全新的令人振奮的特性和體驗，完全不同于蘋果的iOS和Google的Android。微軟***次將系統(tǒng)與硬件嚴格捆 綁，雖然留給運營商和制造商自定義系統(tǒng)的空間非常小，但讓開發(fā)人員有了非常統(tǒng)一的設(shè)計標準。這未嘗不是一件好事。
本文僅是Metro設(shè)計開發(fā)的起點，供各位參考。今后會有更多的相關(guān)文章和資源提供給大家。
【編輯推薦】
