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

导航并不只是指常位于网站头部的导航条,路边的指示牌、商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间。

在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前。目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的——事实上yupoo几乎就是另一个语言版本的flickr。抛除商业运营等其他因素,仅仅来比较一下两者关于照片预览导航系统(不知道正确的叫法,就自己为其命了个名)上的不一样之处,或者是说两者在对用户使用方式的理解上的不一样之处。

从上图中可以看出flickr相册的照片预览导航系统相当的简洁,只有“上一张”与“下一张”照片的缩略图链接还有当前相册中照片的总数以及一个以幻灯片播放的按钮,当前照片的缩略图在预览导航中是没有的。再看下面yupoo的截图,在预览导航中多了当前照片的缩略图少了当前相册中照片的总数。

先不说当前照片的缩略图应不应该出现在预览导航里,光yupoo没有在预览导航上标出当前相册里照片的总数这一点就说明了它的失败。

每个用户看相册的时候都不可避免的会想要知道当前相册里到底有多少张照片,这其实是与人的心理是有关的,人天生就有这样的一种欲望——对一件事要掌握越多的信息越好,只有对其掌握了足够的信息,这样心里才会感到踏实或者说感到安全。这是一种与生俱来的本能欲望。

可是yupoo却没有标示出当前相册里照片的总数,这就好像是留了一个疑问等待用户去搜索答案,虽说可能会激起某些人的好奇心而去不停的点击它,可是到最后还是发现根本就不知道这个相册里到底有多少张照片。

而当前照片的缩略图是否应该出现在预览导航里呢?

yupoo的照片预览导航系统是完全按照网站的导航系统来设计的,在网站的导航系统里,用户需要知道自己当前在哪个地方或者是哪个栏目下,这时候导航系统就需要标示出这个地方或者是栏目来给用户提示,这样用户才不至于迷失在网站繁杂的信息里。

但是对于照片预览导航系统这种相对来说简单一点的导航系统来说,按照网站导航系统来设计似乎略显繁杂。

首先,照片预览导航并不需要标示出当前所在的位置,它不像是网站导航系统那样可能还有下级或者是下下级的导航的存在,照片预览仅仅只显示一张照片,也就是说在这个预览导航里的所有栏目都是平等的,不存在下级或者是更深层次的归属关系,用户在这样的页面里并不存在迷路的困惑;

其次,导航系统的真正作用是引导用户及标示位置,而既然照片预览导航不需要标示位置,那么照片预览导航系统所剩下来的作用就是引导用户——引导用户点击导航系统上的缩略图以查看照片。这时候问题就会出现,如果不细看预览导航上的缩略图,鼠标直接点击下去,很有可能点中的就是当前照片的那个缩略图,点击后用户会发现还是当前的照片,查看原因之后用户才会明白,中间的那个缩略图是当前照片的缩略图——点击下去后还是当前照片,也就是说这个缩略图等于是没有用的。既然没用,为何还要存在?

最后,一样的空间,当空间里的物品摆放多了,每个物品所占的空间自然就少了。照片预览导航最成功的一点就是在导航上显示的是照片的缩略图而不是文字,让用户可以很明白的知道相近两张照片的大概形状。所以如何保证缩略图的清晰度就成了预览导航真正的关健所在。当照片的尺寸越大时,缩略图的清晰度就越小,甚至最终会模糊成一团,这时候就需要提高缩略图的大小尺寸,可是预览导航的大小是限定的,所以去掉当前照片的缩略图可以让相近两张照片的缩略图更加的清晰。

从细节处体贴用户,才是产品成功的关健!

时间: 2024-12-11 00:23:23

网页中照片预览导航设计技巧的相关文章

WPS文字中打印预览功能使用技巧

  可能很多朋友将自己编辑好的文档进行打印时并不习惯使用打印预览功能,但是,此功能,可以帮你检查文档的打印效果,这样可以先看下打印内容是不是刚好合适,才不会浪费纸张以及不能达到很好的阅览体验. 在常用工具栏上单击"打印预览",可进入打印预览. 打印预览 进入打印预览后,单击预览页面就会对预览页面进行缩放,方便切换查看整体效果和单页的具体效果. 此外,在打印预览页面左上角还能选择切换单页或者双页的预览模式. 也能选择更具体比例的缩放. 比例缩放 WPS文字的打印预览功能虽然没有很大的变化

内容网页中关于图片预览的设计

