keynote使用手冊

Designing for AR is perhaps one of the most interesting applications of UX. As this incredible technology is being put to use for unique applications, UX Designers are tasked with creating user interfaces for an augmented experience, that does set guidelines at the moment. This requires a lot of design iterations and prototyping to get to a solution that works. But, how can you prototype for AR which exists in digital space only visible through the screens of our devices? Solutions like paper prototyping or digital prototypes do not assist designers in testing the interactions in a physical context where the application will be used. And physical context is a core essential for augmented reality.

為AR設(shè)計可能是UX最有趣的應(yīng)用程序之一。 由于這項令人難以置信的技術(shù)已用于獨(dú)特的應(yīng)用程序中，因此UX設(shè)計人員的任務(wù)是創(chuàng)建用戶界面以提供增強(qiáng)的體驗，此舉目前確實(shí)在制定準(zhǔn)則。 這需要大量的設(shè)計迭代和原型設(shè)計才能獲得有效的解決方案。 但是，如何為僅存在于我們設(shè)備屏幕上的數(shù)字空間中的AR原型？ 諸如紙張原型制作或數(shù)字原型之類的解決方案無法幫助設(shè)計人員在將使用該應(yīng)用程序的物理環(huán)境中測試交互。 物理環(huán)境是增強(qiáng)現(xiàn)實(shí)的核心要素。

How can you prototype for AR which exists in digital space only visible through the screens of our devices?

您如何為僅存在于我們設(shè)備屏幕上的數(shù)字空間中的AR原型？

My two amazing colleagues (Lidong Liu and Liang Ce) and I recently faced this very problem, when we were designing an application where a person could “try-out” different hairstyles on themselves using AR. Now, in this article, I don’t want to talk about our findings or the design process (which you can read about here). Rather, let’s focus on how we created prototypes for the project in a way that we could test them. I believe this method will help a lot of AR UX Designers out there.

我和我兩位出色的同事( Lidong Liu和Liang Ce )最近遇到了這個問題，當(dāng)時我們正在設(shè)計一個應(yīng)用程序，使人們可以使用AR在自己身上“嘗試”不同的發(fā)型。 現(xiàn)在，在本文中，我不想談?wù)撐覀兊陌l(fā)現(xiàn)或設(shè)計過程(您可以在此處閱讀)。 而是讓我們專注于我們?nèi)绾我詼y試原型的方式為項目創(chuàng)建原型。 我相信這種方法將幫助很多AR UX設(shè)計人員。

When the time arrived to create the user flow and UI for screens where the user can edit their hairstyle, we were stuck. We couldn’t find quick prototyping tools for design concepts that use augmented reality. Using low-fidelity wireframes did not provide enough physical context where we can hold it in a hand and actually look at our hair being digital edited. Tools like ARKit or ARCore would be time and resource-intensive for us to quickly test basic interactions and concept directions. We soon started using the front-facing camera and imagined interacting with the screen. We liked this idea and really wanted to try these interactions on top of the camera feed on the screen. That’s when we thought of an innovative way to create such prototypes.

當(dāng)創(chuàng)建用戶流程和用戶界面的用戶界面的時間到了，用戶可以在其中編輯發(fā)型時，我們陷入了困境。 我們找不到使用增強(qiáng)現(xiàn)實(shí)技術(shù)的設(shè)計概念的快速原型制作工具。 使用低保真線框無法提供足夠的物理環(huán)境，我們無法將其握在手中并實(shí)際上看著被數(shù)字編輯的頭發(fā)。 諸如ARKit或ARCore之類的工具將使我們花費(fèi)大量時間和資源來快速測試基本的交互作用和概念指導(dǎo)。 我們很快開始使用前置攝像頭，并想象了與屏幕的交互。 我們喜歡這個主意，非常想在屏幕上的攝像頭頂部嘗試這些交互。 那時我們想到了一種創(chuàng)新的方式來創(chuàng)建此類原型。

By simply using our smartphones and Keynote, we created an efficient and tactile prototyping method for AR applications. By recording ourselves through the camera, we can create prototypes that can provide a lot of insights. Here’s a 4 step process of how we used our creativity to create an A.R. prototype for our project.

