圖片是產(chǎn)品經(jīng)理在工作中必須遇到的內(nèi)容。在一個(gè)網(wǎng)站中，我們一定需要用到圖片，也必須會(huì)涉及到圖片的交互。尤其在愈發(fā)追求視覺感官的今天，“圖文并茂”是很多網(wǎng)站的追求。

?

文章的前面部分會(huì)跟大家一起分析一下關(guān)于網(wǎng)站圖片的一些內(nèi)容，后面部分將對結(jié)合小T同學(xué)做的案例，跟大家一起看看，在axure中，怎么做網(wǎng)站圖片的交互。

?

1、網(wǎng)站圖片的類型

在圖片設(shè)計(jì)前，設(shè)計(jì)師最好能參考目前已有的網(wǎng)頁粗略布局和欄目等，重新梳理列出網(wǎng)站中所需的圖片類型。比如，按照欄目和模塊對所需的圖片分類：Banner、業(yè)務(wù)介紹、產(chǎn)品介紹/展示、公司介紹、團(tuán)隊(duì)介紹、新聞/資訊、客戶案例等。

?

咱們來看看一個(gè)常見的網(wǎng)站中，包括了哪些圖片吧。

?

?

看看首頁，上方是banner廣告位。這里的圖片，通常放置的就是企業(yè)的主打產(chǎn)品、主打服務(wù)、推廣活動(dòng)和熱門活動(dòng)等。比如旅游過年的活動(dòng)。

?

在banner的下方，是旅游地點(diǎn)的展示，采用的是圖、文結(jié)合的方式。如三亞，顯示三亞的風(fēng)景圖片、三亞這個(gè)地點(diǎn)的名稱以及旅游的價(jià)格。

?

大家有興趣可以到網(wǎng)站上仔細(xì)看看，還有哪些圖片。當(dāng)然這個(gè)例子里面的分類是適合這個(gè)產(chǎn)品的。根據(jù)產(chǎn)品的實(shí)際情況，最好是能夠選擇適合自己的圖片分類，而不是生搬硬套。

?

2、圖片的意圖

網(wǎng)站中的圖片不應(yīng)僅做到吸引用戶的視線，而是通過吸引用戶的視線，更讓用戶通過視覺影像，準(zhǔn)確感受到網(wǎng)站傳遞的信息。

?

實(shí)際上，網(wǎng)頁上的圖片不只是美麗的像素塊，所有的圖片都應(yīng)該是有意圖的。了解圖片意圖，對設(shè)計(jì)師來說就是明確圖片的設(shè)計(jì)目標(biāo)，這是非常重要的一步工作。

?

1、展現(xiàn)產(chǎn)品特點(diǎn)

?

在一個(gè)網(wǎng)站中，首屏對用戶的第一印象幾乎起決定作用，而Banner圖在首屏中所在的位置，決定了其重要性。尤其對于營銷型網(wǎng)站來說，Banner圖是一個(gè)最佳產(chǎn)品展示的位置。

?

?

比如大眾點(diǎn)評，banner圖的位置是以美食的圖片，讓用戶知道這個(gè)網(wǎng)站是以美食作為主要的內(nèi)容。同時(shí)也比較符合大眾對它的期待。

?

該案例的圖片意圖非常明確，和文字搭配在一起，既有宣傳、推廣產(chǎn)品的作用，又是一個(gè)引導(dǎo)用戶點(diǎn)擊參與的入口。

?

2、保持圖文相關(guān)

?

這個(gè)其實(shí)在上一點(diǎn)中的案例中也有具體體現(xiàn)。

?

通過左右分層，讓用戶在腦海中留下比較深刻的印象：左邊這個(gè)看起來很好吃的美食，是素食館的特色菜?？雌饋聿幌袼夭?，而是葷菜，而且很好吃的樣子，感覺很新奇。

?

圖文相關(guān)是設(shè)計(jì)中的一個(gè)基本原則。但大部分網(wǎng)站忽略了這一點(diǎn)，甚至導(dǎo)致信息不能正確傳遞、銷售機(jī)會(huì)減少等問題。

?

3、幫助人理解

?

?

