技术资讯
网站设计上的图片表现方式
2012-09-27 21:47:35
图片,是构成青岛网站制作的基本元素之一。图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样,不同形式的图片展现也让🌠浏览网页的乐趣变得更加多样化。
跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧。
1.访客及成员头像
访客或﷽成员头像本身也是图片,不同于用户所展示的图片,头像更多展示的是历史互动信息,并可进行延伸互动。头像悬停时可🙈显示更多信息及功能按钮,或显示更大尺寸的头像。
虾米音乐网的用户头像以平铺的方式展示,鼠标悬停时展开该用户的部分信息。有趣的交互方式让这💜部分区域不仅仅是展示区域,动态效果吸引用户去悬停的同时也加强了✅用户的点击欲望。
2.多图展现
图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式。不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息。同时,鼠标悬浮时显示更多信息或功能按钮,既避免过多的重复性元素干扰用户浏览,又让交互形式带有乐趣。但传统的矩阵平铺展现版式略微拘谨,浏览体验略显﷽枯燥。
500px.com在传统矩阵式平铺布局基础上挣脱图片尺寸一致性束缚,图片以基础面积单元的1倍、2倍、4倍尺寸展现。大小不一致的图片展现打破重复带来的密集感,却仍按照基础面🍨积单元进行排列布局,为流动的信息增加动感。不规则的图片为浏览带来乐趣,但由于视线的不规则流动,这样的展现形ౠ式并不利于信息的查找。
Pinterest的瀑布流错落有致,定宽而不定高的设计让页面突破于传统的矩阵式图片展现布局,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。用户可以在众多图片中快速地扫视,然后选择其中自己感兴趣的部分。但这样也让🌳用户在浏览时,容🗹易错过部分内容。
3.QQ空间图片展现优化探索
通过上文的视觉体验,我们可以大致了解到,图片展现的重点在于:
1.便于用户进行浏览,减少视觉疲劳
2.展现更多图片信息及图片相关信息
3.通过鼠标悬停的小动画,提供体验感强的交互形式
4.吸引用户去进行点击,由小图看大图,或看下一张
5.吸引用户去进行图片的相关延伸操作,而不是停留在浏览
目前QQ空间同样存在许多图片元素构成的模块,通过上面的总结,我们从这些模块出发,尝试一下ꦬ新的图片呈现及交𒁃互方式,希望起到一个抛砖引玉的作用。
a.多图动态
当前QQ空间在展示好友多图动态时,首张图片显示大图,其他图片以缩略图显示。假如定义最小面🌜积单元,然后以1倍、2倍、4倍显示图片,形式上更具动感,有效减少视觉疲劳,而且可以匹配不同数量的图片,用户可以看到更多图片的更多内容。
b.访客头像
鼠标悬停♔访客头像时,该访客头像区域视觉上强化,并在其他区域显示功能或信息。体验感较强的交互形式可以吸引用户去进行悬停操作从而进行点击。
c.下一张预览
浏览图像时,ꦛ显示上一张及下一张的部分内容,鼠标ജ悬停时显示全部内容的缩略图,并以此作为上一张及下一张的操作入口。
4.下一张预览
在最大化展示某张图🎃片的同时,让用户看到相册中其他内容。下一张的部分预览,更吸引用户进行继续点击浏览。下一张缩略显示,下一张模糊显示,或下一张部分显示,不同的预览呈现方式都在挑战用户的好奇心。
在Photodom中,用户浏览具体图片时并不提供下一张的预览,只有等用户将鼠标悬停在“下一张&r✤dquo;按钮时才出现下一张的缩略图。虽然出现缩略图的动画效果并不能让用户理想地实现预览,但昙花一现的刺激更促使用户去进行&ldquo𒉰;下一张”的点击。
Dailybooth在可以进行下一张图片预览的同时,还可以预览下一张图片的相关信息。这种更多内容的展现形式,用户不仅会被下一张图片的内容所吸引,或许🌌更好奇下一张图片其他信息的内容。
随着互联网的发展,青岛网站设计将会有更多🍬创新的图片呈现形式的出现,我们不妨拭目以待,看看互联网又会从视觉上给我们什么惊奇的体验吧。
近期更新
- [2023-07-26 14:17:28] 加拿大预测网-在线预测:为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 加拿大预测网-在线预测:青岛网站建设公司,高端网站定制,🉐一站式网站服务&md👍ash;—力图数字科技
- [2023-04-27 13:47:54] 加拿大预测网-在线预测:高端定制网站建设——从满足预期到走向卓越
- [2023-04-11 09:17:49] 加拿大预测网-在线预测:H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] 加拿大预测网-在线预测:windows2012程序在哪
- [2022-04-14 11:01:47] 加拿大预测网-在线预测:力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 加拿大预测网-在线预测:青岛网站建设的流程
- [2021-04-29 10:14:38] 加拿大预测网-在线预测:企业定制化官网建设项目
- [2021-03-05 10:34:45] 加拿大预测网-在线预测:移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 加拿大预测网-在线预测:微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 加拿大预测网-在线预测:网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 加拿大预测网-在线预测:建设一个常规的公司网站建设成本大概是多少?
延伸阅读
- [2016-08-30 10:30:00] 加拿大预测网-在线预测:HTML5技术的优点和不能忽视的缺点
- [2014-05-14 23:12:27] 加拿大预测网-在线预测:网站设计如何更有利于推广优化?
- [2012-05-10 22:26:24] 加拿大预测网-在线预测:dede批量增加文档翻页
- [2012-05-03 17:58:58] 加拿大预测网-在线预测:dede列表页调用正文
- [2012-08-28 09:14:05] 加拿大预测网-在线预测:判断不同浏览器的代码
- [2013-10-31 12:19:12] 加拿大预测网-在线预测:dede TAG标签 长度
- [2011-11-12 00:04:28] 加拿大预测网-在线预测:如何做友情链接,如何让友情链接更有价值?
- [2014-10-31 21:51:13] 加拿大预测网-在线预测:青岛网站建设哪家强
- [2016-11-02 16:51:00] 加拿大预测网-在线预测:asp.net网站开发
- [2015-02-11 14:25:24] 加拿大预测网-在线预测:必学四点让你的网页设计精彩起来
- [2012-11-20 16:50:46] 加拿大预测网-在线预测:dede 采集 图片不全
- [2014-11-12 11:33:09] 加拿大预测网-在线预测:常见的排版方式与表现类型的网页模式
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案