提高網站營銷效果的8個網頁設計原則

　　網頁設計的多元性是比想像中重要許多的，你可以任意修改你的網頁，但如果整體看起(qǐ)來很糟糕的話，實際上并不會(huì)有任何助益。設計不單隻是設計師的責任，設計也同時(shí)包含營銷概念。當你對(duì)設計的領域瞭解越多，應用于網站上時(shí)，成(chéng)效也會(huì)越好(hǎo)。今天圻谷網絡淄博網站設計公司小編就(jiù)跟大家聊聊：提高網站營銷效果的8個網頁設計原則。

　　

　　實用的網頁設計原則#1 ：視覺階層

　　會(huì)吵的孩子有糖吃，好(hǎo)的視覺效果引人注目。視覺階層就(jiù)是一個好(hǎo)的網頁設計中，最重要的要領之一，因爲視覺反應是全部感官中，最快也是最直接影響到我們的情緒反應，當浏覽者第一進(jìn)入您的網站，在網站中您最推薦的是哪個部分呢?。

　　練習：請排序以下圓圈的重要性

　　

　　在無條件限制下，將(jiāng)圓圈排序是非常簡單的，這(zhè)就(jiù)是視覺階層。

　　網頁中的某些部分是相對(duì)重要的部分（形象、引導行動、吸引關注…等），你可能(néng)會(huì)希望先讓浏覽者注意到我們想推薦的重點部分，而不是其他的地方。如果你的網頁導覽有10個項目，他們的重要性會(huì)都(dōu)相同嗎？想想看你希望傳達怎樣的訊息，將(jiāng)比較重要的項目突顯出來。

　　視覺階層并不單隻受大小形狀的影響，像網上購物網站運用了要求行動的概念，以顔色突顯出「加入購物車」：

　　

　　從企業經(jīng)營目标著手

　　

　　網站中項目和元素的排列應該根據該企業的經(jīng)營目标而訂，如果缺少明确的目标，是很難釐清先後(hòu)順序的。

　　舉例來說(shuō)，這(zhè)個截圖是來自日本最大連鎖庶民食堂的網站，他們主要在販賣日式餐飲。

　　最引人注目的是最推薦的大字【食堂滿額禮】（使人想要了解優惠），接著是優惠餐的照片（說(shuō)明了優惠的東西是什麽），第三個是優惠餐點的原本價格(讓人感到超值并想要嘗試)，第四是說(shuō)明如何取得優惠的方式，最後(hòu)就(jiù)是浏覽其他的網站内容。以上就(jiù)是將(jiāng)視覺階層完整诠釋的範例。

　　練習：浏覽網站并將(jiāng)視覺階層做名次排行，接著檢查自己的網頁，是否有再發(fā)現任何重要的項目（網頁訪客最有可能(néng)尋找的資訊），但沒(méi)有被特别強調出來的呢？

　　實用的網頁設計原則#2: 黃金比例

　　1.618（ ）是黃金比例的代表數，這(zhè)讓所有東西達到力與美的絕佳展現（至少多數是這(zhè)樣認爲的）。

　　

　　此外，也有費波那契數列，其中每個數字都(dōu)爲前兩(liǎng)數字的總和—0, 1, 1, 2, 3, 5, 8, 13, 21……依此類推。值得注意的是，兩(liǎng)個看似不相關的數字居然可以推算出與其相關的數字。

　　這(zhè)就(jiù)是黃金比例的樣子：

　　很多藝術家與建築師都(dōu)是按照黃金比例完成(chéng)他們的作品或工程，其中最著名的就(jiù)是建于古希臘時(shí)代的帕德嫩神廟。

　　這(zhè)可以被用于網路設計嗎？當然沒(méi)問題，推特就(jiù)使用了這(zhè)個：

　　以下是推特創意總監的一則評論

　　給所有對(duì)#NewTwitter的黃金比例感興趣的人，我們并沒(méi)有任意配置那些比例。當然，這(zhè)隻适用于較窄版的介面(miàn)，如果你的浏覽器螢幕較寬，必能(néng)出現更多視窗提供資訊，以提高其使用性，但是這(zhè)個最窄的寬度也代表著黃金比例的開(kāi)端。

