]]>



























































]]>































via: Kommigraphics
]]>那么,一個(gè)網(wǎng)頁(yè)呈現(xiàn)給用戶的內(nèi)容有哪些呢?
一般來(lái)講,只要是用戶感官可辨的部分都可以看做網(wǎng)頁(yè)內(nèi)容。用戶可以通過(guò)閱讀、觀看、聆聽(tīng)以及交互等方式,和網(wǎng)頁(yè)產(chǎn)生互動(dòng),因此,網(wǎng)頁(yè)內(nèi)容也成為影響用戶體驗(yàn)的一個(gè)重要部分。
一個(gè)完整的網(wǎng)頁(yè),主要包含有以下內(nèi)容:
今天,我們要談?wù)摰闹黝}是網(wǎng)頁(yè)圖片。
圖片的作用絕不僅僅在于提升界面美觀度,在用戶體驗(yàn)設(shè)計(jì)中,圖片對(duì)提升設(shè)計(jì)可用性也起著重要作用。人都是視覺(jué)動(dòng)物,天生對(duì)圖像有偏愛(ài),對(duì)圖像的感知速度也遠(yuǎn)遠(yuǎn)超過(guò)文字,在Wayback Machine的研究中,人類感知圖像的速度比感知文本要快60,000倍。因此,當(dāng)我們看到一個(gè)網(wǎng)頁(yè)時(shí),圖像也就成了我們最先感知的元素。
圖片之所以如此重要,還有更多原因:
現(xiàn)今,網(wǎng)頁(yè)設(shè)計(jì)中最常見(jiàn)的圖片一共有5種類型,分別是logo、照片、插圖、卡通人物(吉祥物)以及3D渲染圖片,每種類型都有自己的特色,我們將逐一分析。
Logo代表著品牌,是一種象征性的視覺(jué)元素,它向用戶傳達(dá)公司理念、品牌、服務(wù)等信息。Logo在如今的網(wǎng)頁(yè)設(shè)計(jì)中幾乎是不可或缺的,甚至一些個(gè)人博客和作品集網(wǎng)站也會(huì)使用logo。
在網(wǎng)頁(yè)設(shè)計(jì)中,使用logo時(shí)有哪些小技巧?

這是一個(gè)虛擬貨幣服務(wù)網(wǎng)站的著陸頁(yè)面設(shè)計(jì),在logo元素上添加了強(qiáng)烈的交互效果,可以帶來(lái)豐富的視覺(jué)感和趣味性。
在網(wǎng)頁(yè)設(shè)計(jì)中,照片是非常重要的視覺(jué)元素。照片不僅可以在很大程度上提升界面的美觀度,也是網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用場(chǎng)景最多的元素之一。
網(wǎng)頁(yè)設(shè)計(jì)中,照片的使用主要有以下幾種類型:
照片的最大優(yōu)點(diǎn)是可以建立聯(lián)系,幫助用戶將其在網(wǎng)頁(yè)上看到的內(nèi)容與現(xiàn)實(shí)世界聯(lián)系起來(lái)。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)很久之前,照片就已經(jīng)成為人類現(xiàn)實(shí)生活的一部分,因此,用戶對(duì)于照片的感知是一種更原生、更親密、更清晰的感知。


此外,攝影也是一種藝術(shù),在網(wǎng)頁(yè)中使用攝影照片,可以讓網(wǎng)頁(yè)看上去更真實(shí)、更具美感,從而達(dá)到一種藝術(shù)和現(xiàn)實(shí)的平衡。當(dāng)然,使用優(yōu)質(zhì)照片做設(shè)計(jì),也有助于設(shè)計(jì)師形成自己的風(fēng)格。

工藝品網(wǎng)站,使用照片展示商品原貌,所謂“所見(jiàn)即所得”
設(shè)計(jì)師如何獲取優(yōu)質(zhì)照片元素?
推薦幾個(gè)比較好的素材網(wǎng)站:

在網(wǎng)頁(yè)設(shè)計(jì)中使用照片時(shí),要注意以下問(wèn)題:
使用整幅照片作為首屏大背景是近年流行的設(shè)計(jì)手法,這種方法可以讓網(wǎng)頁(yè)在視覺(jué)和情感上都更具吸引力,并支持頁(yè)面所有布局元素的完整性。此外,相較于單色背景,它還可以提升元素間的對(duì)比度和易讀性。?

插圖是近幾年流行的另一大網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì),設(shè)計(jì)師可以根據(jù)需求自定義制作插圖,幫助用戶快速感知網(wǎng)頁(yè)信息。插圖為視覺(jué)創(chuàng)意奠定了堅(jiān)實(shí)的基礎(chǔ),不僅可以增加頁(yè)面美感,更可以拓寬藝術(shù)家的創(chuàng)作視野。
如今,插圖被廣泛運(yùn)用于:
我們來(lái)看一些例子。
這是一個(gè)關(guān)于宣傳設(shè)計(jì)會(huì)議的著陸頁(yè),使用了插圖和設(shè)計(jì)師照片相結(jié)合的方式展示圖像信息,創(chuàng)意十足。

