互動設計的5個常見錯誤 豔麗的圖片、順暢的滑鼠懸停效果和意外的動畫，不再那麼容易引起使用者注意了。但難題卻沒有解決——如何創造令人愉快的使用者體驗，讓使用者面帶笑容完成轉化？如果你對常見的設計陷阱有所警覺，就能更少犯錯。 為了方便——可能也為了讓你知道你不是獨自一人——以下總結了最常見的互動設計誤區。

1、鋪天蓋地的創新 網頁設計師都非常有創造力。我們希望通過作品來表達自我。我們總是在尋求創新的設計方法來脫穎而出。但是，當涉及到互動設計時，創新並不總是好事。甚至會給你的網站帶來壞的影響。使用者渴望熟悉的事物，他們總是會遵循一些特定的操作方式。 Randy J. Hunt，Etsy的創意總監和Product Design for the Web作者，清晰地陳述過：“嘿，設計師：別再TM自作聰明瞭。”在文章中，他詳細解釋了為什麼別在網頁設計上過分熱衷創新。 以Iotorama網站為例。它挺漂亮，音樂深情，但是看著滿螢幕移動的球，使用者不知所措。不要誤解我的意思，這個專案非常出色，超級有創造力！我喜歡這個大膽的創意，但它一點也不直觀。

還有一個例子。Safety on the Slopes專案背後的創作者想到一個巧妙的互動式圖形，用來警告使用者冬季運動的危險。非常創新，同時也很直觀、有趣、令人印象深刻。 2、令人困惑的導航 “不要自作聰明”的準則也可以沿用到導航上。有些設計師試圖使用折衷的名稱來尋求新穎。比如Chijoff 網站就讓使用者不知道他們究竟提供什麼，如何聘請他們。需要看上好一陣子，才能理解“共同創造”頁面實際上就等同於“服務”。甚至還有，通讀整頁後用戶仍然 不知道該怎麼做……頁面末尾只有個小注冊表單用來獲取最新的行業新聞和提示！在“聯絡”頁面也沒有表單，只有郵編和郵箱地址。使人們聯絡或聘用他們非常困 難。 你能猜出“Universe”在Maison Margiela網站中是什麼意思嗎？實際上它連結到他們的Facebook主頁。誰能想到？ 相反，看看legworkstudio的網站。它的創意與超凡令人震撼。導航非常清晰不含糊。使用者絕對不會迷路。

3. 雜亂無章 有一段時期，網站都試圖把一切可能的東西擺上檯面。那些日子已經一去不復返，但是很多網站仍然在犯這個錯誤。看看這個線上商城： 設計師試圖堅持一種單色配色，但是大量顏色不同的色塊、logo和字型，在這個頁面上就足夠讓使用者步履蹣跚。搜尋框有著醒目的文案：“那麼，今天你想要什麼？”，但整個佈局的外觀和感覺非常過時。 EBay是主要在線上零售商之一，在這點上做得不錯。沒有用產品圖片、促銷和各種行動召喚塞滿整個頁面，而是保持它乾淨簡潔，強調他們確實希望使用者首先關注的東西，並附上清晰的提示，接下來該怎麼做。
4. 注意對比 對比是創造視覺層級、吸引使用者注意特定元素的最重要的方式之一。在網頁設計中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。 這個網站是最簡單生動的例子。他們做到了統一一致，但整體背景和按鈕並不夠吸引人，尤其是在訂購按鈕上。 相比來看這個。顏色選用很接近，但結果卻完全不同。而且，創新的滾動效果，流暢地介紹了產品的新功能——反光材料。很酷，對吧？
5. 忽視表單樣式 表單設計是使用者體驗最基本的部分。每個網站都有一個目標——無論是樹立榜樣、直接售賣產品或是提供資訊。不幸的是，許多網站有著光鮮的首頁，卻寧可用長表單和複雜的驗證碼來使使用者厭煩致死。除非使用者有強烈的先導動機，否則他們就會離開。 有了JCF這樣的有效的跨瀏覽器的解決方案，是時候忘記那些醜陋的預設表單元素了，轉向一種更加沉浸的使用者體驗吧。 另一件氣人的事，是表單要求太多資訊，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項。 如果你看了sketchybusiness.io的表單，你絕對會喜歡它的滑鼠懸停和按鈕按下狀態。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺。

最後…… 不要懶於測試！對你重要的對於顧客未必重要。他們在哪裡遇到問題卡住？是導航、奇特的視覺差滾動效果、還是長時間載入的視訊？使用者測試的最大好處之一，是你可以通過使用者的視角來觀察，關注他們的需求、做出改進。不要抑制你的創造力。要牢記網站訪客可能會感到困惑和沮喪。 你見過最糟的互動設計錯誤是什麼？可以在評論中分享你的想法和故事。

互動設計需要注意什麼 1、一看就懂 這個說起來挺好理解的，就是讓使用者直觀的理解產品功能，而事實上，這個概念包含的東西太多了，這裡簡單說下常見的2點。 圖形化：圖片相對文字來說，所承載的資訊更直觀，也更能渲染氣氛，給使用者留下更深的印象。常見於各種小圖示，比如下載按鈕，通常會看到用一個向下的箭頭來表示。對於重要的按鈕來說，一般會將其圖形化，就算沒有采用小圖示來輔助表達，也會採用“色塊”來講“文字”圖形化。 文字：剛說了圖形化，其實並不是說，所以文字都可以用圖形來替代，文字的存在還是很有必要的，特別是一些具有“獨特性”的功能按鈕，使用者接觸得少，沒有相關的理解經驗，難以圖形化。大多數情況，文字不會刪去，而會保留，輔助說明圖形內容。文字還有一個很常見的問題，就是文字太多，使用者沒有耐心去看，或者看完後沒有理解到所表達的核心。在設計的時候，要將文字刪了再刪，把“介紹文段”變成“產品口號”，有助於使用者更好的瞭解產品。用詞也很重要，如果產品定位是專業人員使用，那麼可以使用一些專業術語，如果不是，請把各種專業術語“平民化”。 這一點，更偏向產品的表面形式，這需要互動設計師跟視覺設計師相配合，把產品頁面中，需要突出的重點，更視覺設計師溝通好。這一步，也是使用者感覺這個產品好不好用，最先接觸到的一層，即從視覺效果反饋的結果。 2、一用就對 這點可以說是”一看就懂“的骨架，更多涉及產品的框架，讓使用者眼中的產品跟設計的產品一樣。 歸納：同類功能歸到一起去，這就像電商網站的導航，把各種商品歸納分類。在這裡，互動設計師需要根據需求檔，整理產品的框架，然後把同一型別的功能歸到一起去。歸納說起來挺容易的，但是做起來涉及的因素就比較多了。經常看到一些產品，把同一個功能，重複出現在同個頁面中，這種做法，不一定是不合理的。比如：登陸功能，一個頁面經常有多個入口，一般也是合理的。在工作中，最常遇到產品經理想要突出某個新產品，明明這個產品功能應該歸到A頁面，但是產品經理要求去B頁面宣傳，這時候就要留意，這個位置是否合 理了。（這裡要展開也討論的話，都可以單獨寫一篇了，這裡就簡單舉個例子：在電商裡，如果把“手機套”放到“手機頁面”去宣傳，這裡不一定是框架錯了，如 果把“手機套”放到“電腦頁面”去宣傳，這裡的框架就有問題了。） 一致性：這是互動設計最基礎的知識之一，保證產品各種元素的一致性，不要讓使用者迷茫。比如標題的一致性，同一個功能，這裡用A來表達，到了另一個頁面，也要用A來表達。這裡保障使用者不會在使用過程中迷茫的基礎。除了產品本身要保持一致性之外，在於產品所屬的行業來說，這點還有一些有趣的方面可以討論。對於產品的同行，特別是該行業中的老大，他們的設計是怎 樣的，這點需要互動設計師去了解清楚。因為使用者長期使用這些產品，會養成一些操作習慣，比如現在很多資訊類APP，下拉代表重新整理頁面，如果你設計的資訊類 軟體，沒有這個功能，那麼在使用者體驗上，就會有所影響。 這點說白了，就是要搭建合理的結構框架，也是互動設計師工作的核心之一。保障使用者操作順暢，就靠它了。不過這裡的標題“一用就對”，其實也不太嚴 謹，因為產品一般都允許使用者“試錯”，使用者可以通過錯誤操作，來學會使用產品。這裡就引出了下一點反饋的內容了，當然，這個錯誤不能是“致命錯誤”。 3、別發呆了 這點主要講的是“反饋”，反饋也是互動設計的一個基礎知識，涉及的範圍挺廣，但是核心就是要讓使用者別發呆，瞭解當前的操作，明白怎麼去操作。 錯誤各種錯誤操作的反饋提醒，這點需要互動設計師去發現，一個產品可以存在的各種情況，簡單點說，就是找茬，還不能找太少。比如：留言超過100個字元怎麼辦？再極端點，伺服器空間不夠，儲存不了留言怎麼辦？使用者短期內持續留言，伺服器超負荷怎麼辦？這些情況都需要互動設計師考慮好，當然有些涉及開發程式設計的內容，這部分內容就需要跟相關技術人員溝通下。考慮後，還需要給出適當的視覺提醒，比如，提醒“你剛剛已經留言了，我們會盡快回復，如需補充內容，請30秒後重試”。 等待漫漫的等待，是大多數使用者無法忍受的事，如果還沒有適當的提醒，使用者基本不會繼續等待。對於長時間的等待，最好有具體時間倒計時，而不是以單純進度 條的方式。而對於1-5秒之類的短時間等待，有時候採用純進度條的方式會帶來意外的收穫。比如在遊戲的跳轉過程，因為讀取資料需要等待，而這個過程大概要 2-3秒，這時候，如果採用讀秒的方式，使用者容易產生煩躁，特別是需要重複操作時，容易讓使用者覺得，遊戲沒優化好，怎麼這裡還要等待2-3秒啊；如果採用 進度條的方式，使用者會把對遊戲載入慢的原因，怪罪到自己的裝置配置低。 導航導航相對於產品的遊園指南，除了告訴使用者有什麼東西外，還承擔著使用者的指南功能，時刻告訴使用者，當前位置在哪，不要讓使用者迷路了。這也是互動設計的基礎之一，適當的指引，別讓使用者發呆。 反饋雖然也是屬於表面層，但是這部分工作卻是互動的重點之一。 4、總結 一看就懂，通過視覺上的優化，讓使用者更直觀的理解產品功能 一用就對，通過產品框架上的優化，讓使用者更順暢的使用產品 別發呆了，通過使用者的眼睛，讓使用者開開心心使用產品 小技巧： （1）設計好一個產品後，把文字重新讀一篇，思考，如果這段文字刪了，會不會對使用者使用造成影響，不會的話，那就刪了吧。 （2）隨便開啟一個頁面，然後看看有沒有合適的“當前位置”指南，會不會迷路，如何返回之類的。 （3）重新檢查一次裡面的用詞/圖示，是否一致。 （4）常見的遺漏情況：軟體/硬體（相容性問題比較常見）；網路狀態（無網、超時、慢等）；轉場（過程是否可以取消，是否有反饋等） （5）大必殺，找幾個“新使用者”（沒有接觸過該產品的人），看他們操作。 寫在最後，情感化設計，從我大學開始，就一直對這塊內容很感興趣，而如今作為一名初級互動設計師，我覺得情感化設計可以更好的融入產品之中去，就比如各個網站的404頁面，這個頁面的設計也間接表達了各個網站的情懷。 轉自：http://zc.lvchakeji.com/news/1228.html 如有侵權，請聯絡微信：13229989046