程序封装真的是令人讨厌

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

We have created a monster. Despite living and working on the web, many of us detest the ways in which the technology is abused. A few frustrations are inevitable but many techniques are malicious — if not edging on fraudulent. Other dark-patterns are just plain stupid.

我们创造了一个怪物。 尽管在网络上生活和工作，但我们中的许多人仍然讨厌滥用技术的方式。 不可避免会有一些挫败感，但许多技术都是恶意的-如果不是欺诈的话。 其他深色图案只是愚蠢的。

Here is a list of my top web irritations. I won’t shame anyone directly but, when I encounter these, I’m tempted to give it all up and go live on a beach…

这是我最讨厌的网站。 我不会直接让任何人感到羞耻，但是当我遇到这些时，我很想放弃所有这些，然后在海滩上生活……

网页膨胀 (Web Page Bloat)

I’ve complained many times but few developers care about page load times or performance. Average page weight reached 2,884kb in May 2017. That’s an average for content pages — not apps, not games, not social networks.

我抱怨过 很多 次，但很少有开发人员关心页面加载时间或性能。 2017年5月，平均页面重量达到了2,884kb 。 这是内容页面的平均值，而不是应用程序，游戏，社交网络。

Is user experience improving by more than 20% every year? I think not.

用户体验每年是否会提高20％以上？ 我觉得不是。

不必要的多页文章 (Needless Multi-Page Articles)

Splitting a long article into separate pages is fine. Splitting a short article into sentence-sized pages to increase your advertising impressions is not.

将较长的文章拆分为单独的页面很好。 不能将简短的文章分成句子大小的页面以增加广告印象。

干扰性广告 (Obtrusive Advertising)

Advertising is one of the biggest causes of bloat. Full-screen, pop-over and auto-play video advertising is particularly nasty.

广告是造成膨胀的最大原因之一。 全屏，弹出窗口和自动播放视频广告特别讨厌。

Unfortunately, some site owners think: “I have one ad on every page which raised $X last month. If I place two ads, that’s $2X…” It works to the point where users start abandoning the site. How do some site owners fix falling revenues? More advertisements.

不幸的是，一些网站所有者认为： “我在每个页面上都有一个广告，上个月筹集了$ X。 如果我放置两个广告，则是$ 2X…”，它的作用可以使用户开始放弃该网站。 一些网站所有者如何解决收入下降的问题？ 更多广告。

假新闻广告 (Fake News Ads)

Is that 19 year-old really making $5,000 working one hour per week? It seems we’ve lost the art of creating desirable products with intelligent advertising to indulge in preposterous get-rich-quick schemes.

那个19岁的孩子每周工作一小时真的能赚5,000美元吗？ 似乎我们已经失去了通过智能广告创建理想产品来沉迷于荒谬的快速致富计划的艺术。

阻止广告拦截器 (Blocking Ad Blockers)

“Sorry, you cannot access this page until you disable your ad-blocker”.

“很抱歉，除非禁用广告拦截器，否则您将无法访问此页面”。

The advantages of this stance: the visitor could never click an ad so they’ll never contribute to revenue. Let’s block them.

这种立场的优势在于：访问者永远不会点击广告，因此他们永远不会贡献收入。 让我们阻止它们。

The disadvantage? The visitor won’t care. No one will go through the rigmarole of disabling their ad blocker just to see your content. Even if they do, they won’t click ads because they know how and when to avoid them. Those users disappear forever and you’ve removed any possibility of promoting other goods and services.

劣势？ 访客不在乎。 没有人会因为禁用广告拦截器而仅仅为了查看您的内容而经历繁琐的工作。 即使他们这样做，他们也不会点击广告，因为他们知道如何以及何时避免使用它们。 这些用户永远消失了，您已经删除了推广其他商品和服务的任何可能性。

If advertising is your only source of revenue, you may want to consider alternatives now vendors have started blocking advertising by default to improve browser speeds.

如果广告是您唯一的收入来源，那么您现在可能要考虑其他选择，因为供应商已默认开始阻止广告以提高浏览器速度。

移动跳跃 (Mobile Jump)

You’re part way through reading an article on your smart phone when the browser scrolls to a random position because an image, advertisement or other asset loaded above. Admittedly, this is a consequence of modern Responsive Web Design but it’s annoying.

