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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.連接所有元素。

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

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

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

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

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