如果您缺乏藝術(shù)天賦，那么從頭開(kāi)始創(chuàng)建新的頁(yè)面布局可能會(huì)令人畏懼。您可以添加的元素和模塊太多，很難判斷從哪里開(kāi)始，甚至更難實(shí)現(xiàn)平衡且具有視覺(jué)吸引力的布局。幸運(yùn)的是，成都小程序設(shè)計(jì)可以遵循以下一些基本規(guī)則，這些規(guī)則將指導(dǎo)我們創(chuàng)建有吸引力的網(wǎng)頁(yè)。
如果您從頭開(kāi)始，則應(yīng)該添加的第一個(gè)元素是網(wǎng)格。網(wǎng)格系統(tǒng)為您的布局創(chuàng)建基線模板。它將邊距和裝訂線設(shè)置為一致的長(zhǎng)度，并創(chuàng)建指定的空間來(lái)添加每段內(nèi)容。這樣，您就知道要添加到此頁(yè)面的內(nèi)容，并且當(dāng)您繼續(xù)添加更多元素時(shí)，默認(rèn)情況下它們會(huì)均勻分布。
三分法是攝影中常用的設(shè)計(jì)原則。然而，它也適用于網(wǎng)頁(yè)設(shè)計(jì)。
根據(jù)三分法則，您的頁(yè)面在垂直和水平方向上分為三個(gè)部分，總共有九個(gè)部分。這是一個(gè)例子。
遵循此規(guī)則，沿著網(wǎng)格線放置的元素看起來(lái)對(duì)您的受眾更具吸引力。為什么？因?yàn)樗鼈冮g隔均勻。頁(yè)面的關(guān)鍵元素將訪問(wèn)者的注意力吸引到一條網(wǎng)格線上，而頁(yè)面的其余部分則用負(fù)空間或空白空間來(lái)平衡。
此設(shè)置對(duì)查看者來(lái)說(shuō)是正確的，可以幫助您創(chuàng)建將訪問(wèn)者的注意力引導(dǎo)到頁(yè)面上最重要元素的網(wǎng)頁(yè)。
負(fù)空間或空白是網(wǎng)頁(yè)上元素之間的空間。太多的空間可能會(huì)使您的頁(yè)面看起來(lái)很小，并且查看者可能無(wú)法找到他們正在尋找的內(nèi)容。負(fù)空間太少會(huì)讓您的頁(yè)面感覺(jué)混亂和局促，這可能會(huì)讓查看者不知所措，也使他們很難找到他們正在搜索的信息。
理想情況下，頁(yè)面上應(yīng)該有均衡數(shù)量的負(fù)空間。頁(yè)面元素的間距應(yīng)該均勻，并且訪問(wèn)者應(yīng)該能夠輕松找到他們正在尋找的確切內(nèi)容。
與三分法則類似，賠率法則是另一種主要用于攝影的設(shè)計(jì)原則。它認(rèn)為人們更喜歡看到奇數(shù)個(gè)頁(yè)面元素而不是偶數(shù)個(gè)頁(yè)面元素。
通常，大多數(shù)設(shè)計(jì)師都會(huì)采用三個(gè)元素，因?yàn)橥饷娴膬蓚€(gè)元素補(bǔ)充了中間的焦點(diǎn)。但您可以使用三個(gè)、五個(gè)、七個(gè)或其他數(shù)字，只要頁(yè)面仍然感覺(jué)間隔均勻并將注意力集中到中心元素即可。
不同的頁(yè)面有不同的布局是有原因的。您的主頁(yè)應(yīng)該與您的個(gè)人網(wǎng)頁(yè)看起來(lái)不同，并且這些頁(yè)面也可能彼此不同。
原因是您應(yīng)該嘗試圍繞該頁(yè)面上最重要的內(nèi)容構(gòu)建布局。這將創(chuàng)建一個(gè)層次結(jié)構(gòu)，您可以遵循其余元素的層次結(jié)構(gòu)，以便它們將觀眾的注意力引導(dǎo)回主要內(nèi)容。
我毫不夸張地說(shuō)，您可以從大量的布局設(shè)計(jì)中尋找靈感。以下是一些最受歡迎的設(shè)計(jì)，我們將它們分為特定類別，以便您可以查看主頁(yè)設(shè)計(jì)、單頁(yè)網(wǎng)站設(shè)計(jì)、登陸頁(yè)面布局等。
1.全屏照片
全屏照片布局使用圖像作為主要背景，該背景橫跨頁(yè)面長(zhǎng)度或折疊上方。文本、導(dǎo)航功能和號(hào)召性用語(yǔ)通常覆蓋在圖像上。這會(huì)立即吸引觀眾的注意力，因?yàn)樗麄儠?huì)在主頁(yè)最前面看到明亮、充滿活力的圖像。
2.動(dòng)畫(huà)
誰(shuí)不喜歡動(dòng)畫(huà)？它們很有趣、引人入勝，而且——就像上面的例子一樣——有時(shí)也令人著迷。
動(dòng)畫(huà)使頁(yè)面上的元素動(dòng)起來(lái)。它們可以引起人們對(duì)特定元素的注意，或者只是為您的用戶創(chuàng)造一種交互式的、愉快的體驗(yàn)。
3.全屏視頻背景
全屏視頻背景還可以為您的主頁(yè)增添一些流行感。在此示例中，用戶可以通過(guò)單擊頁(yè)面右側(cè)、左側(cè)、頂部和底部的選項(xiàng)卡來(lái)查看有關(guān)制作公司的不同信息。
何時(shí)使用此頁(yè)面布局：
最好的全屏視頻背景是那些看起來(lái)連續(xù)循環(huán)而不引起人們注意的背景。例如，上面示例中的定格動(dòng)畫(huà)視頻似乎會(huì)無(wú)限地運(yùn)行，而無(wú)需手動(dòng)重新啟動(dòng)視頻或觀看尷尬的電影制作剪輯，讓您從結(jié)尾回到開(kāi)頭。
4.交替
交替布局平衡交替列中的文本和圖像。這使您可以用文本來(lái)補(bǔ)充圖像，而無(wú)需在整個(gè)頁(yè)面上重復(fù)相同的圖案。如果您想在主頁(yè)上堆積大量?jī)?nèi)容，但又不希望讀者在到達(dá)頁(yè)面底部時(shí)失去興趣，那么這是理想的選擇。
何時(shí)使用此頁(yè)面布局：
交替布局非常適合推廣博客文章。您可以將帖子的特色圖片放在文章的簡(jiǎn)短描述旁邊。這可以讓訪問(wèn)者先睹為快，了解帖子的內(nèi)容及其寫(xiě)作方式。
5.分屏
分屏布局將您的網(wǎng)站分為兩半。這是一個(gè)引人注目的布局，可以在您的主頁(yè)上創(chuàng)建雙色調(diào)背景。您可以在讀者滾動(dòng)時(shí)保持這種劃分，或者交替使用它以保持訪問(wèn)者的警惕。
分屏設(shè)計(jì)適合任何類型的網(wǎng)站。它們營(yíng)造出現(xiàn)代的外觀和感覺(jué)，并且可以輕松匹配您品牌的調(diào)色板。
6.漸變
漸變布局為您的目標(biāo)網(wǎng)頁(yè)添加混合顏色。在此示例中，左側(cè)的橙色逐漸過(guò)渡為右側(cè)的洋紅色。在中間，白色文本覆蓋背景圖像，號(hào)召性用語(yǔ)位于副本下方。
何時(shí)使用此頁(yè)面布局：
庫(kù)存照片很棒，但很少針對(duì)您的品牌進(jìn)行定制。在庫(kù)存圖像上添加帶有公司顏色的漸變可以為您的網(wǎng)頁(yè)添加一些急需的個(gè)性化內(nèi)容。畢竟，您希望目標(biāo)網(wǎng)頁(yè)與網(wǎng)站的整體外觀相匹配。
找到完美的頁(yè)面布局需要一些時(shí)間，但等待是值得的。一旦您的網(wǎng)站獲得了正確的外觀和感覺(jué)，您就有更好的機(jī)會(huì)增加受眾并將更多潛在客戶轉(zhuǎn)化為客戶。成都小程序設(shè)計(jì)使用上面的想法來(lái)啟動(dòng)您的搜索，并繼續(xù)測(cè)試，直到找到適合您和您的訪問(wèn)者的方法。
