All posts in 界面设计

设计五原则

本人非计算机,亦非心理学,或者交互设计,更非设计专业出身,因此什么都是半桶水。即使如此,依然靠着兴趣寻找乐趣。对于设计,爱之,但没有受过系统培训,更多时候只是从用户角度来考虑问题。今偶读一文,叫Five Principles to Design By,跟本人观点颇投缘,虽然有些观点不是很认同(如:设计不是艺术,考究起来,现在啥都可以冠上艺术二字,何况设计呢),但道理挺得我心,遂花两小时,冒着上班迟到的危险,翻译出来,与众分享之。水平有限,若有不通或歧义,请多多指出指正指教,不胜感激。以下是正文:

技术为人民服务

人们经常埋怨自己的技术短处。当电脑当机,他们会说:“我一定是干了某些愚蠢的事情”。面对一个设计糟糕的网站,他们会说:“我一定是太蠢了,我竟找不着北”。他们很有可能去买一本傻瓜指南。

很不可思议!人们在使用技术时不应该感到挫折。就像客户,用户永远是对的。如果软件崩溃了,那是软件设计师的错;如果在某个网站上找不着北,那是web设计师的错。但这也不表示设计师要羞愧低头……他们更应该把这看作是一个学习的机会!好设计师与坏设计师最大的差别在于,如何处理他们的让用户正折腾着的设计。

技术为人民服务。人民不会为技术服务。

设计非艺术

艺术是关于个人表达的。它关于生命,关于情感——艺术家的想法和主意。它不太关注第三者干什么,活动也不是必须的,仅是他们的鉴赏。艺术实践不需要这些。鉴赏是艺术家的必需品,同时他们也是孤独的。

设计,从另一方面来说,是关于使用的。设计师需要别人来使用(而不仅仅是鉴赏)他们的作品。设计不存在不让人们使用它的目的。设计辅助解决人类问题。我们能授予一个设计的最高荣誉不是它多漂亮,多艺术,而是它用途多广。

不像艺术,设计总是存在于情景中的。情景对一个设计至关重要:它要解决什么问题?为谁设计?在什么时期?这就是为何设计与技术如此紧密的缘故。因为技术变化太快,所以设计必须步随其后。十年前的设计在今天可能不值一提。充满精彩设计的历史没有必要继续存在。

伟大的艺术,从另一角度说,永远风行。就算今天我们可以复制一百万个大卫像,我们依然欣赏米开朗基罗的原作,因为它是一个人的辛劳和表达。艺术永远不会凋谢。伟大的设计则依赖于它产生的年代和要解决的问题。但艺术不这样,艺术是永恒的。

做个测试。当人们享受艺术时,说:“我喜欢”;当人们享用设计时,说:“做得不错”。这并非偶然。好的设计就是能干活的料。

体验属于用户

设计师不生产体验,他们制作的是体验用品。看似细微的差别却有很大不同,因为它把设计师放在服务用户的位置上,而非其他方式。这并不是要扼杀创新,它并不会妨碍设计师跳过上述关于艺术的阐述。它只意味着,设计的体验并不会简单地因为设计师说这般这般就会这般这般地发生,当用户提交反馈时,真实的体验就确确实实发生了。

最终的体验发生在用户那里,体验是属于他们的。

伟大的设计是无形的

伟大的设计一个有趣的属性是,它来源于认可。用得爽的时候我们忘了创造它时的种种艰辛。有时,就像普通的汤匙,显而易见,这东西太简单了,但我们会忽视了在历史的某一时期它并不这样。还有,就像汽车,这东西尽管很复杂但依然容易使用,但是我们却对于它背后数以万计的工时视而不见。这是一种羞耻……每一个伟大的设计都有丰富的历史。每一设计背后都是一个或一群设计师,他们想通过解决某些问题来让世界更美好。

烂的设计显然是因为它伤害了使用。它拙劣,困难和复杂。最为讽刺的是,这个世界上烂的设计比好的设计更容易碰着。它像暴徒一样强奸着我们的头脑。它像恶徒一样在我们面前逞威风。因为有用,伟大的设计通常都是无形的。

