首頁?>?知識?資訊?>?如何設(shè)計手勢驅(qū)動的UI?>?正文

如何設(shè)計手勢驅(qū)動的UI

2017/5/24 0:00:00 · 稿源:傳誠信

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

今天,移動UI的成功可以通過使用手勢的有效性來做出。

?

如何選擇好的手勢

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

?

教學手勢

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

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

?

避免在登機時的教程和演練

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

1-2.png

?

在行動背景下進行教育

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

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

1.jpg

?

使用動畫來溝通手勢

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

3-1.gif

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


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

5.gif

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

11.jpg

?

結(jié)論

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


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

010-62199213

24小時咨詢熱線

139-1050-5354