以下內容由摹客團隊翻譯整理，僅供學習交流，摹客iDoc是支援智慧標註和切圖的產品協作設計神器。
精心設計的使用者介面對網站意義重大。具備所有最新功能和響應式設計有助於提高網站的搜尋引擎排名，從而增加受眾群體。但是，當專案過大時，開發人員往往無法遵循最佳UI設計的原則進行開發。從而導致網站中某些重要功能無效或者瀏覽器測試不能完全通過。所以，今天我們們討論的話題就是導致網站UI設計失敗的原因以及如何避免這些錯誤的UI設計技巧，總結出來有17個。我們一起來看看吧！
1. 避免刻意銷售
使用者體驗的最新趨勢是使設計具有說服力，它可以指引使用者思考，提示下一步操作，但也會強迫使用者繼續訪問網站。針對這一點，一個非常重要的UI設計技巧和建議是，永遠不要過度使用這種策略。如果使用者被激怒，產生的負面結果是，他們會立即離開網站，並不會考慮到什麼叫做三思而後行。
2. 配色決定一切
在規劃網站設計時，字型、標題和背景一定要採用合適的顏色程式碼。正確學習色彩理論，研究出不同背景色下適合搭配的顏色。UI設計專家指出，協調良好的色彩規劃在吸引客戶方面比使用動畫效果更好。上圖就是一個很好的色彩選擇的例子。你也可以參考原始碼獲取更多流行的網頁調色盤資源。
3. 避免引人注目的Flash元素
最近的UI設計技巧表明，相比讓人眼花繚亂的顏色和按鈕，簡化的元素更能吸引使用者。特別是，必須避免使用flash元素，因為許多瀏覽器不支援它們，導致跨瀏覽器測試失敗。
4．非響應式網頁設計
如今所有的組織都在遵循移動優先的方法。理想的做法是，你必須像你的競爭對手一樣思考，開發一個遵循與響應式設計相關的最佳UI實踐的網站，在所有裝置上都能正常工作，不需要水平滾動，並且已經通過所有跨裝置瀏覽器的測試策略。
5. 非跨瀏覽器相容的網站
當今網際網路上有很多瀏覽器可供使用，根據使用裝置和人口數量的不同，在你釋出你的網站之前，我們可以給你提供最好的UI設計技巧。執行適當的跨瀏覽器測試，並確保網站在所有目標瀏覽器上正常執行。以下是每個瀏覽器中不同外觀的示例。
上圖是LambdaTest平臺上獨一無二的div的演示。你可以注意到它的外觀與谷歌Chrome和Mozilla Firefox有何不同。LambdaTest是一個跨瀏覽器的測試工具，可以讓你在2000多個瀏覽器中測試你網站的RWD(響應式網頁設計)，以及它們在實際作業系統上執行的不同版本。
6. 不正確的字型大小
在遵循最佳UI設計實踐時，保持一致的字型大小和字型系列非常重要。粗體和大字型是可以接受的，但是如果標題和段落的字型大小是4:1，那就不合適了。
7. 設計一個複雜的原型
一個具有太多元素且沒有正確索引的的複雜原型絕對不屬於最佳UI設計實踐。這會讓開發人員感到困惑，並可能導致網站充滿漏洞，完全無法滿足客戶要求。
8. 避免執著於過時和擁擠的設計
一個包含隨意排列的內容和影象的叢集設計不僅會讓終端使用者感到不安，而且還會讓他感到困惑，不知道下一步該往哪裡走，或者如何實現他開啟網站的目的。
9. 避免廣告扎堆，記住內容為王！
廣告是為你的網站增加收入的方式之一。而太多的廣告也不是最佳UI設計實踐。一個網站上如果充斥太多的廣告會使使用者覺得惱火。因為無用資訊太多而不能得到真正有用的資訊。
10. 避免複雜的導航
簡化導航是設計獨特使用者體驗的最佳UI實踐之一。簡潔明瞭的導航有助於引導使用者直接找到他需要的內容。避免太多連結和按鈕的複雜導航欄，否則不僅會使使用者感到困惑，而且還會導致佈局聚集。
11. 避免抄襲設計
保證獨特創新的設計。你可以從其他網站的設計中獲取靈感，但不允許直接將其他網站的設計照搬。一是因為會有損你網站的聲譽，二則是Google會根據使用者評論，自動降低你的網站在搜尋引擎中的排名。
12. 避免使用不恰當的對比色
如果在設計中使用恰當的對比色，內容會更具有可讀性並且易於使用者注意。如果字型，影象和背景之間使用不恰當的對比色，很容易讓使用者因為體驗不佳而離開網站。
13. 避免設計糟糕的CTA
CTA擁有命令使用者採取行動的權力。從顏色到字型，關於它們的一切都應該要求使用者“點選”。過於引人注目的CTA會迫使使用者離開，而過於簡單的CTA卻容易被忽略。所以儘量在CTA中保持顏色，陰影和漂亮字型的平衡，使其顯而易見且可點選。
14. 避免臃腫的文字，排版和簡報
如今，大多數網站使用者都沒有完全瀏覽內容。如果你想在內容方面表達想法，應該保持文字內容以及影象和富媒體元素（如音訊或視訊）之間的平衡點。太多的文字內容只會迫使使用者忽略它們，並以這種方式忽略你嘗試傳達的一些重要資訊。
15. 避免使用大型媒體元素
據觀察，當流量突然增加時，站點的速度會大大降低或根本不起作用。這主要是因為使用了大影象或動畫。最好的UI設計實踐之一是避免使用過大的影象。根據最近的趨勢，可縮放的向量影象佔用非常小的尺寸，並可以確保您的網站在任何情況下都能正常執行。
16. 避免強制性設計和冗長的形式
表單是網站的重要組成部分，尤其是需要使用者註冊的表單。而具有大量資料的冗長形式只會使使用者複雜化，並且在填寫時可能會遺漏一些重要資訊，尤其是在移動裝置上。最好的UI設計實踐之一是保持一個更容易填充的簡單表單，並儘可能少地提供資訊。另外，請注意沒有必要為使用者新增太多必填欄位。如果你保留的欄位越強，那你的跳出率就越高。
17. 沒有一個好的資訊架構師
就像開發一樣，規劃網站的設計也需要一個適當的策略，您需要UX架構師的幫助。擁有一名優秀的資訊架構師將為您提供良好的設計策略。
以下這些設計思維你有嗎？有的話是時候改變了！
1. 不涉及客戶
目前，DevOps和敏捷方法非常受歡迎。從設計到開發，每個步驟都要讓客戶參與其中，以便他們可以在遵循最佳UI實踐的同時檢查應用程式，以及他們的UX架構師是否可以根據需要提供其他UI設計技巧。
2. 不理解要求
設計人員通常在沒有完全通過需求規範的情況下開始工作。根據最佳UI實踐，這根本不是一個好的工作方法。即使在開發了功能齊全的站點之後，這樣做也可能導致完全或部分返工。
3. 強迫使用者接受設計
在設計或開發過程中，你必須從終端使用者的角度進行思考。請記住，你正在設計一個虛構的人格。你可能更喜歡特定的顏色或漸變圖案，但終端使用者不一定喜歡它。研究最新的使用者體驗趨勢以及大多數使用者在實施設計之前的喜好。
4 .不進行可用性測試
可用性測試是你的測試策略中包含的另一項內容。它要求終端使用者測試你的網站並告知你感覺錯誤或可以改進的內容。最好的UI設計實踐是應包含可用性測試。
5. 不包括輔助功能測試
有助於提高網站搜尋引擎排名的最佳UI設計技巧之一是遵守W3C可訪問性標準。W3C第508條規定，所有人，特別是殘障人士都必須能夠訪問網站。如果你的目標是遵循最佳UI設計實踐，則必須包含正確的可訪問性測試。
以上是我們的一些想法。如果你能想到任何其他不符合最佳UI實踐的錯誤或設計方案，請告訴我們。我們希望上述UI設計技巧可以幫助您建立功能齊全的站點，提供強大的使用者體驗。
原文作者：Sarah Elson
原文地址：medium.com/@sarahelson…ui-design-mistakes-that-fails-your-website-ba601838eb92?tdsourcetag=s_pctim_aiomsg
學習工具，但不受限於某種工具。摹客iDoc，高效協作，從產品到開發，只要一個文件，讓你的團隊高效協作！
相關閱讀：