《Designing Web Interfaces》 – web界面设计.

《Designing Web Interfaces》
–Principles and Patterns for Rich Interacitons

读后摘录.

6个经典的设计原理

原理一:直截了当 [Make It Direct]

主要说的还是通过Ajax在页内实现数据输出与输入的交互。 更少的刷新与跳转。 不同情境下根据功能意图重点选择最适的交互方式。

关键词: 页内编辑,利用拖放,直接选择

原理二:简化交互[Keep It lightweight]

重点在于论述如何让交互功能更好理解,减少操作步骤,干扰等。 比如,根据功能的重要性来决定决定将上下文工具放在哪个位置,是始终显示还是触发显示。

关键词:上下文工具

原理三:足不出户[Stay on the Page]

重点讨论了 弹出层,嵌入层,虚拟页面流程处理等如何在更好让用户 “心流”更流畅的一些交互实践。

关键词:覆盖层,嵌入层,虚拟页面,流程处理

原理四:提供邀请[Provide an Invitation]

重点重点如何让用户发现交互功能。 通过各种的“邀请”提示。

关键词:静态邀请,动态邀请

原理五:使用变换[Use Transitions]

通过,色彩,画面明暗度,动画等。来引导用户注意力焦点。 比如利用页面中运动物体来吸引注意力,并解释其间各个模块间的相互关系,说明虚拟空间等。 通过暗化背景突出弹出层的方式来让用户焦点更加集中。

关键词:变换模式,变换的目的

原理六:即时反应[React Imediately]

在交互目的最终实现前的一些中间反馈模式。 比如搜索功能,在输入关键字时的即时建议,即时结果预览。 一些相对复杂的过程的中间进度反馈提示显示等.

关键词:查询模式,反馈模式

七:与时俱进

Posted in 产品交互 | Leave a comment

offsetWidth ClientHeight clientWidth scrollTop 有无doctype声明情况下, FF/Opera/Safari/IE6/7/8 取值方式全解析

为即将诞生的S系原生交互组建做的一些准备。 主要针对以下几个关键值进行多浏览器试验测试,力求数据详实完整。 可以为以后开发提供底层参考依据。

[offsetWidth:有声明]

IE/FF3.6/Opera/Safari = width+padding+border

[offsetWidth:无声明]

FF/Opera/Safari = width+padding+border
IE6/7/8= width

——————————————————————————————–

[ClientHeight:有声明]

FF3.6/Safari/Opera10+
document.documentElement.clientHeight = 可见高度
document.body.clientHeight = dom高度  //dom不包括html

IE6/7/8
document.documentElement.clientHeight = 可见高度
document.body.clientHeight = dom高度 //dom不包括html

[ClientHeight:无声名]

Opera10+
document.documentElement.clientHeight = dom高度 + (margin:4px/8px) //dom包括html overflow:hidden无效
document.body.clientHeight = 可见高度

FF3.6
document.documentElement.clientHeight = dom高度 + (margin:4px/8px) //dom包括html 默认有overflow:hidden
document.body.clientHeight = 可见高度

IE
document.documentElement.clientHeight = 0
document.body.clientHeight = 可见高度

Safari
document.documentElement.clientHeight(dom有定义高度)= dom高度 + (margin:4px/8px) //此时html 默认有overflow:hidden
document.documentElement.clientHeight(dom无定义高度)= 可见高度

document.body.clientHeight = 可见高度

——————————————————————————————–

[clientWidth:有/无声明]

IE6/7
document.body.clientWidth = 1873/1893 (20)

IE8
document.body.clientWidth = 1894/1893 (1)

FF/Opera/Safari
document.body.clientWidth = 1904/1920 (16)

括号中为差值
——————————————————————————————–

[scrollTop:有声明]

Safari
window.pageYOffset = document.body.scrollTop

FF/Opera
window.pageYOffset = document.documentElement.scrollTop

IE6/7/8
document.documentElement.scrollTop

[scrollTop:无声明]

Posted in JS&Library | Tagged , , , , | Leave a comment

