索尼vgn ux拆屏幕_UX最佳实践：如何设计可扫描的应用程序屏幕截图

索尼vgn ux拆屏幕

by Girish Rawat

由吉里什·拉瓦特(Girish Rawat)

如何设计可扫描的应用程序屏幕截图 (How to Design Scannable App Screenshots)

重新设计HeyDoctor的App Store屏幕截图 (Redesigning HeyDoctor’s App Store Screenshots)

Let’s play a game. Pick an app on your phone that you really like. You are the creator of this app and are looking to raise money from investors. You have a minute to pitch your app to VCs. Money is up for grabs but only if you can convince them in 60 seconds. How do you do it? Do you describe what the app does? Do you tell how the app is unique compared to its competitors? Do you show how good the user experience is?

来玩个游戏。 在手机上选择一个您真正喜欢的应用。 您是这个应用程序的创建者，正在寻求从投资者那里筹集资金。 您有时间向VC推介您的应用。 金钱是可以争夺的，但前提是您可以在60秒内说服他们。 你怎么做呢？ 您是否描述了该应用程序的功能？ 与竞争对手相比，您能说出这款应用的独特之处吗？ 您显示用户体验如何吗？

It takes an average of 7 seconds for a user on the App Store to make up their mind whether they want to download your app or not. A research study on download decisions involving 25,000 visitors and 10,000 installs rated screenshots as the second most reason to install, with rating taking the top spot.

App Store上的用户平均要花7秒钟才能决定是否要下载您的应用。 一项涉及25,000个访问者和10,000个安装的下载决策的研究报告将屏幕截图作为第二大安装原因，其中排名最高。

We discovered that the average time people spend on a store listing is 7 seconds. The fact is, the vast majority of people leave the page even sooner. Engaged users hang around for a little longer, but they all follow the same process: check the icon, view the first two screenshots, and scan the first line of the app description — Peter Fodor, Why 7 seconds could make or break your mobile app

我们发现人们在商品详情上花费的平均时间为7秒。 事实是，绝大多数人甚至更快地离开了页面。 敬业的用户闲逛了一段时间，但是他们都遵循相同的过程：检查图标，查看前两个屏幕截图以及扫描应用说明的第一行 -Peter Fodor， 为什么7秒钟会造就或破坏您的移动应用

Screenshots are a mirror of your app’s user stories and are reflective of its user experience. I studied the top 100 apps and their screenshots using the data gathered by the good people over at Incipia. I will be referencing key findings from multiple studies here.

屏幕快照是您应用程序用户故事的一面镜子，反映了其用户体验。 我使用Incipia的优秀人员收集的数据研究了前100个应用程序及其屏幕截图。 我将在这里引用多项研究的主要发现。

应用重点：HeyDoctor (App in focus: HeyDoctor)

HeyDoctor is an app that allows users to get medical prescriptions online without the need to visit a primary care doctor. HeyDoctor can prescribe and refill prescriptions for medicines ranging from birth control, hair growth to urinary tract infection treatments, lab reports and more. You can also get treatment for primary care cases like acne treatment, UTI, cold sore treatment and more. HeyDoctor’s mobile app has been well received in the App Store with 122 reviews rating it at 4.7 stars.

HeyDoctor是一款应用程序，可让用户在线获取医疗处方，而无需拜访初级保健医生。 HeyDoctor可以开处方和补充处方药，从节育，头发生长到尿路感染治疗，实验室报告等等。 您还可以针对粉刺治疗，泌尿道感染，唇疱疹治疗等初级保健病例获得治疗。 HeyDoctor的移动应用程序在App Store中广受好评，有122条评论将其评为4.7星。

We will be redesigning HeyDoctor’s screenshots and learning about scannable screenshots.

我们将重新设计HeyDoctor的屏幕截图，并了解可扫描的屏幕截图。

免责声明 (Disclaimer)

Please note that I don’t work at HeyDoctor and views expressed in this case study are strictly my own. Unlike designers, product managers and everyone responsible for making key decisions involving design working at HeyDoctor, I do not have access to analytics on its user base and may not be looking at the complete picture. Design decisions can be based off on business objectives, resource prioritization or technical constraints. Hence any unsolicited case study is not exhaustive, and I am certainly not suggesting that HeyDoctor abandon their current screenshots and adopt my redesign.

请注意，我不在HeyDoctor工作，本案例研究中表达的观点完全是我自己的观点。 与设计师，产品经理以及负责在HeyDoctor上进行涉及设计工作的关键决策的所有人不同，我无法访问其用户群上的分析工具，并且可能无法查看完整情况。 设计决策可以基于业务目标，资源优先级或技术约束。 因此，任何未经请求的案例研究都不是详尽无遗的，而且我当然不建议HeyDoctor放弃他们当前的屏幕截图并采用我的重新设计。

