1. 用户无需注册直接购买

很多公司喜欢让用户注册，但注册过程实在太冗长了，尤其对那些临时光顾的用户，强迫注册会将他们吓跑。让用户直接往购物车里添加货物，在结算前，另 外提供一个注册选项以方便他们的下一次购买是一个很有效的方法，在任何时候都要明白，实现销售比收集一堆电子邮件地址更有价值。
2. 注册要简单

你希望注册用户给你提供多少信息？也许是越多越好，然而实际上，你用不了那么多，你真正需要的也许只是一个邮件地址和一个密码。尽可能使用邮件地址 作为用户名，因为用户名容易混淆，而邮件地址是唯一的，更容易记忆。
3. 告诉用户他们所处的步骤

面包屑导航条是任何大型电子商务站点的必需，用户需要随时知道他们目前所处的步骤，以及后面余下的步骤，否则，用户会觉得茫然，甚至半途放弃。另 外，面包屑导航条还可以帮助用户自由后退，返回，以便在需要的时候对前面的操作进行修改，如果面包屑导航条不容易实现，那你至少对每一步操作进行编号标 识，如，第一步/共四步。
4. 让用户有安全感

用户对安全非常在意，尤其当他们需要输入信用卡号的时候，在用户购买的任一步骤，你都需要让他们有安全感，并且让他们知道你会保护他们的安全与隐 私，最好的办法是在网站上部署 SSL。
5. 订单确认

确认页对一个电子商务网站的易用性来讲非常必要，不仅可以让用户对前面操作的内容进行确认，也避免了用户因不确定而不断向你查询。

一个有效的确认操作包含以下三个部分：

1. 订单处理的最后一步，让用户进行确认，确认页应该包含所有必要的信息，订单概要，总价格，发货信息，以及订单取消按钮。
2. 订单一旦确认，用户会看到订单确认信息以及订单号，这些信息可以保存和打印。
3. 同时应该使用电子邮件将订单确认信息发给用户留档。

6. 搜索功能

任何电子商务网站需要一个随时可见的搜索框，用户可以对结果进行筛选，搜索功能可以让用户更好地查找商品，提供更愉快的体验。如果你的商品种类繁 多，搜索应该支持按类别筛选。允许用户按颜色，尺码进行搜索也不失一个好方法，另外，也可以让用户定制自己的搜索结果，如每页显示多少条结果。
7. 列出相关产品

如果处理得当，列出相关产品可以带来交叉销售，比如，用户购买电子产品的时候，可以列出与该产品相关的电池，线缆等配件，Amazon 证明该方法十分有效。
8. 行动按钮（Call-to action button）

不要低估了那些行动按钮的力量，“添加到购物篮”，“注册”，“结算”一类的按钮可以提高你的成交率和易用性。要想让这些按钮吸引人，需要在字体， 颜色，措辞，位置等方面仔细揣度，按钮应该足够大，清晰，色彩应该同背景形成对比。在措辞方面，应该使用“添加到购物篮”，而不是“立即购买”，后者会吓 跑某些用户。应该考虑使用本地化语言，比如，美国用户更习惯“添加到购物车”，而英国用户习惯“添加到购物篮”。如果可能，可以使用 IP 区分客户的来源以便针对不同地区的用户，提供不同的本地化语言。
9. 避免隐匿费用

隐匿费用比任何东西都让客户愤怒，一定将价格，税，快递费用，以及可能有的优惠明明白白地显示给用户，而且越早越好，人们喜欢在添加货品到购物篮之 前就知道它们需要多少钱。如果在结算之前发现多出来很多额外费用，他们会放弃订单且不会再来。
10. 让购物车随时可见

购物车应当随时可见，应当浮显在右上方。这样用户不必滚动页面去浏览里面的货品和总价。为了更好地体现易用性，应当允许用户在任何时候都可以修改， 添加或移除货品。“结算按钮”应当直接放在购物车内，方便快速访问。

1.OpenID介绍

1.1概念

OpenID 是一个以用户为中心的数字身份识别框架，是一个以URL为身份标识的分散式身份验证解决方案，它具有开放、分散、自由等特性。

OpenID 的创建基于这样一个概念：可以通过URL来认证一个网站的唯一身份，同理，也可以让每人通过一个URL(一个OpenID身份就是一个URL)，在多个网站上进行登录，作为用户的身份认证。

