1.反差效果
好的反差效果設計可以給使用者乙個極好的第一印象。如果使用者的眼睛沒有焦點，注意力就會在處處是相同尺寸的元素和排版介面中迷失。設計師需要設計出很明顯的突出視覺元素來引導使用者的體驗。你可以通過選擇、顏色和字型等來形成良好的反差效果。
反差當需要在很多小元素後面展示乙個大尺寸的插圖時，這種方法很有效。嗯，我的意思就是，比如：
the invoice machine
這個網頁利用一張大來吸引使用者的注意。而同時網頁很自然的單色又讓很少的藍色應用有了更好的效果。
instabox
當你眼睛看到這個頁面的時候，首先你會注意到什麼？最有可能的就是盒子上面的那個星星了。跟 the invoice machine 一樣，它們都是通過用一張大和很少的顏色來製造乙個視覺焦點。
顏色反差
恰到好處地使用少量顏色，是網頁中另一種製造視覺反差的有效方法。可以在網頁的頭部和文字拷貝中使用不同的顏色，也可以在一張或插圖的顏色裡面應用。
fatburgr
這個**是極出色的乙個所有設計原則的應用例項。關於顏色反差我們來看看它大大的黃色頭部和小小的淡灰文字。排列、反差、重複和分類這幾個原則做得都很徹底。
i love typography
乙個用來展示排版的**如果在它自己的頁首就為我們展示了乙個極好的排版效果，那讓人覺得多驚奇啊！我喜歡他們所用的字型，也喜歡他們良好的青色和深灰色搭配。
字型反差
如果你想通過字型來產生反差效果，就應該避免使用2個很相像的字型外觀和大小。很相像的字型會造成混淆，並讓設計變得模糊。不過把字型大小弄得很不一樣就會非iuckdlb常有效果，或者是把字型最細和最粗的版本拼合到一起也同樣有效。同樣的，如果你將兩種外形差別明顯的兩種字型排在一塊，就會對它們帶來的視覺衝擊效果感到驚奇。把乙個 san serif 字型和乙個手寫字型放在一起就是乙個例子。
fixie consulting
哇噻，我真的非常喜歡這個**上使用程式設計客棧的排版和顏色。注意看他們標語的大小和筆畫。頁面上灑水效果和少量藍色的使用，都讓我非常欣賞。
2.重複原則
跟web設計相比，重複原則在書本設計中應用得更加普遍，不過它在兩者之間都是一樣有效的。重複的設計元素可以使頁面顯得很連貫，還能提公升品牌。在web設計中，可以很好地達到這個目的的乙個方式是在網頁的頭部和腳部重複放元素。看看下面這些例子吧。
ten24 media
ten24 media 在頭部和腳部都使用了很有創意的插畫。
silverback
這個**絕對是超讚的！我絕對可以在前面「反差原則」部分就可以把它作為乙個好例子亮出來的，可它在「重複原則」部分也是乙個好例子，因為它的介面風格和品牌部分都很明顯地應用了這個原則。仔細看它用香蕉來當做列表前面的圖示，還有頭部、腳部的森林插畫。
3.排列原則
你的**外觀設計得很業餘還是很專業，排列原則在其中扮演了乙個很複雜的角色。最近我很主張在設計網頁時使用格欄。這麼做可以讓你的設計很乾淨，也可以提供乙個很好的設計框架。如果你有興趣想學習更多關於格欄設計的知識，去看看我最近的文章吧（在這王婆賣瓜，自賣自誇一下），design a fresh blog theme on the 960 grid
black estate vineyard
這個**在960 grid website上有展示。它的版面排列很連貫也很引人注目。我很欣賞它將主要內容整齊地排在左邊的做法，儘管有些大級別的頭部破壞了這個規則併排到了左側邊欄裡面。對留空的大量使用和字型反差大小的使用都非常不錯。
a list apart
a list apart中使用的可視格欄非常有特色。裡面的欄目設計良好，把所有包含內容都變得易於閱讀。研究表明過寬的欄目會造成嚴重的閱讀困難。在跟隨那麼寬的欄目中的文字時，你的眼睛會變得很累。 a list apart
4.分類原則
最後乙個原則是分類。只有在將相關元素分組，將無關元素分開的時候才會用到這個原則。假如你將所有東西都分到同一塊文字塊中，絕對會摧毀使用者的體驗。這就是為什麼使用頭部標籤和適當的留空是那麼的重要。
envato
這個**漂亮地將內容規整地組織到三個主要分類下，這些內容的定義既清晰又規整。
paradigm reborn
這個**結構良好。頭部既整潔又簡單明瞭。空白留的很好，內容分開放得很有邏輯。
最終思想
當你腦中時刻惦記著這4個基本原則時，你會發現你的設計有了不可思議的改進。當然肯定還有許許多多別的東西也需要考慮，但是以反差、重複、排列和分類作為基礎你的設計會取得長足進步。
本文標題: 整潔漂亮的網頁設計的4項原則
本文位址: /web/xindejiqiao/87422.html
設計整潔漂亮的網頁的4項原則
我最喜歡的設計書籍之一就是 robin williams design workshop 它深入實際的設計理論，並且包含許多極棒的設計例項。其中乙個值得關注的地方就是4項主要的設計原則，它們已經在設計中為我所用。這4項原則就是 反差，重複，排列，和分類。1.反差效果 好的反差效果設計可以給使用者乙個...
響應式網頁設計的9項基本原則
響應式web設計對於解決多型別螢幕問題來說是個不錯方案，但從印刷的角度來看，其卻存在著很多的困難。沒有固定的頁面尺寸 沒有公釐或英吋，沒有任何物理限制，讓人感到無從下手。隨著建立 可用的各種小工具越來越多，畫素設計局限於桌面和移動端也已經成為歷史。因此，現在就讓我們來說明一下如何運用響應式web設計...
網頁設計關於超級鏈結的設計原則
相關文章 網頁內容頁面製作的9個實用建議 網頁頁面設計的4個實用建議 網頁布局的9個建議 網頁製作關於html格式和長檔案的建議 鏈結vwwxrrglv 1 儘管你已做了乙個漂亮的首頁作為入口，其他人可能會對你的傑作內的具體指標或子頁給出鏈結。向這些新的訪問者提供一些關於他們在什麼地方以及為什麼在這...