WINDOWS PHONE 8 UI 設計指南

 

　　@TerryFan (思科雲協作部門用戶體驗設計師)：最近在准備Windows Phone 8的設計工作，尋找資料時看到這篇文章，感覺有點像是MSDN裡design guide的總結，是快速入門WP設計的絕佳文獻，由於本人對WP的理解還不夠深，而文章中有很多WP的專有詞匯和描述，所以翻譯難免有誤，希望大家指正。

　　歡迎關注我的微信公眾號“開卷有譯”獲得新文章推送。

　　========================== 我是設計的分割線 ==========================

　　這段為文章引言，可以直接無視

　　我很羨慕Windows 8的團隊，他們有自己專屬的設計指南，指引人們構建出完美的Windows商店應用。因此，我決定要成為先行者，為Windows Phone 8做點類似的事情。這有一個推薦清單，列出了那些你在搭建windows phone應用時應該考慮的事情。此清單並不詳盡，僅做參考。這篇文章是參考了多處資源整理而來，大多來自WPDPS (windows phone depth partner support)，它們基於大量的應用審核和案例研究，這是一個非常好的資源庫。而正是因為我發現這裡的東西並非公開共享的，才促成我整理這些資源外加寫一些小貼士來分享給大家，它們並不是什麼新的東西，只是不易被看到或是了解。再次感謝WPDPS，也期待有越來越多這種有用的資源可以體現到windows phone的開發中心。

　　1. 元素對齊與邊距

　　所有的頁面都應遵循左邊距12px或24px。

　　內容，標題，標頭以及標頭的圖標也應左對齊，距離左邊界為12px或是24px。

　　如果有需要進行右對齊，右邊距也應該是12px或是24px。

　　小貼士： 在調試模式運行應用時，你可以查看由25*25紅色方塊組成的半透明網格。這些方塊是以24px邊距填充頁面的，並且他們之間的距離是12px，這也恰恰體現了windows phone設計方塊的魔力。這些網格可以幫助你迅速找出任何對齊的問題。

　　當列表的字段與數值成對出現時，應以兩組左對齊的隊列出現，或是像系統聯系人應用中詳細信息頁面的設計那樣，標題在內容的上方。

　　2. 元素間距

　　元素的間距應該在水平和垂直兩個方向上保持一致。建議元素以12px的間距出現，以遵循設計網格。

　　3. 控制點擊響應

　　當使用諸如按鈕、列表項等標准控件時，應該使用系統標准的傾斜效果

　　不要使用背景、前景或是外框顏色變化

　　其他控件，不采用動畫或是顏色的變化是允許的

　　在點擊時，任何信息的顏色變化都是不允許的。

　　4. 列表

　　列表項被點擊時，都應以傾斜動畫表明。

　　除了在選取器中，列表項都不應該有選中狀態。

　　請在應用中使用一致的字體，列表項的文字至少應有12像素的高度，並且是容易點擊的，同時確保文字在所有角度和大小下的可閱讀性。

　　背景

　　不建議使用背景，盡管他們可以傳達品牌並且增加一些對比度。取而代之，你可以給文字前景加一些相關元素。

　　布局

　　用文字的大小和顏色建立列表項的層級

　　列表增強

　　例如在菜單中，不要使用列表增強的設計。除非他們之間需要有明顯的差別。有條經驗法則：在圓圈裡的圖標意味著操作而不在圓圈裡的往往只有指示作用。

　　可滾動內容

　　如果在頁面中有可滾動的內容，你需要在內容的底端留出95px的距離，這樣內容就不至於貼著頁面的最底端。

　　例如，下圖就是一個只比可視區域高出一點點的頁面

　　當用戶滾動到頁面的最底端時， 會出現橡皮筋的效果，內容會被稍稍拉離頁面底部。當滾動動作結束時，內容會重新彈回頁面的邊界。

　　雖然這樣可行並且看起來還尚可，但是把內容一直伸展到頁面底部並不是完美的。最快解決的辦法就是在頁面底部設置95px的距離，為內容模塊與底部邊界騰出一些空間——不管是針對手機屏幕還是底部的菜單欄。這樣看起來會更順眼。

　　在系統的聯系人應用中的介紹或是歷史頁面，你都能看到同樣的底邊距。還有在日歷應用中的新建邀請頁面，亦或是IE浏覽器的設置頁面，也是一樣的處理。說到設置，你可以到系統的設置應用中試試滾動到底部。

　　5. 樞軸

　　樞軸頁面

　　所有的樞軸使用至少需要兩個頁面

　　樞軸頁面中的禁用控件

　　撥動開關

　　滑動條

　　地圖控件——除非它們是靜態的(例如縮放和平移手勢應被禁用)

　　浏覽器控件——除非它們是靜態的(例如縮放和平移手勢應被禁用)

　　手勢沖突

　　提供水平滾動區域或是水平滑動手勢的控件都是不允許在樞軸頁面中應用，因為水平滑動的手勢已被樞軸頁面間的切換占用。

　　空的樞軸頁面

　　如果某個樞軸頁面的內容顯示取決於用戶的操作，應該使用占位符文本/圖片來提示用戶。例如，當“未讀郵件”的樞軸頁面中沒有內容時，頁面不該被移走，保留的同時應該顯示簡單的信息來說明當前沒有可用的內容。

　　更多細節請查看：Windows Phone樞軸頁面設計指南

　　6. 全景

　　全景頁面中的禁用控件

　　撥動開關

　　滑動條

　　地圖控件——除非它們是靜態的(例如縮放和平移手勢應被禁用)

　　浏覽器控件——除非它們是靜態的(例如縮放和平移手勢應被禁用)

　　菜單欄

　　在菜單欄中應當有如刷新，搜索及設置等常用操作

　　菜單欄裡可用的選項可以隨著全景面板變化

　　全景中應當避免使用浮動按鈕或是盡量少使用

　　手勢沖突

　　提供水平滾動區域或是水平滑動手勢的控件都是不允許在全景頁面中應用，因為水平滑動的手勢已被全景頁面間的切換占用。

　　滾動面板

　　全景面板的滾動應當選擇水平或垂直方向，不能兩者皆有。

　　在全景頁面中，不可將所有的面板設置為都可垂直滾動，如果使用場景要求這樣的，樞軸頁面更為合適。

　　采用多樣化的全景面板(水平與垂直向滾動交替使用)可以提升總體的體驗並且更易浏覽。

　　導航

　　避免使用浮動按鈕。如果必要的話提供一個導航模塊，提供給用戶尋找更深內同的入口

　　系統提供的圖片應用以及音樂&視頻應用就是全景導航使用的絕佳案例。常規任務的操作應該放在菜單欄裡。