形象一点来说：URL是护照，OpenID服务器就是户口所在地。首先在一个OpenID服务器网站注册，获得一个URL，等于申请一个了“出入许 可证”。然后可以直接使用这个URL来登录别的网站，也可以把这个URL加到自己的主页，让个人主页的URL具备OpenID URL的功能，就像是一个复印件。然后就可以拿这个URL到支持OpenID的网站去登录了。不需要每个网站都注册一遍，因为你的信息已经保存在 OpenID服务器上，并获得那些网站的认可。好比是银行卡可以在银联内的多家银行取钱一样。不用担心自己的用户名被别人抢注，也不用怕忘记那许多用户名 和密码。

谁将拥有或控制的OpenID ？

OpenID的出现缘于开源社区，其目的是为了解决现有技术所不能轻易解决的问题。OpenID不属于任何人，也不应该属于任何人。任何人都可以选 择成为一个OpenID用户或成为一个OpenID的免费提供方，而不需要注册或者被任何组织批准允许。OpenID基金会的成立，目的是为了协助开源社 区的管理和发展，以促进和支持OpenID的扩展和应用 。

1.2基本原理简述

OpenID系统由三部分角色组成：

• End User — 终端用户，使用OpenID作为网络通行证的互联网用户；
• Relying Part（RP） — OpenID支持方，支持End User用OpenID登录自己的网站；
• OpenID Provider（OP） — OpenID提供方，提供OpenID注册、存储等服务。

USER —— 使用OpenID

RP —— 支持OpenID登录

OP ——  提供OpenID

使用 OpenID时，URL就是用户名，密码存储在一个 OpenID 服务网站（OP）上。登录RP时需要提交两个重要信息，一个是你的名字，一个是OpenID网站的网址。例如我在OP：open.cn上的账号 是：kidult，我的OpenID就是http://kidult.openid.cn/。

打个比方，你到朋友公司，要经过门卫，门卫需要确认你的身份。这时候，你就是用户，门卫就是网站登录框，朋友就是一个OpenID中介。

你要进门，告诉门卫：“我要找某某某。”

门卫打电话问你朋友：“这有个人说是找你的。”

门卫把电话交给你，你给朋友暗号：“地瓜地瓜，我是土豆。”

再把电话交给门卫，朋友告诉门卫：“没错，他是我朋友，让他进来吧。”

事实上， “门卫” 并不需要认识你朋友，只需要通过一种通用的协议与OpenID的网站交换确认信息就行了，“门卫”和OpenID网站之间的信息是建立在tcp/ip基础 上的比较可靠的唯一通路上，除非别人知道你的OpenID密码，或者黑客通过某种手段劫持他们之间的通信，或者劫持OpenID网站域名，否则别人不能冒 充你的身份。

图 1 OpenID原理

1.3 OpenID优缺点

优点：

对用户

1. 简化注册登录流程：一定程度上避免了重复注册、填写身份资料的繁琐过程，不需要注册邮件确认，登录更快捷。
2. 一处注册，处处通行：免去记忆大量账号的麻烦，一个OpenID就在任何支持OpenID的网站自由登录。

3. 减少密码泄露风险：频繁登录各种网站，容易被垃圾网站暗地里收集密码和资料，或者冒充用户身份发送垃圾信息。

4. 用户拥有账号信息控制权：根据对网站的信任程度，用户可以清楚的控制哪些profile信息可以被共享，例如姓名、地址、电话号码等。

对网站（RP）

1. 共享用户资源：给所有支持 OpenID 的网站带来了价值。

2.已经有相当数量的高端注册用户可以直接使用，不必从零开始；

3.可以不负担自己建立会员系统或登录功能所需要的开发成本、机器、带宽、安全费用；

4.用户数据是安全的，用户数据不统一存储，用户可以任意选择、更换存储的server。没有组织，没有任何一个地方可以做root，没有任何一个机构或者个人能够从这里面获利。

缺点：

1. 任何人都可以建立一个网站提供OpenID验证服务，而网站性能参差不齐，导致OpenID的验证过程不是很稳定。

2. 如果提供OpenID验证服务的网站突然关闭的话，可能会导致大量用户无法使用多个网站的服务。

3. 目前几乎所有支持OpenID的网站都很谨慎地将其做为一种可供选择的辅助登录方法，这会在很大程度上阻碍OpenID的发展。

4. 目前支持OpenID的网站还不多，其独特的使用方法并不被多数用户所熟悉。

More about OpenID…

1.4 OpenID跟Passport的比较

网络通行证进化历程：

