Quantcast
Channel: 365UCD-打造舒适网络生活体验 »视觉交互
Viewing all articles
Browse latest Browse all 10

从缩略图至完整大图的操作流程小议~

$
0
0

从缩略图至完整大图的操作流程小议~

作为一名设计师,经常会遇到以下两种状况,一是需要找一些图片作为素材进行设计的二次开发,或者是另一种情况,找一些成品的网页设计效果图来进行设计灵感的催生。但是由于这些图片尺寸的巨大,在一些展示列表页中只能以缩略图的形式来展示,需要用户进行点击等操作来显示其完整图片。

在这一过程中,操作方式可能有以下几种

1、  单击缩略图;

2、  双击缩略图;

3、  其他点击途径;

打开的效果也有几种方式

1、  原页面直接跳转;

2、  弹出新页面;

3、  在原页面上弹出浮动层展示。

怎样的方式是最为快捷的呢?在欣赏或者收藏之后返回原列表页是最方便的呢?下面以实际例子分析与大家共同探讨~~

例子A68design上http://68design.net/Appreciate/Interface/61126-1.html

从缩略图到完整大图展示的操作流程小议~

68design上的展示流程是通过点击图片打开新页面进行完整大图的展示。在欣赏完整大图之后,就需要对于此页面进行关闭操作才能回到原列表页(当然不关闭也可以,就是浏览器的标签会多点)。同时,它的列表页是翻页的,每页只放一张缩略图,笔者很不稀饭,感觉有骗点击量的嫌疑。一页上同时展示所有的缩略图是很简便的一个方式。期待下次改版时能有改进。

例子B:sj63上http://sj63.com/WebHtml/201203/20120326151441503385589.html

从缩略图到完整大图展示的操作流程小议~

sj63上的展示流程是通过点击缩略图在原页面上弹出浮动层进行完整大图的展示。此操作流程展示的好处是,效果新颖,且在浮动层上就可以切换上一页下一页,很方便。

从缩略图到完整大图展示的操作流程小议~

但是也给用户带来了一些不便。如果完整图很大,尺寸超过了显示器的分辨率,则会带来竖向或者横向的滚动条,而它的关闭按钮在右下方,必然造成关闭的麻烦,需要用户手动滑动滚动条才行(这是用户最不待见的操作之一)。

从缩略图到完整大图展示的操作流程小议~

例C:huaban http://huaban.com/pins/2888771/

huaban上的展示流程是通过点击缩略图旁的小图标在原页面上跳转进行完整大图的展示(点击缩略图会打开新页面跳转到原图采集的地址)。笔者发现,花瓣上在进行跳转时场景转换的形式非常之好,有电影中场景转换的新颖效果,比普通生硬的跳转会明显让人有在同网站跳转的感觉。同时,完整大图的展示页面上也有返回原先页面的按钮,比较人性化。但是通过点击的小图标相对较小,则可点击区域也就偏小,且在不触发时是隐藏的,虽然减少了页面的复杂程度,符合其极简的展现方式,对于新手来说还是需要适应的过程的。从缩略图到完整大图展示的操作流程小议~

从缩略图到完整大图展示的操作流程小议~

以上3个例子,从缩略图到完整大图的一个操作流程来说都有利有弊,笔者也不能完全总结说一个比较好的操作流程,毕竟每个网站都有其自身的定位。但是,在做自己的网站时,遇到此种情况,我们是需要静下来好好分析一下,何种方式或者进阶方式是符合自身定位以及用户群体,而不是随便了事。


Viewing all articles
Browse latest Browse all 10

Trending Articles