轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：http://www.uisdc.com/windows-phone-8-guideline

1. 元素對齊與邊距

所有的頁面都應(yīng)遵循左邊距12px或24px。

內(nèi)容，標(biāo)題，標(biāo)頭以及標(biāo)頭的圖標(biāo)也應(yīng)左對齊，距離左邊界為12px或是24px。

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

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

當(dāng)列表的字段與數(shù)值成對出現(xiàn)時，應(yīng)以兩組左對齊的隊列出現(xiàn)，或是像系統(tǒng)聯(lián)系人應(yīng)用中詳細(xì)信息頁面的設(shè)計那樣，標(biāo)題在內(nèi)容的上方。

2. 元素間距

元素的間距應(yīng)該在水平和垂直兩個方向上保持一致。建議元素以12px的間距出現(xiàn)，以遵循設(shè)計網(wǎng)格。

3. 控制點擊響應(yīng)

當(dāng)使用諸如按鈕、列表項等標(biāo)準(zhǔn)控件時，應(yīng)該使用系統(tǒng)標(biāo)準(zhǔn)的傾斜效果

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

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

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

4. 列表

列表項被點擊時，都應(yīng)以傾斜動畫表明。

除了在選取器中，列表項都不應(yīng)該有選中狀態(tài)。

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

背景

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

布局

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

列表增強

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

可滾動內(nèi)容

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

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

當(dāng)用戶滾動到頁面的最底端時， 會出現(xiàn)橡皮筋的效果，內(nèi)容會被稍稍拉離頁面底部。當(dāng)滾動動作結(jié)束時，內(nèi)容會重新彈回頁面的邊界。

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

在系統(tǒng)的聯(lián)系人應(yīng)用中的介紹或是歷史頁面，你都能看到同樣的底邊距。還有在日歷應(yīng)用中的新建邀請頁面，亦或是IE瀏覽器的設(shè)置頁面，也是一樣的處理。說到設(shè)置，你可以到系統(tǒng)的設(shè)置應(yīng)用中試試滾動到底部。

5. 樞軸

樞軸頁面

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

樞軸頁面中的禁用控件

撥動開關(guān)

滑動條

地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢應(yīng)被禁用）

瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢應(yīng)被禁用）

手勢沖突

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

空的樞軸頁面

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

更多細(xì)節(jié)請查看：Windows Phone樞軸頁面設(shè)計指南

6. 全景

全景頁面中的禁用控件

撥動開關(guān)

滑動條

地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢應(yīng)被禁用）

瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢應(yīng)被禁用）

菜單欄

在菜單欄中應(yīng)當(dāng)有如刷新，搜索及設(shè)置等常用操作

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

全景中應(yīng)當(dāng)避免使用浮動按鈕或是盡量少使用

手勢沖突

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

滾動面板

全景面板的滾動應(yīng)當(dāng)選擇水平或垂直方向，不能兩者皆有。

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

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

導(dǎo)航

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

系統(tǒng)提供的圖片應(yīng)用以及音樂&視頻應(yīng)用就是全景導(dǎo)航使用的絕佳案例。常規(guī)任務(wù)的操作應(yīng)該放在菜單欄里。

可交互內(nèi)容

全景頁面中盡量少使用可以交互的內(nèi)容（如表格，搜索框等）

全景頁面中的控件應(yīng)對用戶有所引導(dǎo)（如應(yīng)用的縮略圖）

頁面中的用戶任務(wù)應(yīng)少而精，具有針對性并且引人注目

全景中的操作并不是整個應(yīng)用的全部

面板數(shù)量

全景頁面中推薦最多使用五個面板。超過五個則會增加瀏覽的難度而且程序的響應(yīng)會開始變得不流暢。

背景

全景頁面應(yīng)采用背景，可以是帶具有品牌元素的紋理圖，各種圖形或者是照片。

理想的情況是具有吸引力且符合全景頁面內(nèi)容的背景

標(biāo)題

標(biāo)題應(yīng)帶有移動時的動畫效果

全景標(biāo)題的動畫速度，相對于最頂上有內(nèi)容的區(qū)域慢，如果有背景圖片，也應(yīng)比它移動的速度慢

二級標(biāo)題

字體的大小應(yīng)該比它相應(yīng)得內(nèi)容大

7. 標(biāo)題