• 最原始的注册方式，自选字母或是数字等组合作为ID；
• 到了传说中的web2.0时代，用邮箱作为ID来注册，但是隐患是“不请自来”的邮件；
• 现在，用OpenID登录，即，不用担心垃圾邮件，省去填定个人资料的过程，节省了注册时间。

目前互联网上的主流帐号管理方式有两种：

• 单一帐号系统。只提供单一服务的网站采用的用户帐号管理模式。用户注册后使用此帐号可以在其网上上实现所有功能操作。
• 通行证。例如google、163、微软等提供多套服务的网站采用的帐号管理程序。用户在注册一次之后，使用该帐号可以在这些网站所属群里面自由使用。

与目前流行的网站帐号系统（Passport）相比，OpenID具有开放性以及分散式的特点。它不基于某一应用网站的注册程序，而且不限制于单一网站的登录使用。

2.相关案例

目前，OpenID联盟包括的知名网站有：Google，IBM，雅虎，微软，Myspace，Facebook等。

2.1 国外OpenID

其实很多网站的账号本身就是一个OpenID：

AOL – OpenID.aol.com/screenname

Blogger – username.blogger.com

Bloglines – d.bloglines.com/username

Flickr – www.flickr.com/photos/username

LiveDoor – profile.livedoor.com/username

LiveJournal – username.livejournal.com

SmugMug – username.smugmug.com

Technorati – technorati.com/people/technorati/username

Vox – member.vox.com

Yahoo – http://OpenID.yahoo.com

WordPress.com – username.wordpress.com

Ziki.com

表 2 一些OpenID提供方比较

(易用性 安全性 用户信息 多ID管理 反钓鱼 密码保护)

via

Facebook 作为RP支持OpenID

2009年5月19日，facebook宣布正式启用OpenID登录系统，允许用户使用Gmail或其它支持OpenID的网站帐号登录 Facebook。可以用Gmail帐号登录Facebook，也就是说，当你在Gmail里浏览邮件时，点击了一个Facebook的链接，你不需要再 输入密码，就能到达你自己的Facebook页面里。

OpenID是一个非盈利性质的联盟，期望推动用一个帐号/密码来登录所有网站。这可以省掉大量的用户不停注册的时间，以及一堆帐号/密码的麻烦。

但是很多OpenID的参与者都不像Facebook这么彻底，例如不能用Facebook帐号登录Gmail。为什么Facebook这么 做？Facebook说：”我们认为，开放有助于培育出一个强大的开发人员社区。”Facebook在测试中发现，利用OpenID注册Facebook 的新用户”更可能”成为Facebook的活跃用户。

当然，最真实的原因来自：Facebook从一开始就是一个彻底的”开放”态度，它让用户用自己的Email地址作为Facebook的帐号，而从来没有生成Facebook自己的帐号。所以，它采纳OpenID跟自己的历史逻辑一致，没有任何损失。

2.2 Yahoo ID和Google ID

Yahoo

OpenID技术让你可以用Yahoo!账号登录许多网站。一旦启用您的Yahoo！ OpenID的访问帐户，您可以简单地告诉任何支持OpenID的网站，你是Yahoo！用户。

当您访问的网站支持OpenID登录，您只需找到Yahoo！登录按钮。或者你看到一个OpenID图标，只需在文本框输入“yahoo.com”。登录信息将被发送到Yahoo！验证您的Yahoo！ ID和密码，然后登录到该网站。

例子：用yahoo账号登录plaxo

安全措施：Yahoo! sign-in seal (安全图章)

一个安全图章是一个只在本机显示的秘密的信息或照片。每次登录都寻找它，以确保您在一个真正的雅虎正在网站。如果消息，照片，或颜色是不同的，你可能在访问一个钓鱼网站。

Google

Google期望用户用Gmail的帐号登录其他网站，比如Facebook，但是，它不允许用户用其它Facebook的帐号来登录Gmail。（例外）

Google OpenID解决方案：Federated Login

基于OpenID标准。第三方网站和应用程序现在可以使用google帐户注册和登录。

图 2 Google Federated Login原理

（谷歌作为Relying Part）

为什么谷歌音乐支持人人ID、live ID、Yahoo! ID登录？有兴趣的同学可以看这里。

2.3 国内类OpenID

国内支持OpenID的Relying Part：Yupoo又拍，乐铺，……

国内OpenID Provider：OpenID.cn，豌豆，……

更多的是类OpenID 提供方和类OpenID Relying Part

类OpenID Relying Part：京东商城、土豆、D1、99网上书城、365商城、钻石小鸟，等等。

