談談Metro UI 與 Windows Phone 應用

2012-05-30 19:52來源:遊戲狗木心我要評論

極簡的風格並不意味著簡陋的用戶界面,Windows Phone 的Metro UI 僅僅是一套規程,應用要想真正達到讓人眼前一亮的效果,同樣需要大量的設計和對Metro 理念的深刻理解。據說Windows Phone 標誌性Metro UI 的靈感最初來源於倫敦地鐵指示圖的設計,而這也是“Metro” 這個名稱的來歷。從其對明亮色彩的廣泛應用、以簡單方塊形式不斷更新的動態磁貼(Live Tile)界面、以文字為核心的設計思路、聚合多來源信息的Hub 中心、全景式的滑動界面、簡潔的通知系統等處,我們的確可以看到這一說法的驗證。

談談Metro UI 與Windows Phone 應用

相比設計理念基本一致的Andr​​oid 與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)

重視可用性設計和細節 

本站文章均來自網絡,文章內容不代表本站立場,編輯僅做翻譯,若有侵犯您權益,請聯繫編輯處理。

Comments are closed.