這是一個(gè)設(shè)計(jì)師的作品集網(wǎng)站,該設(shè)計(jì)師專門(mén)研究名人,娛樂(lè),音樂(lè)和電影制作等主題相關(guān)的項(xiàng)目。暗色背景與定制的hero插圖相結(jié)合,具有強(qiáng)烈的視覺(jué)沖擊力,生動(dòng)活潑,并與音樂(lè)會(huì)舞臺(tái)的氣氛建立了聯(lián)系。

這是一家數(shù)字代理商的登錄頁(yè)面,該機(jī)構(gòu)想要傳達(dá)拼搏奮進(jìn)的公司理念,使用了灌籃主題的插圖,將球員在球場(chǎng)上努力奮斗的姿態(tài)和其不斷實(shí)現(xiàn)業(yè)務(wù)目標(biāo)的愿景建立了聯(lián)系。

這是一家為用戶提供營(yíng)銷服務(wù)的公司,該落地頁(yè)使用插圖來(lái)創(chuàng)造用戶場(chǎng)景,通過(guò)給用戶講故事的方式傳達(dá)出他們的服務(wù)和優(yōu)勢(shì)。

?
吉祥物是一個(gè)人格化的形象,它可以代表品牌、公司、某種服務(wù)等,甚至可以成為公眾人物的象征。
在網(wǎng)頁(yè)用戶界面中,吉祥物可以有效充當(dāng)溝通和互動(dòng)的視覺(jué)元素。比如,可以通過(guò)更改其外觀(例如心情、衣服、活動(dòng)等),快速向用戶傳遞清晰的消息。吉祥物以一個(gè)“人”的形象,可以直接通過(guò)氣泡框與用戶交流;也可以提供各種面部表情作為視覺(jué)提示,以不同的圖像變化反映用戶心情;還可以在教程中引導(dǎo)用戶等等??傊?,通過(guò)吉祥物這一擬人化的形象,用戶和系統(tǒng)的交互會(huì)更像人與人之間的交流,從而很好地提升了用戶體驗(yàn)。
這是一個(gè)兒童書(shū)籍的電子商務(wù)網(wǎng)站,該落地頁(yè)面使用了圣誕老公公閱讀這一形象,鼓勵(lì)小朋友和圣誕爺爺一起閱讀。

這是一個(gè)家政服務(wù)公司頁(yè)面,使用了一個(gè)擬物化的保姆形象。

?
3D渲染也是近年比較流行的設(shè)計(jì)趨勢(shì)。通過(guò)3D軟件建模從而渲染出超高品質(zhì)的2D圖像,甚至可以制作出電影級(jí)的動(dòng)畫(huà)影像,給與用戶驚艷的視覺(jué)感受,對(duì)網(wǎng)頁(yè)的轉(zhuǎn)化率具有非常強(qiáng)烈的推動(dòng)力。
這是一家建筑工作室的網(wǎng)站,該公司利用太陽(yáng)能來(lái)設(shè)計(jì)和建造可持續(xù)發(fā)展的房屋。 3D渲染的模型讓用戶能看到房屋的真實(shí)場(chǎng)景,還可以切換白天和黑夜模式查看。

這是一家設(shè)計(jì)工作室的網(wǎng)站,該機(jī)構(gòu)專門(mén)從事可視化室外設(shè)計(jì)和室內(nèi)設(shè)計(jì)。該網(wǎng)站的頁(yè)面渲染了高質(zhì)量3D圖形,幾乎占據(jù)了所有背景區(qū)域,非常巧妙地突出了他們的服務(wù)。

這是一家購(gòu)票網(wǎng)站,使用3D圖形作為主題圖像,該圖像占據(jù)了頁(yè)面的左側(cè)部分,體現(xiàn)了旅游的主題,定制的元素巧妙融入了品牌的黃色,大大提升整個(gè)頁(yè)面的設(shè)計(jì)感和品牌感。
?
雖然設(shè)計(jì)不僅僅是做產(chǎn)品視覺(jué)表象的表達(dá),但人都是視覺(jué)動(dòng)物,這一點(diǎn)無(wú)法否認(rèn),所以好的設(shè)計(jì)更應(yīng)該能從表象就深深吸引住用戶,因?yàn)橹挥泻每吹慕缑?,才有更大的機(jī)會(huì)吸引用戶去深入了解更多。圖像是提升界面質(zhì)量的重要元素,希望以上的內(nèi)容,可以幫助你設(shè)計(jì)出更加出色的網(wǎng)頁(yè)。
??
原文地址:Mockplus