【 設計理論】淺談微軟手機操作系統的設計指南

淺談微軟手機操作系統的設計指南

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是TerryFan,感謝TerryFan提供設計理論的實作教學。

教學大綱:

最近在準備Windows Phone 8的設計工作,尋找資料時看到這篇文章,感覺有點像是MSDN里design guide的總結,是快速入門WP設計的絕佳文獻,由於本人對WP的理解還不夠深,而文章中有很多WP的專有詞彙和描述,所以翻譯難免有誤,希望大家指正。


設計理論教學開始

最近在準備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. 全景

全景頁面中的禁用控件

撥動開關

滑動條

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

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

菜單欄

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

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

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

手勢衝突

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

滾動面板

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

淺談微軟手機操作系統的設計指南

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

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

導航

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

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

淺談微軟手機操作系統的設計指南

可交互內容

全景頁面中盡量少使用可以交互的內容(如表格,搜索框等)

全景頁面中的控件應對用戶有所引導(如應用的縮略圖)

頁面中的用戶任務應少而精,具有針對性並且引人注目

全景中的操作並不是整個應用的全部

面板數量

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

背景

全景頁面應採用背景,可以是帶具有品牌元素的紋理圖,各種圖形或者是照片。

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

標題

標題應帶有移動時的動畫效果

全景標題的動畫速度,相對於最頂上有內容的區域慢,如果有背景圖片,也應比它移動的速度慢

二級標題

字體的大小應該比它相應得內容大

7. 標題

標題應使用左對齊方式,不能使用背景,外邊框,下劃線等任何裝飾

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

參考本篇文章關於文字的章節

8. 按鈕

位置

只要可能,按鈕都應該放在菜單欄中。

淺談微軟手機操作系統的設計指南

以下情況除外:

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

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

快速操作(例如電話應用中的通話記錄)

淺談微軟手機操作系統的設計指南

關閉按鈕 (Close)

Windows Phone應用中不需要關閉按鈕,關閉操作應由返回的硬鍵負責。

回退按鈕 (Back)

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

主頁按鈕 (Home)

不應提供主頁按鈕,因為這會引起Windows Phone的導航模式的問題。如果用戶同時使用了這個主頁的按鈕和回退的硬鍵就會導致一個死循環。

9. 選擇器

標準的選擇器控件應用於選擇一個日期或時間,或者是選擇一個字母。

如果要使用非標準的選擇器,樣式應該遵循系統的設置應用中選擇鈴聲的選擇器。

10. 開始瓦片

主要瓦片

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

淺談微軟手機操作系統的設計指南

確保使用的標準瓦片的模板

應用的Logo應該遵循模板的設計

在瓦片中不應重複使用Logo

如果應用的名字是圖片里的一部分,那麼瓦片上的名字信息應被移除避免出現兩次

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

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

避免使用相對時間戳或是日期(比如兩小時前),因為隨着時間推移會變得不太精確,請使用絕對時間(例如14:00)

次要瓦片

次要瓦片點擊不應鏈到相應的內容頁

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

兩個好的例子:新聞類應用會顯示常規更新,股票的應用會有實時的價格顯示。

避免顯示不具時效性的內容

寬瓦片

寬瓦片只能用作顯示經常更新的內容或是提醒(至少每周一次)

寬瓦片必須實時更新。

淺談微軟手機操作系統的設計指南

11. 瀏覽器控件

任何應用都不允許在任何頁面中使用內嵌瀏覽器,應將用戶直接帶到IE瀏覽器中。

會將用戶帶離應用的鏈接都應清楚地告訴用戶將會發生的事情

例外

當需要給用戶呈現認證頁面(例如Facebook或Twitter認證),如果沒有Xauth或是類似的API能夠滿足實現的需求,這個頁面可以允許以內嵌瀏覽器的形式出現在應用中。

12. 彈窗

請採用標準的Windows Phone的彈窗。彈窗中只有一個按鈕時左對齊,多個時居中對齊。

盡量避免使用自定義彈窗——如果一定要使用,請盡量模仿系統彈窗的行為。

淺談微軟手機操作系統的設計指南

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

13. 對比度

頁面中所有的控件在前景與背景間都應採用有效的對比度。

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

14. 文字

大小寫

除了二級標題用全大寫外,所以的標題都應該用小寫。如果品牌有特殊的需求,請保證在整個app中的大小寫規則是統一的。

自定義/品牌化字體

應用中可適度使用自定義或符合品牌化字體。自定義字體可用在頁面標題或是全景區域標題上,而其他的地方應該使用Segoe WP字體。

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

15. 圖片

應用中用於背景或是界面元素的圖片需與應用相符

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

對於大部分應用,我們建議只使用WXGA的圖片。WXGA相比之下質量最高,而且能夠自適應不同的分辨率。

淺談微軟手機操作系統的設計指南

16. 圖標

隱喻

不要混用圖標的隱喻。用戶的認知是特定的圖標代表特定含義,要麼因為他們在設備的其他地方見到用,或者這些圖標通常和某些功能掛鈎。例如:

