UED

Firefox下实现复制文本内容的方法

Posted in Java, Me, UED on 七月 16th, 2009 by corrie – 3 Comments

刚做了一个网址,可以说是put8.com的升级版 http://5url.cn,需要一个复制按钮,用IE的不行,用有些朋友提供的flash版本的也不行,因为我不会写FLASH AS3,所以只能找资源。正好发现了http://bit.ly用的是flash版本的,经过用firebug分析。用闪客精灵反向解析了flash的代码,贴出来一部分供大家学习。

private function copyClick(param1:MouseEvent) : void
{
var e:* = param1;
try
{
this.copyText = ExternalInterface.call(“CopyClipboardButton.getCopyText”, this.copyTextContainerId);
trace(this.copyText);
trace(this.copyTextContainerId);
}// end try
catch (error:Error)
{
this.copyText = “”;
}// end catch
if (this.copyText == “” && this.copyTextOrig != “”)
{
this.copyText = this.copyTextOrig;
}// end if
System.setClipboard(this.copyText);
if (this.imageUrl == null)
{
tf.htmlText = “Copied!“;
}// end if
return;
}// end function

他用ExternalInterface.call方法调用了外部的方法,获得了值然后传回到FLASH执行copy。
就写了CopyClipboardButton.getCopyText方法测试

CopyClipboardButton = {};
CopyClipboardButton.getCopyText = function(){alert(‘text’);}

测试执行JS函数成功,修改函数成返回值的形式,通过Flashvars把调用的元素和图片定义好就OK了

