现实生活中,下面的场景总是不难见到:
- 使用Microsoft Word进行排版的时候,键入大量的空格把文档的落款(作者、日期等)挤到页面的右边;为了让落款与正文保持一些距离,便敲上两个回车空出两行;
- 书写HTML文档的时候,为了让链接突出显示,便在链接左右各加一个空格。
实际上,这些做法均不可取。在第1个例子中,使用空格让文字向右对齐将使版面的可维护性降低——如果需要增加文字,将不得不删除一部分空格;如果将整篇文档的字号扩大,一部分落款文字将有可能被挤到下一行(你或许还不知道!)。使用空行也很糟糕——对文档正文内容进行增删修改之后,这些空行或许刚好位于某页的开头(这很糟糕)。
在第2个例子中,如果只在页面某几个特定元素中添加空格也无可厚非,但若是进行文档的排版工作,有一天你需要将所有发布过的文章中的链接两边的空格去掉时……你一定会拒绝这样做。
这些空格和空行便是排版中的白色垃圾——我们需要不留情面地清除它们。在Word中,使用右对齐方式、右侧缩进以及段前间距、孤行控制便能解决第1个例子的问题;为文档中的链接加上稍许左右padding便能达到第2个例子需要的效果。当我们有能力编辑样式以实现需要的效果时,便不需要使用文本内容担当这些工作。
参考:
制作网页离不开大量的图像处理操作。网页图像处理与用于打印、视频的图像处理有着很大的差异,Web设计者应该有针对性地掌握网页图像处理方法和技巧。通常情况下,应考虑以下几个要素。
1. 格式
由计算机产生的形式简单的图像(如标识、图标)首选PNG格式,而色彩丰富的照片则一定是JPEG。如果颜色不多且没有渐变,应当使用GIF格式。
GIF是用得最多的网页图像格式。GIF最多容纳256种颜色,几乎适用于除照片以外的所有图像。它还具有生成简单的动画和透明图像的能力。
PNG格式相对较新,也是W3C推荐的格式。PNG-8最多可包含256种颜色,堪比GIF;PNG-24支持RGB模式,即可以表现任何颜色,品质较高;PNG-32在PNG-24的基础上增加了alpha通道,也即可以设置透明。
JPEG可以保存约1670万种颜色,常用于保存照片。但除此之外,几乎用不到JPEG。如果图像颜色少于256种,或者含有大片纯色,则JPEG的效果反而不好——为获得高质量的图像,文件大小可能成倍增加。
选择图像格式应当综合考虑其使用范围,如下文详细展开的颜色、透明、动画等方面。可以通过Photoshop或Fireworks的导出向导比较各项参数。选择的标准是,保证可接受的图像质量的前提下,文件应尽可能小。
Read more »
标记em用来表示强调,其默认样式为斜体。由于一些原因,中文斜体显示效果并不理想,因此对中文直接应用em标记存在不妥之处。一些设计师使用加粗表示强调,中英文显示效果都不错。不妨插一句,小字号(如12px)的加粗文本在使用点阵字体的情况下与普通文本差异明显,在使用矢量字体时则可能与普通文本差异不明显。这些设计师甚至使用strong代替em。配合标记默认样式决定标记之选择的做法必不可取。我们有理由为标记定制样式,替换其默认样式。
正式的中文排版中,强调往往是通过在文字下文打上实心圆点实现的,这样的圆点被称作着重号。在中文Web设计中,我推荐对em标记使用着重号的效果,strong标记仍保留对文本加粗的效果。
由于汉字的宽度一定,这种效果不难实现。这里打算为12px大小的文章正文设置em标记样式。首先,制作一张12px宽的图片,下图是放大至16倍的效果。

对12px大小的文字来说,将圆点直径设为3px看起来最为合适,虽然这样圆点的中心不可能处于绝对居中的位置(本图中圆点偏右)。此外,将圆点以外的部分设为透明将更具适应性。原图:dot-accent.gif。
接着制定样式。
.post p em {
padding-bottom:4px;
font-style:normal;
background:url(images/dot-accent.gif) repeat-x left bottom;
}
为了保证效果,段落文本应具有1.5em以上的行距,否则着重号可能距离下面一行文字太近。
下面是一段HTML代码及其对应的样式效果。
<p>事业是<em>干</em>出来的,不是<em>吹</em>出来的。</p>
事业是干出来的,不是吹出来的。
天地人大BBS的字符logo创意还在继续,请看——

