Archive for ‘ 六月, 2010

全方位清理浮动[转]

原文地址:http://isd.tencent.com/?p=1122

忘记从什么时候开始用:after来清除浮动,原理多多少少知道一点,但没有深究,只是因为好用,用习惯了,常年放在一个reset的css里,名字叫做clearfix。今天在腾讯的ISD看到这个文章介绍了多种清除浮动的方法,文章里附有demo。强烈推荐好好研究那个demo,很多细节的东西口头上说还不如多做测试。

清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面俱到,然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签,以及css的clear属性
  6. 采用br标签,以及css的clear属性
  7. 采用br标签,以及其自身HTML的clear属性

粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应)

  1. 优点结构语义化完全正确,不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确,代码量极少。
    缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。
    建议内个模块使用,请勿嵌套
  3. 优点结构语义化完全正确,代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用,请勿嵌套
  4. 优点结构语义化完全正确,代码量极少。
    缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少,复用性极高。
    缺点完全不能完美的适应语义化,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

名词解释

 

hus_r1

《美国传统字典》这样给时尚、时髦、流行和风行下定义:“这些名词是指服装、装饰、行为或者生活方式在一个特定时期内的一种流行方式或更喜欢的方式。时尚(fashion)是含义最宽泛的术语,通常是指与习俗相一致地被上流社会或任何文化或亚文化所采用的物品:在一个时期长头发是时尚的。时髦(style)有时可与时尚交替使用,不过像流行(mode)一样它强调对优雅的标准的依附:旅行是时髦的;在20世纪60年代晚期迷你裙在流行。风行(vogue)被用于广泛盛行的时尚,且经常暗指热烈但短暂的认可:几年前风行计算机游戏。”

——Donald A.Norman《情感化设计》

几个设计法则

在腾讯CDC上看到的,确切的说应该是互联网产品设计的法则。现在渐渐比较关注这方面。现在资讯太多了,无论哪个领域,深入下去都发现有成堆的东西等着你,收藏=忘记,无奈只好转载一下,算是一个线索。

原文地址:http://cdc.tencent.com/?p=2657   《娱乐没有圈,设计没有边? – 浅谈几个设计法则》

经常会听到有人议论,设计很主观化,很难有标准。但一些常见设计法则,还是能够让我们深入浅出,在设计过程中给予我们一些辅助。以下就简单介绍几个:

1.Flexibility-Usability Tradeoff 弹性-使用性权衡

弹性,即样样知晓,无一精通。当弹性增加时,单个功能的使用性就会降低,引发效率降低,复杂性、时间以及开发的成本增加。

Principles-of-Design-1

如何兼顾功能的丰富和使用性,弹性需求在何种情况下是有意义的?简单来说,用户对其未来需求没有清楚的期望值时,可以多做一些功能去试探用户的功能需求。如,拥有多功能的弹性设备个人电脑,适合对自己需求并不是那么具体的用户。具有使用性的游戏机,则更符合对游戏有明确需求的发烧友用户。

Principles-of-Design-2

又如,QQ影像的快调,对一个不懂图像处理,对图形处理参数没有清晰认知的用户,可以多提供一些快速调节设置,提供更大范围上的弹性功能。

Principles-of-Design-3

产品设计最终是偏向弹性还是使用性,取决于我们面向的用户,对其期待的功能是否有比较精确化的描述。

 

2.Garbage In —— Garbage out   垃圾进,垃圾出

人机交互中,输入到系统的信息,如果本身就是垃圾,自然不能期待产生的内容是对用户有效的。

Principles-of-Design-4

垃圾信息一般有两种情况:

1、类别问题:比如要求输入字母,结果导入了数字

2、质量问题:比如两次输入密码,第二次比第一次多出了一个数字。

常见于表单数据填写的案例场景中,对于类别问题,可采用输入前事先告知,和输入时的内容限制来规避:

Principles-of-Design-5

对于质量问题,可以通过预先检查和确认等功能来避免。

Principles-of-Design-6

最重要的是,如果是用户已经填写的内容,最好直接导入,减少用户导入信息的错误几率。

Principles-of-Design-7

依赖于信息运营的社区类产品,如果有必要,也可做些门槛式的设计,能从源头把控,让用户不会那么容易的导入垃圾。

Principles-of-Design-8

 

3.Expectation Effect 预期效应

因个人或对他人的预期,会引发认知与行为的改变。事前一项可靠的描述,会在任何群体中,引发约30%的期待。

