affordance,從物理世界到數字世界<下>

affordance,從物理世界到數字世界<下>

來自專欄 D for Design9 人贊了文章

數字世界的affordance,既要源於生活,也要超脫於生活。

這裡以VR為例。

Leap Motion的VR開發團隊曾經在博客中提到一個設計案例。

當時,他們設計了一款VR遊戲——Weightless(模擬失重的環境),用戶需要抓起一個球,然後扔出去。最開始的設計是一個普通的圓球。然而,在VR中用戶沒有觸覺反饋,沒法控制「握」球的尺度。用戶的手常常會不由地伸到球體裡面。

當用戶的視覺反饋---「看到自己手伸入了球里」和觸覺反饋----「無觸感」之間產生矛盾時,VR的沉浸感就被打破了。而且當用戶手握拳時,後續的扔球動作將變得很難進行。

於是,他們參考了現實世界中保齡球和壘球的形狀,設計了一款新球。凹陷處是暗示用戶抓取的位置。

果然,大部分用戶都延續了現實世界的經驗,以正確的姿勢抓取了球。雖然還是缺乏觸覺反饋,但僅僅視覺上的設計,就已經能讓大多數用戶以「正確」的方式與系統交互了。

當然,還是有一部分「頑固」的用戶,會把手鑽進球里。於是Leap Motion的設計師想到,能不能設計動態的,響應式的「affordance」

what if instead of modeling static affordances we create reactive affordances which appeare dynamically wherever and however the user chose to grip an object?

動態affordance:形變

於是他們設計了如上的版本。當手指穿進球中時,會出現一個環形接觸面。而且接觸面的位置和大小會隨著手指的位置和深度而動態改變。暗示手與球之間的位置關係。

顯然是「違背」現實世界規律的。但是在VR里,卻恰如其分的替代了缺失的觸覺反饋,給了用戶一種「真實感」。由此可見,很多時候,VR里須要創造自己的affordance,而不是一味模模擬實世界。

動態affordance:形變+色彩

如上,他們還設計了另一種交互方式。插進球體的手指會被著色,顏色根據手指的深淺變化。這種顏色和形狀所創造的視覺affordance,很好的暗示了手指握球的深度。

眾所周知,深度(Z軸)是一個用戶很難精確把控的概念。例如,讓你把手伸到眼前1米處,很難精確地達到那個位置。所以VR里關於深度的affordance更須要設計。

他們還設計了一個版本。當手伸到球里的時候,會出現虛擬的孔。交界處的顏色設計為灰色,孔內為白色,突出接觸面的存在感。而且孔的位置隨手指變化更加靈敏。

動態affordance:形變+色彩+更靈敏的響應

以上的例子,從follow現實世界,到超脫於現實世界,很好的說明了affordance最終還是落在用戶的認知層面。不管現不現實,用戶覺得用起來intuitive,順手是最重要的。

此外,很多關於VR的設計指南都提到,光影的變化是一種很好的暗示,讓用戶的注意力不自覺地轉移到目標上。360度聲音(spatial audio) 設計,也是VR中重要的affordance線索。

——————————————————結語——————————————————

施樂實驗室的元老,Stuart Card曾經在80年代寫過一篇文章《User Technology: From Pointing to Pondering》,裡面把人機交互的界面分成4個level。

the physical interface: 可見的輸入輸出設備

the cognitive interface:用戶的大腦(主要是working memory) 如何處理他/她直接面對的信息

the conceptual interface:用戶怎麼理解一個任務背後的運行機制和原理

the task interface:用戶怎麼執行大大小小的操作來完成任務

這4個level,也可以作為操縱數字世界affordance的指南。

-----------------------------歡迎關注我的專欄----------------------------------

試說新語?

zhuanlan.zhihu.com圖標D for Design?

zhuanlan.zhihu.com圖標

參考:

Interaction Sprints at Leap Motion: Exploring the Hand-Object Boundary - Leap Motion Blog


推薦閱讀:

CAD圖紙轉換PNG圖片竟這麼簡單
Sketch 多層陰影插件 Better Shadow
中國有「設計」二十年了
設計UI時,比布局配色動效更重要的是用戶思維模式
個人中心設計的五大要訣!——背景篇

TAG:虛擬現實VR | 設計 | Affordance |