當(dāng)計(jì)劃一個Metro應(yīng)用的時候，盡可能的去思考你的應(yīng)用給你的用戶帶來什么樣的體驗(yàn)，而不是考慮這個應(yīng)用會有什么樣的功能。如果你還沒準(zhǔn)備了，你可以先閱讀What are Metro style apps？

1. 定義你的用戶體驗(yàn)?zāi)繕?biāo)

假設(shè)你正在創(chuàng)建一個照片相關(guān)應(yīng)用。你會思考你的用戶使用該應(yīng)用的原因，如保存和分享，以及你會設(shè)想你的用戶希望通過照片來回憶及與朋友交流，以及保證照片的安全性。這些正是你的應(yīng)用的獨(dú)到之處，你將這些想法作為你的用戶體驗(yàn)的核心目標(biāo)貫穿在整個設(shè)計(jì)過程中。

常用的技巧包括：腦力風(fēng)暴、關(guān)系流程圖及腦圖。

你的應(yīng)用到底是做什么的？從一個最廣泛的問題開始，列出所有你設(shè)想的你希望用戶使用你應(yīng)用的原因。例如，你想創(chuàng)建一個幫助人們設(shè)計(jì)旅程行程的應(yīng)用，當(dāng)你設(shè)想這樣一個應(yīng)用的時候，你也許會產(chǎn)生下面這些想法：

應(yīng)用將幫助你獲得將所有你的航班到達(dá)的城市的地圖來幫助你旅行。

找到你要去的城市中的有趣的活動。

幫助你創(chuàng)建一個可分享的參加活動的列表，或是一定要參觀的景點(diǎn)列表。

幫助你整理照片并與朋友和家庭分享。

根據(jù)航班價(jià)格獲得推薦的目的地列表。

找到你的目的地的餐館、商店和活動以及折扣信息。

你的應(yīng)用程序好在哪里？再回去看看你的想法，看看這 些場景真的能讓你的應(yīng)用程序出色嗎？挑戰(zhàn)一下自己嘗試去除一些場景，專注在唯一的一個真正重要的場景上。在整個過程中你可能會獲得無數(shù)個想法，但一定要學(xué)會對這些想法說“NO”，才能幫助你獲得最好的想法。

你會專注在單一的使用場景，來向人們介紹你的應(yīng)用到底是什么樣的，例如：

我的旅行應(yīng)用最棒的賣點(diǎn)是能讓我的朋友與我一起協(xié)同創(chuàng)建團(tuán)隊(duì)出游計(jì)劃。

我的健身應(yīng)用最棒之處是能讓我和朋友們記錄我們的健身進(jìn)度，目標(biāo)以及分享。

我的購物應(yīng)用最棒之處幫助我的家庭組織超市購物活動，不會讓大家重復(fù)購買或漏掉重要的物品。

這便是所謂的“最棒”之處，來幫助你對你整個應(yīng)用程序的設(shè)計(jì)和開發(fā)做出有用的決策。專注在用戶的使用場景，小心別陷入了過份多的功能的設(shè)計(jì)。應(yīng)當(dāng)永遠(yuǎn)去考慮，你的用戶在做什么，而不是你的應(yīng)用在做什么。

2. 決定應(yīng)用與用戶的交互方式與流程

流程指的是你的用戶在使用你的應(yīng)用達(dá)成目標(biāo)的一組交互場景。每一個流程應(yīng)當(dāng)充分展現(xiàn)所謂的“最棒”之處。最好的應(yīng)用程序應(yīng)當(dāng)是讓用戶簡單學(xué)習(xí)并以最少的步驟完成目標(biāo)。

技術(shù)：

關(guān)鍵流程圖：從哪里進(jìn)入，哪里退出？

故事板流程圖：用戶在你的UI上如何操作及完成交互的？

原型：使用快速原型進(jìn)行試用測試。

用戶能做什么？例如，你的旅行應(yīng)用是關(guān)于“幫助我和我和朋友協(xié)同創(chuàng)建團(tuán)隊(duì)出游計(jì)劃”。讓我們列出會有什么樣的情況發(fā)生：

創(chuàng)建行程的基本信息。

邀請朋友加入行程。

加入朋友的行程。

查看其它人推薦的行程安排。

將目的地及相關(guān)活動加入到行程中。

編輯和評估別人創(chuàng)建的目的地及活動。

分享行程給朋友，讓他們follow。

3. 決定如何設(shè)計(jì)應(yīng)用的界面