標(biāo)題應(yīng)使用左對齊方式，不能使用背景，外邊框，下劃線等任何裝飾

唯一例外是在全景下可以使用企業(yè)品牌化的元素

參考本篇文章關(guān)于文字的章節(jié)

8. 按鈕

位置

只要可能，按鈕都應(yīng)該放在菜單欄中。

以下情況除外：

全景中“出錯啦！無法找到參考源”之類的指引操作

彈出窗或是需要很多操作的設(shè)置頁面

快速操作（例如電話應(yīng)用中的通話記錄）

關(guān)閉按鈕 （Close）

Windows Phone應(yīng)用中不需要關(guān)閉按鈕，關(guān)閉操作應(yīng)由返回的硬鍵負(fù)責(zé)。

回退按鈕 （Back）

Windows Phone在任何地方都禁用回退按鈕。用戶會通過回退的硬鍵進行操作。

主頁按鈕 （Home）

不應(yīng)提供主頁按鈕，因為這會引起Windows Phone的導(dǎo)航模式的問題。如果用戶同時使用了這個主頁的按鈕和回退的硬鍵就會導(dǎo)致一個死循環(huán)。

9. 選擇器

標(biāo)準(zhǔn)的選擇器控件應(yīng)用于選擇一個日期或時間，或者是選擇一個字母。

如果要使用非標(biāo)準(zhǔn)的選擇器，樣式應(yīng)該遵循系統(tǒng)的設(shè)置應(yīng)用中選擇鈴聲的選擇器。

10. 開始瓦片

主要瓦片

開始瓦片不應(yīng)有圓角或是3D效果。應(yīng)與開始菜單中的其他的瓦片使用同樣的樣式。

確保使用的標(biāo)準(zhǔn)瓦片的模板

應(yīng)用的Logo應(yīng)該遵循模板的設(shè)計

在瓦片中不應(yīng)重復(fù)使用Logo

如果應(yīng)用的名字是圖片里的一部分，那么瓦片上的名字信息應(yīng)被移除避免出現(xiàn)兩次

避免使用本地化的文字在圖片或是瓦片中

避免使用純白或是純黑的背景，否則這樣的瓦片在亮或暗的背景上無法很好地顯示

避免使用相對時間戳或是日期（比如兩小時前），因為隨著時間推移會變得不太，請使用絕對時間（例如14：00）

次要瓦片

次要瓦片點擊不應(yīng)鏈到相應(yīng)的內(nèi)容頁

次要瓦片中不應(yīng)有和應(yīng)用交互的操作（例如“下一首”）

兩個好的例子：新聞類應(yīng)用會顯示常規(guī)更新，股票的應(yīng)用會有實時的價格顯示。

避免顯示不具時效性的內(nèi)容

寬瓦片

寬瓦片只能用作顯示經(jīng)常更新的內(nèi)容或是提醒（至少每周一次）

寬瓦片必須實時更新。

11. 瀏覽器控件

任何應(yīng)用都不允許在任何頁面中使用內(nèi)嵌瀏覽器，應(yīng)將用戶直接帶到IE瀏覽器中。

會將用戶帶離應(yīng)用的鏈接都應(yīng)清楚地告訴用戶將會發(fā)生的事情

例外

當(dāng)需要給用戶呈現(xiàn)認(rèn)證頁面（例如Facebook或Twitter認(rèn)證），如果沒有Xauth或是類似的API能夠滿足實現(xiàn)的需求，這個頁面可以允許以內(nèi)嵌瀏覽器的形式出現(xiàn)在應(yīng)用中。

12. 彈窗

請采用標(biāo)準(zhǔn)的Windows Phone的彈窗。彈窗中只有一個按鈕時左對齊，多個時居中對齊。

盡量避免使用自定義彈窗——如果一定要使用，請盡量模仿系統(tǒng)彈窗的行為。

Windows Phone工具包中也有一個允許一定程度自定義的彈窗控件。

13. 對比度

頁面中所有的控件在前景與背景間都應(yīng)采用有效的對比度。

這個對于全景頁面尤為重要，因為全景的圖片經(jīng)常會影響文字的可讀性。如果你遇到這樣的情況，要么換一張背景，要么給背景上加一個半透明的黑色或灰色的遮罩。

14. 文字

大小寫

除了二級標(biāo)題用全大寫外，所以的標(biāo)題都應(yīng)該用小寫。如果品牌有特殊的需求，請保證在整個app中的大小寫規(guī)則是統(tǒng)一的。

