如何表達App中的手勢操作

1 評論 8695 瀏覽 24 收藏 6 分鐘

在移動應用和網頁中沒有萬能的方法展示手勢。不過在教育用戶操作界面時,我推薦使用內容暗示、漸進式提示和微動畫。教程和引導頁是萬不得已才會使用的方式。

手勢,是那些能夠與應用程序進行交互的手指動作。觸摸屏提供了很多自然手勢比如:點擊、滑動、縮放等活動。但是不同于用戶圖形界面控件,這些交互行為很難被用戶發(fā)現(xiàn),除非他們提前知曉手勢的存在,否則他們不會嘗試。

如何引導用戶發(fā)現(xiàn)隱藏的手勢操作呢?還好有一些視覺方面的交互設計技巧可以讓用戶知曉。

一. 首次打開時的教程和引導頁

在手勢類的應用里,教程和引導頁是常用的辦法。多數(shù)情況下在App中加入教程意味著向用戶提供界面的說明。但是,UI教程不是一個解釋核心功能的最高明的方式。這個方式存在兩個問題:

如果你必須出一個使用指南才能讓用戶明白,說明你的界面沒有很好的傳遞信息,因為用戶不應該被要求在使用App前還得先讀一下操作指南才行。

教程導致的另一個問題是:一旦用戶進入應用,他們不得不記住所有新的使用方式。

比如,Clear 這款App開始使用時會有長達7頁的教程,用戶不得不耐心讀完所有信息并試圖記住他們。這是個很糟糕的設計,因為用戶需要在使用它之前就付出大量精力。

Clear 的教程

為了避免強制性的多步引導頁并試圖在操作需要的壞境下教導用戶(這時用戶需要切實使用),借助逐步的引導,用戶教程可以變成更為漸進的操作探索:

“專注于單個交互操作而不是試圖解釋用戶界面的每個可能產生的操作”

以Android版的youtube的手勢教育為例:

Android版 youtube App

這個應用有一套基于手勢的交互操作,但并未使用教程來指導用戶。相反,他為新用戶首次打開的啟動頁提供了提示,每次只提示一處,且只在用戶觸達到相關功能時出現(xiàn)。

二. 如何在情境中教育用戶

在情境中教育用戶的技巧可以幫助用戶先前從未嘗試過的方式操作一個元素或界面。這種技巧通常包括細微的視覺提示和微動效。

1. 純文本命令

這個技巧主要基于文本指令,可以促使用戶使用手勢,并且用簡明的描述介紹操作產生的結果。

注意:使用簡短的文字描述說明-文本越短,用戶越可能使用它并遵從說明。

2. 提示動效

提示動效(或動畫提示)展示了某個操作的效果預覽。例如,Pudding Monster只使用了基于手勢的技巧,就能使用戶不必過多猜測就掌握了游戲的基本玩法。動畫傳達了功能的信息——用動畫來展示一個場景,用戶立刻知道該怎么做。

3. 內容暗示

內容暗示是一種微妙的視覺提示,指明了操作的可能。下面的例子闡釋了卡片的內容暗示。它簡明地展示了隱藏在當前卡片之后的其它卡片,很明顯卡片可以滑動。

結論

總而言之,在移動應用和網頁中沒有萬能的方法展示手勢。不過在教育用戶操作界面時,我推薦使用內容暗示、漸進式提示和微動畫。教程和引導頁是萬不得已才會使用的方式。

 

英文原文:How To Communicate Hidden Gestures in Mobile App

原文地址:http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/

譯者:Meng,微信公眾號:「微信ID:DR_DDC」

本文由 @Meng 翻譯發(fā)布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!