今天看到《用户什么时候会向别人推荐一个产品?》这篇文章。然后想问用户什么时候会接受别人推荐的产品。
说个最近发生的个事吧。
我使用的默认浏览器是chrome,具体说是chromeplus。我曾向周围的同学推荐过chrome有多好,有多好,只有2个人开始使用chrome。再加上我和另外一个同学,chrome总共只有4个用户。
世界杯开始后,我们寝室看球用的是chrome,前面发过一篇文章“CNTV的直播画面,chrome比IE要快3分钟以上”,所以我们寝室的怒吼声和叹息声比周围寝室要快3分钟,这种恶劣的剧透行为,严重影响到周围寝室的看球情绪。于是一夜之间我们这一层所有看球的电脑上都装上了chrome。而从18日到今天22日,使用chrome作为默认浏览器的同学至少已经有9个。
后来经测:CNTV的直播画面,opera比chrome快3-5秒。但是并没有寝室再次更换浏览器——安装opera看球。
用户什么时候会接受别人推荐的产品。唉,这可以推出好多原因啊。
说到浏览器,虽然一直觉得标签式的浏览器很好用,比如chrome,但我也发现很多朋友非常不喜欢。
原因很多:
比如不能使用alt+tab切换页面(很多浏览器ctrl+tab的切换都是顺序硬切,体验非常差);
比如标签式浏览器开多个QQ空间会互相覆盖,就是一次不能开多个QQ空间。很多朋友都有一次挂N个QQ的习惯,自然有时候要同时开N个QQ空间。
比如很喜欢什么百度工具栏,迅雷工具栏之类的东西,chrome什么的看上去太极简了。(确实有许多朋友喜欢或者不在意浏览器的工具栏非常“厚”。作为一个14.4寸屏1280*800的笔记本用户,我感到压力很大,如果使用那种浏览器,打开一个页面,屏幕可能只能显示高度400px不到的页面内容。对了!我姐屏幕10寸左右的某上网本上,她的IE浏览器工具栏占到屏幕的一半,她竟然一直用得很欢乐。)
……
……
http://www.lolibeta.com/pc/1453.html
有些观点让我很受启发,但文中所述界面和自由度,至少这两个名词不应该放在一起讨论。
一般用户需要用户体验,其实就是需要一个广泛普通的default,和繁多、自由度并不冲突。
高级用户也只是需要一个default,只不过要复杂的多,很可能是按自己喜好来的设置。
界面仅仅是用来表现不同用户的不同default。
界面是表现,自由度是功能。功能再复杂的工具依然可以提供一个极简的界面。
用户体验和强大功能之间的难题,其实就是default的难题。
功能越繁多,default的选择就越多,就越难找到一个广泛普通的default。和功能不一样,default更多地涉及到“人”的不定因素,做好的成本就高多了。
因此砍掉一些不常用的功能(如果99%的人只能用到1%的功能,但是却要打开一个反应缓慢、狂占内存、体积100%的软件,那么给软件体积、响应速度等方面的default显然是有问题的。),采用第三方扩展的形式,既容易满足大多数普通用户default需求,然后将高级用户default设置中“人”的因素交还给人去处理,这个过程才是用户体验的整体提升。
更多时候,简单和复杂的整合偏向于复杂。由俭入奢易,由奢入俭难。这也是一个“人”问题。由复杂转回简单,除了客观限制因素,也必然会遭到既有用户的反对。
gvim和vim,你会推荐新用户学习哪个?
如果DotA从下个版本开始不再是增加英雄和物品,而是合并、精简游戏元素,你还会去玩它吗?
这就涉及到最初的架构和控制,不是十分容易就能想到、做到的。
就算vim和DotA难于上手,也不影响他们成为领域中的强大,难于上手反而成为筛选和过滤的利器,反而成为其吸引人的优点。
说到底,用户体验最多只是锦上添花,产品本身优秀才是根本。
定位跳转——ScrollTo
官方下载地址:ScrollTO
演示地址:Demo
增强jQuery1.4.x的scrollLeft() scrollTop() 。
颜色渐变动画——animate() color
下载地址:colorAnimation
jQuery1.4.x的animate()不支持颜色渐变,使用该插件即能支持颜色渐变。
通常来说,CSS非常简单。但是当浏览器厂商开始实现CSS3特性,问题开始变得有些复杂了。不难,只是有些复杂。这可能包括两个方面:首先有些心得CSS3属性(比如,transition、渐变、transform等)不是那么简单,其次我们不得不使用浏览器厂商指定扩展。
直到你最喜欢用的IDE原生支持CSS3,你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的,这里将收集能够助你学习和使用CSS3的真正有用的工具。
生成器
CSS3 Please!跨浏览器的CSS规则生成器,支持:border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
CSS3 Sandbox有一些列的CSS3生成器:线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
@font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。
JavaScript方案
Modernizr一个确实很有用的JavaScript库,可以检测HTML5/CSS3的原生支持,并为你提供一种维护良好控制级别的方法,不管浏览器的能力。如果你更喜欢使用MooTools,你可以使用MooModernizr (MooTools 版本的Modernizr)
Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎,被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器,比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
YUI 选择器组件YUI CSS3 选择器组件,提供一个收集、过滤和测试HTML元素的稳定的简写方法。
ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本,然后在你的样式表中使用这些伪类选择器,然后IE就可以使用了。
参考指南
CSS 3.0参考手册
腾讯ISD WebTeam制作的一个CHM格式的参考手册,很全面,介绍+实例,推荐下载收藏;
我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表;
浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性,包括CSS3特性和选择器的支持。
CSS3选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试;
SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器,他就会返回选择器匹配的相关说明。
CSS3手册与快速指南提供当前CSS3规范的列表,列出属性可用的值、常用的选择器模式参考,以type/单位组织,选择器类型参考和单位参考和信息(另有PDF 版本);
CSS3伪类SitePoint的CSS参考的相关部分内容;
CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表,PDF格式;
CSS3色彩名称
提供所有147种色彩的名字以及按照字母排序的值。
如有更多有用的工具,欢迎通过评论分享。
整理自:List of Really Useful Tools For CSS3 Developers
中文:CSS3开发工具收集
CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS 来格式化和造型网页。其轻量级的特性,大大超越以往诸如表格之类的布局方法。
CSS 并没有想象中的难以捉摸。以下是一些利用 CSS 创建造型设计元素的技巧和技术,也包括一些结合 JavaScript 或 XHTML 以扩展网站功能的案例,适合作为学习 CSS 的基本指南。当然对于经验丰富的设计师,同样值得阅读。
1. 布局和用户界面技术
当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面,有几乎无限的可能性。下面是一些更有趣的技术。
The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码,但这个特殊方法仅使用一个 DIV 元素,并且简单得多。
New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚技术,兼容 Google Chrome 浏览器,并且不需要空 DIV 辅助。
Simple Page Peel Effect with jQuery & CSS
此教程结合 [...]
原文链接:Top 10 CSS Gotchas
译者:hosven
本文不是直译。译文中括号内为译者为方便理解所加。原文中有直观的演示示例,推荐读者前往细窥。
我从事CSS/HTML工作快五年了,这里有几条经验之谈愿与有意学习CSS的朋友们分享。
1、使用CSS Reset
写任何CSS,首先要做的就是把reset(重置)放进去,而且要放在最前面。reset能够帮你消除浏览器的默认设置,解决部分的浏览器兼容性问题。在这里推荐两个常用的CSS reset library : YUI Reset, blueprint 。
2、不要忘记clear
容器内设为浮动(float)的标签如果显示溢出容器,那你需要在容器底部加入一个标签( <div class="clear" ></ div> )来清除(clear)浮动。并设置一个专门的类(class):
(原文中有演示示例)
.clear { clear: both; }
3、该用margin还是padding?
有关box-model(盒模型)的问题,因为IE有不同于W3C标准的盒模,详细情况点这里。
(原文中有演示示例)
4、IE的hasLayout属性
我不推荐搞懂,如果你坚持,看这里。
如果有些东西在只有IE里表现不正常,那很有可能是这个造成的。比较常见的几个现象是:1.有些挨着浏览器左上角的标签无法正常显示;2.空div标签是不该占空间的,IE里它占了;3.有些标签因没有设置height或者width,无法正常显示;4.列表项目无法正常显示……
(原文中有演示示例)
有个解决方法:对应的CSS中加入 zoom: 1;
5、赶紧用firebug
firebug能帮你彻底了解互联网技术。
6、如何对齐表格
有碰到过:因栏(td)中内容过多而将栏(td)撑大的问题吗?
有个解决方法就是加一条CSS: table { table-layout: fixed; }
另外还有一条很重要的提示:你只需要设置第一排(tr)的各栏(td)的宽度,后排都会按这个来。
(原文中有演示示例)
7、列表在不同浏览器中有不同的显示
你需要加两行CSS来修复:
li { list-style-position:inside; // or outside }
li { margin-left: 1em; // or use a margin }
(原文中有演示示例)
8、Position. Position. Position.
你必须弄清楚position,点这里。
(原文中有比较absolute和relative的演示示例)
9、z-index
请弄懂上一条只有再看这条。
(原文中有演示示例:红黄蓝橙四个div全为position:relative,黄橙分别为红蓝的子标签,黄的z-index值为2,橙色的为1。使用IE浏览,点击move it,你看不到黄色div。)
总之,在IE中,position属性相同的标签,你不能只靠z-index来控制他们显示上的重叠顺序,还要考虑标签的包含关系和先后顺序。
10、验证你的CSS/XHTML
如果你不先验证你的CSS/XHTML,就去向人求助如何解决某些疑难杂症,这是很丢人的。
很大一部分bug,都是像没有关闭标签之类行为造成的,而验证能帮你轻易的查出来。如果别人因为你的上面那种疏忽而调试半天,你难道不觉得无地自容吗?
这个页面并不合标准。有时候你会因为一些技术原因(hack或者错误的例子)而不去验证,但是你无论如何还是应该利用验证还找出错误。就这页面,我一验证就找到了几处。