交互設(shè)計從來都不容易。它包括了用戶行為的深度分析，和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計模式的出現(xiàn)，事情并不會變?nèi)菀住?span>

艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動畫，不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗，讓用戶面帶笑容完成轉(zhuǎn)化？如果你對常見的設(shè)計陷阱有所警覺，就能更少犯錯。

為了方便——可能也為了讓你知道你不是獨自一人——以下總結(jié)了最常見的交互設(shè)計誤區(qū)。

1. 鋪天蓋地的創(chuàng)新

網(wǎng)頁設(shè)計師都非常有創(chuàng)造力。我們希望通過作品來表達自我。我們總是在尋求創(chuàng)新的設(shè)計方法來脫穎而出。但是，當(dāng)涉及到交互設(shè)計時，創(chuàng)新并不總是好事。甚至?xí)o你的網(wǎng)站帶來壞的影響。用戶渴望熟悉的事物，他們總是會遵循一些特定的操作方式。

Randy J. Hunt，Etsy的創(chuàng)意總監(jiān)和Product Design for the Web作者，清晰地陳述過：“嘿，設(shè)計師：別再TM自作聰明了?！痹谖恼轮?，他詳細(xì)解釋了為什么別在網(wǎng)頁設(shè)計上過分熱衷創(chuàng)新。

以Iotorama網(wǎng)站為例。它挺漂亮，音樂深情，但是看著滿屏幕移動的球，用戶不知所措。不要誤解我的意思，這個項目非常出色，超級有創(chuàng)造力！我喜歡這個大膽的創(chuàng)意，但它一點也不直觀。

還有一個例子。Safety on the Slopes項目背后的創(chuàng)作者想到一個巧妙的交互式圖形，用來警告用戶冬季運動的危險。非常創(chuàng)新，同時也很直觀、有趣、令人印象深刻。

2. 令人困惑的導(dǎo)航

“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計師試圖使用折衷的名稱來尋求新穎。比如Chijoff網(wǎng)站就讓用戶不知道他們究竟提供什么，如何聘請他們。需要看上好一陣子，才能理解“共同創(chuàng)造”頁面實際上就等同于“服務(wù)”。甚至還有，通讀整頁后用戶仍然不知道該怎么做……頁面末尾只有個小注冊表單用來獲取最新的行業(yè)新聞和提示！在“聯(lián)系”頁面也沒有表單，只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。

你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎？實際上它鏈接到他們的Facebook主頁。誰能想到？

相反，看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對不會迷路。

3. 雜亂無章

有一段時期，網(wǎng)站都試圖把一切可能的東西擺上臺面。那些日子已經(jīng)一去不復(fù)返，但是很多網(wǎng)站仍然在犯這個錯誤?？纯催@個在線商城：

設(shè)計師試圖堅持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案：“那么，今天你想要什么？”，但整個布局的外觀和感覺非常過時。

EBay是主要在在線零售商之一，在這點上做得不錯。沒有用產(chǎn)品圖片、促銷和各種行動召喚塞滿整個頁面，而是保持它干凈簡潔，強調(diào)他們確實希望用戶首先關(guān)注的東西，并附上清晰的提示，接下來該怎么做。

4. 注意對比，大哥！

對比是創(chuàng)造視覺層級、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。

這個網(wǎng)站是最簡單生動的例子。他們做到了統(tǒng)一一致，但整體背景和按鈕并不夠吸引人，尤其是在訂購按鈕上。

相比來看這個。顏色選用很接近，但結(jié)果卻完全不同。而且，創(chuàng)新的滾動效果，流暢地介紹了產(chǎn)品的新功能——反光材料。很酷，對吧？

5. 忽視表單樣式

表單設(shè)計是用戶體驗最基本的部分。每個網(wǎng)站都有一個目標(biāo)——無論是樹立榜樣、直接售賣產(chǎn)品或是提供信息。不幸的是，許多網(wǎng)站有著光鮮的首頁，卻寧可用長表單和復(fù)雜的驗證碼來使用戶厭煩致死。除非用戶有強烈的先導(dǎo)動機，否則他們就會離開。

有了JCF這樣的有效的跨瀏覽器的解決方案，是時候忘記那些丑陋的默認(rèn)表單元素了，轉(zhuǎn)向一種更加沉浸的用戶體驗吧。

另一件氣人的事，是表單要求太多信息，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項。

如果你看了mostlyserious.io的表單，你絕對會喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺。

 

 

最后……

不要懶于測試！對你重要的對于顧客未必重要。他們在哪里遇到問題卡?。渴菍?dǎo)航、奇特的視覺差滾動效果、還是長時間加載的視頻？用戶測試的最大好處之一，是你可以通過用戶的視角來觀察，關(guān)注他們的需求、做出改進。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會感到困惑和沮喪?！　〗换ピO(shè)計從來都不容易。它包括了用戶行為的深度分析，和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計模式的出現(xiàn)，事情并不會變?nèi)菀住?span>

艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動畫，不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗，讓用戶面帶笑容完成轉(zhuǎn)化？如果你對常見的設(shè)計陷阱有所警覺，就能更少犯錯。

為了方便——可能也為了讓你知道你不是獨自一人——以下總結(jié)了最常見的交互設(shè)計誤區(qū)。

1. 鋪天蓋地的創(chuàng)新

網(wǎng)頁設(shè)計師都非常有創(chuàng)造力。我們希望通過作品來表達自我。我們總是在尋求創(chuàng)新的設(shè)計方法來脫穎而出。但是，當(dāng)涉及到交互設(shè)計時，創(chuàng)新并不總是好事。甚至?xí)o你的網(wǎng)站帶來壞的影響。用戶渴望熟悉的事物，他們總是會遵循一些特定的操作方式。

Randy J. Hunt，Etsy的創(chuàng)意總監(jiān)和Product Design for the Web作者，清晰地陳述過：“嘿，設(shè)計師：別再TM自作聰明了?！痹谖恼轮?，他詳細(xì)解釋了為什么別在網(wǎng)頁設(shè)計上過分熱衷創(chuàng)新。

以Iotorama網(wǎng)站為例。它挺漂亮，音樂深情，但是看著滿屏幕移動的球，用戶不知所措。不要誤解我的意思，這個項目非常出色，超級有創(chuàng)造力！我喜歡這個大膽的創(chuàng)意，但它一點也不直觀。

Overwhelmed with Innovation

還有一個例子。Safety on the Slopes項目背后的創(chuàng)作者想到一個巧妙的交互式圖形，用來警告用戶冬季運動的危險。非常創(chuàng)新，同時也很直觀、有趣、令人印象深刻。

Irwin

2. 令人困惑的導(dǎo)航

“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計師試圖使用折衷的名稱來尋求新穎。比如Chijoff網(wǎng)站就讓用戶不知道他們究竟提供什么，如何聘請他們。需要看上好一陣子，才能理解“共同創(chuàng)造”頁面實際上就等同于“服務(wù)”。甚至還有，通讀整頁后用戶仍然不知道該怎么做……頁面末尾只有個小注冊表單用來獲取最新的行業(yè)新聞和提示！在“聯(lián)系”頁面也沒有表單，只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。

Chijoffco

你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎？實際上它鏈接到他們的Facebook主頁。誰能想到？

Maisonmargiela

相反，看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對不會迷路。

3. 雜亂無章

有一段時期，網(wǎng)站都試圖把一切可能的東西擺上臺面。那些日子已經(jīng)一去不復(fù)返，但是很多網(wǎng)站仍然在犯這個錯誤。看看這個在線商城：

Flipkart

設(shè)計師試圖堅持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案：“那么，今天你想要什么？”，但整個布局的外觀和感覺非常過時。

EBay是主要在在線零售商之一，在這點上做得不錯。沒有用產(chǎn)品圖片、促銷和各種行動召喚塞滿整個頁面，而是保持它干凈簡潔，強調(diào)他們確實希望用戶首先關(guān)注的東西，并附上清晰的提示，接下來該怎么做。

ebay

4. 注意對比，大哥！

對比是創(chuàng)造視覺層級、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。

這個網(wǎng)站是最簡單生動的例子。他們做到了統(tǒng)一一致，但整體背景和按鈕并不夠吸引人，尤其是在訂購按鈕上。

Modern themes

相比來看這個。顏色選用很接近，但結(jié)果卻完全不同。而且，創(chuàng)新的滾動效果，流暢地介紹了產(chǎn)品的新功能——反光材料。很酷，對吧？

Bjornborg

5. 忽視表單樣式

表單設(shè)計是用戶體驗最基本的部分。每個網(wǎng)站都有一個目標(biāo)——無論是樹立榜樣、直接售賣產(chǎn)品或是提供信息。不幸的是，許多網(wǎng)站有著光鮮的首頁，卻寧可用長表單和復(fù)雜的驗證碼來使用戶厭煩致死。除非用戶有強烈的先導(dǎo)動機，否則他們就會離開。

有了JCF這樣的有效的跨瀏覽器的解決方案，是時候忘記那些丑陋的默認(rèn)表單元素了，轉(zhuǎn)向一種更加沉浸的用戶體驗吧。

Dkkma

另一件氣人的事，是表單要求太多信息，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項。

Mostlyserious

如果你看了mostlyserious.io的表單，你絕對會喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺。

 

交互設(shè)計的5個常見錯誤

 

最后……

不要懶于測試！對你重要的對于顧客未必重要。他們在哪里遇到問題卡??？是導(dǎo)航、奇特的視覺差滾動效果、還是長時間加載的視頻？用戶測試的最大好處之一，是你可以通過用戶的視角來觀察，關(guān)注他們的需求、做出改進。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會感到困惑和沮喪。