【学习】关于网站中图片的各类交互

图片是产品经理在工作中必须遇到的内容。在一个网站中，我们一定需要用到图片，也必须会涉及到图片的交互。尤其在愈发追求视觉感官的今天，“图文并茂”是很多网站的追求。

文章的前面部分会跟大家一起分析一下关于网站图片的一些内容，后面部分将对结合小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同学的做法，您如果有不同的意见，也欢迎在评论区留下您的宝贵意见。