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

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

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

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

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

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

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

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

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

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