上周有幸玩了一會(huì)Metro的平板。單說視覺風(fēng)格，仍是我的大菜，但真正用起來卻不覺得舒暢，尤其是橫向?yàn)g覽內(nèi)容列表的時(shí)候，視線不停的在X軸與Y軸之間切換，很快感到頭暈?zāi)垦�，這一切似乎比瀑布流更加兇殘。

當(dāng)然，僅僅是個(gè)人感受；我不想這樣就得出Metro中看不中用的結(jié)論。做這篇譯文大致可以代表我的立場，即相比于iOS來說，Windows這套東西確實(shí)有很多獨(dú)到的精華在里面；我想通過這樣的文章加深認(rèn)識(shí)，了解一些表象背后的東西。也希望本文可以給那些已經(jīng)熟悉iOS，但對(duì)Metro及Windows平板仍屬于初識(shí)的朋友們一個(gè)小小的起點(diǎn)。接下來讓我們進(jìn)入正文，一篇與來自微軟官方的案例文章。

iOS是個(gè)不錯(cuò)的平臺(tái)，人們?cè)谄渲袆?chuàng)造了各類觸控優(yōu)先、有趣且吸引人的應(yīng)用。不過，隨著Windows 8的登場，設(shè)計(jì)師和開發(fā)者們又多了一個(gè)釋放創(chuàng)意能量的新舞臺(tái)。

在本篇案例當(dāng)中，我們將幫助各位使用Metro風(fēng)格的設(shè)計(jì)原則對(duì)原有的iOS應(yīng)用設(shè)計(jì)方案進(jìn)行重新構(gòu)思，大家會(huì)了解到怎樣將iPad當(dāng)中一些常見的界面元素及體驗(yàn)?zāi)Ｊ睫D(zhuǎn)換成為Metro風(fēng)格，以打造全新的Windows 8應(yīng)用。我們將對(duì)同一款應(yīng)用在兩個(gè)平臺(tái)中的不同設(shè)計(jì)方式進(jìn)行對(duì)比，幫助各位了解怎樣將你的應(yīng)用與Windows 8以及Metro設(shè)計(jì)原則進(jìn)行完美的融合。

我們將要研究的是一款相片日志應(yīng)用，用戶可以在線查看和管理他們的照片或視頻。下圖是這款應(yīng)用的Metro版本：

這款應(yīng)用最初是為iPad設(shè)計(jì)的，如下圖所示。

從設(shè)計(jì)及體驗(yàn)?zāi)Ｊ降慕嵌瘸霭l(fā)，該應(yīng)用可以大致被解構(gòu)為六個(gè)方面：

1. 布局和導(dǎo)航
2. 命令與行為
3. 契約(Contract)：搜索、分享及其他
4. 觸控與手勢
5. 屏幕定向與視圖模式
6. 消息通知

接下來我們將依次對(duì)這六個(gè)方面的要素進(jìn)行分析與對(duì)比。

布局與導(dǎo)航

聚焦于內(nèi)容

這款相片日志應(yīng)用要有能力對(duì)兩方面的內(nèi)容進(jìn)行良好的呈現(xiàn)，即展示用戶的相片以及與這些相片相關(guān)的最新社交動(dòng)態(tài)。在創(chuàng)建Metro風(fēng)格應(yīng)用時(shí)，我們的第一個(gè)目標(biāo)就是將原有iPad應(yīng)用當(dāng)中的那些與核心功能和內(nèi)容沒有直接關(guān)聯(lián)的界面元素統(tǒng)統(tǒng)移除，例如頂部的導(dǎo)航欄、底部的頁面指示符、標(biāo)簽欄等。不用擔(dān)心導(dǎo)航的問題，我們?cè)诤笪闹袝?huì)談到如何讓用戶在需要的時(shí)候調(diào)出app bar。

iPad版本：

• A.導(dǎo)航欄
• B.內(nèi)容
• C.頁面指示符
• D.標(biāo)簽欄

Metro版本：

• B.內(nèi)容與Logo

標(biāo)簽： 交互設(shè)計(jì) 交互模式 Metro 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。