激情相关的记录

这个页面将用来记录2010与’激情’有关的事。
7-18  2:19:26

一个兄弟半夜突然QQ上线。

Ta 2:19:26
我同事要给我介绍女孩子,哎

Ta 2:19:31
我上来看看

EveryOnMe° 2:21:28
我也看看

Ta 2:22:20
<截图>

Ta 2:22:30
<截图>

Ta 2:22:39
<截图>

EveryOnMe° 2:24:42
还不错。

EveryOnMe° 2:24:50
可以深入。

陈艺演 2:25:10
他说有1米67左右

EveryOnMe° 2:25:30

回复
EveryOnMe° 2:25:31
好诶

EveryOnMe° 2:25:34
你还不去睡啊

然后我自己就去睡了…
Posted in 说心情 | Tagged | Leave a comment

众神之战 – Clash of the titans

众神归来海报

关灯看了下这部电影..
看前有两个朋友说了看法:一个说没看懂, 另外一个在电影院看了说不好看..
我不管.. 我看我的。

零碎的记下

最帅的马:小黑的翅膀位置还行, 是目前看过刻画的较为自然的神话生物..

最可爱的人物: 猎人兄弟,勇敢,幽默,身手不凡,心灵手巧利用巨蝎的壳做成盾牌。自然属性超强..

最变态的人物: 人类祭祀, 扮相很像乞丐哈…最爱起哄。

最美丽女人: 应该是 io 跟公主了。 代表两种不同的美。

最经典的台词: perseus: i have everything i need here . 坚定的知道自己需要的。 这点真的很好。

先写这些..

Posted in 看电影 | Tagged | Leave a comment

关于scrolltop的应用真正兼容 IE6/7 , Safari,FF

关于浏览器兼容 的YY问题就不多讨论了,虽然很痛苦,但是依旧要承受 .

JS 里的 scrollTop 函数, 通常在做对象垂直居中,或固定浮动在窗口某个位置时会用到

1、各浏览器下 scrollTop的差异


IE6/7 :

对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度

对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ;


Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;


Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

2、获取scrollTop值

完美的获取scrollTop 赋值短语 :

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。

仔细观察这句赋值,你发现啥了没??

没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。

因为当 数字0undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;

当页面滚动条刚好在最顶端,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将 window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。

而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..

所以说到头还是IE的问题咯. 杯具…

精神有点恍惚,不知道有没有表达清楚。

不过最后总结出来这句实验过OK,大家放心使用;



var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

Posted in JS&Library | Leave a comment

斯巴达克斯:血与沙.Spartacus.Blood.And.Sand

人物上场

斯巴达克斯
一个自愿参加罗马辅备军,为了对抗罗马和特雷斯共同的敌人而战的特雷斯的战士.作为公然反抗罗马副指挥官克罗迪斯·葛雷博的处罚,他在格斗竞技场被处以死刑.尽管很困难,但是他杀了4个剑士,并且活了下来.他被贬为奴隶,被巴蒂塔斯带走并且训练其成为训练场的一名格斗士.而他的叛逆倾向被驯服了,因为他承诺要回到他妻子苏拉身边.

多科特
曾经是鼎鼎大名的角斗士,唯一一个在和传奇角斗士死亡之影的战斗中幸存的人。多科特现在指导他们作战,多科特最受尊重和信任的奴隶,他依靠挥舞鞭子捍卫ludus的残酷制度,一个坚强自傲绝无私情的男人。多科特小心提防斯巴达克斯难以预料的独立倾向,他只关心能否将其变成训练有素的角斗士。

维罗
罗马市民。维罗自卖到ludus为奴以抵赌债并为其妻儿做打算。一个严格遵守纪律的坚毅战士。和其他角斗士关系融洽。他因斯巴达克斯在竞技场以一敌四的传奇表现而敬重他,但是斯巴达克斯比较冲动,而维罗则比较谨慎。尽管如此,他仍是斯巴达克斯在ludus唯一的真朋友

