網(wǎng)頁視覺設(shè)計風(fēng)格研究

曾坤

摘 要：二十一世紀(jì)是信息爆炸的時代，隨著計算機和互聯(lián)網(wǎng)的普及，網(wǎng)頁成了信息傳遞的重要載體。網(wǎng)頁設(shè)計是平面設(shè)計的延伸與新的發(fā)展方向，網(wǎng)頁通過各種視覺元素引起人們的注意，然后將各類信息以最快捷有效的方式傳遞出去。網(wǎng)頁視覺設(shè)計的方法有很多，表現(xiàn)形式也是多種多樣，在設(shè)計的時候需要根據(jù)網(wǎng)站的類別和功能特征去選用合適的方法去進(jìn)行設(shè)計表現(xiàn)。本文對宏觀的角度將常見的網(wǎng)站進(jìn)行了分類，并分析總結(jié)出不同類型網(wǎng)站的視覺設(shè)計特征，希望能為網(wǎng)頁設(shè)計從業(yè)者提供一定的參考與借鑒意義。

關(guān)鍵詞：網(wǎng)站分類;網(wǎng)頁視覺設(shè)計風(fēng)格;互聯(lián)網(wǎng)

中圖分類號：J05文獻(xiàn)標(biāo)識碼：A文章編號：2096-0905（2020）06-00-02

互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展讓人們的生活方式發(fā)生了翻天覆地的變化，我們可以足不出戶便知天下事，而且不受時間和地域的限制。2020年是不平凡的一年，由于很長一段時間學(xué)生不能返校上課，公司員工不能集中上班，便出現(xiàn)了“網(wǎng)上課堂”與“在線辦公”，這些都需要依賴互聯(lián)網(wǎng)才能實現(xiàn)，可以說互聯(lián)網(wǎng)讓我們的生活變得更加精彩，也給了我們更多的可能性。網(wǎng)站便是互聯(lián)網(wǎng)進(jìn)行信息呈現(xiàn)與傳遞的重要載體，已經(jīng)融入了人們的生活和工作中;網(wǎng)頁有多種設(shè)計風(fēng)格，要研究網(wǎng)頁的視覺設(shè)計風(fēng)格還得結(jié)合網(wǎng)站的類別而進(jìn)行，因為不同行業(yè)的網(wǎng)頁設(shè)計風(fēng)格是截然不同的，比如政務(wù)類的網(wǎng)站和購物類的網(wǎng)站在設(shè)計風(fēng)格上就相差甚遠(yuǎn)，不能用同一設(shè)計方法和形式去表現(xiàn)。常見網(wǎng)站從所屬行業(yè)大致可以分為企業(yè)網(wǎng)站、購物類網(wǎng)站、門戶網(wǎng)站、專題網(wǎng)站、游戲網(wǎng)站、產(chǎn)品類網(wǎng)站等。下面我們對不同類別網(wǎng)站的視覺設(shè)計風(fēng)格進(jìn)行分析研究。[1]

一、企業(yè)網(wǎng)站

企業(yè)網(wǎng)站是一個公司或企業(yè)對外的窗口，承載著企業(yè)的理念、愿景等重要信息，也是網(wǎng)頁設(shè)計師經(jīng)常會做到的項目。如今大多數(shù)企業(yè)網(wǎng)站偏向簡約、正式的設(shè)計風(fēng)格，多以“大圖少字”的形式呈現(xiàn)，也有會一些采用全屏式，甚至在首頁首屏加入一些視頻動效，這樣既能增強視覺張力也會顯得比較大氣。騰訊官網(wǎng)是比較典型的企業(yè)網(wǎng)站設(shè)計，非常注重設(shè)計感、強調(diào)行業(yè)屬性，其首頁采用了全屏式設(shè)計，背景是一段幾秒鐘的視頻動畫，內(nèi)容非常具有科技感;網(wǎng)站的主色調(diào)為藍(lán)色，藍(lán)色具有沉穩(wěn)、大氣、睿智、廣闊等特性，經(jīng)常用于科技和互聯(lián)網(wǎng)行業(yè)，與騰訊的定位與調(diào)性非常相符，這體現(xiàn)了色彩對于主題表達(dá)的重要作用。騰訊官網(wǎng)的交互細(xì)節(jié)也做得非常好，比較注重用戶的體驗感，處處彰顯著企業(yè)對品質(zhì)的追求，這也是大多數(shù)企業(yè)網(wǎng)站的共性。[2]

二、購物類網(wǎng)站

購物類網(wǎng)站是我們生活中常常會使用到的，比如淘寶、京東、唯品會等等。購物類網(wǎng)站的設(shè)計風(fēng)格也有一些共性，比如“圖多字多”，因為它承載的商品信息太多了，所以空間的利用率比較高，區(qū)域模塊的劃分也比較細(xì)致合理。購物類的網(wǎng)站對功能性有較高的要求，通常必須具備如下功能：商品展示、搜索功能、網(wǎng)上支付、信息反饋等功能。購物類的網(wǎng)站在版式設(shè)計上多采用“刪格式”，其優(yōu)點是可以讓這類圖文較多的網(wǎng)站呈現(xiàn)的有秩序，在視覺上有比較整齊的感覺。在二級頁面中“列表式”和“卡片式”用得也比較多，這兩種設(shè)計形式非常適合商品圖片和描述文字都較多的購物類網(wǎng)站，既能節(jié)省設(shè)計時間又方便展示。[3]

