設計師必看!學VR不可錯過的設計文章集錦

@C7210?:過去幾個月里,我在搜集VR設計相關主題的內容資源時,通常會遵循某種原則,目標是幫助包括我在內的傳統UX設計師們了解“VR”這個廣闊而復雜的新媒介概念背后的一些最基本的東西,包括設備常識、設計理念、自學方法與心得、基礎實踐等若干方面。今天采用相同的分類原則,把目前的VR設計文章都歸納一遍。

歡迎關注譯者(高級交互設計師、貓奴、吉他手、鼓手、老狗、單身,現就職于騰訊ISUX)的微信公眾號:Beforweb

這兒有他的訪談:《優設訪談!騰訊高級交互設計師C7210的十年設計路》

設計師必看!學VR不可錯過的設計文章集錦

首先按照發布的時間順序列一份清單出來:

  1. 谷歌設計師出品的VR設計入門指南
  2. VR設計指南之基礎概念與設計工具
  3. 一名UX設計師的VR設計初體驗
  4. 設計師該怎樣從3個方面學習VR設計?
  5. 設計師進入VR領域會遇到哪些狀況?(附解決方法)
  6. 關于谷歌的VR新平臺,設計師應該知道的9件事
  7. 站在VR的大門前!主流VR平臺交互特性淺析
  8. 從VR UI設計案例中學到的六個經驗
  9. 淺聊故事板在VR設計中的運用(附模版下載)
  10. VR新工具之便捷實用的POV紙質原型
  11. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(一)
  12. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(二)
  13. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(三)

然后歸納到五個類別之下,并從每篇文章當中摘一部分關鍵內容作為引言:

設備常識

站在VR的大門前!主流VR平臺交互特性淺析

英文原文作者本身是設計師,主要站在不同硬件平臺交互特性的角度進行介紹,涵蓋Cardboard、Daydream、Gear VR、Vive、Oculus與PS VR。

如今市面上已經有不少VR設備了,而且越來越多的廠商正在加入這一大軍。哪一款最適合于你的產品?答案最終取決于產品自身的目標及典型用例。如果你希望將某種簡單快捷的快餐型內容體驗介紹給盡量多的用戶,那么建議你聚焦于Cardboard,并通過iOS和安卓app來承載內容。如果你希望產品可以為用戶帶來長時間的高品質沉浸體驗,那么Vive、Rift或PS VR這類高端設備將是不二之選。

無論聚焦于哪一類平臺,人機互動模式都是你在設計VR產品的過程中必須時刻考慮到的。長久以來,包括我們自己在內,人們都已習慣于通過鼠標或觸屏與數字世界進行互動,然而這些“傳統”的交互模式在VR領域行不通,用戶要學習新的操作方法,而我們更需要首先調整設計思維模式;一路上,還有太多東西等待我們去學習和探索。

設計師必看!學VR不可錯過的設計文章集錦

關于谷歌的VR新平臺,設計師應該知道的9件事

選擇了尚未正式發布、連硬件設備還沒有上市的Daydream作為話題,也是因為一方面這是最容易理解與入門、上手的平臺形式,另一方面也想具備一些相對超前的時效性。在接下來的幾個月便有可能逐漸開始普及開來的最為親民的平臺與產品,快來做些了解也好。

在I/O 2016大會上,Google推出了“Daydream” - 這是一套基于Android的開源平臺體系,用以構建高質量的移動VR應用及相關服務。面向Daydream設計開發的app將僅能運行在未來那些經過Google認證的Daydream-ready移動設備上。

Daydream是一套全新的VR平臺體系,相應的,VR設計師們在為其打造產品時也需要首先了解一系列新的設計原則。在I/O 2016大會上,Google的VR設計團隊登臺,為設計師與開發者們講解了面向Daydream平臺進行設計的最佳實踐方式。設計的關鍵在于怎樣打造舒適、沉浸及獨特的VR體驗。

設計師必看!學VR不可錯過的設計文章集錦

基礎概念

VR教程來了!谷歌設計師出品的VR設計入門指南

我(英文原文作者)是Google的一名產品設計師。2012年,我當時就職的一家名為Sparrow的法國創業公司被Google收購。從那時起,我就一直在Gmail團隊效力,并全程參與了旗艦產品Inbox by Gmail的設計工作。

這些年下來,始終置身于移動app設計領域,自己也覺得遇到了瓶頸一樣。我很希望擴展自己的技能范圍,每天學些新東西,讓自己在從未接觸過的某個領域當中有所斬獲。我需要走出自己的舒適地帶,通過接受新的挑戰來重啟職業生命,于是我在2015年4月申請加入了Google VR團隊。

