概念证明/第4部分 (PROOF OF CONCEPT / PART 4)

This is the final article of a four-part series. Please read Part 1, Part 2, and Part 3.

这是一个分为四个部分的系列文章的最后一篇。 请阅读 第1部分 ， 第2 部分 和 第3部分。

I’ve had a hell of a time trying to find a good metaphor to kick off this final article in my series on how to build a successful Proof of Concept. It had to be inspiring, it had to be pithy — void of platitudes or obvious conclusions. And honestly, I’ve failed. So here goes. Finalizing your high-fidelity Proof of concept has to do with perseverance, and the reward you gain when you stick with a grinding process to the end.

我经历了一段时间，试图找到一个很好的隐喻来开始我的系列中有关如何构建成功的概念证明的最后一篇文章。 它必须鼓舞人心，必须精妙-没有陈词滥调或显而易见的结论。 老实说，我失败了。 所以去。 最终确定您的高保真概念验证与毅力有关 ，而坚持到底的磨削过程将获得回报。

Many of life’s failures are people who did not realize how close they were to success when they gave up. — Thomas Edison (1874–1931)

人生中许多失败的人是谁并没有意识到他们放弃时离成功有多近。 -托马斯·爱迪生(1874–1931)

Sometimes it can feel like a confusing and endless grind to develop a user experience project. And when you’re building your proof of concept and following the steps it feels like you’re never going to get there. Just keep going. The process is your friend.

有时，开发用户体验项目会让人感到困惑而无休止。 而且，当您构建概念验证并按照步骤进行操作时，感觉就像永远无法到达那里。 尽管继续。 这个过程是你的朋友。

These steps will finalize your UX Proof of Concept and package it within your portfolio.

这些步骤将最终确定您的UX概念验证，并将其打包到您的产品组合中。

• Incorporate a consistent visual language, brand color scheme, and grid structure.

  整合一致的视觉语言，品牌配色方案和网格结构。

• Polish the design and user interface details with A/B testing and document the feedback.通过A / B测试完善设计和用户界面的详细信息，并记录反馈。
• Stage your project as a single scrolling case study in your portfolio.将项目作为项目组合中的单个滚动案例研究进行上演。

Over the past 15 years, I have helped hundreds of students develop interactive projects, mobile applications, and interactive art installations. Through this experience with my students, I have found that this process of creating a Proof of Concept is critical to the success of any interactive design project.

在过去的15年中，我已经帮助数百名学生开发了交互式项目，移动应用程序和交互式艺术装置。 通过与我的学生的经验，我发现创建概念证明的过程对于任何交互式设计项目的成功都是至关重要的。

To recap, I define a Proof of Concept as a comprehensive presentation that includes a persona, user story, flow diagram, and a step-by-step sequence of images that represents how a user moves through a particular interactive experience.

概括地说，我将概念验证定义为一个全面的演示，其中包括角色，用户故事，流程图以及代表用户在特定的交互体验中的移动方式的逐步图像序列。

Previously I talked about setting up the Proof of Concept, how to build the first draft in low-fidelity, moving to medium-fidelity, and prototype testing. Now let’s talk about how to take this medium-fidelity version up to high-fidelity.

之前，我曾讨论过如何设置概念验证，如何以低保真度构建第一稿，如何过渡到中保真度以及原型测试 。 现在让我们谈谈如何将这种中等保真度的版本提升到高保真度。

In this article we cover:

在本文中，我们涵盖：

1. Finalizing your High-fidelity Proof of Concept

   完成您的高保真概念验证

2. Creating A/B tests

   创建A / B测试

3. Conducting A/B tests and applying the feedback.

   进行A / B测试并应用反馈。

4. Staging your Proof of Concept in your portfolio.

   在您的投资组合中进行概念验证。

1.最终确定您的高保真概念验证 (1. Finalizing your High-fidelity Proof of Concept)

