10大原則!教你做好數(shù)字產(chǎn)品的自然界面設(shè)計(jì)(NUI)!

0 評(píng)論 3408 瀏覽 17 收藏 12 分鐘

技術(shù)的發(fā)展讓人們逐漸接觸到了更多樣的設(shè)備,與此同時(shí),人們的使用習(xí)慣、交互習(xí)慣也在這過程中逐漸改變。那么作為設(shè)計(jì)人員,你要如何設(shè)計(jì)出符合用戶體驗(yàn)的數(shù)字產(chǎn)品界面?本篇文章里,作者總結(jié)了11個(gè)自然交互界面的設(shè)計(jì)原則,一起來看。

跟隨時(shí)代的變遷,市場(chǎng)上的智能設(shè)備種類一直在逐漸增加。同樣,適用于人們?nèi)粘I畹脑O(shè)備也變得豐富起來。跟隨這一趨勢(shì),在科技產(chǎn)業(yè)領(lǐng)域從業(yè)的設(shè)計(jì)師將扮演越來越重要的角色。當(dāng)人們的日常生活中開始使用越來越多的設(shè)備,人們平均在每個(gè)設(shè)備上花費(fèi)的時(shí)間也越來越有限。

Exploding Topics 公司 2022 年的數(shù)據(jù)顯示,人們每天在手機(jī)上花費(fèi)的時(shí)間大概為 3 小時(shí) 15 分鐘。假設(shè)人們總體設(shè)備的使用時(shí)長(zhǎng)不變,但手機(jī)的使用時(shí)間是減少的。因?yàn)槿藗兛赡軙?huì)花費(fèi)其他時(shí)間在智能手表,智能電視,平板電腦以及其他位置設(shè)備( 例如集成顯示屏 )上。

我在 Quora 上挖掘到一位低調(diào)的作者,Dan Saffer,交互設(shè)計(jì)師兼作家,撰寫了《 11個(gè)自然交互界面(NUI)的設(shè)計(jì)準(zhǔn)則 》。在瀏覽這篇文章的過程中,我意識(shí)到這就是貫穿設(shè)計(jì)的黃金法則——即便如今手持或者手腕友好的設(shè)備的外形一直在改變。讓我們來重溫下這些法則并一探究竟。

一、為手指設(shè)計(jì),而不是光標(biāo)

手指觸碰目標(biāo)理應(yīng)比桌面圖標(biāo)設(shè)計(jì)的更大,8-10 毫米適合鼠標(biāo),10-14 毫米大小適合手指。

即便是設(shè)計(jì)網(wǎng)頁時(shí),作為設(shè)計(jì)師我們應(yīng)該考慮到這些網(wǎng)頁在觸摸屏設(shè)備上打開時(shí)是如何進(jìn)行交互的。許多網(wǎng)頁界面癱瘓都是由手機(jī)端引起的。這是因?yàn)槲覀兘?jīng)常隨身攜帶手機(jī)設(shè)備,相比其他設(shè)備而言,手機(jī)能為我們提供一個(gè)非常舒適便利的使用體驗(yàn)。因此,在設(shè)計(jì)任何界面的時(shí)候,還要考慮觸控區(qū)域,例如鏈接,不同類型的按鈕,以及滑動(dòng)區(qū)域。

像臺(tái)式機(jī)等桌面設(shè)備,使用鼠標(biāo)或觸控板來選中 / 點(diǎn)擊對(duì)象;在筆記本電腦這類設(shè)備上的光標(biāo),是為了精確而設(shè)計(jì),因此僅適合高密度設(shè)備。而手指則適用于那些低精度輸入端,例如手機(jī),智能手表和平板這種有觸摸屏的設(shè)備。

二、生理與人體運(yùn)動(dòng)學(xué)

不要讓用戶進(jìn)行過于夸張或者重復(fù)的任務(wù)。

不要讓用戶一遍遍做一樣的任務(wù)。一個(gè)重復(fù)多次完成的任務(wù)是無聊單調(diào)的。作為設(shè)計(jì)師,需要通過關(guān)注數(shù)據(jù)及用戶觀點(diǎn)來試探是否可以自動(dòng)化完成任務(wù),而不是使用規(guī)則包含的基礎(chǔ)自動(dòng)化。不需要所有東西都看起來完美,只是要注意那些需要手動(dòng)重復(fù)的工作,用戶會(huì)在你的產(chǎn)品上滯留更長(zhǎng)的時(shí)間。

