專業干貨！淺聊故事板在VR設計中的運用（附模版下載）

@C7210?：或許將來，每一名設計師都能佩戴著高端VR頭顯，通過某種所見即所得的設計工具直接沉浸在3D世界當中進行工作。不過在那一天真正到來之前，我們依然要運用一直以來所熟悉的2D模式進行VR設計。本文所探討的VR故事板就是這樣一種變通性質的工具。

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

△ Cardboard Crash項目初期使用故事板的錯誤方式 - 傳統的矩形故事板無法有效呈現自身沒有邊界的VR環境。

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

具體來說，在傳統的故事板當中，我們描繪的通常是用戶所看到的東西；然而對于VR來說，有限的矩形范圍只能展現出第一人稱視角觀察到的虛擬世界的一小部分。換一種思路，不妨試著用故事板本身來代表用戶在虛擬世界當中目力所及的整個區域，并在其中通過第三人稱視角來展示用戶與目標對象在這個區域當中的相對位置關系。

VR故事板

“角度”與“距離”是VR故事板當中的兩個關鍵要素。

先來看角度。下面的圖示用到了Mike Alger出品的“VR Interface Design Previsualization Methods”視頻(學習VR設計必看)當中的數據，同時也參考到Alex Chu的演講“VR Design: Transitioning from a 2D to a 3D Design Paradigm”。

△ 頭部旋轉的舒適角度及相應的視野區域

VR頭顯的默認視野范圍大約是94度。保持固定坐姿時，你可以比較舒適的向左右兩側轉頭30度，最多不超過55度；如果是站姿或坐在轉椅上，這兩個數字還會有所增長。不過目前，就讓我們聚焦在局限性最高的情境當中好了。

再來看距離。在一定的范圍內，離自己越近的物體越能引發人們的關注。不過所謂的“范圍”具體是怎樣的呢？

△ 清晰、舒適的3D深度感知與相應的視距

要確保最基本的舒適度，虛擬環境中的目標對象與用戶之間的距離不應小于0.5米(Oculus推薦的最小值是0.75米)；而10米以上則會使用戶的3D深度感知急劇下降；一旦超過20米，目標對象就很難被留意到了。所以我們應該將重要的物體放置在距離用戶0.5到10米的范圍之間。

將“角度”與“距離”兩個要素整合起來，我們便可以得到下圖所示的舒適區域分布，其中灰色越深的區域代表舒適度越高。這幅示意圖正是VR故事板的基礎模板：

移除矩形邊框及多余的線條，將用戶的形象放置進去，調整一下人物與環境的比例，將圖形傾斜至3D視角，我們便得到了一幅空白的VR故事板：

在里面隨便畫一些互動對象或是環境元素：

VR故事板可以清晰的展示出用戶與目標對象在3D空間當中的位置關系；同時運用多張故事板則可以表現出用戶與虛擬世界之間的動態互動關系。

尚不完美

通過用戶視野范圍界定的故事板主要適用于場景初期的設定，而且用戶的視點必須是可預測和可控的。在具備互動性的VR環境中，這一點很容易實現，你通常可以在每個場景開始之初重置用戶的視點位置及視線方向。

而對于360°視頻來說，事情會變得有些復雜：用戶在每個場景開始時的視線方向取決于他在上一個場景結束時所注視的方向，你很難做出預測，進而難以通過我們的VR故事板進行預先設計與描述。推薦各位閱讀Jessica Brillhart的文章“In the Blink of a Mind?—?Attention”(Medium，墻外)，來了解怎樣應對這樣的狀況。

模板

或許將來，每一名設計師都能佩戴著高端VR頭顯，通過某種所見即所得的設計工具直接沉浸在3D世界當中進行工作。不過在那一天真正到來之前，我們依然要運用一直以來所熟悉的2D模式進行VR設計。本文所探討的VR故事板就是這樣一種變通性質的工具。

我制作了一組模板，其中包含六個空白場景以及用來做注釋的文稿線。你可以下載這份可打印的PDF文件（DropBox），或直接保存下面這張圖片；打印到紙上，隨時使用，會很便利。

歡迎關注譯者（交互設計師、貓奴、吉他手、鼓手、老狗，現就職于騰訊ISUX）的微信公眾號：

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

「優設六月最新的VR設計好文合集」

VR入行手冊！
《VR快速入行手冊！可能是現在最全面的VR知識學習指南》

實戰教程：
《實戰教程來了！一名UX設計師的VR設計初體驗》

VR設計指南：
《教程來了！VR設計指南之基礎概念與設計工具》

原文地址：medium
譯文地址：beforweb

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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