超实用的响应式排版快速指南

译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。


译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

排版不是件小事

排版是设计中非常基础但又无比重要的一环,这点我想大家都认同。在网页设计中,排版早些年的日子比较苦逼,或者说其很难得到与之重要性相匹配的待遇——和很多其它的设计元素一样,那时我们并不具备在网页中完整表现它们的技术。但幸运的是,我们走过来了。

排版能帮助我们沟通信息,这可不是一件小事。优秀的排版能有助于沟通的过程明晰、高效。可读性是所有设计都需要面对的大课题。那么现在,我们就来亲手实践下。

配置你的内容

下面你可以看到一张只显示文字的图片。这是我从维基百科上随意复制黏贴过来的一段文字,然后把它放到HTML文档里显示出来。

超实用的响应式排版快速指南

这看起来很简陋,而且难以阅读。上面的这张截图显示的是浏览器默认的16px Times New Roman字体。既然这样,我们就先试试看把它升级到18px的PT Serif字体(Google出品)。

超实用的响应式排版快速指南

然后我们需要对每一行的字符数量做下调整。在桌面端,每一行的字符量应该在60到75之间。于是我把整个文本的宽度调整到580px。你自己对比看看上下两张图就知道孰优孰劣了。不过别掉以轻心,一切才刚刚开始。

超实用的响应式排版快速指南

垂直排版的韵律感

在我们当前的设计中,可以看到其垂直方向的韵律依然还是浏览器默认的状态,而不同浏览器上的显示是不同的。这可不行,我们需要搞清楚到底什么才是合适的行高、边距以及字号。在之前提到过我把默认的文本大小改成了18px,那么对于我来说,它就是1em。

我想大家作为2015年的网页设计师应该都明白em是什么东西吧,有一堆工具可以帮助你来进行此类换算。Pascal Cauhepe的Vertical Rhythm Tool是我最喜欢的工具之一,另外再推荐个Tuomas Jomppanen 和Ville Vanninen开发的Gridlover,也很好用~

在我的设计中,文章段落的字号和行高分别是18px/1.77 (也就是32px)。我参照黄金比例来调整标题的字号,也就是说H1现在是3ems(54px)。下面是我定义的不同字号节点,所有这些都会被应用在同样32px行高的基线栅格里:

字体大小

P 18px (1em)

H1 54px (3em)

H2 45px (2.5em)

H3 36px (2em)

H4 32px (1.75em)

H5 27px (1.5em)

H6 18px (1em)

超实用的响应式排版快速指南

简单吧?很容易就可以搞明白怎么整这纵向的栅格了。然后下一步就可以考虑水平方向的栅格如何定义。

超实用的响应式排版快速指南

等比缩小

很多时候我们在纵向排版的韵律确定后就会迫不及待地去折腾颜色、栅格甚至布局。搞清楚栅格系统里的节点确实重要,但是你不能因此无视响应式排版,根 据屏幕尺寸调整垂直排版的韵律感同样需要琢磨。在移动设备上使用与桌面端一模一样的字号和字距就和使用同一套栅格一样荒谬。无线端和桌面端的区别极大,其 上的阅读体验也大不相同。

iA在2012年时写的一篇“Responsive Typography: the Basics”中提到了使用手机和电脑进行阅读时眼睛与设备之间的距离是不同的,而这正是对阅读体验造成影响的本因。从下面这张图片可以看到,在移动设备 上,18px的字号显然太大了些。它就像把所有东西一下放大的同时却没有提供有助于阅读体验的视觉平衡。

移动设备上的垂直排版韵律

如果你在意产品的移动体验那你必须要首先着意排版。在那样一个狭窄的320px宽度的空间里,所有诸如材质、渐变等装饰性都应该靠边站。我并不是说那些不重要,它们只是没有文本内容的优先级那么高罢了。要记住优化排版的显示是创建良好阅读体验的第一步。

超实用的响应式排版快速指南

第一步,正如我之前说的那样,先把字号缩小了再说。与电脑屏幕相比,我们通常会把手机拿得离脸更近,这意味着即便我们用14px的字号也完全能看得很清楚。在移动设备上,每一行35-40个字符是较合适的。

设置全新的韵律

字号:桌面 字号: 移动

P 18px (1em) 14px(1em)

H1 54px (3em) 35px(2.5em)

H2 45px (2.5em) 31px(2.25em)