当浏览器滚动到随机位置时，您将无法阅读智能手机上的文章，因为上面放置了图片，广告或其他资产。 诚然，这是现代响应式Web设计的结果，但是很烦人。

The solution? Other than fixing image and other asset widths, I’m not aware of any in-page solution (and I’ve spent many hours trying!) Mobile Chrome has an experimental flag to prevent the jump:

解决方案？ 除了固定图像和其他资产宽度外，我不知道任何页内解决方案(并且花了很多时间进行尝试！) Mobile Chrome具有实验性标志来防止跳转：

1. enter chrome://flags in the address bar

   在地址栏中输入chrome：// flags

2. scroll to or search for Scroll Anchoring

   滚动到或搜索滚动锚定

3. enable and restart the browser.启用并重新启动浏览器。

I’m not convinced it always works but I applaud any vendor for trying.

我不相信它总能奏效，但我赞扬任何供应商的尝试。

移动应用推广 (Mobile App Promotion)

You tap a link on a mobile device but, just as you reach the destination, you’re invited to install the site’s mobile app and read the article there. That’s right: you must visit an App Store, approve the terms, download several megabytes of code, wait for installation to complete, launch the app, then try to locate the same content you could have read ten minutes ago.

您在移动设备上点击链接，但是，就像到达目的地一样，系统会邀请您安装该站点的移动应用程序并在此处阅读文章。 没错：您必须访问App Store，批准条款，下载数兆字节的代码，等待安装完成，启动应用程序，然后尝试查找十分钟前可能已经阅读的内容。

This translates as: “We’ve spent a lot of money on numerous native mobile applications but no one’s bothered. We should probably have implemented a Progressive Web App for a fraction of the cost. Rather than address the core problem, we’ll try and trick a few people into installing it. Perhaps our CEO will then stop complaining about our dismal return on investment.”

意思是： “我们在许多本机移动应用程序上花了很多钱，但没人打扰。 我们可能应该只花很少的钱就可以实现一个渐进式Web应用程序 。 除了解决核心问题之外，我们将尝试诱使一些人安装它。 也许我们的首席执行官将不再抱怨我们的投资回报不佳。”

令人困惑的导航 (Confusing Navigation)

I’m all for design freedom but if you need to explain your navigation, something is wrong! Horizontal and vertical lists of links may not be exciting but they work without requiring bouncy arrows or instructions.

我全力追求设计自由，但如果您需要解释导航，那是不对的！ 水平和垂直链接列表可能并不令人兴奋，但是它们不需要弹性箭头或说明即可工作。

Bonus irritation: CSS-only multi-level cascading menus which disappear the moment you move your mouse one pixel off the active area.

额外的刺激：仅CSS的多层级联菜单，当您将鼠标移离活动区域一像素时，这些菜单就会消失。

浏览器检测 (Browser Detection)

“This website only works in Google Chrome.”

“此网站仅可在Google Chrome浏览器中使用。”

I thought this sort of nonsense died out in 2001. Perhaps it’s necessary if you’re trying an experimental technology but applying it to every page of content will lose you visitors.

我认为这种废话在2001年就消失了。如果您正在尝试一种实验技术，也许有必要这样做，但是将其应用于每一页内容将使您失去访问者。

“你需要闪光灯” (“You Need Flash”)

I don’t. You need to update your website.

我不。 您需要更新您的网站。

没有回退的单页应用程序 (Single Page Applications With No Fallbacks)

All the cool kids are using JavaScript frameworks to create single page applications. Fine, but at least add a little tolerance when JavaScript fails. Which it will. Progressive Enhancement is not dead.

所有很酷的孩子都在使用JavaScript框架来创建单页应用程序。 很好，但是至少在JavaScript失败时增加一点容忍度。 会的。 渐进增强还没有结束 。

愚蠢的密码限制 (Stupid Password Restrictions)

“Your password must be between eight and ten characters, contain an uppercase letter, two numbers, a symbol, and the smiling poo emoji.”

“您的密码必须在8到10个字符之间，包含一个大写字母，两个数字，一个符号和微笑的poo表情符号。”

