干貨-提高網(wǎng)站可讀性實(shí)用技巧 |
發(fā)布時(shí)間:2021-01-19 文章來源:本站 瀏覽次數(shù):2742 |
評(píng)價(jià)一個(gè)網(wǎng)站的良莠往往是從用戶體會(huì)的角度考慮的。合理簡(jiǎn)要的框架布局,美觀契合用戶閱覽習(xí)慣的界面當(dāng)然是網(wǎng)站杰出的用戶體會(huì)的要害點(diǎn),一起增強(qiáng)網(wǎng)頁(yè)內(nèi)容的可讀性,讓用戶有杰出的網(wǎng)頁(yè)閱覽體會(huì)就是一個(gè)網(wǎng)站建設(shè)成功的重要評(píng)分標(biāo)準(zhǔn)。網(wǎng)頁(yè)規(guī)劃是增強(qiáng)網(wǎng)頁(yè)內(nèi)容的可讀性的一個(gè)突破點(diǎn),經(jīng)過網(wǎng)頁(yè)規(guī)劃上比照度的操控往往能讓頁(yè)面內(nèi)容更流暢更有邏輯的出現(xiàn)在閱覽者面前,更直擊用戶的體會(huì)需求點(diǎn)。怎么從比照度上提高網(wǎng)頁(yè)內(nèi)容的可讀性,其實(shí)說起來也并不是那么雜亂。 顏色比照 遠(yuǎn)景的文字需求和布景有著顯著的比照,它需求能夠吸引用戶的眼球。 創(chuàng)建顏色比照的辦法有很多,最盛行的做法是在白色或許淡色的布景上運(yùn)用黑色或許深色的文字。這種規(guī)劃由來已久,經(jīng)久不衰的理由是它確實(shí)十分有用。當(dāng)然,將兩種顏色倒置過來,也相同有用。 可是,在實(shí)際的規(guī)劃過程中,情形雜亂多變。文字和布景的配色往往遭到多種要素的影響,這個(gè)時(shí)分需求多加嘗試,反思文字在布景的映襯下是否能夠被用戶明晰的看到,尤其是在視頻和圖片之上追加文字排版的時(shí)分。 為了下降布景多變的顏色關(guān)于文字的視覺影響,一個(gè)比較靠譜的計(jì)劃是在圖片和視頻上掩蓋上一個(gè)半透明的有色圖層,來“共同”色調(diào),讓文本的可讀性更好。規(guī)劃師能夠經(jīng)過調(diào)整這個(gè)有色圖層的透明度、明度和色調(diào)來操控和文字的比照度,這樣一來,布景圖片和視頻中的內(nèi)容關(guān)于文字的影響能夠降到最低。 另外一個(gè)計(jì)劃,是將文字和圖片、視頻分開排布,這樣就不會(huì)獻(xiàn)身兩者的信息表現(xiàn)力,僅有的問題是需求供給雙倍的展現(xiàn)空間,并且需求選取合理的排版布局。 文本款式的比照
不同風(fēng)格款式的文字能夠憑借差異,吸引用戶的注意力。風(fēng)趣而讓人著迷的字體越來越多。 單個(gè)字體自身的優(yōu)秀規(guī)劃是很不錯(cuò),可是兩種不同字體的比照帶來的反差,更能吸引用戶。不過,不同字體的調(diào)配對(duì)錯(cuò)常講究的,由于風(fēng)格不搭的不恰當(dāng)誰(shuí)家常常會(huì)讓用戶感到震動(dòng)。能夠選擇一些具有相同特征的不同字體,用戶不會(huì)為之感到突兀,這些字體最好擁有相同的x高度(小寫字母x的高度),在弧度和傾斜角度上十分挨近。這些“和而不同”的字體能讓文本內(nèi)容看起來共同而有差異,風(fēng)趣而不枯燥。 巨細(xì)尺寸比照
超大的字體和超小的字體所構(gòu)成的視覺差常常能夠讓用戶驚嘆。 當(dāng)字體大到必定程度的時(shí)分,就能帶來足夠的視覺沖擊,假如調(diào)配上很小的字體構(gòu)成比照,那么這種視覺沖擊會(huì)顯得愈加引人矚目。雖然超小的字體獨(dú)自運(yùn)用也能構(gòu)成類似的效果,可是相比超大字體要困難的多。字體的巨細(xì)差異,很簡(jiǎn)單被用戶注意到,超大的字體能夠在你的整個(gè)規(guī)劃當(dāng)中構(gòu)成視覺焦點(diǎn)。在文章排版中,正文字體運(yùn)用正常巨細(xì),標(biāo)題和副標(biāo)題運(yùn)用超大字體(副標(biāo)題會(huì)相對(duì)小一些),這樣的規(guī)劃會(huì)讓文章排版的輕重緩急明晰地出現(xiàn)出來。 對(duì)齊形式
談到可讀性的時(shí)分,對(duì)齊其實(shí)也個(gè)無(wú)法回避的論題。而在排版中,不同的對(duì)齊形式也是能構(gòu)成比照的。 一般,在對(duì)齊的規(guī)劃上有兩種常規(guī)思路: ·正文和標(biāo)題選用不同的對(duì)齊形式,構(gòu)成比照 ·在悉數(shù)排版中沿襲相同的對(duì)齊形式 從某種意義上來說,兩種思路都是對(duì)的。選取那種思路,主要取決于文本、標(biāo)題和其他規(guī)劃元素之間的關(guān)系。假如選用相同的對(duì)齊方法,能否確保標(biāo)題和正文之間有顯著比照、能否從布景和其他元素中鋒芒畢露?文本的行間距、字體巨細(xì)、和其他元素之間的間隔能否構(gòu)成杰出的視覺差? 在談到UI中的對(duì)齊問題的時(shí)分,最直觀的模型是一段文本和按鈕之間的關(guān)系。排版中,文本元素和按鈕之間的對(duì)齊形式應(yīng)該是怎樣的?這個(gè)問題很有意思,許多規(guī)劃師傾向于讓文本和按鈕縱向排列,居中對(duì)齊,可是網(wǎng)站的其他元素調(diào)配進(jìn)來的時(shí)分,又往往不會(huì)居中對(duì)齊。所以,對(duì)齊方法,是由元素自身的特點(diǎn)來決議,依據(jù)整個(gè)規(guī)劃,合理調(diào)配。 長(zhǎng)文本內(nèi)容
關(guān)于包含很多文本內(nèi)容的網(wǎng)站而言,正文部分的內(nèi)容排版就顯得相當(dāng)重要了。假如文本內(nèi)容都是無(wú)縫的出現(xiàn)出來的話,用戶很可能由于沒有層次而無(wú)法抓住重要信息。 所以,網(wǎng)頁(yè)中很多的文本信息,應(yīng)該考慮下列要素: ·文本塊的區(qū)域和巨細(xì) ·每行文字的長(zhǎng)度和高度 ·項(xiàng)目編號(hào)和列表 ·字符的粗體和斜體 ·顏色 一切的這些特點(diǎn)都能將文本中特定的要害詞、信息乃至口氣同其他的內(nèi)容區(qū)分開來,它們會(huì)成為文本中重要的錨點(diǎn),將和總要的信息經(jīng)過這種差異和比照,推送到用戶面前。
保持共同
共同性幾乎是一切規(guī)劃范疇都遵從的準(zhǔn)則,無(wú)論你在首頁(yè)或許標(biāo)題、正文中是怎么運(yùn)用比照的,最好將它延伸到整個(gè)規(guī)劃規(guī)范當(dāng)中去。 盡量運(yùn)用相同的顏色,相同的款式,共同的字體,假如規(guī)劃無(wú)法確保共同性,會(huì)讓用戶在界面中感到迷惑。確保用戶到哪個(gè)地方都會(huì)覺得他們?cè)谀愕木W(wǎng)站或許APP當(dāng)中。
|
|