最初的幾周對我來說相當茫然,不過日復一日,零散的認知碎片逐漸組合成完整的拼圖,我一點點看清了當前VR設計與開發領域的整體框架,也開始明白了自己希望在其中扮演的角色,以及要成為這樣的角色需要掌握哪些技能。

設計師必看!學VR不可錯過的設計文章集錦

教程來了!VR設計指南之基礎概念與設計工具

新的空間維度與沉浸式體驗所帶來的沖擊是前所未有的。要在三維世界當中打造令人舒適的互動體驗,你需要了解一些此前可能并未接觸過的技術概念與設計原則。而在設計工具方面,傳統的紙筆和Sketch(app)等工具依然有著用武之地,此外,Cinema 4D、Maya、Unity等3D設計工具也是我們需要嘗試接觸和學習的。

VR還相當年輕。作為先行者,我們需要去學習和探索的東西太多太多,這也正是我為此而興奮并最終加入VR團隊的原因。擺在我們面前的有挑戰,更有機遇,我們理應盡最大的努力到這個新世界當中進行探索,去學習、理解、創造、迭代,如此反復的長久保持下去。

設計師必看!學VR不可錯過的設計文章集錦

一些觀念,一些經驗

各位UX/UI設計師們,在興高采烈的決定投身于VR事業并自掏腰包購買硬件之前,我(英文原文作者)個人建議你們盡可能尋找機會親身嘗試不同類型的VR設備,至少搞清楚它們的區別與優劣。無論對于VR還是AR設備,試著了解每一類平臺系統的特性,尋找對于自己來說最為適合的切入點。切莫盲目的跟隨潮流,隨隨便便買上一款HMD,然后自認為可以在一周之內畫出一套Material界面控件包一類的東西,好像你在2D界面設計領域當中能夠做到的那樣。

在花了14個月的時間專注于探索AR系統當中的交互模式及視覺語言之后,我可以告訴各位,不同于我們多年來所熟悉的任何平臺,VR/AR更加復雜,更加系統化和科學化,與現實層面的關聯更為密切。相比于過去,我們必須更加透徹的理解如今所要面對的新平臺,以及怎樣以形形色色的人類行為特征為核心進行設計。

不過你要知道,我們過去所熟悉的產品體驗設計原則并沒有過時,只是與新技術的復雜特性之間的關聯更為密切了。這也是我建議各位多花些時間去盡可能多的體驗當前技術成果的原因之一,必須在實際當中盡早建立起整體認知。

設計師必看!學VR不可錯過的設計文章集錦

自學心得

騰訊干貨!設計師該怎樣從3個方面學習VR設計?

因為最近一段時間的更新都集中在了VR方面,所以逐漸也有些朋友在這邊或是微博留言問起究竟應該怎樣去學習VR設計。我很想盡自己所能的給到一個什么標準答案,可惜做不到。如今,無論大公司還是小玩家,無論設計還是技術層面,大家都處于摸索的階段,整個VR領域仍是一片wild west,太多東西有待探索和確立,其中自然也包括設計實踐方式以及學習方法本身。

況且我個人也只是剛剛接觸不久,所以目前只能簡單介紹下自己的一些所謂的學習方法供各位參考吧。大致分為三個方面:

  • 閱讀文章資訊
  • 學習設計工具
  • 實際體驗

設計師必看!學VR不可錯過的設計文章集錦

訪C7210:站在VR世界大門前的UX設計師

幾年前,隨著觸屏交互與移動設計大潮的洶涌而至,我們已經經歷過一次思維模式與設計范式的重大調整;而在我看來,對于我們這些“傳統”UX設計師來說,如今這次媒介級的跨越所帶來的挑戰要遠遠高于之前的那一次。

在過去的十多年甚至是幾十年的時間里,人機界面設計模式基本局限于二維框架當中,人與二維屏幕的互動占據著絕對主導的地位,無論在桌面時代還是移動時代均是如此。而VR給我們帶來了真正意義上的第三維度,人與數字世界的互動介質也從二維屏幕轉變成為三維空間。設計師們更多需要考慮的是怎樣在一個接近于現實世界的虛擬空間當中充分利用人類已有的行為習慣來打造最為自然的交互模式,而不是順從于我們多年來所習慣的思維模式,將二維人機互動模式盲目的遷移到三維世界當中。這些原則說起來容易,但畢竟是全新的信息媒介,作為設計師,不經過充分的實境體驗,不去親身感受三維世界當中的特性與痛點,那么所謂的“用戶體驗”便無從設計。有了實際的體驗以及基于這些體驗的思考,慢慢梳理自己的方向和目標,上手恰當的設計工具進行預習,一步一步循序漸進的將自己推向VR設計的學習正軌,這是我們目前需要做的。