This translates as: “We don’t really understand security but this makes it look as though we’re doing something practical.” You’re not: you’re handing a template to brute-force password tools and significantly reducing discovery time. By all means, enforce a minimum number of characters, indicate the strength and check for idiotic passwords such as ‘password’. That’s it.

意思是： “我们不是很了解安全性，但是看起来好像我们正在做一些实际的事情。” 事实并非如此：您正在将模板交给暴力密码工具，并大大减少了发现时间。 务必使用最少数量的字符，指定强度并检查诸如“ password”之类的惯用密码。 而已。

禁用密码字段上的粘贴 (Disabling Paste on Password Fields)

Why do sites do this? You’ve now stopped me using a strong 500-character randomly-generated string set within my password manager.

为什么网站这样做？ 您现在已经在我的密码管理器中使用由500个字符组成的强字符串随机生成的字符串阻止了我。

You should also stop…

您还应该停止…

破坏浏览器行为 (Breaking Browser Behaviour)

Site owners need to learn several basic facts about the web. You cannot:

网站所有者需要学习有关网络的一些基本事实。 你不能：

• hide your code隐藏你的代码
• stop people viewing your source阻止人们查看您的资源
• prevent people using the right-click menu防止人们使用右键菜单
• detect when someone opens the developer tools检测何时有人打开开发人员工具
• force people to run your scripts or use your styles强迫人们运行您的脚本或使用您的样式
• stop people copying content (and please stop adding stupid copyright messages when I try).阻止人们复制内容(请在尝试时停止添加愚蠢的版权信息)。

断开后退按钮 (Breaking the Back Button)

Breaking back-button functionality is unnecessary and a terrible user experience. Even the novice users understand what “Back” does. There’s no excuse for Single Page Applications — the history API has been available for many years so use it!

不需要破坏后退按钮的功能，并且会带来糟糕的用户体验。 即使是新手用户也可以理解“返回”的功能。 单页应用程序没有任何借口- 历史API已经使用了很多年，请使用它！

It’s not just SPAs. Some sites insist on ending sessions or presenting an expiry page so you can’t go back or forward and have to log in again.

不只是SPA。 有些网站坚持结束会话或显示过期页面，因此您无法前进或后退，而必须再次登录。

And don’t get me started on sites which fail to respond to mouse wheel scrolling.

而且不要让我开始在无法响应鼠标滚轮滚动的站点上开始。

使用错误的输入类型 (Using the Wrong Input Type)

HTML5 introduced a range of new input types including url, email, tel, number, date, time, color etc. Browser vendors can optimize the user experience so certain characters are restricted or an appropriate control such as a calendar appears (which still isn’t in Firefox — what’s taking Mozilla so long?!)

HTML5引入了一系列新的输入类型，包括url，电子邮件，电话，数字，日期，时间，颜色等。浏览器供应商可以优化用户体验，以便限制某些字符或显示适当的控件(例如日历)(现在仍然不是)在Firefox中-Mozilla花费了这么长时间？！)

Use the right input control for the job. Anyone implementing yes/no radio buttons instead of a single checkbox deserves all the ridicule they receive.

为作业使用正确的输入控件。 任何使用yes / no单选按钮而不是单个复选框的人都应该得到他们的所有嘲笑。

Cookie警告 (Cookie Warnings)

You may not see these but EU residents are bombarded with “we use cookies” banners and pop-ups on almost every site they visit. Few people care. Even fewer read them. Millions of people are now preconditioned to ignore security warnings which, one day, could be more serious.

您可能看不到这些内容，但欧盟居民几乎在他们访问的每个站点上都被“我们使用cookie”横幅和弹出窗口轰炸。 很少有人在乎。 更少的人阅读它们。 现在，成千上万的人已经准备好忽略安全警告，而一天之内，警告可能会变得更加严重。

This daft rule is enshrined in law and I’m not advocating you indulge in criminal activity. Yet laws must be enforceable; how many sites been fined for refusing to show a cookie notice?

这条愚蠢的规则已被法律所载，我不主张您沉迷于犯罪活动。 但是法律必须是可执行的； 有多少个站点由于拒绝显示Cookie通知而被罚款？

There is an easy option: install an auto-click plugin such as I don’t care about cookies.

