教你避雷！網(wǎng)頁設(shè)計中常見的17個UI設(shè)計錯誤集錦（附贈設(shè)計技巧）

時間：2023-05-09 23:00:01 | 來源：網(wǎng)站運營

時間：2023-05-09 23:00:01 來源：網(wǎng)站運營

教你避雷！網(wǎng)頁設(shè)計中常見的17個UI設(shè)計錯誤集錦（附贈設(shè)計技巧）：精心設(shè)計的用戶界面對網(wǎng)站意義重大。具備所有最新功能和響應(yīng)式設(shè)計有助于提高網(wǎng)站的搜索引擎排名，從而增加受眾群體。但是，當項目過大時，開發(fā)人員往往無法遵循最佳UI設(shè)計的原則進行開發(fā)。從而導(dǎo)致網(wǎng)站中某些重要功能無效或者瀏覽器測試不能完全通過。所以，今天咱們討論的話題就是導(dǎo)致網(wǎng)站UI設(shè)計失敗的原因以及如何避免這些錯誤的UI設(shè)計技巧，總結(jié)出來有17個。我們一起來看看吧！

1. 避免刻意銷售

用戶體驗的最新趨勢是使設(shè)計具有說服力，它可以指引用戶思考，提示下一步操作，但也會強迫用戶繼續(xù)訪問網(wǎng)站。針對這一點，一個非常重要的UI設(shè)計技巧和建議是，永遠不要過度使用這種策略。如果用戶被激怒，產(chǎn)生的負面結(jié)果是，他們會立即離開網(wǎng)站，并不會考慮到什么叫做三思而后行。

2. 配色決定一切

在規(guī)劃網(wǎng)站設(shè)計時，字體、標題和背景一定要采用合適的顏色代碼。正確學習色彩理論，研究出不同背景色下適合搭配的顏色。UI設(shè)計專家指出，協(xié)調(diào)良好的色彩規(guī)劃在吸引客戶方面比使用動畫效果更好。上圖就是一個很好的色彩選擇的例子。你也可以參考源代碼獲取更多流行的網(wǎng)頁調(diào)色板資源。

3. 避免引人注目的Flash元素

最近的UI設(shè)計技巧表明，相比讓人眼花繚亂的顏色和按鈕，簡化的元素更能吸引用戶。特別是，必須避免使用flash元素，因為許多瀏覽器不支持它們，導(dǎo)致跨瀏覽器測試失敗。

4．非響應(yīng)式網(wǎng)頁設(shè)計

如今所有的組織都在遵循移動優(yōu)先的方法。理想的做法是，你必須像你的競爭對手一樣思考，開發(fā)一個遵循與響應(yīng)式設(shè)計相關(guān)的最佳UI實踐的網(wǎng)站，在所有設(shè)備上都能正常工作，不需要水平滾動，并且已經(jīng)通過所有跨設(shè)備瀏覽器的測試策略。

5. 非跨瀏覽器兼容的網(wǎng)站

當今互聯(lián)網(wǎng)上有很多瀏覽器可供使用，根據(jù)使用設(shè)備和人口數(shù)量的不同，在你發(fā)布你的網(wǎng)站之前，我們可以給你提供最好的UI設(shè)計技巧。執(zhí)行適當?shù)目鐬g覽器測試，并確保網(wǎng)站在所有目標瀏覽器上正常運行。以下是每個瀏覽器中不同外觀的示例。




上圖是LambdaTest平臺上獨一無二的div的演示。你可以注意到它的外觀與谷歌Chrome和Mozilla Firefox有何不同。LambdaTest是一個跨瀏覽器的測試工具，可以讓你在2000多個瀏覽器中測試你網(wǎng)站的RWD(響應(yīng)式網(wǎng)頁設(shè)計)，以及它們在實際操作系統(tǒng)上運行的不同版本。

6. 不正確的字體大小

在遵循最佳UI設(shè)計實踐時，保持一致的字體大小和字體系列非常重要。粗體和大字體是可以接受的，但是如果標題和段落的字體大小是4:1，那就不合適了。

7. 設(shè)計一個復(fù)雜的原型

一個具有太多元素且沒有正確索引的的復(fù)雜原型絕對不屬于最佳UI設(shè)計實踐。這會讓開發(fā)人員感到困惑，并可能導(dǎo)致網(wǎng)站充滿漏洞，完全無法滿足客戶要求。

8. 避免執(zhí)著于過時和擁擠的設(shè)計

一個包含隨意排列的內(nèi)容和圖像的集群設(shè)計不僅會讓最終用戶感到不安，而且還會讓他感到困惑，不知道下一步該往哪里走，或者如何實現(xiàn)他打開網(wǎng)站的目的。

智能標注、一鍵切圖、交互原型，摹客iDoc一次搞定
立即體驗

9. 避免廣告扎堆，記住內(nèi)容為王！

廣告是為你的網(wǎng)站增加收入的方式之一。而太多的廣告也不是最佳UI設(shè)計實踐。一個網(wǎng)站上如果充斥太多的廣告會使用戶覺得惱火。因為無用信息太多而不能得到真正有用的信息。

10. 避免復(fù)雜的導(dǎo)航

簡化導(dǎo)航是設(shè)計獨特用戶體驗的最佳UI實踐之一。簡潔明了的導(dǎo)航有助于引導(dǎo)用戶直接找到他需要的內(nèi)容。避免太多鏈接和按鈕的復(fù)雜導(dǎo)航欄，否則不僅會使用戶感到困惑，而且還會導(dǎo)致布局聚集。