巴尔卡
一个性格残暴的大块头,受人尊敬的角斗士,同时也是巴蒂科斯的保镖,有时还要充当杀手的角色,巴尔卡是ludus里第二个到达crixus的人,尽管他脾气暴躁,身材魁梧,但却对鸟类的收藏和抚养一个叫皮耶特罗的努力男孩上充满柔情。他为人真诚,忠于巴蒂维斯,却也渴望重新获得自由。

巴蒂塔斯
Capua公民,ludus的拥有者,正进入财政困难时期。他挺住一定风险买下斯巴达克斯,希望将这个未经雕琢的奇才锻造成卓越的格斗家。他和妻子露迪雅情投意合,互为真爱。他们共同享受充满激情的婚姻,共同拥有社会进步的愿望。他对妻子百分之百地认同。

克雷斯
克雷斯是巴蒂塔斯训练场顶尖的格斗士,是Capua的冠军.他狂妄而强大,他对斯巴达有着根深蒂固的仇恨,他出现并且威胁说要毁掉,并且掌控训练场的一切.克雷斯和他的主人鲁克里娅陷入了性关系,但是私下里却和她的贴身奴隶妮维雅关系暧昧.他在保守这两个秘密之间来回挣扎,禁忌的关系,而他却仍要维持自己在训练场的顶尖格斗士的地位.

葛雷博
同时担任一罗马军团和特雷斯辅备军的司令,技术精湛,才思敏捷,只是志向略逊一筹。虽然他爱年轻的妻子伊莉西娅,但是娶她在更大程度上是因为她带来的政治优势,即便她的美貌和魅力也是原因之一。他将斯巴达克斯奋起反抗的原因归结为其失败的战役,随之而来的耻辱感以及想看到他死在竞技场上的渴望。

苏拉
斯巴达克斯的特雷斯人妻子,她预言他的离家会带来巨大的灾难.苏拉是唯一让斯巴达克斯为之奋斗的人.她也受制于罗马,她被迫离开了她的丈夫,并且被卖给了一个叙利亚奴隶主.

露迪雅
非常诡计多端,她通过蕴含着一个铁质把手的小山羊白皮手套来窥探每一种力量.鲁克里娅对性爱非常的渴望,她和格斗士克雷斯交往,不过由于渴望生个孩子,她的忍受已经到了极限.她认为斯巴达克斯是一个无法掌控的野兽,他给训练场带来了太多的恐惧,和厄运.

伊莉西娅
参议员Albinius自私的被宠坏的女儿,军团长格雷博的妻子。年轻、敏感,她觉得在卡普阿既孤独又无聊,看到自己和巴蒂塔斯潜在的进步,露蒂亚将伊莉西亚置于自己的羽翼下,并决心让其纵情于角斗场的声色。

阿舒尔
一个瘸腿的前角斗士,竞技场万事通和庄家,如果角斗士要从外面购买东西就去找阿舒尔,,阿舒尔可以搜罗到所有的人以及所有的东西,但他并不太受人待见。他是竞技场上最不被信任和爱戴的人,始终跟随着巴蒂塔斯.

Posted in 看电影 | Tagged , , | Leave a comment

Microsoft ,Apple,Google用户体验设计原则

细致的Microsoft

减少概念……增强信心

你是不是引入了新的概念?为什么?真的必要吗?
你能去掉这些不需要的概念吗?
其中的区别有意义吗?
用户体验会延续同样的概念吗?

小的好或坏也很重要

哪些重要的“小事”是经常会碰到的?
哪些小问题是你在着手解决的?
少做一些更好。
不要把小事从你的体验中去除。
为深思熟虑的细节制订计划。
修正小的错误。

看起来和用起来都很棒

你的用户体验哪里最棒?它看起来有那么好吗?
用户第一眼看到的东西能够让人觉得它用户体验很棒吗?
用户体验符合期望吗?
用户很清楚能做什么吗?
是不是只提供了必要的步骤?

