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