var CopyClipboardButton={};
CopyClipboardButton.getCopyText=function(a){
var b=document.getElementById(a);
try{return(b.value||b.innerText||b.textContent)}catch(c){return”"}
};

<object width=”61″ height=”30″>
<param name=”movie” value=”CopyClipboardButton.swf?v=3.0″/>
<param name=”FlashVars” value=”copyTextContainerId=copyTextValue&fontSize=14&fontFace=Helvetica&fontColor=#555555&imageUrl=./index_copy_button_bento.jpg&copyText=”/>
<param name=”quality” value=”high”/>
<param name=”menu” value=”false”/>
<param name=”wmode” value=”transparent”/>
<embed width=”61″ height=”30″ type=”application/x-shockwave-flash” src=”CopyClipboardButton.swf?v=3.0″ flashvars=”copyTextContainerId=copyTextValue&fontSize=14&fontFace=Helvetica&fontColor=#555555&imageUrl=./index_copy_button_bento.jpg&copyText=” wmode=”transparent”/>
</object>

一个Flash版本的复制按钮就OK了,FLASH AS3跟JS进行交互来实现一些功能的实例其实很多。

  • Facebook
  • Twitter
  • Share/Bookmark

推荐:Web 开发与设计师速查手册大全(上)

Posted in Collation, UED on 七月 4th, 2009 by corrie – 1 Comment

Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 Web 色值,某个 JavaScript 库的核心语法,这类资料如果攒齐了,怕有半间屋子那么多,如果用 Cheet Sheet 也许几十页纸就够了,本文收集了近百份用于 Web 开发与设计的 Cheet Sheet,你会发现他们非常实用。

HTML, XHTML, CSS2

CSS2 Cheat Sheet

不仅是一份完整的 CSS2 速查手册,还让你了解每个属性该怎么用。预览下载 (PDF)

Gosquared CSS help sheets

设计和结构都很整齐,漂亮。下载(PDF)

CHEAT_SHEETS

addedbytes CSS2 Cheat Sheet

该速查手册只有一页纸,包含 CSS 2.1 全部选择器和属性,还包含一个盒子模型示例。下载(PDF | PNG

Core css

将 CSS 的核心知识分成3部分,包含了 CSS 的方方面面。下载 (需免费注册)

core css

core css

CSS Shorthand Cheat Sheet

一些不容易记住的 CSS 元素。下载 (PDF)

CSS2 – Quick Reference Guide – PDF 下载(PDF)

XHTML 1.1 Cheat Sheet

XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载

CHEAT_SHEETS

Gosquared html help sheets

设计漂亮,结构精良的 HTML 速查。下载(PDF)

CHEAT_SHEETS

HTML Cheat Sheet

一份 A4 纸大小的单页 HTML 速查表。下载 (PDF | PNG

CHEAT_SHEETS

HTML5 Canvas Cheat Sheet

HTML5 Canvas 对象的速查手册,直接编译自 WHATWG specs 细则,只是更容易阅读一些。下载 (PDF | PNG

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

HTML 字符标识速查。下载 ( PDF | PNG

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

该表包含 HTML 4 字符标识,包括 ISO8859-1 (Latin-1)  中的字符。预览 | 下载CHEAT_SHEETS

HTML Colors Cheat Sheet

该  HTML 颜色表包含 1050 种颜色,按色度区分,每个色度包含25中不同饱和度与亮度。还包含216种 Web 安全色。预览 | 下载(PDF)

CHEAT_SHEETS

RGB Hex Colour Chart

RGB 16进制颜色表。包含216种 Web 安全色。下载 (PNG | PDF

CHEAT_SHEETS

Scripting 速查手册

JavaScript Cheat Sheet

包含 JavaScript 的 的方法与函数,正则表单时,以及 XMLHttpRequest  对象。下载(PNG | PDF

CHEAT_SHEETS

JavaScript DOM Cheatsheet

JavaScript DOM 结构速查手册。下载(PDF)

CHEAT_SHEETS

jQuery 1.3 Cheat Sheet

jQuery 1.3 速查表。预览 | 下载(PDF)

CHEAT_SHEETS

jQuery Cheat Sheet 1.2 jQuery 1.2 速查手册 下载(PDF)

CHEAT_SHEETS

mootools 1.2 cheat sheet

另一个 JavaScript 库 MooTools 1.2 速查手册。下载(PDF)

CHEAT_SHEETS

prototype 1.5.0 JavaScript 库 Prototype 1.5 速查手册。下载 (PDF)

CHEAT_SHEETS

Prototype 1.6.0.2 Cheat Sheet

JavaScript 库 Prototype 1.6.0.2 速查手册。下载(PDF)

CHEAT_SHEETS

Addison-Wesley’s JavaScript Reference Card

JavaScript 参考手册。下载(PDF)

CHEAT_SHEETS

jQuery selectors

对 jQuery 开发者来说,该速查手册不可或缺,详细列举了 jQuery 所有选择器。下载 (徐免费注册)

CHEAT_SHEETS

服务器端编程

PHP Cheat Sheet (V2)

单页 PHP 参考手册,包含日期格式,正则表达式以及常用函数。下载 (PDF | PNG

CHEAT_SHEETS

visibone

该站包含2页基本PHP速查手册,以及8页高级速查手册。非免费。

CHEAT_SHEETS

Php 4 Reference Card PHP4 参考速查手册。下载(PDF)

CHEAT_SHEETS

PHP Cheat Sheet

PHP 比较操作速查手册。下载

CHEAT_SHEETS

Core C# and .NET Quick Reference C# 与 .NET 速查参考手册。下载(PDF)

CHEAT_SHEETS

ASP.net ASP.NET 速查参考手册。下载

CHEAT_SHEETS

MS ASP 古老的 ASP 与 VB Script 速查手册。下载(PNG | PDF

CHEAT_SHEETS

msnet formatting strings 微软 .NET 字符串格式化速查。下载(PDF)

CHEAT_SHEETS

SQL (Structured Query Language) in one page SQL 语言速查。直接访问

CHEAT_SHEETS

MySQL Cheat Sheet MySQL 速查。下载(PNG | PDF

CHEAT_SHEETS

XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问

CHEAT_SHEETS

XML Syntax Quick Reference XML 语法参考。下载(PDF)

CHEAT_SHEETS

SEO 速查手册

The Web Developer’s SEO Cheat Sheet

出自 SEO MOZ 的 SEO 速查手册,包括重要的 SEO HTML 标签,搜索引擎索引的限制,Title 标签语法建议等。下载(PDF)

CHEAT_SHEETS

本文资料来源:http://www.tripwiremagazine.com/tools/cheat-sheets/front-end-web-developers-toolbox.html
翻译整理:COMSHARP CMS 官方网站

  • Facebook
  • Twitter
  • Share/Bookmark

IE6浏览器不显示PNG图像滤镜的解决方法

Posted in UED on 七月 2nd, 2009 by corrie – 3 Comments

今天美工给了一个宣传页,用了透明的PNG图片和滤镜,也没看直接写到模板后,发现在IE6下无法显示。

代码如下:

.top_txt{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/reg/top10.png’,sizingMethod=’scale’);}

最终解决办法为,把相对地址换成绝对地址即可,代码如下:

.top_txt{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’http://res.pplive.com/baike/games/zsg/reg/top10.png’,sizingMethod=’scale’);}

  • Facebook
  • Twitter
  • Share/Bookmark

说说豆瓣电台的界面设计[转]

Posted in UED on 七月 1st, 2009 by corrie – 1 Comment

使用豆瓣电台的过程中,我已经三次错将喜欢的歌曲拖进了垃圾箱。原因在于,在听到好歌的激动情绪中,点击了电台上最醒目的 垃圾箱 按钮,我以为那会是收藏。

豆瓣电台本身是主动推送给听众的,因而需要听众交互的地方少,按钮就那么几个。简洁明了的设计在这里是极恰当的,但如果不注意元素(展示元素,操作元素)摆放的位置,简洁的设计一样会带来使用问题。在我看来,豆瓣电台在界面上就存在如下问题:

1 操作元素 布局分散

电台界面上有如下操作元素:a 音量调节 b 关闭电台 c 加心收藏 d 删除曲目 e 跳过曲目

可以看到,即便简单如5个操作元素,也被分布在三个区域了,我觉得(也根据实际使用)这样并不合理。

操作元素少的界面,如非功能特殊,元素们应尽量在一个集中的区域,以免用户操作跨度太大或找不到相应的操作入口。

我的方案是,将这5个操作元素都集中在显示屏下方的区域。(见我的设计图)

现在的豆瓣电台UI

当前的豆瓣电台界面

我修改的豆瓣电台UI

我修改的豆瓣电台界面

2 操作元素 未根据操作行为进行归类与安排

音量调节 与 关闭电台 按钮摆在一起,二者操作模式不同,况且关闭电台是影响很大的操作,二者在一起颇古怪。

动作相似的操作行为,如非功能特殊,应该安排在一起。这里,加心收藏、删除曲目、听下一曲 三者都是“点击”的操作模式,可以并行排在一起。(关闭电台 也是 点击 操作,但功能特殊且少用,不在此列)

根据操作后果的严重性(比如是否能挽回),以及位置的醒目性,再来安排三者的顺序,我给的方案是:从左至右,加心收藏、听下一首、删除曲目。

另外,将 音量 元素与 关闭电台 元素 分开了,音量元素因为其外型长度,将之置于曲目显示屏下方。关闭电台置于右下的角落里。

3 显示元素 主次不适当

豆瓣电台里,显示元素有三块:a 封面 b 时间 c 歌曲名称及演唱者

我们看到,时间 元素是被置于歌曲名称上方的,颜色深,还是粗体,这一行除了它,没有其他元素。又由于这是个动态元素,本就吸引人的注意力,因而,时间元素 在这里非常引人注目。

但这个区域(时间+曲目)里究竟谁是更主要的呢?我认为是曲目。时间元素在这里过分突出,是个干扰。

将主次颠倒了一下,突出曲目名称,时间元素显示在右下角,并且颜色调淡,我觉得这样更相宜。

另外,电台里的专辑封面缩略图比较粗糙,不清晰,这个细节应该改善。

困扰我的问题

关闭电台 元素的摆放,让我头疼半天,怎么摆都觉得不合适。到后来我反思,它是必要的吗?

没有 关闭电台 按钮的 电台界面UI

没有 关闭电台 按钮的界面,是不是更好些?

我估计,设计人员保留这个按钮的作用,是设想的这样的使用情境:用户独立开一个电台窗口,最小化听音乐,不想听了,可以先关闭电台(但窗口保留,便 于他二次开启)。因为从豆瓣去到电台入口,步骤很麻烦。(bug 一枚,鼠标移到 关闭电台 按钮,没有提示文字,也没有 变色 等任何反馈。)

关闭电台 元素是个使用次数少的操作,位置应该不明显。奇怪的是,无论摆在哪里,它都很明显。尽管现在我将之挪在了右下角,以保持所有操作元素都在一个集中的大区域里,但仍不是最满意的。

原文地址:http://blog.hoooooney.com/2009/06/29/about_the_ui_of_douban_radio/

  • Facebook
  • Twitter
  • Share/Bookmark

好素材要分享,RSS图标素材推荐

Posted in Collation, Recomment, UED on 五月 5th, 2009 by corrie – 1 Comment

Ojingogo RSS Icon

Ojingogo RSS Icon

RSS图标按钮集合下载

2个RSS新闻图标,含ico和png格式。from sking & 下载地址

RSS订阅图标按钮集合下载

4个不同颜色、立体透明的RSS订阅图标 下载页面

RSS订阅图标按钮集合下载

一个3D模型风格的RSS订阅图标&下载地址

RSS订阅图标按钮集合下载

一套免费的RSS feed图标,反射,立体,透明效果,高质量 & 下载页面

免费的RSS订阅图标按钮集合下载

一套RSS订阅按钮,含透明效果和斜纹效果两种版本的20个图标,且提供PSD文件的下载 & 下载页面

免费的RSS订阅图标按钮集合下载

一个警示牌样式的RSS订阅图标,含png和ico格式 & 下载页面

免费的RSS订阅图标按钮集合下载

一个桔黄色的RSS订阅按钮图标,含有阴影和无阴影两种效果 & 下载地址

免费的RSS订阅图标按钮集合下载

http://thic.deviantart.com/art/RSS-53675750

一个ico格式的RSS订阅图标 & 下载地址

免费的RSS订阅图标按钮集合下载

9种不同颜色的RSS图标,含 .PNG格式- 128×128像素、.ICO格式- 48×48像素, 128×128像素、.ICNS格式- 128×128像素、还包含12个10×10像素到500×500像素的透明.PNG格式图标。下载页面

免费的RSS订阅图标按钮集合下载

一套RSS Reader图标,含png/gif/ico/bmp/icns格式,有16*16像素,32*32像素,48*48像素,128*128像素,共20余张。下载页面

免费的RSS订阅图标按钮集合下载

一个圆形、斜纹背景的RSS订阅图标,其提供的下载是PSD文件 & 下载页面

免费的RSS订阅图标按钮集合下载

一套PNG格式的RSS订阅图标,有10种颜色,128*128像素大小 & 下载页面

免费的RSS订阅图标按钮集合下载

4种颜色、PNG格式的RSS订阅图标 & 下载页面 from valentinaolini.com

免费的RSS订阅图标按钮集合下载

一个3D风格的RSS Feed订阅免费图标 & 下载页面

免费的RSS Feed订阅图标按钮集合下载

4个漂亮的RSS订阅圆形图标 & 下载页面

免费的RSS Feed订阅图标按钮集合下载

一套免费的Web2.0 RSS订阅图标集,包含4种颜色7种风格共28个图标,且提供PSD源文件下载 & 下载地址

免费的RSS Feed订阅图标按钮集合下载

RSS Icons 1.1图标,含5种风格 & 下载地址

免费的RSS Feed订阅图标按钮集合下载

一张时尚的”Feed me”图片, 完整图像比较大,适合一些特殊的页面使用。下载地址

免费的RSS Feed订阅图标按钮集合下载

一套包含动画版和非动画版的RSS订阅图标集,有25*25像素和50*50像素的规格,下载页面

免费的RSS Feed订阅图标按钮集合下载

一个RSS FEED LOGO,含PNG格式图片和Adobe Illustrator文件。下载页面

免费的RSS Feed订阅图标按钮集合下载

一套清新风格的RSS FEED订阅icon图标 & 下载地址

免费的RSS Feed订阅图标按钮集合下载

一个蓝色的RSS订阅图标 & 下载地址

免费的RSS Feed订阅图标按钮集合下载

蓝色的3D风格的RSS订阅按钮图标,包含一个.icns格式和PNG格式的图标。

免费的RSS Feed订阅图标按钮集合下载

一个很特别的怪物形象,用这样的RSS订阅图片的好处就是绝对吸引眼球。下载页面

免费的RSS Feed订阅图标按钮集合下载

一套Grunge风格的RSS icon订阅图标。 下载页面

免费的RSS Feed订阅图标按钮集合下载

Web2.0风格的RSS icons图标,包含 256, 128, 64, 48, 32和16 像素尺寸的高品质PNG格式图标。Download page

免费的RSS Feed订阅图标按钮集合下载

一个3D立体效果的RSS图标,看上去非常的酷,有258和512规格的PNG格式图标。下载页面

免费的RSS Feed订阅图标按钮集合下载

一个很有金属质感的RSS订阅按钮图标。Download Page

免费的RSS Feed订阅图标按钮集合下载

一套特别的RSS订阅按钮图标。下载页面

免费的RSS Feed订阅图标按钮集合下载

一个极富个性的Feed机器人形象。下载页面(跟此RSS bot一套的总共有10形象,都非常之酷,你喜欢的话也可以在下载页面找到)

免费的RSS Feed订阅图标按钮集合下载

一套黑色和黄色的RSS订阅按钮图标,有圆形,圆角矩形和按钮,含.PNG- 256×256,.ICO- 16×16-256×256,.ICNS- 16×16-256×256。下载页面

免费的RSS Feed订阅图标按钮集合下载

一套3D效果的RSS订阅图标,分别有代表Atom, RSS, & RDF的不同形象。下载页面

免费的RSS Feed订阅图标按钮集合下载

一套具有2D立体感的RSS订阅图标。 下载页面

免费的RSS Feed订阅图标按钮集合下载

这套RSS FEED订阅图标比较齐全,可以应用到博客的各个设计部分。 下载页面

免费的RSS Feed订阅图标按钮集合下载

这是个什么呢?蛋挞?呃,不对,一个有RSS标志的蛋挞。下载页面

免费的RSS Feed订阅图标按钮集合下载

这是一个SVG文件,里面包含了6种不同颜色的RSS FEED订阅ICON图标。下载页面

免费的RSS Feed订阅图标按钮集合下载

别致的一个图标。下载地址

免费的RSS Feed订阅图标按钮集合下载

很漂亮的一张RSS订阅图片。下载地址

免费的RSS Feed订阅图标按钮集合下载

透明,渐变,血液在流通,甚至镂空效果,这确实是一套很精致的RSS订阅图标,图标下载包里含6种颜色10种大小共60个图标,包括 256px、48 px、128 px 32 px、96 px、24 px、72 px、16 px、64 px、12 px。下载地址

免费的RSS Feed订阅图标按钮集合下载

动态的gif格式RSS订阅图标,下载地址

免费的RSS Feed订阅图标按钮集合下载

一个简单的3D效果RSS FEED订阅图标,简单,但很强大,立体感超强。下载页面

免费的RSS Feed订阅图标按钮集合下载

9个RSS订阅图标,128*128和256*256两种格式。下载地址

免费的RSS Feed订阅图标按钮集合下载

一个球型的Web2.0风格RSS订阅图标。下载地址

免费的RSS Feed订阅图标按钮集合下载

矩形的RSS订阅图标,含Windows版( 16×16, 48×48, 128×128)和Mac版(128×128).多种颜色选择,下载地址

免费的RSS Feed订阅图标按钮集合下载

文字图片图标,多种尺寸和颜色选择。下载地址

免费的RSS Feed订阅图标按钮集合下载

包含ico和png格式图片的RSS订阅图标,下载地址from Feedreader

免费的RSS Feed订阅图标按钮集合下载

小小的一个RSS订阅图标按钮,配色还不错。下载地址

免费的RSS Feed订阅图标按钮集合下载

12种不同的颜色风格,每个图标都是128*128的透明PNG格式。下载页面

免费的RSS Feed订阅图标按钮集合下载

特别,个性的RSS订阅图标。下载页面

免费的RSS Feed订阅图标按钮集合下载

这是iTunews Wi-Fi Store的图标,但是你同样可以把它当成RSS图标来用。下载页面

免费的RSS Feed订阅图标按钮集合下载

一套透明水晶风格的系统应用图标,看到那个RSS图标了没有。下载页面

免费的RSS Feed订阅图标按钮集合下载免费的RSS Feed订阅图标按钮集合下载

一个PNG格式的RSS订阅大图标,下载地址

免费的RSS Feed订阅图标按钮集合下载

载它,然后找到RSS订阅图标 。

免费的RSS Feed订阅图标按钮集合下载

一大串的FEED相关按钮,下载吧

免费的RSS Feed订阅图标按钮集合下载

播客专用的RSS订阅按钮,当然,如果你这个博客一定要用,也不会有人反对。下载地址

免费的RSS Feed订阅图标按钮集合下载

圣诞节水晶风格RSS订阅图标,没有人说不是圣诞的时候你就不可以用。所以,下吧

免费的RSS Feed订阅图标按钮集合下载免费的RSS Feed订阅图标按钮集合下载

来自RSS FEED的绿色拥抱,只是这个手是不是太瘦弱了一点,抱不稳啊!下载页面

免费的RSS Feed订阅图标按钮集合下载

一套高质量的PNG图标,其中的RSS订阅图标还不错,其实最主要的还是它的圆形边框阴影效果。下载地址

免费的RSS Feed订阅图标按钮集合下载

整个一套热门网站的图标,有一且RSS订阅图标。下载地址

免费的RSS Feed订阅图标按钮集合下载

这个黑色的RSS FEEMAIL图标恐怕更适合想办法显示给Spammer看,让他们在发垃圾邮件的同时订阅一下你的博客。下载地址

免费的RSS Feed订阅图标按钮集合下载

白色版本,下载地址

免费的RSS Feed订阅图标按钮集合下载

下载地址

免费的RSS Feed订阅图标按钮集合下载

N种颜色的RSS订阅图标。下载页面

免费的RSS Feed订阅图标按钮集合下载

30个免费的矢量RSS图标下载

免费的RSS Feed订阅图标按钮集合下载免费的RSS Feed订阅图标按钮集合下载免费的RSS Feed订阅图标按钮集合下载

免费RSS图标下载,含AI和EPS文件格式

免费的RSS Feed订阅图标按钮集合下载

来自一位吉它爱好者设计的RSS订阅图标,它就像吉它的弹片

免费的RSS Feed订阅图标按钮集合下载免费的RSS Feed订阅图标按钮集合下载

圣诞节RSS订阅图标

免费的RSS Feed订阅图标按钮集合下载
一套新的RSS订阅图标,其加入感叹号的概念创意不错。下载地址

免费的RSS Feed订阅图标按钮

有点古怪的RSS订阅按钮,下载页面

免费的RSS Feed订阅图标按钮集合下载

Related Resource Posts:

  • Facebook
  • Twitter
  • Share/Bookmark

淘小宝蚂蚁聊天表情V1.0-V2.0的制作过程

Posted in Collation, Recomment, UED on 四月 23rd, 2009 by corrie – 1 Comment

专门用于针对淘宝网交易沟通而设计淘小宝蚂蚁聊天表情终于在3月20号通过消费者社区小规模地向用户推广。具体的下载方法可以通过以下消费者社区的贴子找到:
http://forum.taobao.com/forum-474/show_thread—-21955823-.htm

制作该表情的意义在于:1.增加用户在使用淘宝网交易而进行沟通时的趣味性;2.在这种沟通过程中潜移黙化地在受众心目中建立起淘小宝–这一淘宝网官方的卡通形象,为日后在其它产品中的应用打下基础,进行品牌沉淀。

淘小宝蚂蚁聊天表情V2.0发布

淘小宝蚂蚁聊天表情V2.0

淘小宝蚂蚁聊天表情V1.0版本在公司内测之后,获得绝大部分同事认可的同时,也为我们不断完善、增加淘小宝表情的趣味性与可用性、并最终将其推向市场、为广大消费者所用提供了大量一手、非常重要的测试反馈建议。我们在V1.0版本上线后的当天下午、随即对淘宝内网贴吧、阿里内网、旺旺各聊天群、电邮等不同途径的反馈意见进行采集,分析并统计各不同表情使用的场合和频率,以及在视觉设计上的各种优化等建议。我们在第二天,马上总结了1.0版本的一些存在问题,并提出了相应的解决方法:

1  V1.0版本最主要的三大反馈建议:

A. V1.0版本70*70px格式不兼容MSN

B. 表情动作生动、有趣,但画面视觉效果略显粗糙,表情以SouthPark(衰仔乐园)的美国色块风格为主,对于国内受众或许显得缺乏质感,位面过渡比较生硬

C. FFE600的柠檬黄颜色色块有心理暗示效果,主要表现为蚂蚁形象向外扩散

2  V2.0版本如何解决上述问题:

A. 将所有表情重新再输出成 50*50px格式,果断砍掉脚的部位,使在50*50px格式下,主体脸部形象仍然保持突出、明显

B. 重新对所有表情进行细节上的刻画,加入过渡色、高光、明暗阴影、立体质感等视觉效果。这也是V2.0版本升级过程中遇到的最大问题:

如何在视觉画面质量与动画容量大小之间取得平衡,画面比旧版本精致,而又使动画容量保持在即时聊天工具快速传递表情的可接受范围之内。经过海量反反复复的测试、修改与调试,我们最终达到了比较理想的可接受效果。

C. 将淘小宝表情的所有身体元件都加上描绘的边框

D. 将一些使用率比较低的表情删除,加入更能适应于不同场景使用的一些新表情

3 草图

草图+小故事板

4 V1.0V2.0演变的过程
V1.0-V2.0的对比


V1.0V2.0的升级过程中,我们基本上把淘小宝旺旺聊天表情重头反复再做了2次,才达到目前的效果。值得庆幸的是,从目前收集到的反馈意见来看,对表情进行V2.0版本升级所付出的努力还是非常值得的,并且使我们有了更大的信心通过各种淘宝官方网站途径对外发布淘小宝聊天表情动画,以最终实现增强淘宝网的品牌认知度及黏性,在众多越来越同质化的C2C网站中建立起个性。


5 V1.0V2.0两组表情的静态视觉效果对比

V1.0与V2.0

淘宝UED视觉研究小组,非常欢迎大家下载使用喔,为了感谢大家看到最后这一行的努力,本套表情的直接下载地址如下:

http://download.taobaocdn.com/ant/Taobao_Smiley_Pack_v2.0.rar


本文转自淘宝UED团队博客:淘小宝蚂蚁聊天表情V1.0-V2.0的制作过程

  • Facebook
  • Twitter
  • Share/Bookmark

淘宝CSS框架研究(1):Reset CSS(八卦篇)

Posted in Collation, UED on 四月 23rd, 2009 by corrie – 2 Comments

八卦为先

八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:

  1. 你知道世界上第一份reset.css在哪么?
  2. * { margin: 0; padding: 0 }人品很坏吗?
  3. Eric Meyer和YUI是情侣吗?
  4. Google有用reset.css吗?
  5. No CSS Reset的口号是谁最先提出来的?

类似问题或者说困惑还能列举很多,reset.css极其简单又极其不简单。继续挖掘八卦之前,请先关机遐思,或去如厕更衣透透气,想想后再读下文。

不是历史

2004年,遥远又如近在眼前的昨天,Tantek被不同浏览器下默认样式的差异搞烦了,于是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。

对于基于Gecko引擎的Firefox等浏览器,请在地址栏中输入resource://gre/res/html.css,默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性:Really Undoing html.css. 知道CSS好玩,实在没想到CSS居然这么好玩。比如style, script { display: block }就可以显示CSS和JS源码,在做代码演示的demo页时,就不用辛辛苦苦用pre或textarea了(虽然因为ie不支持导致不实用,不过这的确是个思路)。

继续八卦:CSS Negotiation and a Sanity Saving Shortcut. * { margin: 0; padding: 0 }的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的,并且作者建议一定要先破后立,要将清扫差异和重置默认样式结合起来,这样才是正确的做法。

为何Global White Space Reset当初风光一时,如今却黯然销魂?* { margin: 0; padding: 0 }的 成功之处在于,管你三七二十八,统统抹平,人人生而平等!然而其失败之处也正是因为其威力太大,虽然捣了蜂窝得了蜜,却惹来群蜂追尾,麻烦无限(因为被抹 平的样式,你得再重新设置回来,比如input的padding等)。这就如西汉一代名将韩信哪,是成也萧何,败也萧何!

还有一个传说中的说法是,星号*选择符还会导致性能问题。由于一直没找到可靠的资料,我又不知道怎样才能测试CSS选择符的渲染性能(知道的请一定告诉我),这个传说中的性能问题就只能当它是传说了。

眨眼一瞬间,三年就过去了。2007年,Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案:Eric的reset.css是源自YUI的,可能是母子关系,但总之不是情侣关系。

很快,Eric发布了第二版:Reworked Reset. 后面的解释极具价值,很多属性值的设置在这里有详尽说明。

火爆的回复给了Eric源源不断的动力:Reset Reloaded. 看完这篇文章,有一种尘埃落定的感觉。

但上面的文章并不是最终版本,2008年2月份,Eric Meyer还更新了一次:CSS Tools: Reset CSS

说完Eric Meyer的心路历程,不得不提一下YUI Reset CSS. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面,前不久已离开YAHOO,让我的直觉里对YUI都有点担心起来了,唉。

上面是两个最有名的CSS Reset方案。但世界永远是多样化的,比如Less is more – my choice of Reset CSS. 这和Eric Meyer的期望其实是一致的:不同的应用环境下,应该选择自己的reset方案,而不是简单的copy过去。比如Google首页,在这种特定页面里,不用就是一种最好的用。

更多眼花缭乱的Reset方案请参看:A Killer Collection of Global CSS Reset Styles. 很标题党,内容就鱼龙混杂了。

最后,隆重揭晓最后一个八卦问题的答案:No CSS Reset. 提倡的核心思想也是Less is more. 原因很简单,* { margin: 0; padding: 0 }杀伤力太大,在某些场合下,Eric Meyer的方案杀伤力也还是太大了。有想法并说出来,总是好的。

有反对就会有支持:Why I Like (and Use) Reset CSS. 公说公有理,婆说婆有理,并非所有问题都需要一个确切的答案,有时过程本身,就是追求的结果。

Eric Meyer对No CSS Reset一文的回复:Crafting Ourselves. 读罢此文,明月松间照,清泉石上流。下面摘录两段,做为此八卦闲文的完结:

Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.

…It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.

预告:下一篇是技术篇,将详细探讨淘宝目前使用的Reset CSS方案,欢迎各位提前准备好板砖,我已购买坚固头盔一顶…… 敬请期待。

转自淘宝UED团队博客:淘宝CSS框架研究(1):Reset CSS(八卦篇)

  • Facebook
  • Twitter
  • Share/Bookmark

推荐:韩国Visibone经典配色卡,做设计少不了

Posted in UED on 二月 9th, 2009 by corrie – Be the first to comment

e9858de889b21

e9858de889b22

e9858de889b23

  • Facebook
  • Twitter
  • Share/Bookmark

[图]完全用CSS写出来的表单布局和仿table表格布局

Posted in UED on 十二月 25th, 2008 by corrie – 4 Comments

为了应付项目的需要,写了两个类来做表单和表格的设计。

e69caae591bde5908d-11

这个表格用到了几个层的嵌套来实现了cell-padding的效果和边框的效果。采用float left的方式进行定义,完全可以像操作表格一样操作它,快下班的时候加入了两种特性,一种是尾行的特殊功能,比如在选择控件时实现反选、反选等,还加入了odd双行的换色的显示。完全定义的web2.0表格,不用再用table了。当然位置一定要设置好。否则可能会有问题,目前测试ff下ie 6 下均正常。

e69caae591bde5908d-2

这个是用div+label+span来实现的一个表单框架,可以实现form,group,line到element的单独控制,行间换色显示和列间的换色显示,控制台的特殊设置和title及对提示的控制。更多的就不说了额。有空把代码整理了贴上来

  • Facebook
  • Twitter
  • Share/Bookmark