干貨-提高網(wǎng)站可讀性實(shí)用技巧

      評(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)過(guò)網(wǎng)頁(yè)規(guī)劃上比照度的操控往往能讓頁(yè)面內(nèi)容更流暢更有邏輯的出現(xiàn)在閱覽者面前，更直擊用戶的體會(huì)需求點(diǎn)。怎么從比照度上提高網(wǎng)頁(yè)內(nèi)容的可讀性，其實(shí)說(shuō)起來(lái)也并不是那么雜亂。

顏色比照

      遠(yuǎn)景的文字需求和布景有著顯著的比照，它需求能夠吸引用戶的眼球。

      創(chuàng)建顏色比照的辦法有很多，最盛行的做法是在白色或許淡色的布景上運(yùn)用黑色或許深色的文字。這種規(guī)劃由來(lái)已久，經(jīng)久不衰的理由是它確實(shí)十分有用。當(dāng)然，將兩種顏色倒置過(guò)來(lái)，也相同有用。

可是，在實(shí)際的規(guī)劃過(guò)程中，情形雜亂多變。文字和布景的配色往往遭到多種要素的影響，這個(gè)時(shí)分需求多加嘗試，反思文字在布景的映襯下是否能夠被用戶明晰的看到，尤其是在視頻和圖片之上追加文字排版的時(shí)分。

      為了下降布景多變的顏色關(guān)于文字的視覺(jué)影響，一個(gè)比較靠譜的計(jì)劃是在圖片和視頻上掩蓋上一個(gè)半透明的有色圖層，來(lái)“共同”色調(diào)，讓文本的可讀性更好。規(guī)劃師能夠經(jīng)過(guò)調(diào)整這個(gè)有色圖層的透明度、明度和色調(diào)來(lái)操控和文字的比照度，這樣一來(lái)，布景圖片和視頻中的內(nèi)容關(guān)于文字的影響能夠降到最低。

      另外一個(gè)計(jì)劃，是將文字和圖片、視頻分開(kāi)排布，這樣就不會(huì)獻(xiàn)身兩者的信息表現(xiàn)力，僅有的問(wèn)題是需求供給雙倍的展現(xiàn)空間，并且需求選取合理的排版布局。

文本款式的比照

     不同風(fēng)格款式的文字能夠憑借差異，吸引用戶的注意力。風(fēng)趣而讓人著迷的字體越來(lái)越多。

     單個(gè)字體自身的優(yōu)秀規(guī)劃是很不錯(cuò)，可是兩種不同字體的比照帶來(lái)的反差，更能吸引用戶。不過(guò)，不同字體的調(diào)配對(duì)錯(cuò)常講究的，由于風(fēng)格不搭的不恰當(dāng)誰(shuí)家常常會(huì)讓用戶感到震動(dòng)。能夠選擇一些具有相同特征的不同字體，用戶不會(huì)為之感到突兀，這些字體最好擁有相同的x高度(小寫(xiě)字母x的高度)，在弧度和傾斜角度上十分挨近。這些“和而不同”的字體能讓文本內(nèi)容看起來(lái)共同而有差異，風(fēng)趣而不枯燥。

巨細(xì)尺寸比照

     超大的字體和超小的字體所構(gòu)成的視覺(jué)差常常能夠讓用戶驚嘆。

     當(dāng)字體大到必定程度的時(shí)分，就能帶來(lái)足夠的視覺(jué)沖擊，假如調(diào)配上很小的字體構(gòu)成比照，那么這種視覺(jué)沖擊會(huì)顯得愈加引人矚目。雖然超小的字體獨(dú)自運(yùn)用也能構(gòu)成類似的效果，可是相比超大字體要困難的多。字體的巨細(xì)差異，很簡(jiǎn)單被用戶注意到，超大的字體能夠在你的整個(gè)規(guī)劃當(dāng)中構(gòu)成視覺(jué)焦點(diǎn)。在文章排版中，正文字體運(yùn)用正常巨細(xì)，標(biāo)題和副標(biāo)題運(yùn)用超大字體(副標(biāo)題會(huì)相對(duì)小一些)，這樣的規(guī)劃會(huì)讓文章排版的輕重緩急明晰地出現(xiàn)出來(lái)。