三、拒絕大猩猩手臂

盡管主流報(bào)告并沒有提及此觀點(diǎn),但人類的手臂并不適合放在身前長(zhǎng)時(shí)間作業(yè)。

想象一下,在微軟平板上呈現(xiàn)你的界面設(shè)計(jì),聽起來很激動(dòng)是吧?盡管大尺寸屏幕為設(shè)計(jì)提供了更多空間,但是用戶的手臂也可能難以觸及所有界面控件。任何超越簡(jiǎn)單交互的設(shè)計(jì)都會(huì)讓用戶感到乏味,疲倦。如果用戶長(zhǎng)時(shí)間伸展手臂在屏幕上進(jìn)行交互,那么因而引發(fā)的疲勞和酸痛被稱為“大猩猩手臂”。

四、屏幕遮擋問題

手指與手掌緊密相連,因而當(dāng)你在屏幕上做出手勢(shì)時(shí)你的手可以覆蓋整塊屏幕。盡量 避免將重要元素,比如標(biāo)簽,放在一個(gè)控件下面,因?yàn)橛脩舻氖挚赡馨阉w住。將類似菜單的控件置于屏幕底端可以避免這種現(xiàn)象。

當(dāng)設(shè)計(jì)一個(gè)按鈕交互時(shí),當(dāng)它以浮動(dòng)的方式或出現(xiàn)在工具提示中,請(qǐng)牢記用戶的手掌大概率會(huì)遮蓋住手指下方所有的信息。這種問題同樣出現(xiàn)在手指肥大的用戶身上。反過來講,設(shè)計(jì)師若將 所有交互信息都陳列在用戶手指周圍或上方就能避免這種問題。Pinterest的長(zhǎng)按保存靈感的交互設(shè)計(jì)就是很好的例子。

10大原則!教你做好數(shù)字產(chǎn)品的自然界面設(shè)計(jì)(NUI)!

五、熟知技術(shù)

不同的觸摸屏,感應(yīng)器,以及攝像頭決定了設(shè)計(jì)師可以設(shè)計(jì)哪些交互手勢(shì)。復(fù)雜的交手勢(shì)意味著有更少的用戶能夠?qū)ζ溥M(jìn)行操作。

但你在設(shè)計(jì)一款需要手勢(shì)交互的產(chǎn)品時(shí),我們建議回溯到用戶廣泛悉知并能夠輕松使用的那些手勢(shì)。當(dāng)然,考慮到人口多樣統(tǒng)計(jì),你需要始終提供手勢(shì)提示,并且還要盡可能為有特殊需求的用戶提供輔助功能選項(xiàng),以便他們將手勢(shì)轉(zhuǎn)換成點(diǎn)擊或語音控制。

10大原則!教你做好數(shù)字產(chǎn)品的自然界面設(shè)計(jì)(NUI)!

六、反饋提示于用戶操作觸發(fā)時(shí),而不是按下離開后

在一個(gè)用戶測(cè)試的環(huán)節(jié),我注意到那些老一輩的用戶非常擔(dān)心在移動(dòng)電話界面上觸碰到錯(cuò)誤的按鍵或者進(jìn)行了錯(cuò)誤的手勢(shì)。因?yàn)榛謴?fù)至上一步驟是他們并不習(xí)慣的操作方式,只有當(dāng)他們確認(rèn)在完成了正確的操作后才會(huì)將手指從屏幕上移開,不然他們會(huì)保持手指一直按壓在屏幕上。

這一觀察有特別的意義,提醒我們需要一直關(guān)注特殊人群的需要。當(dāng)用戶一直在維持按壓的交互行為時(shí),我們需要提示用戶已經(jīng)按下按鈕,但是只有當(dāng)手指移開界面時(shí)才會(huì)給予反饋。

七、預(yù)設(shè)吸引力

利用一個(gè)簡(jiǎn)單的手勢(shì)讓用戶開始體驗(yàn)系統(tǒng)。

