位置:設計主頁 > 網站制作 > 前端開發 >

特別全面的設計教程幫新手掌握網頁設計基礎知識

來源:優設網 作者:研習設 時間:2019-10-14 11:25

@研習設K先生 :我們每天都會瀏覽大量網頁。現在,讓我們回想一下,你印象最深的網頁。在你瀏覽它們的時候,是不是只看到了網頁中想要查找的信息呢?

這是因為,每一個網頁設計師的首要任務,就是要把信息有效地傳達出來。那是不是說,網頁只需要有信息傳達的功能,就足夠了呢?顯然,回答是否定的。那么接下來,我們就來看一下到底什么是網頁設計。

喬布斯說:「設計,看中的不是感覺如何,而是他的功能性。」

那么什么是網頁設計呢?其實,網頁設計是由印象和功能,一起組成。

想要通過畫面給用戶留下什么印象

設計師通過圖片,文字,色彩等元素,可以給用戶展示出不同的印象。

我們通過他的字體、圖片和顏色,一眼就可以看出來,這是一個面向兒童市場的網頁。

而這個網站和前面是截然相反,通過文字圖片和顏色,傳遞出一種專業,冷靜的感覺。

將信息用最有效的方式傳遞出來

那么網頁的另一半,就是功能,通過編排文字和圖片將信息,最有效的傳遞出來。這就需要我們合理的編排信息,讓它可以方便閱讀,有的時候還要配合網站的動效展示信息。

這個網頁,將枯燥的數字信息,通過編排,可以讓用戶快速的理解。

通過將信息,做成曲線圖表的形式,這樣就降低了用戶的理解難度。

網頁設計中,文字和圖片信息的編排。有時,也需要考慮到動效的因素。

網頁設計師的職責是什么

那么,說了這么多,網頁設計師的職責到底是什么呢?

客戶通常在項目上,會有很多的需求點。客戶的這些需求,很多時候是混亂,甚至他們自己也不明白真正需求是什么。

所以,當客戶直接面向目標人群,傳遞信息的時候。目標人群,更多的是茫然的狀態,完全不知道這個到底是什么。

所以這個時候,網頁設計師就出現了。

在接收了客戶的想法以后,將信息重新編排和整理。

這個時候傳遞給目標人群,他們就可以輕松地理解客戶的信息了。

所以,網頁設計師的職責就是,整理和展示信息的魅力,讓網站便于使用。

在保證了印象和功能的前提下,將信息最有效的傳遞出來,讓用戶可以更容易的理解網站的信息。這個,也就是網頁設計師職責。這個是不是和平面設計師,很相似呢?

網頁設計師和平面設計師的區別是什么

現在,我們來看一下,網頁設計師和平面設計師的區別是什么?

平面設計師,通常是在限定了尺寸的版面下,進行排版。而網頁設計師,則需要根據不同的平臺,在保持統一性的前提下,來變化尺寸和樣式。

平面設計師,由于更多的是面向印刷,所以在設計時更多的采用,CMYK 模式。而網頁設計相反,多采用 RGB 的模式。

平面設計師,在設計的時候,不需要考慮動效的問題。而網頁設計師,在設計的時候,更多時候需要考慮,文案和動效的相互搭配。

平面設計師,在一旦定稿了,交付印刷了以后,這個內容就沒有辦法繼續更改了。而網頁設計師,則需要在保持統一性的基礎上,適應不同的信息,更改版式。

但是不論平面設計師還是網頁設計師,版式設計都是一切的基礎。

到這里,我們已經知道了,什么是網頁設計,以及網頁設計師的職責。接下來,我們再來看一下,一個網頁,它的布局都有哪一些呢。

樂高玩具,好玩的點就在于,可以自己隨意地創造出新的東西。網頁的每一個板塊其實就像是積木,可以模塊化的進行調整,但是有順序性的。

一個網頁中,通常包含頁眉、全局導航欄、主欄、頁腳,這四個部分組成。我們來看一些網站案例,加深一下理解。

這是另一種,常見網頁的組合形式。

二級網頁的結構,通常是由全局導航欄,主欄,網站欄和頁腳組成。

另一模式是,省略掉網站欄。

網頁的瀏覽順序,不同于平面類,它分為 Z 字形瀏覽順序和 F 型瀏覽順序。