自定義/品牌化字體

應(yīng)用中可適度使用自定義或符合品牌化字體。自定義字體可用在頁面標(biāo)題或是全景區(qū)域標(biāo)題上，而其他的地方應(yīng)該使用Segoe WP字體。

請謹(jǐn)慎使用那些看起來特別像Segoe WP的字體，像Arial和Helvetica，因為與Segoe一起混搭使用這些字體看起來特別奇怪。

15. 圖片

應(yīng)用中用于背景或是界面元素的圖片需與應(yīng)用相符

請保證圖片的比例，確保其不會因為縮放而變形或模糊。有透明度的圖片需要有一定的抗鋸齒屬性以確保在不同顏色的背景上較好地顯示。

對于大部分應(yīng)用，我們建議只使用WXGA的圖片。WXGA相比之下質(zhì)量最高，而且能夠自適應(yīng)不同的分辨率。

16. 圖標(biāo)

隱喻

不要混用圖標(biāo)的隱喻。用戶的認(rèn)知是特定的圖標(biāo)代表特定含義，要么因為他們在設(shè)備的其他地方見到用，或者這些圖標(biāo)通常和某些功能掛鉤。例如：

如果你想表達的語義找不到相對應(yīng)隱喻的圖標(biāo)，就自己設(shè)計一個，切勿重用其他圖標(biāo)。

視覺風(fēng)格

圖標(biāo)的設(shè)計應(yīng)當(dāng)遵循Windows Phone的視覺風(fēng)格——簡單、單色、扁平。

17. 觸點

確保你的應(yīng)用在觸控體驗上最優(yōu)化

最小字體的大小為15pt

推薦的觸控大小為9mm

最小的觸控大小為7mm

元素中最小的距離為2mm

視覺元素的大小與觸控范圍的比例應(yīng)控制在60%-100%

元素被觸控后應(yīng)提供響應(yīng)

18. 錯別字

應(yīng)用中不應(yīng)有任何拼寫錯誤

重申一下，錯別字問題不僅看上去很糟糕，而且會對你的品牌造成負(fù)面影響

19. 主題

應(yīng)用的設(shè)計應(yīng)當(dāng)考慮設(shè)備的主題和顏色變換，或是設(shè)定不受顏色改變的固定的主題

不管使用什么主題，應(yīng)用的所有元素都應(yīng)清晰可見而且有一定程度的對比度。

20. 啟動頁

請為不同分辨率定制啟動頁

21. 手機的返回鍵

手機的返回鍵必須讓用戶完成以下的操作：

1. 關(guān)閉例如對話框，鍵盤或是選擇清單的臨時界面

2. 回退到上一步

返回鍵的功用在任何情況下都不允許改變，包括在次級瓦片時的使用

22. 次級瓦片（深層規(guī)范）

次級瓦片的設(shè)計用于給用戶展示應(yīng)用的特殊部分，通過它用戶可以快速簡單地對內(nèi)容進行瀏覽，而次級瓦片通常并不是這些細(xì)節(jié)的交互入口。

系統(tǒng)的應(yīng)用中有許多關(guān)于次級瓦片設(shè)計的優(yōu)秀案例。 例如，音樂和視頻應(yīng)用的專輯，在用戶點擊時就會播放。而次級瓦片的特殊用途在于點擊會將用戶定位到該專輯并且直接播放。

用戶同樣可以將聯(lián)系人放置到開始頁面。通過點擊這些次級瓦片用戶可以進入到聯(lián)系人的樞軸頁面，查看聯(lián)系人信息，或是進行相關(guān)的操作。

點擊手機的返回鍵會將用戶帶回啟動頁面。

放置到開始頁面

大頭針圖標(biāo)應(yīng)當(dāng)出現(xiàn)在應(yīng)用的菜單欄中，表示可以將這個物件或是選擇放置到開始頁面。不得將此圖標(biāo)用作它意。

點擊并保持的動作也可以出發(fā)選項，將物件放置到開始頁面——這是Windows

Phone工具包中的一部分

將應(yīng)用放置到開始頁面的行為應(yīng)當(dāng)由用戶自主控制，或是獲得用戶許可。在未向用戶獲取權(quán)限之前，請不要擅自將任何應(yīng)用或是物體放置在開始頁面。

