The question is, to what extent can we apply our current UX and UI practices to this new medium? How Far Can VR UIs Go? Inter-Your-Faces We know what you’re thinking, though: “That’s cool, but VR apps can get way more complicated.” Yes, they can. We’re pretty far off from that, but we’ll get there eventually. To get a crisp VR experience, we would need an 8K display per eye. However, considering the device is 5 centimeters from your eyes, the display doesn’t look crisp. Well, that’s not entirely true: It’s equivalent to your phone’s resolution. The resolution of the VR headset is pretty bad. Depending on your configuration, you might have to mess around with the display settings in MacOS. If you have an Oculus Rift set up on your machine, then the GoPro VR Player should detect it and allow you to preview the image using your VR device. We’re done! Pretty simple when you know how, right? Drag the image with your mouse to preview your 360-degree environment. Open the GoPro VR Player and drag the “360 View” PNG that you just exported into the window. Export the “360 View” artboard as a PNG the “UI View” will be on top of it. Make sure the “UI View” artboard is above the “360 View” artboard in the layers list on the left.ĭrag the “UI View” artboard to the middle of the “360 View” artboard. Grab kickpush-logo.png from the assets pack, and place it above the tiles. If you’re feeling lazy, just grab the file named tile.png in the assets pack and drag it into the middle of the UI view.ĭuplicate it, and create a row of three tiles. We’ll keep things simple for the sake of this exercise and add a row of tiles. We’re going to design our interface on the “UI View” canvas. Don’t resize it! We want to keep a cropped version of the background here. Then, copy the background that we just added to our “360 View,” and place it in the middle of our new artboard. If you’re using your own equirectangular background, make sure its proportions are 2:1, and resize it to 3600 × 1800 pixels.Īs mentioned above, the “UI View” is a cropped version of the “360 View” and focuses on the VR interface only.Ĭreate a new artboard next to the previous one: 1200 × 600 pixels. Import the file named background.jpg, and place it in the middle of the canvas. Open a new document in Sketch, and create an artboard: 3600 × 1800 pixels. Let’s create the canvas that will represent the 360-degree view. "The question is, to what extent can we apply our current UX and UI practices to this new medium?" 1. To get a real sense of proportions, testing the interface with a VR headset is necessary. Meanwhile, the “360 View” is used to preview the interface in a VR environment. The “UI View” canvas helps to keep our focus on the interface we’re crafting and makes it easier to design flows. The reason for using two canvases for a single screen is testing. It’s positioned right at the centre of the equirectangular image and is 1200 × 600 pixels in size. The area of interest represents one ninth of the 360-degree environment. ![]() But because we’re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas.īuilding on Mike Alger’s early research on comfortable viewing areas, we can isolate a portion where it makes sense to present the interface. Working with such a big size can be a challenge. We can use this to define the pixel size of the canvas: 3600 × 1800. The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world. This representation is called an equirectangular projection. To apply this mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.īelow is what a 360-degree environment looks like when flattened. When you work on a mobile app, the canvas size is determined by the device’s size: 1334 × 750 pixels for the iPhone 6 and roughly 1280 × 720 pixels for Android. ![]() We spent weeks trying to figure out what canvas size would make sense for VR. "It turns out that UX and UI designers only need to focus on a certain portion of the total space."
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |