Photoshop中網頁的設計規範

親密性在網頁中主要表現為對於內容的主次關係、邏輯關係、層級關係的梳理和表達。

和其他設計作品一樣，混亂的內容排版會讓用戶不知道從何看起，對於完全不懂設計的的客戶看過 之後就會給你來一句：「我也看不出哪裡不好，可就是感覺不舒服」之類的反饋，很多設計師就很 苦惱，抱怨客戶也不給個明確的反饋窓見等等…

遇到這種情況我們就要反思，雖然看起來客戶的這種反饋沒有實質內容，可比起就說一句「不行」 的那種客戶好多了，往往是我們在設計的時候忽略了內容的主次關係或者是邏輯關係造成客戶閱讀 時的混亂和不舒適造成的。

PS：關係越緊密的項越讓他們形成一個整體，同時與周圍的項又存在著某種聯繫，不能讓他們孤立 的存在，讓用戶在瀏覽的時候能明確主次關係和邏輯關係。

對齊 Alignment

對齊在網頁中主要是為了讓元素和元素之間有個隱藏或者顯而易見的視覺關係，和上面講的親密性 有著類似的效果或者在設計時同時存在相扶相依的關係，這裡說一下設計的每個原則都不是獨立存 在的，它們都能增強頁面元素將之間的邏輯性和主次關係。

在設計時遵循對齊原則能讓你的作品變得更有依的據，不會讓客戶說一句：「你為什麼要把這個放 在這裡？」這種問題塞住。

案例2-1加上了輔助線後我們看到各種不對齊和不統一，調整後看上去更整齊更容易閱讀。就像我 之前說的設計要嚴謹，不要怪你的主管或者總監有一雙鈦合金狗眼，哪怕一像素也要你對齊了，其 實都是對作品的負責。

案例2-3這是一個常規的長版頁面，我想說的是很多童鞋做稍微長版的頁面的時候只看到眼前的那 一屏經常是往下做了之後就忘了上面的頁面關係，很少整體去看頁面關係。所以如果沒有大局觀的 話就要多回頭整體看一看審視一下自己做的頁面。

有的童鞋會說：「那網站怎就必須要這麼做么？ 」當然不是，舉這個例子是讓你了解當你沒有能力 做那種高端設計的時候這樣的思路起碼能讓你有個良好的習慣做出一個乾淨整潔的頁面。有心的童 鞋可以看看那些高端的網站，優秀的設計其實都是有規律可循的。

重複 & 對比 Repetition & Contrast

重複的原則在網頁中是某些網頁元素的重複或者是網頁結構的延續，包括配色等等。

有的網站首頁酷炫，但是到了內頁後經常給用戶一種跳轉到了另一個或者多個網站的感覺，我們不 僅要注意首頁的頁面統一，點擊到內頁後也要保持首內頁風格的統一。

在設計層面重複本身也是平面構成的一種，重複的元素和形象可以給人一種和諧與秩序的美感，同 時我們也可以進行差異性處理，在重複的結構中做一個差異的點（視覺重點），可以突出頁面的重 點，在網頁中常用於banner圖的製作。

對比在設計中是十分有效抓住眼球的手段，能高效的進行信息傳達。對比的手法有很多，除了上面 的元素之間的對比，還有比如色彩、留白、落差、特寫等等方式方法這裡就不一一舉例了。

這裡把重複和對比放在一起講，是因為之前說過設計的四個原則往往都是互相影響同時存在的，獨 自存在的時候很少見。

大家能在上面的案例看到親密性和對齊的存在么？

總結

遵循基本的設計原則可以讓我們在新手階段做出的作品更嚴謹，更容易快速的入門，但不代表高端 優秀的設計就可以拋棄這個設計原則了。大部分的商業作品熟練運用這幾個原則就可以做出比較成 熟的首頁效果圖了，當然還有其他要重要的方面，咱們以後接著講。

設計是一個製造矛盾解決矛盾的過程，可能我們現階段做的沒有那麼理想，但是這都是循序漸進的 過程，要有質的飛越還是需要一定蚩的積累，只要你簡堅持下來總會有收穫，前提是你是否知道你 在做什麼。

關於上一期得到了一些反饋，比如

有的同學反饋說HTML5的頁面已經可以控制漸變的適應了，在這裡感謝反饋，同時如果你們做的不是HTML5的頁面，那還是要注意下的。畢竟HTML5在中小企業建站的使用中還不普遍。

注意事項：

網頁上的陰彩和漸變可以有但是要考慮切圖製作的便利，如果沒有必要儘可能的不要斜面拉漸變或 者是漸變交錨。

舉個栗子：

感謝你的閱讀

還有什麼實用技巧，可以在下方進行評論！ 我會一一進行整理，然後繼續更新。

希望對愛學習的人有所不幫助，轉發分享，讓更多的人學習，關注我們，我們會定時分享一些有用的教程。

點擊原文，獲取更多信息。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！