網(wǎng)站優(yōu)化

Website development

?布局設(shè)計(jì)技巧來優(yōu)化你的網(wǎng)頁(yè)內(nèi)容的劃分

發(fā)布時(shí)間：2017-01-16 11:20:37

布局設(shè)計(jì)技巧來優(yōu)化你的網(wǎng)頁(yè)內(nèi)容的劃分.jpg

設(shè)計(jì)不只是添加文本和圖像到您的網(wǎng)頁(yè)和好的希望是簡(jiǎn)單的。一個(gè)恒星的布局有助于吸引觀眾，引導(dǎo)他們到你的內(nèi)容的重要的部分。值得慶幸的是，有可以使設(shè)計(jì)過程更容易策略豐富。

在這篇文章中，我們將為你創(chuàng)造一個(gè)平衡的布局，網(wǎng)站提供的四個(gè)小技巧，比如使用空白和重復(fù)的重要設(shè)計(jì)元素。自始至終，我們也會(huì)告訴你如何使用分的功能把一些元素的生活。讓我們開始吧。

為什么你的頁(yè)面布局是重要的

你的頁(yè)面布局可以是人與人之間的差異離開您的網(wǎng)站幾乎立刻，或粘貼在閱讀你的內(nèi)容?？傊?，正確的布局可以吸引游客，他們重要的內(nèi)容，并鼓勵(lì)他們停留在你的網(wǎng)站。

當(dāng)然，人們會(huì)而不是他們的時(shí)間spend看著一個(gè)設(shè)計(jì)精美的網(wǎng)站不是平原。很簡(jiǎn)單，一個(gè)不起眼的網(wǎng)站訪問者參與到輸。

同時(shí)獲得網(wǎng)站訪問者是一回事，讓他們以某種方式行事時(shí)，他們已經(jīng)降落完全是另一回事。終，你希望你的重要的內(nèi)容被消耗，和你呼吁采取行動(dòng)（CTA）應(yīng)遵循。事實(shí)上，實(shí)際的人類心靈期待和希望CTA–所以你要做的是引導(dǎo)讀者在正確的方向與正確的布局。

4布局設(shè)計(jì)技巧來優(yōu)化你的網(wǎng)站內(nèi)容

而本文的提示將覆蓋各種設(shè)計(jì)元素，讓你開始，也有無數(shù)的網(wǎng)站來幫助你找到布局的啟示。網(wǎng)站如awwwards展示偉大的，高品質(zhì)的例子–和即使Pinterest可能是靈感的源泉。至于技巧，讓我們看一看！

1。使用網(wǎng)格系統(tǒng)

在網(wǎng)站設(shè)計(jì)中，網(wǎng)格是可見的或假想的水平線和垂直線作為指導(dǎo)幫助你組織和安排你的內(nèi)容。在策劃自己的網(wǎng)格系統(tǒng)，你也可以將其他設(shè)計(jì)等技術(shù)的使用焦點(diǎn)和三分法

一個(gè)好的焦點(diǎn)，無論是文本，圖像或塊的一部分，應(yīng)該抓住讀者的注意力。它往往是放在頁(yè)面的中心，或者你的網(wǎng)格的中心部分。

三分法是基于在三個(gè)垂直或水平的網(wǎng)頁(yè)分割的概念。然而，這并不一定意味著不同的內(nèi)容部分已經(jīng)出現(xiàn)在三列，有的可能跨越兩。例如，許多網(wǎng)頁(yè)–如我們的博客–有一個(gè)側(cè)邊欄，占第三，而主要的文本跨越左、中1/3。

使用迪維生成器可以很容易地創(chuàng)建一個(gè)網(wǎng)格的元素。例如，應(yīng)用規(guī)則的三分之一，實(shí)際上你可以創(chuàng)建三列，每三列：

A three by three Divi Module grid

創(chuàng)建網(wǎng)格，首先進(jìn)入分Builder和點(diǎn)擊插入列（S）：

The Divi Builder initial screen with the Insert Column(s) button highlighted

在彈出的選擇三列選項(xiàng)：

The Insert Columns screen with the three column option highlighted