網頁的基本組成模塊,我們已經了解到了,這些模塊在設計的時候應該怎么做呢?接下來,我們分別來講一下,每一個模塊的功能和表現形式。

頁眉-網頁的起始位置

頁眉,網頁的起始位置。通常是由標志、導航欄、社交媒體、照片和視頻組成,并不是每一個導航欄都需要這些元素,它們是可以相互組合的。

這個是最簡單的導航欄,通常是由兩部分組成。

這個則是分為標志、全局導航欄、副導航欄三部分組成。

在這里的標志區域和文案部分結合。

這個導航欄則分為四個部分。

導航欄,不僅僅只是一溜長條,在網頁中,還有將圖片和導航欄結合的案例。我們繼續將這個案例分解。分為圖片,文案信息,設計媒體,導航欄和副導航欄這幾個部分。

除了添加圖片,現在更多網站選擇放置視頻,可以更好的吸引用戶,傳遞項目屬性。我們看一下它的結構,他是由視頻、標志、文案信息、收放式全局導航欄、社交媒體組成。

頁腳-是網頁結束位置的區域

通常情況下,是由版權聲明、網頁地圖,相關的跳轉鏈接,和一些其他的內容組成。他們同樣也是不固定的,可以相互組合。

添加地圖可以讓用戶更好地尋找到項目地址。

在頁腳部分,設置服務導航欄,可以讓客戶方便的跳轉鏈接。

添加社交媒體的模塊,進一步展示網站信息。

展示著作權,也是頁腳不可或缺的內容。

全局導航欄-讓用戶能夠快速地進入相關頁面

快速地讓用戶查找到,上手容易是導航欄的要求。接下來,配合動效來理解一下。

在下滑網頁的過程中,導航欄會隨著下滑的位置彈出后,置頂在畫面中,方便用戶使用。

可收放式菜單,搭配動效,可以將更多的信息展示出來。

展開到整個畫面的導航欄,可以不影響畫面的簡潔性的前提下,展示導航信息。

固定在左側的導航欄,具有非常好的識別度。

單一的通過文字,有的時候,并不能有效的傳遞出信息,搭配了圖標的菜單,可以進一步提升識別度。

將副導航欄,放置在導航欄的二級菜單中,可以提升用戶使用的便利性。

現在,我們已經清楚了,網頁中的頁眉,頁腳,全局導航欄的形式和功能。其實一個網頁中,還有很多小的元素,它們同樣是可以讓用戶更好地去接收和理解信息,但是我們卻常常忽略它們。

按鈕和圖標-引導用戶進入和返回頁面

首先來看一下,按鈕和圖標。它是為了引導用戶進入或者返回頁面而存在的。它的特點是易識別和反饋性。

線框按鈕:鼠標碰觸顏色會改變。

△ 更多的應用案例

這是帶線框的按鈕的第二種反饋模式。

帶背景色的按鈕,同樣具有良好的反饋。

帶圖標的按鈕,可以更好地讓用戶理解和明白,按鈕的含義。

向上的箭頭,在網頁中一般作為返回頁面頂部的導航按鈕使用。

表格-讓用戶可以一目了然識別信息

表格,在網頁中將復雜的信息通過網格的形式,讓用戶可以一目了然的識別信息。它的特點是,易識別和規范性。

標題添加背景色,有效地區分出主次層級。

不同背景色的交替布置,讓下級信息,可以區分。

字體加粗,用線段區分。

填寫項目-快速指導用戶填寫信息

填寫項目,它的作用是,可以快速指導用戶填寫信息,特點是便利性和功能性。

讓必須填寫的項目變得一目了然,并且在填寫欄中展示填寫的信息,讓用戶可以更加容易理解。

通過今天的學習,我們了解到了,一個網頁設計師的職責,以及他與平面設計師之間的區別。同時告訴了大家,網頁設計中頁眉,頁腳和全局導航欄的結構,以及它們的特點分別是什么。既要向用戶傳遞出準確的信息,又能體現出網頁的印象,也就是怎樣做得又對又好,是網頁設計師的職責,但是網頁設計和平面設計,都需要一個良好的版式設計的基礎上進行的。

福彩幸运农场走势图表