为长文进行排版设计,有哪些讲究?

长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。


长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。

为长文进行排版设计,有哪些讲究?

先撇开用户兴趣和碎片时间的争论,我们来聊聊较长的内容在网页设计中应当注意的问题吧。对于网站和APP而言,长内容,或者说长文,可能是内容策略中最有价值的一个组成部分(前提是它并不是无聊内容的堆砌)。用户喜欢好故事,而长内容所提供的沉浸式的阅读感受则能够为用户提供引人入胜的体验。

为了能够让用户保持兴趣不停读下去,你必须提供令人愉悦的设计和交互,让内容从头到尾的体验都是一致的。想要达成这个目标,需要有针对性地进行设计。

大量的留白

为长文进行排版设计,有哪些讲究?

长文的内容如果堆积到一起,是相当具有压迫力的,所以,让用户不会为之厌倦,空间的运用是首要的技巧。

如果文章内容看起来太重,用户肯定会为之感到恐惧的。通过合理的留白和排版设计,让长文更容易为用户所浏览和快速扫视,让内容的视觉重量相应的降低,让它们看起来更加友好。

你可以考虑控制下面的留白来达到降低视觉重量的目的:

  • 控制内容和屏幕边缘之间的间距
  • 控制行间距和段间距
  • 图片、视频等非文本视觉元素周围的留白

有目的地运用动效

为长文进行排版设计,有哪些讲究?

当页面内容太长,用户需要长时间的滚动翻页,这个时候,页面辅助导航的视觉线索就显得非常重要了。你可以考虑使用引导性的动效,比如箭头、按钮或者视差特效,用以引导用户。

这些微小的动效通常不会给长文或者故事带来割裂性的体验,甚至会让用户在浏览过程中感受到愉悦。

视频动画则是吸引用户的另外一个利器。虽然绝大多数的视频会打破长内容的阅读流畅性,但是它可以为用户浏览提供一个修整调剂的机会,也可以置于开头,作为一个引子。

无论你是打算置于长文开头作为介绍,还是置于中间用作间隔,都尽量保持简短,尽量不要让它自动播放,可能会分散用户的注意力。

视差滚动这种手法也相当值得运用,一边浏览一边有动画“随之舞动”的体验是相当有趣的。相当值得注意的是,视差滚动的动效不需要复杂,简单的动效不仅节省性能,而且不会喧宾夺主,保持引人入胜的体验的同时还不打断阅读。

加入插画

为长文进行排版设计,有哪些讲究?

对于长文而言,插画是必不可少的组成部分。如果你的内容正好是故事的话,插画的优势就显得更加明显了。

将插图分散地加入到文章的各个部分,能够强化内容的故事性,提升用户的体验和参与度,图文并举能够让用户更轻松获取信息。这种技巧对于小说和缺少清晰视觉形象的文本而言,特别有用。

有策略地配图

为长文进行排版设计,有哪些讲究?

配图的放置位置其实是很有技巧的。一些好的长文在图文搭配上其实是遵循一定套路的,因为要让整体符合美学特征,阅读流畅,还要让文字和图片配比正确,整个规则就不难推导出来了:

  1. 设计一个顶部大图
  2. 添加介绍性的文本
  3. 加入高清大图
  4. 添加子标题
  5. 设计易于阅读的正文文本
  6. 在设计子章节内容的时候,遵循3和5两个步骤

绝大多数的图片应当进行适当缩放,居中显示,内容不要环绕在周围。这种排版方式基本上是模仿传统的图书排版来的,这种方式为用户来带自然的阅读流程和舒适的体验。

这种设计流程几乎适合所有的数码设备的长文内容设计,不论是手机、平板还是桌面端网页。

强化文本阅读体验

为长文进行排版设计,有哪些讲究?

不要害怕创造优质的阅读体验。既然是长文,大量的文本是不可避免的。你没有必要为每一张图片搭配一个风骚的动画效果,但是你一定要做好排版,确保流畅的阅读感受,让用户始终能够保持阅读的兴趣。

  • 在长文中借助大量的子标题将文章分隔成不同的章节,让字体大小和正文区分开,让用户一眼可辨。
  • 使用粗体、色彩和斜体让特定的段落或者句子更加引人注意。
  • 使用引用的文本信息,便于用户抓住内容核心。

滚动应该是直观的

为长文进行排版设计,有哪些讲究?

滚动操作并不是新东西,所以你应当让滚动操作显得直观,特别是当你在滚动过程中加入一些不一样的东西的时候。

炫酷的滚动效果,比如视差滚动,能够提升长文的阅读体验。但是这种设计千万不能过,滚动的特效应当符合用户的基本预期,而不是过于意外。

滚动阅读的体验应当和内容无缝地整合起来,用户在浏览信息的过程中,滚动特效应当有助于内容的可读性,而不是干扰。

呈现进度

为长文进行排版设计,有哪些讲究?

Medium 最大的特点是每篇文章都会标识上平均阅读时间。而Polygon 则会在屏幕左侧展示阅读的进度,用户在阅读的过程中能够清晰的判断阅读的进度,并且能够对最终花费的时间有一个明显的预期。

