印象：網(wǎng)頁(yè)設(shè)計(jì)中的圖片敘事

自人類(lèi)歷史起源之初，故事就在我們的溝通中扮演著極大的角色。僅僅因?yàn)槲覀儗?duì)著屏幕講述故事而非幾千年前圍坐篝火，但其故事的感染力都始終未變。最有意思的是，故事的聽(tīng)眾不再一字一句盡收耳中，因?yàn)檫@些“聽(tīng)眾”（從某種意義上，他們也是用戶(hù)）能通過(guò)導(dǎo)航按鈕等動(dòng)作掌控整個(gè)講述的流程和節(jié)奏。
企業(yè)網(wǎng)頁(yè)制作的信息主要分為兩類(lèi)，一類(lèi)是文字等需要人類(lèi)大腦的語(yǔ)言系統(tǒng)去處理的語(yǔ)言信息，另一類(lèi)就是以圖片為主的視覺(jué)信息。如今的網(wǎng)頁(yè)已經(jīng)被認(rèn)定為一個(gè)承載各種視覺(jué)信息的媒體，盡管網(wǎng)頁(yè)也展示大量的文字信息，但隨著網(wǎng)速提升，視覺(jué)的媒介例如圖片、視頻等慢慢占據(jù)了我們的屏幕。一個(gè)沒(méi)有圖片的網(wǎng)站看上去毫無(wú)生命力可言，也一定會(huì)被忽略。相反，配圖美觀，豐富的動(dòng)畫(huà)交互的網(wǎng)頁(yè)就成為視覺(jué)焦點(diǎn)。
視覺(jué)敘事為成都網(wǎng)站設(shè)計(jì)公司設(shè)計(jì)創(chuàng)建了目標(biāo)，它將各種復(fù)雜的設(shè)計(jì)方案進(jìn)行提純成一個(gè)簡(jiǎn)單的戲劇性的沖突演進(jìn)的故事，這個(gè)故事極易被用戶(hù)所接受。沒(méi)有好的視覺(jué)敘事的表達(dá)能力，你的網(wǎng)頁(yè)將沒(méi)有潛力可挖掘。
我們聽(tīng)過(guò)一句古語(yǔ)叫做“一圖勝千言”。但是你是否知道這背后潛藏的科學(xué)依據(jù)？有一個(gè)理論叫做“圖優(yōu)效應(yīng)”（Picture superiority effect），它的意思是圖片是比文字載體更易被記憶的，同樣內(nèi)容用圖片傳達(dá)的信息是文字的6倍。由于圖片可以同時(shí)從兩個(gè)維度，即語(yǔ)言和圖像方面?zhèn)鬟f信息，因此它使得人腦更易于編碼和記憶。
既然知道圖片的重要性，那么，在使用圖片的過(guò)程中有幾點(diǎn)不得不引起我們的注意：
1、在一個(gè)高端網(wǎng)站建設(shè)網(wǎng)站中使用風(fēng)格協(xié)調(diào)統(tǒng)一的圖片，但是它們的內(nèi)容展示要有所區(qū)別，才能表達(dá)出網(wǎng)頁(yè)中不同的層次。
在我們?cè)O(shè)計(jì)輕網(wǎng)站PANNEY（點(diǎn)擊演示）的時(shí)候，木工藝術(shù)的素材材質(zhì)看上去接近自然木色，因此整體都以自然原木色作為統(tǒng)一的色調(diào)，與此同時(shí)，每張全屏大圖表現(xiàn)不同的內(nèi)容層次，搭配不同的文字內(nèi)容。每個(gè)屏幕展示一張大圖的同時(shí)也展示一小部分下一張圖片，作為提醒下一步的操作極為重要。
2、不要在你的圖片里重復(fù)同一個(gè)概念，試著將概念聯(lián)系起來(lái)串成線(xiàn)，成為一種敘事。
輕網(wǎng)站HATHOR（點(diǎn)擊演示）在設(shè)計(jì)時(shí)，我們就考慮用一個(gè)引導(dǎo)頁(yè)作為故事起點(diǎn)，有點(diǎn)像一本書(shū)的封面。一個(gè)小小的箭頭ICON在左下角提醒讀者進(jìn)入“正文”我們拿出了四個(gè)概念，四個(gè)概念分別用不同的配圖，就像敘事一樣對(duì)網(wǎng)站的“性格特征”進(jìn)行描述。這里我放2張配圖在這里，大家可以點(diǎn)擊進(jìn)入演示觀賞。
3、如果要在圖片中使用到模特，這些模特也需要在你貫穿故事始終的同時(shí)保持一致。這里所謂的一致并非是指需要他們都是同一個(gè)對(duì)象，而是指不要讓他們好像從不同的世界走來(lái)一樣。輕網(wǎng)站THOTH（點(diǎn)擊演示）的設(shè)計(jì)思路就是如此，出現(xiàn)的模特出現(xiàn)在同一個(gè)頁(yè)面，裝扮是統(tǒng)一風(fēng)格的造型，采用豎型排列才會(huì)顯得不沖突。來(lái)到這個(gè)網(wǎng)站的首頁(yè)是品牌的大型標(biāo)志，占據(jù)首屏，點(diǎn)擊進(jìn)入后才來(lái)到一排好像櫥窗一樣的當(dāng)鼠標(biāo)滑過(guò)某一張圖片，這張圖片的色調(diào)變亮，就像櫥窗的玻璃滑開(kāi)，文字消失，引導(dǎo)用戶(hù)進(jìn)一步點(diǎn)擊進(jìn)入。這個(gè)故事并非橫向，而是縱向深入的。最后直達(dá)深入到圖片背后的產(chǎn)品理念。
4、雖然是以圖片來(lái)進(jìn)行敘事，但是這也并不意味著你就不能使用文字，文字作為輔助可以加強(qiáng)敘事的表達(dá)和理解。
輕網(wǎng)站ATHENA（點(diǎn)擊演示）的圖文比例剛好是屏幕的一半，除了展示圖片，更突出文字，文字采用的不同色彩的純色背景，而圖片則是較為淡雅的灰白色系和簡(jiǎn)潔的表達(dá)，此時(shí)，圖片變成了配角。每一頁(yè)之間都采用兩兩相襯的色彩，讓每一頁(yè)都相互聯(lián)系而不至于孤立起來(lái)。
輕網(wǎng)站MEROPE（點(diǎn)擊演示）的圖文展示則是圖片為主要焦點(diǎn)，但同時(shí)出現(xiàn)文字這個(gè)次要的焦點(diǎn)。有點(diǎn)像一張照片旁邊貼出的一張便簽的說(shuō)明。圖文相互配合，共同營(yíng)造出“舒適”“溫暖”這類(lèi)氛圍，加強(qiáng)整個(gè)木質(zhì)家私帶來(lái)的居家的溫馨感。
5、盡量運(yùn)用簡(jiǎn)潔而具有沖擊力的圖片，這里所謂簡(jiǎn)潔和沖擊力其實(shí)就是在整個(gè)屏幕只保留唯一一個(gè)視覺(jué)焦點(diǎn)。輕網(wǎng)站NIREUS（點(diǎn)擊演示）這里所用的就是這樣一個(gè)技巧，每張圖片只展示人物的面部表情，通過(guò)這種清晰地透徹的表達(dá)，讓你和模特的距離拉得更近，再在黑白人物之上疊上一層透明色彩，略微遮住人物，又讓你和模特之間永遠(yuǎn)隔著一種距離。似遠(yuǎn)似近，給這份距離帶來(lái)張力。

