在win8和IE10都還沒(méi)正式發(fā)布之前，很難感受到Metro風(fēng)格應(yīng)用對(duì)于‘桌面’客戶端的影響。相比手機(jī)上的‘無(wú)限’瀏覽，更具沉浸感和更少手動(dòng)操作的瀏覽體驗(yàn)對(duì)用戶而言是一種體驗(yàn)的進(jìn)步。在欣賞了許多優(yōu)秀的Metro風(fēng)格作品之后，作為設(shè)計(jì)師（網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)），我也無(wú)法抑制的想小試牛刀，過(guò)一把Metro風(fēng)的癮。

試驗(yàn)對(duì)象：剛接手的客戶網(wǎng)站項(xiàng)目，剛好需求是做英文網(wǎng)站，而且頁(yè)面主要以USB相關(guān)產(chǎn)品展示為主，內(nèi)容較為簡(jiǎn)單，經(jīng)過(guò)前期客戶溝通后，決定作為我的Metro風(fēng)處女秀!

首頁(yè)構(gòu)想：

根據(jù)Metro風(fēng)的版面設(shè)計(jì)規(guī)則，我對(duì)首頁(yè)設(shè)計(jì)進(jìn)行了如下規(guī)劃：



1. 導(dǎo)航

在網(wǎng)站上，頂部導(dǎo)航欄和頁(yè)腳的導(dǎo)航元素是重復(fù)的。在傳統(tǒng)的網(wǎng)站設(shè)計(jì)理念里導(dǎo)航元素是始終顯示并且始終位于視圖中。按道理，我們?cè)?Metro 風(fēng)格應(yīng)用中，應(yīng)當(dāng)設(shè)計(jì)成與內(nèi)容直接集成且用戶不需要時(shí)將其隱藏。但是考慮到客戶的接受程度，我們還是保留了傳統(tǒng)的設(shè)計(jì)形式，在突出Logo和對(duì)導(dǎo)航欄目以最簡(jiǎn)潔的形式呈現(xiàn)的同時(shí)，用深色背景降低導(dǎo)航的存在感，讓用戶的注意力更多的集中在主體內(nèi)容當(dāng)中。

2. Banner

Banner采用了傳統(tǒng)的左右切換模式，雖然沒(méi)有手勢(shì)滑動(dòng)的瀏覽體驗(yàn)，但至少做到了寬屏適應(yīng)性顯示，以增強(qiáng)用戶的沉浸感。

3. 產(chǎn)品展示

運(yùn)用Metro風(fēng)格的簡(jiǎn)潔圖標(biāo)，以及‘磁貼’，并設(shè)計(jì)在鼠標(biāo)經(jīng)過(guò)時(shí)的交互情形，讓產(chǎn)品看起來(lái)更酷。

4. 企業(yè)優(yōu)勢(shì)

按照 Metro 風(fēng)格應(yīng)用設(shè)計(jì)的“內(nèi)容先于版式”方法，應(yīng)將所有上下文操作放置在應(yīng)用欄中，將常用的控件放置在系統(tǒng)中。結(jié)合人視覺(jué)瀏覽的熱力圖，右側(cè)下方是關(guān)注度較少的區(qū)域，由于目前的客戶項(xiàng)目不存在‘應(yīng)用欄’的概念，我把介紹性的文本內(nèi)容都集中在這個(gè)區(qū)域展示。（上海計(jì)算機(jī)培訓(xùn)）

5. 博客鏈接

本來(lái)打算這一部分作為增加首頁(yè)的文本權(quán)重，有利于之后的SEO，不過(guò)考慮到這部分有違Metro風(fēng)的初衷，最后還是砍掉了。