當前位置:才華齋>設計>網頁設計>

網頁設計的設計技巧

網頁設計 閱讀(8.86K)

網站頁面設計的時候,都希望設計出來的頁面更加有質感,看起來更加美觀。下面是小編分享的網頁設計的設計技巧,歡迎大家參考!

網頁設計的設計技巧

 一、層次

層次分為平面和縱深。任何一個設計師,都應該充分意識到,有節奏的層次變化能在使用者內心產生微妙的化學反應。

這是一個航空公司的廣告圖,我們經常能看到或者說也做過類似這樣的設計:一個大大的背景圖,加個框,加上文案,很簡潔,可是也過於平淡了。

給圖做一些小改動,快的話可能十分鐘都不要,看看具體做了什麼:

1、文字標題和正文區分開,強弱對比更加明顯。

2、讓機翼割裂矩形框,產生縱深感。

3、增加投影

是不是效果就完全不一樣了呢?

運用類似的方法,讓2d的畫面體現出了3d的效果。如果平時在網頁設計中也多多運用這樣的技巧,給自己的設計稿製造富有節奏的層次感,結果可能就大不一樣。

二、色彩

在設計中,網頁設計師對於顏色不同程度的理解,都影響著設計的表現。一張優秀的設計作品,色彩搭配必然是和諧得體、令人賞心悅目的。

關於色彩,要細說的話太多了,提四個重點:

1、色彩的黃金法則:6:3:1

在一個作品中,主色、次要顏色和輔助色的比例,接近於6:3:1,不敢說滿足這個條件就一定是一個好的設計,但至少是一個不容易出錯的設計。相信大家對於這個法則都不陌生,但是越熟悉的就越容易被我們忽略,以後大家在對自己設計稿不滿意的時候,不妨看看我們的配色是否滿足這個黃金比例。

2、勿忘黑色

很多現代簡約的風格都會使用黑色,當然在這裡不是呼籲大家大量的使用黑色,而是靈巧的運用。黑色能讓任何一個色彩都顯得更為乾淨,當你不知道使用什麼顏色點綴的時候,用黑色試試吧。

3、遵循自然的顏色

地球是有顏色的,天空、土壤、群山、海洋,都有著它們各自的顏色。我們在設計稿中,如果違背了大自然的原則,往往會給人不舒服的感覺。有時候,大自然的色彩是最好的提示。

4、色彩的反差

如果通篇是一個色調,會給人乏味、平淡的感覺。當我們需要強調什麼、或者想要表達某種情緒營造某種氛圍的時候,試試加入一些反差:可以是明暗對比、冷暖對比、輕重對比,也許會得到想要的結果。

 三、陰影

幾乎是gui設計誕生的那一刻起,陰影的運用就無處不在,經常用到高光、陰影和漸變。

之後設計工具不斷推陳出新,設計手法也越來越豐富,這裡不能不提到喬布斯,在iphone推出後,擬物設計風靡設計圈,在ios6的時代達到巔峰,幾乎所有的設計師都在埋頭研究各種投影、反射、紋理、高光。

iOS 7 推行扁平化設計後,當時的設計圈就炸開了鍋。「這麼多年辛苦練習的設計技巧,說拋棄就拋棄?」於是他們還是想到了陰影。你要說2014年最流行的設計風格是什麼,毫無疑問是漸變「Gradient」+長投影「Long shadow」

再到現在,設計師們又看膩了長投影,轉向了紙片化的設計,加上大範圍的薄陰影烘托質感。依舊是扁平的風格,不過設計師們都在想著辦法做出不一樣的感覺。

說了這麼多,其實就是想表達從十幾年前開始,陰影就一直以不同的形式存在設計潮流中,當然我們對於潮流的態度,應該是不盲目跟隨,也不強烈抵制,適合自己的才是最好的。

舉兩個例子,分別是有投影和沒有投影的情況下,設計稿所呈現出來的`樣式,能明顯感覺到,適當的投影,對增加設計稿質感確實是有幫助的。

  四、字型

用對字型,設計才得體。網頁設計師不會想要在卡通風格的設計中用宋體,同理,也不會用娃娃體去做嚴肅文學作品的封面。

1、瞭解字型的性格

比如,無襯線的粗體字,給人一種渾厚、有力的感覺;用了有襯線的細體字,給人更多的是輕巧、飄逸的感覺。不同的字型,傳遞著不同的性格,用的時候可要把握好哦。

2、使用一種以上的字型

3、調整你的行間距

兩段話,第一段的行間距是1,第二段的行間距是1.5,相對於第一段來說,相信大家更願意閱讀第二段的內容吧。

4、注意文字的可識別性和易讀性。

關於這點可能會有很多種不同的情況,舉一個例:網頁設計師在設計中可能會遇到在圖片上新增文字的情況,在圖片不固定的時候,如果用了白色,遇到淺色背景的圖片會使文字閱讀困難,所以通常會加一個不透明度較低的黑色蒙層來避免這種情況出現,當然文字加投影也可以。這種會導致文字易讀性差的情況還有很多,大家根據自己的問題採用不同的方法吧。

網頁設計合理的運用層次、色彩、陰影、字型等設計技巧,會讓網頁更加有質感。