热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

图片是产品经理在工作中必须遇到的内容。在一个网站中,我们一定需要用到图片,也必须会涉及到图片的交互。尤其在愈发追求视觉感官的今天,“图文并
751361de2bdc44c5a38c317a5e33fea8.gif图片是产品经理在工作中必须遇到的内容。在一个网站中,我们一定需要用到图片,也必须会涉及到图片的交互。尤其在愈发追求视觉感官的今天,“图文并茂”是很多网站的追求。文章的前面部分会跟大家一起分析一下关于网站图片的一些内容,后面部分将对结合小T同学做的案例,跟大家一起看看,在axure中,怎么做网站图片的交互。1

网站图片的类型

在图片设计前,设计师最好能参考目前已有的网页粗略布局和栏目等,重新梳理列出网站中所需的图片类型。比如,按照栏目和模块对所需的图片分类:Banner、业务介绍、产品介绍/展示、公司介绍、团队介绍、新闻/资讯、客户案例等。咱们来看看一个常见的网站中,包括了哪些图片吧。

4762e29f9779932868895ace72cae31d.png

看看首页,上方是banner广告位。这里的图片,通常放置的就是企业的主打产品、主打服务、推广活动和热门活动等。比如旅游过年的活动。在banner的下方,是旅游地点的展示,采用的是图、文结合的方式。如三亚,显示三亚的风景图片、三亚这个地点的名称以及旅游的价格。大家有兴趣可以到网站上仔细看看,还有哪些图片。当然这个例子里面的分类是适合这个产品的。根据产品的实际情况,最好是能够选择适合自己的图片分类,而不是生搬硬套。2

图片的意图

网站中的图片不应仅做到吸引用户的视线,而是通过吸引用户的视线,更让用户通过视觉影像,准确感受到网站传递的信息。实际上,网页上的图片不只是美丽的像素块,所有的图片都应该是有意图的。了解图片意图,对设计师来说就是明确图片的设计目标,这是非常重要的一步工作。1、展现产品特点在一个网站中,首屏对用户的第一印象几乎起决定作用,而Banner图在首屏中所在的位置,决定了其重要性。尤其对于营销型网站来说,Banner图是一个最佳产品展示的位置。

d10b4da9087410e7d710d086fe738d12.png

比如大众点评,banner图的位置是以美食的图片,让用户知道这个网站是以美食作为主要的内容。同时也比较符合大众对它的期待。该案例的图片意图非常明确,和文字搭配在一起,既有宣传、推广产品的作用,又是一个引导用户点击参与的入口。2、保持图文相关这个其实在上一点中的案例中也有具体体现。通过左右分层,让用户在脑海中留下比较深刻的印象:左边这个看起来很好吃的美食,是素食馆的特色菜。看起来不像素菜,而是荤菜,而且很好吃的样子,感觉很新奇。图文相关是设计中的一个基本原则。但大部分网站忽略了这一点,甚至导致信息不能正确传递、销售机会减少等问题。3、帮助人理解

949fb04bd07f2708b0bd000d77ad5f29.png

公牛电器的网站中为用户展示的是公牛电器在客户每一天生活中的位置,这个广告是以动图的形式展示出来,从早晨起床到晚上睡觉,每天可以用公牛电器做什么,以产品使用场景为背景。此处图片经过专业拍摄和处理,清晰、干净,并且将原本需要一大段文字描述的信息,成功以“看图说话”的方式直接向用户展示,帮助用户更好地理解产品。4、塑造品牌对用户来说,高质量的大图往往更受欢迎,风格统一的图片既有视觉震撼力,又容易给人留下较深刻的印象,长久吸引用户注意力。成功品牌可以在很久之后,通过视觉上的独特,唤起人潜意识里的印象,让用户联想到该品牌。3

网站图片的交互

这部分的内容我将会结合小T同学的学习成果来和大家一起看看,有什么样的图片交互,以及,这个交互可以怎么做。1、banner轮播图这个相信大家这个都不陌生了,在以前的文章中也有详细的写到轮播图的制作方法,这里就不再多说了,大家有兴趣可以去看看之前的一些视频。这里给大家提醒一下,轮播图用动态面板制作是比较简单也有效的选择。2、鼠标移入,图片发生变化,显示图片指示文字。

