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

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


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

排版不是件小事

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

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

配置你的内容

下面你可以看到一张只显示文字的图片。这是我从维基百科上随意复制黏贴过来的一段文字,然后把它放到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

相关推荐

  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • “创造完美的用户体验。” 中国最当红工业设计师 —— 杨明洁

    Designer100是+86设计共享平台推出的中国高端设计师第一推广品牌,致力于设计师推广的全球巡展、设计师大奖、视频计划、沙龙论坛的社会公益项目。杨明洁YANG DESIGN及羊舍创始人福布斯中国最具影响力设计师同济大学及南京大学客座教授融合了德意志逻辑思维与中国人文精神的设计理念,也使得杨明洁成为了包括波音、奥迪、宝马、博世、飞利浦、英菲尼迪、可口可乐等众多国际顶尖品牌的合作伙伴,从眼镜箱包到飞机内舱,从消费电子到交通工具,从茶具...

    2018-02-26
  • 从情景出发的可用性设计

    设计文章 / 交互设计 | 来源:TID | 作者:stephyl 前言         为了优化产品,提升用户体验,产品团队经常做很多事情:数据监测、数据分析、竞品分析…然后给交互设计师提需求,让交互设计师把需求转化为可用的功能…

    2014-12-01
  • 交互设计四策略在音乐播放条上的运用

    追求简单易用是人类的本性,《简约至上》中提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约的终极策略。对于功能性单一的产品做到简洁化比较容易,但对于功能性较强的产品如要做到简洁就是一个复杂的课题。

    2017-05-23
  • 还原产品的基础属性问题——用户体验

    您真正的了解用户吗?找项目的时候是不是会遇到各种各样的坑?你“以为”和“现实”中究竟有什么区别?我们会不会就是所谓的自嗨型创业者?如何解决以及避免?今天我们即将揭晓!三人行茶学空间打造和谐空间,共享茶文化平台,精准交友,合作共赢。本周日特别邀请我们的会员嘉宾进行主题分享,一起共同成长!本周分享嘉宾:刘岱伦岱伦总2008年创办第一家o2o项目——洗车。到家!2013 年曾创下淘宝细分类目自然搜索排名第一!2015年自主研发无线充电车载净化...

    2018-04-19
  • 你知道交互稿完成过程中的六个要点吗?

    目标明确的情况下,再开展设计!

    2017-05-16
  • 10个步骤,了解新手入门过程的设计原则

    新手入门是每个应用程序最重要的元素之一。很多时候,它的难易程度决定了用户是否会继续使用应用程序。在用户界面上,新手入门不仅仅是简单的5个介绍软件的页面或说明性的工具提示内容。下面我会使用最有趣的例子来描述新手入门过程的设计原则。

    2017-05-03
  • 产品迭代,同样是用户体验的迭代

    作者:Aaron Yan全文共 3542 字 1 图,阅读需要 8 分钟———— / BEGIN / ————我们在使用淘宝、头条、微信这些APP的时候,是不是感觉产品做的越来越好了呢?那么你觉得这种越来越好的变化,是因为APP功能的完善,还是因为操作变得更流畅了?我猜你的答案肯定是:这些APP变得好用是全方位的变好了,不仅仅只是其中一个方面变得比原来更好。我们都知道,APP越来越好用,是因为:我们产品经理和技术团队,在不停地进行产品迭...

    2018-04-01
  • 用户体验要素

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HaloBeyoncé - I Am...Sasha Fierce用户体验为什么如此重要说到我们所使用的那些产品和服务,我们对它们的感情可谓是爱恨交加,它时而令我们备受鼓舞,时而令我们感到泪丧,它使生活变得简单,又使生活变得复杂,它使我们变得疏远,又使我们更加亲近,即使这样,我们还是不得不每天都和不计其数的产品和服务打交道,当产品满足了人们的需要时,它的制造者应该备受赞扬,反正,...

    2018-03-24
  • 【笔记】从活泼的C端产品到严肃的B端产品设计,我是如何自如切换的——交互篇

    2016年11月5日,UXRen社区联合网易杭州主办“用户体验者的自我提升”主题讲座,本文网易资深交互设计师大饼的现场分享:《 从人性到人文的设计思维转变》整理而成。   嘉宾介绍: 杨杰(大饼,资深交互设计师,UEDC交…

    交互专题 2017-08-07