颠覆传统,我有担当 学SEO只选有担当的机构
首页 >移动SEO > 移动SEO优化:移动端文字排版设计原则 (英文)

移动SEO优化:移动端文字排版设计原则 (英文)

SEO培训学院2015-12-01 15:56:50来源:优就业SEO学院

在英文的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边(rag)。对中文排版与阅读习惯而言则相反,段落的头尾对齐尤其重要。

先来看一个反例:

这是Zaker的新闻正文的表现,在夹杂了数字或英文字母字符的情况下,原本中文的整齐排列被打乱了,右侧严重参差不齐,非常难看。

看看同一篇文章其它App是怎么处理的:


左边是网易云阅读,右边是网易新闻。两者的处理方式类似,都是通过程序的设置,微调文字的间距以补足右边存大的空白,区别是当标点出现在行末时,网易云阅读将标点外置,而网易新闻将标点放在了内部。

文字的对齐方式,可以用简单的代码实现:

Web App中,使用CSS类中指定justify属性值控制即可,以下为兼容性较佳的方案
 

.space-betw { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}

原生iOS中,需为字符串对象设置NSTextAlignmentJustified值

- (NSDictionary *)demoTextAttributes { NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new]; ps.alignment = NSTextAlignmentJustified; // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work. return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};}
 

这个方法,结合之前我们通过栅格系统对字号和文本容器宽度的规范定义,终于可以避免App中常见的段落文字对不齐,对不准的老问题。

后记

以上是实际工作中的经验总结,移动平台、硬件设备、字体本身都在不断变化,相应的设计方法也不会永远一成不变,但总的原则是不变的,那就是让内容更易读。


免责声明:本文来源于网络,由网友提供或网络搜集,仅供个人交流学习参考使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。谢谢合作!

热门标签:
移动端SEO优化 手机网站优化
收藏人收藏
3

相关文章

最新文章

专业的SEO培训机构

师资团队教学环境关于我们联系我们学员体验热门标签

Copyright©1999-{date('Y')} 北京中公教育科技股份有限公司 .All Rights Reserved
京ICP备10218183号-88 京ICP证161188号 京公网安备11010802020723号