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

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

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

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

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

網(wǎng)站標(biāo)題：印象：網(wǎng)頁設(shè)計(jì)中的圖片敘事
本文來源：http://muchs.cn/news/167248.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、云服務(wù)器、動態(tài)網(wǎng)站、ChatGPT、面包屑導(dǎo)航

廣告

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