下一步，點(diǎn)擊復(fù)制按鈕兩次，你會(huì)三格有一三，準(zhǔn)備好你的內(nèi)容：

當(dāng)然，這不是一個(gè)偉大的布局的唯一因素。在你引導(dǎo)讀者也至關(guān)重要。

2。結(jié)構(gòu)的內(nèi)容放在“z-pattern '或'“F型”的

這取決于你的顯示內(nèi)容的類型，絕大多數(shù)人的閱讀方式在一定的網(wǎng)頁(yè)。眼球追蹤研究采用熱地圖顯示常見的模式是f-patterns和z-patterns。你可以利用這方面的知識(shí)，你的優(yōu)勢(shì)來引導(dǎo)讀者到頁(yè)面的重要的領(lǐng)域。

當(dāng)讀者瀏覽你的網(wǎng)站的頂部從左到右，然后看著你的頁(yè)面從上到下，這是一個(gè)“F型”。他們通常適用于更多的大量文本的頁(yè)面，比如博客，它展示了你的內(nèi)容用副標(biāo)題的重要性。

相反，讀者掃描你的網(wǎng)站的頂部從左到右，斜下到底部，然后再?gòu)淖蟮接沂钦f是在z-pattern閱讀。它們適用于簡(jiǎn)單的頁(yè)面，特別是那些與CTA。這就是為什么人們常常建議把你的CTA在頁(yè)面的右下角。當(dāng)然，在你的頁(yè)面底部的其他信息也應(yīng)該以吸引他們點(diǎn)擊CTA提供給讀者足夠的信息。這個(gè)快速發(fā)芽主頁(yè)是一個(gè)很好的例子：

The Quicksprout homepage

標(biāo)志和導(dǎo)航菜單引導(dǎo)你頁(yè)面的頂部。眼睛是那么的吸引到頁(yè)面中間的一張臉的粗體文本和圖像，希望這將吸引你讀的銷售拷貝。后，明亮的白色讓你在地址欄的主要內(nèi)容的底部，CTA按鈕。

在Divi，模塊化系統(tǒng)，使創(chuàng)建f-patterns和z-patterns簡(jiǎn)單。你可以開始在迪維生成器創(chuàng)建你的總體布局和內(nèi)容，然后調(diào)整它在實(shí)時(shí)使用可視化生成器

當(dāng)然，同樣重要的是，CTA本身是可點(diǎn)擊的。我們的CTA的模塊劃分可以幫助說服你的讀者點(diǎn)擊：

A Divi CTA Module example

在這個(gè)模塊，你有無窮無盡的選擇，創(chuàng)造了令人難以置信的CTAs。你可以控制大小，字體，顏色等選項(xiàng)，甚至可以讓他們粘所以他們永遠(yuǎn)卡在的地方。

三.重復(fù)重要的設(shè)計(jì)元素

重復(fù)的元素是我們經(jīng)常添加到我們的設(shè)計(jì)思維。保持相同的字體和大小標(biāo)題，或使用相同的子彈點(diǎn)風(fēng)格在一塊，是單元重復(fù)常見的例子。然而，它也可以擴(kuò)展到圖像、圖形、色彩、空間關(guān)系、以及幾乎任何你能想到的組件設(shè)計(jì)。

元素重復(fù)注射進(jìn)你的布局的一致性，并結(jié)合個(gè)人的組件創(chuàng)建一個(gè)更具凝聚力和吸引力的設(shè)計(jì)。它也可以幫助讀者用少的混亂的導(dǎo)航頁(yè)。例如，采取緩沖的主頁(yè)：

The Buffer homepage

這表明，標(biāo)志畫面的焦點(diǎn)圖像內(nèi)的重復(fù)。紙飛機(jī)也像紙樣子的標(biāo)志板，使整個(gè)頁(yè)面看起來更連貫的意義。

在把復(fù)制的元素是超級(jí)容易。只要瀏覽到您所選擇的元素在迪維生成器，并單擊復(fù)制按鈕復(fù)制元素。從這里，你可以拖放元素在您的網(wǎng)頁(yè)上的其他地方，并調(diào)整而不影響您的原：

The Divi Builder with a module copy button highighted

