几款黑体的测试和介绍July 17, 2008

黑体是视觉设计师常用的一款字体,特别是针对广告的 Banner 等。根据 维基百科 的相关介绍,有关 黑体的定义 可以认为

黑體与白体相反,没有衬线装饰,筆劃粗壯有力,撇捺等笔画不尖,使人易於閱讀。
黑体是在现代印刷术传入東方後依据西文无衬线体所创造的。所以黑体这个词的范
畴和无衬线字体是类似的。而宋体就可以被称作衬线字体。

「黑体」在日文中被称为ゴシック体(Goshikku-tai,英文:Gothic,直译即「哥特
体」)。

相对于「 白体 」,也有相应的解释

与黑体相反,白体是笔画较细的一种字体。宋体(亦称明朝体)、仿宋体、楷体、
魏书等都是白体。

所以,综上所述。使用黑体的原因之一就是加重信息并容易阅读。这就不难理解为什么 Mac OS X 和 Vista ,都改用黑体作为系统的默认字体。

国内简体中文的黑体,除了众人皆知的 微软雅黑(据说造价非常昂贵),还有其他的一些,在这里简单的列下

  • 华文黑体,这款是苹果机默认的字体
  • 方正黑体,在设计领域使用甚为频繁
  • 中易黑体,也就是我们「传统」 Windows 系统中所带的 SimHei
  • 微软雅黑,Vista 系统默认的字体
  • 文泉驿正黑 ,开源自由的黑体

下面是各款黑体的不同样式,根据不同的抗锯齿程度,显示的效果可能会不一致

http://files.gracecode.com/2008_07_17/1216270805.gif

各款黑体字体文件的大小,从另个侧面能说明这款字体包含了多少的中文字符。

http://files.gracecode.com/2008_07_17/1216270845.png

那么,到底选择哪款黑体合适呢?就个人观点而言,本人偏向于选择 文泉驿 正黑。

原因有两点:其一,就是其自由的版权。其他的黑体有不定的版权限制,要么就是单独作为软件(字体也是软件)销售、要么就是其自身产品的一部分;其二,就是更新的频率,由于有开源社区的支持,处在不断的更新中(并且如果你愿意,也可以加入改进改字体的队伍中)。

于己不利,勿施于人。设计师如果能在不影响设计的前提下,使用无争议的软件(即便是款「小小的字体」),何乐而不为呢?

另,期前已经有「理想主义者」,在几年前就号召大家使用自由字体了( 详细 )。

谁说前端不会设计June 21, 2008

淘宝 UED招聘页面 ,相信大家都对他印象很深。

感谢 大雄 同志提供的源文件,利用本人的空闲时间,将这些元素「整合」了下,做了张桌面。

http://files.gracecode.com/2009_11_05/904315beef55.jpg

最后,在这里 打包下载 ,版权归 淘宝 UED 所有。

经典的 ATM 交互范例June 11, 2008

很多交互方面的书籍都会拿 ATM 作为案例分析,谁叫银行和钱过不去呢。放下教科书,我们来看看 老美的银行的 ATM 是怎么设计的

http://files.gracecode.com/2009_11_05/717835b1d2e7.jpg

插入银行卡以后出现输入密码界面,按钮很大而且「看起来」非常容易点击也非常适合屏幕操作。

http://files.gracecode.com/2009_11_05/252025b1d2e7.jpg

这是原文中新老两个界面的对比,看得出设计者花了很多的功夫。对比老的界面,元素视觉方面更加的精简,显得层次分明;重新排列的按钮将相似的功能放在一起,更容易操作。

http://files.gracecode.com/2009_11_05/966615b1d2e6.jpg

这是取款确认界面,看得出左边的是取款流程并按钮的形式突出,用户随时可以退到某个步骤操作。在这里令人眼前一亮的是打印回执的 checkbox,它并没有像国内的银行那样等到现金吐出来了以后,再问你是否需要打印回执。

http://files.gracecode.com/2009_11_05/789195b1d2e8.jpg

再看下细节方面,上面是文中改版前后的两个按钮对比。改变最大的地方本人认为就是按钮的样式更加清晰,这非常容易理解谁喜欢取款的时候看花哨的海报呢?

http://files.gracecode.com/2009_11_05/860845b1d2ea.jpg

这是改版前后的布局,按钮被明显的放大并且被拉伸;重新布局的按钮明显减少了行数,从而看起来整体的布局更加清晰。

http://files.gracecode.com/2009_11_05/654195b1d2e8.jpg

这是 ATM 硬件外观前后对比,操作键盘被放大、吐钞口放到了显示器的下面(这应该是为了用户方便和安全)、存钱口和插卡口以及回执单出口都放在了右边 -- 这似乎都是用户输入操作。

全文在这里 ,懒得翻译了,希望本人的解释没有误人子弟。

Yahoo 统计