类OpenID Provider：支付宝、人人网、QQ等。

附：如何在我的网站上用支付宝账户登录功能？(via)

答： 1、确认您签约的合同中是否有该项服务，我们称之为“免注册登陆”、“信任登陆”等。

2、若有该项服务，且已开通该项权限功能，请从客户经理那获得，免注册登陆的接口资料。若没有，则请联系客户经理 或拨打商户客服电话0571-88158090

3、根据接口资料与接口代码DEMO，类似接入支付宝支付接口的方式，接入这个接口到商户网站中，并与商户网站里的会员数据库衔接。

具体实现步骤可参考：http://dev.alipay.com/devclub/mvnforum/viewthread_thread,398

流程 ：

1、 用户在访问您的网站时，在您的登陆框里，点击功能按钮“支付宝会员登陆”

2、 通过您做好的接口与支付宝的网关，页面跳转到支付宝专门为会员免注册登陆设计的登陆页面

3、 用户填写登陆帐号密码登陆进去以后，支付宝会把这个用户的相关信息发送回本网站，同时页面跳回到本网站已设置好路径的返回页，本网站通过该返回页执行程序实现用户在本网站的自动登陆（此登陆并非登陆到支付宝网站上，而是登陆到本网站里）。

2.4 小结

封闭性质的OpenID——形似而非神似

OpenID：双向开放

• 类OpenID：单向有选择性的开放，提供接口，通过合作或开放给用户自行添加
• 真正的OpenID支持网站（OI）：影响力太弱
• 类OpenID Provider（OP）：重量级公司，用户量庞大且较为优质，活跃度高。都不是真正的开放，自身产品不支持OpenID登录。
• 类OpenID Relying Part（OR）：实力较强，多是服务型网站，以电子商务网站为多，跟几大OP有深入的良好合作关系（互补的性质 > 竞争性质），看重的是强强联合，打通用户资源。

[2]. Six Apart – Labs: OpenID, http://www.sixapart.com/labs/OpenID/

[3]. OpenID Explained , http://OpenIDexplained.com/

[4]. OpenID百度百科, http://baike.baidu.com/view/832917.html?wtp=tt

[5]. OpenID使用手册, http://www.matrix.org.cn/resource/article/2007-09-20/187c9604-671e-11dc-91f8-0da64dffe568.html

[6]. Towards an OpenID-based solution to the Social Network Interoperability problem，Position paper for the W3C Workshop on the Futureof Social Networking

[7]. Slideshare.net Results 1-12 of 1160 for ” OpenID”  http://www.slideshare.net/search/slideshow?q=+OpenID&submit=post&searchfrom=header

[8]. 什么是OpenID , David, March 23, 2008, http://blog.iyi.cn/start/2008/03/OpenID.html

[9]. 什么是OpenID , OpenID的工作原理简述, OpenID的两种模式, http://vovo.net.cn/go/OpenID

[10]. OpenID初体验, 2008-09-10, http://www.tiray.net/post/OpenID-experience.aspx

[11]. OpenID，新的用户登录体验, http://www.adxonist.com/archives/32

[12]. OpenID的用户体验 (一), http://www.adxonist.com/archives/34

[13]. OpenID的用户体验 (二), http://www.adxonist.com/archives/39

[14]. OpenID的用户体验 (三), http://www.adxonist.com/archives/54

[15]. OpenID系列(一)：注册篇, http://www.kuqin.com/shuoit/20080411/6538.html

[16]. OpenID系列(二)：使用自己的URL, http://www.kuqin.com/shuoit/20080411/6539.html

[17]. 国外各大OI、OP、RP网站

[18]. 国内各大OP、RP网站

这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要”窥见”对象中的其他两个项目，这个带有”.boxgrid”的DIV标签充当着一个窗口。还不明白? 让这个图片来给你线索吧：

理解了这个基本原理之后，我们就可以利用滑动元素的动画效果来揭开或遮盖住要展示的区域，以此来创造滑动效果。

第一步 – CSS 基础工作

在上面给出基本结构的启示图中，我们需要使用一点CSS来让它显示出预期的效果。下面这个CSS定义了查看窗口(.boxgrid) 并的在LEFT和TOP设定图片的默认POSITION，这对于滑动时的重叠交代很重要。并且不要忘记overflow:hidden将使这一切成为可能。

.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}

如果你不准备用CSS来实现半透明的描述，可直接跳向第二步：

.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

