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

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

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

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

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

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

找到你要去的城市中的有趣的活動(dòng)。

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

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

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

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

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

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

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

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

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

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

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

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

技術(shù)：

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

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

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

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

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

邀請(qǐng)朋友加入行程。

加入朋友的行程。

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

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

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

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

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

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

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

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

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

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

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

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

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

顯示出行程詳情。

用戶通過(guò)UI上的點(diǎn)擊，開(kāi)始進(jìn)行分享畫(huà)面。

選擇朋友的電子郵箱。

通過(guò)點(diǎn)擊UI來(lái)完成分享操作。

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

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

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

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

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

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

放置在app bar上：盡可能將按鈕放在app bar上。app bar一般會(huì)隱藏起來(lái)直到用戶向上滑動(dòng)。

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

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

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

了解更多，查看 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)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。