前言:尋找寫作靈感?中文期刊網用心挑選的網頁設計中布局與用色技巧探析,希望能為您的閱讀和創作帶來靈感,歡迎大家閱讀并分享。
摘要:作為一種視覺語言,網頁設計中必須從布局和用色角度進行考慮,更好展示信息內容與頁面思想,增強受眾的視覺體驗,帶給受眾以興趣和美的視覺享受。本文研究主要從網頁設計中出現的常見誤區與不足入手,圍繞網頁設計結構布局與選色、用色技巧進行論述。
關鍵詞:網頁設計;網頁布局;用色技巧;視覺傳達
隨著信息技術的發展,網站成為展示單位形象、介紹企事業發展的重要途徑。因此網站設計這一行業也迅速發展起來,做為網絡傳遞信息的重要載體,因其不同的性質、用途和服務群體而產生了多種多樣的設計和用色方式。因此網站設計要根據設計的目的、功能、用途等選擇不同的設計布局和用色,將技術性和藝術性融為一體,進行創新性設計,進而達到有效傳播各種信息,提升單位形象等目的。
一、網頁設計布局與用色的常見問題
正如前文所述,網頁設計布局中必須結合功能、用途進行,不僅要達到宣傳目的,更要滿足設計的藝術性要求。從實際情況看,許多網站在頁面布局、用色等方面還存在些許問題。
(一)網頁設計布局常見問題
一般情況下,網站頁面布局設計需要符合:簡潔一致、從上到下,從左到右,將網頁需要表達或者突出的內容放在顯眼的地方。力求達到主次分明,中心突出;大小搭配,相互呼應;圖文并茂,相得益彰。在日常中可以發現,許多網頁布局,一是存在區塊分布過多,內容展示繁雜的問題,受眾通過網頁獲取信息時,通常會根據自己的愛好和需要來進行選擇。而一個信息混亂的網頁,會使人感覺繁雜,所以一個頁面信息量不宜過多。二是布局中主體功能不突出。很多網站設計中過于突出設計風格或者設計特點,卻忽視該網頁的主體功能。例如社交類網站沒有將社交信息置于重要位置,這樣布局的后果則是無法吸引新的受眾關注。
(二)網頁用色方面存在的問題
用色則網頁設計的另外一項重要內容。網頁的色彩,是受眾在訪問頁面時第一直觀感受,好的用色能夠給人留下深刻的印象,激發受眾繼續閱讀,進行深入了解的欲望。當前情況下,網站設計用色首先存在選色缺乏統一色調的問題,使得該網站的所有網頁給人的第一感覺是眼花繚亂、毫無重點,忽視了網頁的整體美。這不僅違背了網頁設計要強調整體的規則,也違背了網頁設計過程中選色用色的目的。這就是我們常說的用色較“花”,沒有美感可言。這種網頁設計的選色方式存在一個很大的誤區,以為色彩越多越好,反而適得其反,造成了頁面雜亂無章的感覺。另外在網頁設計時選色較多,將會造成各個功能布局之間缺乏統一性和互補性,破壞了頁面布局的結構。其次,顏色選擇與搭配缺少藝術性。在突出設計特色,爭取吸引用戶的時候,很多設計師開始選用具有強烈感官刺激的色彩。這種選色方法極大減弱了色彩的藝術性,造成網頁頁面的內容上的沖突,視覺效果上的混亂。網頁設計過程中的用色技巧,選擇色彩的根本目標不是追求感官上的刺激,而是在于帶給受眾美的享受和體會,在于突出網頁所要表達的內容和傳遞給受眾的信息,以更好的理解網頁信息。如若用色過分追求了視覺上的刺激效果,也會使網頁顯的低俗而不是高雅。第三,網站選色中對比色運用不當。在網頁設計時,多選用對比色可以有效吸引受眾。但是在使用對比色時很多人喜歡運用色差強烈的對比色,這種用色方式會將色彩的沖擊效果放大。這樣造成的結果用色與內容不統一,需要突出的內容沒有突出,做為陪襯的色彩反而成為視覺中心。因此,過分的突出了色彩運用而忽略與內容的統一,會適得其反,喧賓奪主。
二、網站設計中的布局要點
網頁設計中首先要解決的是布局問題,基于此才能進行下一步的設計工作。常見的網頁布局包括以下幾種。
(一)網頁設計布局
一是“國”字形布局,因其布局結構與漢字國相似而得名。該布局類型頁面的最上部位一般放置該網站的標志,頁面中間主要放置網頁的主要內容,左右兩部分設置鏈接,最下部分則設置廣告、版權信息和聯系方式等。該布局方法大氣、穩重,是我們常見的一種布局方式。二是T型布局。這種網頁結構形式就像T字母一樣,所以我們通常稱之為T型布局。它具有很多優點,其中最重要的就是結構簡潔,內容清晰,功能明確。三是POP布局,該布局的構成更像是一張宣傳畫,以一個整體和諧的畫面或者Flash作為網頁的主要內容,在頁面的上下或者左右等位置設置超級鏈接等內容。能達到美觀、動感、時尚的效果,常見于時尚型的網站。整體美觀大方,但是載入速度過慢。
(二)網頁設計布局要點
網頁布局設計中可以按照以下幾個要點進行。首先是根據內容,宣傳內容來確定布局特點。根據內容進行結構的搭建,再進行色彩的選擇,最后對網頁的細節進行處理。該要點注重的是形式與內容的統一,采用不同的形式來突出主題內容。例如在各行各業的商店中,商人會根據業務的不同,將主要銷售的貨品擺在門口等重要的位置。這就是內容決定形式在日常生活中的體現,通過簡單的例子我們也可以明確該布局要點的重要性。其次,在布局設計中必須突出整體性。網頁的整體性不僅要體現在所展示內容上的統一,還包括用色和布局上的整體性。強調布局的整體性,就是要先著眼整體,然后進行內容或者功能區塊的劃分,最后回歸整體,做到網頁設計的整體性,避免雜亂無章的感覺。在設計網頁過程中突出其整體統一性,可以使受眾在享受美的同時,更加全面快速的了解網頁所要突出的內容。傳遞給受眾一種和諧完整的美感。第三,是根據網站功能來確定布局方案。例如企業的網站就要強調其產品的展示;公共型的網站就要突出形象和權威性的文章;在設計過程中,要根據網頁的用途、性質等功能選取不同的設計思想。企業型的網站主要展示該公司的產品、服務等,在設計中要重點突出;政府單位或者行政部門的網站就要突出他們的良好形象和權威;而教育型的網站,則要根據業務方向或者教學內容,展示有針對性的合適的教育信息。
三、網頁設計中的用色技巧
顏色是網頁給我們的第一印象,受眾進入并瀏覽一個網頁時,第一直覺并不是針對網頁的資訊和內容,而是受眾在獲取信息之前所得到的視覺享受。也就是色彩的應用給受眾帶來視覺感受。因此網頁用色直接關系到一個網頁的成功與否。設計選色的時候必須圍繞網頁的主題思想和要突出的內容進行。
(一)根據內容明確設計主色調
網頁設計中必須根據網頁內容、功能特點,來確定網頁的主要色調。所謂頁面的主色調,就是根據頁面的功能、性質和用途來確定的合理的主要色彩傾向,能夠充分體現頁面的主要目的和特點。主色調就好比一篇文章的中心思想,對整個事物的發展和變化都起到引領的作用,其他一切的選色用色都必須以主色調為主導,并與之相符。在選擇好主色調之后,才可以確定其他輔用色彩。不同的色調所傳達的感覺是不同的,所以在選定主色調時需要根據頁面的功能、性質、用途、服務對象,以及想要達到的視覺和心理效果來確定。如選用藍灰、棗紅等較為嚴肅穩重的色彩課多用于政府和行政部門網站等。再如時尚網站和化妝品網站中要給用戶傳達一種輕松、愉悅或者可愛的氛圍,則需要選用類似于偏粉的柔和色調。
(二)網頁設計中的配色技巧
在選擇好主色調之后,才可以確定其他輔用色彩。在選擇輔用色彩時也必須要注意到其與主色調是否存在色彩沖突等情況。輔助用色配不僅具有良好的視覺效果,體現出一個頁面的和諧統一之美;還可以強化需要突出的主題內容,積極影響受眾對網頁產生深刻的印象乃至更加深入了解網頁所表達的內容。實際設計中可以從以下幾個角度進行。以色相為基礎的配色是在色相環的基礎上進行選擇的,定好主色調后,選擇色相環上臨近的色彩進行配色,可以給受眾帶來穩定和統一的感覺。用色相環上距離較遠的色彩進行配色,會給受眾帶來對比的感覺,以突出內容。例如采用同一色相配色,這種方法只有一種顏色的變化,給人傳遞和諧、穩定、整體的感覺。明度差別較大的顏色變化則會使頁面顯的活潑、靚麗,差別太大又會顯的不協調。又如采用類似色相配色時,這種配色技巧采用相近色彩進行搭配,例如主色調為紅色時搭配紫紅色;主色調為藍色時配色采用紫藍色等。類似色相的配色視覺效果豐富、活潑,但又不失和諧統一的感覺。會給人傳遞清雅、和諧的感受,產生柔和、唯美的視覺感受。當然,在實際選色中也可以選擇對比色相配色,又被稱為相反色配色,對比色是指色相環中兩個距離較遠的顏色。這種配色方式因為采用了對比強烈的色相,顏色差異較大,傳達給受眾一種強烈的變化感。
參考文獻
[1]湯曉妹,鄭曉丹.視覺傳達設計中的色彩[J].常州工學院學報(社科版),2017,(04)
[2]張嘉興.網頁中色彩搭配與網站內容關系研究[J].美術教育研究,2015,(08).
[3]路倩倩.網頁用色之我見[J].大眾文藝,2014,(22).
[4]李曉曄.網頁設計中的格式塔心理學[J].傳媒觀察,2011,(08).
[5]林文發.網頁設計中的色彩搭配[J].信息與電腦(理論版),2010,(24).
作者:任溪 鄭戍疆 單位:新疆應用職業技術學院