要解决的是让人分心的事,而不是可发现性
减少令人分心的事情。
不要让功能自己之间进行竞争。
致力于新的功能。
下列方法不能解决糟糕的可发现问题:
在开始菜单上添加图标。
在桌面上放置图标。
在通知区域放置图标。
使用通知。
提供首次运行体验。
提供功能教程。

旋钮和问题前的 UX
调低问题的音量。
只问一次。
不要要求配置来获取数据。
这个问题是不是已经问过了?
寻找合并统一的机会。

个性化,而非定制化
这个功能是否能让用户自己来表述元素?
你是否能够区分个性化和定制化?
个性化是需要成为新的功能,还是可以利用现有的功能和信息(如用户的位置、背景图片或排列方式)?

体验的生命周期
考虑下列各个阶段下的用户体验:
安装与生成
首次使用与定制
常规使用
管理与维护
卸载或升级
以一个已经使用了 12 个月的用户身份来审视整个体验。它是否具有:
合理的内容
合理的“音量”

为移动人士建造
所有的 UX 原则对于 12 英寸和 20 英寸的屏幕都是等价适用的。
允许用户被打断。
考虑启动和中断(快速恢复,不要妨碍其他用户体验)。
考虑获取或失去连接。
性能永远是用户体验的杀手。
ps:微软的细致可以渗透到产品中的每一个环节,或组成人机界面的每一个像素,实在令人钦佩。

轻巧的Apple

注重设计过程

在设计过程中引入用户交互的5个目标:
了解您的目标客户
分析用户的工作流
构造原型系统
观察用户测试
制定观察用户准则
做出设计决定
避免功能泛滥
80% 方案
优秀软件的标准
高性能
易于使用
吸引人的界面
可靠
灵活
互操作性
移动性
人机接口设计准则

人机接口设计准则:
隐喻(尽量使用隐喻来描述程序的概念和功能,这样可以利用一些已有的概念和知识。)
反映用户的心智模型(用户的心智模型应该在产品的用户接口的设计中体现出来,主要体现在应用程序窗口的布局,工具栏上图标和控件的选择和组织,以及面板的功能等。)
隐式和显式操作(显示的操作清楚的表明了对一个对象操作的结果。隐式的操作通过一些可视化的线索或者上下文来表达结果。)
直接操作 (直接操作是隐式操作的一种,它会让用户觉得可以直接控制计算机显示的对象。)
用户控制一切(允许用户而不是计算机来启动和控制操作。)
反馈和交互(反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么,而不仅仅是当事情出错时显示一个警告。)
一致性(在用户接口上的统一可以让用户使用从其他应用程序学到的知识和技巧。)
所见即所得(用户应该可以找到程序的所有功能。)
容错性(提供充分的容错性以鼓励用户使用程序的各种功能─也就是说,大部分的操作都是很容易恢复的。)
感知的稳定性(为了给用户一个稳定的感知,对于对象以及实施在这些对象上的操作,Aqua接口提供了一个清晰的限制集合;为了不破坏用户对稳定性的体验,程序应该保留用户更改过的配置,例如窗口的大小和位置等;提供程序运行的状态和反馈让用户知道程序正在进行的任务,同样能提高感知的稳定性。)
整体美学(整体美学意味着信息经过良好的组织并且和视图设计一致。)
避免“模式”(尽可能的让用户在任何时候都能做他们想做的事情。避免使用模式对话框来将用户锁定在某个操作中,以至于在当前操作完成前用户不能做别的事情。)
管理程序的复杂性(开发一个易于使用的程序的最好办法就是设计得尽可能的简单。)
设计的优先级
满足最低限度的要求
发布用户期望的功能
让您的程序与众不同
ps:苹果的轻巧不仅体现在它的工业设计上,更多的是它的操作系统和软件的用户体验层面。

简洁的Google
Jon Wiley- Google User Experience Designer 在一次专业分享中,提到了Google 的用户体验设计原则:

