图片展现形式的思考


  图片,是构成网页的基本元素之一。图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化。

  跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧。

  一.多图展现


  图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式。不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息。同时,鼠标悬浮时显示更多信息或功能按钮,既避免过多的重复性元素干扰用户浏览,又让交互形式带有乐趣。但传统的矩阵平铺展现版式略微拘谨,浏览体验略显枯燥。


  500px.com在传统矩阵式平铺布局基础上挣脱图片尺寸一致性束缚,图片以基础面积单元的1倍、2倍、4倍尺寸展现。大小不一致的图片展现打破重复带来的密集感,却仍按照基础面积单元进行排列布局,为流动的信息增加动感。不规则的图片为浏览带来乐趣,但由于视线的不规则流动,这样的展现形式并不利于信息的查找。


  Pinterest的瀑布流错落有致,定宽而不定高的设计让页面突破于传统的矩阵式图片展现布局,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。用户可以在众多图片中快速地扫视,然后选择其中自己感兴趣的部分。但这样也让用户在浏览时,容易错过部分内容。

  二.下一张预览


  在最大化展示某张图片的同时,让用户看到相册中其他内容。下一张的部分预览,更吸引用户进行继续点击浏览。下一张缩略显示,下一张模糊显示,或下一张部分显示,不同的预览呈现方式都在挑战用户的好奇心。


  在Photodom中,用户浏览具体图片时并不提供下一张的预览,只有等用户将鼠标悬停在"下一张"按钮时才出现下一张的缩略图。虽然出现缩略图的动画效果并不能让用户理想地实现预览,但昙花一现的刺激更促使用户去进行"下一张"的点击。


  Dailybooth在可以进行下一张图片预览的同时,还可以预览下一张图片的相关信息。这种更多内容的展现形式,用户不仅会被下一张图片的内容所吸引,或许更好奇下一张图片其他信息的内容。

  三.访客及成员头像


  访客或成员头像本身也是图片,不同于用户所展示的图片,头像更多展示的是历史互动信息,并可进行延伸互动。头像悬停时可显示更多信息及功能按钮,或显示更大尺寸的头像。


  虾米音乐网的用户头像以平铺的方式展示,鼠标悬停时展开该用户的部分信息。有趣的交互方式让这部分区域不仅仅是展示区域,动态效果吸引用户去悬停的同时也加强了用户的点击欲望。

  四.QQ空间图片展现优化探索

  通过上文的视觉体验,我们可以大致了解到,图片展现的重点在于:

  1.便于用户进行浏览,减少视觉疲劳

  2.展现更多图片信息及图片相关信息

  3.通过鼠标悬停的小动画,提供体验感强的交互形式

  4.吸引用户去进行点击,由小图看大图,或看下一张

  5.吸引用户去进行图片的相关延伸操作,而不是停留在浏览

  目前QQ空间同样存在许多图片元素构成的模块,通过上面的总结,我们从这些模块出发,尝试一下新的图片呈现及交互方式,希望起到一个抛砖引玉的作用。

  a.多图动态


  当前QQ空间在展示好友多图动态时,首张图片显示大图,其他图片以缩略图显示。假如定义最小面积单元,然后以1倍、2倍、4倍显示图片,形式上更具动感,有效减少视觉疲劳,而且可以匹配不同数量的图片,用户可以看到更多图片的更多内容。

  b.访客头像


  鼠标悬停访客头像时,该访客头像区域视觉上强化,并在其他区域显示功能或信息。体验感较强的交互形式可以吸引用户去进行悬停操作从而进行点击。

  c.下一张预览


  浏览图像时,显示上一张及下一张的部分内容,鼠标悬停时显示全部内容的缩略图,并以此作为上一张及下一张的操作入口。

  随着互联网的发展,将会有更多创新的图片呈现形式的出现,我们不妨拭目以待,看看互联网又会从视觉上给我们什么惊奇的体验吧。

  文章来源:腾讯ISUX

时间: 2024-12-21 23:43:46

图片展现形式的思考的相关文章

网页设计中图片展现形式的思考

