在手機上設計應用程式與傳統的桌面和浏覽器相比有不少差異。首先,需要在手機較小的螢幕上設計良好的使用者互動和體驗,還需要充分考慮移動裝置上觸屏等輸入方式。另外,使用者多數是在運動中使用手機,而不是呆在辦公室或坐在家裡。應用設計者應該想辦法利用這些差異和特點,化限制為機遇進而最大地滿足使用者數字連接配接、移動生活的需求。
Windows Phone使用了Metro設計理念,這是微軟公司從Windows Phone開始引入和推廣的設計風格。其特點包括簡潔的應用界面,快速的系統回報,最少的點選次數,自動的消息推送,直接的内容互動,和高質的視覺元素。
本文介紹Metro風格,以及優秀Metro風格應用的設計原則。旨在幫助設計者更好地優化應用視覺效果,使Metro設計理念擴充到您的應用程式中,使其與Windows Phone平台上其他的優秀應用程式風格一緻。對于Windows Phone平台上的創新應用,一緻性是相當重要,它能使使用者更容易地熟悉和了解您的應用。在應用設計過程中遇到的具體問題,您還可以參考Windows Phone 應用商店中的應用如何解決這些問題,或在APP HUB論壇中和同開發者進行交流。
<b>現代感(</b><b>Be Modern</b><b>)</b>
觸屏應用的現代感意味着不做修飾,避免奢華,簡化設計。在Windows Phone中,内容本身就是界面:使用者通常能直接操作任何文字,對象,和螢幕上的其它元素。使用者通過嘗試點選不同的位置來掌握應用中的造作。複雜的螢幕跳轉和繁複的設計會使應用難以掌握,并拒使用者于千裡之外。簡單的設計和必要的空隙會使界面看起來更簡潔。下圖中MSN Money應用界面是一個典型的簡潔和現代感案例。
<a href="http://blog.51cto.com/attachment/201111/100814549.jpg" target="_blank"></a>
在MSN Money應用程式
<b>快捷感</b><b>(</b><b>Be “On the Go” Capable</b><b>)</b>
很多時候人們使用手機應用必須進行簡單、快速的操作。這是因為人們經常“在路上”使用手機,是以使用者隻有很短的碎片時間進行必須的操作。例如公交站等車的幾分鐘,超市排隊結帳的幾分鐘,開車等紅燈的幾十秒鐘,以及衆多生活中的其他碎片時間。使用者會在這些場合經常需要馬上得到資訊,例如航班狀态,最近的加油站,方圓2公裡内最好的中餐廳。
應用可以充分利用推送功能,不用點選就自動呈現最新資訊。應用中的功能應該能流暢地完成,設計者應該使控件的設計和布局便于使用者快速完成常用操作。開發者應該牢記簡潔的文字和字型在獨巨匠性的應用中至關重要:因為眼睛讀取内容時最關注與形狀、尺寸、顔色及其含義。
手機鍵盤輸入不像電腦上那麼容易,是以設計者應該盡一切可能減少不必要的鍵盤輸入。無論哪種資料格式,使用者輸入的資料項都應該盡量少。适合的場合中盡量使用文字聯想,定制和系統控件、以及語音輸入功能。
應用程式啟動後,使用者應該能極友善地找到他們感興趣的功能。例如,一個多媒體播放應用的下載下傳清單應該有分類功能,以便使用者按類别快速找到使用者偏愛的媒體檔案;另一個必備功能是使用者的收藏夾和常用清單。常用清單中的媒體檔案應該被放置在顯著位置,以便使用者快速跳轉回上次離開的地方。開發者應該盡力使使用者快速實作應用使用中的需求。在Amazon Kindle應用程式的主界面上顯示的是使用者最近讀過或查找過的書。點選一本書就會回到上一次離開該書時的頁面。
<a href="http://blog.51cto.com/attachment/201111/100852682.jpg" target="_blank"></a>
Kindle應用裡最近閱讀的書籍展示
即使在家裡,使用者有時也會“在路上”。人們經常在吃飯,看電視以及和陪伴家人,朋友的同時,想同時幹點别的。比如坐在家裡沙發上看電視時,人們可能會需要同時發個短信或者使用手機應用。這可能是因為使用者感覺電視的某個情節有點無聊,或者正在插播廣告。是以出色的手機應用體驗應該充分考慮在這樣的碎片時間裡人們想幹什麼。
<b>簡潔感(</b><b>Be Clean</b><b>)</b>
手機觸屏裝置的螢幕尺寸非常小,因而很容易點錯而造成不良的使用者體驗。應用程式的觸屏設計應該兼顧粗壯的手指。在控件和内容周圍保留白隙,可以使标簽更加清晰。在使用觸屏操作的控件時,應該充分考慮所有可能的誤操作,并避免他們對使用者體驗造成不良影響。好的觸屏應用程式不應該測試使用者完成複雜操作的耐心,和精确點選的能力。下圖是Project Emporia應用程式,每頁顯示了4則清晰的消息梗概,每個梗概點選後都可以顯示細節。這鐘設計比一個冗長的标題清單好得多。
Project Emporia應用程式
把應用程式設計得直覺、易懂至關重要。使用者應該需要極少的說明、甚至無需任何說明就能使用應用程式。你的應用程式應該被設計得淺顯易懂,無需使用者指導手冊。使用者随便玩幾下你的應用,就應該能明白操作方法。如果使用者在操作應用時遇到麻煩,就會用腳投票抛棄這個應用,并去尋找相同功能的其他應用。
<b>互動感(</b><b>Be in Motion</b><b>)</b>
移動應用中的觸屏操作應該仿效實體操作時的互動感。在Windows Phone應用中,可以通過顯示對象的變形和互動效果來模仿成功觸摸的效果。螢幕應該對輕觸做出反應,動畫效果應該輕巧靈活,以便使使用者知道導航等操作的結果。這樣的設計使使用者了解下布應該做的操作,并明确哪些元素可以點選,哪些元素不能點選。在彩信應用中,新消息自動出現時會内嵌多媒體資訊。使用者可以點選一條消息中的縮略圖快速切換到該圖的全屏展示頁面。
<a href="http://blog.51cto.com/attachment/201111/101017211.jpg" target="_blank"></a>
顯示使用者啟動電子郵件應用程式時發生的一系列互動式動畫圖像。頁面呈現出“翻頁”的效果。
<b>簡約感(</b><b>Be Simple, Readable, and Minimalistic</b><b>)</b>
使用者互動體驗的一緻性和簡潔至關重要。開發者應該緻力于使每一屏專注于特定功能、主題,删除所有多餘元素。僅僅呈現使用者真正需要的内容。eBay在Windows Phone上的應用程式相對于其網站,使用者界面更加簡約。
eBay應用程式
資訊展現方式非常重要。手機的螢幕尺寸明顯小得多,使用者界面的布局應該有可讀性,并在不同的頁面間保持資訊連貫性。避免使用者在不同的頁面間浏覽時迷航。考慮用優雅的方式顯示資訊,考慮用簡約的方式。
别以為一個螢幕中呈現的資訊越多越好。堆砌内容的界面不僅不好,而且會令人費解。布局使用者界面時應盡量減少控件數量,并使其直覺易懂。Windows Phone上每一屏都值得認真對待。在使用者界面的主屏中隻保留最主要的核心内容,移走其他一切細節。這些移走的次要資料可以在應用子頁面中出現,但要保證這些資料與主題相符。一個新聞類應用要是把所有的新聞報道放在同一個頁面,使用者就不得不花時間去滾動螢幕逐個閱讀。較好的做法是把頭條新聞放在首頁上,或者放置各個類别重要新聞的提要。最好應用能提供設定功能,由使用者來配置界面上顯示資訊的方式。
對于複雜的多元資料,開發者需要想辦法把這些資料分離開來,将其逐屏顯示。使用者不會希望在Windows Phone裡自己編輯設定這些複雜的多元資料。
<b>一緻感(</b><b>Be Consistent</b><b>)</b>
本文的目的之一是為了指明Windows Phone上使用者互動的标準方式。隻有當所有應用的使用者互動都一緻時,使用者才會感受到整體最好的使用者體驗。應用開發者可以參考系統功能的使用者互動體驗,例如導航,設定,清單删除。
消費者會給互動方式一緻的應用加分。由于使用者已經習慣了Windows Phone手機的互動方式,他們可以快速掌握一緻性好的新的應用。一緻性能使使用者和開發者都受益,這特别有助于赢取良好的使用者回報和提升應用下載下傳量。
<b>權威感(</b><b>Be Authentic</b><b>)</b>
打造完整的Silverlight或者XNA應用程式,盡量避免在應用中依賴浏覽器控件展示Web頁面。Windows Phone應用程式應該充分利用傳感器,硬體,Silverlight動畫,控件,以及多觸手勢來建立比移動網頁上更豐富的使用者體驗。
應用應該打造品牌形象。在保持簡潔和時尚感的同時,應用程式可以使用自己的配色方案和高品質的視覺元素來展示其功能,并差別于其他應用。
<b>創新感</b><b>(Be Innovative)</b>
移動應用不一定是桌面複雜應用的閹割版本。手機應用功能即便不能比桌面應用更強,至少可以一樣強。在性能日益強大手機上,今天的移動應用能獨立完成所有工作。從桌面端移植到手機上的應用可以實作所有應用功能,随着時間的推移越來越多的使用者會使用手機版應用。Windows Phone上的Twitter應用就像它的桌面版本一樣功能強大。
<a href="http://blog.51cto.com/attachment/201111/101112693.jpg" target="_blank"></a>
Twitter應用程式
有些應用隻在手機上工作,這些應用往往需要GPS,加速計,通話,觸屏,指南針,收音機、照相等硬體支援。充分使用這些硬體可以開發出強大的移動應用。基于位置的應用在手機往往比PC上具有更多的功能,比如一個找加油站的應用在手機上能夠直接找到使用者身邊最近服務網點。
有些情況下不必使Windows Phone應用具備桌面版應用的全部功能。手機版應用僅僅完成檢視浏覽功能。例如,一個線上的納稅應用需要大型,複雜的使用者界面,隻有PC螢幕适應這樣的需求。手機版應用程式可以完成一些簡單功能,例如追蹤納稅狀态,接收納稅資訊變化通知等。
Windows Phone應用設計理念是全新的。桌面和網頁應用的設計者在向Windows Phone移植應用時,切忌完全複制已有的使用者界面。不同的平台上應用設計原則不盡相同,設計者應該在不同平台上遵循不同的設計原則。
<a href="http://msdn.microsoft.com/en-us/library/hh202906(v=VS.92).aspx">http://msdn.microsoft.com/en-us/library/hh202906(v=VS.92).aspx</a>