公牛電器的網(wǎng)站中為用戶展示的是公牛電器在客戶每一天生活中的位置，這個(gè)廣告是以動(dòng)圖的形式展示出來，從早晨起床到晚上睡覺，每天可以用公牛電器做什么，以產(chǎn)品使用場景為背景。

?

此處圖片經(jīng)過專業(yè)拍攝和處理，清晰、干凈，并且將原本需要一大段文字描述的信息，成功以“看圖說話”的方式直接向用戶展示，幫助用戶更好地理解產(chǎn)品。

?

4、塑造品牌

?

對用戶來說，高質(zhì)量的大圖往往更受歡迎，風(fēng)格統(tǒng)一的圖片既有視覺震撼力，又容易給人留下較深刻的印象，長久吸引用戶注意力。

?

成功品牌可以在很久之后，通過視覺上的獨(dú)特，喚起人潛意識(shí)里的印象，讓用戶聯(lián)想到該品牌。

3、網(wǎng)站圖片的交互

這部分的內(nèi)容我將會(huì)結(jié)合小T同學(xué)的學(xué)習(xí)成果來和大家一起看看，有什么樣的圖片交互，以及，這個(gè)交互可以怎么做。

?

1、banner輪播圖

?

這個(gè)相信大家這個(gè)都不陌生了，在以前的文章中也有詳細(xì)的寫到輪播圖的制作方法，這里就不再多說了，大家有興趣可以去看看之前的一些視頻。

這里給大家提醒一下，輪播圖用動(dòng)態(tài)面板制作是比較簡單也有效的選擇。

?

2、鼠標(biāo)移入，圖片發(fā)生變化，顯示圖片指示文字。

?

這是鼠標(biāo)移入前后的不同顯示。鼠標(biāo)移入后，圖片有明顯的變化，并且圖片上出現(xiàn)了圖片的指示文字，即這張圖片所代表的是什么內(nèi)容。

?

這個(gè)做法很簡單，小T同學(xué)是在原圖片上加了一個(gè)矩形，輸入了文字。最主要的是，將矩形的顏色設(shè)置好之后調(diào)整了它的透明度，給原圖片加了一層陰影。鼠標(biāo)移入時(shí)將陰影顯示，移出則隱藏，就達(dá)到這個(gè)交互效果了。

?

3、鼠標(biāo)移入圖片，在原圖片的左側(cè)或者右側(cè)顯示圖片信息

?

一樣先看看移入移出的效果對比。鼠標(biāo)移入圖片，在原圖片的左側(cè)或者右側(cè)顯示圖片信息，并且圖片信息的顯示一般是在上層，會(huì)將原來的部分信息遮蓋住。

?

這里的做法跟第二種交互一樣，小T同學(xué)也是采用了簡單的顯示隱藏去做。在這種數(shù)量較少的情況下，這種方法容易理解也易于操作。

4、選擇展示圖片

?

?

這種圖片的交互，在商品的選擇購買頁面中特別常見，鼠標(biāo)選擇左側(cè)的小圖，右側(cè)的大圖將會(huì)切換成相對應(yīng)的圖片。

?

小T同學(xué)完成這個(gè)交互，這里就不是用他常用的顯示隱藏去做了。這一次，他采用了一個(gè)其他的方法——?jiǎng)討B(tài)面板。大圖是由動(dòng)態(tài)面板制作的，事先將商品的大圖都放置在不同的狀態(tài)中。

?

?

小T同學(xué)設(shè)置了，在點(diǎn)擊小圖時(shí)，大圖這個(gè)動(dòng)態(tài)面板的狀態(tài)進(jìn)行切換，切換到和小圖一致的狀態(tài)上來。這樣就完成了展示圖片的選擇。

?

本文中我們簡單討論了網(wǎng)站圖片，并結(jié)合了小T同學(xué)的學(xué)習(xí)成果，給大家展示了集中網(wǎng)站圖片的交互效果，當(dāng)然，小T同學(xué)做的效果中可能沒有你遇到的那一種。如果您有不同的交互，歡迎一起來探討。對于小T同學(xué)的做法，您如果有不同的意見，也歡迎在評論區(qū)留下您的寶貴意見。