图片,是构成网页的基本元素之一.图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验.图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化. 跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧. 一.多图展现 图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式.不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息.同时,鼠标悬浮时显示更多信息或功能按钮,既避免过多

网页设计技巧:分析网页图片在网页中展现形式

文章描述:网页设计中图片展现形式的思考. 图片,是构成网页的基本元素之一.图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验.图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化. 跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧. 一.多图展现 图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式.不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息.同时,鼠

网站应该需要什么样的功能以及前端展现形式

摘要: cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多.cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟. 在众多类型的cms中该如何选择一款心仪 cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多.cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟. 在众多类型的cms中该如何选择一款心仪的CMS作为建站的程序,或者说我的网站应该需要什么样的功能以及前端展现形式是众多cms爱好者最常见和最关注的问题之一.

如何把word文档内容以图片的形式分享到微博的方法

  第一步:准备一篇microsoft word 文档,然后打开该文档. 第二步:点击word文档菜单栏里的"特色功能",而后再点击"长微博",这是就会显示一个下拉框. 第三步:在下拉框中选择"分享到微博",而后在网页端就可以看到"WPS微分享". 第四步:在这里我们将word文档内容分享到新浪微博就行了,当然你也可以分享到腾讯微博,点击"分享到微博"即可. 第五步:在你的新浪微博登录的前提下,点击&quo

把word文档内容以图片的形式分享到微博的方法

  第一步:准备一篇microsoft word 文档,然后打开该文档. 第二步:点击word文档菜单栏里的"特色功能",而后再点击"长微博",这是就会显示一个下拉框. 第三步:在下拉框中选择"分享到微博",而后在网页端就可以看到"WPS微分享". 第四步:在这里我们将word文档内容分享到新浪微博就行了,当然你也可以分享到腾讯微博,点击"分享到微博"即可. 第五步:在你的新浪微博登录的前提下,点击&quo

PPC竞价的展现形式

"云计算"概念近年来汹涌来袭,IDC行业对其追捧趋之如骛.云计算提高了IDC服务商的投资回报率,按需使用的计费方式与稳定持续可控的超高性价比,无 疑将引领潮流.相应的带来的是IDC行业的竞争压力越来越大,各大IDC公司对网络营销的依赖越来越大,目前来说,搜索引擎营销是大部分进行网络营销的 IDC服务商的必选项目,而百度竞价则是最直接见效最快的推广方式之一.小脑袋竞价助手今天给您详细说明一下. 在现有的搜索引擎中,从竞价后台的操作性,以及竞价辅助工具的发开来说,百度PPC竞价是发展的最为

怎么确定竞价创意的展现形式

在ppc账户的树形结构中,创意处于最底部,但如同我们所知道的那样:任何高楼大厦,地基很重要,创意也是如此.没有创意,推广的关键词得不到展示;没有好的创意,账户的点击率可能就达不到一个好的结果;创意,甚至会影响最后的转化.这不是妄言,你可以追踪. &http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 创意的重要性不言而喻,但今天小脑袋竞价助手小编并没有计划讲 什么样的创意是好的创意.如何写出好的创意.怎么优化跟踪创意的点

百度竞价推广9种常见展现形式一览

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 21136.html">导读:这次统计的展现形式包括:百度健康.品牌地标.品牌起跑线(网页+知道 两种不展现形式).问答营销.品牌专区.闪投等等.平常看到不少朋友在群里问各种展现形式,这里就系统的整理了一下. 展现形式1>>>> 搜索推广位 展现形式2>>>> 链接推广位 展现形

小议良好用户体验有哪些展现形式种种

中介交易 SEO诊断 淘宝客 云主机 技术大厅 用户体验是每个运营人员关注的问题,也是运营人员在极力推崇提高的重要方面,用户体验的提高大大加强用户对产品的认可度,从感觉和理性两方面都会给予很高的评价,对网站的发展有重要的推动和提升作用,做为从业人员,将自己的心得总结出来,供大家参考,希望对大家有用. 1 提醒对方IP 和线路 方便下载或就诊,并给出纠错链接 好处:(1) 方便用户下载 提高下载速度,节省时间 (2) 分流服务器负担 提高系统的性能 (3) 加入用户的参与,增加纠错功能,保持数据的