A high-fidelity Proof of Concept is part of a multi-stage process. Before you can go to high fidelity, you build versions in low-fidelity and medium-fidelity in order to focus on the overall organization, usability, and content. In low- fidelity we used simple shapes, and placeholder text and graphics, in greyscale only. In medium-fidelity, we polished our screen designs, introducing more detailed choices about the grid, visual hierarchy, typography, and content while still avoiding color.

高保真概念验证是多阶段过程的一部分。 在开始使用高保真度之前，请先以低保真度和中保真度构建版本，以便专注于总体组织，可用性和内容。 在低保真度下，我们仅使用灰度使用简单的形状以及占位符文本和图形。 在中等保真度下，我们改进了屏幕设计，在不避免出现颜色的情况下，介绍了有关网格，视觉层次结构，版式和内容的更多详细选择。

The high-fidelity Proof of Concept is a final version that supplements your case study for your portfolio. It’s characterized by clear labels, high-fidelity screen designs, and pixel-perfect formatting that fits the overall visual style of your portfolio.

高保真概念证明是最终版本，可为您的投资组合补充案例研究。 它的特点是标签清晰，高保真屏幕设计和像素完美的格式，适合您产品组合的整体视觉风格。

I recommend that the Proof of Concept be built as a multi-page Google Presentation because of the ease of sharing and editing. Other options include Keynote, Powerpoint, creating a scrolling website, or a PDF. It’s common to have a title page, user persona, story, and user flow diagram before the pages that have the screen designs.

我建议将概念验证构建为多页的Google Presentation，因为它易于共享和编辑。 其他选项包括Keynote，Powerpoint，创建滚动网站或PDF。 在具有屏幕设计的页面之前，通常有一个标题页，用户角色，故事和用户流程图。

Here is an example of a high-fidelity Proof of Concept designed by one of my previous students Alex Kim.

这是 我以前的一位学生 Alex Kim 设计 的高保真 概念验证 的示例 。

For students, your proof of concept is used to demonstrate your understanding of UI/UX design. In a work setting the high-fidelity Proof of Concept represents your presentation to internal teams or the client.

对于学生来说，您的概念证明可用来证明您对UI / UX设计的理解。 在工作环境中，高保真概念验证代表您向内部团队或客户的演示。

If you've been following the process you should arrive at a stage where you're confident that the overall user experience and basic screen designs are well tested and validated.

如果您一直在遵循该过程，则应该进入一个阶段，您可以确信总体用户体验和基本屏幕设计都经过了良好的测试和验证。

Now you're ready to move on to making your finalized high-fidelity screen designs. The goal of high-fidelity screen design is to represent the pages of your application as realistically as possible. This means applying final touches to the grid, typography, and adding color.

现在，您可以继续进行最终的高保真屏幕设计了。 高保真屏幕设计的目标是尽可能真实地呈现应用程序的页面。 这意味着对网格，版式进行最后的修饰，并添加颜色。

You can think of this as simulating the exact visual experience that the user will have. It’s as if they took a screen capture directly from the app. If you’ve ever designed a series of final mockups, that is equivalent to high-fidelity design.

您可以将其视为模拟用户将获得的确切视觉体验。 就像他们直接从该应用程序截屏一样。 如果您曾经设计过一系列最终的模型，那将等同于高保真设计。

The final screens can be designed in your design tool of choice is. This can include Sketch, Adobe XD, and other tools include Figma, Principle. You can even use Illustrator or Indesign but these tools are less common. It’s not the tool that you use but the quality and realism of the final screens that matter.

最终的屏幕可以在您选择的设计工具中进行设计。 这可以包括Sketch，Adobe XD，其他工具包括Figma，Principle。 您甚至可以使用Illustrator或Indesign，但是这些工具并不常见。 这不是您使用的工具，而是最终屏幕的质量和真实性至关重要。

2.创建A / B测试 (2. Creating A/B tests)

