Archive for ‘ 一月, 2010

CSS文字排版的技巧记录

1、对于更有吸引力的段落排版,可以采用Robert Bringhurst的方法,它约定:用你的文字大小乘以30就可以得到段落的宽度。比如如果你的文字大小是12px,用30乘以它,也就是360px,这样每行大约可以呈现65个英文字符。(注意该技巧所指的是英文,但可以借鉴)

2、行高用来限定每行文字之间的空白大小。一个经验之谈就是让行高比你的字体大6-7px。比如,如果你的文字大小是12px,加上6px就是你的行高,也就是18px。

3、line-height是可以继承的,由于这个特性,子元素就可以不用重复定义line-height了。

但是只要有单位或百分比的line-height继承,都发生了重叠的现象。那到底这是什么原因导致的呢?

如果line-height属性值有单位或百分比,那么继承的值则是换算后的一个具体的px级别的值;而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

From – http://www.css88.com/archives/1311

延伸阅读:

网页设计中的默认字体样式详解

CSS文字排版终极指南

常用Web字体的中英文以及字符混排效果

使用text-overflow:ellipsis对溢出文本显示省略号

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。

通常的做法是这样的:


overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
width:100%;

其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6;

该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。

下载这个Jquery插件:jQuery ellipsis plugin

调用方法:


