手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

「手勢(shì)交互」的知識(shí)點(diǎn)

2019-11-28    資深UI設(shè)計(jì)者

業(yè)內(nèi)有很多人覺得手勢(shì)交互沒必要拿出來深究,覺得用戶使用產(chǎn)品的過程中,自然而然就會(huì)去使用拇指,進(jìn)行手勢(shì)操作。但這種說法,就跟「用戶心理模型」類似。當(dāng)然,對(duì)于用戶來說沒必要深究手勢(shì)交互,但作為設(shè)計(jì)師,如果不了解其背后的邏輯,那么就無法解決產(chǎn)品設(shè)計(jì)背后的一些問題。

所以我們今天,好好聊一聊手勢(shì)交互這件事。你會(huì)發(fā)現(xiàn),原來你以往觀察或以為的設(shè)計(jì)問題,都是手勢(shì)交互在作祟。

手勢(shì)的意義

我們以前經(jīng)常聽到「以用戶為中心做產(chǎn)品設(shè)計(jì)」這句話,意思是產(chǎn)品需依附于目標(biāo)用戶的真實(shí)場(chǎng)景來設(shè)計(jì)。與此同時(shí),其實(shí)還有一句話在提醒著交互設(shè)計(jì)師如何做產(chǎn)品設(shè)計(jì),就是「以觸摸屏為中心做產(chǎn)品設(shè)計(jì)」。

為什么呢?因?yàn)橛脩魪氖贾两K都是在跟觸摸屏做接觸,不管換了什么設(shè)備,他們都是要通過屏幕與產(chǎn)品進(jìn)行交互的。

我們可以在這里思考一下手勢(shì)的意義。

手勢(shì)的出現(xiàn)改變了什么?可以回想一下 iPhone 4 發(fā)布的時(shí)候,當(dāng)看到這樣一臺(tái)屏幕上沒有任何按鍵的設(shè)備,是不是會(huì)覺得不可思議?鍵盤,電話接聽按鍵等都消失不見了。

人們?cè)谑褂?iPhone 這樣的產(chǎn)品時(shí),不再需要去強(qiáng)行記憶任何固體按鍵。觸摸屏與手勢(shì)的結(jié)合,幫助我們隱藏不必要的元素,幫助用戶聚焦于內(nèi)容,在有限的物理空間獲得更多的信息。

所以用戶通過觸摸屏與產(chǎn)品進(jìn)行交互,跟通過鍵盤按鍵與屏幕進(jìn)行交互是完全不同的。手勢(shì)交互更自然且更。

手勢(shì)操作對(duì)我們來說如此自然和直觀的主要原因是因?yàn)樗鼈冾愃朴谂c真實(shí)對(duì)象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵,需要通過上下左右這樣的操作來定位指示器,而觸摸屏直接就可以通過手指點(diǎn)擊內(nèi)容進(jìn)行操作。這是完全不同的概念。

綜上所述,我們能知道,手勢(shì)的三個(gè)要素:簡(jiǎn)潔、易用、直觀。

所以我們通過一些常見的手勢(shì)行為,就可以在產(chǎn)品界面上很輕松的完成任務(wù)。

常見的手勢(shì)行為:

  • 點(diǎn)擊:?jiǎn)沃付虝河|摸表面;
  • 雙擊:?jiǎn)沃缚焖賰纱斡|摸表面(通常是縮放);
  • 拖動(dòng):沿表面移動(dòng)而不會(huì)破壞接觸;
  • 捏/展開:用兩根手指觸摸表面以移入(捏合)或移出(展開);
  • 按下:?jiǎn)沃赣|摸表面并按??;
  • 滑動(dòng):快速手勢(shì),不需要觸摸目標(biāo)。

當(dāng)然,我們經(jīng)常也會(huì)遇到一些背離手勢(shì)交互的產(chǎn)品設(shè)計(jì),雖然也是點(diǎn)擊、拖動(dòng)等等,但操作起來總是不那么順心。這里面有一個(gè)關(guān)鍵點(diǎn)就是,手勢(shì)直觀性。

有數(shù)據(jù)表明,蘋果的 3D Touch 使用率非常低,就是因?yàn)橹庇^性太差,用戶不知道通過這個(gè)操作能帶來什么結(jié)果,且使用它需要長(zhǎng)按,經(jīng)常會(huì)同時(shí)呼出「卸載」,那么效率也就會(huì)降低。久而久之,用戶就不去使用了。

