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

1. 定義你的用戶體驗目標

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

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

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

應用將幫助你獲得將所有你的航班到達的城市的地圖來幫助你旅行。

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

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

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

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

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

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

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

我的旅行應用最棒的賣點是能讓我的朋友與我一起協(xié)同創(chuàng)建團隊出游計劃。

我的健身應用最棒之處是能讓我和朋友們記錄我們的健身進度，目標以及分享。

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

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

2. 決定應用與用戶的交互方式與流程

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

技術(shù)：

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

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

原型：使用快速原型進行試用測試。

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

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

邀請朋友加入行程。

加入朋友的行程。

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

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

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

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

3. 決定如何設(shè)計應用的界面

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

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

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

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

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

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

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

用戶點擊其中一個想分享的行程。

顯示出行程詳情。

用戶通過UI上的點擊，開始進行分享畫面。

選擇朋友的電子郵箱。

通過點擊UI來完成分享操作。

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

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

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

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

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

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

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

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

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

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

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

標簽： Metro UX設(shè)計 人機交互 

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