$(document).ready(function() {
    $('.ellipsis').ellipsis();
}

PHOTOSHOP的秘密快捷键

原文地址:http://www.webdesignerwall.com/tutorials/photoshop-secret-shortcuts/

1、拖拽选区

用鼠标拉出一个选区,在鼠标不放的情况下按住空格键可以移动选区。

shortcuts-1

2、左右移动文件

按住ctrl键使用鼠标滑轮,可以使画布左右移动(适用于出现横向滚动条的情况)。

shortcuts-2

3、查看字体

将鼠标移动到字体下拉菜单处并选中,然后使用键盘的上、下键可以查看字体。

shortcuts-3

4、调整文字大小

使用文字工具,选中一段需要调整大小的文字,按住ctrl+shift+< 或 ctrl+shift+>  可以调节文字大小。

shortcuts-4

5、使用鼠标滑轮进行缩放

放大和缩小画布,除了使用ctrl + “+” 或 ctrl + “-”,还可以使用ctrl+alt+鼠标滑轮。

shortcuts-5

6、调节字体面板的数字值

按住ctrl,当鼠标经过字体属性面板的数字值时会出现滚动光标,使用滑轮可以滑动调节数值。如果使用ctrl+shift可以每次加10或减10。

shortcuts-6

7、直接点击字体面板的数值,上下移动滑轮同样可以调整数值。

shortcuts-7

8、单击数值输入框,用上下箭头键也可以调节数值,结合shift键可以每次加10或减10。

shortcuts-8

9、双击缩放工具图标,画布恢复100%大小。

shortcuts-9

10、折叠或展开所有图层组。

按住ctrl键单击图层组旁边的小三角,可以折叠或展开所有根目录下的图层组。按住ctrl+alt键单击图层组旁的小三角,可以折叠或展开所有层级的图层组。

shortcuts-10

11、批量显示或隐藏图层

如果你想一次性显示或隐藏不止一个图层,可以直接按住某一层的眼睛图标向下拖拽。

shortcuts-11

12、隐藏所有其他图层

如果你只想显示某一个图层,可以按住alt键点击该图层的眼睛图标。

shortcuts-12

13、改变图层混合模式

alt+shift+”-” 或 alt+shift+”+” ,可以改变图层混合模式。

shortcuts-13

14、设置特定的图层混合模式

alt+shift+ C, N, M, S, D 等特定组合键可以设置特定的图层混合模式。

For examples:
Normal = Opt + Shift + N
Screen = Opt + Shift + S
Multiply = Opt + Shift + M
Color = Opt + Shift + C

shortcuts-14

15、锁定图层透明像素

按住斜杠”/”键可以锁定图层透明像素

shortcuts-15

16、加载通道选区

ctrl+ 2、3、4、5 可以依次激活各个通道。还可以通过ctrl+alt+数字键来加载某个通道的选区。

shortcuts-16

17、tab键可以隐藏或显示工具箱

18、精确光标

大小写键会使光标转换为精确光标。

shortcuts-18

19、使用shift键与工具快捷键组合可以切换工具类型。例如笔刷工具的快捷键是B,使用shift+B可以切换画笔工具、铅笔工具和颜色替换工具。

shortcuts-19

20、改变笔刷大小。

使用” [ " 和 " ]  ” 键可以增加或缩小笔刷。而是用shift + ” [ " 或 " ]  ” ,可以增加或减小笔刷硬度。

shortcuts-20

21、数字键可以调整图层透明度(ie. 1 = 10%, 2 = 20%…)。但使用笔刷工具时,数字键将调整笔刷透明度。

shortcuts-21

22、复制图层

复制图层有多种快捷键。

× 使用 ctrl+alt 拖拽复制图层;

× ctrl+alt+方向键 (似乎比较适合Mac);

× ctrl + J 复制图层在当前位置;

× 在图层面板的选择某个要复制的图层按住alt拖拽;

shortcuts-22

23、Cmd + Opt + Shift + E 盖印可见图层并复制为一个新的图层。

24、改变工作区颜色

选择油漆桶工具,选择想要的前景色,按住shift键在工作区单击即可改变颜色。

shortcuts-24

25、填充前景色或背景色。

alt + 空格键 = 前景色 ctrl + 空格键 = 背景色

alt + shift + 空格键 = 为非透明区添加前景色 ctrl+ shift + 空格键 = 为非透明区添加背景色

26、ctrl + TAB 键切换当前文档(打开多个文档时)。

27、按住ctrl 点击图层面板的某个图层可以加载选区。

28、按住alt + shift 可以从中心开始缩放。

29、当选择了笔刷工具以后,按住alt键可以调用出吸管工具,按住 shift + alt 会激活信息面板。

30、关于快捷键设置的面板快捷键为 shift + ctrl + alt + K。

东野圭吾推理小说迷

这几天抽空看了几本东野圭吾的推理小说的电子版。包括《恶意》、《宿命》、《信》、《秘密》。简直有种欲罢不能的感觉。与一般推理小说不同的是,东野给我的感觉是个讲故事能力非常强的人,而且无论是题材的涉猎还是对人性探索的深度,都很出色。一般的推理小说会让读者非常专注于案情本身,而东野的小说则往往跳出了纯推理的范畴,融合了更多其它的元素,可以说是独具一格。

之前也曾经看过他最著名的《白夜行》、《嫌疑人X的献身》、《侦探伽利略》、《湖边凶杀案》等。《白夜行》在他的众多小说中似是风头最健的一部,记得第一次看的时候,感觉相当好。唯一败兴的是去看了电视剧版的《白夜行》。我觉得电视剧版相当烂,为嘛把一部好端端的小说拍成了充满眼泪和温情的青春偶像剧。为嘛?!!如果日本编剧对《白夜行》的理解就是他们在电视剧中所呈现出来的那样,那我简直不愿意再看任何东野圭吾的小说了。而事实上,我确实因此很久没看过他的小说。呃呃。

回过头来体会东野圭吾的小说,我反倒喜欢那些主题内容简单凝练的。就比如《信》(手纸)。在他的众多作品中这部小说几乎称不上是推理小说。情节相当简单,没有惊险的场面和动人的恋情。哥哥为了给弟弟凑上大学的学费去抢劫,结果误杀了一位老太太。哥哥因此而入狱,未成年的弟弟则背负着“抢劫杀人犯的弟弟”的身份,在社会的歧视中开始自己的人生。这期间入狱的哥哥不断写信给自己的弟弟,而这些信则成为弟弟心灵上的枷锁。这样简单的情节在东野的笔下成为了一种对歧视、对罪与罚(我有“罪与罚”情结哈)的人性探讨,其中不乏精彩的片段。对于主人公心理变化的细腻描写丝丝入扣,足以让阅读者反观自身而触摸到人性中的阴暗面和微妙的情感波动。

而纵观东野圭吾的小说,它们给我最大的惊喜就是题材的跨度大,没有千篇一律的密室杀人(虽然我也非常喜欢密室杀人),案情推理不露痕迹,小品式的题材在大师级的笔触下变得举重若轻。

附:喜欢读东野小说又不想花钱的,建议去豆丁网搜索,可搜索出一堆txt文档,在线阅读或下载均可,过瘾。

A4初体验

最近做了一个系列的产品A4彩页。这可以说是我第一次做平面,以前做过几个名片,但都云里雾里,基本不知道自己在搞啥。不过还是挺高兴能做一下A4的,至少我终于知道A4有多大了,呃呃。基本上都是素材拼贴,没什么创意可言,也没有时间让我去想什么创意;对方没有什么需求,我对产品的了解也始终停留在他给我的那几十个字上。但是对于学习构图和色彩应用是一次很难得的练习。由于一直是做网页的,以后也不知还有没有机会做这个。明白自己的差距还相当大,毕竟不是学设计出身的,对透视、平面构图什么的也只能靠直觉,所以一直避重就轻。复杂而美的作品要做得好需要真正的功力,所以最好从简单的入手。

现在一再地强调自己是美工,不是设计师,也没那水平。真正的目标是前端架构,但多数时候技术的提高也只是被工作内容推着走。我并不怕接触和学习新的技术,Flash也好,Illustator也罢,说到底只是实现的工具。只要耐心啃几块视频,坚持一下就能掌握。其实我蛮怕做设计的,这玩意需要真正的天赋,虽然目前摸爬滚打也能混下去,但是自己心里这关过不去。我想我喜欢程序喜欢代码最大的原因是在那个世界里,某种程度上只有对错,找到正确的方法,正确地解决问题便是。而做设计是不同的,有来自方方面面的因素存在,更好玩,应该说,但是对我而言压力是很大的。

截图留念:

crm

channel

fileEncryption

mailEncryption

schoolIntranet

state

开展全面的网站评估[转载]

作者:一叶千鸟

有时会被问到“看看XXX网站如何?”之类的问题。
谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功能满足都成问题,其他就没必要谈了。
举例分步说明,注意先后顺序。
第一,没有足够应用经验,不可能了解网站的功能和结构,如何做出判断?
初步印象:
是否有眼前一亮的感觉?任何元素都可能抓住用户,先入为主。
能否尽快搞清楚,网站提供何种服务,并且能尽快明白,有无注册的必要?
信息可视化:
好页面似一杯鸡尾酒,具有层次感,远近都能看出效果,而不是一坨浆糊。
呈现是否平衡?不相干的元素之间,也可能建立联系,很多不协调的根源,就在这里。
尝试在纯UI的角度深度感知,整体氛围是否和已了解的概念搭配?比如够不够热闹、有没有品位。
通过模块能否分辨出网站?不看Logo还认识网站么?检查内容+界面的相关性。
导航系统:
多深入几级页面,是否清晰自己的位置?
多纵横逛几个来回,是否已经迷路?

 
第二,假设对产品有了初步了解,确定自己需要此服务,如何细化尝试?

功能结构:
主体逻辑是否清晰?思路是否顺手等习惯问题。
能满足自己多少需求?只是衡量产品的成熟情况,但不是好坏关键。
有多少创新?让自己意外了,统统记下来。
设计细节:
交互设计,挑主要业务流程进行测试,主要看逻辑是否混乱。
视觉设计,不仅仅是图形,字符效果同样需要推敲,也属于深入信息可视化的范畴。
信息设计,内容有没有生命力?情感化等同于催化剂。
客户端技术:
交互流畅程度,大量的Ajax技术应用会影响效率。
搜索引擎的优化工作,可以借助Alexa和Google两大工具。
代码质量,看几个代表性页面就可以。

 
第三,在竞争对手的角度,如何提炼总结?

产品跟踪:
更新节奏,改版中可能会暴露发展方向和一些好创意。
解决方案,重要的不是完美,而是统一,体系才能形成壁垒。
数据挖掘:
找准用户群,并在运营的角度进行细分、锁定各自特征值,提供可修正的参考依据。
关注用户忠诚度,不满意就意味着寻求改变。
用户活跃程度和活跃倾向,也是值得参考的重要数据。
我经常参与测试产品,不管是自己的、别人的、感兴趣的、不感兴趣的、见过的、没见过的,大致都可以使用同样的方法体系。把事情做彻底,目地就是搞清楚设计意图。
三个部分阐述,其实也暗合用户理解的本能、行为、反思三层结构。通常,人做事的能力和态度具有相关性,从前边的工作成果,基本上就能评估出后续工作的斤两。

27个超漂亮的信息图表(Infographic/数据图表/视讯图)

晚上看到一组非常漂亮的信息图表,惊叹于数据和图像可以如此完美得结合在一起。光是看看这些趣味盎然的图片本身就很享受,而且仔细看看每张图片都包含了很丰富的知识。如次贷危机、环保问题、同性恋婚姻、猪流感、啤酒的历史等等。

另外推荐一组关于Infographic很不错的文章:

(数据之美)20个出色的Infographic网站

数据之美(一)

数据之美(二)

数据之美(三)

原文地址:http://dzineblog.com/2009/10/27-beautiful-examples-of-infographics.html

信息图表对信息、数据或知识的视觉化展示。这些图表被用于迅速和清晰地展示复杂的信息,例如标志,地图,新闻,撰写技术文档或教学等领域;此外还广泛地被计算机专家、数学家和统计学家用来展示和交流最新的学术成果。

信息图表使人们能够以一种更为生动和高效的方式看到并理解概念。下面的27个例子将启发你如何将复杂的数据演绎为简洁优美的设计:

1 The Largest Bankruptcies in History

1

2 Housing & Poverty

2

Crisis Of Credit 1

3

Crisis Of Credit 2

4

The Great Pacific Garbage

5

On Words Concordance

6

infoGraphic On Driving

7

Show do Milhao

8

Seeking Refuge

9

10  Michael Anderson Resume

10

11  Biking to Work

11

12  Infographic Bicicelitte

12

13  A History of Gay Marriage Bans

13

14  Exploding Internet

14

15  Where are all the fish?

15

16  Piggy Trouble

16

17  Classifying Experiences

17

18  History Lesson: The Story of Beer

18

19  Browser Wars

19

20  On Currency

20

21  Digital Media Weights and Measure

21

22  Bulgarian Labour Force

22

23  Bono: When Did He Get Into This Stuff?

23

24  Where did all the money Go

24

25  Ulip Cver Drive

25

26  What’s in You mail

26

27  Aniversario de la VESPA

27

相关资源:

Flickr Info graphics Group

Good Magazine

Visualizeus

http://www.tuyansuo.com (大量信息图表)

SOHO以后发现,原来SOHO可以比上班更累。比如上班你只需要纯粹的八小时工作,不排除工作之余读新闻、看技术文档、思想云游和睁着眼睛睡觉。而其他时间纯粹是私人时间,除非任务紧迫,我一般不将工作上的事带回家思考。

SOHO却比较痛苦。对于我这种责任心过度膨胀的人来说,现在连早上赖床、发牢骚、化妆、穿衣、挤公车的时间都省了;虽说耳边爽歪歪地听着音乐,前方两米处电视里某盗版大片正在播放,抽烟不用爬到厕所里去,脑子里却更多想的是工作上的事。QQ永远在线,邮箱有空得开开,还凭空多了一堆电费和买零食的费用(我终于有了家庭主妇对理财的自觉性)。

不过仔细想想还是喜欢工作的。喜欢工作,不喜欢上班。早上八点看了部西片,电影里某人说“哥不喜欢去单位”,我国字幕组的翻译功力真是强,完全说出了我的心声。

喜欢工作的唯一原因是可以不断接触自己这个领域的新的东西,而且是赶鸭子上架。实践证明,赶鸭子上架的进步是很快的。比如每天做一堆电邮模板和一堆A4彩页,比如剪辑视频和配字幕,在一个月前,这事听着就很不靠谱。不过现在好歹也做出了一小堆。刚才Peter问我为什么75%的用户收到的邮件可以看到图片而还有25%是看不到的,我告诉他这应该是电邮客户端的解析问题。对于第一次做电邮模板并且几乎没有进行过任何测试的我来说,75%这个数字还是可以接受的(或许本人要求太低了)。

如果某领域钻研得不够深入,解决问题的方法和经验至少可以部分弥补这些缺陷。