1. 有用(Useful):以用户为焦点,关注他们的生活、工作和梦想。
2. 快速(Fast):争取节省每一个毫秒。
3. 简单(Simple):简洁就是力量。
4. 魅力(Engaging):能够唤起新手的好奇心,能够吸引资深用户。
5. 革新(Innovative):勇于创新。
6. 通用(Universal):全世界适用的设计。
7. 盈利(Profitable):为现行的和将来的商业模式做好安排。
8. 优美(Beautiful):外观具有视觉愉悦性,但是不会令用户分心。
9. 可信(Trustworthy):值得用户信赖。
10. 人性(Personable):加入人性化因素。
ps:谷歌的简洁永远是它的产品特色,从谷歌网站的每个界面到浏览器chrome的用户体验与交互,都尽力把复杂问题设计得让用户感觉到最简单。

[版权声明]:版权归作者Alite所有,

转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

Posted in 产品交互 | Leave a comment

Date对象梳理及应用

先了解下什么是UTC

UTC是协调世界时(Universal Time Coordinated)英文缩写,是由国际无线电咨询委员会规定和推荐,并由国际时间局(BIH)负责保持的以秒为基础的时间标度。UTC相当于本初子午线(即经度0度)上的平均太阳时,过去曾用格林威治平均时(GMT)来表示.北京时间比UTC时间早8小时,以1999年1月1日0000UTC为例,UTC时间是零点,北京时间为1999年1月1日早上8点整。
GMT(Greenwich Mean Time)是格林尼治平时(我都习惯叫做格林威治):
由于地球轨道并非圆形,其运行速度又随着地球与太阳的距离改变而出现变化,因此视太阳时欠缺均匀性。视太阳日的长度同时亦受到地球自转轴相对轨道面的倾斜度所影响。为着要纠正上述的不均匀性,天文学家计算地球非圆形轨迹与极轴倾斜对视太阳时的效应。平太阳时就是指经修订后的视太阳时。在格林尼治子午线上的平太阳时称为世界时(UT0),又叫格林尼治平时(GMT)。
为了确保协调世界时与世界时(UT1)相差不会超过0.9秒,有需要时便会在协调世界时内加上正或负闰秒。因此协调世界时与国际原子时(TAI)之间会出现若干整数秒的差别。位于巴黎的国际地球自转事务中央局(IERS)负责决定何时加入闰秒。

常用计时: UTC(世界标准时间)、GMT(格林威治时间)、本地时间.

相关函数纵览

//全局函数
Date
//Date 类的静态方法
Date.parse
Date.UTC
//Date 对象的建立方法
new Date()
new Date(毫秒数)
new Date(标准时间格式字符串)
new Date(年, 月, 日, 时, 分, 秒, 毫秒)
//Date 对象的更多方法
getFullYear (getUTCFullYear)
getMonth (getUTCMonth)
getDate (getUTCDate)
getDay (getUTCDay)
getHours (getUTCHours)
getMinutes (getUTCMinutes)
getSeconds (getUTCSeconds)
getMilliseconds (getUTCMilliseconds)
getTime
getTimezoneOffset
setFullYear (setUTCFullYear)
setMonth (setUTCMonth)
setDate (setUTCDate)
setHours (setUTCHours)
setMinutes (setUTCMinutes)
setSeconds (setUTCSeconds)
setMilliseconds (setUTCMilliseconds)
setTime
toDateString
toTimeString
toUTCString
toLocaleString
toLocaleDateString
toLocaleTimeString
toString
valueOf

根据一个或多个数值建立时间对象, 及本地计时与世界标准计时的区别

