Bridging technical depth and usability: The story behind Radar’s redesign兼顾技术深度与易用性:Radar 改版背后的故事

Sophia Alfred and Lai Yi OhlsenSophia Alfred 和 Lai Yi Ohlsen

5 minute read阅读需 5 分钟

Radar provides a real-time view into global Internet trends, powered by Cloudflare’s global network. We support Cloudflare’s mission to help build a better Internet by making web data visible, clear, and actionable for everyone. Since launching in 2020, Radar has found a natural audience amongst expert users with technical backgrounds, such as network operators and academic researchers who rely on Radar data to observe industry trends and global events.Radar 依托 Cloudflare 的全球网络,提供全球互联网趋势的实时视图。我们致力于让网络数据变得可见、清晰且可操作,从而支持 Cloudflare 助力构建更美好互联网的使命。自 2020 年推出以来,Radar 在技术背景深厚的专家用户群体中积累了自然用户群,例如依靠 Radar 数据来观察行业趋势和全球事件的网络运营商和学术研究人员。

But Radar also has the potential to be a more regular, self-serve resource for journalists, human rights advocates and policymakers, and everyday users. Making Radar accessible to a wider audience is a core part of our vision, so we knew it was time to reevaluate the user experience: How could we make Radar more approachable to broader audiences, while preserving the depth and rigor that we currently have?但 Radar 也有潜力成为记者、人权倡导者、政策制定者以及普通用户更常用的自助式资源。让更广泛的受众能够使用 Radar 是我们愿景的核心部分,因此我们知道是时候重新评估用户体验了:如何在保持现有深度和严谨性的同时,让 Radar 更易于被更广泛的受众所接受?

In this blog post, we’ll introduce the redesigned Radar, share our design process, and outline our broader vision for the platform’s future.在这篇博文中,我们将介绍改版后的 Radar,分享我们的设计过程,并概述我们对该平台未来的更宏大愿景。

Challenges with the previous design复制链接旧版设计的挑战

image3.png
Original Radar homepage旧版 Radar 主页

While the previous landing page was successful at showing the breadth of Radar’s data, the way that information was presented made it difficult to parse. The bento box layout gave everything similar visual weight, the vertical cards disrupted natural reading patterns, and the styling felt disconnected from Cloudflare’s broader brand.虽然之前的着陆页成功展示了 Radar 数据的广度,但信息的呈现方式使其难以解析。便当盒式的布局让所有内容在视觉上显得同等重要,垂直卡片打断了自然的阅读模式,且样式与 Cloudflare 更广泛的品牌形象显得脱节。

We heard this from users. One external user mentioned that one of his biggest frustrations with Radar was that it was difficult to show to his students. That feedback reinforced the problem that Radar could feel intimidating to people encountering it for the first time. With this in mind, we wanted to create a landing page experience that shaped a clearer path through the content, instead of asking users to interpret everything at once.我们从用户那里听到了这些反馈。一位外部用户提到,他使用 Radar 时最大的挫败感之一是很难向学生展示。这一反馈强化了一个问题,即对于初次接触的人来说,Radar 可能会让人感到望而生畏。考虑到这一点,我们希望创建一个着陆页体验,为内容规划出更清晰的路径,而不是要求用户一次性解读所有内容。

But making Radar more accessible wasn’t only about reorganizing the content. It was also about making the experience feel more connected to Cloudflare. For external users, consistency directly affects trust and usability. A more cohesive Cloudflare experience helps signal that Radar is an authoritative source, while familiar layout patterns reduce the effort required to move through complex information.但让 Radar 更易于使用不仅仅是重组内容。它还关乎让体验与 Cloudflare 感觉更加紧密相连。对于外部用户而言,一致性直接影响信任度和易用性。更具凝聚力的 Cloudflare 体验有助于表明 Radar 是权威来源,而熟悉的布局模式则减少了浏览复杂信息所需的认知负担。

Introducing Radar’s new landing page复制链接Radar 新版着陆页介绍

Radar's homepage map
Radar's new landing page mapRadar 新版着陆页地图

The new and improved Radar uses a visual reference that users of all backgrounds will have a familiarity with — a map. Even though in many ways the Internet operates outside the concept of national borders, its relevance to everyday life is often best understood through geography.新版且改进后的 Radar 使用了所有背景的用户都会感到熟悉的视觉参考——地图。尽管互联网在许多方面超越了国界的概念,但其与日常生活的相关性往往通过地理位置最容易被理解。

The top section focuses on traffic and outages. We lead with outages as they are one of the most concrete, timely, and salient data points about the state of the Internet. Traffic, meanwhile, communicates the scale and breadth of Radar’s data. The map also acts as a navigation point into the insights below, guiding users from the global view into specific countries, trends, and data stories.顶部区域侧重于流量和中断情况。我们将中断情况放在首位,因为它们是关于互联网状态最具体、最及时且最显著的数据点之一。与此同时,流量数据传达了 Radar 数据的规模和广度。地图还充当了深入下方洞察的导航点,引导用户从全球视图进入特定的国家、趋势和数据故事。

Guided data exploration
Guided data exploration引导式数据探索

