（翻译）缩略图（Thumbnail）

问题概述

用户不想下载每张图片的原图，只想概览这些图形。

示例

用途

用于有一组图片想展示给用户；
用于想展示给用户一组图片，如果要下载这些图片的原图，即占用带宽，又耗费用户大把时间；
用于让用户能够快速浏览一组图片；
用于在下载图片、电影或页面的原始文件前，先让用户有个初步印象。

解决方案

缩略图是大图片的缩小版。缩略图可以展示任意图形：图片、电影或者是网页的截图。
相邻的多个缩略图的尺寸（高度和宽度）都是相同的。为了保持缩略图与原图之间的尺寸比例相同，生成缩略图的过程包含缩放与裁剪操作。
常用的缩略图尺寸如下：

尺寸（宽×高）	描述
48×48	微小尺寸
64×64	小尺寸
80×80	中等尺寸
96×96	中等尺寸
128×128	大尺寸
144×144	极大尺寸
160×160	超大尺寸

说明

在单个网页中使用缩略图模式，让用户对多张图片或多部电影进行概览。再有，缩略图可以节省带宽，用户可以预览缩略图来找想要的那一张图片，不用点击所有的图片。

原文地址：http://ui-patterns.com/patterns/Thumbnail

（翻译）缩略图（Thumbnail）相关推荐

缩略图thumbnail
在菜鸟教程学bootstrap的时候,遇见缩略图,练习学习一下.以下是菜鸟教程的链接: http://www.runoob.com/bootstrap/bootstrap-thumbnails.htm ...
Bootstrap缩略图.thumbnail
缩略图缩略图是对Bootstrap栅格系统的扩展,将图片.视频.文本等加入到缩略图中,就可以很容易地以网格形式展示图片.视频.商品列表等. 默认缩略图 Boostrap中的默认缩略图设计非常简单,只 ...
iOS照片缩略图thumbnail模糊问题
使用ALAsset获取图片的缩略图,一般都有模糊的问题 [_imageView setImage:[UIImage imageWithCGImage:asset.thumbnail]]; 对于这种问题 ...
Bootstrap3 缩略图( thumbnail )
大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbn ...
thumbnail的处理流程和读取缩略图thumbnail所在sample的index的方法
取得video thumbnail的处理流程如下图所示,取得image的thumbnail的处理流程类似,只是取得image thumbnail的函数变成了ThumbnailUtils.createI ...
php 图片生成视频,PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法
本文实例讲述了PHP基于ffmpeg实现转换视频,截图及生成缩略图的方法.分享给大家供大家参考,具体如下: 这里把ffmpeg 和生成缩略图整合了一下: include("ImageRe ...
PHP做视频网站，让程序自动实现视频格式转换、设置视频大小、生成视频缩略图...
一.PHP实现转换在做视频网站的时候,最头痛的问题可能是格式转换.视频缩略图等.下面我将用PHP实现这一些功能.PHP是没有自带视频的函数,所以会用到第三方的软件工具来实现. 二.什么是FFmpeg ...
Drupal第三方模块汇集(二)
多谢原文作者我只是做个收藏! 安装扩展模块大致如下: 1. 下载扩展模块 Drupal 有许多扩展模块,访问下面的网址可以查询到,您可以分门别类的查找,也可以直接搜索关键字 =====续======= ...
Google高级技巧—google Hack★★★★
google hacking其实并算不上什么新东西,当时并没有重视这种技术,认为webshell什么的,并无太大实际用途.google hacking其实并非如此简单... 常用的google关键字: ...
[ISUX译]iOS 9人机界面指南(三)：iOS 技术
[ISUX译]iOS 9人机界面指南(三):iOS 技术 UI规范 summer 2015-11-29 3247浏览 0评论专为0基础小白量身打造的UI设计入门课程(ps,ai软件+图标技巧),在线 ...

（翻译）缩略图（Thumbnail）

问题概述

示例

用途

解决方案

说明

（翻译）缩略图（Thumbnail）相关推荐

最新文章

热门文章