當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  網(wǎng)站運(yùn)營(yíng) >  正文

巧妙利用布局和排版迅速提升網(wǎng)站顏值

 2017-11-20 14:43  來(lái)源: A5企業(yè)專欄   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

網(wǎng)站內(nèi)容是吸引新客戶、維護(hù)老顧客、提升用戶轉(zhuǎn)化率的關(guān)鍵所在。不少站長(zhǎng)都熟練地掌握了這一策略,在網(wǎng)站中創(chuàng)建高質(zhì)量且易于加工、理解的內(nèi)容。但除了內(nèi)容作為信息本身極其重要以外,還有一項(xiàng)對(duì)網(wǎng)站信息傳遞、用戶瀏覽體驗(yàn)十分重要的因素,那就是網(wǎng)頁(yè)排版。事實(shí)上,網(wǎng)站內(nèi)容會(huì)因字體類型或排版形式的變化而有所改變,合理的網(wǎng)頁(yè)排版不僅能夠突出網(wǎng)站的重點(diǎn)內(nèi)容,提高內(nèi)容的可讀性,還能保證網(wǎng)站的協(xié)調(diào)一致,讓用戶在瀏覽上更加輕松方便。打個(gè)比方來(lái)說(shuō),如果網(wǎng)頁(yè)內(nèi)容是鉆石戒指,合理的排版就是珠寶盒,是信息的載體,能將信息以恰當(dāng)、有效的方式展現(xiàn)出來(lái)。既然網(wǎng)頁(yè)排版如此重要,今天小飛就帶大家一起看看什么是網(wǎng)頁(yè)排版,網(wǎng)頁(yè)排版有哪些好處以及怎樣做好網(wǎng)站排版(以文字排版為主)??靵?lái)一起來(lái)看看吧!

什么是網(wǎng)頁(yè)排版?

網(wǎng)頁(yè)排版就是將網(wǎng)頁(yè)上各種元素如文字、圖片、圖形等可視化信息元素調(diào)整位置、大小,使布局清晰明了。排版通常被稱為一種藝術(shù),這是因?yàn)樗c設(shè)計(jì)師的創(chuàng)造力息息相關(guān)。排版還可以服務(wù)于多種目的:強(qiáng)調(diào)網(wǎng)站的主題、定義個(gè)性化品質(zhì)、表達(dá)某種情感、引發(fā)訪客的興趣、呈現(xiàn)整體的設(shè)計(jì)美感等。它是網(wǎng)站內(nèi)容和布局的集合處,旨在信息和形式之間探索最佳的平衡點(diǎn),是每個(gè)網(wǎng)站設(shè)計(jì)中都必不可少的組成部分。

為什么說(shuō)一個(gè)好的網(wǎng)頁(yè)排版十分重要呢?

1. 強(qiáng)調(diào)網(wǎng)站的視覺效果

視覺信息的重要性,小飛在前面不少文章中都已經(jīng)談過(guò)了。訪客在登入網(wǎng)站的第一時(shí)間就受各種視覺信息的影響,會(huì)對(duì)網(wǎng)站形成一個(gè)基本的認(rèn)識(shí),這背后有很多心理學(xué)知識(shí)可以作為支撐,小飛今天就不一一介紹了。這些視覺信息還會(huì)奠定網(wǎng)站的整個(gè)基調(diào)。而網(wǎng)站的排版涉及到字體、顏色、布局等多個(gè)不同的元素,對(duì)視覺效果會(huì)產(chǎn)生很大的影響。比如我們可以使用粗體、下劃線等突出某行文字,使用強(qiáng)烈對(duì)比的顏色突出重點(diǎn)內(nèi)容,讓網(wǎng)站在內(nèi)容的展現(xiàn)上更有層次感。這樣一來(lái),訪客甚至不用仔細(xì)研究文本或?yàn)g覽圖片就能獲取一些信息,也更易獲得用戶的好感。

2. 提高網(wǎng)站的可讀性

網(wǎng)站排版很重要的一點(diǎn)就在于文字的排版。訪客瀏覽網(wǎng)站的目的就是獲取想要的信息,如果網(wǎng)站在可讀性方面有所欠缺的話,這是任何其他優(yōu)勢(shì)都難以補(bǔ)救的。在文字較多的情況下,文字的間距以及每行文字的長(zhǎng)度都應(yīng)該有一個(gè)嚴(yán)格的要求。小飛相信大家都是喜歡瀏覽清晰的文字的吧!文字間距太小、段落間距不明顯,再有含金量的內(nèi)容看上也只是密密麻麻的文字墻,再有趣的內(nèi)容也難以引起訪客的興趣。除此以外,字體大小,布局和顏色的微小調(diào)整有助于強(qiáng)調(diào)信息的要點(diǎn),將最重要的內(nèi)容展示給訪客,進(jìn)一步提高了網(wǎng)站內(nèi)容的可讀性和可用性。

