优秀产品页设计案例分享，探析如何抓住用户注意力
jopen 12年前
<div id="news_body"> <p> 本文是对外文《<a href="/misc/goto?guid=4958348626624057450">Better Product Pages: Turn Visitors Into Customers</a>》的翻译，编译内容如下：</p> <p> <strong>展示产品、服务的方法是其获得成功的关键。在 Web 上，你留给用户的第一印象是至关重要的。</strong></p> <p> 如果有人访问你的网站，一定要吸引他的注意力。在你设法吸引住他们的注意力后，你需要在几秒内介绍完你的产品。根据近几年来 Google Analytics 基准化报告，美国网站的 <a href="/misc/goto?guid=4958348627428577133">Bounce Rate（蹦失率）高达 42.5%</a>。如果访问者不理解你所提供的，以及它的工作原理，他们就会迅速失去兴趣。向他们展示你的产品，让他们明白该产品正是他们所想要的，它很有用，且可以为他们的生活带来某种价值。</p> <p> 成功的产品展示可以实现该目的。本文将讲述产品展示的不同方面，并举例说明如何利用它们来展示你产品的优点。目的在于对不同元素进行总体的描述，以使产品页更加成功。</p> <p> <strong>吸引注意力</strong></p> <p> 在让任何人相信你产品质量之前，你首先应该让人们注意到该产品。无论人们是否在寻找你的产品，一旦你获得了他们的注意力，你就在激发他们兴趣及促使他们订购方面占据了有利位置。抓住用户眼球，你可以做的事情仅受限于你的创造力。下面将列举三个我认为非常有效的例子。</p> <p> <strong>● 脱颖而出</strong></p> <p> 无数企业和创新部门的自由创作者，都会针对他们的服务和先进的工作提供某种信息。通常，你在浏览中会发现大量枯燥的屏幕截图，甚至还伴随着枯燥的介绍信息。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/658f15a5385a0b65bc618eced5e6f91b.jpg" width="500" height="220" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348628220801990">Chris Bower</a></p> <p> Web 设计师 <a href="/misc/goto?guid=4958348628220801990">Chris Bower</a> 采用一种独特的、吸引人的方法来展示他的专业技能。其作品在各种不同设备上专业的展示完成了三件事：在一个洁净的网站上，它极度引人注目；它表现出了设计 师的水平，因为它看起来相当专业；它传达了 Chris 可为任何你能想得到的设备设计作品。只是在他首页一瞥，你就知道是否要进入该网站。</p> <p> <strong>● 给你的访问者以惊喜</strong></p> <p> 吸引注意力的另一个优秀的方法是给访问者以惊喜。向他们提供他们意料之外的事；让他们停下来，去弄明白他们所看到的。我们每天生活在熟悉的环境中，那些出乎意料的事自然会吸引我们的注意力。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/d5241e2e58002e0712ec09a5520c77c6.jpg" width="500" height="254" /></p> <p style="text-align:center;"> 图片来自于：<a href="http://www.nike.com/nikeos/p/nike/de_DE/?&ref=">Nike</a></p> <p> <a href="http://www.nike.com/nikeos/p/nike/de_DE/?&ref=">Nike</a> 以翅膀的形状展示了它的新款运动鞋。对多种颜色鞋的排列及中间颜色的淡出都会让人们再去仔细观看一番。设计在视觉上不仅美观，还能吸引人的注意力，因为人们不确定他们看到的是翅膀？是鞋？或者两者都是。</p> <p> <strong>● 人们喜欢幽默</strong></p> <p> 凭借功能、受欢迎度以及独特的外观，有很多产品较易促销。但对于其他一些产品来说，市场营销很难从产品本身获益，这就需要更有创造性的方法。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/7350fc9db97c6b6e20b153f49c7853ed.jpg" width="500" height="242" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348631265835862">Evian</a></p> <p> 其中的一个案子就是 <a href="/misc/goto?guid=4958348631265835862">Evian</a> 品牌。平凡的水又如何吸引人的注意力呢？实际上很简单。提出一个和产品相关的口号，如“活出年轻(Live young)”，然后通过一些幽默的方法把这一口号转化为视觉上的运动。几年前，Evian 设计的有趣的运动视频像病毒一样迅速流传开来——事实证明这一独特的方法收到了很好的效果。</p> <p> <strong>解释产品</strong></p> <p> 产品展示方式影响着人们对你及产品的第一印象——包括他们怎么看你，以及是否理解产品的特性。在线服务和新产品尤其需要描述清楚，以便访问者可以很好地理解他们。尤其是，如果用户不知道你的产品对他们有什么用，他们就不会为它付费。</p> <p> <strong>● 介绍产品</strong></p> <p> 为了让人们轻松使用各种先进技术（比如互联网），进行了大量发明创造。现在任何成熟的想法都能被实现成产品或服务，但其中有一些因为很抽象，需要认真仔细地解释。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/132a0a133c8671bfd2d02eaf8d5bcac7.jpg" width="500" height="324" /></p> <p style="text-align:center;"> 图片来自于：<a href="http://tickera.com/#&panel1-1">Tickera</a></p> <p> <a href="http://tickera.com/#&panel1-1">Tickera</a> 的员工意识到需要认真解释一下他们的系统。他们的首页很简单，仅专注于产品与主要功能。售票服务并不是一个物理产品，他们在解释该服务上做出了很大努力，将它通过漂亮、值得依赖的可视化图像展现出来。即便只看一眼，你也可以知道 Tickera 是干什么的。</p> <p> <strong>● 它是如何进行工作的？</strong></p> <p> 产品展示方式的另一方面是解释它如何工作。基本上，你可以通过操作来展示产品的工作方式。显示软件的屏幕截图与在它可工作的设备上进行展示有很大的不同。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/6a447bdfffc87b28c1f4b38f3343db7d.jpg" width="500" height="333" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958319161348167306">Square</a></p> <p> <a href="/misc/goto?guid=4958319161348167306">Square</a> 在展示产品、解释它是什么以如何工作方面，做得很漂亮。其高分辨率的图片展示了连接信用卡并通过它付款的过程是多么的简单。你所需要的只是一个 Square card reader（Square 信用卡读卡机），一个 iPhone 和该款应用——无需其他语言来表达该产品的价值。</p> <p> <strong>● 让人们相信他们需要你的产品</strong></p> <p> 这种情况发生于当人们理解了你的产品，但他们并不认为该产品会给他们带来什么利益时。这时你就要向人们指出他们可以从你的产品中获得哪些利益。如果人们能把产品与他们自己联系起来，他们就会认为某件事与该产品更相关。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/44bb8288de088da8a0ee39fe25e0fa47.jpg" width="500" height="247" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348635776523984">Action Method</a></p> <p> 任务管理工具 <a href="/misc/goto?guid=4958348635776523984">Action Method</a> 专注于它可以为用户带来的主要好处：随时保持同步。看见如此多不同的设备被放在一起，访问者可以了解到该应用可以让生活变得更加方便、容易。他们可能会想，在笔记本上做的笔记却不能在其他不同的设备上访问，这是件多么恼人的事啊。</p> <p> <strong>专注于主要的卖点</strong></p> <p> 大部分产品有很多功能，但使他们与众不同的却只有几个，甚至一个卖点。从硬件特性、设计、服务以及其他方面，与竞争对手相区分是很重要的。在展示产品时指出这些不同点，向人们展示该产品与众不同，更优秀。</p> <p> <strong>● 质量</strong></p> <p> 质量是一个很有效的卖点。如果产品的价格很昂贵，人们将会特别注意它们是否有超棒的质量。竞争对手可能会提供相同的产品或功能，但质量却会不相同。在展示产品时，着重展示产品的质量。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/332f52dda7602b24a07d4244f26123c5.jpg" width="500" height="269" /></p> <p style="text-align:center;"> 图片来自于： <a href="/misc/goto?guid=4958348637329728532">Chanel</a></p> <p> <a href="/misc/goto?guid=4958348637329728532">Chanel</a> 通过高分辨率的图片来展示其所有的产品。所有图片都经专业拍摄。图片中白色款的手表平放在柔软的白色羽毛上。该图片表达的信息相当详细，观看者能立即感觉到该手表的质量与该品牌的奢华。</p> <p> <strong>● 功能</strong></p> <p> 无论你的产品是什么，至少会有一个竞争者也在提供相同的产品，该事件的概率是十分高的。为了让人们相信你的产品是他们更好的选择，那就专注于产品功能——尤其是那些和你的目标群体相关，或者是必不可缺少的功能。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/2d679c8b345c14aa4c33c6e672c8045a.jpg" width="500" height="308" /></p> <p style="text-align:center;"> 图片来自于： <a href="/misc/goto?guid=4958348638876732489">HTC</a></p> <p> 所有的智能手机基本上都在提供相同的功能。例如，人们可以用它们来打电话、发信息、上网。<a href="/misc/goto?guid=4958348638876732489">HTC</a> 更专注于目标群体所关注的特殊功能：照相和音效，而不是列出那些所有智能手机都能实现的功能。</p> <p> <strong>● 定制</strong></p> <p> 人们喜欢那些对他们个人来说有特殊意义的产品。这就是我们为什么喜欢个性化我们所拥有的东西，比如手机设置、笔记本屏幕和穿衣风格。定制化的东西可以帮助塑造我们的风格，所以定制化的产品对我们来说更有特殊意义。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/54080a8ea9b8f0dcc5e57e44915dc431.jpg" width="500" height="296" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348640401930145">Converse</a></p> <p> 提供定制化的选项，将客户与你的品牌和产品联系起来。<a href="/misc/goto?guid=4958348640401930145">Converse</a> 允许用户设计自己的运动鞋。允许定制自己的鞋很明显增加了该品牌的价值。</p> <p> <strong>不要低估宣传方案</strong></p> <p> 在互联网上，我们的感知是有限的。但我们不应让有限的感知限制我们的创造力。我们应该使用更多清晰的图片和文字来表达我们的观点。通过选择合适的文字、字型、字号以及标点符号，来打造我们的信息。</p> <p> <strong>● 文字游戏</strong></p> <p> 双关语是吸引人们注意力的好办法，因为它们将熟悉的概念进行了重新包装。你正向访问者提供他们了解的信息，同时也将该信息与你自己的信息联系在了一起。双关语用来快速解释一个概念，同时给人一种熟识感。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/a3f08ce92b08ebbc54d0adb2a00581fb.jpg" width="500" height="266" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348641941344522">Apple</a></p> <p> <a href="/misc/goto?guid=4958348641941344522">Apple</a> 在这一点上做得很好。它开创了平板电脑，所有事实都在表明它是该领域最好的。iPad 3 采用革命性的显示屏，这也是它的主要卖点。苹果采用双关语“Resolutionary”有力地展示了该产品的高质量特性。</p> <p> <strong>● 别太严肃</strong></p> <p> 开怀大笑可以把人们凝聚起来。你肯定想到很多如此之类的笑话。同样这也可以应用到线上。一个有趣或带有讽刺意味的标题可能是销售产品过程中所需要的。尤其是，你不仅可以将访问者团结起来，同时还能传达很有意思的信息。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/4a072abf82fbc39abff7c2db30c97ae5.jpg" width="550" height="433" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958201016077814791">Jax Vineyards</a></p> <p> <a href="/misc/goto?guid=4958201016077814791">Jax Vineyards</a> 网站的标题不仅有趣还十分有力：“Your food should be so lucky”。当然，可能无论搭配什么样的酒，你的食物也不会“幸福”，但是通过选择正确的酒来珍爱你食物的想法确实很吸引人。想法一下，花几个小时准备 了一顿完美的晚餐，却因为选择了一瓶不合适的酒而被破坏，岂不很丢人？</p> <p> <strong>● 使用隐喻</strong></p> <p> 隐喻可以帮助我们了解周围的世界，了解那些不熟悉的事物。诸如你的产品为什么如此与众不同之类的抽象概念可以通过正确的隐喻很容易地解释。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/ad3fb685cf1dc46444ad1139e60ac4a1.jpg" width="500" height="245" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348644923648077">Adidas</a></p> <p> <a href="/misc/goto?guid=4958348644923648077">Adidas</a> 通过标语“Sweat nothing, climacool seduction”来推销其新款的运动鞋。由单词“seduction”所引发的单词组合韵律，很容易让我们把该标语误读为“Sweet nothing, climacool seduction”。该广告给人一种眼前一亮、舒适的感觉——可能与内衣有关联。虽然跑鞋和内衣之间基本没什么关联，但该标语却起到了很好的效果，将这 种积极、熟悉的感觉转移到了新款运动鞋上。</p> <p> <strong>利用环境</strong></p> <p> 展示产品的环境和产品本身同样重要。你在此空间内展示产品。它能吸引用户，使他们确信需要你的产品。</p> <p> <strong>● 唤醒欲望</strong></p> <p> 影片是吸引用户进入不同世界的很好方式。如果不是为逃出我们每天平凡的生活，让自己沉浸在浪漫的爱情故事或探险过程中，我们还有其他什么原因让自己走进影院呢？你可以把同样的效果用于你的客户身上，让他们去体验，感受休假的乐趣。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/aafefe779b9abf246e633d9b5c508ed9.jpg" width="500" height="269" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348646453015552">Post Ranch Inn</a></p> <p> <a href="/misc/goto?guid=4958348646453015552">Post Ranch Inn</a> 所提供的从早到晚 24 小时轮回的田园风光景色视频，给访问者带来一种身临其境的感觉。该网站带你融入到从日升到日落的旅途当中，带你远离办公室，踏入期待已久的旅行当中。</p> <p> <strong>● 激发积极的情感</strong></p> <p> 不要只专注于产品本身，专注产品所能引发的情感是一个聪明的选择。用户可能有大量的选择，但如果你销售给他们的是正确的感觉，他们将很容易被说服。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/953b3cc33b92b33e169546971ea67d99.jpg" width="500" height="227" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348647982722925">Fanta</a></p> <p> <a href="/misc/goto?guid=4958348647982722925">Fanta</a> 采用了会享受生活、充满乐趣、活泼的个性特征。其标语“More Fanta. Less Serious”表达了 Fanta 可以使你放松，让你充满乐趣。其中没有任何和饮品本身相关的内容，比如材料。你可以看到的只是欢乐的个性、鲜亮积极的颜色之类的感情触发器。</p> <p> <strong>● 吸引你的目标用户</strong></p> <p> 每个目标用户群体都不同，有不同的兴趣、知识水平、期望等等。清晰定义你的目标用户，以确保你吸引正确的用户。定义目标群体意味着真正理解他们的行为原因：动机、目标、习惯。只有清晰了解你为哪些人进行设计，你才能创造人们真正需要和渴望的产品。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/402b30ff70e2966af46921751b9a1f6d.jpg" width="500" height="164" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348649518006004">Olay</a></p> <p> 像 <a href="/misc/goto?guid=4958348649518006004">Olay</a> 的活肤系列产品清晰定义了目标群体：中年妇女。针对身体的产品——尤其涉及到敏感话题，如年龄——属于亲密性，需要较高的可信任度。Olay 正是抓住了这一需求，通过专业、熟悉、可信任的方法展示了它的产品。</p> <p> <strong>提供足够的信息</strong></p> <p> 真实的信息对于销售产品是很重要的。人们会根据真实的信息来决定合理的购买，尤其是在购买某项体验项目时——至少他们会这样想。真实的信息不仅能解答人们对产品的某些疑问，还能增强他们的购买决心。</p> <p> <strong>● 突出优点</strong></p> <p> 指出产品的优点是一个很好的方法。清晰的表达和真实的信息可以令人信服。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/f0d4729207be9eea9c93657d4c2b561e.jpg" width="500" height="290" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348651044874701">Heineken</a></p> <p> 你可能并不指望一个啤酒品牌能自动道出真实信息。但 <a href="/misc/goto?guid=4958348651044874701">Heineken</a> 通过清晰、老练的文字介绍了它的桶装啤酒（tap beer）。该信息包含严肃与优雅的氛围，而不是 Heineken 通常的幽默风格。</p> <p> <strong>● 进行详细的信息介绍</strong></p> <p> 对于一些产品，用户在购买之前需要某些特定的信息，比如功能列表、技术说明等。如果你的产品要求这些信息，保证用户可以很容易看到它们。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/e3b7b6fc9e6f33596e3974c5bb585683.jpg" width="500" height="285" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348652565102296">Viking</a></p> <p> <a href="/misc/goto?guid=4958348652565102296">Viking</a> 展示了一张高分辨率的图片，旁边还有一段简单的文字描述。它给人的第一印象是简洁。当然，在购买割草机之前，用户需要更多详细的信息；因此技术说明、设备详细信息应该巧妙地通过单独的标签展示出来。</p> <p> <strong>● 用事实说话</strong></p> <p> 用事实支撑你要表达的信息。</p> <p style="text-align:center;"><img border="0" alt="优秀产品页设计案例分享，探析如何抓住用户注意力" src="https://simg.open-open.com/show/079cc02c32c185ab2bf97c6b9a20a5d8.jpg" width="500" height="285" /></p> <p style="text-align:center;"> 图片来自于：<a href="/misc/goto?guid=4958348654095206996">Porsche</a></p> <p> 没有人真正需要跑车。但人们却都希望拥有它，购买它只为休闲娱乐。<a href="/misc/goto?guid=4958348654095206996">Porsche</a> 采用了大量视觉图片来传达速度、刺激、精准的感觉。同时它还针对这些视觉图片提供了相应的信息说明——虽然文字不多；但足以支撑图片所表达的思想：能量、自主与奢华。</p> <p> <strong>总结</strong></p> <p> 无论你销售的是什么，插件、软件、服务还是其他任何东西，产品展示对用户的第一印象有着直接的影响。好的展示可以吸引访问者的注意力，帮助他们 理解产品，甚至帮他们做出购买决定。采用草图、详细的插图或者生动的图片都能帮你传达信息。同时配以贴心文字说明，该产品展示将成为你网站上最重要的财 富。（编译：陈秋歌）</p> <p> 原文链接：<a href="/misc/goto?guid=4958348626624057450">Better Product Pages: Turn Visitors Into Customers</a></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958348656345759396" target="_blank">CSDN</a> </div> </div>