有一个简单的选项：安装一个自动点击插件，例如我不在乎cookie 。

不必要的滚动 (Needless Scroll-Jacking)

I quite like scroll-jacking when it’s subtle and highlight a few key points. It’s less pleasing when it’s over-used with a dozen parallax sections combined with 57 floating items moving into place. My eyes are bleeding, thanks.

我非常喜欢滚动千篇一律的微妙之处，并强调了几个要点。 当它过度使用了十二个视差部分以及57个漂浮的物体并放置到位时，它就不太令人满意了。 我的眼睛在流血，谢谢。

无限滚动雪茄 (Infinite Scrolling Shenanigans)

I’m not particularly keen on pages which load and append additional content as you scroll toward the bottom of the page. I’m less keen on sites which fail to append content quickly enough, provide no indication of when the page will end, or make it impossible to bookmark an individual article.

当您滚动到页面底部时，我并不特别喜欢加载和添加其他内容的页面。 我不太喜欢那些无法足够Swift地添加内容，无法提供页面何时结束或无法为单个文章添加书签的指示的网站。

社交登录无聊 (Social Sign-on Silliness)

When OAuth is implemented well, signing-up and logging in with your Facebook, Twitter or Google account is fabulous and saves time. When implemented badly, sites then proceed to ask for your email and another password to register — why?

如果OAuth实施得当，那么使用您的Facebook，Twitter或Google帐户进行注册和登录非常方便，并且可以节省时间。 如果实施不当，则网站会继续询问您的电子邮件和另一个密码进行注册- 为什么？

我的购物车中添加了“有用”的物品 (“Useful” Items Added to My Shopping Cart)

I don’t mind a few product recommendations but auto-adding something to my cart steps beyond the line of reasonable ecommerce behavior! You just lost a sale, buddy.

我不介意一些产品推荐，但将商品自动添加到购物车的步骤超出了合理的电子商务行为范围！ 您刚刚失去了一笔交易，伙计。

订阅羞耻 (Subscription Shaming)

Automatically opting people in to services or products is a dark pattern still adopted in some corners of the web. Worse are the marketing phrases which turn you into the bad guy, e.g. “I don’t care about orphan puppies so I want to opt-out from your newsletter”.

自动选择让人们加入服务或产品是网络某些角落仍然采用的一种黑暗模式。 会使您变成坏人的营销短语更糟，例如“我不在乎孤儿幼犬，所以我想退出您的通讯” 。

人为稀缺 (Artificial Scarcity)

“We have 2 items available and 47 people are viewing this product.”

“我们有2种商品，有47人正在查看该产品。”

It’s great to know when you’re out of stock but enticing a sale using these tactics is immoral. Travel sites are notorious for these messages but others have implemented scarcity scares.

很高兴知道您什么时候缺货，但是使用这些策略来诱使销售是不道德的。 旅游网站因这些信息而臭名昭著，但其他网站却实施了稀缺性恐慌。

Try visiting the page a week later — strangely, the product is still available.

一周后尝试访问该页面-奇怪的是，该产品仍然可用。

轻松进出，困难出局 (Easy In, Difficult Out)

Finally, the ultimate dark pattern. The site makes it easy to sign-up: you need no more than an email address.

最后，最终的暗纹。 该网站使注册变得容易：您只需要一个电子邮件地址即可。

Cancelling the service is another matter. You must visit the company’s headquarters in Pyongyang, submit a hand-written cancellation letter, provide fifteen types of photographic identification (originals, not photocopies), fill in a fifty-page leaving questionnaire, and agree to medical experiments on your first-born child.

取消服务是另一回事。 您必须访问公司在平壤的总部，提交手写的取消信，提供15种类型的照片身份证件(原件，而非复印件)，填写50页的离开调查表，并同意对大胎进行医学实验。

Thanks for reading. I’m off for a lie down.

谢谢阅读。 我要躺下。

Have you encountered worse transgressions? Have you been asked to implement any? Did you refuse or succumb to the dark side?

您是否遇到过更严重的犯罪？ 是否要求您实施？ 您拒绝还是屈服于阴暗面？

翻译自: https://www.sitepoint.com/annoying-web-dark-patterns/

程序封装真的是令人讨厌