如何設(shè)計(jì)手勢(shì)驅(qū)動(dòng)的用戶界面

成都網(wǎng)站制作還記得那些用鼠標(biāo)懸停和點(diǎn)擊的時(shí)間是與站點(diǎn)或應(yīng)用程序交互的最常用的觸發(fā)器嗎？那些日子過(guò)去了。當(dāng)蘋(píng)果推出第一款iPhone時(shí)，多點(diǎn)觸控技術(shù)成為主流，用戶了解到，他們不僅可以在界面上點(diǎn)擊和點(diǎn)擊，還可以進(jìn)行壓縮、擴(kuò)展和刷卡。手勢(shì)成為新的點(diǎn)擊。

今天，移動(dòng)UI的成功可以通過(guò)它如何有效地使用手勢(shì)來(lái)實(shí)現(xiàn)。

如何選擇好的手勢(shì)

當(dāng)在你的UI中加入手勢(shì)時(shí)，了解你的市場(chǎng)和你的目標(biāo)用戶可能使用的其他應(yīng)用程序是很重要的。嘗試在應(yīng)用程序中使用相同類型的手勢(shì)。這樣，你不僅可以根據(jù)目標(biāo)市場(chǎng)的行為優(yōu)化用戶界面，而且從一開(kāi)始就為用戶設(shè)計(jì)了一種更舒適的方法。

教學(xué)的手勢(shì)

手勢(shì)在每個(gè)移動(dòng)應(yīng)用程序中都是必須的，但對(duì)于用戶來(lái)說(shuō)，這顯然是一個(gè)挑戰(zhàn)。觸摸界面提供許多機(jī)會(huì)使用自然的手勢(shì)，如點(diǎn)擊、刷卡和捏來(lái)完成事情，但不同于圖形用戶界面控件，基于手勢(shì)的交互常常隱藏在用戶中。因此，除非用戶事先知道手勢(shì)存在，否則他們不會(huì)嘗試。

因此，設(shè)計(jì)發(fā)現(xiàn)是至關(guān)重要的。你需要確保你提供正確的線索，視覺(jué)藝術(shù)的價(jià)值，幫助用戶發(fā)現(xiàn)很容易他們?cè)趺茨芘c界面相互作用。

避免在入職輔導(dǎo)和演練

教程和演練手勢(shì)驅(qū)動(dòng)程序相當(dāng)流行的做法。在許多應(yīng)用程序中包含教程，意味著向用戶顯示一些指令來(lái)解釋接口。然而，UI指南并不是解釋?xiě)?yīng)用程序核心功能的最優(yōu)雅的方法。前期教程的主要問(wèn)題是，用戶一旦進(jìn)入應(yīng)用程序，就必須記住使用這些應(yīng)用程序的所有新方法。過(guò)多的信息可能會(huì)導(dǎo)致更多的混亂。例如，明確的應(yīng)用程序從一個(gè)強(qiáng)制性的7頁(yè)的教程和用戶有耐心地閱讀所有的信息，試圖把它自己的記憶。這是一個(gè)糟糕的設(shè)計(jì)，因?yàn)樗笥脩粼趯?shí)際試用應(yīng)用程序之前就要進(jìn)行前期工作。

在行動(dòng)的背景下教育

當(dāng)教用戶使用UI時(shí)，我建議主要通過(guò)在動(dòng)作的上下文中進(jìn)行教育（當(dāng)用戶確實(shí)需要它的時(shí)候）。為了給人們一個(gè)新的姿態(tài)，你必須慢慢地開(kāi)始。給定一些迭代，指令可以轉(zhuǎn)換成一個(gè)更漸進(jìn)的發(fā)現(xiàn)。使用即時(shí)提示，專注于解釋單個(gè)交互，而不是試圖解釋用戶界面中的每一個(gè)可能的操作。通過(guò)提供明顯的上下文線索暗示手勢(shì)。

下面你可以看到一個(gè)手勢(shì)教育屏幕從YouTube應(yīng)用程序的Android。該應(yīng)用程序具有基于手勢(shì)的交互，但不使用教程來(lái)指導(dǎo)用戶。相反，它使用在第一次啟動(dòng)時(shí)出現(xiàn)的新用戶的提示，當(dāng)用戶到達(dá)應(yīng)用程序的相關(guān)部分時(shí)，每次都會(huì)出現(xiàn)一個(gè)。該技術(shù)基于文本命令，提示用戶執(zhí)行手勢(shì)，并用簡(jiǎn)短而清晰的描述描述交互的結(jié)果。

使用動(dòng)畫(huà)來(lái)傳達(dá)手勢(shì)

如果沒(méi)有動(dòng)畫(huà)，手勢(shì)就可以用得上。作為一名設(shè)計(jì)師，您可以利用動(dòng)畫(huà)來(lái)傳達(dá)關(guān)于可用操作的信息。例如，為了讓用戶意識(shí)到它們可以與某個(gè)元素交互，可以在交互元素上創(chuàng)建一個(gè)文本命令，并對(duì)交互結(jié)果進(jìn)行動(dòng)畫(huà)處理，如下面的示例所示。

根據(jù)動(dòng)畫(huà)的使用，有三種流行的技術(shù)來(lái)幫助教育用戶。第一個(gè)是提示動(dòng)作。提示動(dòng)作，或動(dòng)畫(huà)視覺(jué)提示，顯示了在執(zhí)行動(dòng)作時(shí)如何與元素交互的預(yù)覽。它的目的是在手勢(shì)和觸發(fā)動(dòng)作之間建立關(guān)聯(lián)。例如，布丁怪物的游戲機(jī)制完全是基于手勢(shì)，但他們?cè)试S用戶知道該怎么做，而不必猜測(cè)。動(dòng)畫(huà)傳達(dá)functionality-a情景信息展示與動(dòng)畫(huà)，它立即變得清晰，用戶要做什么。

第三個(gè)和最后的技術(shù)，我想提及的是啟示。你可以給你的UI高啟示點(diǎn)用戶功能界面中的一些元素，并利用反彈或脈沖作為一個(gè)可用的姿態(tài)指示器。這種技術(shù)的一個(gè)例子可以在蘋(píng)果iOS中找到。當(dāng)用戶輕敲相機(jī)圖標(biāo)時(shí)，鎖定屏幕會(huì)反彈，露出攝像機(jī)應(yīng)用程序。

結(jié)論

雖然觸摸手勢(shì)在我們身上幾乎看不見(jiàn)，但是有很多設(shè)計(jì)技巧可以讓用戶看到可能發(fā)生的事情。只是在時(shí)間的提示，動(dòng)畫(huà)的線索和內(nèi)容逗是一些隱藏的姿態(tài)可以的方式
拼音 雙語(yǔ)對(duì)照

分享名稱：如何設(shè)計(jì)手勢(shì)驅(qū)動(dòng)的用戶界面
網(wǎng)頁(yè)地址：http://jinyejixie.com/news/20403.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)