雖然是被稱為“Windows 8 應用”，但它與 iOS 應用、Andriod 應用以及相近的 Windows Phone 應用還是有著很大的不同，在界面設計上它更加偏向于網頁、平媒等所在的平面設計領域，在交互設計上也是更加偏向比較大的屏幕操作交互。在設計過程中需要認清這一點。#p#

1. 嚴謹的排版布局

在平面設計中，有一個隱形的構圖指導，它就是網格系統。網格可以幫助用戶從視覺上來組塊信息集，而設計師則使用網格來組織信息的內容，以保證其清晰度。在一定程度上可以說網格布局影響著一個作品的最終外觀、心理感受和可用性。

而在 Windows 8 中，Metro 應用的一大特點就是內容形式化，因此對于占據著 Windows 應用商店絕對主流地位的是各種信息內容類的應用來說，如果一個應用有著嚴謹的網格布局，那么就可以說這個應用不會太差，即使它是由一個個方塊堆砌起來的。因為在 Windows 8 應用設計中網格依舊會是結構的基礎，它引導著元素的布局，將文本、圖形和圖表組織成設計的骨架。它可以保證一個應用內的信息有著基本的清晰度，不會凌亂 。

比較奇怪的排版：舊版與新版的千千靜聽

官方中規中矩的排版：說不上有多好，但怎么說也不算差

最初級的網格布局就是像微軟官方建議的那樣，整整齊齊的正方形塊或矩形框等。再高級點，可以利用網格創造熱點區域，利用比例差異來增添動感，建立層級關系等，見下一條。

2. 優秀的排版布局

就像上一條所說的，由于從 Windows Phone 到 Windows 8 微軟的“示范作用”，造成了很多中規中矩的“方塊應用”，甚至快成了一種模版。到現在相信很多人對 Metro 主界面的印象還是一個個方塊或矩形框堆砌吧。

在 Metro 規范下的設計在很多人看起來像是戴著鏈拷跳舞，因此很多設計被 Metro 的方塊給框住了。Windows 8 系統也越來越像一個“豆腐塊”系統，雷同的應用內方塊堆砌也經常讓人聯想起報紙上的招聘版面。

這樣，要想設計一個優秀的排版布局，就需要從網格設計上下功夫了，在這方面做得比較好的還是在上面提到的背景做得比較好的 Love Windows。為了對比效果，我們來看看同樣是在微軟 Windows 應用商店里的推薦熱門應用中，也是同等類別的應用 Win8 使用寶典來看一下。

可以看到，采用對角/成角網格的 Love Windows 完勝 Win8 使用寶典，這種成 45 度的成角網格不僅具有基本的穩定感和一體感，還可以引導用戶視線向右移動。可以說是即體現 Metro 的特點又能突破 Metro 方塊的最好實例。

3. 優秀的版面設計

與整體的排版布局不同，版面設計是對圖像和文字等設計元素在空間中的安排，可以看作是內容在局部排版上的細化。好的版面設計應該是可以利用顏色、間隔、定位及其他設計手段營造出視覺焦點吸引讀者的注意力，并保持下去。在整體上應當是視覺焦點盡量的少，能夠讓用戶關注應該關注的地方，并保持新鮮感。

雖然是取巧于官方 Mail 但 Nextgen Reader 仍不失去一款版面設計優秀的應用

如采用方塊堆砌的話，可以說整個屏幕沒有視覺焦點，也可以說滿屏幕上每個方塊都是視覺焦點，再叫上方塊本身充斥感更強，留白少以及中文字體默認的微軟雅黑等各種原因造成整個界面讓人感覺有壓迫感并無從下手，信息間沒有層次感和關聯感。所以在版面設計上應當注意在合理留白、合適選擇字體和合理配色這三個地方來改進。

合理留白

眾所周知的，對于所有平面設計來說版面設計的基本原則是應留出足夠的空間和空白，以使閱讀和理解更加容易。因此通過有意的留白來增加呼吸感是讓信息保持易讀是基本原則，如何創造留白空間也可以看出設計師的實力。