正面例子如下圖,滑動(dòng)與文案結(jié)合。

這樣一看,用戶馬上就能知道這個(gè)操作行為如何觸發(fā),緊接著就產(chǎn)生行動(dòng),然后會(huì)反饋結(jié)果。

這也是手勢(shì)交互的核心:觸發(fā),行動(dòng),反饋。

對(duì)比 3D Touch,觸發(fā)沒有提示,行動(dòng)后時(shí)常有兩種反饋結(jié)果,相比起來就不那么友好了。

除了上面聊的這些,手勢(shì)交互還能從另一方面來提升效率,就是拇指操作區(qū)域。

拇指驅(qū)動(dòng)設(shè)計(jì)

我們都知道,現(xiàn)在手機(jī)屏幕越來越大,甚至比最早屏幕大了一倍以上。但是很多設(shè)計(jì)師并沒有轉(zhuǎn)換思維,跟進(jìn)這個(gè)趨勢(shì)的變化。

這里給大家普及一個(gè)知識(shí):大部分人誤以為,手指在屏幕上的熱區(qū)是永恒不變的,但其實(shí)手指熱區(qū)會(huì)根據(jù)設(shè)備的變大而縮小。因?yàn)槭终浦卧O(shè)備的重心靠后走了,所以拇指操控屏幕的范圍也就變小了。如下圖。

結(jié)果是,手機(jī)屏幕變大,雙手持機(jī)的用戶變多,但依然還有 75% 的用戶是使用拇指來觸摸屏幕的。因此,術(shù)語「拇指驅(qū)動(dòng)設(shè)計(jì)」應(yīng)運(yùn)而生。

我們上面說到,在使用一些產(chǎn)品的時(shí)候,經(jīng)常會(huì)遇到使用起來不順心的情況,然后說了「手勢(shì)直觀性」的概念。但這里,還有個(gè)更重要的原因,就是「拇指操作區(qū)域」。

拇指操作區(qū)域被分為三塊內(nèi)容,分別是:易于觸達(dá),難以觸達(dá),以及介于兩者之間的區(qū)域。

看下圖。

所以在設(shè)計(jì)界面時(shí),要注意界面的主要操作元素是否處于用戶易于觸達(dá)的范圍之內(nèi)。

如果你仔細(xì)觀察并思考過,也會(huì)發(fā)現(xiàn),iOS 的產(chǎn)品界面中,「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶返回或退出,而是讓用戶聚焦于當(dāng)前頁(yè)面,想要返回,那就需要付出一點(diǎn)成本,什么成本?操作成本。

有人會(huì)說,由于 iOS 可以從手機(jī)的左邊緣向右側(cè)輕掃以獲得返回效果,因此在大多數(shù) iOS 產(chǎn)品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用戶都知道這一點(diǎn),也不是所有產(chǎn)品都支持這一特性的。而且手勢(shì)交互的進(jìn)化本來也就是為了提升用戶操作的效率,所以本質(zhì)上他們并不矛盾,只是相比以前,我們現(xiàn)在的操作更快了。并且「右滑」返回,本身在手勢(shì)操作中相比「點(diǎn)擊」也是更具操作成本的。

當(dāng)了解了手勢(shì)的一些意義,以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計(jì)的重要性之后,我們就可以通過一些案例來做一個(gè)全局分析了。

1. 內(nèi)容在上,操作在下

許多人設(shè)計(jì) App,但是沒人研究過 App 為什么要這么設(shè)計(jì)。

比如,為什么起初要把標(biāo)簽欄放底下呢?關(guān)于這個(gè)問題,當(dāng)初我也是問了許多人,而基本都只是說這是官方設(shè)計(jì)規(guī)范。這相當(dāng)于是一句廢話。

通過翻閱多方資料,我發(fā)現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域有一條重要的基本設(shè)計(jì)原則:內(nèi)容在上,操作在下。

比如在使用電腦的時(shí)候,操作在下意味著使用者在操作過程中,手指始終處于界面下方,而內(nèi)容在上面,就不會(huì)出現(xiàn)手指遮擋內(nèi)容的情況。

如下圖的鍵盤操作提示:

基于此,相信你也知道為什么標(biāo)簽欄在下方了吧?

另外,為什么 iOS 設(shè)計(jì)規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢?

