网页中照片预览导航设计技巧

所属分类: 网页制作 / 应用技巧 阅读数: 1568
收藏 0 赞 0 分享

导航并不只是指常位于网站头部的导航条,路边的指示牌、商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间。
在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前。目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的——事实上yupoo几乎就是另一个语言版本的flickr。抛除商业运营等其他因素,仅仅来比较一下两者关于照片预览导航系统(不知道正确的叫法,就自己为其命了个名)上的不一样之处,或者是说两者在对用户使用方式的理解上的不一样之处。
flickr.jpg

从上图中可以看出flickr相册的照片预览导航系统相当的简洁,只有“上一张”与“下一张”照片的缩略图链接还有当前相册中照片的总数以及一个以幻灯片播放的按钮,当前照片的缩略图在预览导航中是没有的。再看下面yupoo的截图,在预览导航中多了当前照片的缩略图少了当前相册中照片的总数。
yupoo.jpg
先不说当前照片的缩略图应不应该出现在预览导航里,光yupoo没有在预览导航上标出当前相册里照片的总数这一点就说明了它的失败。
每个用户看相册的时候都不可避免的会想要知道当前相册里到底有多少张照片,这其实是与人的心理是有关的,人天生就有这样的一种欲望——对一件事要掌握越多的信息越好,只有对其掌握了足够的信息,这样心里才会感到踏实或者说感到安全。这是一种与生俱来的本能欲望。
可是yupoo却没有标示出当前相册里照片的总数,这就好像是留了一个疑问等待用户去搜索答案,虽说可能会激起某些人的好奇心而去不停的点击它,可是到最后还是发现根本就不知道这个相册里到底有多少张照片。
而当前照片的缩略图是否应该出现在预览导航里呢?
yupoo的照片预览导航系统是完全按照网站的导航系统来设计的,在网站的导航系统里,用户需要知道自己当前在哪个地方或者是哪个栏目下,这时候导航系统就需要标示出这个地方或者是栏目来给用户提示,这样用户才不至于迷失在网站繁杂的信息里。
但是对于照片预览导航系统这种相对来说简单一点的导航系统来说,按照网站导航系统来设计似乎略显繁杂。
首先,照片预览导航并不需要标示出当前所在的位置,它不像是网站导航系统那样可能还有下级或者是下下级的导航的存在,照片预览仅仅只显示一张照片,也就是说在这个预览导航里的所有栏目都是平等的,不存在下级或者是更深层次的归属关系,用户在这样的页面里并不存在迷路的困惑;
其次,导航系统的真正作用是引导用户及标示位置,而既然照片预览导航不需要标示位置,那么照片预览导航系统所剩下来的作用就是引导用户——引导用户点击导航系统上的缩略图以查看照片。这时候问题就会出现,如果不细看预览导航上的缩略图,鼠标直接点击下去,很有可能点中的就是当前照片的那个缩略图,点击后用户会发现还是当前的照片,查看原因之后用户才会明白,中间的那个缩略图是当前照片的缩略图——点击下去后还是当前照片,也就是说这个缩略图等于是没有用的。既然没用,为何还要存在?
最后,一样的空间,当空间里的物品摆放多了,每个物品所占的空间自然就少了。照片预览导航最成功的一点就是在导航上显示的是照片的缩略图而不是文字,让用户可以很明白的知道相近两张照片的大概形状。所以如何保证缩略图的清晰度就成了预览导航真正的关健所在。当照片的尺寸越大时,缩略图的清晰度就越小,甚至最终会模糊成一团,这时候就需要提高缩略图的大小尺寸,可是预览导航的大小是限定的,所以去掉当前照片的缩略图可以让相近两张照片的缩略图更加的清晰。
从细节处体贴用户,才是产品成功的关健!
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多