Date 2026-07-02 20:52:54
抛开用户兴趣和分散时间的争论，让我们谈谈网页设计中应该注意的长期内容。对于网站和应用程序，长内容或长文本可能是内容策略中最有价值的组成部分（前提是它不是无聊内容的堆积）。用户喜欢好的故事，而长内容提供的身临其境的阅读体验可以为用户提供迷人的体验。
为了保持用户对阅读的兴趣，您必须提供愉快的设计和交互，使内容的体验从头到尾都是一致的。为了实现这一目标，需要有针对性的设计。
如果长文的内容堆积在一起，那就很有压力了，所以，让用户不会厌倦，空间的使用是首要技能。
如果文章的内容看起来太重，用户肯定会感到害怕。通过合理的空白和排版设计，用户更容易浏览和快速扫描长文本，相应地降低内容的视觉重量，使其看起来更友好。
为了减轻视觉重量，您可以考虑控制以下留白：
·控制内容与屏幕边缘之间的间距，控制行间距与段间距，图片、视频等非文本视觉元素周围的空白
当页面内容太长时，用户需要滚动页面很长时间，此时，页面辅助导航的视觉线索非常重要。您可以考虑使用指导动态效果，如箭头、按钮或视差效果来指导用户。
这些微小的动态效果通常不会给长文或故事带来分离的体验，甚至会让用户在浏览过程中感到快乐。
视频动画是吸引用户的另一种武器。虽然绝大多数视频会打破长内容的流畅性，但它可以为用户提供一个机会来修改和调整浏览，或者把它放在一开始作为一个介绍。
无论你打算把它放在长篇文章的开头作为介绍，还是放在中间作为间隔，尽量保持它很短，尽量不要让它自动播放，这可能会分散用户的注意力。
视差滚动技术也值得使用。浏览时有动画“随之跳舞”的体验非常有趣。值得注意的是，视差滚动的动态效果不需要复杂。简单的动态效果不仅可以节省性能，而且不会占据主导地位。它不会打断阅读，同时保持迷人的体验。
插图是长篇文章中不可缺少的一部分。假如你的内容恰好是一个故事，插图的优点就会更加明显。
将插图分散地添加到文章的各个部分，可以加强内容的故事性，提高用户的体验和参与度，使用户更容易获取信息。这种技能对小说和缺乏清晰视觉图像的文本特别有用。
图片的位置实际上非常熟练。事实上，一些好的长篇文章在图形搭配上遵循一定的惯例，因为为了使整体符合审美特征，顺利阅读，正确匹配文字和图片，不难推断出整个规则：
１、设计顶部大图2、添加介绍性文本3、加入高清大图4、添加子标题５、设计易于阅读的文本文本6、在设计子章节内容时，遵循三步和五步
绝大多数图片应适当缩放并显示在中间，内容不应包围。这种排版方法基本上是模仿传统的图书排版，为用户带来自然的阅读过程和舒适的体验。
无论是手机、平板电脑还是桌面端网页，这种设计过程几乎适用于所有数字设备的长文内容设计。
不要害怕创造高质量的阅读体验。因为它是一篇长文章，大量的文本是不可避免的。你不需要为每张图片搭配一个风骚的动画效果，但你必须做好排版，以确保流畅的阅读体验，这样用户就可以始终保持对阅读的兴趣。
·在长篇文章中，文章被大量的子标题分成不同的章节，以区分字体大小和文本，以便用户一眼就能区分它们。·使用粗体、颜色和斜体使特定的段落或句子更有吸引力。·使用引用的文本信息，方便用户掌握内容的核心。
滚动操作不是什么新鲜事，所以你应该让滚动操作看起来直观，尤其是当你在滚动过程中添加一些不同的东西时。
酷的滚动效果，如视差滚动，可以改善长文本的阅读体验。但这种设计不能通过，滚动效果应该符合用户的基本期望，而不是太意外。
滚动阅读体验应与内容无缝融合。在浏览信息的过程中，滚动特效应该有助于内容的可读性，而不是干扰。
Medium 最大的特点是每篇文章都会标明平均阅读时间。Polygon 阅读进度将显示在屏幕左侧，用户可以在阅读过程中清楚地判断阅读进度，并对最终时间有明显的期望。
完成每一个阅读进度的“里程碑”都能给用户带来一定的成就感。
另一种为用户展示进度的设计是将内容直接分为不同的章节，并提供相应的导航进度条。这种进度条不仅可以帮助用户跳过特定的章节，而且更容易返回到特定的位置。这种设计可以让用户很容易地控制长文本的内容，并获得阅读的乐趣。
大多数好的长文都是从一个好故事开始的。如果你需要给别人讲一个故事，用长内容来展示可能是最好的答案。
然而，不要被惯性思维所限制。长内容不一定是纯文本。用最合理的媒介呈现信息是正确的想法。国家地理”Hiking the Grand Canyon用大量的图片和地图讲故事，相当值得一看。
当然，不管事情有多好，你都不能一次给太多。即使页面设计得很好，一个页面也需要翻几百次才能玩，没有人能忍受。
假如故事结束了，页面也最好结束，另一个故事，换个页面展示。
长内容可以让你的网站超越视觉美的吸引力，给用户的快乐不仅来自眼睛。对于小企业来说，高质量的长内容可以给网站带来更强的粘度和更快的排名改进速度，这些长内容可以在品牌建设和社交媒体上带来更多的价值。
【Nick Babich 谈用户体验设计经验】
输入框设计：“说实话，你真的知道文本输入框设计的潜规则吗？”表单设计：“挖掘细节！设计高效、易于使用表单的10个技能”极简主义应用程序 UI：超级赞！帮你打造极简风APP UI 《实用设计技巧》前端开发:“有法可依！帮你衡量一个动态效果是否合格的六个核心因素。”面包屑:“不简单！如何使用网页上给你指路的面包屑？”移动页面:“遵循建议！这种移动网站设计是对的。”原地址：designshack原作者：CARRIE COUSINS优设译文：@陈子木
本文由优设网原创翻译。请尊重版权和译者的成果。请附上优设链接进行转移，违者将被调查。感谢编辑们的合作。
【优设网 原创文章 投稿邮箱：yuan@uisdc.com】
================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com