简洁是终极哲学

如Saint Exupery所说:设计师知道自己要达到完美,不在于无物可增,而在于无物可减。。简洁自成一体:知道什么要加和什么要扔……当它作用时,就像魔术般实现预期效果,因为没有任何复杂的东西传递给用户……只有简洁。这是设计师的最高成就。

标准的、语义的、Unobtrusive的页签切换

页签的流行

自从Yahoo!的首页引进页签(tab, 见下图)之后,这种可用性极佳的方式越来越受欢迎,用户也逐步习惯和喜欢上它,因为它可以在原有的空间上增加更多的可用信息,而且只需切换,不需刷新整个页面,浏览更舒畅。很多网站接受并使用,如新浪等。

页签样例

页签的标记结构

那么,让我们来看看这些页签后的代码。

新浪完全不考虑什么标准,就是表格嵌套,我们略过不提。Yahoo!的XHTML形式是这样的:

<div>
  <ul>
    <li>页签1</li>
    <li>页签2</li>
    ...
  </ul>
</div>
<div>
  <div>内容1</div><!--它们可能由Ajax载入-->
  <div>内容1</div>
  ...
</div>
...

符合标准,但却没有语义。页签和相应内容没有任何关联。也就是说,在没有CSS展现的情况下,用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说,必须对元素定义更多的id或者class作为调用钩子(hook),容易造成代码冗余。有人对此作出改良,使用连接元素的hash(即#号后的字段)跟内容进行关联,即下面这种形式:

<div>
  <ul>
    <li><a href="#content1">页签1</a></li>
    <li><a href="#content2">页签2</a></li>
    ...
  </ul>
</div>
<div>
  <div id="content1">内容1</div><!--它们可能由Ajax载入-->
  <div id="content2">内容1</div>
  ...
</div>
...

这种方式对于机器来说,确实找到了关联点,而且用户点击的时候,也能在hash的作用下(传统说法中的“锚点”)调到相应的内容区块。有进步,但还是不够语义。

语义,语义,语义!

理想中标准的、语义的tab代码应该是怎么样的呢?在我看来,应该是这样:

<dl>
  <dt>页签1</dt>
  <dd>内容1</dd>
  <dt>页签2</dd>
  <dd>内容2</dd>
</dl>

当然,我认为并不是Yahoo!的设计师/开发者并不了解语义,可能是由于某些特殊的需求在这种代码下可能会实现不了,只好采取折衷方案。是的,在这种代码形式下,语义虽能充分体现,但是要实现页签的表现形式,确实是一个难题。

解决之道

首先,请打开我们的Demo页面,先自行分析一下。如果您使用Firefox,可以尝试把CSS样式禁用进行“欣赏”(如果您装了Web developer toolbar,您可以CTRL + SHIFT + S)。继续。

解决dt的横排

dtdd交错,如何能够使得dt排在一行上?well,理论不分析太多,要使它们在一起,我们假设dd不存在。这样的话,使用float就能排在一起。既然dd不能不存在,ok,那么让它们脱离文档流,如何做?position:absolute;就可以了。但是IE6有问题,wtf . 我的解决方法是,使用JavaScript把所有的dt凑一块,这样严重伤害了语义,但这只是一个浏览器问题,而且是在有JavaScript的时候才产生语义问题,阿弥陀佛,辩证法认为事物都具两面性。

解决dd的自适用高度

对于已经position:absolute;了的dd,无论是理论还是实践,使用纯CSS都没有解决方法。同样,我使用了JavaScript来动态计算它的每一次高度,然后赋予整个dl

局限性与缺点

这样做保证了标准、语义、Unobtrusive。但对于少部分拥有能解析CSS的先进浏览器但却关闭了JavaScript的用户来说,极有可能会被不能自适用高度的页签下的内容区块挡住了跟随在后的信息。

s2uTab

很高兴我能写出一些实用的JavaScript,以上所提到的,我将之命名为s2uTab — 偏要解释的话,它就是Standard, Semantic, Unobtrusive Tab的缩写。首先,它很小,不依赖于任何库,在IE6+, opera 9+, Firefox 2+均通过测试(若您有Safari,务必帮忙测试一下,谢谢)。其次,灵活,除了dl外无须任何钩子,且页签数目灵活没有限制。再次,您可以指定页签切换的事件形式,可以指定初始的页签是哪个。

用法

您可以为window.onload添加如下函数:

s2uTab(页签, 事件类型, 初始页签);

其中,页签指dl元素的引用,如果您传入的是字符串,则返回id是改字符串的dl引用;事件类型是指,页签的激活是点击还是鼠标悬停,传入click或者mouseover(注意:没有”on”!)即可;初始页签是指您在初始化页面时需要激活的页签,注意,为符合编程习惯,请从0算起。

请多多参考我们的例子

Smallest effective difference

抱歉还没有找到合适的词来翻译这三个单词的组合。它出自Edward Tufte,意思是:Make all visual distinctions as subtle as possible, but still clear and effective,翻译过来就是说,让元素视觉差别尽可能细微,但依然保证清晰和效率。一个典型的例子是:

nytimes navigation
消息来自Typographical Contrast

这是The New York Times的导航系统。看上去有什么特别的吗?没有。但是可以很明确地知道哪些是主导航,哪些是次级导航吗?答案是明确的,但是从视觉上说,并不见得是显而易见的,但你却可以明确区分主次,何也?难道真只可意会而不可言传?让我们来分析一下吧。

最重大的视觉差别在哪?颜色?确实次级导航颜色稍微浅一点。等等,我们来做个实验。以下是我处理过的图片:

nyt navigation with same font

这下,仔细看,依然可以区分主次,但是得费更大的劲。注意,我只是把次级导航的字体族(font family)改了一下,从视觉上说,这是很细微的变化,如果不细心根本感觉不出来。但是给你的感觉发生了很大的变化,很明显,主次的清晰性大打折扣,即使是细微到很难觉察(当然,如果你是一个称职的视觉设计师,你一眼就能看出来)的变化。

这就是Smallest effective difference。如果感兴趣,推荐你继续这篇:Design Decisions: Basecamp help.

让我们看看百度之前的首页(由于找不到相关截图,这是我自己加工的,估计就这么个样,如有不对或者你有之前的真实截图,请指出或者提供,谢谢):

百度推行空间前的首页

有一天李老板说,我们要强势推广空间,设计师给我想个方案,在首页上重点突出空间。相信,设计师也准备了大量的方案,套红,加粗,加大等等,这些都是突出的手段。但是,太过突兀会不会伤害用户体验?有没有可能保证空间这一条目跟其他条目之间的差异尽可能小,但是能够重点突出它,吸引用户的注意而又不会让用户产生惊怵?

现在的首页,把空间拎出来,放到了搜索条的下方:

百度现在的首页

空间两字没有套红,也没有加粗加大,只是挪动了一下位置。但是效果就出来了,搜索条产生的非平衡感(不知道这算优点还是缺点,看久了会产生不安,还好用户在这停留的时间很短)让用户迅速把注意力集中到了空间上。Bingo! 目的达到。

尽管我不知道最终决定了这个方案的设计师是否知道Smallest effective difference,但是这确实是一个Smallest effective difference的经典案例。

更新:根据Seven的留言,我的加工图是错误的,而且说是空间跟前面内容逻辑不符而另拎出来(小疑问:那怎么更多就可以跟空间在一块呢),当并妨碍我们的Smallest effective difference的理论,即使百度设计师真的没有过这样的想法。为我的错误图片感到抱歉,但还是不更换了,留着对比能有说服力。

自然,如果没有参与,永远不要去猜测设计师背后的动机或者支持理论是什么,就像机遇只可遇不可求一样。很多事情往往是无心插柳而成,百度如此设计无意中支持Smallest effective difference了,从而也加大了空间的举重。

web设计95%是排版

看到这个题目,第一感觉是耸人听闻。不管是95%或是更多或是更少,排版确实是一个不可忽略的问题。在我所遇到的web设计师中,或许是遇到的还少,我没有发现谁真正在意web排版。看到这篇文章,感触颇深(因为我刚使用linux的时候需要配置字体,顺便学习了不少的字体知识,也顺便成了一个爱好),周日在家挺闲,为了提高英语水平,顺手翻译了出来。希望对大家有所启发。

这篇文章来自一个研究并提供信息架构的网站:Information Architects Japan,原文:Web design is 95% typography.

又及,文章多次出现typography这个单词。正规的中文翻译应该是“排印”,但考虑web这个非印刷媒体,使用排印并不见得好。于是我根据语境,有时用“排版”,有时用“排印”,请读者明鉴。以下是翻译正文。

web中的信息有95%是成文的语言。为何web设计师应该好好学习一下设计成文信息的主要准则,换句话说,排版?这就是最佳的理由。

信息设计就是排版

回到1969年,Emil Ruder, 一个瑞士著名的排印大师,其笔下关于当时的印刷氛围,简直就是我们今天网站的写照:

今天印刷术的泛滥成灾让我们的个人价值被轻视,因为郁闷的我们现在并不能掌控印刷中的一切。分割、组织和实现印刷术的一切是排印师应有的任务,只有这样,读者才有更好的机会找出吸引她/他的东西。

信息设计师是21世纪的排版师

稍微联想一下(请用在线排版取代印刷),这就像是信息设计师的职务描述。分割、组织和实现印刷术的一切是“信息设计师”应有的任务,只有这样,读者才有更好的机会找出吸引她/他的东西。宏观排版(所有的文本结构)跟微观排版(样式和空间的细节方面)包括我们今天称为“信息设计”的很多方面。也就是说,信息设计师今天正在做排印师30年前的工作:

排版面临一个很直白的职责,这就是传达信息。没有理由能免除排版的这一职责。一个并不能阅读的印刷品只能变成一个无用的产品。

优化排版就是优化阅读,亲和力,可用性(!),综合文本平衡等。组织文本块并结合图片,难道不是图形设计师、可用性专家、信息架构师应该做的吗?但为什么这是一个被忽视的主题呢?

为什么这是一个被忽视的主题?

字体太少?分辨率低?

主要原因——抱怨连天的——不看好在线排版准则的观点是,能用的字太少了。第二个观点是屏幕分辨率太低,让像素或者反锯齿字体之一很难阅读。

文艺复兴:只有一个字体

认为我们没有足够的字体可用的观点是不切题的:在意大利文艺复兴时期,排印师只有一个字体可用,但这个时期还是产生一些顶级漂亮的排版品:

SpecimenBook

该排印师应该没有太在意他手中手能掌握的字体种类,实际上也不应该太在意字体的选择。他应该更关心时代能赋予自己手中掌握的,并尽力发挥。

选择字样并不是排版

第二个观点也并不见得好到哪儿去。在印刷初期,印出来的字母质量比我们今天在显示器上看到的更差。更重要的是,如果处理得专业,屏幕字体更易于阅读。信息设计不是关于使用好的字样,而是关于使用好的排版。两者的区别很大。谁都可以使用字样,有人可以选择好的字样,但只有少数人能够精通排版。

把文本当作用户界面

对,不同平台和不同浏览器如何处理字体是恼人的,也对,分辨率问题很难让注意力集中坚持到五分钟。但是,好啦,确保文本在所有主要平台和浏览器中赏心悦目是web设计师的职责。正确的行间距,单词和字母间距,留白,一定量颜色的使用有助于可读性。但还不彻底。一个优秀的web设计师知道如何跟文本而不仅仅是内容打交道,“把文本当作用户界面”。瞧瞧Kohi Vinh的网站,你大概会明白他的意思:

koivinh

稍微著名把文本当作用户界面的unornamental网站例子有: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. 一个难以争辩的必然事实是,把文本当作用户界面是成功的唯一参数。成功的网站设法同时创建简单的界面和强烈的特征。但这是另外一个主题了。

从哪开始

web排版
为了“破除关于web排版的某些荒谬想法”,他已经“按照Bringhurst的工作原则来构建他的网站,并解答如何通过HTML和CSS中可用的技术来达成各项目标”。
优化排版的5个简单步骤
他所谈论的排版“并不是你典型的‘该用哪种字体’的排版”。对于相信让字号和行间距默认大小使得文本能够任意缩放会提高网站可用性的人,这是一个不错的阅读材料。
Khoi Vinh
behaviordesign的创始人之一。现为NYTimes.com的设计主管。非常天才的一个人。
Rod Graves
通讯设计师。令人赞叹的工作:“排版是我绝对的中心。排版网格和层次通常会成为我开发的视觉语言的基础。”
A List Apart
通过字样通讯。字体和布局。为读者设计。易读性。字样,图形设计。web排版的问题。控制web排版:字号、字体和颜色。CSS方法,浏览器问题,用户问题和解决方案。
Association Typographique Internationale
ATypl(Association Typographique Internationale) 是一个专注于样式和排版的主要国际组织。创建于1957年,ATypl为国际样式社区之间提供通讯的结构,信息和活动。
Thinking with Type
书籍Thinking with Type的在线伙伴:设计师,作家,编辑和学生的关键指南。
Typetester
比较屏幕字体样式。
Typophile
Typophile是一个会员制和赞助商支持的社区。2000年以来Typophile引领开放合作,并且我们总是能学习到好主意。我们他们伺服超过每月3百万的网页。
Typohile Wiki
一个有关样式和设计所有一切的用户创建百科全书。用户为建立协作,有用,平衡和相关的资源而创建和编辑条目。
The Next Big Thing in Online Type
比尔盖茨要计算机用户,哦,微软用户,能够拥有一个更舒畅的屏幕阅读体验——太重要以至于提高屏幕阅读成为他最重要的五件事之一。
Emil Ruder, Typographie (Amazon)
Emil Ruder’s Typography是一本永恒的书,几代排印师和图形设计师都从中学习基本原理。Ruder, 二十世纪最伟大的排印师之一,是一个抛弃并用新的规则取代Emil Ruder传统规则的先锋,来满足新排印技术的需求。

更新:该文作者在疑问下迅速推出 第二部分,感兴趣的朋友可以看看。本想翻译出来,但太忙了,有心无力,见谅。

另外,小小抱怨一下,很多朋友都对这篇文章有很多热烈精彩的讨论,但是为什么不发一个 trackback 回来呢?这样可以方便读者追踪文章的各种观点。

网站的反馈提示

有交互就有反馈。反馈可以有很多种,包括各种界面元素,声音或者影像的变化。这种变化的目的在于,提醒用户操作结果。这个结果十分重要,成功,则进入下一阶段的使用;失败,则继续或修改当前操作至成功。一般来说,成功的操作,软件设计的习惯都是直接跳转到下一阶段,没有必要使用冗余的反馈来干扰用户。当然,这个阶段是最后阶段的话,反馈不可少,让用户知道已经完成阶段任务。失败的操作,反馈显得十分重要。如果没有明显的反馈,用户会不知所措,或者干脆放弃对软件的使用。

当然,你知道我不是交互设计师,也不是“用户体验设计师”,我只是一个“页面切割师”(Orz…)……我想从“页面切割”的经验中,从逛到的各种有趣网站(你知道,我热爱互联网 :) )中,谈谈网站(现在流行叫Web App,对,网站也是软件哇)使用过程中的反馈。

