網頁設計的誤區

設計中出現誤差或者錯誤其實是很正常也很普遍的現象，也許你僅僅想盡

快完成一個設計項目，然後倉促地提升進度，也有可能是由於項目本身的

複雜度過高，你忽略了某個問題。但是不管是什麼造成，總得試著去解決

這個問題，修復那個不完美的設計。

而今天成都銘代碼科技有限公司小編要和大家探討的核心是影響你的網頁

內容的設計誤區，這些誤區有的會導致讓網站的信息無法正確的傳達，有

的讓人感到迷惑，這些問題可能會導致用戶無法接受，理解錯誤，甚至感

到不適。那麼，有哪些常見的影響內容的設計問題需要規避呢？

1、不合理的排版

排版設計出問題，首當其衝的空間設計不合理。段間距和行間距是文本內

容常見的空間控制變數，雖然有的排版會因為間隙過大而顯得鬆散，但是

更常見的問題其實是排布布局過於緊密，缺乏呼吸感，這可能會讓設計看

起來混亂，可讀性低下。

一般而言，對於大段的文本內容，行間距最好是文字高度的120%到150%

。對於較小的文本，考慮到移動端的用戶使用場景，這個行間距可能還得

再提高一些，這樣才能確保舒適的閱讀體驗。

但是，不論是怎樣控制，核心始終在於確保閱讀體驗是愉悅而恰到好處的

。擁有恰當而富有流動性的排版，視覺上才會令人舒適。間距太大太小都

不合適。

另一方面，整個頁面排版的行間距的比例要保持一致，這樣能讓視覺上更

加統一，也能夠強化同類、相關元素的關聯性，增加可讀性。

2、所有元素尺寸一樣

所有的圖片尺寸都一樣，所有的文本都一樣大小，所有的按鈕都一樣的樣

式，這樣的「一致」看起來不錯，但是實際上會顯得更加無聊。

網頁中的許多元素可以一致，但是不能完全一樣，這是兩個概念。基於不

同的需求，不同的位置的按鈕尺寸是不能完全一樣的，但是它們可以沿用

相同的樣式，並且設計幾個相對固定的尺寸比例，這樣也可以更好的控制

整個視覺和體驗。

其實這當中，圖片在網頁框架中的使用就是一個最好的實例。不同頁面的

首圖尺寸是一樣，其中的圖片如果要應用到不同整個布局其他的位置的時

候，直接按比例縮小，其中的元素視覺重量會直接降低，信息傳達的有效

性也隨之降低。最理想的狀況，是根據整個網頁框架布局的需求，基於原

圖有針對性地進行切圖。

3、忽略層次

我們所看到的絕大多數的網頁是需要通過精心組織的層次結構來呈現內容

的，畢竟網頁內容也是遵循 80/20 法則的，20%的內容常常能夠擁有80%

的重要性。這也使得網頁的層次結構如此的重要。

網頁中不同的內容是有輕重緩急的，而這種重要性不論是基於設計的需求

還是用戶的需求，都是能夠進行判斷和劃分的。與此同時，用戶在快速瀏

覽內容的時候，重要的內容應當置於重要的、易於掃視查看的位置。在我

們之前的《F式布局》的文章當中，對此有詳細的陳述。

在確定了重要性優先順序之後，層次結構的設計思路就可以基本確定了。首

圖、標題等元素是承載重要信息的載體，而能夠引導用戶行為的CTA按鈕

、輸入框等元素，則能在交互的層面上，強化內容的效力。所有的這些東

西，在設計網頁的層次結構的時候，應該系統的考慮。

4、忽視基礎功能

網頁的可用性始終是擺在易用性之前的。我想你也有過這樣的經驗：打開

網頁之後經過漫長的等待而網頁無法載入；點擊一個按鈕而沒有相應的反

饋；想找到網頁背後所有者的聯繫方式，但是在About Us 的頁面中一無

所獲。

這些基礎的工作都需要設計師用心做好。確保網頁的基礎功能都能夠順暢

的使用，正確的反饋，而這些基本的可用性問題，常常出現在搜索框、導

航、頁腳甚至業務邏輯當中。

在網頁當中，不同類型的元素涉及到不同類型的內容，即使文本和圖片也

常常帶有鏈接，或者牽涉到特定的功能或者交互，而用戶對於這些功能是

有預期的。可用的按鈕、鏈接等基礎功能，確保了信息的完整性和功能的

完整性，只有這樣，用戶才能信任網頁本身。

5、不夠簡練的文案

網頁中的文案是需要反覆推敲的。

許多網頁在使用文案的時候，不夠簡練，用戶很容易在瀏覽過程中迷失。

人集中注意力的時間始終是有限的，所以，盡量在交互和UI中使用明確、

精準的描述性的語言，直接地指引用戶，清晰地闡明交互的結果。

清晰簡練的語言文案是維持用戶興趣、推動交互繼續的動力。

6、低解析度

清晰度不足的圖片絕對是設計的硬傷。現如今的高清的屏幕無處不在，低

解析度的圖片在如今的屏幕上無所遁形。

隨著網路的覆蓋和帶寬的拓展，大尺寸的圖片和文件已經慢慢成為標準了

。當你需要精準地控制圖片尺寸和屏幕解析度完全對應起來，也可以參考

響應式設計，藉助斷點來控制顯示的尺寸。

當然，最重要的一點在於，使用低解析度的圖片，還不如乾脆不使用。

7、太多機巧

過多的插畫，繁複的特效，太多的設計趨勢，當常見的設計機巧和效果在

網頁上堆積起來的時候，會很容易稀釋網頁中真正重要內容。不同尋常的

色彩，奇特的動畫，巨幅的圖片，這些真正抓人眼球的元素應該有針對性

、有計劃地使用。

它們確實是提升趣味性、吸引用戶注意力的重要手段，但是同樣需要謹慎

使用。

當你想要使用特定的設計元素、採用流行的設計趨勢或技巧的時候，選擇

一個思路，盡量主次分明。很多時候，一個設計趨勢，比三個趨勢疊起來

更有用。

成都銘代碼科技有限公司寫在最後的話：

如果你的設計當中出現了這些問題，請不要擔心。它們的解決方案並不復

雜，通常也不需要經過複雜的重設計來完善，只需要進行適當的調整即可

。