　　所以，如果你的寬度是960px，將(jiāng)它除以1.618 （=593px）。現在你知道(dào)了網站的内容可以是593px，以及邊框是367px。若網頁高度爲760px，你可以將(jiāng)它分兩(liǎng)塊，分别是479px和299px（760/1.618=~470）。

　　實用的網頁設計原則#3: 席克法則

　　席克法則講的是：每增加一個選項，做決定的時(shí)間就(jiù)會(huì)增加。

　　相信大家在餐廳裡一定有這(zhè)個經(jīng)驗，要從琳琅滿目的菜單中挑出一道(dào)菜是難以抉擇的。如果隻給你兩(liǎng)個選項，決定的時(shí)間會(huì)相對(duì)減少很多。這(zhè)就(jiù)像《選擇之困境》中所提的—越多的選項，越使人什麽都(dōu)不選，很多時(shí)候我們必須先幫消費者篩選并推薦他們适合的商品。

　　當使用者在網頁中遇到越多的選項，這(zhè)會(huì)讓網站的使用上的困難度增加（或者完全不想使用）。爲了讓使用者能(néng)夠更樂在其中，删除一些選項是必要的。删除不必要的選項是爲了讓整個設計更加簡潔有力，以展現出良好(hǎo)的網路設計。

　　在這(zhè)個資訊爆炸的世代，人們要的是精簡過(guò)的選項！如果你的産品是種(zhǒng)類繁多的商品，篩選過(guò)的商品會(huì)使人更容易做決定。

　　下列是CaffeBene品牌網站販售各式各樣的商品，如此分類對(duì)于各種(zhǒng)品項就(jiù)非常清楚：

　　

　　實用的網頁設計原則#4: 費茨法則

　　費茨法則指出，移動到目标區域（例如：點擊按鈕）所需的時(shí)間，是到目标的距離和目标的大小的函數。也就(jiù)是說(shuō)，物體越大且距離越近，就(jiù)越容易被使用。

　　相比其他的按鈕，Spotify中的「播放」鍵讓人非常容易點擊。

　　他們還(hái)將(jiāng)其放置在（全螢幕的桌面(miàn)）左下角，這(zhè)個位子被認爲是最好(hǎo)的，因爲技術上來說(shuō)，左下角是最容易點擊的位置。然而，這(zhè)并不能(néng)套用于網路設計（基于滑鼠滑動和操作系統的方式所緻）。

　　越大并不代表越好(hǎo)，完全不需要任何思考就(jiù)能(néng)知道(dào)，佔去半個版面(miàn)的按鈕絕對(duì)不是好(hǎo)的。就(jiù)算如此，費茨法則是二進(jìn)制對(duì)數，這(zhè)也說(shuō)明了對(duì)于可用性預測的結果是沿著曲線進(jìn)行，而非直線。

　　若能(néng)將(jiāng)一個很小的按鈕放大20%，將(jiāng)增加它點擊的容易性；然而，這(zhè)個效果必然不适用于在一個很大的物體上。這(zhè)就(jiù)近似于目标大小的規則。

　　按鈕的大小應視其點擊率的高低而訂，你需要先瞭解大多數的人最常點擊哪個按鈕，再決定是否增加它的大小（較易點擊與推薦）。

　　想像一下有一張表格需要填寫，在表格的最後(hòu)有兩(liǎng)個按鈕—「确認送出」和「重新填寫」（全部清除）。

　　99.9999% 的人會(huì)點擊「确認送出」，也就(jiù)是說(shuō)「确認送出」這(zhè)個按鈕大小應大于「重新填寫」。

　　

　　實用的網頁設計原則#5: 三分構圖法

　　

　　在設計中使用圖像非常好(hǎo)的，因爲圖像視覺效果所傳達的訊息遠比文字有效

　　圖像應依循三分構圖法：想像這(zhè)個圖像由兩(liǎng)條相同縱線及橫線，均分成(chéng)九等分，再將(jiāng)你所想傳達或表示的訊息沿著這(zhè)些線條或交叉點放置。