通過簡單地使用智能手機(jī)和Keynote，我們?yōu)锳R應(yīng)用程序創(chuàng)建了一種高效的觸覺原型制作方法。 通過使用攝像機(jī)記錄自己，我們可以創(chuàng)建可以提供很多見解的原型。 這是一個四步過程，說明我們?nèi)绾卫米约旱膭?chuàng)造力為項目創(chuàng)建AR原型。

1.錄制主題的視頻 (1. Recording videos of the subject)

I had long hair at that time and I could style my hair in a lot of ways. You can also use wigs or make up for this part. We took multiple videos of me, changing my hairstyle for each one of them.

那時我的頭發(fā)很長，可以用很多方法來修飾頭發(fā)。 您也可以使用假發(fā)或彌補(bǔ)這一部分。 我們?yōu)槲遗臄z了多個視頻，并為每個視頻改變了發(fā)型。

A lot of videos, a lot of trials很多視頻，很多試驗

Note: Make a storyboard or a task list so that you can keep a check on the number of videos to create.

注意：制作情節(jié)提要或任務(wù)列表，以便您可以檢查要創(chuàng)建的視頻數(shù)量。

2.導(dǎo)出UI線框和組件 (2. Exporting UI wireframe and components)

After creating wireframes for our hairstyle editing concepts, we exported them as PNG images. It’s important to check which wireframe components are going to be on top of the camera feed. These components but have transparent areas in them through which the camera feed should be visible. In our case, we place a transparent area as shown in the image below.

為發(fā)型編輯概念創(chuàng)建線框后，我們將其導(dǎo)出為PNG圖像。 重要的是要檢查哪些線框組件將位于攝像機(jī)源上方。 這些組件但是在其中具有透明區(qū)域，通過這些區(qū)域應(yīng)該可以看到攝像機(jī)饋送。 在本例中，我們將放置一個透明區(qū)域，如下圖所示。

Components with transparent spots where the camera feed will be shown帶有透明斑點(diǎn)的組件將在其中顯示攝像機(jī)源

Note: Components and widgets that move on the wireframe will have to be exported separately.

注意：在線框上移動的零部件和小部件必須分別導(dǎo)出。

3.將視頻添加到UI (3. Adding video to the UI)

Now that we have the videos and the wireframes, it was time to put them together. But we did not use any design tools that would be a given at this point. Instead, we created the prototype in Keynote. Yes, Keynote, The presentation application on macOS! Create a new keynote on the app and change the size of the slide deck to fit your app wireframe. To do this, click on ‘Document’ in the top right of the screen and change the slide size. Now you can create a slide deck by adding all the wireframes in the required sequence. Also, here’s where you add the video as a background element and overlay the wireframe on the video.

現(xiàn)在我們有了視頻和線框，是時候?qū)⑺鼈兎旁谝黄鹆恕?但是，此時我們沒有使用任何特定的設(shè)計工具。 相反，我們在Keynote中創(chuàng)建了原型。 是的，主題演講，macOS上的演示應(yīng)用程序！ 在應(yīng)用程序上創(chuàng)建一個新的主題演講，并更改幻燈片的大小以適合您的應(yīng)用程序線框。 為此，請單擊屏幕右上方的“文檔”，然后更改幻燈片大小。 現(xiàn)在，您可以通過按所需順序添加所有線框來創(chuàng)建幻燈片。 另外，在這里您可以將視頻添加為背景元素，并將線框疊加在視頻上。

Using Keynote to add the video behind the UI components使用Keynote在UI組件后面添加視頻

Tip: If you have transitions or animations in your wireframes, you will have to create them again in Keynote. These can be tricky to do but you can have a good prototype using this method in most cases without the animations.

提示：如果在線框中有轉(zhuǎn)場或動畫，則必須在Keynote中再次創(chuàng)建它們。 這些操作可能很棘手，但是在大多數(shù)情況下，如果沒有動畫，您可以使用此方法獲得一個好的原型。

4.在手機(jī)屏幕上測試 (4. Testing on mobile screens)

A lot of you might not know this, but MacOS’s Keynote can show a slide deck on an iPhone. If the slide size is set to that of the iPhone, the keynote takes up the whole of the device screen. And by tapping on the screen, it would take us to the next slide deck. So, to test our concepts, I acted like interacting with the screen and trying out new hairstyles on myself. This simple prototype allowed us to iterate on different design concepts. If you don’t have macOS to use KeyNote or an iPhone, you can use Google Slides to have a similar effect.

