作為網頁設計師最有可能犯的錯誤

已發表: 2016-06-07

所有的網頁設計師都想要完美。然而，他們只是人類，錯誤總是會出現。很容易忽略一些細節。世界上沒有不犯錯誤的設計師，避免錯誤通常是一段時間後發生的事情。

我們現在將討論網頁設計師經常犯的一些最常見的錯誤，那些你很可能已經至少犯過一次的錯誤。改正你的壞習慣，克服你目前犯下的障礙，這樣你的工作就會比以往更好。

閃光燈的使用

在現代網站設計中，我們很少看到使用 Flash，即使它的功能非常驚人。我們面臨著為訪客提供令人印象深刻的動畫體驗的可能性，但有相關的包袱。

在網頁設計中使用 Flash 會出現不同的問題。由於缺乏支持和使用的編程語言不同，您的加載時間更長，移動用戶遇到問題。目前支持 Flash 的設備數量非常少。此外，我們預計未來不會增加支持。全新的庫似乎更強大、更受歡迎，尤其是那些基於 JavaScript 的庫，如 AngularJS 和 jQuary。

使用非常大的圖像

網頁設計的現代趨勢是在整個網站中使用大圖像。這肯定會讓體驗更加愉快，用戶會看到一些很棒的東西，但是設計師和開發人員需要注意一些複雜性。

每當使用較大的圖像時，頁面加載會自動增加。對於網站訪問者來說，這可能會導致非常糟糕的情況。好消息是我們確實可以使用各種不同的工具，這些工具對優化圖像有很大幫助。您可能要考慮的包括：

GruntJS-ImageMin
圖像優化

PrePros 等應用程序可以幫助在應用程序內部自動優化圖像。問題是工具將有助於工作流，但不會解決與加載時間相關的巨大問題，至少不能完全解決。

許多設計師現在使用 SVG。他們使用代碼在瀏覽器環境中製作動畫和繪製圖形。因此，我們最終獲得了加速的頁面加載和引人注目的各種元素。

我們還應該強調一個事實，即由於無響應因素，較大的圖像會使網頁設計複雜化。我們正在談論一個設置了高度和寬度的設計元素。瀏覽器會縮放圖像，但我們有相同的文件大小。

W3C 現在致力於將“ <picture> ”用作 HTML5 元素。這將允許根據查看屏幕的寬度調用不同大小的圖像。發生這種情況時，觀看者的體驗會好很多，但在實施之前，您應該避免使用較大的圖像。

使用固定寬度和高度

對固定尺寸進行編碼時，會自動限制用戶的適應。我們有變通辦法，但我們必須始終考慮創建一個 100% 響應的網頁設計模式。在 CSS 中設置的固定高度可以限制用戶的可視區域。可以通過媒體查詢調整來解決這個問題，但是添加的額外代碼會導致性能問題。你真的不需要那個。在大多數情況下，您不應該使用固定尺寸。在現代網頁設計環境中必須盡可能避免它們。

對設計擬合做出假設

網頁設計師通常使用 Adobe Photoshop 或 Sketch 等軟件。工作完成後，常見的假設是在響應式工作流中有一個特定的斷點。被視為標準的屏幕寬度將涵蓋許多不同的屏幕尺寸，但不能確定是否涵蓋所有這些尺寸。我們在市場上有成千上萬的移動設備。創建一個適用於所有事物的設計是非常困難的。

當您在特定寬度上工作時，您必須計劃和前瞻性思維成為網頁設計師的一項重要技能。您必須確保沒有做出假設，並且在常規圖形編輯器工作結束後您實際上會在瀏覽器中進行工作。

使用過多的效果和動畫

即使在世界上一些最受歡迎的網站上，您也可以看到這個問題。如此多的網站提供了令人驚嘆的體驗，其中許多提供了真正獨特和令人驚嘆的東西。但是，這並不意味著添加盡可能多的效果和動畫。將網頁設計的原則與在功能和圖形影響之間找到正確組合的目的相結合是非常重要的。

過度使用動畫和效果有兩個大問題：

頁面加載時間增加
效果和動畫對於舊電腦來說會有問題

目前流行的技巧和動畫是那些添加淡入、向上或向下元素的。它們看起來很棒，並且會使網站看起來很棒，但這並不意味著您應該始終使用它們。查看對於大多數訪問者將使用的設備而言，整體頁面加載是否過多，並且永遠不要忘記頁面加載速度。這些非常重要，需要始終為遊客提供出色的體驗。

不正確的樣式鏈接

這是一個比你現在想的要普遍得多的錯誤。鏈接需要始終做他們所做的事情。這意味著當鏈接的樣式不正確時，人們不會知道它們是鏈接。我們需要始終考慮訪問者，因此鏈接必須始終看起來像鏈接。您可以嘗試而不是堅持標準的藍色下劃線，但您永遠不應該過度使用它。