How do you put the final polish on your screen designs? An effective method is to use A/B testing, which works well in the final stages of your design because you're looking at more specific visual, navigation, and content details.

您如何在屏幕设计上进行最后的修饰？ 一种有效的方法是使用A / B测试 ，它在设计的最后阶段效果很好，因为您要查看的是更具体的视觉，导航和内容细节。

The core concept of A/B testing is to make slightly different versions of a single screen design, navigation elements, or content element and have user testers compare and contrast their effectiveness.

A / B测试的核心概念是使单个屏幕设计，导航元素或内容元素的版本略有不同 ，并使用户测试人员比较并对比其有效性。

This differs from prototype testing because you're not necessarily testing the continuous flow but rather individual details of the screen design. For instance, you might experiment with color, creating two versions of a single screen. The A version having a full background color and the B version using a simple grey background with an accent color. These variations represent the A and the B in the A/B test. You can compare any aspect of the visual design, layout, navigation, and content with the goal of identifying the most effective solutions.

这不同于原型测试，因为您不一定要测试连续流程，而是要测试屏幕设计的各个细节。 例如，您可能会尝试使用颜色，从而创建单个屏幕的两个版本。 A版本具有完整的背景颜色，B版本使用具有强调色的简单灰色背景。 这些变化代表A / B测试中的A和B。 您可以比较视觉设计，布局，导航和内容的任何方面，以找出最有效的解决方案。

How do you know what to A/B test? Start with big things like the color of backgrounds, the size of buttons, the location of navigation. Try variations of these to get closer to the most effective design. You’re not limited to testing only two variations. It’s fine to test three or more but at a certain point, too many options become confusing to your users.

您如何知道要进行A / B测试？ 从大的事情开始，例如背景的颜色，按钮的大小，导航的位置。 尝试这些方法的变体，使其更接近最有效的设计。 您不仅限于仅测试两个变体。 可以测试三个或三个以上，但是在某些时候，太多的选择会让您的用户感到困惑。

What are the methods used for A/B testing? The simplest method is to show the two different screens side-by-side on a monitor and ask your tester for feedback. This can be done easily in person, or in an online video conference. In my classes, we create a survey using a Google form that shows images of A and B variations, asking a series of questions to be answered by the user tester. Another popular online survey tool is SurveyMonkey

A / B测试使用什么方法？ 最简单的方法是在监视器上并排显示两个不同的屏幕，并要求测试人员提供反馈。 可以亲自或在线视频会议轻松完成。 在我的课程中，我们使用Google表单创建一个调查，该调查显示了A和B变体的图像，并提出了一系列要由用户测试人员回答的问题。 另一个流行的在线调查工具是SurveyMonkey

While there’s no limit, I think it’ best to start with three A/B tests, see what the feedback is and move on from there. Often your users will make suggestions and observations that lead to the next set of A/B tests.

虽然没有限制，但我认为最好从三个A / B测试开始，看看反馈是什么，然后继续进行。 通常，您的用户会提出建议和观察，以进行下一组A / B测试。

3.进行A / B测试并应用反馈 (3. Conducting A/B tests and applying the feedback)

Once you've created your tests, you now need to get them in front of user testers. In an in-person classroom or work setting, you can show your designs directly to people. If you're working remotely you can send your survey link to your testers or set up a video conference session.

创建测试后，现在需要使它们在用户测试人员面前。 在面对面的教室或工作环境中，您可以直接向人们展示您的设计。 如果您在远程工作，则可以将调查链接发送给测试人员或设置视频会议会话。

If you're testing in-person, it’s important to take notes and document the test with a photo. For remote testing, as your survey results come back you’ll start to see trends developing, showing the user testers' preferences. Ideally, your feedback will show clear results. For instance, seventy-five percent of your respondents preferred version B, etc. This is a clear indicator of what you need to change in your screen design in order to improve it. Take a look at the results of your A/B testing and use them as a guideline to make improvements to your high-fidelity design, and continue testing them.