界面右/左上角的位置對(duì)拇指來說顯然是不友好的。然而,這樣做的原因也是顯而易見的:編輯功能會(huì)讓數(shù)據(jù)發(fā)生變化。將這類控件放在難以操作的位置上(與左上角的返回是一個(gè)道理),就是一種防御性的設(shè)計(jì)策略,可以在一定程度上避免因?yàn)樘菀桩a(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。

通過這一小段之前聊過的內(nèi)容,你們會(huì)發(fā)現(xiàn),手勢(shì)與拇指操作其實(shí)在驅(qū)動(dòng)著產(chǎn)品設(shè)計(jì)。下面我們來聊個(gè)大的案例。

漢堡包菜單的消失解析

漢堡包菜單,也就是側(cè)邊欄導(dǎo)航,F(xiàn)acebook 早期測(cè)試顯示側(cè)邊欄導(dǎo)航讓用戶使用率降低了一半。

我們一起來看看市面上給出的三類說法。

1. 可見性太低

默認(rèn)狀態(tài)下,用戶是看不見側(cè)邊欄的,除非點(diǎn)擊了側(cè)邊欄的彈出按鈕。所以這種情況下,里面的功能都是用戶腦袋里已知的,但很可能都想不起來。比如,現(xiàn)在你回想一下知乎底部 5 個(gè)標(biāo)簽分別是什么?或者微信右上角「+」里面有哪些功能?是不是要想一會(huì)兒,才能記起來?甚至還是想不起來。

之前我在文章里寫過,用戶對(duì)于功能的使用一定是「所見即所得」,而不是「心向往之」。用戶只會(huì)注意自己看到的信息,而不是憑借記憶或想象來使用產(chǎn)品。

底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見性」問題。

2. 效率較低

效率較低主要在于操作頻率,大家看下面兩組圖的對(duì)比。

第一張圖,當(dāng)用戶從首頁(yè)進(jìn)入到個(gè)人信息頁(yè)面,只需要兩步;而第二張圖,則要三步。

這里多一步看起來似乎影響不大,但如果現(xiàn)在要從個(gè)人信息頁(yè)面到「標(biāo)簽 3」的話,第一張圖也只需要兩步,第二張圖還是需要三步,當(dāng)頻繁去使用這樣的產(chǎn)品后,用戶的整體效率就會(huì)下降,體驗(yàn)也會(huì)隨之降低。

3. 與平臺(tái)模式?jīng)_突

大家應(yīng)該知道,在 iOS 的操作頁(yè)面中,通過手勢(shì)可對(duì) tab 進(jìn)行左右切換,而側(cè)邊欄除了通過點(diǎn)擊菜單按鈕展開之外,也可以通過右滑彈出。這里面有什么沖突呢?看下圖。

當(dāng)頁(yè)面聚焦在「標(biāo)簽 2」時(shí),右滑除了能回到「標(biāo)簽 1」,同樣也很可能會(huì)切出側(cè)邊導(dǎo)航欄。

這樣的手勢(shì)沖突,導(dǎo)致頁(yè)面層級(jí)與功能導(dǎo)航的優(yōu)先級(jí)混亂了。

無論是導(dǎo)航還是控件,當(dāng)它們組成一個(gè)頁(yè)面后,它們的操作就會(huì)有優(yōu)先級(jí)。比如下面這個(gè)例子。

如果你對(duì)標(biāo)紅的分段控件比較熟悉,就知道,它是可通過屏幕滑動(dòng)進(jìn)行切換的。但是在「短信」里,它是不能通過滑動(dòng)屏幕進(jìn)行切換的,因?yàn)橛脩艨蓪?duì)單條信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁(yè)面操作模式存在矛盾時(shí),我們會(huì)將子層級(jí)操作優(yōu)先于父層級(jí)操作。

譬如你進(jìn)入朋友圈,是不能馬上回到首頁(yè)的,這時(shí)候頁(yè)面層級(jí)較深,產(chǎn)品人員要將用戶聚焦于頁(yè)面本身,如果直接能返回到首頁(yè),頁(yè)面層級(jí)和產(chǎn)品架構(gòu)就會(huì)混亂。

類似的例子還有很多,我這里就不繼續(xù)列舉了。

