影響網(wǎng)頁(yè)內容的七種設計誤區

設計中出現偏差或者錯誤其實(shí)是很正常也很普遍的征象，大概你只是想盡快完成一個(gè)設計項目而倉促地提拔進(jìn)度，也可能是由于項目自己的復雜度過(guò)高，你忽略的某些題目。但是無(wú)論是怎么造成，總得試圖解決題目，修復不完善的設計。

而今天我們要探究的核心是影響你的網(wǎng)頁(yè)內容的設計誤區，這些誤區有的讓網(wǎng)站的信息無(wú)法精確的傳達，有的讓人感到疑惑，這些題目可能會(huì )導致用戶(hù)無(wú)法接受，理解錯誤，甚至感到不適。那么，有哪些常見(jiàn)的影響內容的設計題目必要規避呢?

1、不合理的排版

排版設計出題目，首當其沖的空間設計不合理。段間距和行間距是文本內容常見(jiàn)的空間控制變量，雖然有的排版會(huì )由于間隙過(guò)大而顯得松散，但是更常見(jiàn)的題目其實(shí)是排布布局過(guò)于緊密，缺乏呼吸感，這可能會(huì )讓設計看起來(lái)紊亂，可讀性低下。

一樣平常而言，對于大段的文本內容，行間距最好是筆墨高度的120%到150%。對于較小的文本，考慮到移動(dòng)端的用戶(hù)使用場(chǎng)景，這個(gè)行間距可能還得在進(jìn)步一些，如許 才能確保舒適的閱讀體驗。

但是，不論是怎樣控制，核心始終在于確保閱讀體驗是愉悅而恰到益處的。擁有恰當而富有流動(dòng)性的排版，視覺(jué)上才會(huì )令人舒適。間距太大太小都不合適。

另一方面，整個(gè)頁(yè)面排版的行間距的比例要保持同等，如許能讓視覺(jué)上更加同一，也能夠強化同類(lèi)、相干元素的關(guān)聯(lián)性，增長(cháng)可讀性。

2、所有元素尺寸一樣

所有的圖片尺寸都一樣，所有的文本都一樣大小，所有的按鈕都一樣的樣式，如許的“同等”看起來(lái)不錯，但是現實(shí)上會(huì )顯得更加無(wú)聊。

網(wǎng)頁(yè)中的很多元素可以同等，但是不能完全一樣，這是兩個(gè)概念?；诓煌男枨?，不同的位置的按鈕尺寸是不能完全一樣的，但是它們可以相沿雷同的樣式，并且設計幾個(gè)相對固定的尺寸比例，如許也可以更好的控制整個(gè)視覺(jué)和體驗。

其實(shí)這當中，圖片在網(wǎng)頁(yè)框架中的使用就是一個(gè)最好的實(shí)例。不同頁(yè)面的首圖尺寸是一樣，其中的圖片假如要應用到不同整個(gè)布局其他的位置的時(shí)候，直接按比例縮小，其中的元素視覺(jué)重量會(huì )直接降低，信息傳達的有用性也隨之降低。最理想的狀態(tài)，是根據整個(gè)網(wǎng)頁(yè)框架布局的需求，基于原圖有針對性地進(jìn)行切圖。

3、忽略條理

我們所看到的絕大多數的網(wǎng)頁(yè)是必要通過(guò)精心組織的條理結構來(lái)呈現內容的，畢竟網(wǎng)頁(yè)內容也是遵循 80/20 法則的，20%的內容常常能夠擁有80%的緊張性。這也使得網(wǎng)頁(yè)的條理結構如此的緊張。

網(wǎng)頁(yè)中不同的內容是有輕重緩急的，而這種緊張性不論是基于設計的需求照舊用戶(hù)的需求，都是能夠進(jìn)行判斷和劃分的。與此同時(shí)，用戶(hù)在快速欣賞內容的時(shí)候，緊張的內容應當置于緊張的、易于掃視查看的位置。在我們之前的《F式布局》的文章當中，對此有細致的陳述。