073ba74b453c0a690271b5bb70600bef.png

ab8775063d85fd1bb04e7a7e92f8d711.png

这是鼠标移入前后的不同显示。鼠标移入后,图片有明显的变化,并且图片上出现了图片的指示文字,即这张图片所代表的是什么内容。这个做法很简单,小T同学是在原图片上加了一个矩形,输入了文字。最主要的是,将矩形的颜色设置好之后调整了它的透明度,给原图片加了一层阴影。鼠标移入时将阴影显示,移出则隐藏,就达到这个交互效果了。3、鼠标移入图片,在原图片的左侧或者右侧显示图片信息

6aa126a36776a8bbe2dc82e63871facb.png

4e49aa07a380a594a58d3b83bd1d650b.png

一样先看看移入移出的效果对比。鼠标移入图片,在原图片的左侧或者右侧显示图片信息,并且图片信息的显示一般是在上层,会将原来的部分信息遮盖住。这里的做法跟第二种交互一样,小T同学也是采用了简单的显示隐藏去做。在这种数量较少的情况下,这种方法容易理解也易于操作。4、选择展示图片

3c58b0992c0de9e7cb493ddf0da79936.png

d94eacfd2093b3ef1f0c5565dd82fded.png

这种图片的交互,在商品的选择购买页面中特别常见,鼠标选择左侧的小图,右侧的大图将会切换成相对应的图片。小T同学完成这个交互,这里就不是用他常用的显示隐藏去做了。这一次,他采用了一个其他的方法——动态面板。大图是由动态面板制作的,事先将商品的大图都放置在不同的状态中。

37bcdfc165d4283a23813bb94e4cf8f3.png

小T同学设置了,在点击小图时,大图这个动态面板的状态进行切换,切换到和小图一致的状态上来。这样就完成了展示图片的选择。本文中我们简单讨论了网站图片,并结合了小T同学的学习成果,给大家展示了集中网站图片的交互效果,当然,小T同学做的效果中可能没有你遇到的那一种。如果您有不同的交互,欢迎一起来探讨。对于小T同学的做法,您如果有不同的意见,也欢迎在评论区留下您的宝贵意见。

往期精选

Axure如何应对意外关闭

Axure中的“AdaptiveViews”(自适应视图)是什么

Axure 教程 | 使用键盘进行移动对象

关注

听说关注了我们的人

都升职加薪啦

021b088c22bb2549c605fdde51fb91f4.png

d45cacced7df482c5e5d1c0e2d86db7d.gif



推荐阅读
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文介绍如何通过注册表编辑器自定义和优化Windows文件右键菜单,包括删除不需要的菜单项、添加绿色版或非安装版软件以及将特定应用程序(如Sublime Text)添加到右键菜单中。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 火星商店问题:线段树分治与持久化Trie树的应用
    本题涉及编号为1至n的火星商店,每个商店有一个永久商品价值v。操作包括每天在指定商店增加一个新商品,以及查询某段时间内某些商店中所有商品(含永久商品)与给定密码值的最大异或结果。通过线段树分治和持久化Trie树来高效解决此问题。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 本文介绍了在使用Visual Studio 2015进行项目开发时,遇到类向导弹出“异常来自 HRESULT:0x8CE0000B”错误的解决方案。通过具体步骤和实践经验,帮助开发者快速排查并解决问题。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • IneedtofocusTextCellsonebyoneviaabuttonclick.ItriedlistView.ScrollTo.我需要通过点击按钮逐个关注Tex ... [详细]
  • c# – UWP:BrightnessOverride StartOverride逻辑 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • 在使用 DataGridView 时,如果在当前单元格中输入内容但光标未移开,点击保存按钮后,输入的内容可能无法保存。只有当光标离开单元格后,才能成功保存数据。本文将探讨如何通过调用 DataGridView 的内置方法解决此问题。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
author-avatar
睿哲小宝贝
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有