目前的设计 (The Current Design)

We are going to be working on HeyDoctor’s iOS app. Here’s what the existing screenshots look like:

我们将致力于HeyDoctor的iOS应用。 现有屏幕截图如下所示：

It follows the standard title and subtitle setup which does a good job of explaining the app’s user stories. We are not interested in redesigning the brand or the UI, so we will try to keep them consistent in our redesign.

它遵循标准标题和字幕设置，可以很好地解释应用程序的用户故事。 我们对重新设计品牌或用户界面不感兴趣，因此我们将在重新设计中尽量使它们保持一致。

用户故事 (User Stories)

Before we dig in and start making visual changes, we need to learn what users install HeyDoctor for and what they are searching for when they discover this app.

在深入研究并开始进行视觉更改之前，我们需要了解用户安装HeyDoctor的目的以及发现此应用程序时要搜索的内容。

1. Get Prescriptions and Refills. Users are looking to find an easy way to get their prescriptions and refills online without the need to visit a doctor.

   获取处方和笔芯。 用户希望找到一种简便的方法来在线获取处方和笔芯，而无需去看医生。

2. Get Treatment for illness. Users are searching how to get treatment for their illness online.

   接受疾病治疗。 用户正在搜索如何在线治疗疾病。

3. Talk to a primary care physician. Users want to talk to a doctor but they probably cannot visit one at the moment due to time, financial or commute constraints.

   与初级保健医师交谈。 用户想与医生交谈，但由于时间，经济或通勤限制，他们目前可能无法就诊。

4. Do all of these without involving any insurance paperwork. Users don’t want to involve their medical insurance because either they don’t have one or their copay is too high.

   在不涉及任何保险文书的情况下完成所有这些工作。 用户不想参加医疗保险，因为他们没有医疗保险或共付额太高。

屏幕截图或缩略图？ (Screenshots or Thumbnails?)

Screen sizes have grown by 72% since the original iPhone launched with the 3.5-inch screen. The average screen size of smartphones sold in the US in 2018 is 5.5 inch. Screens are bigger than ever and product designers are constantly evolving to make use of this extra available space. One would think that bigger screens would entice designers to put more text captions on screenshots. But what we are observing is quite the opposite.

自从最初的iPhone配备3.5英寸屏幕以来，屏幕尺寸已增长了72％。 2018年在美国销售的智能手机的平均屏幕尺寸为5.5英寸。 屏幕比以往任何时候都大，产品设计师不断发展以利用这一额外的可用空间。 有人会认为，更大的屏幕会吸引设计师在屏幕截图上放置更多的文本标题。 但是我们观察到的却恰恰相反。

We consistently observed that fewer than 4% of users looking for an app enlarge portrait screenshots, and only 2% enlarged landscape screenshots. For gamers, it’s even less at just 0.5%. This is probably because the gameplay is usually clear enough even from thumbnails —Peter Fodor

我们始终观察到，在寻找应用程序的用户中，只有不到4％的用户放大了纵向屏幕截图，而只有2％的用户放大了横向屏幕截图。 对于游戏玩家来说，它甚至仅为0.5％。 这可能是因为游戏玩法通常即使从缩略图中也足够清晰— Peter Fodor

Less than 4% of people coming to your app page tap on your screenshots.

在您的应用页面上点击屏幕截图的人不到4％。

Designers have started to pay heed to this metric with a lot of apps treating their screenshots as thumbnails to peek at instead of something to tap into. Users in 2016 could be expected to tap the screenshot to read text in it. But with the new app store layout and bigger screens, users are not tapping on your screenshots anymore.

设计师已经开始关注此指标，许多应用程序将其屏幕截图视为缩略图，而不是挖掘内容。 可能希望2016年的用户点击屏幕截图以阅读其中的文本。 但是随着新的应用商店布局和更大的屏幕，用户不再需要点击您的屏幕截图。

Let’s look at some screenshots redesign from 2016 to 2018. Notice how almost every one of them have fewer words and bigger fonts.

让我们看一下从2016年到2018年重新设计的一些屏幕截图。请注意，几乎每个屏幕截图都有更少的单词和更大的字体。

魔术数字2 (The Magic Number 2)

78 of the top 100 apps have five screenshots, 13 apps have four screenshots, 6 apps have three screenshots and 3 only have two. As a developer, you would think to go for five screenshots because more content is better, right? Wrong.

前100个应用程序中的78个具有五个屏幕截图，13个应用程序具有四个屏幕截图，6个应用程序具有三个屏幕截图，3个只有两个屏幕截图。 作为开发人员，您会考虑使用五个屏幕截图，因为内容越多越好，对吧？ 错误。

