铸梦网络 首页 企业网站优化 查看内容

如何做好网页设计(Web Design)空格处理方法?

2014-12-19 22:47| 发布者: 铸梦网络| 查看: 608| 评论: 0|来自: 铸梦网络

摘要: 网页设计要想达到完美的效果,必须手动调整,没有完美的可控程序逻辑。道理如同图书排版,真正排版出色的好书,都是一页页手工定制的,排版效果必须跟着内容走。 这个问题在专业网页设计上讲,可归类于“内容排版 ...

      网页设计要想达到完美的效果,必须手动调整,没有完美的可控程序逻辑。道理如同图书排版,真正排版出色的好书,都是一页页手工定制的,排版效果必须跟着内容走。 

       这个问题在专业网页设计上讲,可归类于“内容排版”,与用户体验中“可读性”直接相关。平面设计里好像叫“字体排印”,同样应该用“可读性”指标来衡量质量。但受限于网页构成原理,在网页中,空格影响的不仅有“内容排版”,还有“页面版式”问题也很典型。“内容排版”主要指内容层面,“页面版式”主要指结构层面,现在长沙企业网站托管小编分开来讨论。 

       内容排版的空格 

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

       一些很专业的网站上发现,原来还有在中文、英文之间加空格的说法,尤其翻译过来的技术参考里。很容易想到,这种写法是为了更好的区别不同语言,以免造成阅读上的“粘连”障碍,加空格后确实极大提升了“可读性”。(梁海更专业的观点原文“文字的交界处应该是个尽量平滑的过渡,尽量满足双方文字的需求,并且让文本的节奏尽量平稳。”) 

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

       也尝试过给英文两边加空格,但确实麻烦。而且有个细节不知是否有人关注过,某些字体(具体哪些字体未深入测试)定义“空格”的宽度会因左侧是中文或者英文而不一样。也就是说,给一个单词两边加上空格后,会出现左边宽、右边窄的效果,这点我也无法接受的。而在有了通过“字体”解决的思维方式后,更完全抛弃了“加空格”的想法。再往后,又先后认识了Helvetica, Calibri等等优秀字体,所以用起来还算绰绰有余。 

       单就字体而言,学问很大,还有清晰度、衬线等方面的可读性影响因素,而且在不同客户端浏览器下表现也可能有差异。比如不同字体的下划线也会很影响可读性,Tahoma的下划线就是紧挨文字的。这里只谈空格,所有结论均出于实践经验。


         图只是举例示意,不同字号、浏览器等客观条件都可能影响效果。 


       页面版式的空格 


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


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


      当然,这种鸡毛蒜皮的细节问题,往往不会放多高的优先级,但多了确实影响效果。其实也不是没有解决办法,可以通过CSS语句word-spacing:-3px;来定义让空格失效,通过局部控制灵活应对,最近试的效果还是挺不错。 


       回到前文“内容排版”的问题,通过结构层处理统一为英文加上标记,如<span lang=”en”>Manual of Style</span>,长沙企业网站托管小编认为是不可取的。第一太过麻烦,第二理论上可以用JS直接判断中英文。总的来说,单独控制“内容排版”中的英文都有点多此一举。 

       dt内各内容标记之间无空格,用margin精确控制。 


鲜花

握手

雷人

路过

鸡蛋

最新评论

手机版|长沙市岳麓区铸梦网络科技有限公司 ( 湘ICP备13009411号 )

GMT+8, 2019-4-19 14:26 , Processed in 0.216539 second(s), 16 queries .

湖南省残联居家就业项目重点试点单位

服务项目:★网站托管★网站建设★网站优化★新闻营销★信息推广★

返回顶部
 
【电话】 13245003688
【QQ】 铸梦网络 售前客服
【QQ】 铸梦网络 技术客服