3. 保持網(wǎng)站的一致性

從某種程度上來(lái)說(shuō),網(wǎng)頁(yè)排版就像膠水,它能將網(wǎng)站中各種不同的元素牢牢的"黏"在一起。訪客通常希望看到整齊劃一、協(xié)調(diào)一致的網(wǎng)站。當(dāng)然這并不意味著網(wǎng)站需要看上去很大眾化,而是指網(wǎng)站上的各種元素彼此之間可以很好的協(xié)調(diào),從標(biāo)題、導(dǎo)航菜單、文本到圖片、頁(yè)腳,再到行為引導(dǎo)按鈕。排版就可以做到這一點(diǎn),我們可以在網(wǎng)站中使用相同的配色方案和字距行距等,讓不同元素相呼應(yīng)、相得映彰。此外,搜索引擎也更加偏愛有序整齊的內(nèi)容,網(wǎng)站的一致性更加方便搜索引擎快速的進(jìn)行讀取。還有,網(wǎng)站上各種元素協(xié)調(diào)一致,用戶在尋找想要的信息的時(shí)候也會(huì)更有頭緒,不至于暈頭轉(zhuǎn)向,有利于提升用戶轉(zhuǎn)化率。雖然網(wǎng)頁(yè)排版可以維持網(wǎng)站的一致性,它同樣也能暴露網(wǎng)站的不協(xié)調(diào),這就要考驗(yàn)大家的實(shí)際運(yùn)用了。

怎樣做好網(wǎng)頁(yè)排版?

合理的網(wǎng)頁(yè)排版往往既能突出內(nèi)容重點(diǎn),又能傳遞較為全面的內(nèi)容,在保證信息傳遞的過(guò)程中避免過(guò)重的閱讀負(fù)擔(dān),提供極佳的視覺體驗(yàn)以及內(nèi)容的可讀性和可用性。而做好網(wǎng)頁(yè)排版需要我們合理設(shè)置文字的顏色、大小,讓圖片與文字更協(xié)調(diào),導(dǎo)航圖標(biāo)與文字恰當(dāng)嵌入等。說(shuō)到底,文字排版是重中之重,合理的網(wǎng)頁(yè)排版要求設(shè)計(jì)師融會(huì)貫通的使用文字排版。所以接下來(lái)小飛就重點(diǎn)介紹一下文字排版中需要注意的一些元素:

1. 選擇合適的字體、字型

選擇合適的字體很重要,不同的字體往往代表著不一樣的性格,對(duì)網(wǎng)站的呈現(xiàn)也會(huì)產(chǎn)生很大的影響,影響網(wǎng)站獨(dú)特形象的樹立。網(wǎng)站中也不要一次性使用過(guò)多的字體。如果你對(duì)于這些不太擅長(zhǎng),不用擔(dān)心,小飛就是來(lái)提供幫助的。字體(typeface),字體就是文本的文字樣式,它是一個(gè)比較籠統(tǒng)的概念,比如宋體、黑體等;而字型(font)更加具體,它是字體的一個(gè)子集。在網(wǎng)站中,我們經(jīng)常需要設(shè)置的就是字體,包括它的大小(字號(hào))、字重(加粗、常規(guī)等)和字體樣式。5號(hào)加粗的微軟雅黑就是一種字型,小四傾斜的華文宋體也是同理。有些人常常需要花幾個(gè)小時(shí)、幾周或幾個(gè)月來(lái)挑選一款合適的字體,但仍然不確定哪款最合適。小飛將不同的字體分成了4種類別,快來(lái)一起了解一下吧!

1.1.襯線字體(serif):是指在字的筆畫開始、結(jié)束的地方有額外的裝飾,而且筆畫的粗細(xì)會(huì)有所不同。這種字體比較容易識(shí)別,因?yàn)樗鼜?qiáng)調(diào)了每個(gè)字母筆畫的開始和結(jié)束,可讀性比較高,在長(zhǎng)段落或者整文中比較適合使用。襯線字體的栗子包括Times,Cambiria等,而中文中最標(biāo)準(zhǔn)的襯線字體就是宋體,襯線的特征非常明顯,字形結(jié)構(gòu)也和手寫的楷書一致。

