讓手勢設(shè)計帶你的產(chǎn)品體驗“飛”…

1 評論 9672 瀏覽 31 收藏 6 分鐘

小Q在《細節(jié)體驗|你離用戶只差一個好的交互》一文中較為詳盡的歸納了反饋給用戶體驗帶來的好處,那么,今天我就繼續(xù)講講“動作”(即為手勢)是如何讓你的產(chǎn)品體驗可以“飛“起來的。

隨著信息技術(shù)的不斷成熟,互聯(lián)網(wǎng)行業(yè)的發(fā)展以及用戶體驗對用戶的影響力也在不斷增強。交互是因為有了“動作”和相應(yīng)的“反饋”才形成了一個回合的交互行為。

「收」「放」自如

好的開始是成功的一半,一些簡單而且常用的手勢,如果能用得恰如其分,手勢的設(shè)計是能讓界面看起來更炫,讓用戶覺得使用很暢通的。

智能手機受尺寸限制,對用戶而言首屏空間越發(fā)寶貴。如果不能在第一時間讓用戶得到有效信息,App的魅力將大打折扣。當用戶第一眼看到首屏放置的主要內(nèi)容后,通過上下滑動的方式尋找更多內(nèi)容信息時,合理的利用手勢滑動的魅力,把眾多功能歸置起來,不讓首屏展開的功能堆砌在用戶滑動頁面的過程中,給用戶提供更干凈的閱讀空間。

譬如下圖所示的案例,Airbnb在產(chǎn)品首屏展開最常用的租賃模塊,用戶一旦進入產(chǎn)品,就能非常方便的填寫并完成查詢功能,當用戶有意識的向上滑動屏幕的時候,展開的模塊會以關(guān)鍵詞提示的形式吸頂,底部的內(nèi)容會順著滑動操作無限延伸,既不完全隱藏常用功能,也不過度干擾用戶閱讀視覺區(qū)域。

收

同樣的設(shè)計理念,QQ瀏覽器也的首屏也是用的很好,它把首屏的默認展示區(qū)域留給了天氣信息及一些活動公告。一方面把用戶使用瀏覽器的習慣區(qū)域日?;層脩暨M入一個搜索引擎后不覺得過于枯燥,另外一方面從視覺設(shè)計看,通過首屏頂部的加寬,讓整個界面的視覺體驗更加一氣呵成。對于搜索框這個核心功能的入口,待用戶滑動界面尋找其他內(nèi)容的時候,就會很自然的吸頂,利用極小的區(qū)域突出搜索框的入口,并釋放更多的閱讀空間。

放

「變」「換」?自如

手勢操作是蘋果帶給世界的驚喜,手勢的設(shè)計能讓界面設(shè)計看起來更炫。優(yōu)秀的手勢操作是那些可以讓用戶明確知曉如何使用的手勢,手勢減少了用戶操作的繁瑣度,同時可以和不同規(guī)格的設(shè)備自由交互。App設(shè)計中,手勢和動畫一定是息息相關(guān)的。動畫是用戶在完成整個動作之前,與App交互最直接的信號。

產(chǎn)品心理學之情感設(shè)計中,提到這樣的觀點:我們需要用心關(guān)注行為設(shè)計,行為設(shè)計很大程度上決定了產(chǎn)品的用戶體驗。在行為設(shè)計中,利用手勢+動畫的設(shè)計就是比較炫酷的體驗設(shè)計。通??梢酝ㄟ^手勢的滑動操作,把不動的元素變得有生命;如最美應(yīng)用、twtter。在不同的內(nèi)容界面,利用上下滑動這個基本且常見的人機交互;把當前界面的內(nèi)容操作控件或者主體信息,通過吸頂變形的方式呈現(xiàn)。動畫過程自然且高效,動畫效果給用戶很強的記憶點,能夠?qū)Ξa(chǎn)品快速產(chǎn)生喜愛感。

內(nèi)容吸頂1

內(nèi)容吸頂

本文所指的直接操作內(nèi)容的自然人機交互方式,不僅符合用戶的感知習慣,也能很好地節(jié)約屏幕空間,創(chuàng)造沉浸式的閱讀體驗。一是滑動過程中頁面要跟隨手指,這樣能讓用戶形成對產(chǎn)品的控制感和更明確的層級感,二是滑動過程中,用戶的視覺可以看到的空間更整潔,體驗更純粹。

凡事張弛有度,交互中利用手勢操作是可以錦上添花,但過猶不及,如果喧賓奪主就要考慮取消。好設(shè)計是能把握到讓用戶最舒服的度!當你的設(shè)計與體驗融為一體的時候,才會給用戶帶來真正意義上的“飛一般的感覺”!

 

作者:Mandy權(quán),微信公眾號:Q產(chǎn)品,一名快樂的產(chǎn)品經(jīng)理!~

本文由 @Mandy權(quán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不知道有多少人喜歡用手勢。。。。

    來自廣東 回復(fù)