文章主要是通過展示5個明顯的壞設計，來反襯好設計是怎么更好工作的，并提煉出一些經驗來讓我們為用戶們創造良好的隱形的體驗。

對比壞設計與對應的好設計非常有趣，而且設計師可以從中獲得重要的經驗。這種對比突出了設計中要避免的陷阱，同時讓我們理解了如何將設計理論轉換成現實生活中的解決方案。

Jared Spool，美國作家、研究員及可用性專家，曾經說過：

好的設計，當它工作良好時，是隱形的。只有當它工作不良時，才會被人注意到。

所以，通過展示5個明顯的壞設計，來反襯好設計是怎么更好工作的，并提煉出一些經驗來讓我們為用戶們創造良好的隱形的體驗。

一、信息過載

壞設計：洛杉磯的停車指示牌

洛杉磯（LA）的停車指示牌，可以說是近十年來信息過載的典型代表。它們出了名的難以理解，因為交通規則很復雜，因此在一塊小小的區域里要傳達大量的信息。

這些指示牌有多令人費解呢？

通常來說，它們從2010年起典型的樣式就像下面的圖片一樣：

作者/版權所有人：Jorge Gonzalez。版權條款和許可：CC BY-SA 2.0

從LA停車指示牌的歷史來看，這個樣式已經是相當簡單的了。試想周二早上9點你開著車上了這條公路。那你可以停在這里嗎？

這么簡單的問題竟然要費盡大量的認知資源去回答！

作為設計師，我們經常會面對需要在一塊小區域里傳遞大量信息的設計問題。LA的停車指示牌可能是其中最極端的一個例子，但很多時候在移動端應用設計中也會面臨同樣的問題。

那么是否有一個通用的辦法可以解決停車標識及類似的設計問題呢？

好設計：Nikki Sylianteng的停車指示設計

設計一個可以展示所有信息，同時容易理解的的標示牌聽起來是一個不可完成的任務，但這恰恰就是Brooklyn的設計師Nikki Sylianteng完成的。

作者/版權所有人：Nikki Sylianteng。版權條款和許可：CC BY-SA 4.0

Nikki的設計試驗性應用于LA標識設計中。Nikki的設計有效的原因之一正是因為它是以用戶為中心的：Nikki意識到駕駛人其實只想知道他們現在是否可以停在這里。

可以或者不可以，這才是所有駕駛者需要的，所以指示牌也只需要展示這些信息。

她在設計中利用了視覺來傳達信息而不是文字，結果就是設計極為直觀——綠色代表可以停車；紅色代表不可以。同時這個設計里還考慮了色盲的問題，所以在不可停車的時間域內用了斜線。

現在當你看到這塊標示時，你就知道周二早上9點是不可以停車的，這樣的指示牌子瞄一眼就能懂。

所學到的最佳實踐：

• 了解你的用戶需要什么，然后基于此設計，這可以幫助減少信息負載。
• 有大量的信息要傳達給你的用戶，試著用視覺化元素來替代文字，點擊以下鏈接了解更多數據可視化的知識。

數據可視化

二?神秘肉式導航

壞設計：LazorOffice.com

根據1998年Vincent Flanders創建的網頁The Suck，神秘肉導航（MMN）用于指代那些必須要用戶點擊鏈接，或把鼠標懸停鏈接之上才知道指向目標的設計。

“神秘肉”這個短語，起源于美國公立學校的自助餐廳提供的肉類，因為被過度處理而根本無法辨別出來。

MMN不好，是因為它降低了導航元素的可見性。因為用戶必須要去“猜”導航的目的地，或者必須要有點擊操作，因此增加用戶的認知負載。目前老式的網頁設計中還可見到MMN，現代網頁設計中已經很少見到了。

我們以Lazor Office為例——一個提供預制房屋的設計公司網站。

作者/版權所有人：Lazor Office公司。版權條款和許可：合理使用

LazorOffice的官網首頁上擺放了這么一組MMN式圖片，正如你所見到的那樣，這種布局只有非常少的線索暗示我們將要去向的地方。相反，這9張圖片就這樣擺放著，令某些用戶產生困惑而非發生與之交互的動作。

在他們主頁的下方，一組圖片縮略圖靜靜的擺放在那里，它們是可點擊的嗎？

是的，它們可以點擊，如果你把鼠標移動到這些圖片上，它會變指針的樣子，但是當你點擊后會發生什么呢？

“點擊后查看”并不是個好的用戶體驗解決方案。這種設計會會帶來的改變是——你的用戶會棄用這些導航，而從你的競爭對手那里獲得替代的解決方案。

好設計：Interaction Design Foundation網頁的課程卡片

