UI設計師干貨！Windows Phone 8 UI 設計指南
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
我很羨慕Windows 8的團隊，他們有自己專屬的設計指南，指引人們構建出完美的Windows商店應用。因此，我決定要成為先行者，為Windows Phone 8做點類似的事情。這有一個推薦清單，列出了那些你在搭建windows phone應用時應該考慮的事情。此清單并不詳盡，僅做參考。這篇文章是參考了多處資源整理而來，大多來自WPDPS (windows phone depth partner support)，它們基于大量的應用審核和案例研究，這是一個非常好的資源庫。而正是因為我發(fā)現(xiàn)這里的東西并非公開共享的，才促成我整理這些資源外加寫一些小貼士來分享給大家，它們并不是什么新的東西，只是不易被看到或是了解。再次感謝WPDPS，也期待有越來越多這種有用的資源可以體現(xiàn)到windows phone的開發(fā)中心。 1. 元素對齊與邊距 所有的頁面都應遵循左邊距14px或24px。 內(nèi)容，標題，標頭以及標頭的圖標也應左對齊，距離左邊界為14px或是24px。 如果有需要進行右對齊，右邊距也應該是14px或是24px。
小貼士： 在調(diào)試模式運行應用時，你可以查看由25*25紅色方塊組成的半透明網(wǎng)格。這些方塊是以24px邊距填充頁面的，并且他們之間的距離是14px，這也恰恰體現(xiàn)了windows phone設計方塊的魔力。這些網(wǎng)格可以幫助你迅速找出任何對齊的問題。
當列表的字段與數(shù)值成對出現(xiàn)時，應以兩組左對齊的隊列出現(xiàn)，或是像系統(tǒng)聯(lián)系人應用中詳細信息頁面的設計那樣，標題在內(nèi)容的上方。
2. 元素間距 元素的間距應該在水平和垂直兩個方向上保持一致。建議元素以14px的間距出現(xiàn)，以遵循設計網(wǎng)格。
3. 控制點擊響應 當使用諸如按鈕、列表項等標準控件時，應該使用系統(tǒng)標準的傾斜效果 不要使用背景、前景或是外框顏色變化 其他控件，不采用動畫或是顏色的變化是允許的 在點擊時，任何信息的顏色變化都是不允許的。 4. 列表 列表項被點擊時，都應以傾斜動畫表明。
除了在選取器中，列表項都不應該有選中狀態(tài)。 請在應用中使用一致的字體，列表項的文字至少應有12像素的高度，并且是容易點擊的，同時確保文字在所有角度和大小下的可閱讀性。 背景 不建議使用背景，盡管他們可以傳達品牌并且增加一些對比度。取而代之，你可以給文字前景加一些相關元素。 布局 用文字的大小和顏色建立列表項的層級 列表增強 例如在菜單中，不要使用列表增強的設計。除非他們之間需要有明顯的差別。有條經(jīng)驗法則：在圓圈里的圖標意味著操作而不在圓圈里的往往只有指示作用。
可滾動內(nèi)容 如果在頁面中有可滾動的內(nèi)容，你需要在內(nèi)容的底端留出95px的距離，這樣內(nèi)容就不至于貼著頁面的最底端。 例如，下圖就是一個只比可視區(qū)域高出一點點的頁面
當用戶滾動到頁面的最底端時， 會出現(xiàn)橡皮筋的效果，內(nèi)容會被稍稍拉離頁面底部。當滾動動作結束時，內(nèi)容會重新彈回頁面的邊界。
雖然這樣可行并且看起來還尚可，但是把內(nèi)容一直伸展到頁面底部并不是完美的。最快解決的辦法就是在頁面底部設置95px的距離，為內(nèi)容模塊與底部邊界騰出一些空間——不管是針對手機屏幕還是底部的菜單欄。這樣看起來會更順眼。
在系統(tǒng)的聯(lián)系人應用中的介紹或是歷史頁面，你都能看到同樣的底邊距。還有在日歷應用中的新建邀請頁面，亦或是IE瀏覽器的設置頁面，也是一樣的處理。說到設置，你可以到系統(tǒng)的設置應用中試試滾動到底部。 5. 樞軸 樞軸頁面 所有的樞軸使用至少需要兩個頁面 樞軸頁面中的禁用控件 撥動開關 滑動條 地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢應被禁用） 瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢應被禁用） 手勢沖突 提供水平滾動區(qū)域或是水平滑動手勢的控件都是不允許在樞軸頁面中應用，因為水平滑動的手勢已被樞軸頁面間的切換占用。
空的樞軸頁面 如果某個樞軸頁面的內(nèi)容顯示取決于用戶的操作，應該使用占位符文本/圖片來提示用戶。例如，當“未讀郵件”的樞軸頁面中沒有內(nèi)容時，頁面不該被移走，保留的同時應該顯示簡單的信息來說明當前沒有可用的內(nèi)容。
6. 全景 全景頁面中的禁用控件 撥動開關 滑動條 地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢應被禁用） 瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢應被禁用） 菜單欄
手勢沖突 提供水平滾動區(qū)域或是水平滑動手勢的控件都是不允許在全景頁面中應用，因為水平滑動的手勢已被全景頁面間的切換占用。 滾動面板 全景面板的滾動應當選擇水平或垂直方向，不能兩者皆有。
在全景頁面中，不可將所有的面板設置為都可垂直滾動，如果使用場景要求這樣的，樞軸頁面更為合適。 采用多樣化的全景面板（水平與垂直向滾動交替使用）可以提升總體的體驗并且更易瀏覽。 導航 避免使用浮動按鈕。如果必要的話提供一個導航模塊，提供給用戶尋找更深內(nèi)同的入口 系統(tǒng)提供的圖片應用以及音樂&視頻應用就是全景導航使用的絕佳案例。常規(guī)任務的操作應該放在菜單欄里。
可交互內(nèi)容
面板數(shù)量 全景頁面中推薦最多使用五個面板。超過五個則會增加瀏覽的難度而且程序的響應會開始變得不流暢。 背景 全景頁面應采用背景，可以是帶具有品牌元素的紋理圖，各種圖形或者是照片。 理想的情況是具有吸引力且符合全景頁面內(nèi)容的背景 標題 標題應帶有移動時的動畫效果 全景標題的動畫速度，相對于最頂上有內(nèi)容的區(qū)域慢，如果有背景圖片，也應比它移動的速度慢 二級標題 字體的大小應該比它相應得內(nèi)容大 7. 標題 標題應使用左對齊方式，不能使用背景，外邊框，下劃線等任何裝飾 唯一例外是在全景下可以使用企業(yè)品牌化的元素 參考本篇文章關于文字的章節(jié) 8. 按鈕 位置 只要可能，按鈕都應該放在菜單欄中。
以下情況除外： 全景中“出錯啦！無法找到參考源”之類的指引操作 彈出窗或是需要很多操作的設置頁面 快速操作（例如電話應用中的通話記錄）
關閉按鈕 （Close） Windows Phone應用中不需要關閉按鈕，關閉操作應由返回的硬鍵負責。 回退按鈕 （Back） Windows Phone在任何地方都禁用回退按鈕。用戶會通過回退的硬鍵進行操作。 主頁按鈕 （Home） 不應提供主頁按鈕，因為這會引起Windows Phone的導航模式的問題。如果用戶同時使用了這個主頁的按鈕和回退的硬鍵就會導致一個死循環(huán)。 9. 選擇器 標準的選擇器控件應用于選擇一個日期或時間，或者是選擇一個字母。 如果要使用非標準的選擇器，樣式應該遵循系統(tǒng)的設置應用中選擇鈴聲的選擇器。 10. 開始瓦片 主要瓦片 開始瓦片不應有圓角或是3D效果。應與開始菜單中的其他的瓦片使用同樣的樣式。
次要瓦片
寬瓦片
11. 瀏覽器控件 任何應用都不允許在任何頁面中使用內(nèi)嵌瀏覽器，應將用戶直接帶到IE瀏覽器中。 會將用戶帶離應用的鏈接都應清楚地告訴用戶將會發(fā)生的事情 例外 當需要給用戶呈現(xiàn)認證頁面（例如Facebook或Twitter認證），如果沒有Xauth或是類似的API能夠滿足實現(xiàn)的需求，這個頁面可以允許以內(nèi)嵌瀏覽器的形式出現(xiàn)在應用中。 12. 彈窗 請采用標準的Windows Phone的彈窗。彈窗中只有一個按鈕時左對齊，多個時居中對齊。 盡量避免使用自定義彈窗——如果一定要使用，請盡量模仿系統(tǒng)彈窗的行為。
Windows Phone工具包中也有一個允許一定程度自定義的彈窗控件。 13. 對比度 頁面中所有的控件在前景與背景間都應采用有效的對比度。 這個對于全景頁面尤為重要，因為全景的圖片經(jīng)常會影響文字的可讀性。如果你遇到這樣的情況，要么換一張背景，要么給背景上加一個半透明的黑色或灰色的遮罩。 14. 文字 大小寫 除了二級標題用全大寫外，所以的標題都應該用小寫。如果品牌有特殊的需求，請保證在整個app中的大小寫規(guī)則是統(tǒng)一的。 自定義/品牌化字體 應用中可適度使用自定義或符合品牌化字體。自定義字體可用在頁面標題或是全景區(qū)域標題上，而其他的地方應該使用Segoe WP字體。 請謹慎使用那些看起來特別像Segoe WP的字體，像Arial和Helvetica，因為與Segoe一起混搭使用這些字體看起來特別奇怪。 15. 圖片 應用中用于背景或是界面元素的圖片需與應用相符 請保證圖片的比例，確保其不會因為縮放而變形或模糊。有透明度的圖片需要有一定的抗鋸齒屬性以確保在不同顏色的背景上較好地顯示。 對于大部分應用，我們建議只使用WXGA的圖片。WXGA相比之下質(zhì)量最高，而且能夠自適應不同的分辨率。
16. 圖標 隱喻 不要混用圖標的隱喻。用戶的認知是特定的圖標代表特定含義，要么因為他們在設備的其他地方見到用，或者這些圖標通常和某些功能掛鉤。例如：
如果你想表達的語義找不到相對應隱喻的圖標，就自己設計一個，切勿重用其他圖標。 視覺風格 圖標的設計應當遵循Windows Phone的視覺風格——簡單、單色、扁平。 17. 觸點 確保你的應用在觸控體驗上最優(yōu)化 最小字體的大小為15pt 推薦的觸控大小為9mm
最小的觸控大小為7mm
元素中最小的距離為2mm
視覺元素的大小與觸控范圍的比例應控制在60%-100% 元素被觸控后應提供響應
18. 錯別字 應用中不應有任何拼寫錯誤 重申一下，錯別字問題不僅看上去很糟糕，而且會對你的品牌造成負面影響 19. 主題 應用的設計應當考慮設備的主題和顏色變換，或是設定不受顏色改變的固定的主題 不管使用什么主題，應用的所有元素都應清晰可見而且有一定程度的對比度。 20. 啟動頁 請為不同分辨率定制啟動頁
21. 手機的返回鍵 手機的返回鍵必須讓用戶完成以下的操作：
返回鍵的功用在任何情況下都不允許改變，包括在次級瓦片時的使用 22. 次級瓦片（深層規(guī)范） 次級瓦片的設計用于給用戶展示應用的特殊部分，通過它用戶可以快速簡單地對內(nèi)容進行瀏覽，而次級瓦片通常并不是這些細節(jié)的交互入口。 系統(tǒng)的應用中有許多關于次級瓦片設計的優(yōu)秀案例。 例如，音樂和視頻應用的專輯，在用戶點擊時就會播放。而次級瓦片的特殊用途在于點擊會將用戶定位到該專輯并且直接播放。 用戶同樣可以將聯(lián)系人放置到開始頁面。通過點擊這些次級瓦片用戶可以進入到聯(lián)系人的樞軸頁面，查看聯(lián)系人信息，或是進行相關的操作。 點擊手機的返回鍵會將用戶帶回啟動頁面。 放置到開始頁面 大頭針圖標應當出現(xiàn)在應用的菜單欄中，表示可以將這個物件或是選擇放置到開始頁面。不得將此圖標用作它意。 點擊并保持的動作也可以出發(fā)選項，將物件放置到開始頁面——這是Windows Phone工具包中的一部分 將應用放置到開始頁面的行為應當由用戶自主控制，或是獲得用戶許可。在未向用戶獲取權限之前，請不要擅自將任何應用或是物體放置在開始頁面。 手機的返回鍵 當用戶通過點擊次級瓦片啟動應用時，點擊手機上的返回按鈕會退出該應用程序（例如，返回開始頁面）。此返回鍵的交互行為在任何情況下都不許更改。 23. 鎖屏頁面
24. 拍照設計
多媒體鏈接 鏈接應當以定制的體驗啟動應用，而非簡單地將用戶帶到啟動默認頁 避免在相機膠卷中使用品牌的元素——用戶需要在毫無視覺干擾的情況下進行分享和編輯。 25. 頁面跳轉動效 頁面切換時需有動效，各種效果可以查看Windows Phone工具包中的Silverlight。
進度條的使用 就像在界面中使用傾斜效果來表示點擊反饋一樣，進度條能夠讓用戶清楚地知道有事情正在發(fā)生，這能夠消除用戶對于應用是否正在運行的疑慮。以下是兩種進度條的樣式：確定進度和不確定進度 確定進度條通常用于顯示完成度的比例，例如已下載的大小。不確定進度條更為常用，特別是在不確定此進程的時長時，例如正在等待連接網(wǎng)頁服務的響應時。 26. 界面語言 不要使用計算機術語，十六進制的錯誤編碼，或是需要深厚計算機知識背景才能看懂的文字。 請使用真實清晰的語氣來描述用戶語言。 請使用友好的、愉快的或是情感化的語言，杜絕出現(xiàn)機械的描述或是對用戶憤怒的指責。 結論 以上只是一些從各種案例分析中得出的常用設計建議，所以做你自己認為對的設計，同時以下有一些值得借鑒的成功經(jīng)驗： 在任何移動平臺上設計出良好體驗就是要為平臺及其使用習慣定制應用 設計令人信服的Windows Phone界面的第一步就是要花些時間好好用一下系統(tǒng)發(fā)布的應用，這能幫助你熟悉Windows Phone平臺的特性和設計語言 多從那些優(yōu)秀的第三方應用中獲得靈感，我最喜歡的一個應用，Cocktail Flow對設計原則進行了創(chuàng)新，提供了令人印象深刻的體驗。 當你已經(jīng)準好基礎準備開始進行應用的頁面視覺設計時，請參考一下本篇文章中的指南。這對你避免一些常見的錯誤設計非常有幫助，之前我在設計自己應用的時候也遇到了。 該文章在 2014/9/4 22:05:50 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
