SUTATO

项目的转折点来自反馈：保留卡片式内容发现的熟悉优势，建立更清晰的内容层级，让阅读可以连续进行，不被反复打断。

修订的需求说明提出了更清晰的内容发现顺序：一条有分量的头条、最新文章、热门内容，以及精选的深度阅读。同时还要求下一篇文章在同一个阅读流程里接着开始。

这些决定先在低保真阶段展开。线框图集中处理层级、导航、可复用的卡片系列和移动端适配。这个阶段只处理结构，反馈因此能直接落进设计：每一条要求都能追溯到页面或页面行为的某一处改动。

参考的几家媒体作用不同。GamingBible 启发了内容发现的逻辑，Game Informer 启发了内容的轻重主次和杂志式的节奏。至于 SUTATO 后来的视觉表达，则是从它提供的品牌素材发展出来的。

视觉方向 Signal Cut 的切割几何造型，取自 SUTATO 所提供字标的韵律。黄色标出选定的时刻，图片尺度、窄体标题和不对称构图则确立页面的节奏。

这个手法用在内容开篇、栏目切换和阅读边界处。限制它的重复次数，这些时刻才能保持分明。阅读区则更平静，文字栏稳定，为较长的篇幅留出空间。

字体上还有一个和交付有关的务实决定。提供的 DDT 字体在 Figma 编辑环境里用不了，所以可编辑的标题用 Barlow Condensed，阅读正文用 Barlow，提供的字标则保持原样。这样文字仍可编辑，也保住了这个方向里压缩标题的节奏。

一家媒体需要的不只是反复出现的卡片网格。最终版首页包含好几种内容形式：以画面为主的 Stories 横栏、精简的 Brief、Two Sides 辩论、每周的 Radar，以及以图片为主导的 Editor’s Cut。

每种形式都改变了人遇到一篇文章的方式。有的便于快速浏览，有的则让人愿意多停留一会儿。列表页把这套层级带进分类视图，把头条内容、分析和按时间排列的信息流放在一起。

移动端的构图围绕一张主图和一组简洁的配套内容重新安排。图片的尺度和内容的主次会延续到不同的屏幕尺寸，但不要求桌面端的每种排布都原样堆叠。

文章页的设计去掉了正文里反复出现的相关文章打断。一篇结束后，下一篇在同一次滚动里接上，带着自己的刊头和图片。这个过渡依然辨认得出来，所以连续阅读的体验仍然保有内容之间的边界。

原型让这种行为可以直接检视。原型里还有分类筛选、导航、Stories 查看器和首屏轮播。自动切换有限制：首屏只自动前进一次，随后停止；手动控制仍然可用。

独立评审产物还增加了一个可用的连续阅读流，并记录了浮层的键盘焦点处理和对减弱动效设置的支持。这些行为让这套设计更容易当作一种体验来评估，包括人怎样打开一个交互元素、关闭它，再从中返回。

这项工作包括移动端和桌面端的 Figma 原型、一个单独的设计思路页，以及一个独立的 HTML 评审产物。交付文档记录了视觉和交互方面的检查，并附有多种屏幕尺寸下的佐证。

这个项目说明了，反馈、内容结构、品牌表达和交互行为，如何在一次设计修订里保持相互关联。原型里的文章内容和图片是演示素材，交付的是这家媒体的体验本身。