微软的富体验

如果你并不使用微软的Live Search(事实上很少有人使用),那么你一定会对取代这款产品的Bing印象深刻。微软的新搜索引擎使用一个单音节,四字母的单词Bing作为名称,像是个咄咄逼人的冷酷巨人,完全没有其中文谐音“病”的感觉,——从此字母B和蓝色将不再仅仅代表中国的巨人百度。Bing不仅拥有一个简短响亮的英文名,其中文名“必应”也很值得玩味——与英文几乎一致的发音由于包含两个汉字而更接近中国人的含蓄风格,更兼有“有求必应”之意,做搜索引擎的名称再合适不过。

似乎沿袭了微软一贯的风格,Bing的界面与用户体验设计也极为丰富。一直以来,Google引领的简洁风格被人一再褒扬和传颂,然而Bing的出现似乎有机会为搜索引擎世界带来一股新的风潮。

在Bing出现之前,影响力不小的Ask.com搜索引擎便一直使用巨幅照片作为其首页背景,且提供更换功能,让人印象深刻。Bing的首页界面同样炫目,还大大丰富了体验。即便不做完整考察,也不难发现一些特性。

Read more »

听到的故事

贪婪者一剑穿心;嫉妒者剜其双眼;懦弱者孤独一生。

《惩戒者》

28日在西安的住处,偶然地电视上看到一则故事。这是一则值得珍藏的故事。

故事大约发生在二十世纪二十年代的上海。小说《惩戒者》一经出版便大受追捧。书的扉页这样写道:

贪婪、嫉妒和懦弱的人将受到惩戒者的惩罚

——贪婪者一剑穿心

嫉妒者剜其双眼

懦弱者孤独一生

一次,《申报》美女记者欣宜赶去《惩戒者》作者小东的书馆进行采访。途中,欣宜遭遇扒手劫包,幸得一位好心先生相助,抢回财产。这一位,叫做浩男,恰是作家小东的助理。在小东处,欣宜不仅做完采访,还认识了与小东、浩男在同一孤儿院长大的歌手泰川。采访结束后,浩男礼貌地送欣宜出门,泰川也跟了出来,并邀请欣宜共进晚餐,结果被机智的欣宜以继续采访浩男为由回绝。一来二去,浩男和欣宜渐生感情,不久便走到一起。

然而好景不长,一个月后,浩男就像是变了一个人,他与欣宜的甜蜜生活也戛然而止。一天,欣宜赴浩男住处,送他生日礼物。进屋之前,听得屋内有人说话;却见浩男神色慌张,态度冷淡,屋内亦无他人。面对欣宜的质问,浩男只是搪塞过去。又一天,欣宜去浩男家找他,其行为依然反常;欣宜闯进浩男卧室,却意外发现床头一张照片,照片上除泰川外,浩男则搂着另外一位女子。浩男仅解释说那是他们孤儿院一起长大的好朋友,这却不能让欣宜信服。

Read more »

优异的灵活性

曾有设计师在体验Google Chrome之后指出,如果打开的页面太多,标签栏将变成下图所示的恐怖模样:

与此不同的另一种典型设计来自Firefox。在Firefox里,标签具有最小宽度。当标签数量过多以至当前浏览器宽度无法容纳所有标签的时候,将在标签栏左右分别显示按钮控制标签左右滑动;同时提供一个下拉列表显示所有未显示的标签。

是来自Google的设计师没有考虑到可能形成的糟糕情况吗?

Read more »

排版中的白色垃圾

现实生活中,下面的场景总是不难见到:

  1. 使用Microsoft Word进行排版的时候,键入大量的空格把文档的落款(作者、日期等)挤到页面的右边;为了让落款与正文保持一些距离,便敲上两个回车空出两行;
  2. 书写HTML文档的时候,为了让链接突出显示,便在链接左右各加一个空格。

实际上,这些做法均不可取。在第1个例子中,使用空格让文字向右对齐将使版面的可维护性降低——如果需要增加文字,将不得不删除一部分空格;如果将整篇文档的字号扩大,一部分落款文字将有可能被挤到下一行(你或许还不知道!)。使用空行也很糟糕——对文档正文内容进行增删修改之后,这些空行或许刚好位于某页的开头(这很糟糕)。