1.2. 無(wú)襯線字體(sans serif):這種字體沒(méi)有那些額外的裝飾,而且筆畫的粗細(xì)都差不多。這種字體比較醒目,往往被用在標(biāo)題、較短的文字段落。相對(duì)嚴(yán)肅正經(jīng)的襯線字體,無(wú)襯線字體更能給人一種輕松自在的感覺?,F(xiàn)在人們也越來(lái)越趨向于使用無(wú)襯線字體,可能是因?yàn)樗鼈兛瓷细?jiǎn)潔,更有極簡(jiǎn)主義的風(fēng)范。Verdana、Arial和雅黑字體都是常用的無(wú)襯線字體。

1.3.腳本字體(Script):腳本字體大多是裝飾性質(zhì)的。因其美觀大方而受到不少設(shè)計(jì)師的歡迎,它們最常出現(xiàn)在婚禮請(qǐng)柬、證書等文件上。在網(wǎng)站中使用腳本字體可以增添獨(dú)特的藝術(shù)美感,不過(guò)在使用時(shí)記住盡量給它們留下足夠的空間、便于它們更好的發(fā)揮。

1.4.手寫字體:顧名思義,手寫字體即是模擬人寫作的筆跡,它可以非常正式,也能十分隨意。這種字體可能最能代表公司網(wǎng)站別具一格的獨(dú)特魅力,展現(xiàn)個(gè)性化色彩。相對(duì)于其他字體,它最大的優(yōu)勢(shì)也在于這種字體有著其他類別都不具備的人的元素。

2. 調(diào)整行長(zhǎng)和行距

行長(zhǎng),是指單行文字的長(zhǎng)度。如果一行文字太長(zhǎng),訪客很難注意到該段落的起點(diǎn)和終點(diǎn),閱讀起來(lái)比較困難;而一行文字過(guò)短,訪客在瀏覽時(shí)需要不停的來(lái)回掃視,這也會(huì)破會(huì)閱讀的節(jié)奏。所以每一行文字的字?jǐn)?shù)應(yīng)該合理安排,提高網(wǎng)站的可讀性。中文在14號(hào)字體時(shí),建議35—45個(gè)文字。

行距,顧名思義,行與行的間距。行距對(duì)網(wǎng)站的易讀性也有很大的影響。過(guò)寬的行距會(huì)讓內(nèi)容失去延續(xù)性,而太窄的行距又會(huì)易使訪客跳行、出現(xiàn)閱讀障礙。除此以外,我們還可以通過(guò)調(diào)整行距展現(xiàn)獨(dú)特的版式效果,寬一點(diǎn)的行距更顯輕松、隨意,寬窄行距并存也能增加網(wǎng)站內(nèi)容的層次感。行距通常隨字體的改變而變化,行間距稍稍大于字體的大小(如果使用了10號(hào)字體,,那么默認(rèn)的間距是12號(hào))。這種默認(rèn)的設(shè)置一般看上去很擁擠,你可以考慮增加間距提高可讀性,不過(guò)也要記住不能增加太多,把握適度原則。

3. 適當(dāng)留白

留白的好處小飛在《少即是多 - 怎樣在響應(yīng)式網(wǎng)站中運(yùn)用"留白"藝術(shù)?》有進(jìn)行過(guò)詳細(xì)介紹,大家感興趣可以去看一下。在排版中,我們也要使用留白,事實(shí)上前面的字間距、行間距、段間距都是留白的幾種表現(xiàn)形式。除了這些以外,網(wǎng)站的不同區(qū)塊、圖片等之間也要留下充足的空間,讓訪客在獲取、加工這些信息時(shí)更加容易。

做好網(wǎng)站的排版并不簡(jiǎn)單,它涉及到方方面面的元素,需要花費(fèi)很多時(shí)間和精力。新的字體和排版趨勢(shì)每天都在不斷更新,當(dāng)前有效的布局和主題某一天可能就會(huì)過(guò)時(shí)。不過(guò)不用擔(dān)心,快來(lái)起飛頁(yè)自助建站平臺(tái)做一個(gè)響應(yīng)式網(wǎng)站吧!起飛頁(yè)自助建站平臺(tái)()提供了眾多經(jīng)典的模板,網(wǎng)頁(yè)排版十分精美。另外,起飛頁(yè)也一直在關(guān)注網(wǎng)頁(yè)排版的最新趨勢(shì),會(huì)不斷根據(jù)最新潮流推出新穎實(shí)用的模板,快來(lái)嘗試一下吧!還有,雖然網(wǎng)頁(yè)字體、排版布局版式變更很快,但如果你找到了一款非常適合的字體和排版類型,記得使用一段時(shí)間,看看效果,不要盲目追逐潮流。

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
起飛頁(yè)建站