网站有自己的特殊性。它必须运行在一个已有的软件(各种浏览器)上,必须受到运行坏境的种种制约。

在'Web 1.0'时代,通常的做法是,所有一切交互,都等待服务器接收数据处理后,返回处理的反馈。看看下面,你是不是觉得很熟悉:

facebook's profile update wordpress

这是经典做法,也是最安全的做法,一切都必须经过服务器的确认。但是碰到网速等因素困扰时,尤其是互联网的洪荒年代,绝大部分人都是通过一根理想值是14.4k的电话线上网,等待服务器的反馈结果,慢得往往让人崩溃。

于是JavaScript应运而生,客户端能做一些最简单的检查,再也不用等服务器的处理。比如:

taobao

JavaScript还有一个更恐怖的提示形式:

google_alert

这种方式可以说臭名昭著,原因在于,弹出这么个对话框时,操作系统(你知道我指Windows)会发出震耳欲聋气势如虹的声音,令用户感觉“超不爽”。其实,或许能改稍微改善这个问题,这种方式的提示还是有其可取之处的。没有任何页面上的提示能比弹出的对话框更让人注意,而且,这个对话框有“冻结操作”的功能,在某些重大场合下,失误的操作会让用户损失惨重。上面的Gmail例子,是发生在放弃草稿邮件(可能已经信心苦苦打了很多字)的“重大情况下”,这么做是合适合理的。

