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