当推动某项产品或设计时,适当建立预期心理,引导目标用户,达到预想目的。如产品发布前,让用户有预期,无论是后面收集用户反馈,还是下个版本的推进都可以得到更针对性的反馈。

Principles-of-Design-9

反之,当我们在做用户研究访谈时,要采用适当的步骤,尽量避免因为预期效应而导致的偏见。

Principles-of-Design-10

值得提醒的是预期效应虽然会影响认知行为,但是这种改变是暂时的,经过一段时间后,行为和认知均会回复到基准线。

 

4.Five Hat Racks 五帽架

1989年Wurman(TED主席/执行总监,第一次提出信息架构的概念)提出五帽架理论:无论信息对象如何,都可以使用五种方法进行资料组织。

1、字母:最常见的组织方式,具有强烈的指示性,适用于非直线方式找到特定内容。

Principles-of-Design-11

2、时间:以时间为基准来组织资料,适用于时效性强的信息。

Principles-of-Design-12

3、地点:以地理或空间组织资料,适用于本身具备地理关联性的内容。

Principles-of-Design-13

4、连续性:按范围大小、最高到最低、最好到最坏等组织内容,适用于展示对比性信息。

Principles-of-Design-14

5、种类:用类似或相关性来组织资料,适用于多层级信息分解。

Principles-of-Design-15

 

5.Fitts’s Law 费茨法则

1954年由Paul Fitts提出:移动到一个目标的时间,跟目标尺寸及到目标的距离有关。移动对象不仅包括直接接触,如手指,也包括用一个物体去移动,如鼠标。

MT=A+B log 2(D/S+1);

MT=到目标的移动时间;A=0.230s; B=0.166s; D=指示装置与目标的距离;S=目标尺寸。如图所示:

 Principles-of-Design-16

适用于快速、指示性动作,不适合持续的动作。

 

6.Hick’s law 席克法则

以英国心理学家William Edmund Hick命名,当选项增加时,下决定的时间也增加。可以用来测出,当有多重选择时,需要多少时间能做出决定,适用于简单判断的场景,对需要大量阅读和思考的情景并不适用。

RT=a+b log2(n),

RT=反应时间,

a=与做决定无关的总时间(前期认知和观察时间),

b=根据对选项认识的处理时间(从经验衍生出的常数,对人来说约是0.155s)。

 

7.Gutenberg Diagram 古藤堡图表

古藤堡把显示媒介分为五个区间, 视觉流从左上角到右下角。

 Principles-of-Design-17

当元素是平均分散,性质相同的时,可以考虑用古藤堡表,来协助设计格式和内容。否则,应该以元素的重要性来吸引眼球的移动。

网页上的浏览热点区分布,验证了古藤堡表的分区。

Principles-of-Design-18

 

8.Serial Position Effects 序列位置效果

序列位置效果:在列举项目中,排在前面与后面的物品,要比排在中间的物品,更容易被人想起。

Principles-of-Design-19

当列举的项目是视觉性质的,就把重要物件放在最前面。如果列举的项目是听觉性质的,就把重要的物件放在最后面。

 

9.Progressive Disclosure 递进展开

以递进展开的方式,展现信息内容,即只有在需要时,才会显示资料。其思想为:根据所面向的对象,对信息划分层级,对于初级用户,仅展示基础、简洁内容,保证操作流程顺畅结束。同时,针对熟练用户,也能快速的找到更多信息。

 Principles-of-Design-20

使用这种原则,最重要的是要定义不同层级的信息内容,以对应不同的服务对象。

 

10.Depth of Processing 处理深度

一种关于记忆的现象:被深层分析过的资讯,要比浅层分析过的资讯更容易记得。例如一篇纯文本的文章,与图文并茂,并帮他进行了初始的信息梳理和加工的专题来比,后者被容易被记住和回想起。

 Principles-of-Design-21

 

以上为简单介绍几个的通用原则,很多情况的设计过程,往往都能归结为最简单的那几点,欢迎大家探讨,谢谢~

 

参考资料:《Universal Principles of Design(设计法则)》

公猫阿好写真集

周婕给陪伴我们四年的公猫阿好拍了照片。虽然只是一只很普通的本地土猫,但是有时感觉即使是小动物也能让人类学到很多东西。谢谢阿好,抱歉我经常忽略你的撒娇。

cat2

cat1

cat3

