首頁(yè)?>?知識(shí)?資訊?>?如何設(shè)計(jì)手勢(shì)驅(qū)動(dòng)的UI?>?正文

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

2017/5/24 0:00:00 · 稿源:傳誠(chéng)信

請(qǐng)記住,制作手機(jī)網(wǎng)站或者APP時(shí),使用鼠標(biāo)懸停和點(diǎn)擊的時(shí)間是用于與網(wǎng)站或應(yīng)用程序進(jìn)行交互的最常用的觸發(fā)器?當(dāng)蘋(píng)果推出第一款iPhone時(shí),多點(diǎn)觸控技術(shù)成為主流,用戶(hù)了解到,他們不僅可以點(diǎn)擊并點(diǎn)擊界面,還可以捏住,傳播和滑動(dòng)。手勢(shì)成為新的點(diǎn)擊。

今天,移動(dòng)UI的成功可以通過(guò)使用手勢(shì)的有效性來(lái)做出。

?

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

當(dāng)您在UI中嵌入手勢(shì)時(shí),了解您的市場(chǎng)和您的目標(biāo)受眾可能使用的其他應(yīng)用程序至關(guān)重要。嘗試在您的應(yīng)用程序中使用相同類(lèi)型的手勢(shì)。這樣,您不僅可以根據(jù)目標(biāo)市場(chǎng)的行為來(lái)優(yōu)化用戶(hù)界面,還可以從一開(kāi)始就為用戶(hù)設(shè)計(jì)一個(gè)更舒適的方法。

?

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

手勢(shì)是每個(gè)移動(dòng)應(yīng)用程序的必備條件,但使用戶(hù)顯而易見(jiàn)的是一個(gè)挑戰(zhàn)。觸摸界面提供了許多機(jī)會(huì),使用自動(dòng)手勢(shì),如點(diǎn)按,滑動(dòng)和捏合來(lái)完成任務(wù),但與圖形用戶(hù)界面控件不同,基于手勢(shì)的交互往往被用戶(hù)隱藏。所以除非用戶(hù)先前知道手勢(shì)存在,否則不會(huì)嘗試。

因此,發(fā)現(xiàn)設(shè)計(jì)至關(guān)重要。您需要確保您提供正確的線(xiàn)索 - 視覺(jué)符號(hào),幫助用戶(hù)輕松發(fā)現(xiàn)他們?nèi)绾闻c界面交互。

?

避免在登機(jī)時(shí)的教程和演練

教程和演練是手勢(shì)驅(qū)動(dòng)的應(yīng)用程序相當(dāng)受歡迎的練習(xí)。在許多情況下,將教程合并到應(yīng)用程序中意味著向用戶(hù)顯示一些說(shuō)明來(lái)說(shuō)明該界面。但是,UI教程不是解釋?xiě)?yīng)用程序核心功能的最優(yōu)雅的方式。前期教程的主要問(wèn)題是用戶(hù)必須記住使用該應(yīng)用程序的所有新方法。太多的信息可能會(huì)導(dǎo)致更多的混亂。例如,清除應(yīng)用程序從強(qiáng)制性的7頁(yè)教程開(kāi)始,用戶(hù)必須耐心閱讀所有信息,并嘗試將其提交到其內(nèi)存。這是糟糕的設(shè)計(jì),因?yàn)樗笥脩?hù)即使在實(shí)際嘗試應(yīng)用程序之前進(jìn)行工作。

1-2.png

?

在行動(dòng)背景下進(jìn)行教育

在教導(dǎo)用戶(hù)使用您的UI時(shí),我建議主要通過(guò)在操作的上下文中進(jìn)行教育(用戶(hù)實(shí)際需要時(shí))。為了教人們一個(gè)新的手勢(shì),你必須慢慢開(kāi)始。給定一些迭代,指令可以轉(zhuǎn)化為更漸進(jìn)的發(fā)現(xiàn)。使用時(shí)間提示,并專(zhuān)注于解釋單個(gè)交互,而不是嘗試解釋用戶(hù)界面中的每個(gè)可能的操作。通過(guò)提供明顯的語(yǔ)境線(xiàn)索來(lái)提示手勢(shì)。