淺談微軟手機操作系統的設計指南

如果你想表達的語義找不到相對應隱喻的圖標,就自己設計一個,切勿重用其他圖標。

視覺風格

圖標的設計應當遵循Windows Phone的視覺風格——簡單、單色、扁平。

17. 觸點

確保你的應用在觸控體驗上最優化

最小字體的大小為15pt

推薦的觸控大小為9mm

淺談微軟手機操作系統的設計指南

最小的觸控大小為7mm

淺談微軟手機操作系統的設計指南

元素中最小的距離為2mm

淺談微軟手機操作系統的設計指南

視覺元素的大小與觸控範圍的比例應控制在60%-100%

元素被觸控后應提供響應

淺談微軟手機操作系統的設計指南

18. 錯別字

應用中不應有任何拼寫錯誤

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

19. 主題

應用的設計應當考慮設備的主題和顏色變換,或是設定不受顏色改變的固定的主題

不管使用什麼主題,應用的所有元素都應清晰可見而且有一定程度的對比度。

20. 啟動頁

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

淺談微軟手機操作系統的設計指南

21. 手機的返回鍵

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

1. 關閉例如對話框,鍵盤或是選擇清單的臨時界面

2. 回退到上一步

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

22. 次級瓦片(深層規範)

次級瓦片的設計用於給用戶展示應用的特殊部分,通過它用戶可以快速簡單地對內容進行瀏覽,而次級瓦片通常並不是這些細節的交互入口。

系統的應用中有許多關於次級瓦片設計的優秀案例。 例如,音樂和視頻應用的專輯,在用戶點擊時就會播放。而次級瓦片的特殊用途在於點擊會將用戶定位到該專輯並且直接播放。

用戶同樣可以將聯繫人放置到開始頁面。通過點擊這些次級瓦片用戶可以進入到聯繫人的樞軸頁面,查看聯繫人信息,或是進行相關的操作。

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

放置到開始頁面

大頭針圖標應當出現在應用的菜單欄中,表示可以將這個物件或是選擇放置到開始頁面。不得將此圖標用作它意。

點擊並保持的動作也可以出發選項,將物件放置到開始頁面——這是Windows

Phone工具包中的一部分

將應用放置到開始頁面的行為應當由用戶自主控制,或是獲得用戶許可。在未向用戶獲取權限之前,請不要擅自將任何應用或是物體放置在開始頁面。

手機的返回鍵

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

23. 鎖屏頁面

背景圖片盡量不要有文字出現,避免與鎖屏消息在視覺上產生衝突。

背景圖片應儘可能簡單,複雜的圖片會影響鎖屏消息和提醒的可讀性。

標誌logo應儘可能小,防止對日期時間以及消息造成干擾。

如果圖片里出現文字,應當與圖片直接相關。

鎖屏頁面的視覺焦點應當是背景圖片,而非標誌或是文字。

淺談微軟手機操作系統的設計指南

淺談微軟手機操作系統的設計指南

24. 拍照設計

應用中應該顯示左箭頭圖標來表示有更多照片

保存和拍照的動效應該一致

需要支持點擊直接拍照以及相機上用於拍照的硬鍵

需要支持按下一半拍照鍵用於對焦

對焦框應與系統相機行為一致

用於拍照和用於確認的應用應該有統一的圖標(例如保存和刪除),同樣適用於動效

取消或保存應將用戶帶回取景器的頁面。圖標在Windows Phone SDK中皆可找到

多媒體鏈接

鏈接應當以定製的體驗啟動應用,而非簡單地將用戶帶到啟動默認頁

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

25. 頁面跳轉動效

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

淺談微軟手機操作系統的設計指南

十字翻轉——用於不同區域變換的動效

旋轉——用於展現臨時的界面

滑動——用於沒有前進導航的平級操作

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

進度條的使用

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

確定進度條通常用於顯示完成度的比例,例如已下載的大小。不確定進度條更為常用,特別是在不確定此進程的時長時,例如正在等待連接網頁服務的響應時。

26. 界面語言

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

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

請使用友好的、愉快的或是情感化的語言,杜絕出現機械的描述或是對用戶憤怒的指責。

結論

以上只是一些從各種案例分析中得出的常用設計建議,所以做你自己認為對的設計,同時以下有一些值得借鑒的成功經驗:

在任何移動平台上設計出良好體驗就是要為平台及其使用習慣定製應用

設計令人信服的Windows Phone界面的第一步就是要花些時間好好用一下系統發布的應用,這能幫助你熟悉Windows Phone平台的特性和設計語言

多從那些優秀的第三方應用中獲得靈感,我最喜歡的一個應用,Cocktail Flow對設計原則進行了創新,提供了令人印象深刻的體驗。

當你已經准好基礎準備開始進行應用的頁面視覺設計時,請參考一下本篇文章中的指南。這對你避免一些常見的錯誤設計非常有幫助,之前我在設計自己應用的時候也遇到了。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 淺談微軟手機操作系統的設計指南