您的網(wǎng)站設(shè)計(jì)比您想象的更重要。您可以在世界上實(shí)施任何轉(zhuǎn)化提升策略，但如果看起來像垃圾，那么你不會(huì)很好。

設(shè)計(jì)不只是設(shè)計(jì)師的設(shè)計(jì)。設(shè)計(jì)是營銷。設(shè)計(jì)是您的產(chǎn)品及其工作原理。我對設(shè)計(jì)了解越多，結(jié)果越好。

這是您應(yīng)該知道和遵循的8個(gè)有效的網(wǎng)頁設(shè)計(jì)原則。

注意：ConversionXL研究所是營銷人員的前1％的學(xué)習(xí)手段的地方。今天注冊

有效的網(wǎng)頁設(shè)計(jì)原則1：視覺層次

吱吱吱吱吱吱吱吱吱吱吱嗒的輪子得到油脂和突出的視覺效果引起注意。視覺層次是良好網(wǎng)頁設(shè)計(jì)背后最重要的原則之一。人眼看到的是什么樣的順序。

不知道有關(guān)這些圈子的事情，你很容易對他們進(jìn)行排名。那就是視覺層次。

您網(wǎng)站的某些部分比其他部分（表單，號(hào)召性用語，價(jià)值主張等）更重要，您希望這些部分比較不重要的部分更受關(guān)注。如果您的網(wǎng)站菜單有10個(gè)項(xiàng)目，都是同樣重要的？您希望用戶點(diǎn)擊哪里？使重要鏈接更加突出。

層次結(jié)構(gòu)不僅來自于大小。亞馬遜通過使用顏色使“添加到購物車” 呼叫更加突出：

從商業(yè)目標(biāo)開始

您應(yīng)該根據(jù)您的業(yè)務(wù)目標(biāo)對您網(wǎng)站上的元素進(jìn)行排名。如果您沒有具體目標(biāo)，您將無法知道要確定哪些優(yōu)先級(jí)。

這是一個(gè)例子，這是一個(gè)截圖，我拿到了威廉姆斯索諾瑪網(wǎng)站。他們想賣戶外炊具。

最大的眼睛捕手是巨大的肉塊（讓我想要的），其次是標(biāo)題（說是什么）和呼吁行動(dòng)按鈕（得到它）。第四名是標(biāo)題下的一段文字，第五名是免費(fèi)送貨橫幅，頂部導(dǎo)航是最后一個(gè)。這是完美的視覺層次。

瀏覽網(wǎng)頁并有意識(shí)地對視覺層次結(jié)構(gòu)中的元素進(jìn)行排名。然后去看你自己的網(wǎng)站。有什么重要的（關(guān)鍵信息點(diǎn)，訪客可能尋求）在層次結(jié)構(gòu)中不夠高？改變一下

更多關(guān)于視覺層次結(jié)構(gòu)。

有效的網(wǎng)頁設(shè)計(jì)原則

黃金比例是一個(gè)神奇的數(shù)字1.618（ varphi），使得所有的東西與美觀相稱（或者相信）成比例。

那么還有  斐波納契序列  ，其中每個(gè)術(shù)語被定義為前面兩個(gè)術(shù)語的和：0,1,2,3,5,8,13,21等等。有趣的是，我們有兩個(gè)看似無關(guān)的話題產(chǎn)生相同的確切數(shù)字。

這當(dāng)然只適用于最窄版本的UI。如果您的瀏覽器窗口更寬，您的詳細(xì)信息窗格將會(huì)展開，以提供更多的實(shí)用程序，從而減少這些比例。但最窄的寬度顯示了我們開始的比例。

因此，如果您的布局寬度為960px，請將其除以1.618（= 593px）。現(xiàn)在你知道內(nèi)容區(qū)域應(yīng)該是593px和sidebar 367px。如果網(wǎng)站高度高達(dá)760px，您可以將其分割成470像素和290像素塊（760 / 1.618 =?470）。

有效的網(wǎng)頁設(shè)計(jì)原則3：希克定律

希克法則說，隨著每一個(gè)額外的選擇都會(huì)增加決定所需的時(shí)間。

你在餐廳經(jīng)歷了無數(shù)次。具有巨大選擇的菜單使您難以選擇您的晚餐。如果只提供2個(gè)選項(xiàng)，作出決定將需要更少的時(shí)間。這類似于悖論選擇 - 你給人的選擇越多，選擇就越容易。