當(dāng)引導(dǎo)用戶熟悉新的體驗(yàn)時(shí),要避免將事物過度復(fù)雜化。從簡(jiǎn)開始,循序漸進(jìn)的展開讓用戶逐漸適應(yīng)你的應(yīng)用,了解如何在應(yīng)用上進(jìn)行操作。你的交互動(dòng)作設(shè)計(jì)的越簡(jiǎn)潔,你的用戶對(duì)應(yīng)用就越容易上手。讓用戶使用起來覺得他們很聰明的體驗(yàn)可以讓產(chǎn)品走得很遠(yuǎn),反之,愚弄用戶和他們感受的產(chǎn)品會(huì)迅速流失他們的用戶。

八、避免無意識(shí)觸發(fā)

用戶的各種日常活動(dòng)也許會(huì)意外觸發(fā)系統(tǒng),要避免這一點(diǎn)。

尤其是一些大型設(shè)備,軟件應(yīng)該考慮意外點(diǎn)擊和碰觸。基于界面區(qū)域,碰觸時(shí)長(zhǎng),角度以及其他方面的問題,軟件應(yīng)用應(yīng)當(dāng)巧妙的避開誤觸元素,并提供恢復(fù)的方法,以防系統(tǒng)將這些失誤操作被判定為正確的動(dòng)作。作為設(shè)計(jì)師,我注意到隨著設(shè)備尺寸的變化而增加的可能性,以及像手機(jī)這樣大小的設(shè)備更易于管理。

九、手勢(shì)與常規(guī)按鍵

使用簡(jiǎn)單的方式(按鈕,滑塊,菜單等)來觸發(fā)功能,但要利用進(jìn)階的可學(xué)習(xí)的手勢(shì)作為捷徑。

9 宮格的解鎖交互就是我以上提到的。對(duì)于復(fù)雜的手勢(shì)控制應(yīng)用來講,最好提供交替觸控和滑動(dòng)觸控的UI操作界面。比如,一個(gè)用戶可以通過雙手指旋轉(zhuǎn)的動(dòng)作來旋轉(zhuǎn)畫布,或者利用點(diǎn)控菜單欄來選擇并確認(rèn)旋轉(zhuǎn)角度。這兩個(gè)交互行為都是易于掌握,并且大概率對(duì)于不同年齡的用戶都比較友好。在設(shè)計(jì)操作手勢(shì)的過程中,還要考慮到非手勢(shì)操作的用戶。

十、多樣化的必要

記住這一點(diǎn):有很多不同的方式來完成一種操作手勢(shì)。

在操作手勢(shì)時(shí),要考慮那些同時(shí)使用左右手的用戶并對(duì)其測(cè)試。對(duì)于那些操作某些具體手勢(shì)產(chǎn)生困難的用戶來講,他們大概率會(huì)把手掌放在屏幕上休息。所有這些都是不同類型的用戶在使用觸摸屏界面時(shí)使用的真實(shí)交互模式。作為設(shè)計(jì)師,在使用簡(jiǎn)單和復(fù)雜的手勢(shì)時(shí),我們應(yīng)該考慮到各種運(yùn)動(dòng)障礙和不同使用模式的人。

十一、根據(jù)任務(wù)的復(fù)雜程度和頻率來匹配操作手勢(shì)

簡(jiǎn)單來講,經(jīng)常操作的任務(wù)應(yīng)該使用簡(jiǎn)單的手勢(shì)來觸發(fā)它們

凡是需要兩根手指操作的手勢(shì)對(duì)大多數(shù)用戶來講都會(huì)造成問題。根據(jù)這一想法,復(fù)雜的手勢(shì)應(yīng)該保留給一次性動(dòng)作。對(duì)那些頻繁觸發(fā)的動(dòng)作,需要依賴簡(jiǎn)單的單擊雙擊或者滑動(dòng)手勢(shì)。因?yàn)樗麄兪穷l繁發(fā)生的,所以當(dāng)用戶使用兩根手指進(jìn)行操作時(shí)很容易引起疲勞和不適。

原文作者:Dhananjay Garg(本文翻譯已獲得作者的正式授權(quán))

原文:https://blog.prototypr.io/10-ways-to-design-for-digital-devices-using-natural-user-interface-patterns-8b99bf43a873

譯者:高暢;審核:徐曼鷺;編輯:孫淑雅、李莉好;微信公眾號(hào):TCC翻譯情報(bào)局(ID:TCC-design);連接知識(shí),了解全球精選設(shè)計(jì)干貨

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!