//先用最容易理解的方式建立一个时间对象
var d = new Date(2009, 2, 27, 12, 59, 59, 999);
alert(d); //Fri Mar 27 12:59:59 UTC+0800 2009
alert(d.toString()); //Fri Mar 27 12:59:59 UTC+0800 2009
alert(d.toUTCString()); //Fri, 27 Mar 2009 04:59:59 UTC
alert(d.toLocaleString()); //2009年3月27日 12:59:59
alert(d.toDateString()); //Fri Mar 27 2009
alert(d.toLocaleDateString()); //2009年3月27日
alert(d.toTimeString()); //12:59:59 UTC+0800
alert(d.toLocaleTimeString()); //12:59:59
/* 时间在计算机中被记为一个整数, 这是从 UTC 时间的 1970-1-1 0:0:0 到此时间的毫秒数 */
alert(d.valueOf()); //1238129999999
alert(d.getTime()); //1238129999999
/* 获取本地时间和世界标准计时的时差 */
alert(d.getTimezoneOffset()); //-480; 单位是分钟, 也就是 8 小时
/* 直接使用时间值(毫秒数, 譬如上面的: 1238129999999)建立时间对象 */
var d = new Date(1238129999999);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
/* 但建立函数有 2-7 个参数时, 将是根据 "年, 月, 日, 时, 分, 秒, 毫秒" 建立时间 */
d = new Date(2009, 2, 27, 12, 59, 59, 999);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date(2009, 2, 27, 12, 59, 59);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date(2009, 2, 27, 12, 59);
alert(d.toLocaleString()); //2009年3月27日 12:59:00
d = new Date(2009, 2, 27, 12);
alert(d.toLocaleString()); //2009年3月27日 12:00:00
d = new Date(2009, 2, 27);
alert(d.toLocaleString()); //2009年3月27日 0:00:00
d = new Date(2009, 2);
alert(d.toLocaleString()); //2009年3月1日 0:00:00
/* Date 类的静态函数 UTC 的参数也是和上面一样的 2-7 个, 但 UTC 获取的是个 number */
var n = Date.UTC(2009, 0); //这只是获取了那个表示时间的毫秒数
alert(typeof n); //number
var d = new Date(n); //根据刚刚获取的数、重新建立为时间对象
alert(d.toUTCString()); //Thu, 1 Jan 2009 00:00:00 UTC
alert(d.toLocaleString()); //2009年1月1日 8:00:00

无参数建立的时间对象、和用全局函数 Date 获取的时间的区

var d1 = new Date(); //返回时间对象
var d2 = Date(); //返回时间字符串
alert(d1); //Fri Feb 27 13:20:58 UTC+0800 2009
alert(d2); //Fri Feb 27 13:20:58 2009
alert(d1.valueOf()); //1235712058340
alert(d2.valueOf()); //Fri Feb 27 13:20:58 2009
alert(typeof d1); //object
alert(typeof d2); //string
//明显看出 d2 只是字符串, 它可以使用 String 类的方法, 而不能使用 Date 类的方法.

使用字符串参数建立时间对象

var d;
d = new Date('Fri Mar 27 12:59:59 UTC+0800 2009');
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date('Fri Mar 27 12:59:59 2009');
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date('Fri Mar 27 2009');
alert(d.toLocaleString()); //2009年3月27日 0:00:00
d = new Date('Mar 27 2009');
alert(d.toLocaleString()); //2009年3月27日 0:00:00
/* 可使用 Date() 返回的字符串 */
var ts = Date();
d = new Date(ts);
alert(d.toLocaleString()); //2009年3月27日 14:04:38
/* Date 类的静态函数 parse 也是需要一样的字符参数, 不过它返回的是个数字(那个毫秒数) */
var n;
n = Date.parse('Mar 27 2009');
alert(n); //1238083200000
alert(typeof n); //number
d = new Date(n);
alert(d.toLocaleString()); //2009年3月27日 0:00:00

分别获取和设置: 年、月、日、时、分、秒、毫秒, 其中 “星期几” 可获取但不能设置
var d = new Date(2009, 2, 27, 12, 58, 59, 999);
alert(d.toLocaleString()); //2009年3月27日 0:00:00
alert(d.getFullYear()); //2009
alert(d.getMonth()); //2 (从 0 起, 2 指 3 月)
alert(d.getDate()); //27
alert(d.getDay()); //5 (星期五)
alert(d.getHours()); //12
alert(d.getMinutes()); //58
alert(d.getSeconds()); //59
alert(d.getMilliseconds()); //999 (毫秒)
d.setFullYear(2010);
d.setMonth(1);
d.setDate(2);
d.setHours(3);
d.setMinutes(4);
d.setSeconds(5);
d.setMilliseconds(6);
alert(d.toLocaleString()); //2010年2月2日 3:04:05
alert(d.getFullYear()); //2010
alert(d.getMonth()); //1 (从 0 起, 1 指 2 月)
alert(d.getDate()); //2
alert(d.getDay()); //2 (星期二)
alert(d.getHours()); //3
alert(d.getMinutes()); //4
alert(d.getSeconds()); //5
alert(d.getMilliseconds()); //6 (毫秒)
/* 还有一个 setTime */
var d = new Date();
d.setTime(0);
alert(d.toUTCString()); //Thu, 1 Jan 1970 00:00:00 UTC