這是有關(guān)于如何把應(yīng)用最基礎(chǔ)的事情做好�，F(xiàn)在你已經(jīng)知道你應(yīng)用的最棒之處，以及你將提供什么樣的流程，接下來可以開始思考一些基礎(chǔ)。

應(yīng)當(dāng)如何組織你的UI內(nèi)容？大部分應(yīng)用內(nèi)容可以以成組或是上下層級的方式來組織內(nèi)容。你所決定的應(yīng)用程序第一層應(yīng)當(dāng)完全與你所思考的應(yīng)用程序最棒之處相吻合。最棒的內(nèi)容最先讓用戶看到。

使用旅行應(yīng)用舉例，有多種方式來組織行程單。如果應(yīng)用的專注點(diǎn)是有關(guān)發(fā)現(xiàn)有趣的目的地，那么你也許會按興趣點(diǎn)來組織你的內(nèi)容。如冒險(xiǎn)、陽光行程或浪漫旅行。但，因?yàn)閼?yīng)用程序是針對于與好友一起制定行程，所以更好的思路也許是根據(jù)你的社交圈來組織，如家庭、同學(xué)或同事。

當(dāng)選擇了使用何種方式來組織內(nèi)容的時候，也就是選擇了有多少個頁面或是視圖來展現(xiàn)你的應(yīng)用。在Microsoft Visual Studio 11 Express中提供的一些項(xiàng)目模板能幫助你使用一些通用的UI設(shè)計(jì)模式來設(shè)計(jì)你的應(yīng)用。

你需要什么樣的UI外觀和操作？評估你之前的流程，針對每個流程畫出用戶在每個步驟中能進(jìn)行的操作。

例如這個有關(guān)“分享行程給朋友，讓他們follow”的流程。我們假設(shè)用戶已經(jīng)創(chuàng)建了行程。那么分享就需要以下的一些步驟：

用戶打開應(yīng)用程序，查看到他創(chuàng)建的所有行程列表。

用戶點(diǎn)擊其中一個想分享的行程。

顯示出行程詳情。

用戶通過UI上的點(diǎn)擊，開始進(jìn)行分享畫面。

選擇朋友的電子郵箱。

通過點(diǎn)擊UI來完成分享操作。

應(yīng)用在行程的細(xì)節(jié)中展現(xiàn)了她剛分享給了哪些朋友。

通過這樣的過程，你已經(jīng)看到了你的UI將會如何呈現(xiàn)（就像給朋友寫一個如何使用你應(yīng)用的教程一樣）。你同樣可以繼續(xù)減少一些步驟。也許用戶在分享前根本不必看到行程詳細(xì)。越簡單越方便使用。

查看 Choosing the right UI surfaces 去了解如何使用不同的UI樣式。

如何組織操作？描述出每個流程中的步驟來找到你需要設(shè)計(jì)哪些必要的操作。然后思考這些操作命令如何體驗(yàn)在你的應(yīng)用程序中。

永遠(yuǎn)嘗試先使用內(nèi)容。只要可能，讓用戶直接與內(nèi)容進(jìn)行操作，而不是添加各種新的按鈕。例如在旅行應(yīng)用中，讓用戶直接在行程列表中拖動單個行程來移動位置，而不是選擇某個行程，再使用上下按鈕進(jìn)行操作。

如何不能使用內(nèi)容，再嘗試放置按鈕：

放置在app bar上：盡可能將按鈕放在app bar上。app bar一般會隱藏起來直到用戶向上滑動。

放在應(yīng)用的畫面上：如何用戶的操作集中在UI上的單個操作上，可以將這些操作以按鈕或其它方式呈現(xiàn)在畫面上，當(dāng)然，越少越好。

關(guān)聯(lián)菜單上：可以使用關(guān)聯(lián)菜單操作剪貼板（Cut， Copy， Paste），或一些不能直接被選擇的操作（如在地圖上放置記號）。

設(shè)計(jì)每個視圖的界面。Windows Developer Preview支持橫向、縱向、Snapped及fill view。用戶應(yīng)當(dāng)能在任何時候使用這些視圖，而你也會希望你的應(yīng)用在任何一個視圖下都能表現(xiàn)良好。這意味著你需要針對每個視圖都精心設(shè)計(jì)UI元素及實(shí)現(xiàn)。當(dāng)你做到這些后，你的應(yīng)用程序在視圖間的切換會非常平滑。

了解更多，查看 Supporting views， Choosing a layout， and Guidelines for snapped and fill views.

標(biāo)簽： Metro UX設(shè)計(jì) 人機(jī)交互 

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