文章主要是通過展示5個(gè)明顯的壞設(shè)計(jì)，來反襯好設(shè)計(jì)是怎么更好工作的，并提煉出一些經(jīng)驗(yàn)來讓我們?yōu)橛脩魝儎?chuàng)造良好的隱形的體驗(yàn)。

對比壞設(shè)計(jì)與對應(yīng)的好設(shè)計(jì)非常有趣，而且設(shè)計(jì)師可以從中獲得重要的經(jīng)驗(yàn)。這種對比突出了設(shè)計(jì)中要避免的陷阱，同時(shí)讓我們理解了如何將設(shè)計(jì)理論轉(zhuǎn)換成現(xiàn)實(shí)生活中的解決方案。

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

好的設(shè)計(jì)，當(dāng)它工作良好時(shí)，是隱形的。只有當(dāng)它工作不良時(shí)，才會(huì)被人注意到。

所以，通過展示5個(gè)明顯的壞設(shè)計(jì)，來反襯好設(shè)計(jì)是怎么更好工作的，并提煉出一些經(jīng)驗(yàn)來讓我們?yōu)橛脩魝儎?chuàng)造良好的隱形的體驗(yàn)。

一、信息過載

壞設(shè)計(jì)：洛杉磯的停車指示牌

洛杉磯（LA）的停車指示牌，可以說是近十年來信息過載的典型代表。它們出了名的難以理解，因?yàn)榻煌ㄒ?guī)則很復(fù)雜，因此在一塊小小的區(qū)域里要傳達(dá)大量的信息。

這些指示牌有多令人費(fèi)解呢？

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

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

從LA停車指示牌的歷史來看，這個(gè)樣式已經(jīng)是相當(dāng)簡單的了。試想周二早上9點(diǎn)你開著車上了這條公路。那你可以停在這里嗎？

這么簡單的問題竟然要費(fèi)盡大量的認(rèn)知資源去回答！

作為設(shè)計(jì)師，我們經(jīng)常會(huì)面對需要在一塊小區(qū)域里傳遞大量信息的設(shè)計(jì)問題。LA的停車指示牌可能是其中最極端的一個(gè)例子，但很多時(shí)候在移動(dòng)端應(yīng)用設(shè)計(jì)中也會(huì)面臨同樣的問題。

那么是否有一個(gè)通用的辦法可以解決停車標(biāo)識及類似的設(shè)計(jì)問題呢？

好設(shè)計(jì)：Nikki Sylianteng的停車指示設(shè)計(jì)

設(shè)計(jì)一個(gè)可以展示所有信息，同時(shí)容易理解的的標(biāo)示牌聽起來是一個(gè)不可完成的任務(wù)，但這恰恰就是Brooklyn的設(shè)計(jì)師Nikki Sylianteng完成的。

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

Nikki的設(shè)計(jì)試驗(yàn)性應(yīng)用于LA標(biāo)識設(shè)計(jì)中。Nikki的設(shè)計(jì)有效的原因之一正是因?yàn)樗且杂脩魹橹行牡模篘ikki意識到駕駛?cè)似鋵?shí)只想知道他們現(xiàn)在是否可以停在這里。

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

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

現(xiàn)在當(dāng)你看到這塊標(biāo)示時(shí)，你就知道周二早上9點(diǎn)是不可以停車的，這樣的指示牌子瞄一眼就能懂。

所學(xué)到的最佳實(shí)踐：

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

數(shù)據(jù)可視化

二?神秘肉式導(dǎo)航

壞設(shè)計(jì)：LazorOffice.com

根據(jù)1998年Vincent Flanders創(chuàng)建的網(wǎng)頁The Suck，神秘肉導(dǎo)航（MMN）用于指代那些必須要用戶點(diǎn)擊鏈接，或把鼠標(biāo)懸停鏈接之上才知道指向目標(biāo)的設(shè)計(jì)。

“神秘肉”這個(gè)短語，起源于美國公立學(xué)校的自助餐廳提供的肉類，因?yàn)楸贿^度處理而根本無法辨別出來。

MMN不好，是因?yàn)樗档土藢?dǎo)航元素的可見性。因?yàn)橛脩舯仨氁ァ安隆睂?dǎo)航的目的地，或者必須要有點(diǎn)擊操作，因此增加用戶的認(rèn)知負(fù)載。目前老式的網(wǎng)頁設(shè)計(jì)中還可見到MMN，現(xiàn)代網(wǎng)頁設(shè)計(jì)中已經(jīng)很少見到了。

