html

benny说我写的东西太没条理了，好吧，这次我就尽量一点一点的来说。 gallery是网站中用于显示产品的所有照片的页面。产品照片是通过这样的流程产生的：网友自主提交－>管理员人工审核－>设计手工加上水印－>上传。gallery已经有3个版本，下面会仔细地说说这三个版本，纪录我在做这些工作时候的考虑，从中总结一些可用的方法。 gallery v1.0 启用时间：2006.6-2009.10 页面元数据： – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 2009年bing的图片搜索提供了一种新的界面设计模式——无翻页的缩略图列表（即用一个页面将所有的缩略图列出来，摒弃盛行数年的“分页”模式），分页模式产生于那个屏幕小、用户对信息掌握程度低的年代，它将大量的信息切割成用户容易消化的长度，一段一段的推给用户。时光飞逝，2010年的今天，屏幕变大了，用户页习惯了在屏幕上阅读大量的信息，一个页面呈现所有的信息对他们来说理解起来没有那么困难了。分页反而给他们增加了点击的负担。现在看来我们在4年前就已经有这种理念了嘛⋯⋯Orz⋯⋯ 因为我们并没有一个“缩略图”集合页面，所以“查看大图”的页面也需要至少提供一种提供给用户“浏览全部照片”的可行途径。现在看来，第一版gallery是一个非常“简单”、“实用”的作品，在这个页面能直观地看到所有的缩略图。这个页面并不是我设计的，它工作了相当长的一段时间。 gallery v2.0 启用时间：2009.10-2010.7 页面元数据： – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 v2版本的元数据与v1时并没有变化。改版的起因是我们计划在此页面加入“用户评论”功能。在v1中，每个页面都会在页面下方显示全部图片的缩略图，“用户评论”只能放在这个不定高度的缩略图列表之下，大家感觉这样不太合理。我们同时也希望这个页面“用起来更方便一些”。v2的主要改动在于： 将产品名称单独放在页面顶部中间 将缩略图放入一个固定面积的“窗口”中 将上述窗口放到当前图片（原图）的右侧。 在v3里我又将这个窗口挪回了大图下方⋯⋯ o(>。<)o…… 后来我也扪心自问，为什么要放在右侧……我其实只是参考了无节操百度的图片搜索。更深层的原因是： 大图的宽度仅有800px，小于主流宽度960px，完全有空间在右侧加入缩略图列表；右侧的列表能减少用户浏览图片时垂直方向的滚动；同时，用户在查看大图时就能看到这个列表，他们可能马上就意识到还有其他很多图片可供查看。 带有缩略图的，尺寸很大的“上一张”、“下一张”按钮。这两个按钮是相册潜规则了吧，用户习惯了……所以大大方方show出来吧！ gallery v3.0 启用时间：2010.7-？ 页面元数据： – 产品名称 – 当前图片(1024px × 768px) – 其他图片的缩略图 任何一次改版都可以看成是要解决某些需求，在v3的设计前，我意识到首先要整理一下我们的需求。 1 gallery页面改版需求分析 1）用户的需求 用户进入这个页面的原因，往往反映了用户的需求。我会经常尝试通过“列出页面入口”的方法来了解用户“为什么而来”。进入gallery页面有三种方法： 点击product页面仅有的一张产品图片(该图片尺寸为240px … [Read more…]