三、門戶網(wǎng)站

門戶網(wǎng)站是互聯(lián)網(wǎng)信息資源集合與綜合性服務(wù)平臺，比較有代表性的有搜狐網(wǎng)、新浪網(wǎng)和鳳凰網(wǎng)等。這一類型網(wǎng)站設(shè)計的共性是“內(nèi)容多留白少”，與購物類網(wǎng)站有較多類似的地方，它們所展現(xiàn)的內(nèi)容都比較多，但購物類網(wǎng)站的廣告圖或產(chǎn)品圖相對多一些，整體來說視覺元素以圖片為主文字為輔，而門戶網(wǎng)站的視覺元素一般以文字為主。如新浪網(wǎng)是典型的門戶網(wǎng)站，在網(wǎng)頁頁面中文字的占比較大，此類網(wǎng)站的導(dǎo)航欄類別比其他網(wǎng)站都要多，集中著大量不同類別的資訊。門戶網(wǎng)站的設(shè)計風(fēng)格相對傳統(tǒng)，以實用性為主，所以在設(shè)計形式上不會過多的追求設(shè)計感和視覺沖擊力，而更加注重信息清晰有序的呈現(xiàn)。[4]

四、游戲網(wǎng)站

游戲類網(wǎng)頁設(shè)計是隨著游戲行業(yè)的蓬勃發(fā)展而產(chǎn)生的，相對其他網(wǎng)站而言比較特別，屬于娛樂類型的，且用戶主要偏向年輕群體，在視覺設(shè)計上會比較前衛(wèi)一些，多以酷炫有質(zhì)感的效果呈現(xiàn)。游戲世界是一個亦真亦幻的世界，而這些場景都可以通過原畫來繪制實現(xiàn)，此方法是游戲網(wǎng)站視覺設(shè)計的一種主要表現(xiàn)形式，但是想要有較好的原畫繪制能力是需要有較強的美術(shù)功底和長期的練習(xí)積累，門檻較高，這也是做游戲類設(shè)計的人比其他設(shè)計類別工資略高的一大原因。游戲類網(wǎng)頁設(shè)計還有一種常用的表現(xiàn)形式就是做舊和肌理感，模擬真實的材質(zhì)，讓用戶有較強的帶入感。當(dāng)然在進(jìn)行游戲類網(wǎng)頁設(shè)計時還需要做到簡單易懂，操作流暢，要讓用戶體會到友好性，不需要有過多的學(xué)習(xí)成本。[5]

五、專題網(wǎng)站

專題類網(wǎng)站是以一個點、一個事件、一個主題來策劃一個頁面或者一個活動的網(wǎng)站頁面。生活中我們見的最多的要數(shù)電商類的專題網(wǎng)站了，以此為例，電商類平臺在運營中非常重視節(jié)日營銷，這些節(jié)日有傳統(tǒng)節(jié)日如“春節(jié)專題”“中秋專題”等，也有新興的一些電商節(jié)如“雙十一”“618”等，電商類的平臺在專題網(wǎng)站的視覺設(shè)計上是非常用心的，會有專門的團隊打造，比如近幾年的天貓“雙十一”的設(shè)計就越來越驚艷了。無論是哪個節(jié)日主題，在進(jìn)行專題頁網(wǎng)站設(shè)計的時候主題性是要重點突出的，而且畫面相對要比較熱鬧，色彩豐富，因為電商類主題頁的本質(zhì)就是一個特殊的營銷廣告，從網(wǎng)頁的界面設(shè)計中要讓用戶感覺到節(jié)日的氣氛。比如做“年貨節(jié)”的時候通常會選擇紅色為主色調(diào)，在圖形的選擇上多會選擇傳統(tǒng)的、吉祥的圖案。當(dāng)然在做專題頁設(shè)計時不能直接照搬或元素堆砌，這樣不免有些俗套，還需要網(wǎng)頁設(shè)計師進(jìn)行提取再創(chuàng)作，避免千篇一律。現(xiàn)在專題頁網(wǎng)站常用的表現(xiàn)形式還有色彩漸變、輕質(zhì)感、C4D立體效果等等。總的來說，專題頁網(wǎng)站的視覺設(shè)計核心在于要挖掘節(jié)日特點與文化內(nèi)涵而展開設(shè)計。

六、產(chǎn)品類網(wǎng)站