在 CSS 中不使用 DRY

如果您不知道這一點，DRY 的意思是“不要重複自己”。它是網頁設計中的一種方法，實際上意味著幫助設計人員保持代碼簡潔和克隆。始終建議僅使用必要的代碼進行網站樣式設置。

使用傳統 CSS 時，需要對在其他元素中使用的特定元素進行大量重複。選擇器最終變得非常大，並且需要花費大量時間來實際編寫。當您在設計中使用類而不是樣式化 HTML 頁面中的每個元素時，一切都會變得簡單得多。

目前一個非常好的主意是使用像 Sass 這樣的預處理語言。它們在必要的 CSS 技術方面非常有用。所使用的語言將加速開發和設計，因為它們包含變量、函數、混合、嵌套等特性。然後將生成的代碼編譯成 CSS 代碼。 Web 開發人員和 Web 設計人員現在可以使用更少的代碼行，並且可以輕鬆避免重複，這要歸功於這些語言。

優雅降級

我們可以將優雅降級定義為一種構建 Web 功能的實踐，該功能能夠在現代瀏覽器中提供特定的用戶體驗級別，同時在舊瀏覽器中降級以降低用戶體驗級別。這聽起來有點複雜，但作為一個例子，我們可以討論 Internet Explorer 8 和 7 的支持。您會驚訝地發現大多數用戶根本不會長時間更新瀏覽器。因此，您需要添加優雅降級，以便為兩個瀏覽器版本提供適當的支持。

現代網站很容易開發，但在以後的某個時間點，您最終會注意到這樣一個事實：在舊版瀏覽器中，由於特定的依賴關係，頁面看起來非常糟糕。

漸進增強

這與上面提到的 Graceful Degradation 類似。不同之處在於，該過程是從每個 Web 瀏覽器支持的基本體驗級別開始反向處理的。然後，設計人員/開發人員添加了可供使用它的瀏覽器使用的增強功能。

這個選項和上面的選項都很複雜。它們通常只由真正優秀的設計師使用。但是，對於現在可用的許多瀏覽器，我們需要認真考慮這些選項。網頁設計師通常會讓客戶決定要支持什麼。不過，您需要嘗試使用這些方法，以便為在目標受眾中特別活躍的用戶提供真正出色的體驗。

導航問題——非用戶友好

任何網站最重要的部分之一就是導航。設計師必須能夠讓遊客體驗自然。目的是使導航變得非常簡單和直觀。當設計考慮到這一元素時，用戶會自動理解這種體驗是正確的。

每當用戶體驗不佳時，我們都會看到訪問者感到沮喪。他們根本不會再次訪問特定站點，而是會查看其他頁面以解決他們的問題。設計者需要始終考慮可用性。設計必須看起來很棒，但你永遠不應該忘記功能。易用性是必需的，如果缺乏這一點，整個設計將毫無用處。

缺乏對內容的關注

“形式追隨功能”是二十世紀現代建築工業設計階段出現的一個非常普遍的建築原則。這是您在網頁設計中始終需要記住的原則。

就必要的功能而言，Web 和圖形設計與現代建築非常相似。對象形式必須首先基於預期的目的或功能。就網站而言，我們可以將其視為遍布互聯網的信息數據庫。用戶將訪問網站以獲取特定數據。這是內容介入以提供該數據的地方。當訪問者最終到達一個站點並且沒有找到數據時，他會在其他地方尋找它，甚至不看設計。同時，如果設計使得定位或消化數據變得非常困難，也會出現同樣的結果。

互聯網用戶現在希望訪問信息，並且他們希望這種訪問速度更快。形式勝於功能最終在網頁設計中非常重要。不考慮這一原則意味著重點放在外觀而不是提供的內容上。結果，網站不會真正流行。內容需要始終脫穎而出。

結論

從根本上講，最常見的網頁設計錯誤與試圖提出真正美麗和獨特的東西有關，而沒有考慮訪問者實際訪問網站的原因。正因為如此，您希望始終有必要的耐心將真正好的設計與完整的功能結合起來。

始終創建功能強大的網站，並隨著時間的推移不斷學習新技術。世界上最好的網頁設計師不斷學習，並始終了解可以做和不能做的所有事情。您想創建您的網頁設計，與客戶交談，然後確保訪問者會欣賞所提供的內容。這說起來容易做起來難，但隨著時間的推移，一切都會變得容易得多。

確保你總是花費盡可能多的時間來創造真正偉大的東西。網頁設計中另一個未提及的錯誤是沒有讓自己有必要的時間來實際創建完美的網站設計。這通常是因為客戶需要在最短的時間內完成工作。請確保您始終有足夠的時間來創建您知道自己可以做到的出色網頁設計。