cat4

cat5

cat6

cat7

cat7

cat9

Unicode – CSS中文字体转编码

备份一下这方面的内容,虽然大部分字体应该不会用到。

中文名 英文名 Unicode Unicode 2
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文
细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文
黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文
楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文
宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文
仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷
体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果
丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽
细宋
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明
体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正
黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅
黑
Office
隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细
黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷
体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋
体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中
宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿
宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒
体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚
体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩
云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥
珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶
书
华文行楷 STXingkai \534E\6587\884C\6977 华文行
楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新
魏

姚仁禄先生的创意讲座

又到周末。最近的生活归结起来就是工作,打僵尸,外出宵夜,睡觉。

突然想说说这段时间一直在看的《姚仁禄先生的创意讲座》,关于这个讲座中姚仁禄先生提到的种种问题,是最近空闲时常常想到的事情,十分耐人寻味。我觉得这个创意讲座不仅仅适合那些做设计的人,其实所有人都可以看一看,无论是跟文字打交道的,做产品经理的,做程序的,做策划的,开小店的……因为他想告诉你的其实不是狭义的设计的概念,而是更广义的设计。不是设计一个瓶子,一张海报,一栋建筑;也可以是构建一个系统,改变一种体制,营造一个美好的家庭氛围。因为广义的设计,其实是让现状无限地去接近你的期望的过程,而这个过程,无论是从事哪种行业过什么生活的人都必须面对。从这一点上看,每个人都是具备设计的能力的。

yaorenlu

这个创意讲座不会明确地给你下定义,比如什么是什么,如何完成某个目标,而是告诉你用眼睛去看,用心去感受这个世界,它为你提供更多的是开放性的思路和心态。

有时候我觉得,在一个地方,在一个固定的行业呆久了以后,你的思路很容易停留在某个领域,在自己营造的小世界里,而本能的排斥和屏蔽那些你的专业和你擅长的东西以外的那个世界。这种情况情有可原,因为有时确实需要做到心无旁骛;另一方面,随着互联网的高度发达资讯爆炸,也很容易在信息的世界里被淹没。就如TED论坛里那个生物学家所说的话一样,“不是资讯不足,而是整合不足”。创意讲座期望的是观看的人能够丢掉自己的地图,丢掉你已知的东西给你制造的看不见的牢笼,用新的眼光去看世界,重新定义你周围熟悉的事物,用你自己的方式去改变这个世界。这样说或许很空泛,但是当你真正看这些讲座和思考这些问题的时候,一切会变得充满乐趣。

电驴下载地址:http://www.verycd.com/topics/2811266/

大小创意网站:http://dxmonline.com/html/  (可在线观看讲座视频)

附录:大小创意斋创意长、著名设计师姚仁禄,1950年生于台北,毕业于东海大学建筑系,同时创立大人室内计画公司与DAZA International(HK)LTD.后任台北室内设计公会理事长与台湾室内设计协会常务监事等。1997年创立姚仁禄创意顾问公司,期间加入慈济基金会、任静思文化执行长、大爱电视台总监、慈济传播文化基金会董事等。曾获杜邦设计大奖、代表作品-花旗银行、IBM大楼、国泰航空、台湾慈济关渡人文大楼等。2006年创立了创立大小创意斋、大小媒体,期待结合世界级脑力;建构”媒体与创意”新形态产业交流平台。

连锁反应

烦啊。一个人的大姨妈必定会带来另一个人的大姨妈,无论男女皆如此。每次发完脾气的那个人没事了,沉默的那个就开始无比郁闷,这个人就是我。家庭无小事。一块脚垫或一条抹布都足以发动一场战争,如此看来“一个馒头引发的血案”实在没什么稀奇的。我不是无法接受任何指责,我只是无法忍受对方的态度。当对方发出巨响大扫除的时候,坐在沙发上无动于衷那个未必比心里就好受。想去帮忙,对方一句“我自己来不用你”,你就得像祥林嫂似的手像触了电般缩回去。

说实在的,他对我很好。说实在的,两个人处久了,有时想想三天两头老这样确实挺没意思的。有什么办法呢。其实没有。他快乐的时候绝对不希望你是个家庭主妇,恨不得你十指不沾阳春水像个仙女;他烦躁的时候你就是罪魁祸首,家务活干过的不算,没干过的更是罪过。他有两面你只有一面,永远是那一面,那能怎样呢。那就这样吧。