網(wǎng)頁設(shè)計(jì)【視覺篇】 - 3

1、網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)篇綜合案例篇視覺表現(xiàn)篇視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格8. 網(wǎng)頁視覺風(fēng)格8.1 簡約風(fēng)格8.2 影像風(fēng)格8.3 手繪風(fēng)格8.5 中式傳統(tǒng)風(fēng)格8.6 立體風(fēng)格8.7 拼貼風(fēng)格8.4 復(fù)古風(fēng)格8.網(wǎng)頁視覺風(fēng)格 一個(gè)網(wǎng)站的視覺風(fēng)格能反應(yīng)網(wǎng)站性質(zhì)、產(chǎn)品特征，能為用戶愉悅感，幫助他們與產(chǎn)品間建立信任。本章將目前流行的網(wǎng)頁視覺風(fēng)格分為了簡約、影像、手繪、復(fù)古、立體、拼貼六種風(fēng)格，并結(jié)合大量的案例分析了各個(gè)風(fēng)格的特點(diǎn)及應(yīng)用場景。8.1.1簡約風(fēng)格的特點(diǎn)8.1 簡約風(fēng)格 簡約設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡約并是對內(nèi)容的簡單刪減，而是提煉設(shè)計(jì)精華

2、，滿足美觀實(shí)用的本質(zhì)訴求。在網(wǎng)頁中，簡約的設(shè)計(jì)，往往具清晰的頁面結(jié)構(gòu)、簡單的交互操作等特征，在滿足傳遞信息的同時(shí)，從視覺體驗(yàn)的角度，為用戶帶來輕松、愉悅的美感。 簡約風(fēng)格的設(shè)計(jì)由于內(nèi)容展示較少，用于小型創(chuàng)意領(lǐng)域機(jī)構(gòu)的官網(wǎng)較多，而電子商務(wù)類網(wǎng)站較少。8.1.2應(yīng)用及分析 一些媒體傳播機(jī)構(gòu)尤其親睞簡約風(fēng)格，如意大利Bake就是一個(gè)跨媒體的傳播機(jī)構(gòu)， 其官網(wǎng)只用了簡單的字母與圖形作為設(shè)計(jì)元素，用有限的圖形文字向用戶傳達(dá)出無限的想象；而單一的桔紅單色系配色讓人能立馬記住其企業(yè)形象。細(xì)膩的攝影與簡約風(fēng)格也仿佛天生是一對。如Thomassteibl是一家奧地利的婚紗攝影機(jī)構(gòu)，其官網(wǎng)就十分簡潔清爽。即便是婚

3、紗樣片的列表頁也是甄選了九種，精簡的內(nèi)容與極簡的形式高度統(tǒng)一。盡管簡約風(fēng)格目前商業(yè)應(yīng)用中還不太廣泛，但仍有少數(shù)高端的小型商城選擇了簡約風(fēng)格。8.2.1 影像風(fēng)格的特點(diǎn)8.2 影像風(fēng)格 影像包含了圖片、視頻兩大元素。影像風(fēng)格的網(wǎng)站界面特點(diǎn)是依賴大面積影像作品作為素材。網(wǎng)站在運(yùn)用影像素材中有時(shí)采用清晰、寫實(shí)的影像，而有時(shí)則是采用虛化或模糊的影像，具體使用哪種表現(xiàn)形式還是參考網(wǎng)站的主題而定。8.2.2 應(yīng)用及分析Sanissimo是一家墨西哥食品企業(yè)的網(wǎng)站，雖然只有一個(gè)頁面，卻是綜合使用影像元素與滾動(dòng)視頻差技術(shù)，將影像風(fēng)格的魅力展現(xiàn)得淋漓盡致。第一屏左側(cè)是模糊的靜態(tài)視頻背景，右側(cè)則是清晰的食品。當(dāng)鼠

