图形展示交互方式Carousel

文章描述:交互模式应用(3) : Carousel.

图片作为描述有形事物的一种方式,不但能直接传达视觉信息,包括几何特征、形态、位置大小和色彩等,还能传递内在信息,比如意图、要求、风格、性格和计划等。现代设计中,图形的表现力一直远超其他表现形式,因此得到大多数设计师的青睐。A picture is more than thousands of words, 如何利用图片进行创作理念表达和思维传递成为设计工作中的重点之一。

在交互设计中,如何才能在有限的空间内展示尽可能多的内容,并且保留视觉焦点? 今天我们要谈的是Carousel,一种常见的图形展示交互方式。

Carousel,本意旋转木马,是一种在游乐场很容易看到的大型玩具。

交互设计中,Carousel能够充分利用有限的屏幕空间,帮助设计者更好的安排布局来展示一系列图形图像,从而让用户获得更好的聚焦体验,正如欢快奔腾的木马,不停的旋转展示,让每个独立个体得到表现的机会,如下图所示:

这是最初的Carousel的表现形式,如同旋转木马一般,通过点击左右两端的箭头,屏幕上的每本书会依次轮转到用户眼前。Carousel可以用来帮助用户选择元素或者定位目标, 如今繁多的软件中,设计师们把Carousel的应用和表现又拓宽了很多,从而流行于很多web站点和应用软件中。

  • 使用前提

用户关注话题的心智模型跟图形密切相关。

当屏幕尺寸有限,无法一次性展示所有图形信息时,用户需要在同屏内(无页面切换的情况下)查看一些图片相关内容,能够很好的展示当前选择的详细信息,可以帮助用户进行选择决策。

  • 交互方法

无论是desktop的普通软件或者web page,还是基于mobile的触摸式应用,Carousel都能够:

  1. 提供焦点信息
  2. 允许滚动
  3. 按照一定规则组织内容顺序
  • 表现形式

>屏幕一次展示部分内容。

假使有数张图片,不会显示所有图片,而只一次性显示部分图片(由页面尺寸决定,一般5-8张比较合适)。

>提供视觉焦点。

-Thumbview

最近开始流行在Carousel中加入视觉焦点,把当前选中的图片放大独立显示,甚至添加特效,放在前面最显眼的位置。

-No Thumbview

不带预览图的多数本身图片尺寸就足够大,或者无需提供足够细节的内容。

>拥有选中状态的视觉提示。

选中的图片能从视觉上轻易辨识,比如提供一个indicator或者flag表明被选中状态。

>图片之间能够利用滚动条或者按钮进行滚动浏览。

这是Carousel最大的特色,图片能够按照一定的顺序来回滚动。

-Non-circular

-Circular

>图片排列方式

-Order matters

所有内容按照一定的规则排序显示,邻近图片之间有关联。

-Disordered

随机排列图片,互相之间没有关联关系。

  • 应用范围

Carousel一般用于以下方面:

1. 照片浏览

用户通过它来对照片进行浏览,挑选感兴趣的目标照片查看。

例如Picasa,FlickR…

2.产品展示

电子商务网站中经常用到的交互形式,利用Carousel来对当前产品的方方面面进行图片展示。

例如淘宝、易讯、京东…

3.图片搜索

海量图形中快速找到目标。

例如Bing Image, Imagery…

时间: 2024-09-18 21:43:08

图形展示交互方式Carousel的相关文章

脸萌一夜走红,很大程度上取决于切中了图形展示和社交工具的点

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客 站长团购 云主机 技术大厅 原标题:脸萌一夜走红,很大程度上取决于切中了图形展示和社交工具的点,这两者本身就很容易擦出火花 [IT时代周刊深度观察]不知道大家是否留意,在微信朋友圈有人不停的晒卡通"萌照"?"萌照"还都是和你朋友有点像的可爱卡通头像.这是一款红遍各大社交平台的App的杰作,这款App名叫"MYOT

交互模式应用(3) : Carousel

图片作为描述有形事物的一种方式,不但能直接传达视觉信息,包括几何特征.形态.位置大小和色彩等,还能传递内在信息,比如意图.要求.风格.性格和计划等.现代设计中,图形的表现力一直远超其他表现形式,因此得到大多数设计师的青睐.A picture is more than thousands of words, 如何利用图片进行创作理念表达和思维传递成为设计工作中的重点之一. 在交互设计中,如何才能在有限的空间内展示尽可能多的内容,并且保留视觉焦点? 今天我们要谈的是Carousel,一种常见的图形展