　　有發(fā)現圖像圖文配置後(hòu)整個版面(miàn)既活潑又不失工整嗎？這(zhè)就(jiù)是三分構圖法。

　　使用亮麗的大圖像有助于設計，并跟著這(zhè)個原則，就(jiù)能(néng)使你的網站更有趣、更吸引人。

　　實用的網路設計原則#6: 格式塔法則 (完型法則)     

　　格式塔心理學(xué)是一種(zhǒng)思想和大腦的理論，主要在表示，在注意物體的細部之前，人們傾向(xiàng)先觀察物體的全貌。

　　以下圖片就(jiù)是我表達的意思：

　　想想看，當你看到一隻狗時(shí)，要如何不去注意牠身上的斑點呢？

　　這(zhè)裡的關鍵點是在觀察一個東西的細部之前，我們會(huì)先注意整體。也就(jiù)是說(shuō)，在進(jìn)入一個網站時(shí)，我們習慣先浏覽整個網頁，而不是單單隻注意标題、浏覽項目、或頁腳等。其中一位構圖法的創始人科特考夫卡表示：「整體與其部分個體是獨立存在的。」

　　1. 接近法則

　　我們會(huì)將(jiāng)相近的東西集中在一起(qǐ)，然後(hòu)它們進(jìn)而就(jiù)成(chéng)爲同一個體。在網頁設計中，你必須确保每個物件不會(huì)讓人把它們聯想在一起(qǐ)；同樣的，有些項目就(jiù)需要被看成(chéng)一個個體（浏覽選項、頁腳等）。

　　

　　2. 相似法則

　　我們會(huì)將(jiāng)相似的東西分爲同類，比方說(shuō)相似的形狀、顔色、陰影特效等。

　　在下方的圖中，因爲黑色部分與白色部分看起(qǐ)來會(huì)成(chéng)爲一個獨立個體并會(huì)被分别爲兩(liǎng)類，單看黑色爲柱子，單看白色則爲二個側臉造型。

　　

　　3. 閉合法則

　　我們習慣追求物體的完整性，假設一個形狀的線條有一些缺失，我們在看的過(guò)程中，自然而然的會(huì)補滿那些部分。即使沒(méi)有一個形狀是完整的，我們還(hái)是能(néng)看到兩(liǎng)個正方形重疊在四個圓上

　　假設少了閉合法則，我們會(huì)認爲那些隻是長(cháng)短不一的線條，并不會(huì)覺得它們能(néng)組成(chéng)一個形狀。

　　

　　4. 對(duì)稱法則

　　在我們的認知中，普遍認爲物體會(huì)是相對(duì)稱的，且會(huì)有一個中心點。我們會(huì)習慣將(jiāng)物體等分成(chéng)數個小部分。當有兩(liǎng)個相對(duì)稱的東西時(shí)，我們很自然的會(huì)將(jiāng)它連在一起(qǐ)。

　　看到上面(miàn)的圖像時(shí)，通常我們會(huì)將(jiāng)它看成(chéng)四個對(duì)稱的個體，而非八個不同的括弧。

　　

　　5. 共方向(xiàng)法則

　　我們通常會(huì)將(jiāng)物體沿著它的線條方向(xiàng)而視，同向(xiàng)的物體基本上會(huì)被歸類在同一區。

　　舉例來說(shuō)，指著同方向(xiàng)的物體或手勢會(huì)被分在一起(qǐ)，這(zhè)個概念可以套用到網頁設計，讓使用者跟著你的指示浏覽網頁（像注冊表格、價值主張等）。

　　像是在先前看到的圖中，如果在一列圓點中，有一半的點向(xiàng)上移動，另一半向(xiàng)下，我們會(huì)把這(zhè)兩(liǎng)個不同向(xiàng)的圓點歸成(chéng)兩(liǎng)類。

　　

　　6. 連續法則