如文字不能距離太近，倘若標題或文字確實需要橫跨整個幅面的話，要給欄空兩邊的文字留下空間，或者選用更大的字符間距。（另外對于標題能精簡的盡量精簡）此外還要合理處理列寬、字符間距，行間距，欄寬，斷字（連字符號連接），標點，對齊方式等。（以列寬為例：如果列寬過窄，內容就會變得斷斷續續，用戶瀏覽過程中無法大量獲取完整信息。而列寬過寬的時候，眼睛就難以重新定位新一行文字的起點。這兩種情況都回導致視覺疲勞并影響閱讀體驗。）

合適字體

上面提到了在 Windows 8 中系統默認選擇的是微軟雅黑字體，它在字體設計上屬于無襯線字體和黑體，因此兼顧了對于 Windows 8 應用來說不適合長時間閱讀和字體飽滿兩大缺點。前者會造成用戶容易視覺疲勞，而后者則增加了內容間的空隙，加劇了空間上的充斥感，增加界面呼吸難度。因此在微軟雅黑之外重新選擇一款更細、空曠度更好的字體是一個比較好的選擇。

合理配色

在設計的時候除了需要注意留白和字體外還有注意合理配色，如通過輕快明亮的簡單搭配色來減少單色調帶來的壓抑感和審美疲勞和視覺疲勞。另外要避免會引起視覺顫動和顏色扭曲的對比顏色配對，如將互補顏色或者有相近明暗度的顏色搭配在一起的時候。

初始使用簡易教程

初版微博與人人網對用戶的簡易指導教程

界面上引導用戶交互

凡客與人人網應用的頂欄

如果嚴格按照微軟官方交互規范的話，Windows 應用內主界面上是不應該有任何命令按鈕或者導航按鈕的（應放置在上方的導航欄以及下方的應用程序欄中），因為對于 Windows 8，應用內的搜索、設置以及分享是可以直接在 Charm 菜單就可以完成的。但在現在一些引導用戶右鍵的下拉菜單按鍵是可以有的，如人人網，可以一定程度上防止最初級用戶完全不知所措。而凡客雖然有但放在了最中間，一定程度上影響用戶關閉操作。

1. 頁面層級設定要少

在導航偏弱的 Windows 8 上，信息層次偏向于扁平化，頁面交互設計上應該減少頁面層級，盡量多在一個頁面層級展示信息，減少用戶做選擇、做決定的時間。在之前我們曾介紹過的 Hick's Law / 席克定律中也有提到，“比起 2 個菜單，每個菜單有 5 項，用戶會更快得從有 10 項的 1 個菜單中做出選擇。”

2. 注意橫向滾動

如果你設計的應用最大的應用場景是 Surface 等平板用戶的話，這一點是至關重要。適用于 Win8 的 Surface 平板等觸控設備與將縱向滾動發揮到極致的 iOS 設備相比，在交互其最大的特色就是橫向滾動。但在當下，應用中橫向滾動與豎向滾動同時存在在一個頁面的應用還有很多，這種即橫滑又豎滑的交互模式會造成用戶很大的不便。以下是官方給出的標準。

• 在任意頁面只能沿一個方向滑動：
• Hub 視圖應當沿水平方向滑動，不允許水平豎直同時滑動
• 貼靠視圖必需沿豎直方向滑動

“除非有更好的選擇，否則就遵從標準”，因此在設計使用于 Surface 平板的 Windows 8 應用的時候一定要注意通過背景的設計（暗示）引導用戶左右滑動，而不是下意識的上下滑動，避免出錯。如像 Love Windows 那樣，通過成角排放內容及一些斜線等排版引導讀者調整他們慣性的 F 形閱讀方式。

3. 頁面切換效果

與最上面的動態開始畫面類似，如果能將頁面切換效果做好也是一個可以加分的項。