现在我们用Date对象来制作一个可以在页面动态模拟服务器时间的函数。

<br /> <script> //Server Clock (v1.1;2010/3/21;eom)</p> <p>function ue_sClock(s,id,fmt){ Date.prototype.format = function(format) { var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length)); for(var k in o)if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); return format; }</p> <p>if(document.getElementById(id)){</p> <p>var clockBox =  document.getElementById(id); var mstime = s*1000; var sClock = new Date(mstime).format(fmt); function doClock(){</p> <p>var sClock = new Date(mstime).format(fmt); clockBox.innerHTML = sClock.toString() ;</p> <p>mstime = mstime + 1000; } setInterval(doClock,1000); } } </script><br />

参考资料:

http://www.w3school.com.cn/js/jsref_obj_date.asp

http://www.jb51.net/article/21614.htm

http://eelab.gxu.edu.cn/list.asp?unid=364

Posted in JS&Library, 实验室 | Tagged , , | Leave a comment

交互设计的8项黄金法则

不妨一看

这8项法则是由Ben Shneiderman于1998年提出的

一、力求一致性

例如网站首页需要和每一个下级页面保持一致的风格,导航都要放在屏幕的左上角,具有高度一致性的界面能给人清晰整洁的感觉

二、允许频繁使用快捷键

快捷键表示产品使用的灵活性和有效性,想想每次我们使用搜索引擎的时候是鼠标点击的搜索还是按的回车?

三、提供明确的反馈

出现错误时要明确说出错误的含义,而且需要考虑用户能否理解,比如我们基本上都遇到过HTTP404错误,但绝大多数人能看懂么?

四、设计对话,告诉用户任务已完成

要在用户完成某项任务或操作后进行提示。如果他们在做了很多操作后却得不到反馈,他们就无法知道自己是否达成目标。

五、提供错误预防和简单的纠错功能

例如把某些当前不能点击的按钮设置为灰色,在系统执行时让用户在确认一下

六、应该方便用户取消某个操作

大多数的应用软件都有撤销和恢复的功能,如果用户总是惧怕一失足成千古恨,那样的用户体验可想而知

七、用户应掌握控制权

一般而言用户希望自己去控制系统交互,在执行任务中,用户应该可以随时中止或退出,而不是无奈的看着系统继续

八、减轻用户记忆负担

我们应该尽可能帮助用户避免要求他们记住各种信息,例如各个菜单项之间的逻辑关联,更好的分类就会帮助用户找出哪个功能按钮在什么地方

Posted in undefined | Tagged | Leave a comment

Reset CSS研究

很强大…

Reset CSS研究(八卦篇)

时间:2009-08-28  来源:淘宝UED 作者:玉伯

八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:u3bBeautyCss.org – 前端教程网

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

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

不是历史

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

对 于基于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不支持导致不实用,不过这的确是个思路)。u3bBeautyCss.org – 前端教程网

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

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

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

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

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

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

但上面的文章并不是最终版本,2008年2月份,Eric Meyer还更新了一次:CSS Tools: Reset CSSu3bBeautyCss.org – 前端教程网

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

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

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

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

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

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

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.u3bBeautyCss.org – 前端教程网

…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.u3bBeautyCss.org – 前端教程网

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

参考资料

Posted in CSS&XHTML, 产品交互 | Leave a comment