"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
4. 合併兩個畫布並且導出
將”UI視角”的畫布置於“360”畫布的中間，注意“UI”的圖層要在“360”之上。導出“360”畫布的png格式。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
4. 合併兩個畫布並且導出
將”UI視角”的畫布置於“360”畫布的中間，注意“UI”的圖層要在“360”之上。導出“360”畫布的png格式。
5. 用VR設備測試效果
把剛剛導出的png拖進GoPro VR播放器的窗口，用鼠標拖動圖像來預覽。做到這一步我們就全部完成了！很簡單吧！如果你電腦上有設置Oculus Rift，那麼GoPro VR播放器會監測到它，並且允許你用VR設備來預覽圖像。根據你電腦的配置，你可以在MacOS中處理顯示設置。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
4. 合併兩個畫布並且導出
將”UI視角”的畫布置於“360”畫布的中間，注意“UI”的圖層要在“360”之上。導出“360”畫布的png格式。
5. 用VR設備測試效果
把剛剛導出的png拖進GoPro VR播放器的窗口，用鼠標拖動圖像來預覽。做到這一步我們就全部完成了！很簡單吧！如果你電腦上有設置Oculus Rift，那麼GoPro VR播放器會監測到它，並且允許你用VR設備來預覽圖像。根據你電腦的配置，你可以在MacOS中處理顯示設置。
技術因素
1. 低分辨率
有人說VR頭盔的分辨率很差，這不是完全正確的：它相當於你手機的分辨率。只是由於設備距離你的眼睛有5釐米遠，顯示器看起來就不那麼清晰了。
為了獲得清晰的VR體驗，我們每隻眼睛需要顯示8K分辨率，這相當於一個15360×7680像素的顯示器。目前的技術還做不到，但是相信最終一定會實現的。
2. 文本可讀性
受分辨率所限，所有漂亮、清晰的用戶界面看起來都是像素化的。這意味著文本將很難閱讀，並且一條直線上的元素會出現混疊。設計過程中要儘量避免使用大文本塊和過分細節化的UI元素。
收尾工作
1. 流程圖
在移動端界面中常用的流程圖，也可以應用於VR界面。將“UI視角”界面連接成流程圖，這對於開發人員理解我們設計的總體架構是非常有用的。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
4. 合併兩個畫布並且導出
將”UI視角”的畫布置於“360”畫布的中間，注意“UI”的圖層要在“360”之上。導出“360”畫布的png格式。
5. 用VR設備測試效果
把剛剛導出的png拖進GoPro VR播放器的窗口，用鼠標拖動圖像來預覽。做到這一步我們就全部完成了！很簡單吧！如果你電腦上有設置Oculus Rift，那麼GoPro VR播放器會監測到它，並且允許你用VR設備來預覽圖像。根據你電腦的配置，你可以在MacOS中處理顯示設置。
技術因素
1. 低分辨率
有人說VR頭盔的分辨率很差，這不是完全正確的：它相當於你手機的分辨率。只是由於設備距離你的眼睛有5釐米遠，顯示器看起來就不那麼清晰了。
為了獲得清晰的VR體驗，我們每隻眼睛需要顯示8K分辨率，這相當於一個15360×7680像素的顯示器。目前的技術還做不到，但是相信最終一定會實現的。
2. 文本可讀性
受分辨率所限，所有漂亮、清晰的用戶界面看起來都是像素化的。這意味著文本將很難閱讀，並且一條直線上的元素會出現混疊。設計過程中要儘量避免使用大文本塊和過分細節化的UI元素。
收尾工作
1. 流程圖
在移動端界面中常用的流程圖，也可以應用於VR界面。將“UI視角”界面連接成流程圖，這對於開發人員理解我們設計的總體架構是非常有用的。
2. 動效設計
製作漂亮的界面是一回事，展示界面如何操作是另一回事。讓我們再一次用二維視角來展示。用sketch設計好界面後，用AE或principle來展示動效。雖然得到的並不是3D體驗，但它可以用來作為開發團隊的指導方向，並且可以使客戶在項目早期理解我們的想法。
"對許多設計師來說，VR是一個未知領域。近年來，我們目睹了VR相關硬件和軟件的蓬勃發展。VR的體驗從不盡人意到令人驚奇，他們的複雜性和功能性都有了很大的變化。
作為UI或UX設計師，邁向VR的第一步是艱難的。我知道，因為我們也是這樣過來的，所以無需畏懼！在這篇文章，我將分享VR界面的設計流程，希望可以藉此為你開啟VR設計的大門。你無需成為專家，只要將自己的設計技能運用在這片新的領域就好。
目前都有哪些類型的虛擬現實應用（VR App）？
一般來說，從設計師的角度來看，VR App由兩類控件組成：環境和界面。
- 環境：可以理解為你帶上VR頭盔後所進入的世界——可能是一個虛擬的星際世界，也可能是你坐過山車看到的風景。
- 界面：是用戶交互元素的集合，通過它來在環境中導航，並控制自己的體驗。所有的VR App都可以根據這兩個維度的複雜程度來定義。
集中在二象限（環境複雜、界面簡單）的app多為模擬器類，比如上文提到的過山車體驗，在滑行時你會一直處於這種環境。
與其相對的四象限有豐富的界面和簡單的環境，三星的Gear VR主屏幕就是一個很好的例子。
設計地面、風景等虛擬環境需要設計師熟練運用3D模型工具，將元素繪製得生動逼真。對於許多UI和UX設計師來說有些困難，而VR界面設計則是他們更好的選擇，可以運用自身技能。
我們最早的VR界面是為“The Economist”設計的，與VR產品工作室Visualise一同合作。我們做設計，Visualise進行研發。
在介紹VR界面設計的具體細節之前，我們先以“The Economist”為例，來闡述VR app的設計方法。你可以通過Oculus網站先下載一下“The Economist”。
VR UI設計過程
雖然大多數設計師對移動端界面設計流程可能已經瞭如指掌了，但是對VR界面的設計流程卻不甚瞭解。當我們接到設計VR界面的項目時，我們做的第一步就是設計一套工作流程。
換湯不換藥（新領域，舊流程）
第一次使用三星的Gear VR時，我們發現這和傳統的移動端app是相似的。他們有相同的工作原理：用戶通過與界面交互來瀏覽頁面。這點很重要，雖然這裡只是簡單提了一下，但需要牢記在心。
既然VR與傳統app界面相似，那麼設計師們花費數年時間學習並掌握的傳統UI經驗不會浪費，同樣可以複用於VR領域。事實上，你比你想象的更擅長VR app設計！
在講解VR界面設計流程之前，讓我們先回顧一下傳統移動界面的設計流程。
第一步：線框圖
首先，通過快速多次迭代來定義交互方式和總體佈局。
第二步：視覺設計
在這個階段，設計風格和交互方式已經確立。將品牌風格與線框圖相結合，經過精心設計得到漂亮的界面。
第三步：流程圖
為了表明頁面之間的交互流程，我們會用線把頁面連接起來，並將其稱之為流程圖。流程圖將作為程序員在開發過程中的主要參考。
那麼，我們如何將傳統的設計流程應用於VR設計中呢？
初始設置
畫布大小
最簡單的問題可能是最具挑戰性的。面對360度的畫布，用戶很難知道從哪裡開始交互。事實上，UX和UI設計師只需要關注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設計所需的畫布尺寸。在設計移動端app時，畫布尺寸是由設備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。
要想將移動端app設計流程應用於VR，首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環境被展開成了平面，這種表現形式被稱為等邊投影。在三維虛擬環境中，這些投影會包裹在一個球體周圍，來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大小：3600×1800像素。
這麼大的畫布很難顧全，由於我們主要是為了繪製VR界面，我們可以將注意力只集中在畫布的一部分上。基於 Mike Alger早期對視覺舒適區域的研究，我們可以把有用的界面分離出來。用戶感興趣的區域集中在360度環境面積的九分之一，它位於等矩形圖像的中心，大小為1200×600像素。
得出結論：
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設計本身，製作流程圖也會更便捷。同時，“360視角“畫布用於預覽VR界面，為了獲得真實的比例感，使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前，先了解下所需的工具：
- sketch：我們將使用sketch來設計界面和交互流程。如果沒有，可以下載試用版。sketch是首選的界面設計軟件，不過如果你更習慣於使用photoshop或其他任何軟件，也是可以的。
- GoPro VR播放器：它是一個360度界面查看器，由Gopro提供，免費。可以用來預覽設計並測試。
- Oculus Rift（譯者按：是一款頭戴VR顯示器，價格在399美元左右）：將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節，我們將花費最多五分鐘時間，來練習下VR界面設計流程。
下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），裡面有調整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。
1. 設置“360視角”畫布
首先，創建一個360度視角的畫布。打開sketch，創建新文件，並創建一個3600×1800像素的畫布。導入名為background.jpg的文件，並將其放置在畫布的中間。如果想用自己的素材，請確保背景圖像的比例為2:1，並將其調整為3600×1800像素。
2. 設置“UI視角”畫布
如上文所述，“UI視角”的畫布只選取“360視角”的一部分，並且只專注於VR界面設計。因此，我們在360旁邊建立新的1200×600像素的畫布。然後，將360視角的背景複製到新畫布，注意，要放置在新畫布的正中間，並且不要調整大小。我們要保留背景的裁剪版本。
3. 設計界面
我們將在“UI視角“畫布上設計我們的界面。為了使練習更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包裡直接把名為tile.png的文件拖到畫布中央。在同一行復制三個tile文件，然後把kickpush-logo.png文件拖出來放在tile上方。
4. 合併兩個畫布並且導出
將”UI視角”的畫布置於“360”畫布的中間，注意“UI”的圖層要在“360”之上。導出“360”畫布的png格式。
5. 用VR設備測試效果
把剛剛導出的png拖進GoPro VR播放器的窗口，用鼠標拖動圖像來預覽。做到這一步我們就全部完成了！很簡單吧！如果你電腦上有設置Oculus Rift，那麼GoPro VR播放器會監測到它，並且允許你用VR設備來預覽圖像。根據你電腦的配置，你可以在MacOS中處理顯示設置。
技術因素
1. 低分辨率
有人說VR頭盔的分辨率很差，這不是完全正確的：它相當於你手機的分辨率。只是由於設備距離你的眼睛有5釐米遠，顯示器看起來就不那麼清晰了。
為了獲得清晰的VR體驗，我們每隻眼睛需要顯示8K分辨率，這相當於一個15360×7680像素的顯示器。目前的技術還做不到，但是相信最終一定會實現的。
2. 文本可讀性
受分辨率所限，所有漂亮、清晰的用戶界面看起來都是像素化的。這意味著文本將很難閱讀，並且一條直線上的元素會出現混疊。設計過程中要儘量避免使用大文本塊和過分細節化的UI元素。
收尾工作
1. 流程圖
在移動端界面中常用的流程圖，也可以應用於VR界面。將“UI視角”界面連接成流程圖，這對於開發人員理解我們設計的總體架構是非常有用的。
2. 動效設計
製作漂亮的界面是一回事，展示界面如何操作是另一回事。讓我們再一次用二維視角來展示。用sketch設計好界面後，用AE或principle來展示動效。雖然得到的並不是3D體驗，但它可以用來作為開發團隊的指導方向，並且可以使客戶在項目早期理解我們的想法。
你可能會覺得：“二維動效雖然很酷，但是VR會比這個複雜的多。”是的，確實是這樣。但問題是我們能多大程度上將我們當前的UI/UX設計應用在這個新的媒介上呢？
VR UI設計可以走多遠呢？
1. 虛擬與現實的距離
一些VR體驗嚴重依賴於虛擬環境，這時傳統的置於頂部的操作界面並不是用戶使用VR的最佳方式。在這種情況下，我們希望用戶直接與環境本身進行交互。
想象一下，你正在為一個高檔旅行社開發一款應用。你希望用最生動的方式將用戶引流至各個潛在的度假目的地。因此，你邀請用戶戴上頭盔，在你寬敞的辦公室開始體驗。要從你的辦公室切換到風景區，用戶需要先選擇他們想去的地方。他們可能會拿起一本旅遊雜誌，快速瀏覽，直到被某一頁面吸引。也可能在你的辦公桌上有一些有趣的東西，選擇不同的東西可以把用戶帶到不同的地方。
顯然這種操作很酷炫，但也有一些缺點。要達到完整的效果，需要一個更先進的VR頭盔和手柄。另外，相比以前移動端界面已經設置好了可以選擇的選項，這樣的操作需要耗費更多的開發資源。
2. 商業與創新的平衡
事實上，對大多數公司來說，這些身臨其境的體驗在商業上並不可行，除非擁有像Valve和Google那樣幾乎無限的資源，否則開發出如上文描述的體驗對他們而言太昂貴、太冒險，也太耗時。這種體驗可以生動的表現出你處於媒體和技術的前沿，但是要想將你的產品市場化卻並不容易。畢竟，可操作性是很重要的。
通常，當一種新的形式出現，先行者們（這個世界的創造者和創新者）會將它推向極致。隨著時間推移，經過更深入的學習，以及更多資金投入，才會被用戶廣泛接受。隨著VR穿戴設備的普及，更多的企業會發現商機，將VR融入他們與消費者的互動之中。
目前來看，VR應用程序使用的界面都很直觀，與人們習以為常的可穿戴設備、手機、平板和電腦等的應用程序基本無異，這使得VR成為大多數公司可負擔和值得投資的項目。
是時候搭上VR設計的火箭了！
希望這篇文章可以使VR看起來不那麼可怕，並激勵你開始自己的VR設計。
常言道：獨行者步疾，結伴者行遠，而我們希望與你一起並肩遠行。在Kickpush，我們認為每個公司最終都會有自己的VR app，就像如今每個公司都有自己的移動端網站一樣。所以我們製造了這艘關於VR的“火箭”，希望世界各地的設計師可以共同努力，大膽地去探索未知的領域。VR app越早實現商業價值，當下的生態系統就越早進化。
作為電子產品的設計師，我們的下一個挑戰是設計更加複雜的應用，以及通過手柄進行更多類型的輸入。為了解決這些問題，我們需要更高效率的原型工具，來快速輕鬆地創建及測試設計。我們團隊會持續跟進類似的早期嘗試及新工具的開發進展，並且寫在後續文章裡。
原文：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design
作者：Sam Applebee and Alex Deruette
譯者: 菜菜菜菜來吃肉，公眾號：彩雲譯設計
本文由 @菜菜菜菜來吃肉 翻譯發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
"