本文由葡萄城技術(shù)團(tuán)隊(duì)原創(chuàng)并首發(fā)

轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。

?

一名開發(fā)者或設(shè)計(jì)師通常可以在一秒內(nèi)指出優(yōu)秀的設(shè)計(jì)，但對(duì)于糟糕的設(shè)計(jì)只需最多半秒就能指出。所以，糟糕的設(shè)計(jì)往往總是能受到更多人的關(guān)注。網(wǎng)上就有那么一批網(wǎng)友致力于收集這些設(shè)計(jì)，下面列出網(wǎng)友收集的一部分讓大家先看一看：

一個(gè)沒有任何標(biāo)示的樓梯

(圖片來源于網(wǎng)絡(luò))

?

?

一個(gè)在龍頭水嘴下方的開關(guān)

?(圖片來源于網(wǎng)絡(luò))

?

?

?一個(gè)并不透明的刻度標(biāo)尺

(圖片來源于網(wǎng)絡(luò))

?

在實(shí)際的Web設(shè)計(jì)工作中， 從具有誤導(dǎo)性的按鈕到冗長(zhǎng)復(fù)雜的表單，再到討厭的導(dǎo)航模式，糟糕的設(shè)計(jì)在我們身邊幾乎隨時(shí)可見，盡管它有時(shí)可能很可笑，但有時(shí)帶來的后果也可能會(huì)非常嚴(yán)重。

但無論如何，通過了解和學(xué)習(xí)這些糟糕的設(shè)計(jì)，相信我們一定能從中獲得一些啟發(fā)，避免這樣的問題在自己的工作中再次出現(xiàn)。那么下面，讓我們一起來看看幾個(gè)值得我們?nèi)W(xué)習(xí)的案例，也許我們可以從中受到一些啟發(fā)。

?

避免歧義

一個(gè)經(jīng)典的設(shè)計(jì)缺陷被稱為“諾曼門”。如果你是第一次聽說過這個(gè)詞，那么你可以想想，你有沒有遇到過這樣一扇不知該拉還是推的門，如果遇到過，那么這就是一扇諾曼門。

(圖片來源于網(wǎng)絡(luò))

?

而這里的“諾曼門”，除了門這種物品外，更在廣義范圍內(nèi)代指不利于用戶使用的物品。這個(gè)問題是因?yàn)樵愀獾脑O(shè)計(jì)誤導(dǎo)了你的直覺，不然是使你根本不知道如何使用，要么是它為你提供了一種反人類設(shè)計(jì)，和你的使用習(xí)慣相悖。

?

?

而在Web設(shè)計(jì)領(lǐng)域，Web UI無疑是很重要的一塊，但如果只是僅僅提供了一套精美的UI，而任何人都不知道該在哪里找到他們需要的信息，那像這樣精美設(shè)計(jì)又有什么意義呢？

所以通過充分的用戶體驗(yàn)和測(cè)試Web設(shè)計(jì)的有效性還是很有必要的，而實(shí)際的測(cè)試過程也很簡(jiǎn)單，你可以不做任何介紹，僅通過觀察目標(biāo)用戶是如何瀏覽你的網(wǎng)站的。這樣就能知道你的設(shè)計(jì)對(duì)用戶是否有幫助，以及了解到他們更期望以何種更自然的方式去使用，以便隨后你能更好的去完善你的網(wǎng)站。

?

避免人為錯(cuò)誤

用戶難免會(huì)犯錯(cuò)，不論你的設(shè)計(jì)多么出色。

比如選了錯(cuò)的東西，點(diǎn)了錯(cuò)的鍵，按鈕錯(cuò)誤的按鈕等。

2018年初，夏威夷假警報(bào)事件就是一個(gè)例子。誤報(bào)是因?yàn)楣ぷ魅藛T按錯(cuò)了按鈕而觸發(fā)的，這次誤報(bào)導(dǎo)致了當(dāng)?shù)鼐用窦坝慰拖萑肓丝只拧?/p>

(圖片來源于網(wǎng)絡(luò))

?

許多設(shè)計(jì)師在這次事件后思考，更好的設(shè)計(jì)是否可以避免這種情況。

按錯(cuò)警報(bào)按鈕的原因我們現(xiàn)在已經(jīng)不得而知了，但大家通過集思廣益，提出了很多可以盡可能防止人為錯(cuò)誤出現(xiàn)的保障措施。例如，在多次確認(rèn)“這不是演習(xí)”前，發(fā)送警報(bào)按鈕是禁用的，或者“這是演習(xí)”、“這不是演習(xí)”分屬不同的菜單項(xiàng)等。

雖然這事帶來的影響很大，但即便像在網(wǎng)上購物這樣的小事上，一個(gè)小小的人為錯(cuò)誤也會(huì)給你的支付和業(yè)務(wù)帶來很大的影響。

(圖片來源于網(wǎng)絡(luò))

?