在第2个例子中,如果只在页面某几个特定元素中添加空格也无可厚非,但若是进行文档的排版工作,有一天你需要将所有发布过的文章中的链接两边的空格去掉时……你一定会拒绝这样做。

这些空格和空行便是排版中的白色垃圾——我们需要不留情面地清除它们。在Word中,使用右对齐方式、右侧缩进以及段前间距、孤行控制便能解决第1个例子的问题;为文档中的链接加上稍许左右padding便能达到第2个例子需要的效果。当我们有能力编辑样式以实现需要的效果时,便不需要使用文本内容担当这些工作。

参考:

欢迎访问我的作品选辑

我喜欢设计。把我过去和现在的一切有益的设计做成合辑,必是此站的重要一部分。

作品选辑可以通过右上角的导航链接进入,亦可通过下面的地址访问:

http://blog.weakow.com/portfolio

Screenshot

敬请关注此页。未来它会不断更新。

网页图像处理的要素

制作网页离不开大量的图像处理操作。网页图像处理与用于打印、视频的图像处理有着很大的差异,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 »

中英文输入方式差异影响产品使用率的两个例子

例1

根据去年7月揭示的一系列调查结果,美国82%的手机用户表示自己从不使用短信服务,而每周使用一次以上的用户仅占15%。相形之下,中国的短信使用率似乎要高得多,“拇指一族”在年轻人中大有人在。

一种可能的影响因素是手机上中英文输入方式的差异。在美国,全键盘的手机总是更受欢迎,原因是全键盘输入英文比数字键盘要快得多。然而,全键盘对中文输入效率的提升就不那么明显了。在数字键盘上使用拼音输入中文,重码虽然不可避免,但其出现规则总是固定的。看起来,使用一只手在手机上输中文是比较顺畅的一件事。影响中美短信服务使用率巨大差异的原因还有很多,但输入难易是不可忽视的要素。

例2

全球范围内,wiki(维客)是足以与博客、RSS等并举的典型Web 2.0应用。维基百科的红火令人瞩目,而企业wiki的广泛应用也为企业知识管理贡献了巨大价值。然而在国内,wiki始终未能成为主流应用,即便在企业内部推广,亦困难重重。

同样地,中英文输入方式的差异是影响使用率的可能原因。在MediaWiki中,使用下面的语法表示标题、加粗文字等,有效地提高了样式文本的输入效率。

== Section headings ==
'''bold text'''

输入英文时,敲打='这些用来标记文本结构的符号是比较自然的;然而在中文输入法下,用户可能需要切换至半角状态才能正确输入这些符号。撰写内容的同时编辑文本结构本来是很顺畅的事,但若需要频繁切换全半角可能就比较痛苦了。

中文Web设计中的着重号

标记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第三张

天地人大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 »

用户体验设计十大常见误区

原文:10 Most Common Misconceptions About User Experience Design

原作者:Whitney Hess;译者:UCD翻译小组Weakow Wang

Article copyright by Whitney Hess.

Whitney Hess版权所有。

当我告诉人们我是一个用户体验设计师时,常常会得到迷惑的眼神。于是我试着赶紧结束这种状况,告诉对方我是在让东西更容易使用,人们也爱用。这是被我重复多遍的一句俏皮话,但这句话太过简单,无法给我带来任何好处。

“用户体验”(user experience,UX)这个术语已被广泛流传,但很多企业都没弄清楚它到底是什么以及它对企业自身的成功有多重要。

我问过一些UX领域最有影响力并被广泛尊重的从业者,对我们所做工作的最大误解有哪些。结果形成了一份“十大”名单来揭穿这一秘密。读一读,学一学,并身体力行。

用户体验设计并非……

1. …用户界面设计

将“用户体验”和“用户界面”(user interface,UI)混淆并不罕见——毕竟与用户交互是体验数字产品和服务的重要部分。但是UI只是问题中的一小部分。

Read more »