Only 9% of users scroll past the first two screenshots. Landscape screenshots perform worse at 5%. This makes it imperative to lure the user in the first two screenshots itself. Tell your users what your app does in the first screen and expand upon that in the corresponding screenshots.

只有9％的用户滚动到前两个屏幕截图。 横向屏幕截图的效果较差，为5％。 因此必须在前两个屏幕截图中吸引用户。 在第一个屏幕上告诉您的用户您的应用程序的功能，然后在相应的屏幕截图中进行扩展。

The findings of our research make it clear that you HAVE to explain the core benefit of your app in first two (iOS10, Google Play), or three (iOS11) screenshots if you are using portrait images. If you really want to use a landscape image, you’ve got just one — Peter Fodor

我们的研究结果清楚地表明，如果您使用的是纵向图片，则必须在前两个(iOS10，Google Play)或三个(iOS11)屏幕截图中说明应用的核心优势。 如果您真的想使用风景图像，则只有一个-Peter Fodor

Let’s examine the first two screenshots of some popular apps.

让我们检查一些流行应用程序的前两个屏幕截图。

突出显示的UI元素 (Highlighted UI Elements)

Users glancing at your screenshots are trying to gauge the functionalities of your app. Text captions help them understand the context behind the screens. Designers are making it even easier for users by highlighting UI elements that the text caption is trying to explain.

浏览您的屏幕截图的用户正在尝试评估您的应用程序的功能。 文字字幕可帮助他们了解屏幕背后的上下文。 设计人员通过突出显示文本标题试图解释的UI元素，使用户更加容易。

Let us look at some examples.

让我们看一些例子。

学问 (Learnings)

1. Explain the most important user story of your app in the first two screenshots. Only 9% of users coming to your app listing will scroll past the first two screenshots.

   在前两个屏幕截图中解释您的应用程序最重要的用户故事。 进入您的应用列表的用户中，只有9％的用户会滚动浏览前两个屏幕截图。

2. Increase the font size and cut down on text. With bigger displays, users are getting conditioned to scan and glance the screenshot instead of tapping on it and reading. Less than 4% of users will tap on your screenshots to read it.

   增加字体大小并减少文本。 对于更大的显示屏，用户将习惯于扫描和浏览屏幕截图，而不是轻按并阅读屏幕截图。 不到4％的用户会点击您的屏幕截图进行阅读。

3. Highlight UI elements that represent text captions. It makes scanning the screenshots easier and improves your screenshot’s glance-ability.

   突出显示代表文本标题的UI元素。 它使扫描屏幕截图更加容易，并提高了屏幕截图的扫视能力。

Now that we know a little about how to make screenshots more readable, let’s start applying our key findings to HeyDoctor’s screenshots.

现在我们对如何使屏幕截图更具可读性有所了解，让我们开始将主要发现应用于HeyDoctor的屏幕截图。

步骤1：将iPhone更新到新一代 (Step 1: Update the iPhone to the newer generations)

HeyDoctor’s screenshots is using the older generation of iPhones. While not a deal breaker, I like my iPhones like my apps. Updated and on fleek (sorry).

HeyDoctor的屏幕截图使用的是旧版iPhone。 虽然不是交易破坏者，但我喜欢我的iPhone和我的应用程序。 更新，并在fleek (抱歉)。

步骤2：减少文字内容，使其更具可读性 (Step 2: Cut down on text and make it more readable)

We will try making the captions a bit more readable by stating the user stories in a concise format. We will also be doing away with the subtitle and descriptions to accommodate the bigger titles.

我们将以简洁的格式说明用户故事，以使标题更具可读性。 我们还将取消字幕和说明，以适应更大的标题。

The third screenshot shows the app’s settings page while its caption is talking about how the app doesn’t require an insurance policy. Let’s replace it with a more relevant screen. I’m going to replace it with the first screen you see when you try to get prescription in the app, indirectly implying that you don’t need an insurance to get started.

第三个屏幕截图显示了该应用程序的设置页面，同时标题说明了该应用程序不需要保险单的方式。 让我们用一个更相关的屏幕替换它。 我将用尝试在应用中获取处方时看到的第一个屏幕替换它，间接暗示您不需要保险就可以开始使用。

步骤3：突出显示相关的UI元素 (Step 3: Highlight relevant UI Elements)

As we learned above, highlighting relevant UI elements that references the captions makes them more glanceable and readable. It also helps the user to scan the screenshot more easily.

如上所述，突出显示引用标题的相关UI元素可以使标题更加清晰易读。 它还可以帮助用户更轻松地扫描屏幕截图。

聊天界面 (Chat UI)

Let us see how Tinder highlights their chat UI:

让我们看看Tinder如何突出显示其聊天UI：

It cleverly uses profile pictures and chat bubbles with brand elements like colors to mimic its real chat UI.