TDRD-BBS logo in characters (3). 2009-3-8
Copyright 2009 Weakow Wang. All design concepts are the sole property and invention of Weakow Wang.
Read more »
当我告诉人们我是一个用户体验设计师时,常常会得到迷惑的眼神。于是我试着赶紧结束这种状况,告诉对方我是在让东西更容易使用,人们也爱用。这是被我重复多遍的一句俏皮话,但这句话太过简单,无法给我带来任何好处。
“用户体验”(user experience,UX)这个术语已被广泛流传,但很多企业都没弄清楚它到底是什么以及它对企业自身的成功有多重要。
我问过一些UX领域最有影响力并被广泛尊重的从业者,对我们所做工作的最大误解有哪些。结果形成了一份“十大”名单来揭穿这一秘密。读一读,学一学,并身体力行。
用户体验设计并非……
1. …用户界面设计
将“用户体验”和“用户界面”(user interface,UI)混淆并不罕见——毕竟与用户交互是体验数字产品和服务的重要部分。但是UI只是问题中的一小部分。
Read more »
设计中文网页时,如果需要给文字设置固定大小的字号,该选择哪一种呢?
我并没有做太多的调查,然而这样一种做法一定常见:在大片文本使用12px大小的情况下,稍大一些的文本(如小标题)则设为14px。既照顾1024×768屏幕分辨率的用户,又考虑呈现足够多的信息,这样一种字号配置是多数的也是明智的选择。
然而,这里面多少可以来点变化。要知道,在不消除锯齿的情况下(Windows XP及先前版本对小字号汉字并不消除锯齿,即便开启了ClearType),能够给予汉字最佳显示效果的字号是9pt和11pt。在汉字排版中,六号字的大小即为9pt。在Web设计中,9pt与12px大小相等,这种文本大小经过无数中文网站的验证,显示出极强的生存意义。随着用户屏幕分辨率的普遍提升,网页中的字号选择也向着大的方向发展,9pt或12px的小字或许会变得越来越少,但在过去、现在和将来都无可替代。
重要的是,我们可以考虑将一部分14px的文字改为11pt。11pt比14px稍大一些,然而显示效果却好得多。当然,这里的平台仍然是Windows XP及以下版本。这种细微的差别很难用语言描述,而阅读此文的设计师们却不妨试着比较比较。尤其要推荐的加粗的11pt字。在Windows XP下,由于不消除锯齿,加粗的宋体小字号文字显得很不好看,然而相形之下,11pt加粗字要比14px加粗字好看一些。要相信,一些细微的不同可能表现出不可预计的效果之差。
Honestly, if there was one subject I wish I could master, it would be typography.
很多时候,中文的Web设计仍然扮演着追赶者的角色,主流是以英语为代表的西方语言下的设计。语言是文化的重要方面,其差异——尤其是方块文字与西方字母文字的差异——强烈地影响了Web设计的效果,这其中或又以排版(typography)为甚。我们的Web设计师们醉心于那些优秀的西方设计,惊喜之余照搬或临摹,用作中文网站的设计,效果却可能差之甚远。一些跨国公司设计自己的中文网站时,几乎是将英文网站的样式表原封不动地套用到中文内容,不但整体效果失了原味,细节不当之处更不胜枚举。

微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处,反而增加了麻烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔,但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧?即便使用鼠标滚轮改变字号大小并不费劲,却并没有太多用户意识到这一点。
Read more »
用户界面中,数字随处可见,冀以提供大量信息。通常,数字越大表示内容越多(如你查看评论列表时),或者要做的工作越多(如你查看自己的收件箱时);数字越小通常表示项目数量越少。然而,当界面中必须呈现数字零时,该数应与其它数值区别对待。为什么呢?正如我将要在下文解释的,根据不同的上下文,“零”可以代表很多事情。
搜索结果
零个结果要么表示关键词不在搜出的数据集里,要么表示用户把关键词敲错了。每一种可能性都暗示需要一种不同的用户帮助。
- 纠正了关键词,也没有结果?你需要换一个词,或者去其它地方看看。
- 是否把关键词敲错了?你需要提供正确的关键词。
当结果为零时,请在设计上提醒用户注意到这个错误,或者提供可替换的关键词供用户选择。

当搜索结果为零时,Google给出“您是不是要找……”的建议来帮助用户。
Read more »
获取一张桌面的创意,为天地人大的字符logo进站图做了续集。

TDRD-BBS logo in characters (2). 2009-1-6
Copyright 2009 Weakow Wang. All design concepts are the sole property and invention of Weakow Wang.
Read more »
2009年的第一天,献给天地人大BBS所有站友一份礼物——

TDRD-BBS logo in characters. 2009-1-1
Copyright 2009 Weakow Wang. All design concepts are the sole property and invention of Weakow Wang.
谨以此祝愿天地人大在新年里新意不断。
Read more »