掌握Metro風格,開發靚麗應用

        在手機上設計應用程序與傳統的桌面和瀏覽器相比有不少差異。首先,需要在手機較小的屏幕上設計良好的用戶交互和體驗,還需要充分考慮移動設備上觸屏等輸入方式。另外,用戶多數是在運動中使用手機,而不是呆在辦公室或坐在家裏。應用設計者應該想辦法利用這些差異和特點,化限制爲機遇從而最大地滿足用戶數字連接、移動生活的需求。
       
        Windows Phone使用了Metro設計理念,這是微軟公司從Windows Phone開始引入和推廣的設計風格。其特點包括簡潔的應用界面,快速的系統反饋,最少的點擊次數,自動的消息推送,直接的內容交互,和高質的視覺元素。
本文介紹Metro風格,以及優秀Metro風格應用的設計原則。旨在幫助設計者更好地優化應用視覺效果,使Metro設計理念擴展到您的應用程序中,使其與Windows Phone平臺上其他的優秀應用程序風格一致。對於Windows Phone平臺上的創新應用,一致性是相當重要,它能使用戶更容易地熟悉和了解您的應用。在應用設計過程中遇到的具體問題,您還可以參考Windows Phone 應用商店中的應用如何解決這些問題,或在APP HUB論壇中和同開發者進行交流。
 