手機的返回鍵

當(dāng)用戶通過點擊次級瓦片啟動應(yīng)用時，點擊手機上的返回按鈕會退出該應(yīng)用程序（例如，返回開始頁面）。此返回鍵的交互行為在任何情況下都不許更改。

23. 鎖屏頁面

• 背景圖片盡量不要有文字出現(xiàn)，避免與鎖屏消息在視覺上產(chǎn)生沖突。
• 背景圖片應(yīng)盡可能簡單，復(fù)雜的圖片會影響鎖屏消息和提醒的可讀性。
• 標(biāo)志logo應(yīng)盡可能小，防止對日期時間以及消息造成干擾。
• 如果圖片里出現(xiàn)文字，應(yīng)當(dāng)與圖片直接相關(guān)。
• 鎖屏頁面的視覺焦點應(yīng)當(dāng)是背景圖片，而非標(biāo)志或是文字。

24. 拍照設(shè)計

• 應(yīng)用中應(yīng)該顯示左箭頭圖標(biāo)來表示有更多照片
• 保存和拍照的動效應(yīng)該一致
• 需要支持點擊直接拍照以及相機上用于拍照的硬鍵
• 需要支持按下一半拍照鍵用于對焦
• 對焦框應(yīng)與系統(tǒng)相機行為一致
• 用于拍照和用于確認(rèn)的應(yīng)用應(yīng)該有統(tǒng)一的圖標(biāo)（例如保存和刪除），同樣適用于動效
• 取消或保存應(yīng)將用戶帶回取景器的頁面。圖標(biāo)在Windows Phone SDK中皆可找到

多媒體鏈接

鏈接應(yīng)當(dāng)以定制的體驗啟動應(yīng)用，而非簡單地將用戶帶到啟動默認(rèn)頁

避免在相機膠卷中使用品牌的元素——用戶需要在毫無視覺干擾的情況下進行分享和編輯。

25. 頁面跳轉(zhuǎn)動效

頁面切換時需有動效，各種效果可以查看Windows Phone工具包中的Silverlight。

十字翻轉(zhuǎn)——用于不同區(qū)域變換的動效

旋轉(zhuǎn)——用于展現(xiàn)臨時的界面

滑動——用于沒有前進導(dǎo)航的平級操作

傾斜——用于控件被按下的自然反饋

進度條的使用

就像在界面中使用傾斜效果來表示點擊反饋一樣，進度條能夠讓用戶清楚地知道有事情正在發(fā)生，這能夠消除用戶對于應(yīng)用是否正在運行的疑慮。以下是兩種進度條的樣式：確定進度和不確定進度

確定進度條通常用于顯示完成度的比例，例如已下載的大小。不確定進度條更為常用，特別是在不確定此進程的時長時，例如正在等待連接網(wǎng)頁服務(wù)的響應(yīng)時。

26. 界面語言

不要使用計算機術(shù)語，十六進制的錯誤編碼，或是需要深厚計算機知識背景才能看懂的文字。

請使用真實清晰的語氣來描述用戶語言。

請使用友好的、愉快的或是情感化的語言，杜絕出現(xiàn)機械的描述或是對用戶憤怒的指責(zé)。

結(jié)論

以上只是一些從各種案例分析中得出的常用設(shè)計建議，所以做你自己認(rèn)為對的設(shè)計，同時以下有一些值得借鑒的成功經(jīng)驗：

在任何移動平臺上設(shè)計出良好體驗就是要為平臺及其使用習(xí)慣定制應(yīng)用

設(shè)計令人信服的Windows Phone界面的第一步就是要花些時間好好用一下系統(tǒng)發(fā)布的應(yīng)用，這能幫助你熟悉Windows Phone平臺的特性和設(shè)計語言

多從那些優(yōu)秀的第三方應(yīng)用中獲得靈感，我最喜歡的一個應(yīng)用，Cocktail Flow對設(shè)計原則進行了創(chuàng)新，提供了令人印象深刻的體驗。

當(dāng)你已經(jīng)準(zhǔn)好基礎(chǔ)準(zhǔn)備開始進行應(yīng)用的頁面視覺設(shè)計時，請參考一下本篇文章中的指南。這對你避免一些常見的錯誤設(shè)計非常有幫助，之前我在設(shè)計自己應(yīng)用的時候也遇到了。