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

转载 2016年05月30日 10:33:57

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


大小反差


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


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



字体


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


字间距


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


段间距


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


颜色反差


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


设计层次


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


下面来看一个案例:


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


对齐


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


先来看一个反例:

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


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


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


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


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


手机移动web页面的排版与布局一点经验(尺寸单位兼容行。)

**总之一句话, 尽量用mm 毫米作为标准单位.** **总之一句话, 尽量用mm 毫米作为标准单位.** **总之一句话, 尽量用mm 毫米作为标准单位.** 采用新的相对单位 rem 首先设置...
  • phker
  • phker
  • 2015年11月03日 20:03
  • 26529

H5手机端排版

第一步:在网页代码的头部,加入一行viewport元标签 [html] view plain copy meta name="viewport" c...
  • charmyu
  • charmyu
  • 2017年09月27日 22:55
  • 114

手机端页面自适应解决方案—rem布局

http://www.cnblogs.com/xiaomili/p/6343597.html 如何使用? 这是rem布局的核心代码,这段代码的大意是: 如果页面的宽度超过了640...
  • wjy397
  • wjy397
  • 2017年02月28日 20:23
  • 1453

【.9.img】Android设计中的.9.png

在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的...
  • knockheart
  • knockheart
  • 2013年08月23日 17:23
  • 811

CSDN博文的排版

今天写了第一篇CSDN博文,结果出来的版式乱成码了,于是google怎么进行排版,搜到了两位CSDN前辈写的文章,链接如下: http://blog.csdn.net/sxhelijian/arti...
  • wasdwf
  • wasdwf
  • 2012年03月22日 21:38
  • 849

我见过最实用的中文排版指南

转载自:http://blog.csdn.net/googdev/article/details/62416783 之前有不少人在我公众号留言,说看我的排版很舒服,求指导。 我不是一个专业的写...
  • u011507206
  • u011507206
  • 2017年04月11日 20:29
  • 839

深入理解移动端像素知识与Viewport知识

在做移动端网页开发时,首先要搞清楚三种viewport和三种像素,只有明白了这些概念,才能更好地开发出适配不同分辨率设备的网页。 但参阅的博客越多,对这些概念越是混乱,同样的一个概念,在一篇博客...
  • aiolos1111
  • aiolos1111
  • 2016年07月20日 18:04
  • 8739

手机界面设计中常用到的9种布局

【编者按】本文作者阿沐 ,分享了手机界面设计中常用到的9种布局,我们需要考虑为不同的信息结构来提供相匹配的布局, 手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内...
  • zhifanxu
  • zhifanxu
  • 2016年07月07日 15:35
  • 2488

微信公众平台DIY文章排版格式

样式一 任一鹏微信公众账号:YP2017 任一鹏微信公众账号:YP2017 样式二 任一鹏微信公众账号:YP2017 任一鹏微信公众账号:YP2017 样式三 任一鹏微信公众账号...
  • aerchi
  • aerchi
  • 2015年07月24日 18:40
  • 2058

那些优雅的数据结构

bloomfilter 线段树 树状数组 trie树 后缀树后缀数组 并查集 hash表 b树 红黑树 堆与优先队列 hash算法提供了一种快速存取数据的方法,他用一种算法建立键值与真实值之间的联系...
  • chinaliping
  • chinaliping
  • 2013年07月05日 09:14
  • 1020
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机上那些排版优雅的文章是怎么实现的?
举报原因:
原因补充:

(最多只允许输入30个字)