這7種設(shè)計誤區(qū) 會影響網(wǎng)頁內(nèi)容的體驗

設(shè)計中出現(xiàn)誤差或者錯誤其實是很正常也很普遍的現(xiàn)象,也許你只是想盡快完成一個設(shè)計項目而倉促地提升進(jìn)度,也可能是因為項目本身的復(fù)雜度過高,你忽略的某些問題。但是無論是怎么造成,總得試圖解決問題,修復(fù)不完美的設(shè)計。
而今天我們要探討的核心是影響你的網(wǎng)頁內(nèi)容的設(shè)計誤區(qū),這些誤區(qū)有的讓網(wǎng)站的信息無法正確的傳達(dá),有的讓人感到迷惑,這些問題可能會導(dǎo)致用戶無法接受,理解錯誤,甚至感到不適。那么,有哪些常見的影響內(nèi)容的設(shè)計問題需要規(guī)避呢?
1、不合理的排版
排版設(shè)計出問題,首當(dāng)其沖的空間設(shè)計不合理。段間距和行間距是文本內(nèi)容常見的空間控制變量,雖然有的排版會因為間隙過大而顯得松散,但是更常見的問題其實是排布布局過于緊密,缺乏呼吸感,這可能會讓設(shè)計看起來混亂,可讀性低下。
一般而言,對于大段的文本內(nèi)容,行間距最好是文字高度的120%到150%。對于較小的文本,考慮到移動端的用戶使用場景,這個行間距可能還得在提高一些,這樣 才能確保舒適的閱讀體驗。
但是,不論是怎樣控制,核心始終在于確保閱讀體驗是愉悅而恰到好處的。擁有恰當(dāng)而富有流動性的排版,視覺上才會令人舒適。間距太大太小都不合適。
另一方面,整個頁面排版的行間距的比例要保持一致,這樣能讓視覺上更加統(tǒng)一,也能夠強化同類、相關(guān)元素的關(guān)聯(lián)性,增加可讀性。
2、所有元素尺寸一樣
所有的圖片尺寸都一樣,所有的文本都一樣大小,所有的按鈕都一樣的樣式,這樣的“一致”看起來不錯,但是實際上會顯得更加無聊。
網(wǎng)頁中的許多元素可以一致,但是不能完全一樣,這是兩個概念。基于不同的需求,不同的位置的按鈕尺寸是不能完全一樣的,但是它們可以沿用相同的樣式,并且設(shè)計幾個相對固定的尺寸比例,這樣也可以更好的控制整個視覺和體驗。
其實這當(dāng)中,圖片在網(wǎng)頁框架中的使用就是一個最好的實例。不同頁面的首圖尺寸是一樣,其中的圖片如果要應(yīng)用到不同整個布局其他的位置的時候,直接按比例縮小,其中的元素視覺重量會直接降低,信息傳達(dá)的有效性也隨之降低。最理想的狀況,是根據(jù)整個網(wǎng)頁框架布局的需求,基于原圖有針對性地進(jìn)行切圖。
3、忽略層次
我們所看到的絕大多數(shù)的網(wǎng)頁是需要通過精心組織的層次結(jié)構(gòu)來呈現(xiàn)內(nèi)容的,畢竟網(wǎng)頁內(nèi)容也是遵循 80/20 法則的,20%的內(nèi)容常常能夠擁有80%的重要性。這也使得網(wǎng)頁的層次結(jié)構(gòu)如此的重要。
網(wǎng)頁中不同的內(nèi)容是有輕重緩急的,而這種重要性不論是基于設(shè)計的需求還是用戶的需求,都是能夠進(jìn)行判斷和劃分的。與此同時,用戶在快速瀏覽內(nèi)容的時候,重要的內(nèi)容應(yīng)當(dāng)置于重要的、易于掃視查看的位置。在我們之前的《F式布局》的文章當(dāng)中,對此有詳細(xì)的陳述。
在確定了重要性優(yōu)先級之后,層次結(jié)構(gòu)的設(shè)計思路就可以基本確定了。首圖、標(biāo)題等元素是承載重要信息的載體,而能夠引導(dǎo)用戶行為的CTA按鈕、輸入框等元素,則能在交互的層面上,強化內(nèi)容的效力。所有的這些東西,在設(shè)計網(wǎng)頁的層次結(jié)構(gòu)的時候,應(yīng)該系統(tǒng)的考慮。
4、忽視基礎(chǔ)功能
網(wǎng)頁的可用性始終是擺在易用性之前的。我想你也有過這樣的經(jīng)驗:打開網(wǎng)頁之后經(jīng)過漫長的等待而網(wǎng)頁無法加載;點擊一個按鈕而沒有相應(yīng)的反饋;想找到網(wǎng)頁背后所有者的聯(lián)系方式,但是在About Us 的頁面中一無所獲。
這些基礎(chǔ)的工作都需要設(shè)計師用心做好。確保網(wǎng)頁的基礎(chǔ)功能都能夠順暢的使用,正確的反饋,而這些基本的可用性問題,常常出現(xiàn)在搜索框、導(dǎo)航、頁腳甚至業(yè)務(wù)邏輯當(dāng)中。
在網(wǎng)頁當(dāng)中,不同類型的元素涉及到不同類型的內(nèi)容,即使文本和圖片也常常帶有鏈接,或者牽涉到特定的功能或者交互,而用戶對于這些功能是有預(yù)期的??捎玫陌粹o、鏈接等基礎(chǔ)功能,確保了信息的完整性和功能的完整性,只有這樣,用戶才能信任網(wǎng)頁本身。
5、不夠簡練的文案
網(wǎng)頁中的文案是需要反復(fù)推敲的。
許多網(wǎng)頁在使用文案的時候,不夠簡練,用戶很容易在瀏覽過程中迷失。人集中注意力的時間始終是有限的,所以,盡量在交互和UI中使用明確、精準(zhǔn)的描述性的語言,直接地指引用戶,清晰地闡明交互的結(jié)果。
清晰簡練的語言文案是維持用戶興趣、推動交互繼續(xù)的動力。
6、低分辨率
清晰度不足的圖片絕對是設(shè)計的硬傷?,F(xiàn)如今的高清的屏幕無處不在,低分辨率的圖片在如今的屏幕上無所遁形。
隨著網(wǎng)絡(luò)的覆蓋和帶寬的拓展,大尺寸的圖片和文件已經(jīng)慢慢成為標(biāo)準(zhǔn)了。當(dāng)你需要精準(zhǔn)地控制圖片尺寸和屏幕分辨率完全對應(yīng)起來,也可以參考響應(yīng)式設(shè)計,借助斷點來控制顯示的尺寸。
當(dāng)然,最重要的一點在于,使用低分辨率的圖片,還不如干脆不使用。
7、太多機(jī)巧
過多的插畫,繁復(fù)的特效,太多的設(shè)計趨勢,當(dāng)常見的設(shè)計機(jī)巧和效果在網(wǎng)頁上堆積起來的時候,會很容易稀釋網(wǎng)頁中真正重要內(nèi)容。不同尋常的色彩,奇特的動畫,巨幅的圖片,這些真正抓人眼球的元素應(yīng)該有針對性、有計劃地使用。
它們確實是提升趣味性、吸引用戶注意力的重要手段,但是同樣需要謹(jǐn)慎使用。
當(dāng)你想要使用特定的設(shè)計元素、采用流行的設(shè)計趨勢或技巧的時候,選擇一個思路,盡量主次分明。很多時候,一個設(shè)計趨勢,比三個趨勢疊起來更有用。
結(jié)語
如果你的設(shè)計當(dāng)中出現(xiàn)了這些問題,請不要擔(dān)心。它們的解決方案并不復(fù)雜,通常也不需要經(jīng)過復(fù)雜的重設(shè)計來完善,只需要進(jìn)行適當(dāng)?shù)恼{(diào)整即可。
相關(guān)文章
爬蟲是什么?淺談爬蟲及繞過網(wǎng)站反爬取機(jī)制
簡單而片面的說,爬蟲就是由計算機(jī)自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機(jī)的朋友們已經(jīng)拿到真機(jī)了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當(dāng)對于表單的設(shè)計盡量多上心,讓它們更加易用,細(xì)致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學(xué)策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細(xì)介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細(xì)節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計的過程中,我們應(yīng)該怎么樣進(jìn)行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進(jìn)行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當(dāng)中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04