当然,我们可以在页面内模仿这种形式:

zhanzuo

但是,你知道,我一直都强调的,没有JavaScript怎么办?题外话了,程序设计应该考虑到,没有JavaScript情况下,服务器端应该能够正常处理提交结果,不要轻易信任客户端返回的数据而不加检查。

当然,在'Web 2.0'时代,我们也少不了提示,Gmail是这样干的:

gmail_action2

我们知道,“不刷新”是'Web 2.0'的重大技术特征。我们的操作,页面不需重新生成,提示信息可以自动出现在当前页面的某个位置。某个位置?我前面强调过,网站必须在浏览器等客户端内执行,浏览器可以有滚动条。于是,我们的问题来了:

gmail_action

这个截屏跟上一个是同一操作。假如我把滚动条刚好拉到这里,我的操作将看不到任何反馈结果。'Web 2.0'的“不刷新”让我以为什么都没有发生过,首先我会怀疑我的操作有误,继续尝试……假如我看不到上面的提示,我只能放弃。

当然,这不是“不刷新”才有的问题。看看豆瓣的一个添加书评的操作。我在上面做了操作,刷新了,返回的还是这个页面,根据经验,这是不成功的状况。但问题在哪?发生了什么事情?

db1(点击看大图)

我努力寻找,我错在哪啦?知道把滚动条往下拖,才发现:

db2 (点击看大图)

My God…把以说中文为荣的我惊呼夷语。

由于笔者小学语文没学好,在找不到这篇文章的中心思想后决定分析一下豆瓣为什么会这么做。

根据心理学的什么原理来着,用户的注意力往往会发生她/他所操作的地方。比方说,我按下了一个按钮,若有任何问题,我希望反馈就在这个按钮旁边发生。比如:

google_analyst

这是再正常不过的交互与交互反馈了了。但是,我们可能会忽略掉一点,网页的特殊性让我们的操作区域有可能会在刷新后消失于我们的浏览器的可视范围。这种情况下,懒惰,“短暂失忆”的用户不一定会拉动滚动条来找刚才的操作区域,进而找反馈结果。豆瓣是不是忽略了这一点?其实“真正的答案”是:人家豆瓣才不至于像我一样吃饱了没事干去分析什么鸟理论…… XD

在这种情况下,豆瓣这样的反馈信息是不是该向我们第一个例子中的Facebook和WordPress学习,反馈信息直接放在标题下或者能在第一屏的某个地方不是很明显么?

分析这么多,我终于有了一个在写之前没想好的结论:反馈信息应该放在能够让用户感觉得到,最直接了当的地方;在某阶段交互结束后,用户应该能够没有任何操作就能获取反馈信息。