很多人可能不知道這一點(diǎn)，但是MacOS的Keynote可以在iPhone上顯示幻燈片。 如果幻燈片大小設(shè)置為iPhone的大小，則主題演講將占據(jù)整個設(shè)備屏幕。 通過點(diǎn)擊屏幕，它將帶我們進(jìn)入下一個幻燈片。 因此，為了測試我們的概念，我的行為就像與屏幕進(jìn)行交互并在自己身上嘗試新的發(fā)型一樣。 這個簡單的原型使我們可以迭代不同的設(shè)計概念。 如果您沒有macOS來使用KeyNote或iPhone，則可以使用Google幻燈片來達(dá)到類似的效果。

A sample video is shown below. You can also watch our complete prototype video: https://youtu.be/TM59NZ32uzw

示例視頻如下所示。 您也可以觀看我們完整的原型視頻： https : //youtu.be/TM59NZ32uzw

Tip: Using methods like bodystorming or role-playing is a good way to utilize the prototypes based on your designs.

提示：使用諸如頭腦風(fēng)暴或角色扮演之類的方法是根據(jù)您的設(shè)計利用原型的好方法。

優(yōu)點(diǎn) (The pros)

EfficiencyThe process is very fast and ideal for prototypes. Every time we wanted to change something in the UI, we could make the changes in Figma, export the wireframes, put them in the slide deck and the prototype was ready.

效率該過程非常快速，非常適合原型。 每次我們想要在UI中進(jìn)行某些更改時，我們都可以在Figma中進(jìn)行更改，導(dǎo)出線框，將其放置在滑板中，然后原型就準(zhǔn)備好了。

ContextualCompared to paper or digital prototypes, this type of prototyping is much closer to the implementation of an AR application. By roleplaying the video in real scenarios, details about the user interactions become obvious which might not be discovered before.

語境相對于紙或數(shù)字樣機(jī)，這種類型的原型更接近的AR應(yīng)用程序的執(zhí)行。 通過在真實(shí)場景中對視頻進(jìn)行角色扮演，有關(guān)用戶交互的詳細(xì)信息將變得顯而易見，而以前可能不會發(fā)現(xiàn)。

缺點(diǎn) (The cons)

ScalabilityUsing this method for a single flow is easier to do as you only need to record the videos once. But, once you start using this method for an application that has a lot of user flows that require A.R. prototype, the list of videos, slide decks to be prepared becomes long very quickly. At that point, you will end up working on video recording and editing more than the design itself. This is a problem we faced as our project progressed.

可伸縮性對單個流使用此方法比較容易，因為您只需要錄制一次視頻。 但是，一旦開始對需要大量用戶原型的應(yīng)用程序使用這種方法，那么要準(zhǔn)備的視頻和幻燈片的列表就會非常長。 到那時，您將比設(shè)計本身更多地從事視頻錄制和編輯工作。 這是我們在項目進(jìn)行過程中面臨的問題。

User TestingThe application we created could not be user tested as it won’t make sense for a participant to look at my face while they are editing their hairstyle. Similarly, in prototypes where the participant's face has to be used in the app, it’s difficult to expand this method to people outside the team. I mean, yes we can record their videos and make the prototype but it defeats the purpose of a user test. Augmented Reality application for objects won’t be limited by this.

用戶測試我們創(chuàng)建的應(yīng)用程序無法進(jìn)行用戶測試，因為參與者在編輯發(fā)型時看著我的臉沒有意義。 同樣，在必須在應(yīng)用程序中使用參與者面部表情的原型中，很難將此方法擴(kuò)展到團(tuán)隊外部的人員。 我的意思是，是的，我們可以錄制他們的視頻并制作原型，但這違反了用戶測試的目的。 對象的增強(qiáng)現(xiàn)實(shí)應(yīng)用程序?qū)⒉皇艽讼拗啤?

So, that’s a technique we developed for prototyping for A.R. What do you think? Let me know in the comments if you liked it or if it can be improved in some ways.

因此，這是我們?yōu)锳R原型開發(fā)的一種技術(shù)，您認(rèn)為呢？ 在評論中讓我知道您是否喜歡它，或者可以通過某些方式對其進(jìn)行改進(jìn)。

翻譯自: https://uxdesign.cc/creating-prototypes-for-a-r-applications-26949ff02d4

keynote使用手冊

總結(jié)

以上是生活随笔為你收集整理的keynote使用手册_如何使用Keynote和智能手机为AR创建原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。