Lee Odden曾說過“Content isn’t King, it’s the Kingdom”,內容為王已然是毋庸置疑的真理。在網頁設計中也一樣,內容本身一定是占據最多版麵的部分,所以它的質量很大程度上決定網頁最終的效果和成敗。
那麼,一個網頁呈現給用戶的內容有哪些呢?
一般來講,隻要是用戶感官可辨的部分都可以看做網頁內容。用戶可以通過閱讀、觀看、聆聽以及交互等方式,和網頁產生互動,因此,網頁內容也成為影響用戶體驗的一個重要部分。
一個完整的網頁,主要包含有以下內容:
今天,我們要談論的主題是網頁圖片。
圖片的作用絕不僅僅在於提升界麵美觀度,在用戶體驗設計中,圖片對提升設計可用性也起著重要作用。人都是視覺動物,天生對圖像有偏愛,對圖像的感知速度也遠遠超過文字,在Wayback Machine的研究中,人類感知圖像的速度比感知文本要快60,000倍。因此,當我們看到一個網頁時,圖像也就成了我們最先感知的元素。
圖片之所以如此重要,還有更多原因:
現今,網頁設計中最常見的圖片一共有5種類型,分別是logo、照片、插圖、卡通人物(吉祥物)以及3D渲染圖片,每種類型都有自己的特色,我們將逐一分析。
Logo代表著品牌,是一種象征性的視覺元素,它向用戶傳達公司理念、品牌、服務等信息。Logo在如今的網頁設計中幾乎是不可或缺的,甚至一些個人博客和作品集網站也會使用logo。
在網頁設計中,使用logo時有哪些小技巧?
這是一個虛擬貨幣服務網站的著陸頁麵設計,在logo元素上添加了強烈的交互效果,可以帶來豐富的視覺感和趣味性。
在網頁設計中,照片是非常重要的視覺元素。照片不僅可以在很大程度上提升界麵的美觀度,也是網頁設計中運用場景最多的元素之一。
網頁設計中,照片的使用主要有以下幾種類型:
照片的最大優點是可以建立聯係,幫助用戶將其在網頁上看到的內容與現實世界聯係起來。其實早在互聯網出現很久之前,照片就已經成為人類現實生活的一部分,因此,用戶對於照片的感知是一種更原生、更親密、更清晰的感知。
此外,攝影也是一種藝術,在網頁中使用攝影照片,可以讓網頁看上去更真實、更具美感,從而達到一種藝術和現實的平衡。當然,使用優質照片做設計,也有助於設計師形成自己的風格。
工藝品網站,使用照片展示商品原貌,所謂“所見即所得”
設計師如何獲取優質照片元素?
推薦幾個比較好的素材網站:
在網頁設計中使用照片時,要注意以下問題:
使用整幅照片作為首屏大背景是近年流行的設計手法,這種方法可以讓網頁在視覺和情感上都更具吸引力,並支持頁麵所有布局元素的完整性。此外,相較於單色背景,它還可以提升元素間的對比度和易讀性。
插圖是近幾年流行的另一大網頁設計趨勢,設計師可以根據需求自定義製作插圖,幫助用戶快速感知網頁信息。插圖為視覺創意奠定了堅實的基礎,不僅可以增加頁麵美感,更可以拓寬藝術家的創作視野。
如今,插圖被廣泛運用於:
我們來看一些例子。
這是一個關於宣傳設計會議的著陸頁,使用了插圖和設計師照片相結合的方式展示圖像信息,創意十足。
這是一個設計師的作品集網站,該設計師專門研究名人,娛樂,音樂和電影製作等主題相關的項目。暗色背景與定製的hero插圖相結合,具有強烈的視覺衝擊力,生動活潑,並與音樂會舞台的氣氛建立了聯係。
這是一家數字代理商的登錄頁麵,該機構想要傳達拚搏奮進的公司理念,使用了灌籃主題的插圖,將球員在球場上努力奮鬥的姿態和其不斷實現業務目標的願景建立了聯係。
這是一家為用戶提供營銷服務的公司,該落地頁使用插圖來創造用戶場景,通過給用戶講故事的方式傳達出他們的服務和優勢。
吉祥物是一個人格化的形象,它可以代表品牌、公司、某種服務等,甚至可以成為公眾人物的象征。
在網頁用戶界麵中,吉祥物可以有效充當溝通和互動的視覺元素。比如,可以通過更改其外觀(例如心情、衣服、活動等),快速向用戶傳遞清晰的消息。吉祥物以一個“人”的形象,可以直接通過氣泡框與用戶交流;也可以提供各種麵部表情作為視覺提示,以不同的圖像變化反映用戶心情;還可以在教程中引導用戶等等。總之,通過吉祥物這一擬人化的形象,用戶和係統的交互會更像人與人之間的交流,從而很好地提升了用戶體驗。
這是一個兒童書籍的電子商務網站,該落地頁麵使用了聖誕老公公閱讀這一形象,鼓勵小朋友和聖誕爺爺一起閱讀。
這是一個家政服務公司頁麵,使用了一個擬物化的保姆形象。
3D渲染也是近年比較流行的設計趨勢。通過3D軟件建模從而渲染出超高品質的2D圖像,甚至可以製作出電影級的動畫影像,給與用戶驚豔的視覺感受,對網頁的轉化率具有非常強烈的推動力。
這是一家建築工作室的網站,該公司利用太陽能來設計和建造可持續發展的房屋。 3D渲染的模型讓用戶能看到房屋的真實場景,還可以切換白天和黑夜模式查看。
這是一家設計工作室的網站,該機構專門從事可視化室外設計和室內設計。該網站的頁麵渲染了高質量3D圖形,幾乎占據了所有背景區域,非常巧妙地突出了他們的服務。
這是一家購票網站,使用3D圖形作為主題圖像,該圖像占據了頁麵的左側部分,體現了旅遊的主題,定製的元素巧妙融入了品牌的黃色,大大提升整個頁麵的設計感和品牌感。
雖然設計不僅僅是做產品視覺表象的表達,但人都是視覺動物,這一點無法否認,所以好的設計更應該能從表象就深深吸引住用戶,因為隻有好看的界麵,才有更大的機會吸引用戶去深入了解更多。圖像是提升界麵質量的重要元素,希望以上的內容,可以幫助你設計出更加出色的網頁。
原文地址:Mockplus
色彩的魔力!烏克蘭116平裝修設計2020-04-01
配色優雅的幾何圖案:2包裝設計2020-03-04
比利時Vandewiele集團總部辦辦公空間2020-03-04
藝術氣質的字體和版式 日海報設計2020-02-24
真愛無界 大愛無疆:特別海報設計2020-02-14
50款企業logo設計佳作欣賞標志設計2020-01-29
日式美學,克製之心與樸文章2020-04-13
微信的設計之道·用戶體驗文章2020-04-11
淺析如何設計交互缺省頁文章2020-04-11
這座網頁設計博物館,讓文章2020-04-08
被你忽略的投影,實用性文章2020-04-04
解鎖新姿勢!你所不知道文章2020-04-02