手机上那些排版优雅的文章是怎么实现的?

移动端排版拥有着无限的可能性,而这种排版设计并不是每个人都能胜任的艺术。在对的人手中,它能创造奇迹,大放异彩。近年来的移动端设计趋势也充分证明了排版设计的实际价值。


大小反差


在桌面端我们可能会采用字号差异较大的文字组合,移动端屏幕较小,容纳的文字也较少,同等的字号差异在小屏幕上的感受会被放大。


原因是我们在使用这两种设备时的观看距离不同,桌面端我们的眼睛离屏幕较远,而在移动端则相反,因此我们应该在移动端使用较小的字号反差。



字体


每种字型都散发独特的情感或个性,也许是友善、新潮、严肃或傻里傻气,但大部分的字型并不是万用的,所以你要判断一个字型对你来说是怎么样的感觉,还有它适不适合放在这个设计里面。方法之一就是列出你希望设计呈现哪些特质,如果能先确定内容更好,这样就能直接挑选字型来配合建立好的内文调性。


字间距


如果文字内容相对较多,如果间距又相对较小,那么这些文字就好像挤在一起,让人一眼看得密密麻麻,进而难以提升阅读欲望。但是如果间距设置过大,那么整个网页内容量较少,而且看起来不够整齐,这样也会对阅读体验产生负面影响。所以,不要轻易改变字体默认的字间距,字体设计师已经充分考虑了这款字体所适合的字间距,如果不满意可以更换字体。


段间距


设置段间距非常简单,但是它和连按两次回车再起一段是两回事。一般而言,段间距应该和正文字体行高相等,但是如果你连续按两次回车,那么这个间隔的高度等于行高+行间隙x2。如果正文字体为21px,么段间距最好是21px或者1em


颜色反差


文字排版很少独立存在,它通常会和其他元素搭配,尤其是背景。文字和其他部分间有足够的对比,可以让文字更易读,如果要帮文字挑颜色,你可能会想要挑个能和其他元素搭配的颜色,包括背景,如果颜色太格格不入,像是很丑的弹出式广告窗口,背景是红色,字是鲜绿色,或者颜色太相近,像是白色的字搭浅色背景,眼睛负担都很大,视觉效果很差。


设计层次


如果一个设计层次分得好,看起来就整齐,容易定位,可以更容易找到你要的信息。文字排版的层次对于像是电子报、杂志、书和其他传统印刷物,及某些网站等文字很多的设计特别重要。


下面来看一个案例:


这是使用中兴阅读-http://www.ztereader.com/的杂志平台制作出来的手机web页面,看起来层次分明,用户很容易找到自己感兴趣的内容,留白部分使整个页面非常简洁、素雅。


对齐


“...所有的元素都是正方體。但是從二十世紀開始使用標點後,到了現代桌上出版時代,許多排版工具軟體都直接套用來自日本的「禁則處理」即避頭尾點;加上與西方文字混排的狀況越來越多,以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。这是董福興《簡單做好中文排版》中写道的,可见文字对齐的重要性。


先来看一个反例:

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


看看同一篇文章中兴阅读的杂志平台是怎么处理的:


这样看起来是不是舒服了很多?中兴阅读的杂志平台通过后台程序的设置,微调文字的间距以补足右边存大的空白,这样可以避免常见的段落文字对不齐,对不准的老问题。


现在,许多在线出版物的字体和布局设计都非常漂亮,满足不同终端的需要。中兴阅读作为一家提供移动阅读解决方案的网站,一直致力于移动端排版的实践,采用最新的排版要求,力求给用户带来出色的阅读体验。尤其是移动阅读解决方案之一的“微信杂志”,模板精美,受到了很多用户的青睐。


字体是一门工艺,设计师终其一生都在精心打磨因为每个文字、每种字体和每项技术都带来了新的挑战。从01,从1N,相信手机上那些排版优雅的文章越来越多,我们每个人都能在手机上优雅的阅读。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值