幸好MMN問題是很容易解決的，關鍵是意識到你必須清晰地標注鏈接。僅僅是在鼠標懸停上增加“查看項目”的彈出提示，就可以提升Lazor Office主頁的可用性。

作者/版權所有人：Interaction Design Foundation. 版權條款和許可：合理使用

我們的課程卡片清晰標簽了鏈接的去向，我們Interaction Design Foundation上的課程卡片，不僅每張卡片的底部有“查看課程”入口用以提示行動結果，同時鼠標懸停在卡片上時還會彈出“進入課程”的提示語。許多網站都遵循這一相同的規則，所以你也必須要遵守，那就是最大化你網站的可用性。

所學到的最佳實踐：

總是標注清楚鏈接的指向！你不會喜歡吃神秘肉的。同理，你的用戶也不喜歡點擊指向未知的鏈接。

三、給增加用戶操作的困難

壞設計：iFly50.com

作為設計師，我們需要對增加用戶操作難度的設計抱有高度的警惕，除非目的是勸說用戶不要操作這個行為。然而有時我們也會在無意之中（大多是為了審美或新奇的需要）增加了用戶的操作難度以至于產生不良的用戶體驗

其中一個例子就是iFly50——KLM公司（荷蘭皇家航空公司）為iFly雜志周年紀念創建的網站。

IFly是一個垂直滾動的網頁，展示了50個旅游目的地，在某些目的地（如下）的 圖片底部會出現一個按鈕讓用戶“點擊并保持”幾秒以查看更多圖片。

作者/版權所有人：荷蘭皇家航空公司。版權條款和許可：合理使用

iFly50網站希望用戶每次要查看更多圖片時，都點擊并保持幾秒，這種在每個行動上都增加幾秒的困難行為會導致極差的體驗。

試想，如果你在瀏覽器中查看每個鏈接都需要點擊然后保持幾秒，而不是立即得到加載相應的頁面的結果，那么僅需要幾個“點擊并保持”的操作，你將會放棄探索整個互聯網。

很多時候，我們的設計師傾向于應用最新的交互樣式或操作。但非常重要的是：警惕你的設計可能增加用戶的操作困難。大多數時間，使用及測試慣常的操作（例如，簡單的點擊或滑動）就能很好的工作了。

好設計：iOS的彈性滾動

有趣的是，精心設計的操作困難反而會成為偉大的設計。Apple公司在其移動端操作系統iOS上最受歡迎的操作就是彈性滾動，在某些情境下（例如頁面的最底部最）滾動會變得非常困難。

作者/版權所有人：Interaction Design Foundation. 版權條款和許可：合理使用

iOS上的彈性滾動是在某些情況下故意增加操作的困難，你可以看到當用戶滾動到最后一頁時增加了滾動的難度。在這里增加操作的難度是為了提示用戶向下滾動已經不可用了，而且其效果是產生符合直覺的體驗。

所學到的最佳實踐：

盡力避免給用戶的操作增加任何難度，當你沒有更好的方案時盡可能的改良這種難度。

四、“聰明”但忽略了可用性的設計

壞設計：Bolden.nl

有時，聰明的設計也會對用戶體驗造成重創。令這個錯誤變得更加危險的是：設計師們熱愛聰明的設計，因為這些小小的圖形驚喜可以讓我們設計師的臉上浮現出微笑。

但可悲的是：大多數人類并不是設計師。更為可悲的是：并不是所有聰明的設計是好設計，尤其是當它們造成了不可達性、不可見性或不可用性的問題時。

以荷蘭戰略設計和開發工作室Bolden的網站為例：

作者/版權所有人：Bolden。版權條款和許可：合理使用

你能夠告訴我，他們的主頁想要傳遞什么嗎？不行？這是因為你必須移動你們的鼠標到頁面的邊角，才能查看到正確的信息。

作者/版權所有人：Bolden。版權條款和許可：合理使用

這是聰明的設計嗎？當然是！那它是糟糕的設計嗎？毫無疑問！

這是一個典型為設計師而非為用戶設計的案例，網站設計者為了展現新奇的設計樣式，顯著的降低了標題的清晰度。無論誰設計的這個頁面，他也忘記指引用戶移動鼠標到角落以查看標題，這也就意味著標題能被看到是非常隨機的。

更進一步來說，即使標題當前可見，但由于文本與背景的對比不足，用戶仍然會看到重疊的字母，所有的一切造就了一個對用戶不友好的網站。

好設計：CultivatedWit.com

CultivatedWit的網站就是以上壞設計的反例，它展示了如何使用不犧牲可用性的聰明設計。

作者/版權所有人：CultivatedWit。版權條款和許可：合理使用

CultivatedWit的首頁展示了一只貓頭鷹的插圖，當鼠標置于貓頭鷹插圖之上時，貓頭鷹就會眨眼。