字体排版漫谈

在热排版年代,熟练的技术工人会全身心地投入排版工作。而现在,随着桌面排版系统的发展,每个人都可以做“排版工人”,排版艺术渐渐衰退了。排版是一门艺术,不能完全交给电脑完成。

首先认识一下西文字体的发展。老式字体往往有衬线,反映出传统字体设计的特征。老式字体字母往往会有倾斜的轴线,这是镌刻字体的凿子类工具所特有的痕迹。过渡性字体也有衬线,但字母中粗细线条的反差没有老式字体那么明显,而且其轴线也趋于垂直。字体本身看起来更清晰,具有手工绘制的特色。现代字体设计趋于清晰简洁,为迎合现代特征,字体设计被简化,衬线逐渐被去除,线条也不再有粗细之分,干净利落,更具机械绘制的特点。而电子计算机的发展,使所有的字体设计都成为可能,数码(digital)字体中,有的明显继承老式字体风格,也有的体现独特的现代文化气息。下图比较一下四种字体,注意看我在老式字体和过渡字体所标示的轴线。

font-history.jpg

随着各种桌面设计系统的出现,运用不同规格的字体进行设计已不再需要专业培训。在热排版时代对字体处理的专门词汇和技术知识往往被忽略,不幸的是,这些词汇和技术是确保设计成功的最基本训练。能够得到最佳的设计效果,不是由于掌握了最新的流行趋势,而是对字体设计的最基本,最传统的训练。所以让我们来熟悉一些字体排版的术语。