我們以Lazor Office為例——一個(gè)提供預(yù)制房屋的設(shè)計(jì)公司網(wǎng)站。

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

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

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

是的，它們可以點(diǎn)擊，如果你把鼠標(biāo)移動(dòng)到這些圖片上，它會(huì)變指針的樣子，但是當(dāng)你點(diǎn)擊后會(huì)發(fā)生什么呢？

“點(diǎn)擊后查看”并不是個(gè)好的用戶體驗(yàn)解決方案。這種設(shè)計(jì)會(huì)會(huì)帶來的改變是——你的用戶會(huì)棄用這些導(dǎo)航，而從你的競爭對手那里獲得替代的解決方案。

好設(shè)計(jì)：Interaction Design Foundation網(wǎng)頁的課程卡片

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

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

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

所學(xué)到的最佳實(shí)踐：

總是標(biāo)注清楚鏈接的指向！你不會(huì)喜歡吃神秘肉的。同理，你的用戶也不喜歡點(diǎn)擊指向未知的鏈接。

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

壞設(shè)計(jì)：iFly50.com

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

其中一個(gè)例子就是iFly50——KLM公司（荷蘭皇家航空公司）為iFly雜志周年紀(jì)念創(chuàng)建的網(wǎng)站。

IFly是一個(gè)垂直滾動(dòng)的網(wǎng)頁，展示了50個(gè)旅游目的地，在某些目的地（如下）的 圖片底部會(huì)出現(xiàn)一個(gè)按鈕讓用戶“點(diǎn)擊并保持”幾秒以查看更多圖片。

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

iFly50網(wǎng)站希望用戶每次要查看更多圖片時(shí)，都點(diǎn)擊并保持幾秒，這種在每個(gè)行動(dòng)上都增加幾秒的困難行為會(huì)導(dǎo)致極差的體驗(yàn)。

試想，如果你在瀏覽器中查看每個(gè)鏈接都需要點(diǎn)擊然后保持幾秒，而不是立即得到加載相應(yīng)的頁面的結(jié)果，那么僅需要幾個(gè)“點(diǎn)擊并保持”的操作，你將會(huì)放棄探索整個(gè)互聯(lián)網(wǎng)。

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

好設(shè)計(jì)：iOS的彈性滾動(dòng)

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

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

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

所學(xué)到的最佳實(shí)踐：

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

四、“聰明”但忽略了可用性的設(shè)計(jì)

壞設(shè)計(jì)：Bolden.nl

有時(shí)，聰明的設(shè)計(jì)也會(huì)對用戶體驗(yàn)造成重創(chuàng)。令這個(gè)錯(cuò)誤變得更加危險(xiǎn)的是：設(shè)計(jì)師們熱愛聰明的設(shè)計(jì)，因?yàn)檫@些小小的圖形驚喜可以讓我們設(shè)計(jì)師的臉上浮現(xiàn)出微笑。

但可悲的是：大多數(shù)人類并不是設(shè)計(jì)師。更為可悲的是：并不是所有聰明的設(shè)計(jì)是好設(shè)計(jì)，尤其是當(dāng)它們造成了不可達(dá)性、不可見性或不可用性的問題時(shí)。

以荷蘭戰(zhàn)略設(shè)計(jì)和開發(fā)工作室Bolden的網(wǎng)站為例：

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

你能夠告訴我，他們的主頁想要傳遞什么嗎？不行？這是因?yàn)槟惚仨氁苿?dòng)你們的鼠標(biāo)到頁面的邊角，才能查看到正確的信息。

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

這是聰明的設(shè)計(jì)嗎？當(dāng)然是！那它是糟糕的設(shè)計(jì)嗎？毫無疑問！

這是一個(gè)典型為設(shè)計(jì)師而非為用戶設(shè)計(jì)的案例，網(wǎng)站設(shè)計(jì)者為了展現(xiàn)新奇的設(shè)計(jì)樣式，顯著的降低了標(biāo)題的清晰度。無論誰設(shè)計(jì)的這個(gè)頁面，他也忘記指引用戶移動(dòng)鼠標(biāo)到角落以查看標(biāo)題，這也就意味著標(biāo)題能被看到是非常隨機(jī)的。

更進(jìn)一步來說，即使標(biāo)題當(dāng)前可見，但由于文本與背景的對比不足，用戶仍然會(huì)看到重疊的字母，所有的一切造就了一個(gè)對用戶不友好的網(wǎng)站。

