如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：優(yōu)設(shè)網(wǎng)

@IrioLee ：好的交互設(shè)計(jì)可以區(qū)分開(kāi)有質(zhì)量的網(wǎng)站和其他普通網(wǎng)站。然而，如果有明顯的設(shè)計(jì)錯(cuò)誤，它只會(huì)給予你本來(lái)想打動(dòng)的用戶(hù)以刺激和挫敗感。下面是Speckyboy上總結(jié)的讓人最不喜歡的交互設(shè)計(jì)錯(cuò)誤列表，來(lái)看看你中槍了沒(méi)！

1，缺乏對(duì)比

當(dāng)瀏覽網(wǎng)站時(shí)，我們喜歡看頁(yè)面設(shè)計(jì)展示出干凈、清爽的對(duì)比。對(duì)比達(dá)到了一個(gè)重要的目的——它使內(nèi)容可讀，并毫不費(fèi)力地在頁(yè)面上指導(dǎo)用戶(hù)。這是一個(gè)最基本的設(shè)計(jì)概念，只是很奇怪，有些網(wǎng)站似乎就是不明白。

沒(méi)有足夠的對(duì)比度的話(huà)，不管是顏色或整體展示，一個(gè)網(wǎng)站看起來(lái)，在最好的情況下，也會(huì)讓你覺(jué)得有點(diǎn)兒丈二和尚摸不著頭腦，在最壞的情況下，將會(huì)使頁(yè)面完全不可讀。

▲ 案例示范

2，瘋狂的導(dǎo)航

無(wú)論你用的是什么跳出框架的導(dǎo)航創(chuàng)意，先考慮好你的用戶(hù)。這并不是令人無(wú)聊的，而是深思熟慮并且務(wù)實(shí)的。好好利用導(dǎo)航設(shè)計(jì)的最佳實(shí)踐和原則：清晰、簡(jiǎn)單性、一致性和相關(guān)性。

▲ 案例示范

3，非響應(yīng)式的或者不良的觸摸目標(biāo)

響應(yīng)式網(wǎng)站在現(xiàn)在是至關(guān)重要的，我們沒(méi)有借口去創(chuàng)建一個(gè)在你的智能手機(jī)上很難用的網(wǎng)站，除非你做了大量的用戶(hù)測(cè)試，并證明了一個(gè)移動(dòng)友好的網(wǎng)站并不是必需的。

▲ 案例示范

4，令人心煩意亂的音樂(lè)

在晚上放些音樂(lè)很高興而且也令放松。在正確的時(shí)間點(diǎn)上，音樂(lè)可以是很棒的體驗(yàn)。然而，在99.9％的情況下，正確的時(shí)間并不是當(dāng)你瀏覽網(wǎng)站的時(shí)候。

很少有事情比你在瀏覽一個(gè)網(wǎng)站的同時(shí)有一個(gè)刺耳的管弦交響樂(lè)團(tuán)在你耳邊演奏更惱人的事情。如果你是廣告你的下一張專(zhuān)輯，這可能還算是可以原諒的。但即使這樣，也只是可能還算是。

▲ 案例示范

5，毫無(wú)意義的彈出窗口

是的，彈出窗口真的可以讓人感到惱火。特別是注冊(cè)窗口！每個(gè)人都需要更多的注冊(cè)！但是，總有更好的方法來(lái)做你的營(yíng)銷(xiāo)。彈出式窗口可以像沖孩子大喊大叫以試圖吸引其注意力一樣惱人。如果你必須使用彈窗，請(qǐng)讓它們簡(jiǎn)單，有創(chuàng)意，并且易于關(guān)閉。

▲ 案例示范

6，可憐的架構(gòu)

我理解嘗試創(chuàng)新是多么誘人。畢竟，你希望你的設(shè)計(jì)脫穎而出。然而，當(dāng)創(chuàng)造變成了一場(chǎng)火熱的混亂，就是時(shí)候帶入一些必要的組織性。

偉大的設(shè)計(jì)師們都是偉大的溝通者。視覺(jué)層次結(jié)構(gòu)和平衡是創(chuàng)造良好的第一印象的重要層面，同時(shí)它們可以影響用戶(hù)的行為，更重要的是，可以有效地傳遞出網(wǎng)頁(yè)以外的信息。

▲ 案例示范

7，棘手的排版

當(dāng)我訪(fǎng)問(wèn)網(wǎng)站，我喜歡能夠快速而方便地訪(fǎng)問(wèn)信息。我們都不喜歡混亂的不易閱讀的帶陰影效果的大號(hào)字體?；蛘呤窃谝粋€(gè)移動(dòng)的背景嘗試閱讀，或者與要用放大鏡才能查看的小字體苦苦斗爭(zhēng)。

這里有一些可以幫助你復(fù)習(xí)基礎(chǔ)知識(shí)的規(guī)則：

—— 建立一個(gè)清晰的層次結(jié)構(gòu)

—— 注意文本對(duì)齊方式

—— 限制字體的字號(hào)數(shù)量、類(lèi)型和顏色

—— 必要時(shí)充分地利用空白

8，笨拙的表單

有的時(shí)候你會(huì)需要向你的用戶(hù)要一些信息，這本身很好。然而，這并不是說(shuō)你可以為他們提供一個(gè)很長(zhǎng)，很浪費(fèi)時(shí)間的表單。重復(fù)地要求相同的信息也不是一個(gè)好主意。只向用戶(hù)要最少量的必要信息，并且不要忽視表單的跨瀏覽器樣式。

