如何使用網頁設計中的圖片敘事
網頁的信息主要分為兩類，一類是文字等需要人類大腦的語言系統去處理的語言信息，另一類就是以圖片為主的視覺信息。那么本文將為大家介紹運用圖片進行敘事的要義，歡迎閱讀!
自人類歷史起源之初，故事就在我們的溝通中扮演著極大的角色。僅僅因為我們對著屏幕講述故事而非幾千年前圍坐篝火，但其故事的感染力都始終未變。最有意思的是，故事的聽眾不再一字一句盡收耳中，因為這些“聽眾”(從某種意義上，他們也是用戶)能通過導航按鈕等動作掌控整個講述的流程和節奏。
網頁的信息主要分為兩類，一類是文字等需要人類大腦的語言系統去處理的語言信息，另一類就是以圖片為主的視覺信息。如今的網頁已經被認定為一個承載各種視覺信息的媒體，盡管網頁也展示大量的文字信息，但隨著網速提升，視覺的媒介例如圖片、視頻等慢慢占據了我們的屏幕。一個沒有圖片的網站看上去毫無生命力可言，也一定會被忽略。相反，配圖美觀，豐富的動畫交互的網頁就成為視覺焦點。
視覺敘事為網頁設計創建了目標，它將各種復雜的設計方案進行提純成一個簡單的戲劇性的沖突演進的故事，這個故事極易被用戶所接受。沒有好的視覺敘事的表達能力，你的網頁將沒有潛力可挖掘。
一圖勝千言
我們聽過一句古語叫做“一圖勝千言”。但是你是否知道這背后潛藏的科學依據?有一個理論叫做“圖優效應”(Picture superiority effect)，它的意思是圖片是比文字載體更易被記憶的，同樣內容用圖片傳達的信息是文字的6倍。由于圖片可以同時從兩個維度，即語言和圖像方面傳遞信息，因此它使得人腦更易于編碼和記憶。
既然知道圖片的重要性，那么，在使用圖片的過程中有幾點不得不引起我們的注意：
1、在一個網站中使用風格協調統一的圖片，但是它們的內容展示要有所區別，才能表達出網頁中不同的層次。
在我們設計輕網站PANNEY(點擊演示)的時候，木工藝術的素材材質看上去接近自然木色，因此整體都以自然原木色作為統一的色調，與此同時，每張全屏大圖表現不同的內容層次，搭配不同的文字內容。每個屏幕展示一張大圖的同時也展示一小部分下一張圖片，作為提醒下一步的操作極為重要。
2、不要在你的圖片里重復同一個概念，試著將概念聯系起來串成線，成為一種敘事。
輕網站HATHOR(點擊演示)在設計時，我們就考慮用一個引導頁作為故事起點，有點像一本書的封面。一個小小的箭頭ICON在左下角提醒讀者進入“正文”
我們拿出了四個概念，四個概念分別用不同的配圖，就像敘事一樣對網站的“性格特征”進行描述。這里我放2張配圖在這里，大家可以點擊進入演示觀賞。
3、如果要在圖片中使用到模特，這些模特也需要在你貫穿故事始終的同時保持一致。這里所謂的一致并非是指需要他們都是同一個對象，而是指不要讓他們好像從不同的世界走來一樣。
輕網站THOTH(點擊演示)的設計思路就是如此，出現的模特出現在同一個頁面，裝扮是統一風格的造型，采用豎型排列才會顯得不沖突。
來到這個網站的首頁是品牌的大型標志，占據首屏，點擊進入后才來到一排好像櫥窗一樣的當鼠標滑過某一張圖片，這張圖片的色調變亮，就像櫥窗的玻璃滑開，文字消失，引導用戶進一步點擊進入。這個故事并非橫向，而是縱向深入的。最后直達深入到圖片背后的產品理念。
4、雖然是以圖片來進行敘事，但是這也并不意味著你就不能使用文字，文字作為輔助可以加強敘事的表達和理解。
輕網站ATHENA(點擊演示)的圖文比例剛好是屏幕的一半，除了展示圖片，更突出文字，文字采用的不同色彩的純色背景，而圖片則是較為淡雅的灰白色系和簡潔的表達，此時，圖片變成了配角。
每一頁之間都采用兩兩相襯的色彩，讓每一頁都相互聯系而不至于孤立起來。
輕網站MEROPE(點擊演示)的圖文展示則是圖片為主要焦點，但同時出現文字這個次要的焦點。有點像一張照片旁邊貼出的一張便簽的說明。圖文相互配合，共同營造出“舒適”“溫暖”這類氛圍，加強整個木質家私帶來的居家的溫馨感。
5、盡量運用簡潔而具有沖擊力的圖片，這里所謂簡潔和沖擊力其實就是在整個屏幕只保留唯一一個視覺焦點。
輕網站NIREUS(點擊演示)這里所用的就是這樣一個技巧，每張圖片只展示人物的面部表情，通過這種清晰地透徹的表達，讓你和模特的距離拉得更近，再在黑白人物之上疊上一層透明色彩，略微遮住人物，又讓你和模特之間永遠隔著一種距離。似遠似近，給這份距離帶來張力。
影像之速
用戶的注意力總是有限的，通常在10秒以內，一個人就能判斷這個網站是否值得繼續瀏覽。如果這時過多的文字信息就會讓用戶望而卻步，懶于閱讀而離開。當有人來到你的網站看到的是圖片并能立即判斷網頁的大致內容時，這不僅為用戶節省了精力和時間，也為他們繼續瀏覽創造了機會。
比如輕網站SEAWEE(點擊演示)在設計之初，我們就想要做一個讓用戶一來到這個網站就能飽覽全局的頁面，同時又不離開單一的視覺焦點。這不僅要保持簡潔，同時又要展示足夠多的信息。聽上去是個兩難困境。于是，我們采用了動畫的方式來解決，左右各設置一個箭頭，一個指向前，一個指向后，分別在鼠標滑過時展示出前后三張圖片，讓你能通過移動鼠標就能大致了解所有圖片的大致樣式。
根據這個理念，我們又設計了另一個網站，輕網站DEMETER(點擊演示)是另一種類型的畫廊，而它是一個非常典型的畫廊，它是按照圖片排成一行的集合形式出現，而且點擊左右按鈕就能讓它往橫向滑動。這讓用戶在第一時間就會瀏覽到這個畫廊里的所有內容，然后進一步選擇需要查看的圖片。
【如何使用網頁設計中的圖片敘事】相關文章：
網頁設計中的圖片使用技巧03-06
網頁設計中圖片的使用技巧11-08
如何在網頁設計中使用圖片11-12
在網頁設計中圖片常見的使用技巧03-12
網頁設計中圖片的使用基本原則02-07
網頁設計中圖片有哪些常見的使用技巧02-18
網頁設計圖片的使用技巧08-06
網頁大圖片如何設計02-11
如何使用Dreamweaver設計網頁02-10