陆续的会把一些个人经验写出来以供分享。这次以”sunbeyond.com v0.4.6“作为参考,分析基础部分的细节。文中图片里的文字之间距离精确到1px,所以可以相互对比下,跟着自己的感觉走,寻找真正的平衡。
差距
看老外的设计固然感觉不错,但当把文字转换成中文后,多少都会有些不协调感。主要因为是文字的轮廓、字之间的稀疏度以及字体的图形复杂度。具体可参看下图:
如图所示,其中所有左侧列表采用的都是3倍率间隔,也就是每个文字段的上下间隔为3的倍率,每个层级的文字颜色逐渐降低,字体相对缩小,而右边则是4倍率。这里有3组列表,第一组是间隔的数值标示,第二组是纯中文字的显示,第三组是纯英文字的显示(每组的字体大小和色彩都没有变动)。
从对比中可以很明显的看出,中文字体在3x下回有些紧凑,特别是以文字块的形式展现后,会感觉很浓重。这个不是颜色所造成的,而是文字所组成的图形其复杂度提升了。相对比之下4x会很明显看出文字之间的层级概念,并相对来说文字可以看得更轻松。而英文字体则恰恰相反。
布局
左边图相对于中间图,只是修改了标签部分的上下间距,改善了图片上下的平衡感。而右边图只是修改了标题部分的元素顺序,使得时间可以被自动忽视掉,视线焦点从标题(颜色深)直接转到图片(大尺寸图形),时间则相对变成了线型图形。
间隔
这里所说的间隔不止文字的内外间距,还包括文字对齐参考线时的距离。图片+文字是最经典的组合,但文字与图片的对齐方式应该如何讲究呢?通过下图的对比,可以让你找寻自己所能接受的”美感“。