H3 36px (2em) 24px(2em)

H4 32px (1.75em) 21px(1.5em)

H5 27px (1.5em) 18px(1.25em)

H6 18px (1em) 14px(1em)

超实用的响应式排版快速指南

OK,现在你可以把改好的上图和之前的桌面版本对比一下。另外,我把行高改成了22px,看起来还是蛮顺眼的。如果这个字体本身再细一些或许我会考虑20px的行高,但目前来看,至少对于PT Serif而言,22px的行高对我来说是最合适的。

超实用的响应式排版快速指南

Jason Pamental在Typecast发表过一篇关于响应式排版的文章:“A More Modern Scale for Web Typography.”如果你英文凑合的话强烈建议读一读。他在文中提到了等比缩放排版于不同节点的重要性,同时还有三条关于排版的要点。

“搞清楚人们是如何阅读的;能惬意地扫读某一行文字然后在轻松跳回下一行开头;快速理解不同文章之间各个标题的优先级和重要性。”

当排版能做到这三点时,阅读体验就会让人满意。

超实用的响应式排版快速指南

总结

排版的重要性不言而喻,千万不要在不同设备上使用同一套字号及字距。你要知道你看手机的方式和看笔记本、台式显示器大不相同。为响应式设计适配不同的垂直排版韵律是很重要的,若能迎合用户的潜在需求,那你就可以创建更好的用户体验。最后重申一遍:排版不是小事,不要掉以轻心!

 

原文地址:designmodo

译者:@励定洲

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31817/

(0)
CatherineCatherine
上一篇 2017-06-02 22:29
下一篇 2017-06-03 00:23

相关推荐

  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 移动设计中不可或缺的交互

    经验分类: 经验/观点 / 自译外文 原作者: Chris Bank 手势和动画对移动设备游戏的改变 在这篇文章中,来自UXPin(一款在线界面设计应用)的克里斯·班克(Chris Bank)介绍了移动应用交互的重要性,以及它在设计模…

    2014-09-14
  • 对于传统交互设计思维的一些反思

    在传统的交互设计流程中,比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等,相关的 UCD 设计方法很多。可是,被我们奉为圭臬的那些经典交互设计流程与方法,真的足够好吗?

    2017-05-03
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • 前辈经验!聊聊新人设计师最容易遇到的12个问题

    身为设计师,我越来越意识到只有整个设计师圈子的能力和氛围都起来了,我们每一个小分子才可以好起来,大家学习的积极性也比我大学时期(07年-11年)好太多,那时的我都完全没有要逛设计论坛学习的意识,所以当我看到谁年纪轻轻就已经那么牛逼了,我就很后悔,当年我为什么就没有逛论坛自我学习的意识呢,要不然我早就走向人生巅峰了,当年自己怎么那么井底之蛙,资源有限,信息闭塞,也没有人叮嘱我要怎么去做,也没人给我指出问题所在。现在有这么多好的学习平台和机会,而我也确实看到了很多设计师存在的问题,所以我总结下来,希望对大家有所帮助,不要像我当年那样活在自己的世界里,落后别人一大截。

    2017-05-26
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03
  • 埃森哲设计思维成就价值创新:从“外在美”到“内在美”

    作者:杨鹏(埃森哲数字设计与创新经理);田晖(埃森哲数字咨询服务总监);王曦(原埃森哲数字设计与创新顾问)   领先企业已经认识到,设计不仅仅停留在产品的 “外在美”,而应聚焦在更具商业价值的“内在美”。那…

    交互专题 2017-09-18
  • 我从比我聪明的家伙们那里偷来了9个UI设计的秘密

    译者按:都说设计重要,但是好设计的标准似乎一直都没个定数。学苹果的拟物、学谷歌的material design、学微软的metro风,学到的似乎都只是皮毛和表象。设计师应该是整个公司里思考得最深最细的人,是重要的产品驱动力之一,而不是单纯的美工或执行者。

    2017-05-27
  • Axure RP 8.1.0.3372 Mac中文破解版

    今天分享的是Mac下一款快速原型设计工具——Axure RP,有了它可以大大提高你的工作效率。之前有朋友留言需要8.1.0.3372版本。Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示 意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需...

    2018-03-21
  • 商业模式驱动视频互动设计:手淘的视频就该这么玩儿

    当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

    2017-05-16