Below the map, we turned the old bento box chart widgets into a tabbed flow that helps users move through the data more deliberately. The tabs provide summary statistics to give the user a sense of Radar’s capabilities, while also giving them a call to action to explore the data in depth. The tabbed structure creates a clearer hierarchy, keeps the page from feeling overwhelming, and previews the range of information Radar provides.在地图下方,我们将旧的便当盒式图表小部件改为了标签式流程,帮助用户更从容地浏览数据。标签提供了汇总统计数据,让用户了解 Radar 的功能,同时也为他们提供了深入探索数据的行动号召。标签结构创建了更清晰的层级,防止页面显得杂乱,并预览了 Radar 所提供的信息范围。

From concept to reality复制链接从概念到现实

Developing Radar’s design language复制链接开发 Radar 的设计语言

To develop Radar’s design language, we looked across Cloudflare’s content ecosystem, which exist in these three pillars:为了开发 Radar 的设计语言,我们审视了 Cloudflare 的内容生态系统,它们存在于以下三个支柱中:

  • Marketing pages (like cloudflare.com)营销页面(如 cloudflare.com)
  • Content experiences, like the Cloudflare Blog and Developer Docs内容体验,如 Cloudflare 博客和开发者文档
  • Product experiences产品体验
Cloudflare’s marketing, content, and product pagesCloudflare 的营销、内容和产品页面

Where does Radar fit?Radar 处于什么位置?

Ultimately, we decided that Radar sits at the intersection of all three. At its core, Radar is a data product, but it’s also public-facing and inherently content-rich. The strategy blends design aspects of all three: approachable like marketing, structured and navigable like content, and maintainable by migrating to Kumo components used by Cloudflare’s product system.最终,我们决定 Radar 处于这三者的交汇处。其核心是一个数据产品,但它也是面向公众且本质上内容丰富的。该策略融合了这三者的设计方面:像营销页面一样平易近人,像内容页面一样结构化且易于导航,并通过迁移到 Cloudflare 产品系统使用的 Kumo 组件来实现可维护性。

What we tried along the way复制链接我们一路上的尝试

From the outset, we knew the landing needed to communicate Radar’s global perspective. Because Radar helps people understand Internet activity across countries and regions, a map felt like the clearest way to make that scope immediately visible.从一开始,我们就知道着陆页需要传达 Radar 的全球视角。由于 Radar 帮助人们了解跨国家和地区的互联网活动,地图感觉是让这种范围立即变得显而易见的最清晰方式。

The map went through many rounds of iteration as we tried to strike the right balance between data richness and approachability. Early versions were too dense — we were trying to convey credibility through data-heavy visuals. Later versions moved too far toward marketing-style visuals; they felt more approachable, but risked making Radar’s fresh data feel static or overly summarized. The current direction sits between those two poles: it has the feel of live data, but it’s easier to read.地图经历了多轮迭代,因为我们试图在数据丰富性和易用性之间找到恰当的平衡。早期版本过于密集——我们试图通过数据密集型视觉效果来传达可信度。后期版本则过于偏向营销风格的视觉效果;它们感觉更亲民,但冒着使 Radar 的新鲜数据显得静态或过度概括的风险。当前的方向介于这两个极端之间:它具有实时数据的感觉,但更易于阅读。

Early map exploration, with dense data visualization早期的地图探索,带有密集的数据可视化
Later map exploration with a marketing-inspired styling后期带有营销风格的地图探索

The Radar vision and evolution复制链接Radar 的愿景与演变

Because Cloudflare sits in front of roughly 20% of all web traffic, Radar has the opportunity to tell unique and compelling stories about the Internet. To unlock that value, we want to empower every user with real-time insights across security, performance, and traffic.由于 Cloudflare 处理着约 20% 的全球网络流量,Radar 有机会讲述关于互联网的独特且引人入胜的故事。为了释放这一价值,我们希望赋予每位用户跨安全、性能和流量的实时洞察能力。

This redesign is a foundational step in that direction. Moving forward, Radar will continue to focus on tools, visualizations, and storytelling frameworks that remove friction for new audiences while doubling down on our deep data infrastructure. By pairing our technical rigor with a cleaner, human-centered experience, we are ensuring that more people can explore, understand, and share the state of the Internet.此次改版是朝着这个方向迈出的基础性一步。展望未来,Radar 将继续专注于工具、可视化和故事叙述框架,在消除新受众的阻碍的同时,加倍投入我们深厚的数据基础设施。通过将我们的技术严谨性与更简洁、以人为本的体验相结合,我们确保了更多人能够探索、理解和分享互联网的状态。

Help us make Radar better复制链接帮助我们改进 Radar

This redesign is our first step toward a more intuitive, scannable Radar. But we're just getting started, and we need your input. What’s working? What isn’t? What insights are still hard to uncover?这次改版是我们迈向更直观、更易于扫描的 Radar 的第一步。但我们才刚刚开始,我们需要您的意见。哪些方面做得好?哪些做得不好?哪些洞察仍然难以发现?

You can share feedback with us on social media at @CloudflareRadar on X, radar.cloudflare.com on Bluesky, or email us at radar@cloudflare.com.您可以在社交媒体上通过 X 上的 @CloudflareRadar、Bluesky 上的 radar.cloudflare.com 与我们分享反馈,或者发送电子邮件至 radar@cloudflare.com。