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