4、標(biāo)向下滾動(dòng)，則可以看到之前左側(cè)模糊的靜態(tài)視頻開始播放，完美演繹了食物的誘惑。Eva是一個(gè)移動(dòng)社交應(yīng)用，其官網(wǎng)首頁以一個(gè)循環(huán)播放的視頻作為一整個(gè)背景，靜止的APP圖片反而應(yīng)用則顯得格外突出。隨后大量的圖片在視覺上營造出分享視頻的趣味性和娛樂性。8.3.1 手繪風(fēng)格的特點(diǎn) 8.3 手繪風(fēng)格 手繪風(fēng)格不同于常規(guī)的框架式網(wǎng)站設(shè)計(jì)，追求的是一種活潑隨性的自由，整個(gè)頁面更顯得跳躍，多用于游戲或是兒童社區(qū)的網(wǎng)站設(shè)計(jì)中，但也有很多設(shè)計(jì)工作室或是設(shè)計(jì)師使用手繪風(fēng)格來描述自己的日常生活或工作。8.3.2 應(yīng)用及分析 設(shè)計(jì)師Syster個(gè)人網(wǎng)站是典型的手繪風(fēng)格。清新不失細(xì)節(jié)的水彩、輕松而自然的手寫體、再配以柔和的色

5、彩將該設(shè)計(jì)師親切、注重作品品質(zhì)的特性表現(xiàn)的十分到位。jacquico是一家蛋糕機(jī)構(gòu)，其官網(wǎng)中以大量廚房中的蛋糕制作工具作為網(wǎng)站的圖形元素，手繪的線描表現(xiàn)形成獨(dú)特的識(shí)別度，突出了其蛋糕品牌的真實(shí)性與獨(dú)特性。該網(wǎng)站還采用了使用javascript 腳本實(shí)現(xiàn)的動(dòng)態(tài)及拖拽效果，手繪搭配拖拽動(dòng)態(tài)使得整個(gè)網(wǎng)站都鮮活起來。Artattackk是一家創(chuàng)意公司,其官網(wǎng)輕松活潑的手繪卡通圖形感覺將用戶帶入了創(chuàng)意無限的世界。再配上H5動(dòng)效，體現(xiàn)出該品牌的年輕與活力。Tfreak是一家涂鴉設(shè)計(jì)機(jī)構(gòu)，其官網(wǎng)就是直接將涂鴉繪畫作品搬上了網(wǎng)站，用戶一旦進(jìn)入網(wǎng)站就能感受到濃濃的涂鴉魅力。充滿創(chuàng)意性的手繪字體亦字亦圖，不規(guī)則的

6、圖形色塊都彰顯了無窮的視覺張力。8.4.1 復(fù)古歐美風(fēng)格的特點(diǎn) 8.4 復(fù)古西方風(fēng)格 復(fù)古風(fēng)格并非一味的模仿傳統(tǒng)元素，而是將古代元素適當(dāng)結(jié)合現(xiàn)代元素旨興起古代元素的新風(fēng)尚。復(fù)古西方風(fēng)格往往借助西方古典文化中適合且別致的圖形影像、文字字體、版式、配色等視聽元素來反映古代的社會(huì)習(xí)俗 ，文化風(fēng)尚等，從而表現(xiàn)出品牌在思想內(nèi)容和藝術(shù)形式方面的追求高品質(zhì)格。8.4.2 應(yīng)用及分析Ride是一家數(shù)字媒體設(shè)計(jì)公司，其官網(wǎng)采用了復(fù)古風(fēng)格，混搭的英文手寫體和無襯線字體，仿報(bào)紙的版式布局、版畫風(fēng)格的插畫再加上經(jīng)典的黑白配色，讓復(fù)古也變得既有韻味又時(shí)尚。波西米亞文學(xué)網(wǎng)選用了復(fù)古的視覺表現(xiàn)，旨在為對波西米亞文學(xué)感興趣的

