UI設(shè)計(jì)師干貨！Windows Phone 8 UI 設(shè)計(jì)指南
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
我很羨慕Windows 8的團(tuán)隊(duì)，他們有自己專屬的設(shè)計(jì)指南，指引人們構(gòu)建出完美的Windows商店應(yīng)用。因此，我決定要成為先行者，為Windows Phone 8做點(diǎn)類似的事情。這有一個(gè)推薦清單，列出了那些你在搭建windows phone應(yīng)用時(shí)應(yīng)該考慮的事情。此清單并不詳盡，僅做參考。這篇文章是參考了多處資源整理而來，大多來自WPDPS (windows phone depth partner support)，它們基于大量的應(yīng)用審核和案例研究，這是一個(gè)非常好的資源庫。而正是因?yàn)槲野l(fā)現(xiàn)這里的東西并非公開共享的，才促成我整理這些資源外加寫一些小貼士來分享給大家，它們并不是什么新的東西，只是不易被看到或是了解。再次感謝WPDPS，也期待有越來越多這種有用的資源可以體現(xiàn)到windows phone的開發(fā)中心。 1. 元素對(duì)齊與邊距 所有的頁面都應(yīng)遵循左邊距14px或24px。 內(nèi)容，標(biāo)題，標(biāo)頭以及標(biāo)頭的圖標(biāo)也應(yīng)左對(duì)齊，距離左邊界為14px或是24px。 如果有需要進(jìn)行右對(duì)齊，右邊距也應(yīng)該是14px或是24px。
小貼士： 在調(diào)試模式運(yùn)行應(yīng)用時(shí)，你可以查看由25*25紅色方塊組成的半透明網(wǎng)格。這些方塊是以24px邊距填充頁面的，并且他們之間的距離是14px，這也恰恰體現(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)容的上方。
2. 元素間距 元素的間距應(yīng)該在水平和垂直兩個(gè)方向上保持一致。建議元素以14px的間距出現(xiàn)，以遵循設(shè)計(jì)網(wǎng)格。
3. 控制點(diǎn)擊響應(yīng) 當(dāng)使用諸如按鈕、列表項(xiàng)等標(biāo)準(zhǔn)控件時(shí)，應(yīng)該使用系統(tǒng)標(biāo)準(zhǔn)的傾斜效果 不要使用背景、前景或是外框顏色變化 其他控件，不采用動(dòng)畫或是顏色的變化是允許的 在點(diǎn)擊時(shí)，任何信息的顏色變化都是不允許的。 4. 列表 列表項(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)到底部。 5. 樞軸 樞軸頁面 所有的樞軸使用至少需要兩個(gè)頁面 樞軸頁面中的禁用控件 撥動(dòng)開關(guān) 滑動(dòng)條 地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢(shì)應(yīng)被禁用） 瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢(shì)應(yīng)被禁用） 手勢(shì)沖突 提供水平滾動(dòng)區(qū)域或是水平滑動(dòng)手勢(shì)的控件都是不允許在樞軸頁面中應(yīng)用，因?yàn)樗交瑒?dòng)的手勢(shì)已被樞軸頁面間的切換占用。
空的樞軸頁面 如果某個(gè)樞軸頁面的內(nèi)容顯示取決于用戶的操作，應(yīng)該使用占位符文本/圖片來提示用戶。例如，當(dāng)“未讀郵件”的樞軸頁面中沒有內(nèi)容時(shí)，頁面不該被移走，保留的同時(shí)應(yīng)該顯示簡(jiǎn)單的信息來說明當(dāng)前沒有可用的內(nèi)容。
6. 全景 全景頁面中的禁用控件 撥動(dòng)開關(guān) 滑動(dòng)條 地圖控件——除非它們是靜態(tài)的（例如縮放和平移手勢(shì)應(yīng)被禁用） 瀏覽器控件——除非它們是靜態(tài)的（例如縮放和平移手勢(shì)應(yīng)被禁用） 菜單欄
手勢(shì)沖突 提供水平滾動(dòng)區(qū)域或是水平滑動(dòng)手勢(shì)的控件都是不允許在全景頁面中應(yīng)用，因?yàn)樗交瑒?dòng)的手勢(shì)已被全景頁面間的切換占用。 滾動(dòng)面板 全景面板的滾動(dòng)應(yīng)當(dāng)選擇水平或垂直方向，不能兩者皆有。
在全景頁面中，不可將所有的面板設(shè)置為都可垂直滾動(dòng)，如果使用場(chǎ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)容
面板數(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)容大 7. 標(biāo)題 標(biāo)題應(yīng)使用左對(duì)齊方式，不能使用背景，外邊框，下劃線等任何裝飾 唯一例外是在全景下可以使用企業(yè)品牌化的元素 參考本篇文章關(guān)于文字的章節(jié) 8. 按鈕 位置 只要可能，按鈕都應(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)。 9. 選擇器 標(biāo)準(zhǔn)的選擇器控件應(yīng)用于選擇一個(gè)日期或時(shí)間，或者是選擇一個(gè)字母。 如果要使用非標(biāo)準(zhǔn)的選擇器，樣式應(yīng)該遵循系統(tǒng)的設(shè)置應(yīng)用中選擇鈴聲的選擇器。 10. 開始瓦片 主要瓦片 開始瓦片不應(yīng)有圓角或是3D效果。應(yīng)與開始菜單中的其他的瓦片使用同樣的樣式。
次要瓦片
寬瓦片
11. 瀏覽器控件 任何應(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)用中。 12. 彈窗 請(qǐng)采用標(biāo)準(zhǔn)的Windows Phone的彈窗。彈窗中只有一個(gè)按鈕時(shí)左對(duì)齊，多個(gè)時(shí)居中對(duì)齊。 盡量避免使用自定義彈窗——如果一定要使用，請(qǐng)盡量模仿系統(tǒng)彈窗的行為。
Windows Phone工具包中也有一個(gè)允許一定程度自定義的彈窗控件。 13. 對(duì)比度 頁面中所有的控件在前景與背景間都應(yīng)采用有效的對(duì)比度。 這個(gè)對(duì)于全景頁面尤為重要，因?yàn)槿暗膱D片經(jīng)常會(huì)影響文字的可讀性。如果你遇到這樣的情況，要么換一張背景，要么給背景上加一個(gè)半透明的黑色或灰色的遮罩。 14. 文字 大小寫 除了二級(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一起混搭使用這些字體看起來特別奇怪。 15. 圖片 應(yīng)用中用于背景或是界面元素的圖片需與應(yīng)用相符 請(qǐng)保證圖片的比例，確保其不會(huì)因?yàn)榭s放而變形或模糊。有透明度的圖片需要有一定的抗鋸齒屬性以確保在不同顏色的背景上較好地顯示。 對(duì)于大部分應(yīng)用，我們建議只使用WXGA的圖片。WXGA相比之下質(zhì)量最高，而且能夠自適應(yīng)不同的分辨率。
16. 圖標(biāo) 隱喻 不要混用圖標(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)格——簡(jiǎn)單、單色、扁平。 17. 觸點(diǎn) 確保你的應(yīng)用在觸控體驗(yàn)上最優(yōu)化 最小字體的大小為15pt 推薦的觸控大小為9mm
最小的觸控大小為7mm
元素中最小的距離為2mm
視覺元素的大小與觸控范圍的比例應(yīng)控制在60%-100% 元素被觸控后應(yīng)提供響應(yīng)
18. 錯(cuò)別字 應(yīng)用中不應(yīng)有任何拼寫錯(cuò)誤 重申一下，錯(cuò)別字問題不僅看上去很糟糕，而且會(huì)對(duì)你的品牌造成負(fù)面影響 19. 主題 應(yīng)用的設(shè)計(jì)應(yīng)當(dāng)考慮設(shè)備的主題和顏色變換，或是設(shè)定不受顏色改變的固定的主題 不管使用什么主題，應(yīng)用的所有元素都應(yīng)清晰可見而且有一定程度的對(duì)比度。 20. 啟動(dòng)頁 請(qǐng)為不同分辨率定制啟動(dòng)頁
21. 手機(jī)的返回鍵 手機(jī)的返回鍵必須讓用戶完成以下的操作：
返回鍵的功用在任何情況下都不允許改變，包括在次級(jí)瓦片時(shí)的使用 22. 次級(jí)瓦片（深層規(guī)范） 次級(jí)瓦片的設(shè)計(jì)用于給用戶展示應(yīng)用的特殊部分，通過它用戶可以快速簡(jiǎn)單地對(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)用程序（例如，返回開始頁面）。此返回鍵的交互行為在任何情況下都不許更改。 23. 鎖屏頁面
24. 拍照設(shè)計(jì)
多媒體鏈接 鏈接應(yīng)當(dāng)以定制的體驗(yàn)啟動(dòng)應(yīng)用，而非簡(jiǎn)單地將用戶帶到啟動(dòng)默認(rèn)頁 避免在相機(jī)膠卷中使用品牌的元素——用戶需要在毫無視覺干擾的情況下進(jìn)行分享和編輯。 25. 頁面跳轉(zhuǎn)動(dòng)效 頁面切換時(shí)需有動(dòng)效，各種效果可以查看Windows Phone工具包中的Silverlight。
進(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í)長(zhǎng)時(shí)，例如正在等待連接網(wǎng)頁服務(wù)的響應(yīng)時(shí)。 26. 界面語言 不要使用計(jì)算機(jī)術(shù)語，十六進(jìn)制的錯(cuò)誤編碼，或是需要深厚計(jì)算機(jī)知識(shí)背景才能看懂的文字。 請(qǐng)使用真實(shí)清晰的語氣來描述用戶語言。 請(qǐng)使用友好的、愉快的或是情感化的語言，杜絕出現(xiàn)機(jī)械的描述或是對(duì)用戶憤怒的指責(zé)。 結(jié)論 以上只是一些從各種案例分析中得出的常用設(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í)候也遇到了。 該文章在 2014/9/4 22:05:50 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