設計師必看!學VR不可錯過的設計文章集錦

親歷經驗!設計師進入VR領域會遇到哪些狀況?(附解決方法)

我(英文原文作者)有幸參加了2015年的Google I/O大會,并領到了一個免費的Cardboard。回到家,戴上這紙盒遨游了那么一陣子,我便開始為VR世界所著迷。怎樣才能投身于這個全新的技術領域?我思考起這樣的問題,只是看不到明確的答案。在這之前,我從沒想過自己會涉足游戲設計或3D建模一類 - 這些對我來說有些遙不可及,聽上去就讓人覺得有些驚悚,像是要光著腳板去爬山一樣的感覺。不過話雖如此,總還是要去盡力嘗試才好,于是我走上了VR設計的探索與學習之路。

據我當時所了解,Unity 3D應該是時下最為主流的設計引擎了,于是我下載了一套免費的個人版本,開始摸索。不過程序一啟動,我就被界面嚇到了,各種面板和窗口,無數參數選項,滿眼都是功能,完全不知如何下手。我突然開始理解為什么有很多同行剛一開始嘗試就決定放棄了。我需要重新思考一下。

我決定后退一步,尋找一種更適合自己的學習路線。接下來的道路很漫長,我逐漸摸索,在VR設計與開發的研究上花費了幾個月的時間,期間還做了個demo出來。本文便是我一路自學下來所得到的一些經驗與感受。

項目經驗

實戰教程來了!一名UX設計師的VR設計初體驗

我(英文原文作者)是一名產品設計師,一名自詡的用戶體驗專家,職責涵蓋信息架構設計、交互及UI設計。目前,我正在一家主流的影視制作公司擔任高級UX設計師一職,所負責的web及移動app產品涉及企業與消費市場兩大方面。

去年,我轉崗到內部的一個VR團隊擔任UX設計leader。我個人來說并不認為自己有足夠的資格來擔任這個職位,畢竟對于VR這個全新的信息媒介,我幾乎沒有任何相關的經驗背景。本文就是我在這個新領域當中進行設計初體驗時所得到的一些經驗分享。我相信如今有很多設計師和我一樣,一方面不具備相關的經驗,一方面又希望進入VR領域去擴展技能、開拓視野。所以希望本文能夠為各位帶來一些指引與幫助。

設計師必看!學VR不可錯過的設計文章集錦

實戰教程!從VR UI設計案例中學到的六個經驗

最近,我(英文原文作者)在一個安卓VR app項目當中負責界面的設計開發工作。對我個人來說,這是一片從未涉足過的全新領域,因此感到無比興奮,并希望將自己一路上所學到的經驗分享給各位,同時也想通過這種形式對自己的一些設計方法和解決方案進行總結。

本文話題聚焦在整個設計流程當中的以下幾個階段:

  • 探索與研究
  • 技術需求與局限
  • 腳本、信息架構、功能與內容
  • 草圖
  • 界面原型
  • GUI設計

設計師必看!學VR不可錯過的設計文章集錦

實戰方法

專業干貨!淺聊故事板在VR設計中的運用(附模版下載)

作為一種高效快捷的溝通方式,故事板(storyboard)在影視、游戲和網頁設計等領域當中十分常見,通常用于快速展示空間位置、鏡頭組、運動、互動關系等方面的設計概念。一直以來,我們都習慣于通過故事板的邊框來界定場景范圍;不過如果場景本身沒有所謂的邊界,無法通過有限的矩形來完整呈現,我們又該如何呢?

實際上,我們只需換個角度來看問題 - 過去的方式是在故事板當中定義目標對象與場景邊界之間(或界面元素與屏幕邊界之間)的相對位置關系;而對于沒有邊界的VR世界來說,我們需要定義的則是目標對象與用戶之間的相對位置關系。某種意義上講,這是名副其實的“以用戶為中心”的設計思路,只是對于習慣了傳統方式的設計師們來說,一開始可能會感到有些陌生。

設計師必看!學VR不可錯過的設計文章集錦

專業干貨!VR新工具之便捷實用的POV紙質原型