所以從「短信」的例子可以看出,當(dāng)控件與控件之間的手勢(shì)發(fā)生沖突時(shí),我們要考慮優(yōu)先級(jí),將內(nèi)容優(yōu)先于頁(yè)面來處理。那么回到上面的例子,分段控件與漢堡包菜單的手勢(shì)發(fā)生沖突時(shí),很明顯我們要優(yōu)先分段控件的操作,而禁止掉漢堡包菜單的右滑手勢(shì)。結(jié)果就是,效率又低了。

4. 小結(jié)

這三類,如果你認(rèn)真思考里面的關(guān)系,其實(shí)就會(huì)發(fā)現(xiàn),它們的共通點(diǎn)就是與拇指的聯(lián)系過于被動(dòng)或直接被切斷了。

  • 第一個(gè)「可見性太低」的例子,菜單被隱藏,拇指不能直接與菜單產(chǎn)生關(guān)系,并且距離過遠(yuǎn),拇指難以觸達(dá)。
  • 第二個(gè)「效率太低」的例子,用戶需要通過拇指來回操作,導(dǎo)致效率降低,這就跟使用遙控器控制電視機(jī)一樣,用戶無法直接觸達(dá)內(nèi)容。
  • 第三個(gè)「手勢(shì)沖突」的例子,其實(shí)就很清晰了,就是說標(biāo)簽欄的優(yōu)先級(jí)可能會(huì)被頁(yè)面的其它控件所取代,那么拇指就無法直接對(duì)其產(chǎn)生作用,從而禁止當(dāng)前頁(yè)面的手勢(shì)交互行為。

它們的核心點(diǎn)就是拇指與觸摸屏的關(guān)系。

如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢(shì),那就想一下去看一下現(xiàn)在的產(chǎn)品,其中「我的」、「?jìng)€(gè)人中心」或「更多」其實(shí)都是變相的漢堡包菜單。

在「我」這個(gè)標(biāo)簽頁(yè)里,這一系列功能列表,無非就是另一種模式的漢堡包菜單,只是這里呈現(xiàn)的都是不重要的功能,并不影響用戶使用這個(gè)產(chǎn)品。回想一下,你是不是很少,甚至從來沒用過這里的某幾個(gè)功能?再跟手勢(shì)結(jié)合,就會(huì)發(fā)現(xiàn),「我」所處區(qū)域并不是容易點(diǎn)擊的區(qū)域,這就是它效率低下的原因了?,F(xiàn)在能懂了么?

彈框的操作路徑

當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢(shì)操作取代,大家就應(yīng)該察覺到:以往從電腦遷移到移動(dòng)設(shè)備上的交互行為已逐漸被改善。

我曾經(jīng)寫過一篇文章,叫「取消按鈕的設(shè)計(jì)邏輯」,講了「左取消,右行進(jìn)」這個(gè)原理。意思就是當(dāng)我們?cè)谠O(shè)計(jì)彈框的時(shí)候,用戶已經(jīng)習(xí)慣這樣的操作路徑,所以不要輕易更換位置以混淆用戶的認(rèn)知。再?gòu)氖謩?shì)的角度來說,就是右邊更容易點(diǎn)擊。

后來有同學(xué)說到,但是有些特殊場(chǎng)景,譬如刪除資料,而產(chǎn)品人員不希望用戶刪除,于是把刪除放在左邊,取消放在右邊。畢竟右邊更容易點(diǎn)擊,所以位置換了會(huì)比較合理。

這是錯(cuò)的!

我們不能通過改變用戶使用產(chǎn)品的常識(shí)來將產(chǎn)品人員的想法置于用戶之上。當(dāng)用戶已經(jīng)形成「左取消,右行進(jìn)」的認(rèn)知之后,違反這樣的一致性,去換位置是很危險(xiǎn)的。所以出現(xiàn)了 action sheet,來解決一些產(chǎn)品關(guān)于 alert 無法解決的問題。

如圖。

大家要記住的是,當(dāng)頁(yè)面邏輯與手勢(shì)操作產(chǎn)生邏輯沖突時(shí),我們不是去否定以前已經(jīng)被驗(yàn)證且正確的內(nèi)容,而是通過創(chuàng)新,來解決這個(gè)沖突。這就是拇指驅(qū)動(dòng)設(shè)計(jì)的一種方式。

包括我們以前在移動(dòng)設(shè)備上選擇刪除某項(xiàng)數(shù)據(jù),都會(huì)彈出警告框,詢問我們是否確認(rèn)刪除。這種方式會(huì)打斷我們的操作行為,久而久之,用戶已經(jīng)對(duì)此交互方式習(xí)以為常,或者說免疫了,但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除,已經(jīng)被更多產(chǎn)品功能用來取代沒必要彈框的操作。

