中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

對許多設計師來說，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像素

測試

在一塊屏幕上使用兩種視角的畫布是為了測試?！癠I視角“的畫布可以使我們的注意力集中在設計本身，制作流程圖也會更便捷。同時，“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協議