作者/版權所有人：CultivatedWit。版權條款和許可：合理使用

驚喜吧！當鼠標指向貓頭鷹時，它就會向你眨眼，同時留意到留白區域的深意。

與上面壞設計最大的不同是：CultivatedWit網站上貓頭鷹的眨眼并不是整個網頁設計的核心，所以即使用戶并沒有留意到這個聰明設計，也不會影響其可用性。而且，頁面上還有一個清晰的向下滑動的箭頭提示還有信息在下方。

當你滑動到下頁時，你會看見：

作者/版權所有人：CultivatedWit。版權條款和許可：合理使用

網頁不犧牲用戶體驗也可以表現出聰明。

副本（清晰且具有良好的對比度）創造出一種機智的感覺，這與Bolden試圖實現的不同，并沒有減弱網站的用戶體驗。這里唯一的問題是輸入框中的“加入我們郵件俱樂部”的提示應該更清晰一點，但從整體上來說，Cultivated Wit的網站的例子，已經足以說明聰明的設計并不總是導致不好的用戶體驗。

所學到的最佳實踐：

聰明的設計應該盡可能保證不會出錯，并且/或者要在實際的用戶中測試。有時，聰明的設計可能事與愿違并且傷害可用性。

五、多余的動效

壞設計：Dribbble上PayPal收據的概念設計

動效是交互設計里的一個重要元素，但動效的設計必須服從目的。永遠不能為了動效而做動效。不幸的是，設計師們都很愛使用動效，部分原因是動效很有趣，但我們不知道什么時候要適可而止。

Vladyslav Tyzun在Dribbble上展示的PayPal收據概念的設計就是一個錯誤使用動效的案例。

作者/版權所有人：Vladyslav Tyzun。版權條款和許可：合理使用

動效很漂亮，但過度了，用戶總共花費3.5秒才看到支付詳情。付款信息簡單的漸隱會更優雅，而且因為它花費更少的時間，用戶體驗也更好。

這個問題的危險性在于設計師們似乎總覺得動效不夠。

在2016年一整年，Vladyslav的動效收到了超過500個贊和8000多次查看，這會導向一種錯誤的認知即設計師應該為了動效而設計動效。洞察到當前設計趨勢是采用更加直接的展現形式，并且在投入設計動效之前意識到自己想增加效動的傾向，將幫你節省大量的時間并避免很多頭痛的問題。

記?。河脩舻骄W站來都是帶著目的的，我們需要在短暫的空白和時間后就向用戶展示內容，而不是繞一大圈才展示出來。

好設計：Strip的付款動效

當我們基于目標運用動效時，結果將會非常棒。

下方是當用戶接收驗證碼時Stripe的付款動效：

作者/版權所有人：Stripe公司。版權條款和許可：合理使用

Stripe使用動效來讓過程顯得比它們實際的要快，它向用戶提供更新信息（例如：“已發送”）即使事實上用戶還沒有收到驗證碼。這可以防止用戶在等待時覺得困惑，而且向用戶保證短信正在傳送過程中。

Rachel Nabors，一位W3C的網頁動效專家受邀提出以下5條需牢記在心使用動效的原則：

1. 有目的地設計動效：在設計之前先整體思考每個特效的作用；
2. 不僅有12項原則：迪士尼動畫電影制作的12條原則，并不適用于網站和手機應的設計；
3. 首先是有用和必要，然后才是美觀：在用戶體驗中，審美的需求應該是稍后才考慮的；
4. 四倍加速：好的動效都是不顯著的，這也就意味著它們會更快；
5. 設置關閉開關：對于大型的動效，例如視差效果，給予可供關閉的開關。

所學到的最佳實踐：

永遠要基于目的設計動效：太多動效會傷害產品的用戶體驗。要降低審美的權重，更具有功能性。

六、結語

看到這些壞設計的例子是不是很有趣？同時，它們也有教育的價值。

以下就是我們從這5個壞設計和好設計的對比中學習到的經驗：

1. 理解你用戶所需，并提供對應的信息。
2. 如果你有太多信息要傳達，試著使用圖像化信息而非文字。
3. 一定要標注鏈接！用戶并不是喜歡指向不明的鏈接！
4. 避免為用戶的行增加困難，除非是為了讓用戶不要操作這個行為。
5. 測試你的聰明設計，并且小心謹慎的使用它們。
6. 動效是個魔咒，如果你過度使用它，就可能失去它所有的作用。

下次你再看到一個壞設計的例子，停來下想想：弄懂為什么這個設計失敗了？并找到對應做得好的設計案例。

原文地址：https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

譯文作者：王貓貓的名字被占用了

譯文地址：https://www.jianshu.com/p/eae3047c722c

本文由 @王貓貓的名字被占用了 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議