現代感(Be Modern
       觸屏應用的現代感意味着不做修飾,避免奢華,簡化設計。在Windows Phone中,內容本身就是界面:用戶通常能直接操作任何文字,對象,和屏幕上的其它元素。用戶通過嘗試點擊不同的位置來掌握應用中的造作。複雜的屏幕跳轉和繁複的設計會使應用難以掌握,並拒用戶於千里之外。簡單的設計和必要的空隙會使界面看起來更簡潔。下圖中MSN Money應用界面是一個典型的簡潔和現代感案例。
 

MSN Money應用程序
 
快捷感Be “On the Go” Capable
        很多時候人們使用手機應用必須進行簡單、快速的操作。這是因爲人們經常“在路上”使用手機,所以用戶只有很短的碎片時間進行必須的操作。例如公交站等車的幾分鐘,超市排隊結帳的幾分鐘,開車等紅燈的幾十秒鐘,以及衆多生活中的其他碎片時間。用戶會在這些場合經常需要馬上得到信息,例如航班狀態,最近的加油站,方圓2公里內最好的中餐廳。
       應用可以充分利用推送功能,不用點擊就自動呈現最新信息。應用中的功能應該能流暢地完成,設計者應該使控件的設計和佈局便於用戶快速完成常用操作。開發者應該牢記簡潔的文字和字體在獨巨匠性的應用中至關重要:因爲眼睛讀取內容時最關注與形狀、尺寸、顏色及其含義。
       手機鍵盤輸入不像電腦上那麼容易,因此設計者應該盡一切可能減少不必要的鍵盤輸入。無論哪種數據格式,用戶輸入的數據項都應該儘量少。適合的場合中儘量使用文字聯想,定製和系統控件、以及語音輸入功能。
       應用程序啓動後,用戶應該能極方便地找到他們感興趣的功能。例如,一個多媒體播放應用的下載列表應該有分類功能,以便用戶按類別快速找到用戶偏愛的媒體文件;另一個必備功能是用戶的收藏夾和常用列表。常用列表中的媒體文件應該被放置在顯著位置,以便用戶快速跳轉回上次離開的地方。開發者應該盡力使用戶快速實現應用使用中的需求。在Amazon Kindle應用程序的主界面上顯示的是用戶最近讀過或查找過的書。點擊一本書就會回到上一次離開該書時的頁面。
Kindle應用裏最近閱讀的書籍展示
   
         即使在家裏,用戶有時也會“在路上”。人們經常在吃飯,看電視以及和陪伴家人,朋友的同時,想同時乾點別的。比如坐在家裏沙發上看電視時,人們可能會需要同時發個短信或者使用手機應用。這可能是因爲用戶感覺電視的某個情節有點無聊,或者正在插播廣告。因此出色的手機應用體驗應該充分考慮在這樣的碎片時間裏人們想幹什麼。
 
簡潔感(Be Clean
       手機觸屏設備的屏幕尺寸非常小,因而很容易點錯而造成不良的用戶體驗。應用程序的觸屏設計應該兼顧粗壯的手指。在控件和內容周圍保留空隙,可以使標籤更加清晰。在使用觸屏操作的控件時,應該充分考慮所有可能的誤操作,並避免他們對用戶體驗造成不良影響。好的觸屏應用程序不應該測試用戶完成複雜操作的耐心,和精確點擊的能力。下圖是Project Emporia應用程序,每頁顯示了4則清晰的消息梗概,每個梗概點擊後都可以顯示細節。這鐘設計比一個冗長的標題列表好得多。
 
Project Emporia應用程序
       把應用程序設計得直觀、易懂至關重要。用戶應該需要極少的說明、甚至無需任何說明就能使用應用程序。你的應用程序應該被設計得淺顯易懂,無需用戶指導手冊。用戶隨便玩幾下你的應用,就應該能明白操作方法。如果用戶在操作應用時遇到麻煩,就會用腳投票拋棄這個應用,並去尋找相同功能的其他應用。
 
交互感(Be in Motion
 
        移動應用中的觸屏操作應該仿效物理操作時的交互感。在Windows Phone應用中,可以通過顯示對象的變形和交互效果來模仿成功觸摸的效果。屏幕應該對輕觸做出反應,動畫效果應該輕巧靈活,以便使用戶知道導航等操作的結果。這樣的設計使用戶理解下布應該做的操作,並明確哪些元素可以點擊,哪些元素不能點擊。在彩信應用中,新消息自動出現時會內嵌多媒體信息。用戶可以點擊一條消息中的縮略圖快速切換到該圖的全屏展示頁面。
顯示用戶啓動電子郵件應用程序時發生的一系列交互式動畫圖像。頁面呈現出翻頁的效果。
 
簡約感(Be Simple, Readable, and Minimalistic
       用戶交互體驗的一致性和簡潔至關重要。開發者應該致力於使每一屏專注於特定功能、主題,刪除所有多餘元素。僅僅呈現用戶真正需要的內容。eBay在Windows Phone上的應用程序相對於其網站,用戶界面更加簡約。
 
eBay應用程序
 
      信息展現方式非常重要。手機的屏幕尺寸明顯小得多,用戶界面的佈局應該有可讀性,並在不同的頁面間保持信息連貫性。避免用戶在不同的頁面間瀏覽時迷航。考慮用優雅的方式顯示信息,考慮用簡約的方式。
        別以爲一個屏幕中呈現的信息越多越好。堆砌內容的界面不僅不好,而且會令人費解。佈局用戶界面時應儘量減少控件數量,並使其直觀易懂。Windows Phone上每一屏都值得認真對待。在用戶界面的主屏中只保留最主要的核心內容,移走其他一切細節。這些移走的次要數據可以在應用子頁面中出現,但要保證這些數據與主題相符。一個新聞類應用要是把所有的新聞報道放在同一個頁面,用戶就不得不花時間去滾動屏幕逐個閱讀。較好的做法是把頭條新聞放在主頁上,或者放置各個類別重要新聞的提要。最好應用能提供設置功能,由用戶來配置界面上顯示信息的方式。
       對於複雜的多維數據,開發者需要想辦法把這些數據分離開來,將其逐屏顯示。用戶不會希望在Windows Phone裏自己編輯設置這些複雜的多維數據。
 
一致感(Be Consistent
       本文的目的之一是爲了指明Windows Phone上用戶交互的標準方式。只有當所有應用的用戶交互都一致時,用戶纔會感受到整體最好的用戶體驗。應用開發者可以參考系統功能的用戶交互體驗,例如導航,設置,列表刪除。
       消費者會給交互方式一致的應用加分。由於用戶已經習慣了Windows Phone手機的交互方式,他們可以快速掌握一致性好的新的應用。一致性能使用戶和開發者都受益,這特別有助於贏取良好的用戶反饋和提升應用下載量。
 
權威感(Be Authentic
       打造完整的Silverlight或者XNA應用程序,儘量避免在應用中依賴瀏覽器控件展示Web頁面。Windows Phone應用程序應該充分利用傳感器,硬件,Silverlight動畫,控件,以及多觸手勢來創建比移動網頁上更豐富的用戶體驗。
       應用應該打造品牌形象。在保持簡潔和時尚感的同時,應用程序可以使用自己的配色方案和高質量的視覺元素來展示其功能,並區別於其他應用。
 
創新感(Be Innovative)
 
       移動應用不一定是桌面複雜應用的閹割版本。手機應用功能即便不能比桌面應用更強,至少可以一樣強。在性能日益強大手機上,今天的移動應用能獨立完成所有工作。從桌面端移植到手機上的應用可以實現所有應用功能,隨着時間的推移越來越多的用戶會使用手機版應用。Windows Phone上的Twitter應用就像它的桌面版本一樣功能強大。

Twitter應用程序
       有些應用只在手機上工作,這些應用往往需要GPS,加速計,通話,觸屏,指南針,收音機、照相等硬件支持。充分使用這些硬件可以開發出強大的移動應用。基於位置的應用在手機往往比PC上具有更多的功能,比如一個找加油站的應用在手機上能夠直接找到用戶身邊最近服務網點。
       有些情況下不必使Windows Phone應用具備桌面版應用的全部功能。手機版應用僅僅完成查看瀏覽功能。例如,一個在線的納稅應用需要大型,複雜的用戶界面,只有PC屏幕適應這樣的需求。手機版應用程序可以完成一些簡單功能,例如追蹤納稅狀態,接收納稅信息變化通知等。
       Windows Phone應用設計理念是全新的。桌面和網頁應用的設計者在向Windows Phone移植應用時,切忌完全複製已有的用戶界面。不同的平臺上應用設計原則不盡相同,設計者應該在不同平臺上遵循不同的設計原則。

http://msdn.microsoft.com/en-us/library/hh202906(v=VS.92).aspx

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章