和很多人一樣,我(英文原文作者)在實際體驗過VR之后,便開始為其中所蘊含的各種可能性及巨大的潛力而著迷。最近一段時間,我也終于有機會和團隊一起去動手構建VR世界了。

面向全新的信息媒介進行設計,期間勢必遇到各種獨特的挑戰;當然,相應的學習與探索的機遇同樣并存。譬如我在剛剛開始構思主場景的時候便發現了一些從前在設計2D界面時未曾遇到過的麻煩。所謂主場景,也就是用戶戴上頭顯并加載了我們的app之后看到的第一個場景。

挑戰在于,我所熟知的概念原型制作方法當中,沒有哪種既能清晰的呈現出用戶及互動元素在虛擬環境中的位置關系,同時又非常便于團隊之間進行溝通和協作。經過一番探索,我找到了一種非常簡單高效的實踐方式,而本文便是相關的實戰經驗匯總。

設計師必看!學VR不可錯過的設計文章集錦

谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(一)

了解怎樣使用Unity與Google VR SDK來制作最為簡單的VR demo app,并部署到實際設備當中,然后通過Cardboard進行體驗。本期甚至無需自己制作任何東西 - 嘗試將SDK中自帶的demo項目放進iPhone便好 - 不去實際操作也不成問題,畢竟涉及到Xcode、Unity的使用;單純了解到一些“流程”方面的常識也是收獲。

本期的英文原文是Google官方的一篇文檔,內容略干澀,幾乎沒有配圖,于是我做了一定程度的編譯,并使用了自己操作時的截圖作為演示。

設計師必看!學VR不可錯過的設計文章集錦

谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(二)

通過Unity構建一些簡單的3D環境,然后打包到app當中供Cardboard使用。本文相比于上期來說增加了一些更具體的東西,包括從Unity商店下載環境資源、在項目中使用Google VR Unity SDK提供的組件及第三方腳本等等,實戰性略強些。不過還是那句話,讀過之后不去實際操作也不成問題,作為設計師,在目前單純去解到一些“流程”方面的常識也是收獲。

此外和上期類似,這次的編譯程度也比較大,因為原文成文的時間較早,之后無論是Unity相關界面還是Google提供的SDK使用方式都有變化,包括第三方腳本代碼亦需要進行手動變更;幾乎所有的配圖都替換成了我自己實際操作時的截圖。

設計師必看!學VR不可錯過的設計文章集錦

谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(三)

“Unity與Cardboard app基礎實踐”的話題之前已經做過兩期,均是譯文。第三期直接自己寫了,兩方面考慮:一是目前能看到的Cardboard實戰文章或視頻教程大多是基于舊版SDK,而非Daydream發布之后更新的大一統版本的“Google VR”SDK,時效性上有問題,翻譯過程中需要做大量的修改工作,包括代碼和配圖等等方面;另外自己也希望將之前學到的若干知識點匯總在一個完整的小范例當中進行實踐,既然方法已經學到了,就整合到一起,一邊梳理一邊將流程分享出來。

我們接下來將要一起搗鼓的東西,簡單描述一下大約就是借來一些免費的Unity資源,搭起3D場景,在里面放上一兩個沒有任何意義的3D對象,使用Google提供的SDK組件模擬VR視野,當視線聚焦在3D對象上時,VR準星會發生形變,同時3D對象會改變外觀,暗示互動性;而通過鼠標模擬Cardboard按鈕點擊事件還可以使3D對象產生位移。大致就是這樣。如果有興趣打包成app放到iPhone當中,便可以直接塞到Cardboard里面以真實VR的方式進行體驗了。

提煉一下具體的實踐要點,包括:

  • 向Unity項目中導入Google VR Unity SDK。
  • 在Unity Asset Store中瀏覽并下載免費資源包。
  • 調用Google VR相關組件,構建VR模式。
  • 向場景(Scene)中添加交互對象。
  • 編寫代碼,制定凝視交互的規則。
  • 構建事件系統及觸發規則。
  • 通過Xcode將VR app部署到iPhone當中。

設計師必看!學VR不可錯過的設計文章集錦

「人氣過萬的好文合集」

敏捷用研指南:
《騰訊專業干貨!一份系統全面的敏捷設計用研指南》

QQ表情怎么改版的?
《騰訊設計師揭秘!QQ默認表情優化背后的設計故事》

HTML 5動效設計方法大全!
《騰訊干貨!由淺入深科普最常用的八種HTML 5動效制作手法》

原文地址:beforweb

設計師必看!學VR不可錯過的設計文章集錦

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量160萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 20
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。