用戶在使用網(wǎng)站時(shí)使用的選項(xiàng)越多，使用（或根本不會(huì)使用）就越困難。所以為了提供更愉快的體驗(yàn)，我們需要消除選擇。為了做出更好的網(wǎng)頁設(shè)計(jì)，在整個(gè)設(shè)計(jì)過程中消除干擾選項(xiàng)的過程必須是連續(xù)的。

在無限選擇的時(shí)代，人們需要更好的過濾器！如果您銷售大量產(chǎn)品，請?zhí)砑痈玫倪^濾器，以便更容易的決策。

葡萄酒圖書館銷售大量的葡萄酒。他們在過濾器上做得很好（在左邊）：

了解更多關(guān)于希克定律。

有效的網(wǎng)頁設(shè)計(jì)原則＃4：菲特定律

菲特定律規(guī)定，移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間（例如，點(diǎn)擊一個(gè)按鈕）是與目標(biāo)的距離和目標(biāo)的大小的函數(shù)。換句話說，一個(gè)物體越大，它越靠近我們，就越容易使用它。

Spotify使其比其他按鈕更容易點(diǎn)擊“播放”：

他們還將其放置在左上角的全屏桌面應(yīng)用程序中，這被認(rèn)為是最有價(jià)值的房地產(chǎn)，因?yàn)榻锹湓诩夹g(shù)上是最容易接近的。然而，這不適用于網(wǎng)頁設(shè)計(jì)（由于滾動(dòng)和操作系統(tǒng)的方式）。

這并不意味著越大越好。占用一半屏幕的按鈕不是一個(gè)好主意，我們不需要數(shù)學(xué)研究來了解這一點(diǎn)。即使如此，F(xiàn)itts定律也是二進(jìn)制對數(shù)。這意味著對象的可用性的預(yù)測結(jié)果沿著曲線運(yùn)行，而不是直線。

當(dāng)給予20％大小的增加時(shí)，一個(gè)小按鈕將變得更容易點(diǎn)擊，而當(dāng)給定相同的20％的大小增加時(shí)，非常大的對象在可用性方面不會(huì)有同樣的好處。

這與目標(biāo)大小的規(guī)則相似  。

按鈕的大小應(yīng)與其預(yù)期的使用頻率成比例。您可以檢查您的統(tǒng)計(jì)數(shù)據(jù)，人們使用的按鈕最多，并使流行的按鈕更大（更容易命中）。

讓我們想象一下你想要填寫的表單。在表單結(jié)尾處，有兩個(gè)按鈕：“提交”和“重置”（清除字段）。

99.9999％想要點(diǎn)擊“提交”。因此按鈕應(yīng)該比“重置”大得多。

更多關(guān)于菲特定律。

有效的網(wǎng)頁設(shè)計(jì)原則＃5：三分法則

在設(shè)計(jì)中使用圖像是一個(gè)好主意。視覺傳達(dá)您的想法比任何文本快得多。

最好的圖像遵循三分法則：圖像應(yīng)該被分為九個(gè)相等的部分，兩個(gè)等間隔的水平線和兩個(gè)等間隔的垂直線，并且重要的組成元素應(yīng)沿著這些線或它們的交點(diǎn)放置。

看看右邊圖像更有趣嗎？這是行動(dòng)中三分之二的規(guī)則。

圖片來源：維基共享資源

用美麗的，大的圖像有助于設(shè)計(jì)，因?yàn)樗牵ú荒褪艿脑鲩L  Pinterest的），遵守這個(gè)規(guī)則，將會(huì)使他們更有趣，因此您的網(wǎng)站更具吸引力。

有效的網(wǎng)頁設(shè)計(jì)原則＃6：格式塔設(shè)計(jì)法

格式塔心理學(xué)是一種思想和腦力的理論。它的原理是人眼在察覺到他們的各個(gè)部分之前，看到對象的全部。

這就是我的意思：

請注意，您如何看待狗，而不關(guān)注狗組成的每個(gè)黑點(diǎn)？

這里的關(guān)鍵是在人們看到這些部分之前看到了整體。人們總是先看到你的整個(gè)網(wǎng)站，然后再區(qū)分標(biāo)題，菜單，頁腳等。作為構(gòu)圖的創(chuàng)始人之一，庫爾特·科夫卡（  Kurt Koffka）  表示：  整體獨(dú)立于零件。

有八種所謂的格式設(shè)計(jì)法允許我們預(yù)測人們會(huì)如何看待某些東西。他們來了：

近似法則 

人們將東西集合在一起，在太空中緊密結(jié)合在一起。它們成為一個(gè)單一的感知對象。

