Photoshop中網頁的設計規(guī)范

時間：2023-09-26 03:00:01 | 來源：網站運營

時間：2023-09-26 03:00:01 來源：網站運營

Photoshop中網頁的設計規(guī)范：親密性在網頁中主要表現為對于內容的主次關系、邏輯關系、層級關系的梳理和表達。

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

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







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

對齊 Alignment

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

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





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







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

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







重復 & 對比 Repetition & Contrast

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

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

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







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

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

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

總結

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

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

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

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

注意事項：

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

舉個栗子：

感謝你的閱讀

還有什么實用技巧，可以在下方進行評論!

我會一一進行整理，然后繼續(xù)更新。

需要領取更多資料、教程或者軟件闊以加下學習交流君羊喲！(6516+34667)