重慶網站設計師為大家總結一些網頁設計中的細節(jié)，或許有很多人知道，但不防多看看。如果你是剛入行的網頁設計師的話，對你肯有幫助，不要小看這些細節(jié)，這或許局是你和大神之間的差異。

一：網頁設計圖片處理手冊

1、圖片邊緣的處理

左圖：很多圖片本身并不是完美的，尤其是邊角區(qū)域為白色的時候，如果不處理的話，很容易和白色背景融合。那么我們該如何改變這些問題。
右圖：我們在圖片的邊緣處增加線灰色的描邊，有效的解決了這些問題?；蛘吒淖兣c圖片融合的北京把他們改為灰色，這樣就和白色產生了對比。

2、圖片統(tǒng)一性

左圖：在展示團隊成員招聘的時候，很多設計師在擺放團隊成員招聘的時候層次不齊，破壞了整個統(tǒng)一性。
右圖：經過調整后讓整個圖片在畫面中的比例大小都保持一致，有效的解決了這個問題。

3、圖片色調的統(tǒng)一性

左圖：在一排圖片展示中，有暖色 有暗色，有亮有暗的整個極度不同意。給用戶視覺上造成不便。
右圖：經過調整后圖片在整個色調明暗處處理上保持了統(tǒng)一，有效的強調了畫面的一致性。

4、圖片的邊框比例

左圖：圖片的長寬比例數值。這里在視覺上輕易看不出來，但是如果給開發(fā)人員的時候，就會出現這個毛病。
右圖：經過調整后的圖片比例 長寬都是為偶數，這個時候便于前端工程師在開發(fā)適配。

5、圓形化的繪制

左圖：關于圓形化的繪制出現茂邊也是很多設計師會出現的問題
右圖：所以在繪制的時候一定要注意謝姐，避免出現茂邊的情況。

二、網頁設計字體手冊

1、字體尺寸的大小

左圖：一般在網頁字體開發(fā)的時候，發(fā)現不少同學會用到15/17類似這樣的奇數值大小的字體。其實這樣不利于系統(tǒng)的顯示。
右圖：經調整后字體明顯的14/14/16等偶數值大小。意思讓整個字體在顯示的時候沒有茂邊。而且有利技術系統(tǒng)的顯示渲染。

2、字體的段落的行高

左圖：上列字體段落看起來是不是很吃力，每段字體相互干擾，給用戶造成極度困擾的閱讀。
右圖：經調整后字體段落行高顯示為字體數數值的一半讓段落彼此之間有了透氣性。極大的提高了字體的閱讀性。

3、標題的段落主次關系

左圖：字體段落在視覺上給人感覺不到有標題的存在，標題和段落之間的對比不明顯使用戶容易產生混淆。
右圖：調整過后的設計，標題加大了，一般增大段落字體的2/1大小，與段落的間距也是行間距的2 倍，使用戶在閱讀的時候清晰明了。

4、段落文字上的標點符號運用

左圖：段落文字之中的標點符號有的很近有的很遠，這樣的設計很容易讓人感到設計人員不專業(yè)的行為，所以在視覺上也得不到統(tǒng)一。
右圖：上壘字體的標題符號進行調整，讓他們之間保持了一致性，使我們的設計變得更加嚴謹。

5、英文字體的使用

左圖：英文字用英文字體，中文字用中文字體，很多設計師對中英文字體的援用比較模糊，所以導致了英文字體看起來別扭。
右圖：文字經過修改后，運用了英文字體，其實啥也不用說了，這個是每個設計師最基本的知識。

6、每行文字的展示長度

上訴一行文字是否看得很吃力？是的，因為漢字的信息量大，每個字之間沒有空格，緊密的挨著在一起，所以用戶閱讀的時候比較吃力

文字每行展示字數控制在35-45之間，是用戶閱讀的時候最容易吸收和理解的，這是長久以來的研究數據說明的。

三：網頁設計之顏色

1、大面積的用色

左圖：上面是不是給你一種刺眼和不適的感覺，是的，這也是很多設計師所犯的錯誤。
右圖：所以在調整過后我們可以適當的減少面積，保留了大量的空白，讓用戶更容易接收。

2、色彩的明暗

左圖：上面色彩大面積會給用戶一種刺眼的感覺，主要是設計師沒有敏銳的色彩感知能力
右圖：經過調整后將色調的明度調整在用戶能接收的階段之內，主要考驗設計師對色彩的的感知力。

3、彩色與非彩色

左圖：上面圖片字體配色使得整個畫面很混亂，因為背景包含了很多色彩，然后文字對色彩又是一種偏藍色的色調，所以導致用戶無法進行時間聚焦
右圖：調整后將文字顏色改為了飛彩色，可以用白色和黑色，具體根據背景色彩對明暗來決定，無論背景色如何變化都不會干擾用戶的視覺

4、環(huán)境色的運用

左圖：上面用色在彩色上用飛彩色是沒有錯誤的，但是卻沒有給用戶穿搭出圖中的意境，這是為什么？
右圖：調整后的文字汲取環(huán)境中的色彩，一般適合在圖片中色彩數量比較少的情況下可用，這樣就使得文字和圖完美的融合在一起

5、不超過3個色彩的使用

左圖：上面設計中用戶到底需要注意哪一個文字，是不是有眼花繚亂的感覺
右圖：經過調整，文字的顏色值采用兩種，才和和非彩色的搭配，給用戶傳達出簡潔清晰的感覺

6、相接處與分開

左圖：上面色彩給你的感覺是什么？所以不同的色彩之間是不適合相接觸的，尤其是高飽和的紅和藍兩種顏色
右圖：這是我們把他們分開后兩種色彩相互對比且相互不沖突

四：網頁設計中其它注意細節(jié)

1、完整的ps圖層

左圖：這樣雜亂不堪的設計圖層，不管是你的設計師還是開發(fā)人員都會讓人抓狂。
右圖：合理的分組、文件夾，是不是看起來很整潔，這樣一看就是很專業(yè)的設計師

2、文字的顏色

左圖；很多設計師喜歡在背景上浮動文字，設置透明度來改變文章的顏色，這樣是很方便，但是是很不利于開發(fā)人員進行文字色彩取色的。
右圖：所以我們在設置文章的色彩的時候，一定要避免設置文字的透明度

這些問題都是專業(yè)的重慶網站設計師用經驗整理出來的，如果在以后的設計中用心的避免這些小問題，我想設計出來的肯定是一個非常嚴謹的作品。