点的大小和x高度。铅字的大小用点(point)作单位。任何字体的点大小都是从字母上升部分顶端到下伸部分底端的距离。而字母x顶部到底部的距离被称为x高度(x-height),这是视线最集中的部位。影响可读性不仅仅是大小,跟字体的设计也有重要关系。

加空铅。这个术语可以追溯到字体用金属铸造,然后用打磨好的铅条来分隔每一行字体的年代。因此你也可知,加空铅即是字体每行之间的间隔。

下图详细描述点、x高度和加空铅。

p-x-l.jpg

字母间距和每行长度。虽然电脑会自动清除决定单词中字母的间距,但有经验的设计师会给正文或标题的字母专门设计间距,包括扩大或者压缩每个字母前后的细小空间。关于每行长度,大脑和眼睛在感到疲劳并游离于所阅读的材料之间所能承受的每行长度极限,据测是每行39到45个字母。

字体排版的对齐格式。对于世界上的ltr(left to right,左到右)书写/阅读顺序的语言来说,左对齐也许是最舒服的格式。读者可以沿着左边的垂直的直线方便地找到第一行的开头,而右边的空白也可以让段落显得更自然。右对齐和中间对齐,只能适用于少量的字体,因为每一行不规则的开头会增加阅读的时间、精力和难度。两端对齐适用于要充分利用版面,如报纸,但有时候会让字母间距不均匀。还有一种自由格式,虽然读者需要花更多时间和精力,但确实给设计师提供了无限的可能性。

混合字体。使用有联系的字体(可以是一副铅字)可以帮助避免视觉上的混乱。一次不要混合太多不同的字体,可以考虑改变字体大小,分量或字形,但不要一次改变全部三个方面。老式字体往往能与亚现代(过渡)字体混合,这是因为亚现代字体在设计时融合了老式字体的风格,同时兼备现代字体的简单,这是字体既不相同,又能相互协调。同一份设计中的不同字体应有自己的大小和间距,以便相互之间的融合。

参考文献:The 7 Essentials of Graphic Design

如何回到首页?

每当我访问一个新站点,我比较关心的是,当我离开首页以后,我该如何返回呢?我常见的方式有几种:

  1. 在Logo(或站点标识文字或站标)上加入首页的连接
  2. 在导航中列出一个“首页”(或类似)的连接
  3. 在某个角落写上“首页”(或类似)的连接
  4. 第一种情况结合第二,第三种情况之一
  5. 压根没有,用户只能键入站点的网址重来一次

虽然我不懂什么用户体验的狗屁分析,但依据某人说法,用户就是专家。我是用户吗?是的,所以我也是专家,既然是专家,我就说说我的对于上述问题的用户体验吧。我认为,在logo(或站点标识文字或站标)加上首页连接,结合在主导航上加上“首页”(或类似)的连接是最佳方式,只给logo(或站点标识文字或站标)加上首页连接是次佳方式,其他的就不是什么好的实例了,用户体验一定不是那么爽,原因很简单啊,要回到首页,怎么还那么费劲啊……

在logo(或站点标识文字或站标)加上首页连接是一股世界潮流,不知道我的看法对不对,我感觉这是Blog的流行所触发的。对于你我这种经常浏览blog的人是不难发现这股潮流的,所以对我们来说,想返回首页,最习惯的做法是点击 logo(或站点标识文字或站标)了。但为什么我还是认为这是次好的方式呢?并不是所有的用户都知道 logo(或站点标识文字或站标)的点击就是首页,了解这个近乎常识的东西还得培养用户习惯。所以,我认为最佳方式是,在主导航上加入一个“首页”(或类似)的连接。举个实际例子:adaptive path。无论是哪一类用户,无论到了哪里,用户总能轻易找到回“家”(首页)的路。