如果您要面对面测试，请务必记录笔记并用照片记录测试。 对于远程测试，当您的调查结果返回时，您将开始看到趋势的发展，显示用户测试人员的偏好。 理想情况下，您的反馈将显示清晰的结果。 例如，百分之七十五的受访者更喜欢B版本，这清楚地表明您需要更改屏幕设计以进行改进。 查看您的A / B测试结果，并以此为指导对您的高保真设计进行改进，并继续进行测试。

But sometimes you’ll get a more even split with conflicting feedback. If this happens don’t be discouraged. It means you need to review your test to see if there’s anything confusing. Look at the way you’ve worded your test. You might need to make the test simpler by focusing on one single element or change. You also can make the comparisons more extreme.

但是有时您会因反馈冲突而变得更加分裂。 如果发生这种情况，不要气.。 这意味着您需要检查测试以查看是否有任何令人困惑的地方。 看看测试措辞的方式。 您可能需要通过专注于单个元素或更改来简化测试。 您还可以使比较更加极端。

Throughout the testing process, you should be documenting the feedback by creating presentation slides showing key results. I’ve seen students cut-and-paste pie charts, graphs, and other feedback from their google form survey results into a series of slides. These presentation slides do not go in the Proof of Concept. Instead, you should hold on to them in a separate document. Later, you can put some of these slides into your full portfolio case study in order to document this final stage of your design process.

在整个测试过程中，您应该通过创建展示关键结果的演示幻灯片来记录反馈 。 我已经看到学生将他们从Google表单调查结果中粘贴并粘贴的饼形图，图形和其他反馈放入一系列幻灯片中。 这些演示幻灯片不在概念证明中。 相反，您应该在单独的文档中保留它们。 以后，您可以将其中一些幻灯片放到完整的产品组合案例研究中，以记录设计过程的最后阶段。

How do you know your done A/B testing? The real answer is that you're never done. You can always improve your project. However, at some point, you need to move the process forward and commit to a series of high-fidelity screens

您如何知道已完成的A / B测试？ 真正的答案是，您永远不会完成。 您可以随时改善您的项目。 但是，在某些时候，您需要将过程向前推进并进行一系列高保真屏幕处理

This final set of high-fidelity screen designs are inserted into your Proof of Concept. In addition to the final screen designs, you also want to fine-tune the typography of your labeling, text descriptions, and any real-world images/illustrations throughout the presentation.

这套最终的高保真屏幕设计已插入到概念验证中。 除了最终的屏幕设计之外，您还希望在整个演示过程中微调标签的字体，文字说明以及任何实际的图像/插图。

4.在您的投资组合中进行概念验证 (4. Staging your Proof of Concept in your portfolio)

The final Proof of Concept is a critical element for any project in your portfolio. The vast majority of portfolios include several projects, three to five is ideal. For each project, you create a case study which is a comprehensive collection of your research, process and includes your final Proof of Concept.

最终的概念证明是您投资组合中任何项目的关键要素。 绝大多数投资组合包括几个项目，三到五个是理想的。 对于每个项目，您都会创建一个案例研究，该案例研究是您的研究，过程的全面集合，其中包括最终的概念证明。

Most case studies have the Proof of Concept at or near the end of the case study. This allows for a chronological description. Another school of thought says to put the proof of Concept at the beginning in order to get right to the point. It depends on the audience and how much time you have and how many pieces you want to show.

大多数案例研究在案例研究结束时或接近结束时都有概念证明。 这允许按时间顺序进行描述。 另一个思想流派说，要把概念的证明放在开始处，以便弄清重点。 这取决于听众，您有多少时间以及要展示多少件作品。

A case study is important because it shows your full research, design, and testing process. It confirms that you actually did the project rather than just using a premade template. You can think of it as “showing your work” for a complex math problem. You can’t just show the solution, you have to show all the steps it took to get there.

