在线咨询
QQ咨询
服务热线
服务热线:13405132033
TOP

网页中那些讨厌的“空格”

发布时间: 2020-02-27

timg (5).jpg

“空格”属于一类细节,很容易被忽略,但又比较影响效果,更麻烦是很不好控制。相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对“空格”不陌生。

“空格”后效果会提升,但不能完全解决问题,有利有弊。既然效果并不十分理想,再综合工作量、可维护性而言实在有限。或者更悲观的认为,要想达到完美的效果,必须手动调整,没有完美的可控程序逻辑。道理如同图书排版,真正排版出色的好书,都是一页页手工定制的,排版效果必须跟着内容走。  这个问题在专业网页设计上讲,可归类于“内容排版”,与用户体验中“可读性”直接相关。平面设计里好像叫“字体排印”,同样应该用“可读性”指标来衡量质量。但受限于网页构成原理,在网页中,空格影响的不仅有“内容排版”,还有“页面版式”问题也很典型。“内容排版”主要指内容层面,“页面版式”主要指结构层面,下边分开来讨论。

1.内容排版的空格

目前互联网上内容里,中英文混杂已经非常普遍,并且可以放大理解为“中西文混排(自己基本只用英文,所以后续都写“中英文混排”)”。不仅仅是英文单词的使用,各种英文术语和缩写已经完全融入了普通人生活。尤其在信息爆炸的互联网上,此问题表现的比较突出。

在一些很专业的网站上,有中文、英文之间加空格的说法,尤其翻译过来的技术参考里。很容易想到,这种写法是为了更好的区别不同语言,以免造成阅读上的“粘连”障碍,加空格后确实极大提升了“可读性”。

同时发现,影响“中英文混排”效果的原因其实很多,在网页设计中不仅仅只有“加空格”手段来优化。比如更改字体,因为在计算机系统里英文的选择其实很多,不比中文“宋体”的单调。不同的英文字体,不仅对比中文的大小比例不一样,而且前后粘连的距离也不一样。

2.页面版式的空格

结构层面的空格主要在HTML结构代码里,很多时候我们需要针对不同标记的内容做间隔。之前大多数人的做法,都是自然空格,就是在HTML代码里敲入一个空格。但后来发现,第一不易做像素级的精确控制,第二不同客户端下的空格宽度解析不一致,这在做跨浏览器兼容时很重要。其实,代码里做空格不符合“结构、表现”分离的原则。应该把所有需要“空格”效果的内容全部用CSS的margin定义解决,想空就空,想空多少随时可以改。

通常高保真原型里没有的空格,但研发工程师做的测试原型里却有。这是因为在客户端代码里,换行就算一个空格。工程师在做应用层开发时,往往不那么注意,通常为了看代码方便而随意空行。还有类情况是可能使用了某种控件或者特殊语句,甚至还有查不出来的情况。

55
该内容对我有帮助