每一个阅读进度“里程碑”的完成,都能给用户带来一定的成就感。

另外一种为用户展现进度的设计,则是将内容直接划分为不同的章节,并且提供相应的导航进度条。这种进度条不仅可以帮助用户跳过特定的章节,而且更加便于返回特定的位置。这种设计能够让用户便捷的掌控长文的内容,获得阅读的愉悦感。

讲述一个惊艳的故事

为长文进行排版设计,有哪些讲究?

好的长文大多是从一个好故事开始的。如果你需要将一个故事讲述给别人,那么用长内容来展示可能是最佳答案。

但是,千万不要被惯性思维给限制住,长内容并不一定必须是纯文字的。用最合理的媒介来呈现信息才是正确的思路。国家地理的“Hiking the Grand Canyon”使用大量的图片和地图来讲述故事,相当值得一看。

当然,再好的东西也不能一次给太多。即使页面设计的再好,一个页面需要翻几百次才看得玩,谁都受不了。

如果故事结束了,页面也最好收尾,另外的故事,换一个页面展现吧。

结语

长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。

对于小企业而言,优质的长内容能够给网站带来更强的黏度以及更快的排名提升速度,在品牌建设和社交媒体上,这些长内容都能带来更多的价值。

 

译文来自:优设

译者:@陈子木

原文地址:designshack

原文作者:CARRIE COUSINS

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

(0)
CatherineCatherine
上一篇 2017-05-14 20:48
下一篇 2017-05-14 22:45

相关推荐

  • 作为新人的你,应从信息架构、交互流程和交互细节去了解交互设计

    交互设计严格上来说是没有什么套路而言,但是,对于初入行者还是需要有一些需要具体客观的知识点去学习。就像笔者当年刚入行学习工业设计的时候,对工业设计的内涵与外延始终搞不太懂。老师们也没有一直强调工业设计的定义,而是从琐碎的知识点开始,一点点讲解,让我们掌握。当我们掌握了足够多的知识点,工业设计也自然在我们的知识框架中形成。

    2017-05-19
  • 如何打造极致用户体验

    积少成多的细致用户体验才能打造颠覆性的产品,颠覆性产品不是一日而成,本文主要帮助大家深入思考用户体验。在移动app产品设计中我们追求2秒定律。即2秒内打开app就让用户知道它是谁?它能做什么。而这些设计中的疑问汇总到一起,就是产品的极致体验都来源一个考量指标:用户感知度。

    2017-05-28
  • 9个关于设计的关键要素,帮你设计出更加优秀的作品

    之所以把设计和Jalebi放在一起说,就是因为设计本身其实和制作Jalebi如出一辙,设计师的经验和对设计投入的思考才是核心所在,而两者结合之下则往往能产生一些颇有价值的指导思想。Above examples are of apps with the same domain and you can judge which one is looking better.A good example visual typo hierarchy in the above graphic .

    ——Source: SuperDryCleartrip is a very good example of what I am talking about……

    2017-05-17
  • 澳洲留学 | 交互设计专业硕士大解析

    📢:1⃣️条信息,足以改变你的未来!欢迎关注本平台交互设计在中国是一个新兴的产业,但是随着中国电子系统对人们生活影响的逐渐扩大,中国交互设计师将面临一个很大的缺口。什么是交互设计专业?1.words 语言语言是互动的最基础部分。人与人之间的互动是通过语言来进行基本交流。人也通过语言与机器进行交流。这里的语言可以是文字形式、语音形式、或动作形式等。在美国,一个好的交互设计师,也是一个很好地copy writer,需要具备良好的语言沟通和文...

    2018-04-06
  • 【译文】”移动优先”的设计理念已过时了吗

    【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企…

    2016-02-19
  • 如何从细节上真正节省用户的时间,从而带给用户更好的体验

    来源:优设网 作者:阿布编译 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,什么是…

    2014-09-21
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • 《用户体验要素》的笔记 (2) 第三章 战略层

    1. 战略层主要解决两个问题:1)我们想通过这个产品得到什么?即产品目标是什么?2)用户想通过这个产品得到什么?即用户需求是什么?此处的关键词是【明确】。当我们能越清楚的表达我们想要什么,以及确切的知道其他人想要从我们这里得到什么时,我们就能越精确的满足双方的需求。注:而最终导致产品失败的原因也经常出现在这个环节,很多产品口号喊的很响亮,但就是不愿意进一步去描述,并不是说产品经理一定要上层决策好目标和需求的每一个字,然后就不容易出错,没...

    微信热点 2018-04-08
  • 你确定,你真的理解用户体验?

    用户体验:最通俗的讲即产品的用户在使用产品时的主观感受。这个看似简单的定义其实让人很迷糊。什么才是产品的用户?主观感受包括哪些方面?如果不搞懂这些东西,我们在设计产品的用户体验是便会找不到方向,更做不好用户体验。

    2017-06-01
  • 如何设计好用的触控手势

    我们生活在一个人机互动频繁,由设备驱动的世界中。 随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界…

    2016-05-30