它巧妙地使用个人资料图片和带有诸如颜色之类的品牌元素的聊天气泡来模仿其真实的聊天界面。

Let us try doing something similar:

让我们尝试做类似的事情：

Let us insert this asset into the screenshot:

让我们将此资产插入屏幕截图：

I tried to integrate HeyDoctor’s brand into the chat bubbles. I did not feel the need to include profile pictures because doctors that you talk to in the app don’t have a profile picture.

我试图将HeyDoctor的品牌整合到聊天气泡中。 我不认为需要包含个人资料图片，因为您在应用中与之交谈的医生没有个人资料图片。

卡和阴影 (Cards and Drop Shadow)

Let us have a look at how Uber highlights their UI Elements.

让我们看一下Uber如何突出他们的UI元素。

I love this minimal way of highlighting UI elements with cards and drop shadows. We are going to use this style to emphasize some elements in our screenshots.

我喜欢这种用卡片和阴影突出显示UI元素的最小方法。 我们将使用这种样式来强调屏幕截图中的某些元素。

I decided to shift captions below the phone so the user sees the highlighted UI element before they read the caption.

我决定将字幕移动到手机下方，以便用户在阅读字幕之前看到突出显示的UI元素。

步骤4：外观变更 (Step 4: Cosmetic Changes)

We have made multiple changes to our screenshots to optimize for scannability. Now let us make it look better. Good visual design can be an incredible lure for users and it shouldn’t be ignored while redesigning screenshots.

我们对屏幕截图进行了多项更改，以优化可扫描性。 现在让我们使其看起来更好。 良好的视觉设计对于用户来说可能是一个难以置信的诱惑，并且在重新设计屏幕截图时不应忽略它。

添加透视屏 (Add Perspective Screens)

Isometric screens look modern and polished. You can see isometric phones almost everywhere from Apple’s perfectly rendered product commercials to highly polished mockups on Dribble (crazy to think that Dribble was originally started as a website to share low level WIP design prototypes!)

等距屏幕看起来很现代且抛光。 从Apple完美渲染的产品广告到Dribble上高度抛光的模型，几乎到处都可以看到等距手机(疯狂地认为Dribble最初是作为共享低级WIP设计原型的网站而成立的！)

I made a couple of perspectives from the screens available to us.

我从屏幕上提供了一些观点。

I will choose the first perspective mockup and split it into two screenshots because we only have 3 screenshots at the moment and we can add up to 5 in the App Store.

我将选择第一个透视图样机并将其分成两个屏幕截图，因为目前我们只有3个屏幕截图，并且在App Store中最多可以添加5个屏幕截图。

I added a caption to the first page — “Your personal doctor”. Easy to read, summarizes what the app does, and concise.

我在首页上添加了标题-“您的私人医生”。 易于阅读，总结了应用程序的功能，并且简洁明了。

更改背景渐变 (Change Background Gradient)

The contrast between the background and the foreground is a bit too harsh for me right now. Let us change it to a lighter shade of blue.

现在，背景和前景之间的对比度对我来说太苛刻了。 让我们将其更改为浅蓝色。

We will be making a gradient with the new colors that we choose.

我们将使用我们选择的新颜色进行渐变。

Let’s see how this looks in our screenshots.

让我们在截图中看一下它的外观。

I’m going to add some ridges just below the text so it acts as a differentiator between the text and the phone.

我将在文本下方添加一些脊线，以使其充当文本和电话之间的区分符。

I was able to snag a cool isometric vector from the web. Let’s use it to make the last screenshot.

我能够从网上找到一个很酷的等距向量。 让我们用它来制作最后的屏幕截图。

最终设计 (Final Designs)

之前 (Before)

后 (After)

结论 (Conclusion)

All in all, we made just over four small, iterative tweaks. But the final result are screenshots that are easy to glance over and feel modern. Moreover, none of these tweaks required an innate artistic skill. Studying a handful apps in the App Store helped us to know what issues to look for.

总而言之，我们进行了四次以上的小迭代调整。 但是最终结果是易于浏览并具有现代感的屏幕截图。 而且，这些调整都不需要先天的艺术技巧。 在App Store中研究了少数几个应用程序有助于我们了解要查找的问题。

Thanks for reading! This was a fun weekend project for me and I enjoyed writing about it here. Hopefully, this post gave you an insight on the state of screenshots in the app store. Feel free to provide any feedback or ask any questions that you have in the comments section below.

谢谢阅读！ 对我来说，这是一个有趣的周末项目，我喜欢在这里写有关它的内容。 希望本文能使您对应用程序商店中的屏幕快照状态有所了解。 欢迎在下面的评论部分中提供任何反馈或提出任何问题。

翻译自: https://www.freecodecamp.org/news/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e/

索尼vgn ux拆屏幕