也許很多人沒思考過底層原因,或者僅僅只是覺得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢(shì)交互做了相應(yīng)的優(yōu)化,讓用戶操作起來更加方便。

Banner

到了這里,我再舉個(gè)所有人都熟悉的例子,就是輪播圖了。

輪播圖最早出現(xiàn)于網(wǎng)頁(yè)端,后來被大量商家模仿,以至于到移動(dòng)端還備受各產(chǎn)品設(shè)計(jì)人員的歡迎。但其實(shí)很多人對(duì)輪播圖的使用方法都是錯(cuò)誤的。

下面來看輪播圖與手勢(shì)的關(guān)系。

試想:你的輪播圖有 6 張 Banner,你要翻到第 4 張,無論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶在界面停留的時(shí)間不會(huì)這么久,更不會(huì)看完你 Banner 的內(nèi)容。以至于有研究表明,大部分產(chǎn)品里,除了第一張 Banner 的點(diǎn)擊率能達(dá)到 83% 之外,其余的點(diǎn)擊率都非常低。

有人說可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉(zhuǎn),這么小的點(diǎn),你覺得點(diǎn)擊它現(xiàn)實(shí)么?所以手勢(shì)交互與輪播圖是相互矛盾的一種設(shè)計(jì)方式。

所以當(dāng)運(yùn)營(yíng)策劃了一個(gè)活動(dòng),而你就往頂部的輪播圖里塞,這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶參與度是很低的了。除了個(gè)別電商產(chǎn)品,他們以賣廣告位給商家作為盈利點(diǎn),但即便如此,我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外,其他圖片的點(diǎn)擊量相對(duì)于產(chǎn)品本身的用戶體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶進(jìn)入首頁(yè)隨機(jī)展示輪播圖頁(yè)面,而不是強(qiáng)制指定于顯示第一張的原因。

畢竟輪播圖在頂部,用戶需要通過拇指長(zhǎng)時(shí)間的在「延伸區(qū)域」進(jìn)行操作,那么使用率自然就降低了。

如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的,那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口,如下圖。(當(dāng)然,這要視情況而定,并不是通用的。)

搜索框的變化

我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。

為什么呢?

市面上對(duì)這個(gè)問題的解釋是這樣的:用戶已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個(gè)搜索框,設(shè)計(jì)師打破這個(gè)常規(guī)就要承擔(dān)風(fēng)險(xiǎn)。

看完這篇文章,你就已經(jīng)知道,對(duì)于用戶來說,由于屏幕頂部離拇指很遠(yuǎn),處于難以觸達(dá)的區(qū)域,在體驗(yàn)上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部,但操作體驗(yàn)上又不應(yīng)該在頂部的一個(gè)設(shè)計(jì)。

但是回想一下,會(huì)發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動(dòng)到下面來之后,就能知道,拇指驅(qū)動(dòng)設(shè)計(jì)的概念被越來越多的人認(rèn)識(shí)到其重要性。

地圖類產(chǎn)品把搜索框移到下面來的首創(chuàng)應(yīng)用不是高德,應(yīng)該是 Lyft。

瞧,拇指驅(qū)動(dòng)設(shè)計(jì),多酷~

總結(jié)

《上癮》里有句話:當(dāng)人們不由自由地做出下一個(gè)舉動(dòng)時(shí),新的習(xí)慣就會(huì)成為他們?nèi)粘I畹囊徊糠帧?

當(dāng)手勢(shì)充分地發(fā)揮了作用,輔助用戶操作或?qū)崿F(xiàn)功能,它就成了用戶不可分割的一部分。

今天通過對(duì)手勢(shì)意義的解讀,以及拇指驅(qū)動(dòng)設(shè)計(jì)的解析,再加上這些案例的拆解,我相信你能更好地理解為什么手勢(shì)交互這么重要了。

交互設(shè)計(jì)師對(duì)于「觸摸屏」,必須有深刻的認(rèn)識(shí),才能理解設(shè)計(jì)背后的邏輯。

如果這篇文章對(duì)你有幫助,記得點(diǎn)個(gè)贊,后面我好持續(xù)輸出。

文章來源:優(yōu)設(shè)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