圖片是產品經理在工作中必須遇到的內容。在一個網站中，我們一定需要用到圖片，也必須會涉及到圖片的交互。尤其在愈發追求視覺感官的今天，“圖文並茂”是很多網站的追求。
文章的前面部分會跟大家一起分析一下關於網站圖片的一些內容，後面部分將對結合小T同學做的案例，跟大家一起看看，在axure中，怎麼做網站圖片的交互。
1 網站圖片的類型
在圖片設計前，設計師最好能參考目前已有的網頁粗略佈局和欄目等，重新梳理列出網站中所需的圖片類型。比如，按照欄目和模塊對所需的圖片分類：Banner、業務介紹、產品介紹/展示、公司介紹、團隊介紹、新聞/資訊、客戶案例等。
咱們來看看一個常見的網站中，包括了哪些圖片吧。
看看首頁，上方是banner廣告位。這裏的圖片，通常放置的就是企業的主打產品、主打服務、推廣活動和熱門活動等。比如旅遊過年的活動。
在banner的下方，是旅遊地點的展示，採用的是圖、文結合的方式。如三亞，顯示三亞的風景圖片、三亞這個地點的名稱以及旅遊的價格。
大家有興趣可以到網站上仔細看看，還有哪些圖片。當然這個例子裏面的分類是適合這個產品的。根據產品的實際情況，最好是能夠選擇適合自己的圖片分類，而不是生搬硬套。
2 圖片的意圖
網站中的圖片不應僅做到吸引用戶的視線，而是通過吸引用戶的視線，更讓用戶通過視覺影像，準確感受到網站傳遞的信息。
實際上，網頁上的圖片不只是美麗的像素塊，所有的圖片都應該是有意圖的。瞭解圖片意圖，對設計師來說就是明確圖片的設計目標，這是非常重要的一步工作。
1、展現產品特點
在一個網站中，首屏對用戶的第一印象幾乎起決定作用，而Banner圖在首屏中所在的位置，決定了其重要性。尤其對於營銷型網站來說，Banner圖是一個最佳產品展示的位置。
比如大衆點評，banner圖的位置是以美食的圖片，讓用戶知道這個網站是以美食作爲主要的內容。同時也比較符合大衆對它的期待。
該案例的圖片意圖非常明確，和文字搭配在一起，既有宣傳、推廣產品的作用，又是一個引導用戶點擊參與的入口。
2、保持圖文相關
這個其實在上一點中的案例中也有具體體現。
通過左右分層，讓用戶在腦海中留下比較深刻的印象：左邊這個看起來很好吃的美食，是素食館的特色菜。看起來不像素菜，而是葷菜，而且很好吃的樣子，感覺很新奇。
圖文相關是設計中的一個基本原則。但大部分網站忽略了這一點，甚至導致信息不能正確傳遞、銷售機會減少等問題。
3、幫助人理解
公牛電器的網站中爲用戶展示的是公牛電器在客戶每一天生活中的位置，這個廣告是以動圖的形式展示出來，從早晨起牀到晚上睡覺，每天可以用公牛電器做什麼，以產品使用場景爲背景。
此處圖片經過專業拍攝和處理，清晰、乾淨，並且將原本需要一大段文字描述的信息，成功以“看圖說話”的方式直接向用戶展示，幫助用戶更好地理解產品。
4、塑造品牌
對用戶來說，高質量的大圖往往更受歡迎，風格統一的圖片既有視覺震撼力，又容易給人留下較深刻的印象，長久吸引用戶注意力。
成功品牌可以在很久之後，通過視覺上的獨特，喚起人潛意識裏的印象，讓用戶聯想到該品牌。
3 網站圖片的交互
這部分的內容我將會結合小T同學的學習成果來和大家一起看看，有什麼樣的圖片交互，以及，這個交互可以怎麼做。
1、banner輪播圖
這個相信大家這個都不陌生了，在以前的文章中也有詳細的寫到輪播圖的製作方法，這裏就不再多說了，大家有興趣可以去看看之前的一些視頻。
這裏給大家提醒一下，輪播圖用動態面板製作是比較簡單也有效的選擇。
2、鼠標移入，圖片發生變化，顯示圖片指示文字。
這是鼠標移入前後的不同顯示。鼠標移入後，圖片有明顯的變化，並且圖片上出現了圖片的指示文字，即這張圖片所代表的是什麼內容。
這個做法很簡單，小T同學是在原圖片上加了一個矩形，輸入了文字。最主要的是，將矩形的顏色設置好之後調整了它的透明度，給原圖片加了一層陰影。鼠標移入時將陰影顯示，移出則隱藏，就達到這個交互效果了。
3、鼠標移入圖片，在原圖片的左側或者右側顯示圖片信息
一樣先看看移入移出的效果對比。鼠標移入圖片，在原圖片的左側或者右側顯示圖片信息，並且圖片信息的顯示一般是在上層，會將原來的部分信息遮蓋住。
這裏的做法跟第二種交互一樣，小T同學也是採用了簡單的顯示隱藏去做。在這種數量較少的情況下，這種方法容易理解也易於操作。
4、選擇展示圖片
這種圖片的交互，在商品的選擇購買頁面中特別常見，鼠標選擇左側的小圖，右側的大圖將會切換成相對應的圖片。
小T同學完成這個交互，這裏就不是用他常用的顯示隱藏去做了。這一次，他採用了一個其他的方法——動態面板。大圖是由動態面板製作的，事先將商品的大圖都放置在不同的狀態中。
小T同學設置了，在點擊小圖時，大圖這個動態面板的狀態進行切換，切換到和小圖一致的狀態上來。這樣就完成了展示圖片的選擇。
本文中我們簡單討論了網站圖片，並結合了小T同學的學習成果，給大家展示了集中網站圖片的交互效果，當然，小T同學做的效果中可能沒有你遇到的那一種。如果您有不同的交互，歡迎一起來探討。對於小T同學的做法，您如果有不同的意見，也歡迎在評論區留下您的寶貴意見。