相關(guān)文章

  • 響應(yīng)式網(wǎng)站中優(yōu)化用戶體驗(yàn)的7個(gè)關(guān)鍵點(diǎn)

    隨著移動(dòng)設(shè)備的不斷興起,響應(yīng)式設(shè)計(jì)越來(lái)越受到大眾的喜愛,站長(zhǎng)們?cè)诖罱ňW(wǎng)站時(shí)也更加傾向于選擇響應(yīng)式網(wǎng)站。不過(guò),大多數(shù)站長(zhǎng)們都認(rèn)為既然響應(yīng)式網(wǎng)站可智能根據(jù)設(shè)備屏幕大小呈現(xiàn)不同的展示效果,那就不用再對(duì)移動(dòng)端的網(wǎng)站進(jìn)行手動(dòng)調(diào)整了。其實(shí)這種看法是片面的,響應(yīng)式網(wǎng)站雖然自身具備一定的特質(zhì),但有時(shí)PC端網(wǎng)站和移動(dòng)

  • 盤點(diǎn)2017年最受歡迎的10個(gè)商城范例:我們從中可以得到哪些啟示?

    在電商和線上購(gòu)物快速發(fā)展的今天,擁有一個(gè)商城網(wǎng)站很是必要,關(guān)于試水獨(dú)立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網(wǎng)站?》查看。但是,搭建商城網(wǎng)站并不簡(jiǎn)單,慶幸的是目前市面上涌現(xiàn)了不少建站平臺(tái),起飛頁(yè)自助建站平臺(tái)就是其中一個(gè),各位商家可以借助起飛頁(yè)輕松搭建出一個(gè)好看、實(shí)用的商城網(wǎng)站。不過(guò)

    標(biāo)簽:
    起飛頁(yè)建站
  • 讓首頁(yè)背景動(dòng)起來(lái)是怎樣一種感覺?8張圖告訴你真相!

    現(xiàn)在越來(lái)越多的設(shè)計(jì)師開始在網(wǎng)頁(yè)中使用循環(huán)視頻作為背景,這種現(xiàn)象的出現(xiàn)主要有兩個(gè)原因。一方面,移動(dòng)設(shè)備性能不斷完善,網(wǎng)速越來(lái)越快,用戶能夠且有條件在移動(dòng)設(shè)備上瀏覽視頻背景的網(wǎng)站;另一方面,隨著HTML5技術(shù)的發(fā)展,很多主流瀏覽器的視頻標(biāo)簽都支持循環(huán)(Loop)屬性,網(wǎng)頁(yè)上單個(gè)或一系列視頻短片的循環(huán)播放

    標(biāo)簽:
    起飛頁(yè)建站
  • 缺乏靈感?給你8個(gè)值得每天學(xué)習(xí)的頂尖設(shè)計(jì)網(wǎng)站

    網(wǎng)站設(shè)計(jì)是一種藝術(shù),它離不開靈感和創(chuàng)意。但靈感與創(chuàng)意的涌現(xiàn)是需要碰撞、需要時(shí)機(jī)的,大多數(shù)設(shè)計(jì)師都不可能每時(shí)每刻都靈感爆棚。當(dāng)您缺乏設(shè)計(jì)靈感時(shí),不妨看一看下面這些網(wǎng)站,它們都收錄了豐富的素材,都有許多獨(dú)立設(shè)計(jì)師上傳的優(yōu)質(zhì)作品,沒(méi)準(zhǔn)這些設(shè)計(jì)就能讓你眼前一亮,獲得一些想法或啟發(fā)。趕緊和小飛一起看看這8個(gè)值

    標(biāo)簽:
    起飛頁(yè)建站
  • 目前為止用戶體驗(yàn)度最好的表單:浮動(dòng)標(biāo)簽式的表單

    在當(dāng)今這個(gè)互聯(lián)網(wǎng)時(shí)代,填寫表單對(duì)用戶來(lái)說(shuō)就是家常便飯,在網(wǎng)站進(jìn)行注冊(cè)登錄時(shí)、在網(wǎng)上購(gòu)物時(shí),都免不了填寫表單這一環(huán)。表單是網(wǎng)頁(yè)設(shè)計(jì)中重要的組成部分之一,在獲取用戶信息方面發(fā)揮著不可或缺的作用,它是用戶和網(wǎng)站的一種互動(dòng)形式,這種形式的互動(dòng)越順暢,網(wǎng)站的用戶轉(zhuǎn)化率就越高。這也是為什么許多站長(zhǎng)們一直在研究如

熱門排行

信息推薦