同樣的，你可以保存布局未來創(chuàng)造一致性在你的網(wǎng)站–我們會(huì)有更多的關(guān)于這一點(diǎn)以后。

4.適當(dāng)使用空格

白色的空間–或者稱為“負(fù)空間–只是一頁(yè)的空白部分，不占用的內(nèi)容。白色空間的使用往往被忽視。很多設(shè)計(jì)師發(fā)現(xiàn)它誘人，力圖在盡可能多的信息。然而，當(dāng)談到保持觀眾的參與，似乎那么真的可以更，和適當(dāng)?shù)氖褂冒咨臻g是關(guān)鍵

這里有一些提示適當(dāng)使用白色空間：
調(diào)整幅度約副本增加利潤(rùn)的大小可以復(fù)制部分。這使得頁(yè)面顯得不那么雜亂的文字更容易閱讀。
增加空間之間的段落增加段落之間的間距可以打破文字和較長(zhǎng)的文章看起來不那么嚇人。
調(diào)整行高和字母間距你可以調(diào)整線和字母來確保你的文本盡可能可讀性之間的空間。
環(huán)繞你的焦點(diǎn)與白色空間。白色空間增添了周圍的焦點(diǎn)，如圖片或標(biāo)題，可以使它更為突出。

一個(gè)真實(shí)的例子，該谷歌主頁(yè)是一個(gè)好的例子，事實(shí)上任何其他–，它以事物發(fā)展到極端：

The Google homepage

蘋果另一家公司是誰(shuí)使用焦點(diǎn)（通常是產(chǎn)品形象和頭）被大量的白色空間：

Apple's Mac Mini promotional page

這可以幫助你使你調(diào)整在你的部分，邊緣和填充的行，創(chuàng)建只白色空間適量和模塊。例如，調(diào)整行，點(diǎn)擊菜單按鈕，選擇你需要顯示的無數(shù)：

A section of the Row Module Settings screen

當(dāng)你在一個(gè)模塊中的文本，通常有選項(xiàng)來調(diào)整你的行高和文字的間距。例如，在一個(gè)文本模塊，進(jìn)入先進(jìn)的設(shè)計(jì)設(shè)置屏幕，以及特征之間你會(huì)發(fā)現(xiàn)你有高度和間距的選擇：

A section of the Text Module Settings screen

可以相應(yīng)調(diào)整直到你快樂。你也可以選擇讓這些變化以視覺生成器來看看你的變化會(huì)實(shí)時(shí)。

后，即使更多白色的空間，你可以使用一個(gè)分頻器模塊。這使您可以創(chuàng)建單獨(dú)的模塊之間的線路或一些空白空間，幾乎所有的頁(yè)面。

多少分可以幫助你保持你的布局設(shè)計(jì)一致

一旦你制作完美的布局，你可能不會(huì)想用它只有一次。節(jié)約你的布局意味著你可以使用它在您的網(wǎng)站的多個(gè)頁(yè)面。這不僅節(jié)省了大量的時(shí)間和精力，而且還創(chuàng)造了一種在您的網(wǎng)頁(yè)的統(tǒng)一性和熟悉性，這有助于讀者的體驗(yàn)。

這是簡(jiǎn)單的做內(nèi)分。一旦你與你的布局選擇快樂，保存到庫(kù)在Divi Builder的左上角：

The Divi Builder interface including the Save to Library button

在彈出對(duì)話框中，輸入你想用你的新設(shè)計(jì)的名稱，并打保存：

The Save To Library popup

找回你的布局未來的使用，選擇負(fù)載從圖書館在迪維生成器…

The Divi Builder with the Load From Library button highlighted

…然后去添加從圖書館選項(xiàng)卡，然后選擇要使用的布局：

The Add From Library tab in the Load Layout screen

編輯你的布局，你可以從你的WordPress儀表盤訪問它們。選擇分，點(diǎn)擊分圖書館查看你保存的布局

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7054,0.html

上一篇： UX設(shè)計(jì)和原型：這是Adobe體驗(yàn)設(shè)計(jì)能做什么

下一篇：拼貼制作工具來創(chuàng)建有趣的視覺元素

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理