11. 避免抄襲設(shè)計

保證獨特創(chuàng)新的設(shè)計。你可以從其他網(wǎng)站的設(shè)計中獲取靈感，但不允許直接將其他網(wǎng)站的設(shè)計照搬。一是因為會有損你網(wǎng)站的聲譽，二則是Google會根據(jù)用戶評論，自動降低你的網(wǎng)站在搜索引擎中的排名。

12. 避免使用不恰當?shù)膶Ρ壬?/h2>








如果在設(shè)計中使用恰當?shù)膶Ρ壬?，?nèi)容會更具有可讀性并且易于用戶注意。如果字體，圖像和背景之間使用不恰當?shù)膶Ρ壬?，很容易讓用戶因為體驗不佳而離開網(wǎng)站。

13. 避免設(shè)計糟糕的CTA

CTA擁有命令用戶采取行動的權(quán)力。從顏色到字體，關(guān)于它們的一切都應(yīng)該要求用戶“點擊”。過于引人注目的CTA會迫使用戶離開，而過于簡單的CTA卻容易被忽略。所以盡量在CTA中保持顏色，陰影和漂亮字體的平衡，使其顯而易見且可點擊。

14. 避免臃腫的文字，排版和演示文稿

如今，大多數(shù)網(wǎng)站用戶都沒有完全瀏覽內(nèi)容。如果你想在內(nèi)容方面表達想法，應(yīng)該保持文本內(nèi)容以及圖像和富媒體元素（如音頻或視頻）之間的平衡點。太多的文本內(nèi)容只會迫使用戶忽略它們，并以這種方式忽略你嘗試傳達的一些重要信息。

15. 避免使用大型媒體元素

據(jù)觀察，當流量突然增加時，站點的速度會大大降低或根本不起作用。這主要是因為使用了大圖像或動畫。最好的UI設(shè)計實踐之一是避免使用過大的圖像。根據(jù)最近的趨勢，可縮放的矢量圖像占用非常小的尺寸，并可以確保您的網(wǎng)站在任何情況下都能正常運行。

16. 避免強制性設(shè)計和冗長的形式

表單是網(wǎng)站的重要組成部分，尤其是需要用戶注冊的表單。而具有大量數(shù)據(jù)的冗長形式只會使用戶復(fù)雜化，并且在填寫時可能會遺漏一些重要信息，尤其是在移動設(shè)備上。最好的UI設(shè)計實踐之一是保持一個更容易填充的簡單表單，并盡可能少地提供信息。另外，請注意沒有必要為用戶添加太多必填字段。如果你保留的字段越強，那你的跳出率就越高。

17. 沒有一個好的信息架構(gòu)師

就像開發(fā)一樣，規(guī)劃網(wǎng)站的設(shè)計也需要一個適當?shù)牟呗?，您需要UX架構(gòu)師的幫助。擁有一名優(yōu)秀的信息架構(gòu)師將為您提供良好的設(shè)計策略。




以下這些設(shè)計思維你有嗎？有的話是時候改變了！





1. 不涉及客戶

目前，DevOps和敏捷方法非常受歡迎。從設(shè)計到開發(fā)，每個步驟都要讓客戶參與其中，以便他們可以在遵循最佳UI實踐的同時檢查應(yīng)用程序，以及他們的UX架構(gòu)師是否可以根據(jù)需要提供其他UI設(shè)計技巧。




2. 不理解要求

設(shè)計人員通常在沒有完全通過需求規(guī)范的情況下開始工作。根據(jù)最佳UI實踐，這根本不是一個好的工作方法。即使在開發(fā)了功能齊全的站點之后，這樣做也可能導(dǎo)致完全或部分返工。




3. 強迫用戶接受設(shè)計

在設(shè)計或開發(fā)過程中，你必須從最終用戶的角度進行思考。請記住，你正在設(shè)計一個虛構(gòu)的人格。你可能更喜歡特定的顏色或漸變圖案，但最終用戶不一定喜歡它。研究最新的用戶體驗趨勢以及大多數(shù)用戶在實施設(shè)計之前的喜好。




4 .不進行可用性測試





可用性測試是你的測試策略中包含的另一項內(nèi)容。它要求最終用戶測試你的網(wǎng)站并告知你感覺錯誤或可以改進的內(nèi)容。最好的UI設(shè)計實踐是應(yīng)包含可用性測試。




5. 不包括輔助功能測試

有助于提高網(wǎng)站搜索引擎排名的最佳UI設(shè)計技巧之一是遵守W3C可訪問性標準。W3C第508條規(guī)定，所有人，特別是殘障人士都必須能夠訪問網(wǎng)站。如果你的目標是遵循最佳UI設(shè)計實踐，則必須包含正確的可訪問性測試。




以上是我們的一些想法。如果你能想到任何其他不符合最佳UI實踐的錯誤或設(shè)計方案，請告訴我們。我們希望上述UI設(shè)計技巧可以幫助您創(chuàng)建功能齊全的站點，提供強大的用戶體驗。




原文作者：Sarah Elson


原文地址：https://medium.com/@sarahelson81/17-ui-design-mistakes-that-fails-your-website-ba601838eb92?tdsourcetag=s_pctim_aiomsg


學習工具，但不受限于某種工具。摹客iDoc，高效協(xié)作，從產(chǎn)品到開發(fā)，只要一個文檔，讓你的團隊高效協(xié)作！