别再使用图片轮播了 #2073

shawnchenxmu · 2017-08-17T03:03:38Z

resolve #2032

laiyun90 · 2017-08-22T04:55:24Z

校对认领～

fanyijihua · 2017-08-22T04:55:25Z

@laiyun90 好的呢 🍺

laiyun90

校对完成~

laiyun90 · 2017-08-22T05:08:03Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-So if they’re not effective, why do people use them? 2 reasons:
+既然他们并不高效，为什么人们还要用呢？两个原因：


【既然它们并不高效】 =>【既然它们效果并不好】

【但事实上，它们可并不是什么好东西。】=>【但它们实际上是转换率杀手】

『conversion killers』直译过来确实是『转换率杀手』，但放在上下文看起来怪怪的，所以我这里就按照原文的意思换一种表达了

laiyun90 · 2017-08-22T05:12:31Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-I’m not alone. Pretty much any [conversion optimization](https://conversionxl.com/conversion-optimization-guide/) expert that does a lot of tests says the same thing:
+并不只是我一个人持这样的观点，那些做过许多 [旋转优化](https://conversionxl.com/conversion-optimization-guide/) 测试的专家们也都这么说：


并不只是我一个人持这样的观点，那些做过许多测试的转换最优化的专家们也都这么说：

【注意：如果你想成为顶尖的数据型营销者，请加入】 ==> 【打个广告：如果你想成为一名顶尖的数据营销者，借此助力事业腾飞，请戳】

laiyun90 · 2017-08-22T05:14:39Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


 [Tim Ash, Site Tuners](http://www.clickz.com/clickz/column/2164452/rotating-banners)

-Jakob Nielsen (yes, the usability guru) [confirms this in tests](http://www.nngroup.com/articles/auto-forwarding/). They ran a usability study where they gave users the following task: “*Does Siemens have any special deals on washing machines?”. *The information was on the most prominent slide. The users could not see it – totally hit by banner blindness. Nielsen concludes the sliders are ignored.
+Jakob Nielsen（没错，可用性领域的大师） [在测试中证实了这一点](http://www.nngroup.com/articles/auto-forwarding/) 。他们对可用性进行了一项研究，并给予了用户以下任务：**『西门子的洗衣机有什么特别优惠吗？』** 这条信息被放置在最显眼的图片轮播的位置。用户视而不见 —— 完全受到旗帜盲点的影响。Nielsen 的结论是：滑块完全被忽略了。


【旗帜】=>【横幅】

【他们对可用性进行了一项研究，并给予了用户以下任务】 ==》【他们针对可用性进行了一项研究。在研究中，他们抛给用户以下问题：“西门子的洗衣机有哪些优惠？”。答案就在最显眼的轮播上，但用户却视而不见 -- 广告盲点彻底地影响了用户们。Nielsen 的结论是：人们会忽略轮播图。】
注：“广告盲点“ 是专业名词

laiyun90 · 2017-08-22T05:28:19Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-Notre Dame university[ tested it](https://vwo.com/blog/image-slider-alternatives/) too. Only the first slide got some action (1%!), other slides hardly got clicked on at all. 1% of clicks for something that takes up (more than) half the page?
+圣母大学也做过 [测试](https://vwo.com/blog/image-slider-alternatives/) 。只有图片轮播中的第一张图片能得到一些点击量（1%！），其他的根本就没有。而能得到 1% 的点击量的元素在一个页面中占了一半（或者更多）。


【而能得到 1% 的点击量的元素在一个页面中占了一半（或者更多）。】 => 【1% 的点击占用了页面一半（或者更多）的位置？】

laiyun90 · 2017-08-22T05:32:28Z

TODO/dont-use-automatic-image-sliders-or-carousels.md

-> In terms of space saving and content promotion a lot of competing messages get delivered in a single position that can lead to focus being lost.
+一些参与测试的人们是这么说的：
+
+> 我所管理的那些测试几乎都证明了一点：通过图片轮播展示的内容终将被用户无视。我和他们几乎没有互动，并且很多评论看起来像是广告，旗帜盲点的概念在这里发挥的淋漓尽致，我算是见识到了。


【我和他们几乎没有互动】 => 【用户和轮播图几乎没有交互】

laiyun90 · 2017-08-22T05:33:14Z

TODO/dont-use-automatic-image-sliders-or-carousels.md

-> In terms of space saving and content promotion a lot of competing messages get delivered in a single position that can lead to focus being lost.
+一些参与测试的人们是这么说的：
+
+> 我所管理的那些测试几乎都证明了一点：通过图片轮播展示的内容终将被用户无视。我和他们几乎没有互动，并且很多评论看起来像是广告，旗帜盲点的概念在这里发挥的淋漓尽致，我算是见识到了。


【并且很多评论看起来像是广告】=>【并且许多评论说他们看起来像广告】

【旗帜盲点的概念在这里发挥的淋漓尽致】
旗帜改成横幅好一点
发挥的 => 发挥得

laiyun90 · 2017-08-22T05:49:28Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-Here’s [Forever21](http://www.forever21.com), guilty as charged – rotating between these 3 offers, changing every 4 seconds:
+图片轮播常常有着 [糟糕的可用性](http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/) —— 它们移动得太快了，而它们的导航图标又太小了（如果有的话！），并且常常不听话地自己动起来了，即使用户想要自己手动浏览其内容。UI设计的一条重要准则就是 [用户需掌握控制权](http://bokardo.com/principles-of-user-interface-design/)


UI设计中间增加空格

thisisandy · 2017-08-22T09:07:53Z

认领校对~

fanyijihua · 2017-08-22T09:07:55Z

@thisisandy 妥妥哒 🍻

thisisandy · 2017-08-22T09:09:45Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-So if they’re not effective, why do people use them? 2 reasons:
+既然他们并不高效，为什么人们还要用呢？两个原因：


【但事实上，它们可并不是什么好东西。】=>【但它们实际上是转换率杀手】

thisisandy · 2017-08-22T09:14:13Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-I’m not alone. Pretty much any [conversion optimization](https://conversionxl.com/conversion-optimization-guide/) expert that does a lot of tests says the same thing:
+并不只是我一个人持这样的观点，那些做过许多 [旋转优化](https://conversionxl.com/conversion-optimization-guide/) 测试的专家们也都这么说：


【注意：如果你想成为顶尖的数据型营销者，请加入】 ==> 【打个广告：如果你想成为一名顶尖的数据营销者，借此助力事业腾飞，请戳】

thisisandy · 2017-08-22T09:39:39Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


 [Tim Ash, Site Tuners](http://www.clickz.com/clickz/column/2164452/rotating-banners)

-Jakob Nielsen (yes, the usability guru) [confirms this in tests](http://www.nngroup.com/articles/auto-forwarding/). They ran a usability study where they gave users the following task: “*Does Siemens have any special deals on washing machines?”. *The information was on the most prominent slide. The users could not see it – totally hit by banner blindness. Nielsen concludes the sliders are ignored.
+Jakob Nielsen（没错，可用性领域的大师） [在测试中证实了这一点](http://www.nngroup.com/articles/auto-forwarding/) 。他们对可用性进行了一项研究，并给予了用户以下任务：**『西门子的洗衣机有什么特别优惠吗？』** 这条信息被放置在最显眼的图片轮播的位置。用户视而不见 —— 完全受到旗帜盲点的影响。Nielsen 的结论是：滑块完全被忽略了。


【他们对可用性进行了一项研究，并给予了用户以下任务】 ==》【他们针对可用性进行了一项研究。在研究中，他们抛给用户以下问题：“西门子的洗衣机有哪些优惠？”。答案就在最显眼的轮播上，但用户却视而不见 -- 广告盲点彻底地影响了用户们。Nielsen 的结论是：人们会忽略轮播图。】
注：“广告盲点“ 是专业名词

thisisandy · 2017-08-22T10:01:04Z

TODO/dont-use-automatic-image-sliders-or-carousels.md

+
+> 我所管理的那些测试几乎都证明了一点：通过图片轮播展示的内容终将被用户无视。我和他们几乎没有互动，并且很多评论看起来像是广告，旗帜盲点的概念在这里发挥的淋漓尽致，我算是见识到了。
+> 
+> 就空间节省和内容推广方面而言，将许多相互之间有冲突的消息放在一起就必然导致用户注意力的分散


【就空间节省和内容推广方面而言，将许多相互之间有冲突的消息放在一起就必然导致用户注意力的分散】=》【在空间利用、内容推广方面而言，在这一片或使用户分心的位置上，各类信息却倾巢而出】感觉译文翻译反了

thisisandy · 2017-08-22T10:01:36Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


 [Adam Fellows](https://ux.stackexchange.com/users/5208/adam-fellowes)

-Here’s another one:
+这儿还有一位：


但另一面：

thisisandy · 2017-08-22T10:09:56Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-> In all the testing I have done, home page carousels are completely ineffective.For one, anything beyond the initial view has a huge decrease in visitor interaction. And two, the chances that the information being displayed in the carousel matches what the visitor is looking for is slim. So in that case the carousel becomes a very large banner that gets ignored. In test after test the first thing the visitor does when coming to a page with a large carousel is scroll right past it and start looking for triggers that will move them forward with their task.
+> 在我做的所有测试中，主页的图片轮播完全是无效的。其一，除了初始视图之外，其他视图与用户的交互都大大减少。其二，图片轮播中的信息与用户正在寻找的信息相匹配的概率极其渺小。以至于在这种情况下，图片轮播框作为一个大横幅却往往被忽略。在一次又一次的测试之后发现，当用户在浏览一个带有大型图片轮播框的网站时，总是直接地滑动跳过它，进而寻找自己想要的内容。


【总是直接地滑动跳过它，进而寻找自己想要的内容。】=》【总是直接滑动鼠标跳过轮播，进而寻找自己想要的内容。】

thisisandy · 2017-08-22T10:11:46Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-## User Needs To Be In Control
+## 原因 #3：旗帜盲点


广告盲点专有名词

『Banner Blindness』专有名词有翻译为『广告盲点』的，也有翻译为『旗帜盲点』的，这里我根据下文内容，选择『旗帜盲点』这种译法

thisisandy · 2017-08-22T10:17:18Z

校对完成~ @shawnchenxmu @sqrthree

shawnchenxmu

已根据校对修改完成 @sqrthree
感谢两位的认真校对 @laiyun90 @thisisandy

shawnchenxmu · 2017-08-22T12:14:16Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-So if they’re not effective, why do people use them? 2 reasons:
+既然他们并不高效，为什么人们还要用呢？两个原因：


『conversion killers』直译过来确实是『转换率杀手』，但放在上下文看起来怪怪的，所以我这里就按照原文的意思换一种表达了

shawnchenxmu · 2017-08-22T13:00:19Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-## User Needs To Be In Control
+## 原因 #3：旗帜盲点


『Banner Blindness』专有名词有翻译为『广告盲点』的，也有翻译为『旗帜盲点』的，这里我根据下文内容，选择『旗帜盲点』这种译法

linhe0x0 · 2017-08-23T01:57:09Z

TODO/dont-use-automatic-image-sliders-or-carousels.md

@@ -3,142 +3,149 @@
  > * 原文作者：[Peep Laja](https://conversionxl.com/author/peep-laja/)
  > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
  > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/dont-use-automatic-image-sliders-or-carousels.md](https://github.com/xitu/gold-miner/blob/master/TODO/dont-use-automatic-image-sliders-or-carousels.md)
-  > * 译者：
+  > * 译者：[shawnchenxmu](https://github.com/shawnchenxmu)
  > * 校对者：


校对者信息需要加一下哈。

linhe0x0 · 2017-08-23T01:59:27Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-Focusing on a single primary message and action is way always far more effective
+访客登录你的网站，在轮播框中看到一条消息，正要开始阅读：『这个秋天你要……』**咻！**不见啦。这些滑块轮转得太快了，用户根本来不及读完一条消息（即使他们真的想）。


linhe0x0 · 2017-08-23T02:00:02Z

TODO/dont-use-automatic-image-sliders-or-carousels.md


-Here’s [Forever21](http://www.forever21.com), guilty as charged – rotating between these 3 offers, changing every 4 seconds:
+图片轮播常常有着 [糟糕的可用性](http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/) —— 它们移动得太快了，而它们的导航图标又太小了（如果有的话！），并且常常不听话地自己动起来了，即使用户想要自己手动浏览其内容。UI 设计的一条重要准则就是 [用户需掌握控制权](http://bokardo.com/principles-of-user-interface-design/)


句末缺少标点。

shawnchenxmu · 2017-08-23T02:21:32Z

修改完成！ @sqrthree

linhe0x0 · 2017-08-23T02:28:41Z

@shawnchenxmu 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

shawnchenxmu · 2017-08-23T03:10:50Z

https://juejin.im/post/599cf1596fb9a02481205803 发布完成！
@sqrthree

…slate * 'master' of https://github.com/xitu/gold-miner: (178 commits) 🚀 添加文章『关于 React Router 4 的一切』到文章列表 🚀 添加文章『为什么我们渴求女性来设计 AI 』到文章列表 🚀 添加文章『如何在 Webpack 2 中使用 tree-shaking』到文章列表 🚀 添加文章『Redux 有多棒？』到文章列表 🚀 添加文章『别再使用图片轮播了』到文章列表 🚀 添加文章『将 Android 项目迁移到 Kotlin 语言』到文章列表 🚀 添加文章『巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏』到文章列表别再使用图片轮播了 (xitu#2073) Update how-to-do-proper-tree-shaking-in-webpack-2.md (xitu#2100) 为什么我们渴求女性来设计 AI (xitu#2074) 如何在 webpack2 中使用 tree-shaking (xitu#2076) 怎么写出完美的错误消息 (xitu#2080) 巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏 (xitu#2043) 将 Android 程序移植为 Kotlin 程序 (xitu#2039) Redux 有多棒？ (xitu#2003) 🚀 添加文章『函数式响应编程入门指南』到文章列表 🚀 添加文章『虚拟现实是如何改变用户体验的：从原型到设备的设计』到文章列表 ✨ Create angular-vs-react-which-is-better-for-web-development.md ✨ Create evolving-the-facebook-news-feed-to-serve-you-better.md ✨ Create why-context-value-matters-and-how-to-improve-it.md ...

别再使用图片轮播了

15cc0cb

linhe0x0 added the 校对认领 label Aug 17, 2017

linhe0x0 mentioned this pull request Aug 17, 2017

别再使用图片轮播了 #2032

Closed

linhe0x0 added 设计 merging-soon-if-no-other-reviewer labels Aug 17, 2017

fanyijihua added the 正在校对 label Aug 22, 2017

laiyun90 reviewed Aug 22, 2017

View reviewed changes

fanyijihua removed the 校对认领 label Aug 22, 2017

thisisandy reviewed Aug 22, 2017

View reviewed changes

linhe0x0 removed the merging-soon-if-no-other-reviewer label Aug 22, 2017

Update dont-use-automatic-image-sliders-or-carousels.md

cf8cc7f

shawnchenxmu commented Aug 22, 2017

View reviewed changes

shawnchenxmu added 2 commits August 22, 2017 21:33

Update dont-use-automatic-image-sliders-or-carousels.md

c85a474

Update dont-use-automatic-image-sliders-or-carousels.md

ee442ae

linhe0x0 requested changes Aug 23, 2017

View reviewed changes

Update dont-use-automatic-image-sliders-or-carousels.md

a21a1e5

linhe0x0 approved these changes Aug 23, 2017

View reviewed changes

linhe0x0 added 翻译完成 and removed 正在校对 labels Aug 23, 2017

linhe0x0 merged commit 36f9254 into xitu:master Aug 23, 2017

cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017

别再使用图片轮播了 (xitu#2073)

05dc1af


		So if they’re not effective, why do people use them? 2 reasons:
		既然他们并不高效，为什么人们还要用呢？两个原因：


		I’m not alone. Pretty much any [conversion optimization](https://conversionxl.com/conversion-optimization-guide/) expert that does a lot of tests says the same thing:
		并不只是我一个人持这样的观点，那些做过许多 [旋转优化](https://conversionxl.com/conversion-optimization-guide/) 测试的专家们也都这么说：


		Notre Dame university[ tested it](https://vwo.com/blog/image-slider-alternatives/) too. Only the first slide got some action (1%!), other slides hardly got clicked on at all. 1% of clicks for something that takes up (more than) half the page?
		圣母大学也做过 [测试](https://vwo.com/blog/image-slider-alternatives/) 。只有图片轮播中的第一张图片能得到一些点击量（1%！），其他的根本就没有。而能得到 1% 的点击量的元素在一个页面中占了一半（或者更多）。


		Here’s [Forever21](http://www.forever21.com), guilty as charged – rotating between these 3 offers, changing every 4 seconds:
		图片轮播常常有着 [糟糕的可用性](http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/) —— 它们移动得太快了，而它们的导航图标又太小了（如果有的话！），并且常常不听话地自己动起来了，即使用户想要自己手动浏览其内容。UI设计的一条重要准则就是 [用户需掌握控制权](http://bokardo.com/principles-of-user-interface-design/)


		> In all the testing I have done, home page carousels are completely ineffective.For one, anything beyond the initial view has a huge decrease in visitor interaction. And two, the chances that the information being displayed in the carousel matches what the visitor is looking for is slim. So in that case the carousel becomes a very large banner that gets ignored. In test after test the first thing the visitor does when coming to a page with a large carousel is scroll right past it and start looking for triggers that will move them forward with their task.
		> 在我做的所有测试中，主页的图片轮播完全是无效的。其一，除了初始视图之外，其他视图与用户的交互都大大减少。其二，图片轮播中的信息与用户正在寻找的信息相匹配的概率极其渺小。以至于在这种情况下，图片轮播框作为一个大横幅却往往被忽略。在一次又一次的测试之后发现，当用户在浏览一个带有大型图片轮播框的网站时，总是直接地滑动跳过它，进而寻找自己想要的内容。


		Focusing on a single primary message and action is way always far more effective
		访客登录你的网站，在轮播框中看到一条消息，正要开始阅读：『这个秋天你要……』咻！不见啦。这些滑块轮转得太快了，用户根本来不及读完一条消息（即使他们真的想）。

别再使用图片轮播了 #2073

别再使用图片轮播了 #2073

Conversation

shawnchenxmu commented Aug 17, 2017 • edited by linhe0x0 Loading

laiyun90 commented Aug 22, 2017

fanyijihua commented Aug 22, 2017

laiyun90 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisisandy Aug 22, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisisandy commented Aug 22, 2017

fanyijihua commented Aug 22, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisisandy Aug 22, 2017 • edited Loading

Choose a reason for hiding this comment

thisisandy Aug 22, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisisandy commented Aug 22, 2017

shawnchenxmu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shawnchenxmu commented Aug 23, 2017

linhe0x0 commented Aug 23, 2017

shawnchenxmu commented Aug 23, 2017

shawnchenxmu commented Aug 17, 2017 •

edited by linhe0x0

Loading

thisisandy Aug 22, 2017 •

edited

Loading

thisisandy Aug 22, 2017 •

edited

Loading

thisisandy Aug 22, 2017 •

edited

Loading