好的表單交互體驗(yàn)來(lái)自于清晰性、簡(jiǎn)潔性和一致性。

這里有一些小貼士：

—— 強(qiáng)調(diào)需要的字段

—— 必要時(shí)顯示進(jìn)度

—— 提供提示

—— 注意字段的長(zhǎng)度

—— 使用先進(jìn)的工具來(lái)定制表單元素

9，沒(méi)有用戶(hù)反饋和數(shù)據(jù)的抄襲

從別人那里獲得靈感并不一定是件壞事，但如果你這樣做，你需要確保你手頭有正確的反饋和數(shù)據(jù)，以確保你在為你的目標(biāo)受眾提供真正的設(shè)計(jì)價(jià)值。

▲ 案例示范

10，顯著的不一致性

在一定程度上風(fēng)格可以混搭的。然而，如果整體效果成了一個(gè)巨大的，丑陋的視覺(jué)“沖突”，那么還是建議回到繪圖板并重新開(kāi)始。

好的交互設(shè)計(jì)是具有一致性的。它使用戶(hù)更好地理解事物是如何工作的，讓用戶(hù)在使用一個(gè)網(wǎng)頁(yè)時(shí)，感覺(jué)到他們?cè)诳刂凭置?，以及提高他們的工作效率。雅各布·尼爾森說(shuō)：“用戶(hù)的期望更多地被證實(shí)是正確的，他們就會(huì)越覺(jué)得他們?cè)诳刂葡到y(tǒng)，并會(huì)更加喜歡它?！?/span>

▲ 案例示范

11，太多的動(dòng)效

偶爾使用的交互式動(dòng)畫(huà)可以提升你的網(wǎng)站內(nèi)容。然而，讓你的頁(yè)面負(fù)擔(dān)一個(gè)又一個(gè)瘋狂的動(dòng)效，會(huì)讓你的用戶(hù)感覺(jué)到有點(diǎn)像是進(jìn)入了在線(xiàn)瘋?cè)嗽豪?，甚至更糟糕的東西。

下面這個(gè)網(wǎng)站是談到瘋狂設(shè)計(jì)時(shí)我一定會(huì)加冕為冠軍的，我可以定下個(gè)挑戰(zhàn)，你在看到它時(shí)有沒(méi)有辦法不感到精神錯(cuò)亂！

▲ 案例示范

同樣類(lèi)型的網(wǎng)站：《逼死設(shè)計(jì)師！2015年全球最丑的網(wǎng)站排行榜新鮮出爐》

12，追逐趨勢(shì)

保持一點(diǎn)時(shí)髦是很讓人高興的。然而，花時(shí)間去追逐的流行語(yǔ)和交互設(shè)計(jì)風(fēng)格，你最終會(huì)得到一個(gè)網(wǎng)站，它閱讀起來(lái)就像是陳詞濫調(diào)。如果可以的話(huà)，你要敢于不同。

交互設(shè)計(jì)——四種正確設(shè)計(jì)的方式

所以，以上便是我收藏的我最討厭的交互設(shè)計(jì)錯(cuò)誤。下面是一個(gè)便利的小列表，以提醒你如何用正確的方式設(shè)計(jì)！

1）目標(biāo)驅(qū)動(dòng)。不要為了添加效果而添加效果。不要選擇某個(gè)調(diào)色板，導(dǎo)航欄，或者圖標(biāo)僅僅因?yàn)槟阏J(rèn)為它看起來(lái)不錯(cuò)。試試著眼在最終目標(biāo)上。你想讓你的網(wǎng)站達(dá)到什么目標(biāo)？一旦你已經(jīng)確定了那個(gè)目標(biāo)，那么你很有可能就有了一個(gè)關(guān)于你應(yīng)該使用什么樣的交互設(shè)計(jì)的好主意。

2）記住要有人情味。如果你屬于藝術(shù)型（我們不都是么），那你面對(duì)的誘惑是去創(chuàng)造美麗的東西，一些優(yōu)秀的，一些有人從未做過(guò)的事。然而，如果沒(méi)有人創(chuàng)建過(guò)和使用過(guò)，可能有一個(gè)很好的原因就是，它們確實(shí)沒(méi)用。記住，網(wǎng)站的訪(fǎng)客都是人類(lèi)。你創(chuàng)造出旨在能直接吸引他們的東西。

3）保持一致性。是的，網(wǎng)站本身應(yīng)該是很令人驚嘆的。然而，網(wǎng)站也應(yīng)該需要正常可用。你會(huì)有需要遵守某些設(shè)計(jì)慣例，以使網(wǎng)站易于瀏覽和理解。不要為了與眾不同而違背常理。相反，接受你將需要實(shí)現(xiàn)一定的規(guī)則的事實(shí)，能幫助你的用戶(hù)輕松地訪(fǎng)問(wèn)你的網(wǎng)站。

4）測(cè)試測(cè)試再測(cè)試。如果你發(fā)現(xiàn)任何疑問(wèn)，就進(jìn)行測(cè)試！有很多用戶(hù)研究工具可以幫助你發(fā)現(xiàn)在產(chǎn)品中用戶(hù)受困或者分心的地方。ａ?。。鉁y(cè)試，分析眼 動(dòng)跟蹤數(shù)據(jù)，或者是直接讓你的客戶(hù)，同事和朋友嘗試你的新設(shè)計(jì)。沒(méi)有什么比真正的反饋更有價(jià)值，并且?guī)缀鯖](méi)有一個(gè)更好的方法能如此改進(jìn)你的交互設(shè)想。

原文地址：speckyboy

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)