营口网站设计|营口网站优化|营口网络营销
所在位置:营口网站建设 > 中酷观点 > 网站设计 > 正文
网站建设 / 网站策划 / 网站优化 / 网络营销 / 网站设计 / 常见问题

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

时间:2013年05月11日 来源:互联网

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

跟随我们分别来体验一下目前存在的各种?#35745;?#23637;?#20013;?#24335;,让我们的眼睛去旅行吧。

一、多图展现

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

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

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

500px.com在传统矩阵式平铺布局基础上挣脱?#35745;?#23610;寸一致性束缚,?#35745;?#20197;基础面积单元的1倍、2倍、4倍尺寸展现。大小不一致的?#35745;?#23637;现打破重复带来的密集感,却仍按照基础面积单元进?#20449;?#21015;布局,为流动的信息增加动?#23567;?#19981;规则的?#35745;?#20026;浏?#26469;?#26469;乐趣,但由于视线的不规则流动,这样的展?#20013;?#24335;并不利于信息的查找。

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

Pinterest的瀑布流错落有致,定宽而不定高的设计让页面突破于传统的矩阵式?#35745;?#23637;现布局,巧妙的利用视觉层级,视线的?#25105;?#27969;动又缓解了视觉疲劳。用户可以在众多?#35745;?#20013;快速地扫视,?#32531;?#36873;择其中自己?#34892;?#36259;的部分。但这样也让用户在浏览时,容易错过部分内容。

二、下一张预览

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

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

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

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

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

Dailybooth在可以进行下一张?#35745;?#39044;览的同时,还可以预览下一张?#35745;?#30340;相关信息。这种更多内容的展?#20013;?#24335;,用户不仅会被下一张?#35745;?#30340;内容所吸引,或许更好奇下一张?#35745;?#20854;他信息的内容。

三、访?#22270;?#25104;员头像

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

访客或成员头像本身也是?#35745;?#19981;同于用户所展示的?#35745;?#22836;像更多展示的是历史互动信息,并可进行?#30001;?#20114;动。头像悬停时可显示更多信息及功能按钮,或显示更大尺寸的头像。

四、QQ空间?#35745;?#23637;现优化探索

通过上文的视觉体验,我们可?#28304;?#33268;了解到,?#35745;?#23637;现的重点在于:

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

2.展现更多?#35745;?#20449;息及?#35745;?#30456;关信息

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

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

5.吸引用户去进行?#35745;?#30340;相关?#30001;?#25805;作,而不是停留在浏览

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

a.多图动态

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

当前QQ空间在展示好友多图动态时,首张?#35745;?#26174;示大图,其他?#35745;?#20197;缩略图显示。假如定义最小面积单元,?#32531;?#20197;1倍、2倍、4倍显示?#35745;?#24418;式上更具动感,?#34892;?#20943;少视觉疲劳,而且可以匹配不同数量的?#35745;?#29992;户可以看到更多?#35745;?#30340;更多内容。

b.访客头像

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

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

c.下一张预览

网页设计中?#35745;?#23637;?#20013;?#24335;的思考

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

随着互联网的发展,将会有更多创新的?#35745;?#21576;?#20013;?#24335;的出现,我们不妨拭目?#28304;?#30475;看互联网又会从视觉上给我们什么惊奇的体验吧。

上一篇:浅谈页面设计中光影的特效 下一篇:网页设计中的6个小技巧

提交网站建设需求
玛莎拉蒂莱万特
北京pk10app 5分快3开奖结果下载 五大联赛排名 福建时时计算公式 香港马开奖历史记录 赛车宝典 职业赌客只追长龙 北京时时官方网址 黑龙江福彩快乐十分开奖公告 黑龙江快乐十分技巧 黑龙江时时购买平台 捕鱼达人单机版全部 江西时时彩开奖时间 福建时时8亿 香港马会2019年开奖记录搜 安徽快三是合法的吗