使網(wǎng)站設(shè)計(jì)看起來很好的7個(gè)關(guān)鍵原則

網(wǎng)站設(shè)計(jì)在很大程度上是一個(gè)創(chuàng)作過程，因此可以被稱為藝術(shù)而不是科學(xué)。但由于它本質(zhì)上是一種介紹媒介，因此適用某些規(guī)則（或至少是原則）。通過遵循一些簡(jiǎn)單的指針，任何人都應(yīng)該能夠創(chuàng)造一個(gè)視覺上令人愉悅的設(shè)計(jì)，并更進(jìn)一步成名。好吧，它不是那么簡(jiǎn)單，人才和經(jīng)驗(yàn)都很重要，但任何人都可以在幾分鐘內(nèi)將主頁(yè)變成更漂亮的東西。

將Web設(shè)計(jì)視為不同元素的共生。沒有一個(gè)元素是最重要的; 相反，元素的總和使設(shè)計(jì)看起來很好。

1.保持設(shè)計(jì)平衡。

平衡就是確保您的設(shè)計(jì)不會(huì)向一側(cè)或另一側(cè)傾斜。這就像實(shí)現(xiàn)對(duì)稱或不對(duì)稱時(shí)的重量平衡。

這就是我們所說的不對(duì)稱平衡，這就是平衡。如果你不小心如何擺放東西，設(shè)計(jì)會(huì)很快變得不平衡。您可以通過多種方式操縱設(shè)計(jì)的視覺重量，例如顏色，大小以及元素的添加或刪除。如果你要做十字架，比如一個(gè)充滿活力的橙色，它會(huì)變得更重，也許會(huì)讓布局再次失去平衡。實(shí)現(xiàn)不對(duì)稱的平衡是一個(gè)特別微妙的問題，需要時(shí)間來微調(diào)和有點(diǎn)訓(xùn)練的眼睛才能真正實(shí)現(xiàn)。

2.使用網(wǎng)格劃分您的設(shè)計(jì)。

網(wǎng)格的概念與平衡的概念密切相關(guān)。網(wǎng)格是一系列水平和垂直標(biāo)尺，可幫助您“劃分”設(shè)計(jì)。想想專欄。提高了可讀性，使頁(yè)面內(nèi)容更容易被吸收。間距和使用三分法（或類似的黃金比例）使一切變得更容易。

例如，三分法和黃金比例解釋了為什么側(cè)邊欄通常約為頁(yè)面寬度的三分之一，以及為什么主要內(nèi)容區(qū)域大致等于設(shè)計(jì)寬度除以1.62（等于數(shù)學(xué)中的phi）。我們不會(huì)理解為什么會(huì)這樣，但它在實(shí)踐中似乎也是如此。這也是為什么專業(yè)拍攝的照片中的主題通常不位于中間，而是位于假想的九平方網(wǎng)格（三乘三，兩條水平線和兩條垂直線）的交點(diǎn)處。

雖然設(shè)計(jì)本身在視覺上并不令人印象深刻，但明確嚴(yán)格的元素結(jié)構(gòu)使其易于實(shí)現(xiàn)。左欄大小是右側(cè)欄的兩倍，這只是有意義的，在創(chuàng)建自己的設(shè)計(jì)時(shí)需要考慮。

3.最多為您的設(shè)計(jì)選擇兩種或三種基色。

找出適合自己的東西。盡可能多地吸收網(wǎng)站設(shè)計(jì)，例如許多CSS展示網(wǎng)站（如最佳網(wǎng)絡(luò)圖庫(kù)）中的任何一個(gè)，以了解顏色如何相互作用。為您的設(shè)計(jì)選擇最多兩種或三種基色，然后使用這些基色的色調(diào)（較淺，混合為白色）和陰影（較暗，混合黑色）在必要時(shí)擴(kuò)展調(diào)色板。

挑選漂亮的顏色與選擇正確的顏色（即工作的正確顏色）同樣重要。一個(gè)舒適的小餐館的網(wǎng)站設(shè)計(jì)可以很好地與“樸實(shí)”的色調(diào)：紅色，棕色等。當(dāng)然，沒有一個(gè)萬無一失的食譜。每種顏色都會(huì)發(fā)出一條消息，由您決定是否正確。

4.嘗試使圖形很好地結(jié)合在一起。

偉大的設(shè)計(jì)不需要花哨的圖形。但糟糕的圖形肯定會(huì)損害設(shè)計(jì)。圖形添加到可視消息中。

