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