對(duì)齊形式

     談到可讀性的時(shí)分，對(duì)齊其實(shí)也個(gè)無(wú)法回避的論題。而在排版中，不同的對(duì)齊形式也是能構(gòu)成比照的。

     一般，在對(duì)齊的規(guī)劃上有兩種常規(guī)思路：

·正文和標(biāo)題選用不同的對(duì)齊形式，構(gòu)成比照

·在悉數(shù)排版中沿襲相同的對(duì)齊形式

     從某種意義上來(lái)說(shuō)，兩種思路都是對(duì)的。選取那種思路，主要取決于文本、標(biāo)題和其他規(guī)劃元素之間的關(guān)系。假如選用相同的對(duì)齊方法，能否確保標(biāo)題和正文之間有顯著比照、能否從布景和其他元素中鋒芒畢露?文本的行間距、字體巨細(xì)、和其他元素之間的間隔能否構(gòu)成杰出的視覺(jué)差?

     在談到UI中的對(duì)齊問(wèn)題的時(shí)分，最直觀的模型是一段文本和按鈕之間的關(guān)系。排版中，文本元素和按鈕之間的對(duì)齊形式應(yīng)該是怎樣的?這個(gè)問(wèn)題很有意思，許多規(guī)劃師傾向于讓文本和按鈕縱向排列，居中對(duì)齊，可是網(wǎng)站的其他元素調(diào)配進(jìn)來(lái)的時(shí)分，又往往不會(huì)居中對(duì)齊。所以，對(duì)齊方法，是由元素自身的特點(diǎn)來(lái)決議，依據(jù)整個(gè)規(guī)劃，合理調(diào)配。

長(zhǎng)文本內(nèi)容

      關(guān)于包含很多文本內(nèi)容的網(wǎng)站而言，正文部分的內(nèi)容排版就顯得相當(dāng)重要了。假如文本內(nèi)容都是無(wú)縫的出現(xiàn)出來(lái)的話，用戶很可能由于沒(méi)有層次而無(wú)法抓住重要信息。

所以，網(wǎng)頁(yè)中很多的文本信息，應(yīng)該考慮下列要素：

·文本塊的區(qū)域和巨細(xì)

·每行文字的長(zhǎng)度和高度

·項(xiàng)目編號(hào)和列表

·字符的粗體和斜體

·顏色

      一切的這些特點(diǎn)都能將文本中特定的要害詞、信息乃至口氣同其他的內(nèi)容區(qū)分開(kāi)來(lái)，它們會(huì)成為文本中重要的錨點(diǎn)，將和總要的信息經(jīng)過(guò)這種差異和比照，推送到用戶面前。

      在較長(zhǎng)的文本區(qū)塊中(尤其是博客和長(zhǎng)文中)運(yùn)用不同的款式來(lái)區(qū)分不同類型的內(nèi)容，這樣做能夠顯著下降用戶閱覽的疲勞度。將長(zhǎng)內(nèi)容分解為更易于閱覽的部分，用戶才更簡(jiǎn)單買單。

保持共同

      共同性幾乎是一切規(guī)劃范疇都遵從的準(zhǔn)則，無(wú)論你在首頁(yè)或許標(biāo)題、正文中是怎么運(yùn)用比照的，最好將它延伸到整個(gè)規(guī)劃規(guī)范當(dāng)中去。

      盡量運(yùn)用相同的顏色，相同的款式，共同的字體，假如規(guī)劃無(wú)法確保共同性，會(huì)讓用戶在界面中感到迷惑。確保用戶到哪個(gè)地方都會(huì)覺(jué)得他們?cè)谀愕木W(wǎng)站或許APP當(dāng)中。

     比照度是讓網(wǎng)頁(yè)規(guī)劃在視覺(jué)上更具吸引力的重要東西，它讓排版布局愈加賦有層次結(jié)構(gòu)，高比照度的規(guī)劃讓內(nèi)容的可讀性有顯著的提高，而這也是規(guī)劃可用性達(dá)標(biāo)的最基本條件，也是網(wǎng)站建設(shè)成功的基本要求。