　　我們基本上認爲一條線會(huì)繼續沿著它的方向(xiàng)發(fā)展，在有交叉的情況下（像線條十字交叉），就(jiù)算它們重疊了，我們還(hái)是會(huì)覺得那兩(liǎng)條線是沒(méi)有關聯的。

　　

　　還(hái)有其他的構圖設計法像是：主體—背景法則或格式塔物項法則（形狀相似且有條理的物件通常會(huì)被視爲一體，就(jiù)像奧運的圓圈），不過(guò)我覺得上述所提的幾個法則是最實用的。

　　實用的網頁設計原則#7: 留白與簡潔

　　留白部分（亦稱爲周圍的空間）是頁面(miàn)中空白的地方。也就(jiù)是指圖表、邊緣、裝訂區域、各行列之間等的空隙。

　　其實空白的部分是網頁設計中非常重要的元素，它讓網頁中的内容更突顯出來。留白部分是使用了階層的概念，像是各類型的資訊、顔色或圖像。

　　沒(méi)有留白的網頁就(jiù)像把所有文字或圖片擠在一起(qǐ)，這(zhè)在視覺效果上，會(huì)讓頁面(miàn)看起(qǐ)來十分淩亂擁擠，而且也增加了浏覽的困難性（甚至訪客完全不想浏覽網頁），這(zhè)也說(shuō)明了爲什麽簡潔的網頁設計是相對(duì)好(hǎo)的。

　　足夠的空白空間會(huì)讓網頁看起(qǐ)來很「舒适乾淨」，雖然簡潔的頁面(miàn)更能(néng)傳遞出所想表達的訊息，但這(zhè)不代表要將(jiāng)内容簡化。簡潔的設計是指在頁面(miàn)範圍中充分運用空間，在設計之前，你必須知道(dào)要如何充分發(fā)揮留白的空間

　　

　　將(jiāng)留白的原則套用于網頁設計中，除了能(néng)更突顯網頁所想傳遞的訊息，也易于浏覽者閱讀。

　　空白的部分不僅使網頁看起(qǐ)來更精巧，也易于閱讀及增強網頁所傳遞的訊息。

　　實用的網頁設計原則#8: 奧坎的剃刀

　　

　　奧坎的剃刀原則在說(shuō)明：從各假說(shuō)之中，挑出一個最合理、最淺顯易懂的假說(shuō)。

　　以設計的領域來看，奧坎的剃刀原則說(shuō)明了最簡化的方法往往是最好(hǎo)的。

　　執行美國(guó)管理軟體Pipedrive的人，上傳了一則關于使用舊金山創業加速器AngelPad的文章：

　　Angelpad團隊表示過(guò)：「網站的主頁包含了太多東西。」雖然一開(kāi)始我們并不認同這(zhè)個說(shuō)法，但我們依舊做了調查。果然，事(shì)實證明了我們的想法并不正确。因此，我們移除了約80%的内容，取而代之的是注冊及了解更多的按鈕，這(zhè)也讓我們的注冊率增加了300%。

　　外觀雖然重要，但更重要的是網頁的操作性。有幾間公司，像37Signals將(jiāng)「簡潔」變成(chéng)他們的商業模式。以下是節錄于由他們創辦人所寫的工作大解放（Rework）：

　　很多人認爲我們的産品比其他競争對(duì)手都(dōu)少，他們認爲産品不該少掉太多特性或功能(néng)，但我們也是因此而感到驕傲。因爲多數的軟體都(dōu)太過(guò)複雜，所以我們決定反向(xiàng)操作，像是太多功能(néng)、按鍵，這(zhè)些都(dōu)太容易讓使用者混淆。

　　雖然簡潔的設計并不能(néng)與它的效能(néng)相提并論，但從我自身多年的經(jīng)驗，體悟到了越簡單越好(hǎo)的這(zhè)句話。

　　總結

　　好(hǎo)的網頁設計與藝術是不同的領域。在了解企業目标之後(hòu)，網頁設計的風格是因使用者而訂。使用上述推薦的網頁設計原則，可以使你的網頁在觀感及效益中都(dōu)得到相當好(hǎo)的成(chéng)果。