您可以在下方看到Android應(yīng)用程式的「姿態(tài)教育」畫(huà)面。該應(yīng)用程序具有基于手勢(shì)的交互,但不使用教程來(lái)指導(dǎo)用戶(hù)。相反,它會(huì)使用在新用戶(hù)的第一次啟動(dòng)中出現(xiàn)的提示,當(dāng)用戶(hù)到達(dá)應(yīng)用的相關(guān)部分時(shí),一次一個(gè)。該技術(shù)基于文本命令,其提示用戶(hù)執(zhí)行手勢(shì),并用簡(jiǎn)短明確的描述描述交互結(jié)果。

1.jpg

?

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

手勢(shì)可以使用,就像沒(méi)有動(dòng)畫(huà)一樣。作為設(shè)計(jì)師,您可以使用動(dòng)畫(huà)來(lái)傳達(dá)有關(guān)可用操作的信息。例如,為了使用戶(hù)意識(shí)到他們可以與特定元素進(jìn)行交互,您可以在交互式元素上創(chuàng)建一個(gè)文本命令,并對(duì)交互結(jié)果進(jìn)行動(dòng)畫(huà)化,如下面的示例所示。

3-1.gif

基于動(dòng)畫(huà)的使用,有三種流行的技術(shù)來(lái)幫助教育用戶(hù)。第一個(gè)是一個(gè)提示動(dòng)議。提示動(dòng)作或動(dòng)畫(huà)視覺(jué)提示顯示了在執(zhí)行動(dòng)作時(shí)如何與元素進(jìn)行交互的預(yù)覽。它旨在創(chuàng)建手勢(shì)與其觸發(fā)的動(dòng)作之間的關(guān)聯(lián)。例如,布丁怪物的游戲機(jī)制完全基于手勢(shì),但是它們?cè)试S用戶(hù)獲得基本的想法,而不用猜測(cè)。動(dòng)畫(huà)傳達(dá)關(guān)于功能的信息 - 一個(gè)場(chǎng)景用動(dòng)畫(huà)展示,用戶(hù)立即清楚該做什么。


第二種技巧是內(nèi)容挑逗。內(nèi)容挑逗是微妙的視覺(jué)線(xiàn)索,表明什么是可能的。下面的例子演示了卡的內(nèi)容挑逗 - 它簡(jiǎn)單地表明,當(dāng)前卡片后面存在其他卡片,這使得清除滑動(dòng)是可能的。

5.gif

我想提到的第三種和最后一種技術(shù)是可以承受的。您可以給UI的一些元素提供高可用性,將用戶(hù)指向界面中的功能,并使用彈跳或脈沖作為可用手勢(shì)的指示。這種技術(shù)的一個(gè)例子可以在Apple iOS中找到。當(dāng)用戶(hù)點(diǎn)擊相機(jī)圖標(biāo)時(shí),鎖定屏幕會(huì)彈出,顯示下方的相機(jī)應(yīng)用程序。

11.jpg

?

結(jié)論

雖然觸摸手勢(shì)對(duì)我們來(lái)說(shuō)絕對(duì)是真實(shí)的,但是有一些設(shè)計(jì)技術(shù)可以讓用戶(hù)窺探可能的。只是時(shí)間提示,動(dòng)畫(huà)提示和內(nèi)容調(diào)戲是隱藏的手勢(shì)可以揭示的一些方式。


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門(mén)
  • 最新
客戶(hù)服務(wù)
咨詢(xún)熱線(xiàn)

010-62199213

24小時(shí)咨詢(xún)熱線(xiàn)

139-1050-5354