反观国内的BSP们,就举Sina Blog和Bokee吧,当你访问某人的blog时,请问你能轻易够找到“回家”的路吗?

优化移动XHTML 服务的主要指南

来自《Series 60 Developer Platform: 设计XHTML 移动描述内容》。

为移动电话设计应用软件

当开发者要决定移动终端的各种应用软件应包含什么信息时,他们应考虑用户在什么情况下使用移动电话。服务内容应满足目标用户群的需要,并且应该对最常见的任务进行最优化。由于较小显示设备便于移动,所以,在没有PC机的情况下,用户可能会首先使用移动电话访问英特网以及获取急需信息。相应的范例包括快速访问航班信息、查看简讯和天气情况等。但用户使用移动电话上网冲浪的可能性要小一些。

保持用户任务流的流畅及图像的合理使用

彩色页面看起来很诱人,但当图像传输使得服务减慢时,彩色页面也许并不让人觉得很舒服。根据可用性研究2,用户不太热衷于那些由于图像传输而中断他们任务流的服务。特别地,当用户在搜寻目标页面时,大的图像就不太合适。含有信息价值的图像是令人青睐的,但在多数情况下,用户或是关掉图像以节省时间和金钱,或是不等图像下载就切换到下个页面。在下载所有图像之前允许用户继续浏览页面,是很重要的。

大表格也许会产生相似的问题——也就是说,在某一页面下载完之前,用户的操作被冻结;或者在页面下载完之前不能继续进行其他操作。因为移动电话显示屏的大小不同,所以开发者应确保即使是在最小的显示屏上,也能够阅读数据表格;通常这些数据表格要进行压缩以符合显示屏的要求。

Read more…

Designing for the Web

来自Digital Web MagazineDesigning for the Web, 总结了一些针对WEB设计需要注意的问题。

第一,分辨率。显示器分辩率使用情况如下:

Screen Resolution 2005 2004
Larger 11% 10%
1024 × 768 56% 50%
800 × 600 28% 35%
Smaller/Unknown 5% 5%

我们不去追究数据的权威性,但至少可以反映个大概。依据中国国情,使用800×600的用户难说不会比上述数据大,所以,现在绝对不要抛弃我们的800×600的用户。

至于图片的分辨率,这篇文章说得太多了,我觉得web设计中,时刻记着72dpi就够。

第二,浏览器使用情况。

Browser 2005 (July) 2004 (December)
IE 6 67.90% 65.50%
IE 5 5.90% 9.90%
Firefox 19.80% n/a
Opera 1.20% 1.80%
Mozilla 2.60% 17%
Netscape 0.50% 1.60%

如果不是特殊需求,我觉得Designing for IE 6+ & Gecko based (etc. Firefox)就够了。

而浏览器实际能够处理的分辨率如下:

Screen size IE 6 Firefox Opera Mozilla Netscape
800 × 600 779 × 400 781 × 434 777 × 427 779 × 420 781 × 389
1024 × 768 1003 × 568 1005 × 602 1001 × 595 1003 × 588 1005 × 557

不知道为什么在宽度上Mozilla会比Firefox少2px?总之以最小值来衡量就ok了。文章还提到基于百分比设计(可伸缩、可扩展),但这确实是一个难题,得看实际情况,该文也没有给出什么能令人满意的答案。

第三、用色。

唯一能够跨平台的就是web216安全色。

第四、图片压缩

对比gif, jpg, png。我的感觉是,png未来比较有前途。我敢打赌,等IE支持alpha的png后(应该不远了),满世界都是png。

第五、文本(字体)

这个字体常用列表比较有用:

  • Arial, Helvetica, sans-serif
  • Times New Roman, Times, serif
  • Courier New, Courier, mono
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

其他相关

还需要注意易用性,可用性还有受众(Audience)的问题。

As Web designers, everything we do is for the user.