7、人群宣傳波西米亞的文化魅力。泛黃的明信片、被腐蝕的硬幣被錯(cuò)落有致的疊放在一起，作舊的色調(diào)彌漫出復(fù)古的韻味。 Jolly duck是一家經(jīng)營彩旗制作及古董瓷器收藏的網(wǎng)站，其官網(wǎng)用一副聚餐的插畫作為背景，其復(fù)古的繪畫風(fēng)格，低純度的色調(diào)使得整個(gè)網(wǎng)站既有歷史感又不失時(shí)尚。8.5.1 中式傳統(tǒng)風(fēng)格特點(diǎn) 8.5 中式傳統(tǒng)風(fēng)格 中式傳統(tǒng)風(fēng)格是指以中國的傳統(tǒng)文化為基礎(chǔ)，研究該民族的視覺欣賞習(xí)慣和視覺審美心理，使其網(wǎng)頁設(shè)計(jì)展現(xiàn)出獨(dú)特的藝術(shù)個(gè)性。傳統(tǒng)風(fēng)格的網(wǎng)頁設(shè)計(jì)適合應(yīng)用于以傳統(tǒng)文化和藝術(shù)為主題的網(wǎng)站中，面向的目標(biāo)用戶是知識(shí)分子或喜歡古典設(shè)計(jì)風(fēng)格的人。8.5.2 應(yīng)用及分析故宮博物館官網(wǎng)選取了如意紋、這是一種吉祥

8、寓意紋樣，雷紋，以連續(xù)的方折回旋形線條構(gòu)成的幾何圖案，以二方連續(xù)的形式展開，烘托主題紋飾。頁面以畫軸的形式展現(xiàn)給用戶。8.6.1 立體風(fēng)格的特點(diǎn) 8.6 立體風(fēng)格 立體風(fēng)格就是通過光影、重疊的表現(xiàn)手法及最新的H5技術(shù)等，將傳統(tǒng)的二維網(wǎng)頁的設(shè)計(jì)成三維立體效果。如今很多設(shè)計(jì)師嘗試通過深度視覺來創(chuàng)作出擁有立體效果的網(wǎng)頁作品，顛覆網(wǎng)頁平面、靜止的形象，令網(wǎng)站界面變得更有趣，擁有更好的用戶體驗(yàn)。8.6.2 應(yīng)用及分析gardener and marks網(wǎng)是一個(gè)提供室內(nèi)設(shè)計(jì)及延伸服務(wù)的網(wǎng)站。網(wǎng)站以房間的一面墻作為背景營造了開闊的視覺享受，而各種家具擺放的前后位置及靠近的物體間的投影讓整個(gè)頁面立體感倍增。L

9、imbus設(shè)計(jì)工作室的官網(wǎng)也采用了立體風(fēng)格，透過二維的顯示器，我們看到界面已經(jīng)被分割成了多個(gè)立面空間。背景是一個(gè)白色的三維空間，網(wǎng)站運(yùn)用了javascript技術(shù)讓一個(gè)小人還在其中穿梭，而全局導(dǎo)航感覺浮在這個(gè)空間之上，且文字與圖片用陰影分開其前后關(guān)系，感覺創(chuàng)意無限。rainforest guardians網(wǎng)是一個(gè)公益類型的網(wǎng)站，它呼吁大家保護(hù)熱帶森林。當(dāng)打開首頁就被熱帶雨林的鳥瞰圖所震撼，拖拽鼠標(biāo)或滑動(dòng)鼠標(biāo)滾軸還能任意調(diào)整角度并走進(jìn)雨林的某個(gè)部落。8.7.1拼貼風(fēng)格的特點(diǎn) 8.7 拼貼風(fēng)格 拼貼藝術(shù)類似許久以前的剪報(bào)習(xí)慣：將照片或者印刷媒介上的新聞剪下并貼于筆記本上。拼貼設(shè)計(jì)是以斷裂、重組、融合等獨(dú)特的形式來表現(xiàn)主題，而在網(wǎng)頁設(shè)計(jì)中的實(shí)現(xiàn)則需要用到紙質(zhì)紋理，不規(guī)則背景圖形，疊加圖層等素材，再輔以涂鴉圖形及文字，網(wǎng)頁的整體就會(huì)顯得更加高端有層次感。8.7.2 應(yīng)用及分析 Dego是一家數(shù)字制作機(jī)構(gòu)，其某活動(dòng)頁面將創(chuàng)意比作一個(gè)令人興奮的旅行，視覺上采用了充滿趣味的拼貼風(fēng)格。每一處的不規(guī)則圖形都附上了紙紋肌理顯得界面穩(wěn)重大方，隨意的涂鴉圖文與其疊放在一起令整個(gè)網(wǎng)站的視覺形象十分突出。Lemoderne是一家法國餐廳，其官網(wǎng)以拼貼的剪貼畫形式將