之前有写过<内容页页码的预览导航>跟<照片预览导航分析>两个文章,想说明的是预览这一功能在用户心理所占有的比重是很大的,如果仅仅只是给出一排顺序数字做为链接的标题,用户的心理会产生不安全感. 虽然给出一排顺序数字做为链接几乎是整个互联网的默认分页链接模式,但也正是因为如此,用户的心理安全感被忽视了,变成了隐性因素,在平常可以忽略不计.可如果在某些特定的环境下,这些隐性因素被某些事物所触发,伤害就会扩大,甚至最终有可能会演变成一声激烈的斗争. 而如果给这个只有数字的导航里加入预览功能

Mac预览功能实用技巧大全

  Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具,接下来Pc6苹果小编给大家详细介绍一下Mac预览功能实用技巧. 目前的 Mac 预览程式可以支持 TIFF. PNG. JPEG. GIF. BMP. PDF 等主要文件格式的浏览与编辑,而单纯预览上也可以支持像是 Photoshop 等专业图像处理软件. Office 等专业文书处理软件所产生的特殊文

ios-在iphone微信内打开一个包含pdf下载链接的网页,如何从预览改为下载?

问题描述 在iphone微信内打开一个包含pdf下载链接的网页,如何从预览改为下载? 比如某个微信公众账户会给关注的用户发送图文消息,点击图文消息后会在微信的内置浏览器中进入一个带下载PDF链接的test页面,比如包含一个这样的链接点击下载pdf. androidphone中点击该链接可以正常下载. 而iphone中点击该链接会直接在微信的内置浏览器中打开该pdf.网页中如何开发来使得iphone用户也是点击下载呢? 或者说预览该pdf可以,但是点击微信左上角自带的返回按钮而无法返回至test页

win7在WPS文档中同时预览多个界面的设置方法

  win7在WPS文档中同时预览多个界面的设置方法 1.首先我们先同时打开多个文档,点击视图"菜单,我们点击"重排窗口"旁边的倒三角图标; 2.我们可以选择其中的"垂直平铺"; 3.设置完成后我们就可以同时看到多个文档.

javascript api-ArcGIS问题:在本地浏览器中无法预览地图

问题描述 ArcGIS问题:在本地浏览器中无法预览地图 如题.已在Catlog中发布地图服务,并且能够预览.用浏览器登录arcgis server manager后能看到发布的地图服务,但是点击预览显示页面空白.已部署arcgis for javascript api 3.9版本.有没有大神知道问题出在哪了啊.

网页导航设计技巧:尽情拓展设计创意和思维的导航设计

文章描述:导航一般位于网页的中上部分,也是视觉中心的区域内.在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔! 导航是网页设计中不可缺少的部分,它是网站访问者获取所需内容的快速通道和途径.导航让网站的层次结构以一种有条理的方式清晰展示,并引导用户毫不 费力地找到并管理信息,达到有效传递.同时,导航一般位于网页的中上部分,也是视觉中心的区域内.在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔! 一个设计师在布局和整体规划网页设

mac中osx lion 预览使用小技巧

  预览功能是mac系统下面我们经常要用到的功能,当你查看一张照片时,打开一张图片时你就会用到它. Mac电脑的使用者在电脑后一开机后就可以轻松的享受到不用到处去寻找第三方的应用程式来打开各式各样类型的文档,预览程序就是一个很好的工具.使用者不需要下载免费版的 Adobe reader软件就可以直接查看PDF文档.不必花钱或者是到处去寻找没有版权的 Acrobat, 就可直接在 PDF文档上进行标注.甚至是作简单的修图调色动作也可以轻松的使用预览功能完成.随着 OSX系统的更新和越来越强大,预览

网页中图片幻灯片用户体验设计小细节

图片幻灯片是网页中最常见的一种效果,功能几乎差别不大,可很多网页设计师可能都没有考虑过这种最常用的幻灯片其中所涵盖的用户体验思想,本文通过国内外几家大型网站中的幻灯片来分析他们各自的设计小细节及给我们带来的体验 1.卓越亚马逊的首页轮换图片,每刷新一次,都是随机不同的顺序显示,这样的设计解决了对于较多图片轮换而靠后的图片信息很少被看到的问题,这点对于电子商务等时效性不是很讲究的网站来说尤其重要: 2.最初的时候是点击照片跳转到下一张,再然后是点击照片的左边是上一张,点击照片右边是下一张,当我们习