通過有效的網(wǎng)頁設(shè)計(jì)，您需要確保不合在一起的東西不被認(rèn)為是一個(gè)。同樣，您想將某些設(shè)計(jì)元素組合在一起（導(dǎo)航菜單，頁腳等），以形成一個(gè)整體。

2.相似法則

我們把類似的東西在一起。這種相似性可以以形狀，顏色，陰影或其他質(zhì)量的形式發(fā)生。

在這里，我們將黑點(diǎn)分組成一組，并將白點(diǎn)分成另一組，因?yàn)?- 好像，黑點(diǎn)看上去是相似的。

代碼學(xué)校使得所有的推薦框都相似，所以我們將所有的推薦視為一個(gè)單獨(dú)的組：

3.關(guān)閉法

我們要求完整性。當(dāng)沒有關(guān)閉的形狀，當(dāng)整個(gè)圖片的部分丟失時(shí)，我們的感覺填補(bǔ)了視覺差距。我們看到兩個(gè)正方形重疊在四個(gè)圓上，即使這些形狀實(shí)際上并沒有存在于圖形中。

沒有關(guān)閉的規(guī)律，我們只會(huì)看到不同長度的不同的線條，但是根據(jù)關(guān)閉的規(guī)律，我們將線條整合成整體。

對稱法則

心靈將對象看作是對稱的，圍繞中心點(diǎn)形成。能夠?qū)⑽矬w分成偶數(shù)個(gè)對稱部分，感覺上令人滿意。

當(dāng)我們看到兩個(gè)不連接的對稱元素時(shí)，心靈感知地連接它們以形成一致的形狀。

當(dāng)我們看看上面的圖像時(shí)，我們傾向于觀察三對對稱括號(hào)而不是六個(gè)單獨(dú)括號(hào)。

人們喜歡不對稱的外觀。平衡三列和曲線增添了BootB網(wǎng)頁設(shè)計(jì)的享受：

共同命運(yùn)法

我們傾向于將對象視為沿著路徑移動(dòng)的線條。我們將具有相同運(yùn)動(dòng)趨勢的對象組合在一起，因此處于相同的路徑。

人們將某些地方的棍棒或舉手集中在一起，因?yàn)樗麄兌贾赶蛲粋€(gè)方向。您可以使用它來指導(dǎo)用戶的注意事項(xiàng)（例如注冊表單，價(jià)值主張等）。

例如，如果存在點(diǎn)陣列，而另一半向下移動(dòng)，則一半的點(diǎn)向上移動(dòng)，則將向上移動(dòng)的點(diǎn)和向下移動(dòng)的點(diǎn)看作兩個(gè)不同的單元。

6.連續(xù)性法則

人們傾向于認(rèn)為一條線是繼續(xù)其確定的方向。在對象（例如行）之間存在交集的情況下，我們傾向于將兩行視為兩個(gè)單一的不間斷實(shí)體。刺激仍然顯著，即使重疊。

Fixel使用它將面孔連接到bios：

還有其他的格式法律，如圖和地面或良好的格式塔法（如果它們形成正常，簡單有序的模式 - 像奧林匹克環(huán)），我們認(rèn)為這些提法這里是最有用的知道。

有效的網(wǎng)頁設(shè)計(jì)原則＃7：白色空間和干凈的設(shè)計(jì)

白色空間（也稱為“負(fù)空間”）是頁面部分“空”。它是圖形，邊距，溝槽之間的空間，列之間的空間，類型或視覺線之間的空間。

它不應(yīng)該被認(rèn)為只是“空白”空間 - 它是設(shè)計(jì)的重要元素。它使它中的對象完全存在。白色空間是關(guān)于層次結(jié)構(gòu)的使用。信息的層次，無論是類型，顏色還是圖像。

沒有空白的頁面，充滿文字或圖形，容易出現(xiàn)繁忙，雜亂的風(fēng)險(xiǎn)，通常很難閱讀（人們甚至不會(huì)打擾）。這就是為什么簡單的網(wǎng)站在科學(xué)上更好。

足夠的空白讓網(wǎng)站看起來“干凈”。雖然干凈的設(shè)計(jì)對于傳達(dá)清晰的信息至關(guān)重要，但它不僅僅意味著更少的內(nèi)容。清潔設(shè)計(jì)意味著充分利用其空間的設(shè)計(jì)。為了做一個(gè)干凈的設(shè)計(jì)，你必須明白地使用白色空間知道如何清晰地溝通。

精細(xì)的白色空間使它很容易集中在主要的消息和視覺效果上，而身體的副本易于閱讀。

白色空間促進(jìn)優(yōu)雅和復(fù)雜性，提高易讀性和推動(dòng)焦點(diǎn)。