在網(wǎng)站中防止人為錯(cuò)誤而影響用戶體驗(yàn)也是非常重要的，試想一下：你的用戶在你的網(wǎng)站上花了很長(zhǎng)時(shí)間填寫了一份很長(zhǎng)的表單，但在點(diǎn)擊提交后因?yàn)椴糠謨?nèi)容不合規(guī)，在提交刷新后所有內(nèi)容都消失了，這樣是不是會(huì)對(duì)用戶體驗(yàn)帶來崩塌式的挫敗打擊？ 那么在提交前，向用戶彈出不完整/驗(yàn)證的提示，或者，在頁面關(guān)閉前為用戶提供 “您確定要離開嗎？”的提示。類似像這樣幾個(gè)簡(jiǎn)單的行為就可以幫助你的用戶使用體驗(yàn)不會(huì)受到影響，也并避免將來為網(wǎng)站帶來任何不利的影響。

?

避免不當(dāng)?shù)呐虐?/h3>

在網(wǎng)站設(shè)計(jì)中，使用什么樣的字體，用多大的字號(hào)，使用多少間距，才能突出重點(diǎn)劃分出頁面內(nèi)容中的主次應(yīng)該是網(wǎng)站在設(shè)計(jì)之初就應(yīng)該優(yōu)先考慮且完成的。

把你的賣點(diǎn)表述清楚，讓你的Call To Action從其他繁雜的信息中脫穎而出，是你組織網(wǎng)站內(nèi)容的設(shè)計(jì)基礎(chǔ)。作為設(shè)計(jì)師應(yīng)該站在用戶的角度下去思考，如果用戶只是快速的瀏覽你的網(wǎng)頁，你該怎么樣，通過什么形式快速打動(dòng)他并且讓他接著做你想要他做的事。

?

?

其中，由于排版問題，在2017年奧斯卡頒獎(jiǎng)典禮的最佳影片環(huán)節(jié)時(shí)，也產(chǎn)生了一個(gè)“史詩級(jí)”烏龍。因?yàn)轭C獎(jiǎng)人拿錯(cuò)了已經(jīng)使用過的最佳女主角信封，把本應(yīng)頒給《月光男孩》的獎(jiǎng)錯(cuò)頒給了《愛樂之城》。其實(shí)這個(gè)錯(cuò)誤通過調(diào)整內(nèi)容的次序就能避免了，這樣即便拿錯(cuò)了信封，在打開信封的那一刻，頒獎(jiǎng)人就能知道頒獎(jiǎng)獎(jiǎng)項(xiàng)從而避免這樣的烏龍。

“Best Picture” 在手卡的最下方

(圖片來源于網(wǎng)絡(luò))

?

避免過度設(shè)計(jì)

每當(dāng)有新的設(shè)計(jì)潮流出現(xiàn)時(shí)，親身嘗試都很令人興奮。但過分套用設(shè)計(jì)潮流，有時(shí)也會(huì)讓用戶無法理解。

這里以幽靈按鈕為例，幽靈按鈕是一個(gè)沒有復(fù)雜色彩、樣式和紋理，只以單色勾勒出邊框且背景透明的按鈕，這類按鈕因其具有纖薄而素雅的視覺美感而在當(dāng)時(shí)引起了相當(dāng)大的轟動(dòng)，但如果因?yàn)槭褂梅绞讲划?dāng)，它們可能并不會(huì)你所想的那樣為用戶提供幫助，因?yàn)樗鼈兛雌饋硐袷琼撁嫔系囊环N設(shè)計(jì)元素，而不是可供用戶點(diǎn)擊的交互式元素。

(圖片來源于網(wǎng)絡(luò))

?

在設(shè)計(jì)方面，緊跟最潮流的設(shè)計(jì)趨勢(shì)沒有問題，但最新的設(shè)計(jì)趨勢(shì)并不一定適合自己的業(yè)務(wù)和網(wǎng)站。多數(shù)時(shí)候，開發(fā)者/設(shè)計(jì)師 應(yīng)為用戶提供的是有用的設(shè)計(jì)，而不是過于酷炫的設(shè)計(jì)，不要讓產(chǎn)品成為我們“自嗨”的作品。用戶并不會(huì)關(guān)心你使用了什么花里胡哨的設(shè)計(jì)思想和技術(shù)，他只會(huì)關(guān)心他能不能從你的產(chǎn)品中找到他想要的。

?

總結(jié)

盡管設(shè)計(jì)上的問題很容易被發(fā)現(xiàn)，但如果我們只從開發(fā)者或設(shè)計(jì)師的視角去審視自己的作品，往往這些問題會(huì)被蒙蔽。所以，你可以試試從用戶的角度進(jìn)行思考，自己?jiǎn)枂栕约?#xff0c;這很直觀嗎？這好用嗎？這有歧義嗎？如果自己能為這些問題提供出令自己滿意的答案，那么，恭喜你變得更加出色了。

總結(jié)

以上是生活随笔為你收集整理的糟糕的设计会为我们的工作带来什么启发？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。