你可能不是一個(gè)偉大的插畫家或攝影師，但這并不意味著你不能在你的網(wǎng)站上放置出色的圖形。您需要一些基本的Photoshop技能，可能是一些庫(kù)存圖片和很棒的品味。嘗試使圖形很好地結(jié)合在一起，并確保它們體現(xiàn)了您的目標(biāo)。但是，我們并不是都具備相同的天賦。你可以通過向別人學(xué)習(xí)來獲取一些東西，但有時(shí)你只需要選擇最適合你的風(fēng)格（如果你不是最偉大的插圖畫家就像一個(gè)干凈的風(fēng)格）。

5.改進(jìn)您網(wǎng)站的排版。

類型的藝術(shù)是一個(gè)棘手的主題，因?yàn)樗w了許多元素。雖然它可以被視為設(shè)計(jì)的一個(gè)分支，但人們可以花一生時(shí)間掌握其所有方面。這不是提供完整印刷參考的地方，因此我們將討論限制在短期內(nèi)對(duì)您有利的內(nèi)容。

與印刷排版相比，Web排版是有缺陷的。最大的區(qū)別在于，由于其動(dòng)態(tài)特性，我們?nèi)狈?duì)Web上類型外觀的完全控制。顯然，動(dòng)態(tài)渲染有其優(yōu)勢(shì)，但Web設(shè)計(jì)者幾乎無法控制結(jié)果，至少目前如此。用戶計(jì)算機(jī)上缺少字體，瀏覽器和平臺(tái)渲染方面的差異以及CSS中的低級(jí)支持使得Web排版成為令人生畏的令人生畏的任務(wù)。但是，雖然我們可能不得不等待Web排版的CSS 3充分發(fā)揮它的潛力，但我們現(xiàn)在有辦法讓它看起來很有趣，更重要的是，非常漂亮。

6.通過在它們周圍添加空白區(qū)域來突出元素。

白色空間，或負(fù)空間，有做什么是不存在。像測(cè)量和引導(dǎo)，白色空間給文本一些喘息空間和空間和平。你可以通過在它們周圍添加空白來使元素脫穎而出。例如，復(fù)制不應(yīng)該顯得狹窄。為確?？勺x性，請(qǐng)確保段落具有足夠的填充。

白色空間為設(shè)計(jì)增添了許多等級(jí)。不要害怕留下一些洞，甚至是張開的洞。缺乏經(jīng)驗(yàn)的設(shè)計(jì)師很想在每個(gè)角落里放些東西。設(shè)計(jì)是關(guān)于傳達(dá)信息。因此，設(shè)計(jì)元素應(yīng)支持此消息，而不是為其添加噪聲。

7.連接所有元素。

“連接”在這里是一個(gè)虛構(gòu)的術(shù)語(yǔ)，但它似乎是我們所說的最好的一個(gè)。這里的連接是指具有統(tǒng)一性和一致性的Web設(shè)計(jì)。這兩個(gè)屬性展示了設(shè)計(jì)（以及設(shè)計(jì)師）的專業(yè)主義。它們的屬性非常廣泛。設(shè)計(jì)應(yīng)該在顏色的使用，字體范圍，圖標(biāo)等方面保持一致。所有這些方面都很重要; 設(shè)計(jì)看起來很棒并且仍然存在不一致性。

當(dāng)設(shè)計(jì)不一致時(shí)，它的統(tǒng)一性可能會(huì)丟失給用戶。Unity與一致性略有不同。Unity指的是設(shè)計(jì)中的不同元素如何相互作用和組合在一起。例如，顏色和圖形是否匹配？一切都有助于統(tǒng)一消息嗎？另一方面，在設(shè)計(jì)頁(yè)面之間找到一致性。

在本文討論的七個(gè)原則中，連接是最重要的。連接與所有元素如何組合在一起：平衡，網(wǎng)格，顏色，圖形，類型和空白。它是一種將所有東西聯(lián)系在一起的膠水。沒有這種膠水，設(shè)計(jì)就會(huì)崩潰。你可以擁有漂亮的類型和精心挑選的精美調(diào)色板，但是如果圖形很糟糕或根本不匹配，或者如果所有東西都沒有想到就塞滿了，那么設(shè)計(jì)就會(huì)失敗。

良好的網(wǎng)站設(shè)計(jì)不僅限于此處討論的七個(gè)關(guān)鍵原則。可訪問性，可讀性和可用性等方面也起著重要作用。

這就是網(wǎng)站設(shè)計(jì)如此困難的原因。讓您的設(shè)計(jì)變得簡(jiǎn)單易用，特別是在今天，有如此多的內(nèi)容管理系統(tǒng)，博客工具和主題隨時(shí)可用。但是，真正掌握網(wǎng)站設(shè)計(jì)的所有方面需要時(shí)間，而且說實(shí)話，才能。