现在，我们需要设定说明层（caption box，觉得用层好过于盒）的默认的起点。如果想让其初始化的时候完全隐藏，这将需要设定TOP和LEFT为你的窗口(.boxgrid)的高和宽，（当然）这是由所要滑动的方向决定的。你也可以让它在初始化的时候只显示一部分，像这个（CSS所定义的）.caption和.boxcaption所给出的：

.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}

第二步 – 添加滑动动画

下一步是选择适合你的动画，我提供了几个预设的潜在需求（样式）。试用一下他们，选择一个符合你风格也是你需要的样式。

$(document).ready(function(){
//要更改上、下方向和左、右方向，只需要在top/left的值中添加"-"号（表示反方面）。
//垂直滑动
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//水平没去
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//比例缩放滑动
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//部分滑动 (只显示一部分背景)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//完全滑动的说明 (从完全隐藏到完全显示)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//部分滑动的说明 (部分显示-部分隐藏)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});

第三步 – HTML

这里需要一些类（class）来作为jQuery的选择器，在心里存着这样的标准：

• DIV标签的类”.cover”必须分配给任何一个想要滑动的对象；
• 有.boxgrid类的DIV标签，图片通常最先显示。

这是一个我将用在.captionfull动画的HTML例子：

<div>
<img src="jareck.jpg"/>
<div>
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
</div>

点击预览效果预览 下载这个实例的源文件

学历：大专以上
年龄：20-30
人数：2人

要求：
深入了解网站应用
有较好美术功底，熟悉目前网站主流设计模式及水平
1年以上商业网站设计经验
工作踏实，敬业，有良好的合作精神
有动画设计能力者优先
应聘者请提供2-3个成熟作品，无作品者请勿投递简历

福利和待遇：
有社保
不包午餐，可以自带午餐，公司提供微锅炉
每月基本上都有一些活动
待遇4k-7k

有意者请投递简历到will@doocom.cn ，附件最好不要超过5mb。

翻看一下近些年来用户界面的视觉设计你一定会发现“写实风格”正逐步变成主流。我们所使用的电脑越来越强劲，速度越来越快，设计师们也有了更多的发挥空间。为了增加细节，我们已经可以使用3D效果、阴影、透明甚至一些物理特性来修饰界面。这其中有些效果能显著改善可用性，比如阴影能够更好地帮助用户区别 激活与非激活状态的窗口、iPhone系统中的丰富但有效的动画效果也能极大减少用户的学习成本。

但在其他方面，这些新技术对可用性却未 必作出了多少贡献。图形用户界面基本上就是一堆符号，大部分按钮、图标以及其他控件只是指代了某些概念或某个想法，比如齿轮图标并不意味着一个齿轮，他只 是告诉你点击之后可以进行软件的设置。越多的细节和越高的写实性会让用户的关注焦点脱离这些概念。

在此推荐大家读一下Scott McCloud的 《Understanding Comics》，和GUI无关，但是每个设计师读过之后肯定都有受益  :D

最左边的图显然是个特定的男士，而右边那个笑脸形象几乎能指代任何一个人。从这个例子看得出来，如果为了表达一个概念而使用隐喻，那视觉上的细节就必须减少。而事实上实际场合中我们所使用的界面控件一般不会去指代一个特定的东西。

当然，细节也不能太少，保证必要的识别性肯定是前提，至少要让用户看得出这是什么东西：

左边这个是人脸，右边这个你就很难分清楚是蛋还是球了。

接下来我们再来看看电脑上的实际例子，一个代表“主页”的图标：

从左到右，我们看到从一间特定的房子到广义上的Home概念的变化，细节越多，越难搞清楚其指代的概念

同样的，细节也不能过少，去掉窗子和烟囱之后这个Home图标就变得像一个 ⇧按键了。

让我们用一个并不太科学的图表来说明问题：

图表上的数值并不是来自实际测试中的数据，我只是想说明优秀的GUI设计应该出现在曲线的中间部分，视觉上只需要保证足够而不花哨的细节就可以了。

那什么样的细节是恰当的，什么样的细节是会让用户分心的呢？

左边这个按钮太过写实，不适合放到界面当中，而右边的只有一个边框，也很难激起用户的点击欲望。

对于这个开关来说也是一样，过度的细节让左边这个按钮看起来就是一张照片而很难认为是界面的一部分。

合理地运用阴影、渐变等细节，让用户既能分辨得出这个元素又能不分心于图形上的效果能够帮助我们打造美观而可识别的界面。

例外情况

当然也有一个领域是特别的，那就是程序图标，只用来指代你的程序。

Coda的树叶图标不是指代树叶，而是用丰富的细节、形状和颜色特征让用户一眼就看出这是Coda的叶子。而Acorn这个图形编辑软件也正如他的名字所表现的，使用了一个橡果来作为程序图标。在这种场合，我们需要表现的只是一个特定程序而不是广义的概念，最终目的就是把图标和软件的品牌、价值直接联系起来，让用户一看就知道。所以程序图标可供设计师发挥的空间就很大了。

结论

就像开头所说，图形用户界面就是一堆符号，而符号的精髓就是简洁。让用户快速准确地读懂符号以及其背后的含义是我们每个GUI设计师的重要责任，过多华而不实的写实性只能在可用性上带来明显的问题。

在设计中增加细节的目的不是让界面和图标看起来像照片那样真实，而是提高识别性，帮助用户更好地和各种控件进行交互操作

在此特别感谢Max Steenbergen和Cameron Kenley Hunt，第二个Home图标来自Dellustrations的图标集Dellipack

一．雅黑设计理念

雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更是用途广泛。这副字可以说是科技进步的产物，是人类社会的需要，在设计上也有所突破。

首先打破传统结体方式，采用大字面设计，字怀放开，增大内白，使文字方正，布白匀称。由于字体中宫放开，使文字的适用性也随之增强，不但适合小级数文字的使用，更适合屏幕显示。

在笔型塑造上去除“喇叭头”。为防止文字笔划缺乏美感、没有精神，在撇、捺、点、勾的处理上使其粗细有略微的变化，使之富有弹性。

在制作上，力求精良，笔划间尽可能少搭笔，使文字清新、爽朗、易读。

追求字体的整体形式美，强调文字设计的审美性和文化性，朴实大方，典雅端庄。

下面从字体设计理论方面与实际字体应用的角度来阐述一下雅黑是用什么方法和字体设计技巧来完成和完善设计目标的。

二．按用途来设计字体

1．字体设计类型

字体设计可细分为平面美术字体设计和印刷“活字”设计。在这所要谈的字体设计是指在印刷“活字”范畴内的字体设计，主要研究字在缩小后的清晰 度、可读性以及整体效果。在字型的处理上它不能象美术字和书法字那样，可以无视大小地尽情抒发情感，而要受到一定规矩的约束，讲究共性和个性的关系，来达 到一种机械的美观。这种设计也是一门比较冷僻的视觉艺术。近年来，随着科学技术的不断发展，印刷“活字”设计又可分为出版印刷用字设计和屏幕显示用字设计 这两个大类。

雅黑是属于屏幕显示用字，设计时更要注重研究字在低分辨率下的清晰度和可读性，尽可能做到小字号显示时的清晰易读，要达到这一目标，关键在于设定字面大小、笔型塑造和严谨合理的结构处理……。

2．字面大小的含义

我们有必要先来搞清楚两个不同的概念：“字面大小和字身字面比”。字体设计专用方格都有两个方框，外框称字身框，内框称字面框。

图1

字面大小：“就是在字面框不变的情况下，可以把字设计成大小不同的字，大字称字面大，小字称字面小。”

图2

字身框和字面框之间的距离就是半个自然字距。能正确地运用好他们之间的关系，是字体设计的基础。

字身字面比：“简单说就是在字身框不变的情况下，两者之间的百分比值，比值大字就大，比值小字就小，说白了就是把字放大和缩小。”

图3

现在有许多用户，为了能挤排，图省事，不惜把字缩小，造成字与字距之间的关系失衡。这样使用，即使有再好的字体也排不出完美的版面来，这是非常不科学的用法，与其这样，还不如缩小字号来用显得完美。

3. 字面的可测量大小和视觉大小

字面大小又可分为可测量的字面大小和视觉上的字面大小。已故字体设计大师谢培元老师在1962年归纳总结的“第二中心线”理论已表明，汉字由形 声组合的字都是可以测量的，形旁和声旁这两个部件的中心距离越大，字面就越大，反之，字面就越小，我们只要测量这两个部件的中心距离就可以得到相应的字面 大小值。同时，这也是控制整副字大小的有效工具。

图4

雅黑在保持文字个性的基础上，尽可能的扩大形声这两个部件的中心距离来增大字面。同时，运用这种方法使得80%以上的字，大小保持一致。对于那些不能测量的字和一些易见小的字，雅黑又是如何处理呢？

从几何形角度来看，汉字形状众多，最典型的可分为四种类型：“方形、圆形、三角形和菱形”，从面积上看方形最大，菱形最小，要想把图形面积变得一样大小，就必须按菱形大小走，这样设计出的汉字才能在视觉上保持一致。

图5

要想做大字面的字，我们首先要考虑面积最小的菱形，那么，怎样才能把菱形字做大？很简单，只要适当调整改变菱形的形状，那么，我们就能得到比原来菱形面积大的形变图形，用这种方法来设计，就可以得到在视觉上比原先字面大的字。

图6

雅黑在设计初期就是用视觉大小这种方法来定字面大小的。

4. 字面大小和屏幕显示的关系

字面大小和屏幕显示又有什么关系呢？ 为了说明问题，用少点阵图来比较说明。

图7

从上面两图比较中我们可以看出，左图字面大，占像素多，内白均匀舒适、清晰易读。右图字面小，占像素少，因此，内白不匀称、识读效果变差。

雅黑设计时考虑到这一因素，不但采用大字面设计，同时，在字距较合理的范围内调大了字身字面，多争取到了每一点宝贵的像素，为小字号使用的清晰易读奠定了基础。

5. 去掉影响屏幕显示效果的“喇叭”口

现用黑体字的笔锋过大，成喇叭状，我们戏称为“喇叭头”或“喇叭口”。传统手写的黑体本应没有这么大的“喇叭头”，只稍微有点笔锋。那么，这 “喇叭头”又是从何而来？有两个原因，第一，可能是个别写字人员认为喇叭口稍大些精神，故意写大些，第二，在把照相字模版的字翻制成电脑字库时，做字人员 在不明白黑体字应有笔型的情况下，把原本制作照相字模版时，为防止在拍照缩小的过程中笔划变得虚弱、变圆走型而装上的“小辫”给融进了笔划，形成现在这样 的“喇叭口”。

图8

过大的喇叭头，不但失去了黑体字应有的品格，在屏显时，“喇叭头”能在笔划两头多出一块，如果两笔离得较近，头就有可能连上，使笔划交代不清，可读性变差。

图9

雅黑属无装饰风格的字体，少了不必要的累赘，自然避免了这类问题的出现，使文字清晰易读。

三．雅黑设计中的要点

1．雅黑是根据我在90年代初期设计的黑体系列样张改进设计的。

图10

从上述样张中可以看出，字体符合屏显字体的基本要求，字面大，无“喇叭头”，属无装饰风格的字体，可以作为雅黑的设计基础来改进提高。

2．雅黑设计上主要改进了字的粗细，“钩”的僵硬和“八”字点的写法，使其符合规范要求。同时，更注重线条的刻画，使其柔和挺拔富有弹性。

图11 部分笔划笔型图

3．为了使正文字的阅读效果更好，对所有的口和带框的部件加“脚”，也就是口下面出头，其目的是为了给眼睛以适量的刺激，来提高阅读速度，这是正文用雅黑设计的一次新尝试。

图12 口和带框的部件加“脚”

4. 为适合屏幕显示用，在字结构的处理上“计白当黑”，严格控制“白”在各部位所占的比例，使其舒朗匀称。

图13 黑白处理示意图

这种处理方式不但使字稳重大方，而且使字撇捺舒展、飘逸潇洒、富有姿态。

5. 采用独创的手法对笔划进行特殊处理，减少交错连笔处的黑度，使字的整体灰度更好，更清晰，更适合屏显。

图14 特殊笔划处理示意图

6．避免笔划交代不清，粘连过多

图15

这些字笔划交代不清，粘连过多，既降低了识、读的速度，又有错字嫌疑 。雅黑在设计时就尽量避免这种问题的发生。

图16

四．笔划粗细与结构、留白、重心之间的关系

这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。做字的过程其实就是练眼的过程，眼睛练“凶”了，字自然越做越好。

下面通过调整统一字体的粗细，来了解笔划粗细与结构、留白、重心之间的关系。为了更好的说明问题，便于理解，选用多笔划和少笔划的粗体字为例。

图17

1 调整字的粗细，使之成为一个整体

这两个字一粗一细，视觉上看是两款字，粗细调整不当。首先，把细的“體”字加粗，使两个字的视觉粗细一致。

图18

2 字的内白影响字的重心

“體”字在加粗后，虽然在粗细上合适了，但是，看着还不舒服，仔细分析一下原因，问题在于内白，各部件的重心位置欠妥，骨字重心偏高，曲、豆重心偏低，使得互相间的呼应性、协调力变差。那么，我们只要调整“體”字的内白，改变重心位置就行。

图19

3 调整字的局部粗细来改善字的结构，提高字的品位

现在我们来调整“粗”字，先分析一下粗字的那些地方需要改进，米字过大过黑，形象欠佳并压迫且字，从而使结合部太紧，整字见窄。改进的方法是： 缩小米字，放大且字，减细米字上方的八字点，改善横眉竖眼的“凶”相并使点见长，加长撇梢，使其舒展，分清下点使其交代清楚。通过这些调整，粗字变得面貌 一新，提高了品位。

图20

“粗體”两字通过调整粗细、内白，改变重心与结构，使“粗體”两字变得更完美。

图21

从上面的几次调整中可以看出，笔划粗细与结构、留白、重心之间是相互相成的关系，是一个不可分割的整体，只要协调好它们之间的关系，就能提升字的品格，并有良好的排版效果。

雅黑在设计制作过程中就是运用这种设计技巧使字既有品位，又整齐划一，灰度良好。

五．文字的形象、表情与气质

笔型是构成文字笔画、风格的基本元素，笔画制作的完成度会影响到成字后字的品质，而字的结构就好比人体的比例、五官的位置，它直接能体现文字的 形象、表情与气质。因此，对于字体设计制作来说，每一环节都是至关重要的。我们设计黑体字，要表达出黑体字本身具有的庄重、典雅的特性，就必须先把笔划做 好，把字写端正。

图22

从上面这些字我们可以看到，这些字就没有写端正，笔划生硬，制作粗糙，部件之间的位置安排欠妥。大头小头缩头，重心有高有低，结构松散，整体形象不好，给人以不整齐、不稳重的印象，缺乏正气感。下面雅黑的感觉就比较整齐舒适。

图23

我们再来具体的对比分析一些字的常见病例。

1. 笔划僵硬，制作粗糙，严重影响字的品质。

图24

2. 撇捺不舒展，使字失去应有的姿态。

图25

3. 缩头

图26

点划的头已伸不出去，还要斜，既不美观，又破坏形象。在头见短，伸不出去的情况下，还是做的稍平些比较妥当，头也长了，字也显得正气。

图27

4. 短腿

图28

节、帝两字下半部的外框做的太长，使主笔中竖见短，就象人的两只手长到脚背上，比例失调。

图29

5. 钩短

图30

钩短，有钩不出的感觉，使字显得拘谨、局促、小气，缺乏气度。

图31

我们常说的一句话：“字的姿态要像仙鹤的舞姿，引项高歌”，也就是说要想把字做得正气漂亮，必须“有头有脚有腰身，撇捺舒展有姿态”。

一个字的含义，并不一定只有字典上的意义，而有感情上的另一种心理感觉，他不但有表情，而且能直观地体现出字本身的气质来。

例一

图32

这些字东倒西歪，毫无庄严的正气感。

图33

主要问题出在字的结构和重心上，给人的感觉是：自卑，没自信，唯命是从，低头哈腰，没有高雅庄严的气度，它的潜台词是：“叔叔阿姨行行好”。

图34

例二

图35

八字点犹如人的双眼，富有表情，不同的角度、形状都能使人产生不同的联想。上面这些字的问题在于八字点上，有的内八字点变成外八字点，有的过大过小，像人倒挂着双眼，呆滞的眼神，带有悲苦哀伤的表情，没有朝气……。

图36

例三

图37

走之底脚短且软弱，向左倾斜，就像建房时地基没打好，不堪重负，摇摇欲坠。同时，也像一个人没有肩负重任，独自擎天的气概。

图38

从上面所举的这些例子中我们可以看出，字要设计得既庄重高雅，又有豪华富贵的气质，是最难能可贵的。雅黑在设计时就注重字的内涵，对文字的表情与气质进行了研究。>

六．雅黑最初的设计样张

图39 雅黑细体

图40 雅黑粗体

文字既是一个文明传承的载体，又代表了中国人的审美观。 因此，我们在设计时严格地把好每一关，尽最大的努力做好每一个字，追求字体的整体形式美，力求表现出对比、和谐、均衡、韵律等艺术特征。强调文字设计的审美性和文化性，真正做到给读者以关爱。

附：雅黑是屏显专用字体，用于印刷还有缺陷，我们经过精心修整，并逐步扩充其系列字体的款数，现已有多款字体上市，方便用户使用。衷心希望用户能把意见反馈给我们，让我们把字做得更好。

兰亭黑系列字体设计样张

图41