When we`re only No.2, we try harder之淘宝节日LOGO互动设计小探讨(2)
作者:健刚 来源:Taobao.com UED Team 发布时间:2010-01-20 10:31:00
3.淘宝2009圣诞节及2010元旦的LOGO设计
设计六一儿童节LOGO的时候,我们采用的是bonus情节的方法,也就是说,如果用户鼠标不与LOGO发生互动的话,是看不到奖励的故事情节的。而2009圣诞节及2010的元旦LOGO是采用Recall的方法,当动画播放到定格时,鼠标响应区域出现,rollover则重新播放之前已经发生过的某个情节。
以上所有的互动指令都是使用了鼠标Rollover的方式,那么我们是否可以使用Press(左键点击)的动作呢?如果节日LOGO只是出现在首页(像淘宝那样),此时并不作为一个回到首页的救生圈功能,那么Press与Rollover可以是一致的。然而在网络广告中,Press已经默认成为一个跳转的指令,所以在一般只是起展示作用的视觉设计中,用Rollover比Press更容易让受众“安心”。不过如果在设计触摸屏FLASH互动动画时,Rollover又不太管用。
4.触摸屏上的节日LOGO设计
传统的FLASH动画由于可以将鼠标悬停在响应区(Hot zone)上方,所以通常会做Rollover动画来响应动作。(有Rollover动画后,一般不会再设计释放(Release)动画,否则整个点击过程冗余,影响用户体验)。
使用触摸屏时,手指放在感应区上方悬停,并不能触发交互动作,因此绝大部分情况下,是没有Rollover状态的(触摸屏加上WII技术又另当别论)。所以,响应用户点击行为的提示动画会在手指按下(Press)并且脱离接触(Release)的那一瞬间才开始。(注意是Release时才开始,如果在Press时动画就开始播放,手指就会把动画部分挡住。) 另外,比较高级的触摸屏终端支持指尖长按(Long Press)、拖曳(Drag)等行为,设计时可以作为交互动作的补充。
从图例可以看到,触摸屏的FLASH LOGO动画设计与普通的设计差别并不大,除了Rollover动作改成Press(Actually: Release)动作外,最大的区别可能在于当鼠标Rollover时,动画可以不断反复播放,而换成触摸屏时,手指Press一下只能Recall一次,要Long Press才能不断重复Recall的情节。在整个设计过程中,指尖Long Press, Double Click甚至Drag可以产生更丰富的互动行为,从而引出更多的戏剧化情节和视觉效果。当然,这种设计运用在节日LOGO上成本比较高,(设计制作、用户摸索和学习互动行为两方面的成本)。如果运用在较大型的互动动画或者网络广告上,则可以使受众与广告发生更多的互动、从而提高用户的参与度、提升其品牌体验。如果要让消费者实现跳转怎么办?用户体验设计良好的网络广告通常都会把跳转的响应区域单独划分开来。
小结一下, 无论是平面插图、FLASH动画或者互动动画,作为节日LOGO设计的形式来说并没有孰好孰坏之分,关键是能否与应用的环境相搭配、是否与网站的个性和定位相吻合。在此基础上,加上一点点无论是视觉还是交互上的想象力和创意,将使您的节日LOGO在浩如烟海的同质化设计中脱颖而出、为用户带来惊喜、使他们留下良好的品牌印象。When we`re only No.2, we have to try harder.
上述三个淘宝节日LOGO SWF格式下载地址:


猜你喜欢
- 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转昨天发现有些路由不能正常跳转,找
- ID3决策树是以信息增益作为决策标准的一种贪心决策树算法# -*- coding: utf-8 -*-from numpy import *
- import timefrom selenium import webdriverfrom selenium.webdriver.commo
- Matplotlib效果图如下主要使用matplotlib.animation.FuncAnimation,上核心代码,# 定义静态绘图函数
- 环境:Ubuntu14.04,tensorflow=1.4(bazel源码安装),Anaconda python=3.6声明变量主要有两种方
- 字符编码我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题。因为计算机只能处理数字,如果要处理文本,就必须先把
- 1.查询表名: 代码如下:select table_name,tablespace_name,temporary from user_tab
- 前言本文主要介绍的是Python如何使用zip函数同时遍历多个迭代器,文中的版本为Python3,zip函数是Python内置的函数。下面话
- A.课程内容本节课主要学习函数的返回值returm,通过学习编写一个汇率转换器程序。B.知识点(1)定义函数(2)调用函数(3)返回值C.用
- 最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻
- 大家好,我是安果!最近在部署前端项目的时候,需要先将前端项目压缩包通过堡垒机上传到应用服务器的 /tmp 目录下,然后进入应用服务器中,使用
- 目录项目地址:前言使用方式主要代码blive_record.pyconfig.py(配置文件)项目地址:https://github.com
- 为了熟悉Python基础语法,学习了一个经典的案例:飞机大战,最后实现效果如下:实现步骤:①下载64位对应python版本的pygame:p
- islower()方法判断检查字符串的所有的字符(字母)是否为小写。语法以下是islower()方法的语法:str.islowe
- 首先如果柱状图中有中文,比如X轴和Y轴标签需要写中文,解决中文无法识别和乱码的情况,加下面这行代码就可以解决了:plt.rcParams[&
- 你一定听说过这句著名的数据科学名言:在数据科学项目中, 80% 的时间是在做数据处理。如果你没有听过,那么请记住:数据清洗是数据科学工作流程
- 本文实例讲述了python字典基本操作。分享给大家供大家参考。具体如下:d2 = {'spam': 2, 'ham&
- 摘要1,EXEC的使用2,sp_executesql的使用MSSQL为我们提供了两种动态执行SQL语句的命令,分别是EXEC和sp_exec
- 目录索引模型B+Tree索引选择索引优化索引选择性覆盖索引最左前缀原则+索引下推前缀索引唯一索引索引失效总结索引模型哈希表适用于只有等值查询
- 前言Python 开发者可能都听说过鸭子类型和猴子补丁这两个词,即使没听过,也大概率写过相关的代码,只不过并不了解其背后的技术要点是这两个词