VR界面設計的整個工作流程是怎樣的?

 1、產品經理繪制流程圖:

  給什么樣的用戶群設計的?

  用戶想在你的VR 應用中獲得怎樣的目標(滿足怎樣的需求)?在最下面的結尾處則為用戶將要完成的目標(獲得的結果&滿足的需求)

  ……

  —————————————————————————————————————

  2、產品助理&策劃 手繪線框圖:

  —————————————————————————————————————

  3、產品設計師制作靜態低保真原型

  把上面的草圖在unity中做出來,比如平面上的方形做成unity中的方塊。

  定義每個產品??櫚墓δ?。

  比如添加圖片、標題和交互功能。

  戴上HMD查看效果:

  因為VR里的相對像素密集度太低了,而且又有一定程度的畸變,所以簡單地把界面放到VR里就會看不清,也就是所謂的可讀性太低。

  (VR中如何保證文字的『可讀性』?)

  將頁面『卷起來』:

  正如我在《為什么VR的界面要放在一張『弧面』上?》中所說的問題,此時得將頁面卷過來一點兒——讓你的視角到每個頁面的距離相等,從而保證每個字有相同的『可讀性』。

  將整個界面縮小到用戶FOV能夠一覽無余的范圍內:

  所以將頁面控件放大,字放大,看起來整個顯得小了?正如我在《VR中的界面和文字,該怎么排版?受什么因素影響和制約嗎?》提到的,因為FOV的限制,用戶需要轉頭、轉眼來看到整個頁面,那多累啊,于是將控件集中到這一塊區域內。

  這種布局叫做volumetric layout。

  —————————————————————————————————————

  4、交互設計師制作高保真原型

  嘗試著在頁面控件上添加材質(貼上可能用到的內容縮略圖)。

  可以看到,即使放上高質量的圖片,因為分辨率限制,能顯示出來具有一定可讀性的并不多。

  (理想的VR頭顯需要達到多少分辨率,才能消除紗門效應?現在做到了什么程度? )

  —————————————————————————————————————

  5、用戶研究員和測試工程師進行用戶研究和用戶測試

  按照《VR中該如何進行用戶研究(研究用戶是怎么玩的)?》中所說的方法:

  (1)首先測試用戶能否在360°的球面上找到一塊不到100°的弧形平面?(那塊弧形平面就是我們的主界面。)

  (2)用戶知道icon的功能嗎?

  (3)用戶知道如何滾動頁面嗎?

  ……

  —————————————————————————————————————

  6、視覺設計師進行美術制作

  這個時候視覺設計師(注:VR時代的視覺設計師為游戲美術師,比如場景設計師、角色設計師等)將界面放入場景中查看是否舒適。

  場景設計中最大的限制在于手機的性能,比如daydream的性能限制是:

  draw call要小于100(為什么應該盡量減少draw call?)

  polygon要小于100K(如何簡化包圍多邊形?)

  pixel fill要低(三角形填充算法的主要實現細節和注意點是什么?)

  ……

  是不是聽得頭都暈了?所以最好的解決辦法是用模板著色器(stencil shader)——生成了一個ODS(omnidirectional stereo,全方位立體)。一個球面的mask,最后得到一張三自由度的全景圖,這也就是整個play store VR的背景360°圖。

  用全景圖代替即時渲染的幾何體,極大地降低了實時渲染的工作量。

  不過它的問題是只有一張單薄的球形曲面(當然普通用戶看不出來),所以UI控件只能擋在它前面,而不能放上去。

  (那實時渲染的三維動畫和一個提前渲染的全景視頻,在用戶看起來有什么區別呢?小白用戶可能看不出來,而我們內行有一種分辨的方法:那就是傾斜你的頭部,馬上就發現它只是張單薄的球面~)

  —————————————————————————————————————

  7、動效設計師設計動效&轉場動畫

  交互設計師和工程師討論系統層級的設定,將不同層級的頁面產生不同的層級關系,并設定頁面滾動方式(VR的滾動視圖『橫向』滾動好還是『縱向』滾動好?)。

  動效設計師根據頁面層級的設定設計動效,并用動效引導用戶視線(VR頁面動效設計中如何引導用戶視線?)

  這是正常的界面,兩個同級頁面之間保持在同一Z軸上?!禫R界面設計中為什么前后兩個頁面之間的Z軸深度差不能過大?》

  當一個頁面被raycast戳中時,它微微向前抬起

  這里動效設計師設計了parallel effect(這種交互的特點是,通過動畫產生深度錯覺):

  當raycast戳到jump頁面的左上角時,頁面右下角抬起。

  當raycast戳到jump頁面右上角時,左上角微微抬起。

  動效設計師展示交互動效——

  未hover on的狀態:

  當被cursor選中時,整個icon相對于整個畫面向前移動,icon的背景層和圖形層分離,icon下面顯示出APP的名稱。

  然后就可以交給開發團隊了。

作者:胡癡兒2.0

鏈接:https://www.zhihu.com/question/46658219/answer/102236885

來源:知乎


上一篇: 黃金比例分割使用指南

下一篇: APP用戶體驗:規避常見的手機APP設計誤區

分享到: 更多
七乐彩基走势图500期 足球比分分析 河北快三怎么玩赚钱 棋牌赚钱 重庆时时开奖结果记录 时时彩1000期历史开奖 北京pk10骗局大揭秘 排列三买组三的技巧 好运快3计划软件 网络mg电子游戏 北京时时官网走势图 云南时时近100期走势图 双色球怎么算预测方法 9线777水果机连线app pk10在线计划 2019正规彩票app大合集