雖然 Windows 8 剛上市只有半個(gè)月多一點(diǎn)，但 Windows 8 之父，同時(shí)也是 Windows 和 Windows Live 部門(mén)的總裁、微軟下一代 CEO 熱門(mén)人選的史蒂芬・辛諾夫斯基卻已經(jīng)離開(kāi)了微軟， Windows 8 的設(shè)計(jì)語(yǔ)言名稱也從最初的 Metro 先是變?yōu)?Modern 接著變?yōu)?Windows 8 Style，最后變?yōu)槟壳拔④浿袊?guó)官方所稱的 Microsoft Design（本文依舊延用舊名稱 Metro 表示 Microsoft Design Language/Style），但 Windows 8 依舊在按照之前微軟的規(guī)劃一步步往前走著，Windows 應(yīng)用商店的數(shù)量從最初的幾百個(gè)應(yīng)用迅速增長(zhǎng)到了目前的接近 1.5 萬(wàn)，雖然到今天增長(zhǎng)已經(jīng)趨緩但依然強(qiáng)勁，預(yù)計(jì)十一月底能達(dá)到 2 萬(wàn)個(gè)。
雖然數(shù)量一直在持續(xù)增長(zhǎng)著，但優(yōu)秀出眾的應(yīng)用到現(xiàn)在依舊是屈指可數(shù)，隨便問(wèn)一個(gè) Windows 8 用戶幾乎回答不出有哪幾個(gè)做得特別好。當(dāng)然這也與 Windows 8 本身設(shè)計(jì)語(yǔ)言的特色有關(guān)，看起來(lái)的簡(jiǎn)約實(shí)際是需要設(shè)計(jì)師去用心精雕細(xì)琢的，不然做出來(lái)永遠(yuǎn)是簡(jiǎn)陋，還是之前 Windows 8 傳統(tǒng)桌面的 Metro 化中所認(rèn)為的那樣“Metro 風(fēng)格不是讓程序員都跑來(lái)頂替設(shè)計(jì)師的”，相反它更加考驗(yàn)設(shè)計(jì)師。
雖然是被稱為“Windows 8 應(yīng)用”，但它與 iOS 應(yīng)用、Andriod 應(yīng)用以及相近的 Windows Phone 應(yīng)用還是有著很大的不同，在界面設(shè)計(jì)上它更加偏向于網(wǎng)頁(yè)、平媒等所在的平面設(shè)計(jì)領(lǐng)域，在交互設(shè)計(jì)上也是更加偏向比較大的屏幕操作交互。在設(shè)計(jì)過(guò)程中需要認(rèn)清這一點(diǎn)。
如何設(shè)計(jì)一個(gè)好的 Windows 8 應(yīng)用？
我們都知道一個(gè)應(yīng)用只有適配該應(yīng)用所在平臺(tái)本身的風(fēng)格才能被稱為好的應(yīng)用，因?yàn)橹挥羞@樣用戶在使用的時(shí)候才能保持好的用戶體驗(yàn)。那么面對(duì)一個(gè)全新的開(kāi)始界面，全新的用戶體驗(yàn)界面與全新的應(yīng)用布局，應(yīng)該如何才能設(shè)計(jì)出一個(gè)好的 Windows 8 應(yīng)用呢？
1. 好的動(dòng)態(tài)開(kāi)始畫(huà)面
開(kāi)始畫(huà)面是用戶認(rèn)識(shí)一個(gè)應(yīng)用的開(kāi)始，如果有一個(gè)好的開(kāi)始畫(huà)面可以給用戶留下一個(gè)很好的印象，同時(shí)也是一個(gè)好的 Windows 8 應(yīng)用必須有的。
開(kāi)始畫(huà)面細(xì)分可以分為啟動(dòng)畫(huà)面和登陸、加載畫(huà)面。對(duì)于啟動(dòng)畫(huà)面，微軟官方的規(guī)定比較死，所以你看到幾乎都是清一色的單色前景 LOGO，這樣的話除非你的 LOGO 很吸引人否則只能說(shuō)是中規(guī)中矩，畢竟你不能靠一個(gè)旋轉(zhuǎn)菊花讓用戶對(duì)你印象深刻吧。所以最好可以將限定的啟動(dòng)畫(huà)面時(shí)間縮短，多在后面的登陸界面與加載界面下功夫，在這方面 QQ, Cookbook, 網(wǎng)易云閱讀等做的比較好。
其中 QQ for Windows 8 的登陸界面與其最新的 2013 桌面版類似，背景是干凈的天空，有一朵云動(dòng)態(tài)的飄來(lái)飄去。而 Cookbook 和網(wǎng)易云閱讀是動(dòng)態(tài)加載跳轉(zhuǎn)，三者其實(shí)都是是以動(dòng)態(tài)效果見(jiàn)長(zhǎng)，而動(dòng)畫(huà)效果在 Windows 8 中最為常見(jiàn)，它是營(yíng)造 Metro 動(dòng)感的主要手段。因此如果要設(shè)計(jì)一個(gè)好的 Windows 8 應(yīng)用，打造一個(gè)讓人感覺(jué)流暢、大氣舒緩的動(dòng)態(tài)啟動(dòng)畫(huà)面是可以加分的。
2. 好的背景/圖片/圖像
在一個(gè)應(yīng)用中背景圖片可能就是伴隨用戶使用該應(yīng)用的整個(gè)過(guò)程（貼靠除外），它的重要性要超過(guò)開(kāi)始畫(huà)面。在平面設(shè)計(jì)中，和諧、有效的圖底關(guān)系可以讓整個(gè)構(gòu)圖活躍起來(lái)，從而增強(qiáng)視覺(jué)沖擊力和感染力。在設(shè)計(jì) Windows 8 應(yīng)用中亦是如此，選擇一個(gè)合適的整體背景圖像不僅可以吸引用戶的注意，促使他們留下來(lái)去探究其他部分，還可以為頁(yè)面布局服務(wù)。而選擇一個(gè)不搭調(diào)的背景圖像的話，不僅使界面變得刺眼，對(duì)用戶獲取信息造成干擾，還有可能使用戶煩躁。如下面這個(gè)美國(guó)白宮應(yīng)用。
只有一個(gè)星的評(píng)分是有原因的
再來(lái)看一個(gè)比較好的背景 Love Windows
另外在背景圖像的選擇上可以去參考一下平面設(shè)計(jì)，如用漸變背景增加應(yīng)用清爽感；用插畫(huà)、涂鴉等增加現(xiàn)代感和活潑度；用圓形多的圖像來(lái)增強(qiáng)波普風(fēng)，使其風(fēng)格更加切近 Windows 8 的整體風(fēng)格。對(duì)于大多數(shù)背景為灰色的應(yīng)用來(lái)說(shuō)，背景中加入一些不規(guī)則的圖案可以一定程度上消除略顯土氣的負(fù)面效果。
3. 好的設(shè)計(jì)界面
界面包括主界面（中心頁(yè)）、內(nèi)容界面（部分頁(yè)）與詳細(xì)信息頁(yè)等各級(jí)頁(yè)面。那么什么是好的設(shè)計(jì)界面呢？
1. 嚴(yán)謹(jǐn)?shù)呐虐娌季?/h4>
在平面設(shè)計(jì)中，有一個(gè)隱形的構(gòu)圖指導(dǎo)，它就是網(wǎng)格系統(tǒng)。網(wǎng)格可以幫助用戶從視覺(jué)上來(lái)組塊信息集，而設(shè)計(jì)師則使用網(wǎng)格來(lái)組織信息的內(nèi)容，以保證其清晰度。在一定程度上可以說(shuō)網(wǎng)格布局影響著一個(gè)作品的最終外觀、心理感受和可用性。
而在 Windows 8 中，Metro 應(yīng)用的一大特點(diǎn)就是內(nèi)容形式化，因此對(duì)于占據(jù)著 Windows 應(yīng)用商店絕對(duì)主流地位的是各種信息內(nèi)容類的應(yīng)用來(lái)說(shuō)，如果一個(gè)應(yīng)用有著嚴(yán)謹(jǐn)?shù)木W(wǎng)格布局，那么就可以說(shuō)這個(gè)應(yīng)用不會(huì)太差，即使它是由一個(gè)個(gè)方塊堆砌起來(lái)的。因?yàn)樵?Windows 8 應(yīng)用設(shè)計(jì)中網(wǎng)格依舊會(huì)是結(jié)構(gòu)的基礎(chǔ)，它引導(dǎo)著元素的布局，將文本、圖形和圖表組織成設(shè)計(jì)的骨架。它可以保證一個(gè)應(yīng)用內(nèi)的信息有著基本的清晰度，不會(huì)凌亂 。
比較奇怪的排版：舊版與新版的千千靜聽(tīng)
官方中規(guī)中矩的排版：說(shuō)不上有多好，但怎么說(shuō)也不算差
最初級(jí)的網(wǎng)格布局就是像微軟官方建議的那樣，整整齊齊的正方形塊或矩形框等。再高級(jí)點(diǎn)，可以利用網(wǎng)格創(chuàng)造熱點(diǎn)區(qū)域，利用比例差異來(lái)增添動(dòng)感，建立層級(jí)關(guān)系等，見(jiàn)下一條。
2. 優(yōu)秀的排版布局
就像上一條所說(shuō)的，由于從 Windows Phone 到 Windows 8 微軟的“示范作用”，造成了很多中規(guī)中矩的“方塊應(yīng)用”，甚至快成了一種模版。到現(xiàn)在相信很多人對(duì) Metro 主界面的印象還是一個(gè)個(gè)方塊或矩形框堆砌吧。
在 Metro 規(guī)范下的設(shè)計(jì)在很多人看起來(lái)像是戴著鏈拷跳舞，因此很多設(shè)計(jì)被 Metro 的方塊給框住了。Windows 8 系統(tǒng)也越來(lái)越像一個(gè)“豆腐塊”系統(tǒng)，雷同的應(yīng)用內(nèi)方塊堆砌也經(jīng)常讓人聯(lián)想起報(bào)紙上的招聘版面。
這樣，要想設(shè)計(jì)一個(gè)優(yōu)秀的排版布局，就需要從網(wǎng)格設(shè)計(jì)上下功夫了，在這方面做得比較好的還是在上面提到的背景做得比較好的 Love Windows。為了對(duì)比效果，我們來(lái)看看同樣是在微軟 Windows 應(yīng)用商店里的推薦熱門(mén)應(yīng)用中，也是同等類別的應(yīng)用 Win8 使用寶典來(lái)看一下。
可以看到，采用對(duì)角/成角網(wǎng)格的 Love Windows 完勝 Win8 使用寶典，這種成 45 度的成角網(wǎng)格不僅具有基本的穩(wěn)定感和一體感，還可以引導(dǎo)用戶視線向右移動(dòng)�？梢哉f(shuō)是即體現(xiàn) Metro 的特點(diǎn)又能突破 Metro 方塊的最好實(shí)例。
3. 優(yōu)秀的版面設(shè)計(jì)
與整體的排版布局不同，版面設(shè)計(jì)是對(duì)圖像和文字等設(shè)計(jì)元素在空間中的安排，可以看作是內(nèi)容在局部排版上的細(xì)化。好的版面設(shè)計(jì)應(yīng)該是可以利用顏色、間隔、定位及其他設(shè)計(jì)手段營(yíng)造出視覺(jué)焦點(diǎn)吸引讀者的注意力，并保持下去。在整體上應(yīng)當(dāng)是視覺(jué)焦點(diǎn)盡量的少，能夠讓用戶關(guān)注應(yīng)該關(guān)注的地方，并保持新鮮感。
雖然是取巧于官方 Mail 但 Nextgen Reader 仍不失去一款版面設(shè)計(jì)優(yōu)秀的應(yīng)用
如采用方塊堆砌的話，可以說(shuō)整個(gè)屏幕沒(méi)有視覺(jué)焦點(diǎn)，也可以說(shuō)滿屏幕上每個(gè)方塊都是視覺(jué)焦點(diǎn)，再叫上方塊本身充斥感更強(qiáng)，留白少以及中文字體默認(rèn)的微軟雅黑等各種原因造成整個(gè)界面讓人感覺(jué)有壓迫感并無(wú)從下手，信息間沒(méi)有層次感和關(guān)聯(lián)感。所以在版面設(shè)計(jì)上應(yīng)當(dāng)注意在合理留白、合適選擇字體和合理配色這三個(gè)地方來(lái)改進(jìn)。
合理留白
眾所周知的，對(duì)于所有平面設(shè)計(jì)來(lái)說(shuō)版面設(shè)計(jì)的基本原則是應(yīng)留出足夠的空間和空白，以使閱讀和理解更加容易。因此通過(guò)有意的留白來(lái)增加呼吸感是讓信息保持易讀是基本原則，如何創(chuàng)造留白空間也可以看出設(shè)計(jì)師的實(shí)力。
如文字不能距離太近，倘若標(biāo)題或文字確實(shí)需要橫跨整個(gè)幅面的話，要給欄空兩邊的文字留下空間，或者選用更大的字符間距。（另外對(duì)于標(biāo)題能精簡(jiǎn)的盡量精簡(jiǎn)）此外還要合理處理列寬、字符間距，行間距，欄寬，斷字（連字符號(hào)連接），標(biāo)點(diǎn)，對(duì)齊方式等。（以列寬為例：如果列寬過(guò)窄，內(nèi)容就會(huì)變得斷斷續(xù)續(xù)，用戶瀏覽過(guò)程中無(wú)法大量獲取完整信息。而列寬過(guò)寬的時(shí)候，眼睛就難以重新定位新一行文字的起點(diǎn)。這兩種情況都回導(dǎo)致視覺(jué)疲勞并影響閱讀體驗(yàn)。）
合適字體
上面提到了在 Windows 8 中系統(tǒng)默認(rèn)選擇的是微軟雅黑字體，它在字體設(shè)計(jì)上屬于無(wú)襯線字體和黑體，因此兼顧了對(duì)于 Windows 8 應(yīng)用來(lái)說(shuō)不適合長(zhǎng)時(shí)間閱讀和字體飽滿兩大缺點(diǎn)。前者會(huì)造成用戶容易視覺(jué)疲勞，而后者則增加了內(nèi)容間的空隙，加劇了空間上的充斥感，增加界面呼吸難度。因此在微軟雅黑之外重新選擇一款更細(xì)、空曠度更好的字體是一個(gè)比較好的選擇。
合理配色
在設(shè)計(jì)的時(shí)候除了需要注意留白和字體外還有注意合理配色，如通過(guò)輕快明亮的簡(jiǎn)單搭配色來(lái)減少單色調(diào)帶來(lái)的壓抑感和審美疲勞和視覺(jué)疲勞。另外要避免會(huì)引起視覺(jué)顫動(dòng)和顏色扭曲的對(duì)比顏色配對(duì)，如將互補(bǔ)顏色或者有相近明暗度的顏色搭配在一起的時(shí)候。
另外對(duì)于金融、財(cái)經(jīng)、理財(cái)、天氣等以展示數(shù)據(jù)信息為主的應(yīng)用來(lái)說(shuō)要多利用信息化設(shè)計(jì)，如餅圖、柱狀圖、極限圖、線圖、散點(diǎn)圖、時(shí)間序列圖等各種信息圖表來(lái)將復(fù)雜的數(shù)據(jù)轉(zhuǎn)換成二維視覺(jué)呈現(xiàn)，使人們能夠有效的在最短的時(shí)間內(nèi)清晰的了解信息甚至其背后的趨勢(shì)等。
以上都是界面設(shè)計(jì)上，在交互設(shè)計(jì)上也需要注意以下幾點(diǎn)：
1. 對(duì)用戶的交互指引
之前在 Windows 8 專題里我們?cè)榻B過(guò)新的 Windows 8 UI 向電腦引入一些新概念，如 Charm 菜單里集成的搜索、設(shè)置以及右鍵選項(xiàng)等很多交互操作是需要用戶重新學(xué)習(xí)一下的。但是，大多數(shù)用戶不知道這一點(diǎn)！相信能夠完整看完 Windows 8 專題或能夠從其他地方稍微完整得學(xué)習(xí)了 Windows 使用的人不會(huì)太多。因此從交互上能夠?qū)τ脩粲幸粋�(gè)簡(jiǎn)單指引在初期的也是可以加分的。
初始使用簡(jiǎn)易教程
初版微博與人人網(wǎng)對(duì)用戶的簡(jiǎn)易指導(dǎo)教程
界面上引導(dǎo)用戶交互
凡客與人人網(wǎng)應(yīng)用的頂欄
如果嚴(yán)格按照微軟官方交互規(guī)范的話，Windows 應(yīng)用內(nèi)主界面上是不應(yīng)該有任何命令按鈕或者導(dǎo)航按鈕的（應(yīng)放置在上方的導(dǎo)航欄以及下方的應(yīng)用程序欄中），因?yàn)閷?duì)于 Windows 8，應(yīng)用內(nèi)的搜索、設(shè)置以及分享是可以直接在 Charm 菜單就可以完成的。但在現(xiàn)在一些引導(dǎo)用戶右鍵的下拉菜單按鍵是可以有的，如人人網(wǎng)，可以一定程度上防止最初級(jí)用戶完全不知所措。而凡客雖然有但放在了最中間，一定程度上影響用戶關(guān)閉操作。
2. 頁(yè)面交互設(shè)計(jì)
1. 頁(yè)面層級(jí)設(shè)定要少
在導(dǎo)航偏弱的 Windows 8 上，信息層次偏向于扁平化，頁(yè)面交互設(shè)計(jì)上應(yīng)該減少頁(yè)面層級(jí)，盡量多在一個(gè)頁(yè)面層級(jí)展示信息，減少用戶做選擇、做決定的時(shí)間。在之前我們?cè)榻B過(guò)的 Hick's Law / 席克定律中也有提到，“比起 2 個(gè)菜單，每個(gè)菜單有 5 項(xiàng)，用戶會(huì)更快得從有 10 項(xiàng)的 1 個(gè)菜單中做出選擇。”
2. 注意橫向滾動(dòng)
如果你設(shè)計(jì)的應(yīng)用最大的應(yīng)用場(chǎng)景是 Surface 等平板用戶的話，這一點(diǎn)是至關(guān)重要。適用于 Win8 的 Surface 平板等觸控設(shè)備與將縱向滾動(dòng)發(fā)揮到極致的 iOS 設(shè)備相比，在交互其最大的特色就是橫向滾動(dòng)。但在當(dāng)下，應(yīng)用中橫向滾動(dòng)與豎向滾動(dòng)同時(shí)存在在一個(gè)頁(yè)面的應(yīng)用還有很多，這種即橫滑又豎滑的交互模式會(huì)造成用戶很大的不便。以下是官方給出的標(biāo)準(zhǔn)。
- 在任意頁(yè)面只能沿一個(gè)方向滑動(dòng)：
- Hub 視圖應(yīng)當(dāng)沿水平方向滑動(dòng)，不允許水平豎直同時(shí)滑動(dòng)
- 貼靠視圖必需沿豎直方向滑動(dòng)
“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”，因此在設(shè)計(jì)使用于 Surface 平板的 Windows 8 應(yīng)用的時(shí)候一定要注意通過(guò)背景的設(shè)計(jì)（暗示）引導(dǎo)用戶左右滑動(dòng)，而不是下意識(shí)的上下滑動(dòng)，避免出錯(cuò)。如像 Love Windows 那樣，通過(guò)成角排放內(nèi)容及一些斜線等排版引導(dǎo)讀者調(diào)整他們慣性的 F 形閱讀方式。
3. 頁(yè)面切換效果
與最上面的動(dòng)態(tài)開(kāi)始畫(huà)面類似，如果能將頁(yè)面切換效果做好也是一個(gè)可以加分的項(xiàng)。
最后，本文主要是關(guān)于橫向全屏視圖下的設(shè)計(jì)，對(duì)于豎屏以及輔屏視圖與填充視圖（貼靠模式）、語(yǔ)義縮放頁(yè)面等的設(shè)計(jì)也是需要注意的。“好的設(shè)計(jì)不會(huì)完全準(zhǔn)從設(shè)計(jì)準(zhǔn)則”，要想設(shè)計(jì)出一個(gè)好的 Windows 8 應(yīng)用設(shè)計(jì)師們需要能夠在充分理解 Metro 特點(diǎn)的同時(shí)跳出官方規(guī)范的框框。在這方面不妨回歸 Metro 的設(shè)計(jì)本源 - 平面設(shè)計(jì)領(lǐng)域去尋找設(shè)計(jì)靈感。