產(chǎn)品類網(wǎng)站以展示產(chǎn)品為主，目的是讓瀏覽者或消費者清晰的了解產(chǎn)品的功能與屬性，通常會以產(chǎn)品圖為主，而且對產(chǎn)品圖的質(zhì)量要求非常高，這些圖片主要是產(chǎn)品細(xì)節(jié)圖、整體展示、應(yīng)用場景、代言人等。當(dāng)然，在產(chǎn)品類網(wǎng)站中文字也是不可缺少的，它多以輔助信息出現(xiàn)，當(dāng)用戶想要進(jìn)一步了解產(chǎn)品信息的時候就需要通過文字獲取了，文字相較于圖片而言能更加準(zhǔn)確的傳遞信息，所以在產(chǎn)品類網(wǎng)站中兩者都是不可缺少的。產(chǎn)品類網(wǎng)站非常注重版式和設(shè)計感，在版式布局上多采用“版心式”和“全屏式”，現(xiàn)在主流的屏幕分辨率是1920*1080像素，版心通常會做到1200像素;“全屏式”效果比較的炫，信息大多會折疊隱藏，并配合面包屑導(dǎo)航使用，且非常注重交互效果，對鼠標(biāo)經(jīng)過、點擊等操作都會給出響應(yīng)，體驗感非常好。當(dāng)然，此類型的網(wǎng)站在視覺設(shè)計和開發(fā)的過程中對技術(shù)的要求也比較高。

七、分析總結(jié)

通過以上對各類網(wǎng)站的視覺設(shè)計風(fēng)格研究分析可以總結(jié)得出——網(wǎng)站設(shè)計不能一概而論，也沒有絕對的好與壞，只有合適不合適，因為網(wǎng)站可以細(xì)分為很多類型，網(wǎng)頁設(shè)計的風(fēng)格也有很多，不同類型的網(wǎng)站它的功能性是不一樣的，使用人群和用戶訴求也都不一樣，在進(jìn)行網(wǎng)頁設(shè)計的時候要根據(jù)網(wǎng)站的類型和需求選擇合適的表現(xiàn)形式，像門戶網(wǎng)站就不適合用極簡主義風(fēng)格，不適合大量留白，而這種風(fēng)格在產(chǎn)品類網(wǎng)站中卻是適用的，所以作為網(wǎng)頁設(shè)計師、必須要掌握多種網(wǎng)頁設(shè)計方法和表現(xiàn)形式。

在進(jìn)行網(wǎng)頁視覺設(shè)計的時候要遵守以下三個原則：一是，設(shè)計與定位要匹配;比如政務(wù)類網(wǎng)站比較適合傳統(tǒng)、正式、嚴(yán)謹(jǐn)?shù)脑O(shè)計形式去表現(xiàn);電商類網(wǎng)站可以用扁平化，簡約的形式去表現(xiàn);游戲類網(wǎng)站可以使用插畫、原畫、擬物化的形式去表現(xiàn)等等。最好能做到主題明確，符合行業(yè)屬性，信息表達(dá)清晰精簡，讓用戶能輕松地接收信息。二是，要注重交互設(shè)計和用戶體驗;對用戶的操作要有良性的反饋，無論在設(shè)計的任何階段，都要堅持“以用戶為中心”。三是，要注重視覺美觀性;人對美好的事物往往會更加有好感，就像包裝設(shè)計一樣，設(shè)計精良的包裝會更受消費者青睞，且能增加產(chǎn)品的附加值，網(wǎng)頁設(shè)計也是一樣，在滿足功能性與可用性的前提下，要追求網(wǎng)頁設(shè)計的視覺效果，比如好的版式設(shè)計、精美的配色、流暢的交互，都會增強用戶在瀏覽網(wǎng)頁時的體驗感。現(xiàn)在對網(wǎng)頁設(shè)計師提出了更高的要求，網(wǎng)頁設(shè)計師在進(jìn)行網(wǎng)頁設(shè)計的時候也需考慮到交互設(shè)計和用戶體驗，因為網(wǎng)頁設(shè)計不僅僅只是要好看，更重要的是有用與好用，從優(yōu)先級來說有用與好用一定是要擺在好看前面的，這也是網(wǎng)頁設(shè)計的新趨勢。

參考文獻(xiàn)：

[1]盧思聰.游戲類網(wǎng)頁設(shè)計的視覺表現(xiàn)形式研究[D].中南民族大學(xué)，2013.

[2]蔣昊朋.新媒體環(huán)境下網(wǎng)頁設(shè)計發(fā)展趨勢分析[J].赤峰學(xué)院學(xué)報（自然科學(xué)版），2017，33（04）：15-17.

[3]陳昱甫，陳穎祺，舒葉.網(wǎng)頁設(shè)計中的頁面布局之分析[J].工業(yè)設(shè)計，2018（12）：79-80.

[4]張璇.談網(wǎng)頁設(shè)計中的視覺設(shè)計[J].傳播力研究，2019，3（33）：170.

[5]韓炘利.視覺引導(dǎo)在網(wǎng)頁設(shè)計中的應(yīng)用研究[D].青島理工大學(xué)，2018.