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

转载 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
  • 24654

Android开发-优雅的实现动态图片排版(类似微信图片展示效果)

介绍效果展示 说明上面的图片排版 - 实现了动态布局,针对不同图片的数量展示不同的排版布局。效果类似微信朋友圈的图片排版,效果略有不同。 - 正方形的图片控件,高度会随着宽度一起变化。实现...

如何做出漂亮、干净、优雅的移动端统计图表?看这一篇文章就够啦!

这是 Tiny 图表库第一版常见的四种图表类型,先一睹为快吧。 在开发移动产品的过程中,我们总会遇到一些业务场景,需要用合适的方式来呈现数据。比如健身类app 用户想要知道自己每天的...

Android自定义控件系列(六)—优雅的实现广告轮播图

前言今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以...

NodeJS 异步操作:更为优雅的实现:thenjs

在上一节中,我们实现了批量文件读取,即循环异步函数的并发和有序操作。 总结为: 并发操作可以在Array.forEach 和 Array.map 中进行; 有序操作则在循环中对P...

C# 3.0下有限状态机的一种优雅的实现

C# 3.0下有限状态机的一种优雅的实现 实现状态机有多种模式,其中最灵活而强大的方式是通过迁移表来实现,该方式的缺点之一是需要编写大量小块代码去支持迁移表。而在C#3.0中,可以以一种非常优雅...

Kotlin 如何优雅的实现『多继承』

继承和实现接口的区别就是:继承描述的是这个类『是什么』的问题,而实现的接口则描述的是这个类『能做什么』的问题。...

【Java进阶】利用APT优雅的实现统一日志格式

统一日志格式的几种方式 无论是搭建日志平台还是进行大数据分析,统一日志格式都是一个重要的前提条件。假设要统一成下面的日志格式, 日志格式:[{系统}|{模块}]{描述}[param1=...

Android开发-优雅的实现多类型列表的Adapter

编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 原文出...

使用Custom Draw优雅的实现ListCtrl的重绘[转]

Common control 4.7版本介绍了一个新的特性叫做Custom Draw,这个名字显得模糊不清,让人有点摸不着头脑,而且MSDN里也只给出了一些如风的解释和例子,没有谁告诉你你想知道的,和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机上那些排版优雅的文章是怎么实现的?
举报原因:
原因补充:

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