在確定了緊張性?xún)?yōu)先級之后，條理結構的設計思路就可以基本確定了。首圖、題目等元素是承載緊張信息的載體，而能夠指導用戶(hù)舉動(dòng)的CTA按鈕、輸入框等元素，則能在交互的層面上，強化內容的效力。所有的這些東西，在設計網(wǎng)頁(yè)的條理結構的時(shí)候，應該體系的考慮。

4、忽視基礎功能

網(wǎng)頁(yè)的可用性始終是擺在易用性之前的。我想你也有過(guò)如許的經(jīng)驗：打開(kāi)網(wǎng)頁(yè)之后經(jīng)過(guò)漫長(cháng)的等待而網(wǎng)頁(yè)無(wú)法加載;點(diǎn)擊一個(gè)按鈕而沒(méi)有響應的反饋;想找到網(wǎng)頁(yè)背后所有者的聯(lián)系體例，但是在A(yíng)bout Us 的頁(yè)面中一無(wú)所得。

這些基礎的工作都必要設計師埋頭做好。確保網(wǎng)頁(yè)的基礎功能都能夠順暢的使用，精確的反饋，而這些基本的可用性題目，常常出如今搜索框、導航、頁(yè)腳甚至營(yíng)業(yè)邏輯當中。

在網(wǎng)頁(yè)當中，不同類(lèi)型的元素涉及到不同類(lèi)型的內容，即使文本和圖片也常常帶有鏈接，或者牽涉到特定的功能或者交互，而用戶(hù)對于這些功能是有預期的?？捎玫陌粹o、鏈接等基礎功能，確保了信息的完備性和功能的完備性，只有如許，用戶(hù)才能信賴(lài)網(wǎng)頁(yè)自己。

5、不夠簡(jiǎn)練的文案

網(wǎng)頁(yè)中的文案是必要反復推敲的。

很多網(wǎng)頁(yè)在使用文案的時(shí)候，不夠簡(jiǎn)練，用戶(hù)很容易在欣賞過(guò)程中迷失。人集中細致力的時(shí)間始終是有限的，所以，盡量在交互和UI中使用明確、精準的描述性的語(yǔ)言，直接地指引用戶(hù)，清晰地闡明交互的效果。

清晰簡(jiǎn)練的語(yǔ)言文案是維持用戶(hù)愛(ài)好、推動(dòng)交互繼承的動(dòng)力。

6、低分辨率

清晰度不足的圖片絕對是設計的硬傷?，F現在的高清的屏幕無(wú)處不在，低分辨率的圖片在現在的屏幕上無(wú)所遁形。

隨著(zhù)網(wǎng)絡(luò )的覆蓋和帶寬的拓展，大尺寸的圖片和文件已經(jīng)慢慢成為標準了。當你必要精準地控制圖片尺寸和屏幕分辨率完全對應起來(lái)，也可以參考相應式設計，借助斷點(diǎn)來(lái)控制表現的尺寸。

當然，最緊張的一點(diǎn)在于，使用低分辨率的圖片，還不如干脆不使用。

7、太多機巧

過(guò)多的插畫(huà)，繁復的殊效，太多的設計趨勢，當常見(jiàn)的設計技巧和結果在網(wǎng)頁(yè)上堆積起來(lái)的時(shí)候，會(huì )很容易稀釋網(wǎng)頁(yè)中真正緊張內容。不同平凡的色彩，奇特的動(dòng)畫(huà)，巨幅的圖片，這些真正抓人眼球的元素應該有針對性、有計劃地使用。

它們確實(shí)是提拔趣味性、吸引用戶(hù)細致力的緊張手段，但是同樣必要鄭重使用。

當你想要使用特定的設計元素、采用流行的設計趨勢或技巧的時(shí)候，選擇一個(gè)思路，盡量主次分明。許多時(shí)候，一個(gè)設計趨勢，比三個(gè)趨勢疊起來(lái)更有效。

結語(yǔ)

假如你的設計當中出現了這些題目，請不要憂(yōu)慮。它們的解決方案并不復雜，通常也不必要經(jīng)過(guò)復雜的重設計來(lái)完美，只必要進(jìn)行適當的調整即可。

原文作者：CARRIE COUSINS

來(lái)源：designshack

譯者：@陳子木

譯文地址：http://www.uisdc.com/7-design-mistakes-ruin-content