用戶(hù)的注意力總是有限的，通常在10秒以?xún)?nèi)，一個(gè)人就能判斷這個(gè)網(wǎng)站是否值得繼續(xù)瀏覽。如果這時(shí)過(guò)多的文字信息就會(huì)讓用戶(hù)望而卻步，懶于閱讀而離開(kāi)。當(dāng)有人來(lái)到你的網(wǎng)站看到的是圖片并能立即判斷網(wǎng)頁(yè)的大致內(nèi)容時(shí)，這不僅為用戶(hù)節(jié)省了精力和時(shí)間，也為他們繼續(xù)瀏覽創(chuàng)造了機(jī)會(huì)。

比如輕網(wǎng)站SEAWEE（點(diǎn)擊演示）在設(shè)計(jì)之初，我們就想要做一個(gè)讓用戶(hù)一來(lái)到這個(gè)成都網(wǎng)站設(shè)計(jì)就能飽覽全局的頁(yè)面，同時(shí)又不離開(kāi)單一的視覺(jué)焦點(diǎn)。這不僅要保持簡(jiǎn)潔，同時(shí)又要展示足夠多的信息。聽(tīng)上去是個(gè)兩難困境。于是，我們采用了動(dòng)畫(huà)的方式來(lái)解決，左右各設(shè)置一個(gè)箭頭，一個(gè)指向前，一個(gè)指向后，分別在鼠標(biāo)滑過(guò)時(shí)展示出前后三張圖片，讓你能通過(guò)移動(dòng)鼠標(biāo)就能大致了解所有圖片的大致樣式。
根據(jù)這個(gè)理念，我們又設(shè)計(jì)了另一個(gè)網(wǎng)站，輕網(wǎng)站DEMETER（點(diǎn)擊演示）是另一種類(lèi)型的畫(huà)廊，而它是一個(gè)非常典型的畫(huà)廊，它是按照?qǐng)D片排成一行的集合形式出現(xiàn)，而且點(diǎn)擊左右按鈕就能讓它往橫向滑動(dòng)。這讓用戶(hù)在第一時(shí)間就會(huì)瀏覽到這個(gè)畫(huà)廊里的所有內(nèi)容，然后進(jìn)一步選擇需要查看的圖片。

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：企業(yè)網(wǎng)頁(yè)制作,成都網(wǎng)站設(shè)計(jì)公司,高端網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計(jì)

網(wǎng)站名稱(chēng)：印象：網(wǎng)頁(yè)設(shè)計(jì)中的圖片敘事
文章位置：http://muchs.cn/news48/167248.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、響應(yīng)式網(wǎng)站、微信小程序、網(wǎng)站導(dǎo)航、建站公司、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)