網(wǎng)頁(yè)設(shè)計(jì)誤區(qū)解析
網(wǎng)頁(yè)設(shè)計(jì)(web design，又稱為Web UI design，WUI design，WUI)，是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。以下是小編為大家搜索整理的網(wǎng)頁(yè)設(shè)計(jì)誤區(qū)解析，希望能給大家?guī)韼椭?更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
1、不合理的排版
排版設(shè)計(jì)出問題，首當(dāng)其沖的空間設(shè)計(jì)不合理。段間距和行間距是文本內(nèi)容常見的空間控制變量，雖然有的排版會(huì)因?yàn)殚g隙過大而顯得松散，但是更常見的問題其實(shí)是排布布局過于緊密，缺乏唿吸感，這可能會(huì)讓設(shè)計(jì)看起來混亂，可讀性低下。
一般而言，對(duì)于大段的文本內(nèi)容，行間距最好是文字高度的120%到150%。對(duì)于較小的文本，考慮到移動(dòng)端的用戶使用場(chǎng)景，這個(gè)行間距可能還得在提高一些，這樣 才能確保舒適的閱讀體驗(yàn)。
但是，不論是怎樣控制，核心始終在于確保閱讀體驗(yàn)是愉悅而恰到好處的。擁有恰當(dāng)而富有流動(dòng)性的排版，視覺上才會(huì)令人舒適。間距太大太小都不合適。
另一方面，整個(gè)頁(yè)面排版的行間距的比例要保持一致，這樣能讓視覺上更加統(tǒng)一，也能夠強(qiáng)化同類、相關(guān)元素的關(guān)聯(lián)性，增加可讀性。
2、所有元素尺寸一樣
所有的圖片尺寸都一樣，所有的文本都一樣大小，所有的按鈕都一樣的樣式，這樣的“一致”看起來不錯(cuò)，但是實(shí)際上會(huì)顯得更加無聊。
網(wǎng)頁(yè)中的許多元素可以一致，但是不能完全一樣，這是兩個(gè)概念�；诓煌男枨螅煌奈恢玫陌粹o尺寸是不能完全一樣的，但是它們可以沿用相同的樣式，并且設(shè)計(jì)幾個(gè)相對(duì)固定的尺寸比例，這樣也可以更好的控制整個(gè)視覺和體驗(yàn)。
其實(shí)這當(dāng)中，圖片在網(wǎng)頁(yè)框架中的使用就是一個(gè)最好的實(shí)例。不同頁(yè)面的首圖尺寸是一樣，其中的圖片如果要應(yīng)用到不同整個(gè)布局其他的位置的時(shí)候，直接按比例縮小，其中的元素視覺重量會(huì)直接降低，信息傳達(dá)的有效性也隨之降低。最理想的狀況，是根據(jù)整個(gè)網(wǎng)頁(yè)框架布局的需求，基于原圖有針對(duì)性地進(jìn)行切圖。
3、忽略層次
我們所看到的絕大多數(shù)的網(wǎng)頁(yè)是需要通過精心組織的層次結(jié)構(gòu)來呈現(xiàn)內(nèi)容的，畢竟網(wǎng)頁(yè)內(nèi)容也是遵循 80/20 法則的，20%的內(nèi)容常常能夠擁有80%的重要性。這也使得網(wǎng)頁(yè)的層次結(jié)構(gòu)如此的重要。
網(wǎng)頁(yè)中不同的內(nèi)容是有輕重緩急的，而這種重要性不論是基于設(shè)計(jì)的需求還是用戶的需求，都是能夠進(jìn)行判斷和劃分的。與此同時(shí)，用戶在快速瀏覽內(nèi)容的時(shí)候，重要的內(nèi)容應(yīng)當(dāng)置于重要的、易于掃視查看的位置。在我們之前的《F式布局》的文章當(dāng)中，對(duì)此有詳細(xì)的陳述。
在確定了重要性優(yōu)先級(jí)之后，層次結(jié)構(gòu)的設(shè)計(jì)思路就可以基本確定了。首圖、標(biāo)題等元素是承載重要信息的載體，而能夠引導(dǎo)用戶行為的CTA按鈕、輸入框等元素，則能在交互的層面上，強(qiáng)化內(nèi)容的效力。所有的這些東西，在設(shè)計(jì)網(wǎng)頁(yè)的層次結(jié)構(gòu)的時(shí)候，應(yīng)該系統(tǒng)的考慮。
4、忽視基礎(chǔ)功能
網(wǎng)頁(yè)的可用性始終是擺在易用性之前的。我想你也有過這樣的經(jīng)驗(yàn)：打開網(wǎng)頁(yè)之后經(jīng)過漫長(zhǎng)的等待而網(wǎng)頁(yè)無法加載;點(diǎn)擊一個(gè)按鈕而沒有相應(yīng)的反饋;想找到網(wǎng)頁(yè)背后所有者的聯(lián)系方式，但是在About Us 的頁(yè)面中一無所獲。
這些基礎(chǔ)的工作都需要設(shè)計(jì)師用心做好。確保網(wǎng)頁(yè)的基礎(chǔ)功能都能夠順暢的使用，正確的反饋，而這些基本的可用性問題，常常出現(xiàn)在搜索框、導(dǎo)航、頁(yè)腳甚至業(yè)務(wù)邏輯當(dāng)中。
在網(wǎng)頁(yè)當(dāng)中，不同類型的元素涉及到不同類型的內(nèi)容，即使文本和圖片也常常帶有鏈接，或者牽涉到特定的功能或者交互，而用戶對(duì)于這些功能是有預(yù)期的�？捎玫陌粹o、鏈接等基礎(chǔ)功能，確保了信息的完整性和功能的完整性，只有這樣，用戶才能信任網(wǎng)頁(yè)本身。
5、不夠簡(jiǎn)練的文案
網(wǎng)頁(yè)中的文案是需要反復(fù)推敲的。
許多網(wǎng)頁(yè)在使用文案的時(shí)候，不夠簡(jiǎn)練，用戶很容易在瀏覽過程中迷失。人集中注意力的時(shí)間始終是有限的，所以，盡量在交互和UI中使用明確、精準(zhǔn)的描述性的語(yǔ)言，直接地指引用戶，清晰地闡明交互的結(jié)果。
清晰簡(jiǎn)練的語(yǔ)言文案是維持用戶興趣、推動(dòng)交互繼續(xù)的動(dòng)力。
6、低分辨率
清晰度不足的圖片絕對(duì)是設(shè)計(jì)的硬傷�，F(xiàn)如今的高清的屏幕無處不在，低分辨率的圖片在如今的屏幕上無所遁形。
隨著網(wǎng)絡(luò)的覆蓋和帶寬的拓展，大尺寸的圖片和文件已經(jīng)慢慢成為標(biāo)準(zhǔn)了。當(dāng)你需要精準(zhǔn)地控制圖片尺寸和屏幕分辨率完全對(duì)應(yīng)起來，也可以參考響應(yīng)式設(shè)計(jì)，借助斷點(diǎn)來控制顯示的尺寸。
當(dāng)然，最重要的一點(diǎn)在于，使用低分辨率的圖片，還不如干脆不使用。
7、太多機(jī)巧
過多的插畫，繁復(fù)的特效，太多的設(shè)計(jì)趨勢(shì)，當(dāng)常見的設(shè)計(jì)技巧和效果在網(wǎng)頁(yè)上堆積起來的時(shí)候，會(huì)很容易稀釋網(wǎng)頁(yè)中真正重要內(nèi)容。不同尋常的色彩，奇特的動(dòng)畫，巨幅的圖片，這些真正抓人眼球的元素應(yīng)該有針對(duì)性、有計(jì)劃地使用。
它們確實(shí)是提升趣味性、吸引用戶注意力的重要手段，但是同樣需要謹(jǐn)慎使用。
當(dāng)你想要使用特定的設(shè)計(jì)元素、采用流行的設(shè)計(jì)趨勢(shì)或技巧的時(shí)候，選擇一個(gè)思路，盡量主次分明。很多時(shí)候，一個(gè)設(shè)計(jì)趨勢(shì)，比三個(gè)趨勢(shì)疊起來更有用。
【網(wǎng)頁(yè)設(shè)計(jì)誤區(qū)解析】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)的7個(gè)誤區(qū)11-28
網(wǎng)頁(yè)設(shè)計(jì)的誤區(qū)有哪些02-05
網(wǎng)頁(yè)設(shè)計(jì)：自適應(yīng)網(wǎng)頁(yè)所有屏幕寬度解析01-04
網(wǎng)頁(yè)設(shè)計(jì)真題及參考解析11-08
影響網(wǎng)頁(yè)內(nèi)容的七種設(shè)計(jì)誤區(qū)10-23
網(wǎng)頁(yè)設(shè)計(jì)信息可視化知識(shí)解析09-23
2017年網(wǎng)頁(yè)設(shè)計(jì)詳細(xì)解析03-04
解析網(wǎng)頁(yè)設(shè)計(jì)師面試問題及回答思路12-09
雅思報(bào)名考試誤區(qū)與解析03-11