案例研究很重要，因为它可以显示您的完整研究，设计和测试过程。 它确认您确实在做项目，而不仅仅是使用预制模板。 您可以将其视为针对复杂数学问题的“展示您的作品”。 您不仅可以展示解决方案，还必须展示实现该解决方案所需的所有步骤。

A case study is often represented as a single, scrolling webpage that includes a title, hero image, background research, design process, testing documentation, and a final high-fidelity Proof of Concept.

案例研究通常表示为一个滚动的网页，其中包括标题，英雄形象，背景研究，设计过程，测试文档以及最终的高保真概念证明。

The most successful case studies have a consistent overall visual style, approach to typography, content detail, and animations. These considerations are called staging.

最成功的案例研究具有一致的整体视觉风格，排版方法，内容细节和动画。 这些注意事项称为暂存。

Staging refers to the design and format of the case study. If you’ve ever seen a really nice layout in 3D isometric space with a soft gradient background, that is an example of staging. You can think of staging as the setting and framing of the content and screens of your project. There are staging templates available in Adobe Photoshop and other imaging tools.

分期是指案例研究的设计和格式。 如果您曾经在3D等距空间中看到过带有柔和渐变背景的非常不错的布局，那就是分段的一个示例。 您可以将分段视为项目内容和屏幕的设置和框架。 在Adobe Photoshop和其他成像工具中有可用的登台模板。

You want to shoot for only the amount of staging that you need. Again, less is more. Staging can get quickly out of hand when you have too many varieties of angles and backgrounds, and other superfluous graphics that distract, or worse, attempt to cover up problems inside your design.

您只想拍摄所需的舞台演出即可。 同样，少即是多。 当角度和背景的种类繁多，以及其他多余的图形会分散(或更糟的是)试图掩盖设计中的问题时，过渡可能会很快失去控制。

Think of your portfolio as your storefront. When you go into the Apple store, there’s a very careful and comprehensive approach to the design, lighting, displays, and structure of the space. Paying careful attention to the staging of case studies in your portfolio is the equivalent. Packaging your final Proof of Concept in a well-staged case study is critical to the success of your portfolio and career as a designer, and it’s possible to achieve a strong portfolio even if you don’t have direct professional experience.

将您的投资组合视为店面。 当您进入Apple Store商店时，对于空间的设计，照明，显示和结构有一种非常仔细和全面的方法。 仔细注意案例研究在您的投资组合中的阶段是等效的。 在一个分阶段进行的案例研究中打包最终的概念证明对于您的投资组合和作为设计师的事业取得成功至关重要， 即使您没有直接的专业经验 ，也有可能获得强大的投资组合 。

摘要 (Summary)

In this final article of the series, we finalized our screen designs and carefully presented them in a polished Proof of Concept. We made minor visual improvements to the visual design and UI of our screen designs using A/B testing methods and applied the feedback from user testers. With this final Proof of Concept in hand, we considered the staging of our case study and consistently implemented it within our portfolio.

在本系列的最后一篇文章中，我们完成了屏幕设计的定稿，并在优美的概念验证中仔细地介绍了它们。 我们使用A / B测试方法对屏幕设计的视觉设计和UI进行了较小的视觉改进，并应用了用户测试人员的反馈。 有了最终的概念验证，我们考虑了案例研究的阶段性，并在我们的产品组合中始终如一地实施了该案例研究。

I hope this model for creating a Proof of Concept has helped you to effectively present your user experience project. I will continue to fine-tune this process with my students and would love to hear your feedback about this process and your experiences. Just like the user experience projects we work on, there’s always room for improvement and I welcome your feedback and suggestions.

我希望这种用于创建概念证明的模型能够帮助您有效地展示您的用户体验项目。 我将继续与学生们一起微调此过程，并希望听到您对这一过程和您的经历的反馈。 就像我们正在进行的用户体验项目一样，总是有改进的余地，我欢迎您的反馈和建议。