好設(shè)計(jì)：CultivatedWit.com

CultivatedWit的網(wǎng)站就是以上壞設(shè)計(jì)的反例，它展示了如何使用不犧牲可用性的聰明設(shè)計(jì)。

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

CultivatedWit的首頁展示了一只貓頭鷹的插圖，當(dāng)鼠標(biāo)置于貓頭鷹插圖之上時(shí)，貓頭鷹就會(huì)眨眼。

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

驚喜吧！當(dāng)鼠標(biāo)指向貓頭鷹時(shí)，它就會(huì)向你眨眼，同時(shí)留意到留白區(qū)域的深意。

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

當(dāng)你滑動(dòng)到下頁時(shí)，你會(huì)看見：

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

網(wǎng)頁不犧牲用戶體驗(yàn)也可以表現(xiàn)出聰明。

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

所學(xué)到的最佳實(shí)踐：

聰明的設(shè)計(jì)應(yīng)該盡可能保證不會(huì)出錯(cuò)，并且/或者要在實(shí)際的用戶中測試。有時(shí)，聰明的設(shè)計(jì)可能事與愿違并且傷害可用性。

五、多余的動(dòng)效

壞設(shè)計(jì)：Dribbble上PayPal收據(jù)的概念設(shè)計(jì)

動(dòng)效是交互設(shè)計(jì)里的一個(gè)重要元素，但動(dòng)效的設(shè)計(jì)必須服從目的。永遠(yuǎn)不能為了動(dòng)效而做動(dòng)效。不幸的是，設(shè)計(jì)師們都很愛使用動(dòng)效，部分原因是動(dòng)效很有趣，但我們不知道什么時(shí)候要適可而止。

Vladyslav Tyzun在Dribbble上展示的PayPal收據(jù)概念的設(shè)計(jì)就是一個(gè)錯(cuò)誤使用動(dòng)效的案例。

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

動(dòng)效很漂亮，但過度了，用戶總共花費(fèi)3.5秒才看到支付詳情。付款信息簡單的漸隱會(huì)更優(yōu)雅，而且因?yàn)樗ㄙM(fèi)更少的時(shí)間，用戶體驗(yàn)也更好。

這個(gè)問題的危險(xiǎn)性在于設(shè)計(jì)師們似乎總覺得動(dòng)效不夠。

在2016年一整年，Vladyslav的動(dòng)效收到了超過500個(gè)贊和8000多次查看，這會(huì)導(dǎo)向一種錯(cuò)誤的認(rèn)知即設(shè)計(jì)師應(yīng)該為了動(dòng)效而設(shè)計(jì)動(dòng)效。洞察到當(dāng)前設(shè)計(jì)趨勢是采用更加直接的展現(xiàn)形式，并且在投入設(shè)計(jì)動(dòng)效之前意識到自己想增加效動(dòng)的傾向，將幫你節(jié)省大量的時(shí)間并避免很多頭痛的問題。

記住：用戶到網(wǎng)站來都是帶著目的的，我們需要在短暫的空白和時(shí)間后就向用戶展示內(nèi)容，而不是繞一大圈才展示出來。

好設(shè)計(jì)：Strip的付款動(dòng)效

當(dāng)我們基于目標(biāo)運(yùn)用動(dòng)效時(shí)，結(jié)果將會(huì)非常棒。

下方是當(dāng)用戶接收驗(yàn)證碼時(shí)Stripe的付款動(dòng)效：

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

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

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

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

所學(xué)到的最佳實(shí)踐：

永遠(yuǎn)要基于目的設(shè)計(jì)動(dòng)效：太多動(dòng)效會(huì)傷害產(chǎn)品的用戶體驗(yàn)。要降低審美的權(quán)重，更具有功能性。

六、結(jié)語

看到這些壞設(shè)計(jì)的例子是不是很有趣？同時(shí)，它們也有教育的價(jià)值。

以下就是我們從這5個(gè)壞設(shè)計(jì)和好設(shè)計(jì)的對比中學(xué)習(xí)到的經(jīng)驗(yàn)：

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

下次你再看到一個(gè)壞設(shè)計(jì)的例子，停來下想想：弄懂為什么這個(gè)設(shè)計(jì)失敗了？并找到對應(yīng)做得好的設(shè)計(jì)案例。

原文地址：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

本文由 @王貓貓的名字被占用了 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議