界面灵活 可扩展

什么是界面灵活.可扩展? 在设计界面布局时,充分考虑到在产品发展变化的过程中,信息块数量的增减,以及各个信息块内容的增减,以保证界面的设计方案在各种情况下都能达到完美统一的展示效果. 典型问题 1. 一个内容模块中内容量增加的时候,模块不能适用,页面样式错乱. 2. 一个信息区块已有多个tab,当需要再增加更多tab的时候,区块不能容纳,需要重新设计. 问题描述 界面上的空间有限,而要展示的内容可能会是大量的.很多时候,随着产品功能的不断变化,界面布局会发生变化.这种变化会导致界面上的信息块数量

设计技巧分享:11个图形深度暗示的方法

文章描述:提升设计的立体感.深度感!11招. 为设计增加深度能够让你的设计看起来更写实,而且也有视觉趣味.营造出一种三维的延伸感,从而让观看者陷入你的设计之中.而且,还能帮助你在你想要的地方构建视觉切入点. 我们是三维的存在,我们周围的物体也是三维的,但是屏幕是二维的,缺少的那个维度意味着在页面上的视觉表现要比真实生活的视觉感差.通过一些图形手段,把缺少的那维找回来可以提升真实感,一种物理感. 那我们怎样在设计中创造深度呢? 深度感暗示 首先,有两种深度暗示: 一种是图形暗示--可以在真实的绘画

基于dropwizard/metrics ,kafka,zabbix构建应用统计数据收集展示系统

新blog地址:http://hengyunabc.github.io/about-metrics/ 想要实现的功能 应用可以用少量的代码,实现统计某类数据的功能 统计的数据可以很方便地展示 metrics metrics,按字面意思是度量,指标. 举具体的例子来说,一个web服务器: - 一分钟内请求多少次? - 平均请求耗时多长? - 最长请求时间? - 某个方法的被调用次数,时长? 以缓存为例: - 平均查询缓存时间? - 缓存获取不命中的次数/比例? 以jvm为例: - GC的次数? -

Zabbix与RRDtool绘图篇之图形属性归档

我按要求分了两大类主机硬件类和应用信息类.主机类主要展示主与机器相关的监控图如网络.硬盘.CPU负载.内存等.应用信息大类又细分为Nginx_PHP.MySQL.Redis等.效果如下:     实现这些图形的分类第一步,数据库表的设计models. from django.db import models, connection # Create your models here. ################################################# class

艾伟:用MSChart展示多维数据集

        之前谈到过用MSChart可以比较直观方便的实现对多维数据集的展示,做得比较粗略.这次详细介绍下我的经验,并提供主要的试验代码段.        有必要强调一下,对多维数据集的展示,层次性是非常必要的.多维数据集本身就是带有层次结构的,如何直观而又不产生歧义的正确展示出其原本的数据集合结构,成为众多据仓库展示工具软件开发商关心的问题.在选型方面,目前市场上已经有比较多的选择,相当多的第三方图形控件就已经直接支持多维数据集的展示,即直接把CellSet结果赋给该控件的DataSou

用MSChart展示多维数据集

之前谈到过用MSChart可以比较直观方便的实现对多维数据集的展示,做得比较粗略.这次详细介绍下我的经验,并提供主要的试验代码段. 有必要强调一下,对多维数据集的展示,层次性是非常必要的.多维数据集本身就是带有层次结构的,如何直观而又不产生歧义的正确展示出其原本的数据集合结构,成为众多据仓库展示工具软件开发商关心的问题.在选型方面,目前市场上已经有比较多的选择,相当多的第三方图形控件就已经直接支持多维数据集的展示,即直接把CellSet结果赋给该控件的DataSource即可.但是这些目前毕竟是

21款创意十足的水下网页设计

  在网页设计中自然图案的展示是很常见的一个手法.设计师通常喜欢用各种景观照片.风景插图或者乡村风格的视频来增加网站自身的自然度.现在我们把思绪聚焦在航海主题上.海洋并不缺乏强大的情绪,相反它能够激发一系列积极的感受,在网站设计中见证这样一个骇俗的场景足以让我们感受到它戏剧性的效果,在心中刻下明显的印记. 展示海洋有多种不同的方式.它可以是一个简单的海景,一幅神秘的海底世界,水里有个潜水员,或者是一些带有幻觉的照片处理,或者是惊人的海洋生物展现.每种方式都可以添加一些标新立异的设计,这样子会起到