Back to Details

responsive-paradigms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Responsive Paradigms

响应式交互范式

Mobile, tablet, and desktop are fundamentally different interaction contexts. The input method, screen real estate, viewing distance, and session intent all differ. Responsive design is not the same layout at different widths — it is a different design decision at each breakpoint.
移动端、平板端和桌面端是截然不同的交互场景。输入方式、屏幕空间、观看距离以及会话意图均存在差异。响应式设计并非同一布局在不同宽度下的简单适配，而是在每个断点处做出不同的设计决策。

The Three Paradigms

三种交互范式

Mobile (< 768px)

移动端（< 768px）

  • Input: Touch — fingers, not a cursor. Tap targets ≥ 44×44px.
  • Navigation: Bottom tab bar (thumb reachable) or hamburger drawer. Top navigation is hard to reach.
  • Session: Often interrupted, task-focused, shorter. Show the most important thing first.
  • Content: Single column. Vertical scroll only. No hover states.
  • Primary action: Floating action button (FAB) or full-width button at the bottom of the screen.
  • 输入方式： 触摸操作——使用手指而非光标。触摸目标尺寸需≥44×44像素。
  • 导航： 底部标签栏（拇指可触及范围）或汉堡抽屉菜单。顶部导航难以触及。
  • 会话特点： 经常被打断，以任务为导向，时长更短。优先展示最重要的内容。
  • 内容布局： 单列布局。仅支持垂直滚动。无悬停状态。
  • 核心操作： 浮动操作按钮（FAB）或屏幕底部的全宽按钮。

Tablet (768px–1024px)

平板端（768px–1024px）

  • Input: Touch and sometimes keyboard/trackpad. Hybrid paradigm.
  • Navigation: Can support a persistent sidebar at landscape orientation; collapses to drawer at portrait.
  • Content: Two-column layouts work. Master-detail patterns (list + detail side by side) are natural.
  • Primary action: Can be in-line with content, not necessarily floating.
  • 输入方式： 触摸操作，有时也支持键盘/触控板。属于混合交互范式。
  • 导航： 横屏模式下可支持固定侧边栏；竖屏模式下折叠为抽屉菜单。
  • 内容布局： 双列布局适用。主从详情模式（列表+详情并排）十分自然。
  • 核心操作： 可嵌入内容中，不一定需要浮动展示。

Desktop (> 1024px)

桌面端（> 1024px）

  • Input: Mouse with hover states, keyboard shortcuts, precise clicking.
  • Navigation: Persistent sidebar or top navigation. Both visible simultaneously.
  • Content: Multi-column, dense information, toolbars, context menus.
  • Primary action: In-context with content, supported by keyboard shortcuts for power users.
  • 输入方式： 带悬停状态的鼠标、键盘快捷键、精准点击操作。
  • 导航： 固定侧边栏或顶部导航。两者可同时显示。
  • 内容布局： 多列布局、高密度信息、工具栏、上下文菜单。
  • 核心操作： 与内容上下文结合，为高级用户提供键盘快捷键支持。

Section Behaviour Across Breakpoints

区块在不同断点下的表现

Not every section needs to appear on every breakpoint at the same position — or at all.
并非每个区块都需要在所有断点下保持相同位置——甚至不一定需要展示。

Sections can be hidden on mobile

移动端可隐藏部分区块

Secondary content (related articles, supplementary sidebars, decorative illustrations) can be hidden below a breakpoint. Ask: does a mobile user need this? If no, 
display: none
at mobile is correct.
次要内容（相关文章、补充侧边栏、装饰插图）可在断点以下隐藏。思考：移动端用户是否需要这些内容？如果不需要，在移动端设置
display: none
是正确的做法。

Sections can be repositioned

区块可重新定位

A sidebar that sits to the left on desktop logically moves below the main content on mobile, or collapses into an expandable section.
Desktop:              Mobile:
[Main] [Sidebar]  →   [Main]
                       [▼ Related]  ← collapsed accordion
桌面端左侧的侧边栏，在移动端合理的做法是移至主内容下方，或折叠为可展开的区块。
Desktop:              Mobile:
[Main] [Sidebar]  →   [Main]
                       [▼ Related]  ← collapsed accordion

Sticky behaviour can change per breakpoint

粘性行为可随断点变化

An element that is 
position: sticky
on desktop may need to become a fixed bottom bar on mobile, or be removed from sticky positioning entirely to free up screen space.
css
.toolbar {
  position: static; /* mobile: inline, not sticky */
}

@media (min-width: 1024px) {
  .toolbar {
    position: sticky;
    top: var(--header-height);
  }
}
桌面端设置为
position: sticky
的元素，在移动端可能需要改为固定底部栏，或完全取消粘性定位以释放屏幕空间。
css
.toolbar {
  position: static; /* mobile: inline, not sticky */
}

@media (min-width: 1024px) {
  .toolbar {
    position: sticky;
    top: var(--header-height);
  }
}

Navigation transforms completely

导航会完全转变

DesktopMobile
Persistent top nav or sidebarBottom tab bar or hamburger drawer
Visible labels + iconsIcons only (bottom nav) or full list (drawer)
Hover states on nav itemsNone — touch only
Dropdowns on hoverTap to expand, full-screen or sheet
桌面端移动端
固定顶部导航或侧边栏底部标签栏或汉堡抽屉菜单
可见标签+图标仅显示图标（底部导航）或完整列表（抽屉菜单）
导航项存在悬停状态无悬停状态——仅支持触摸操作
悬停展开下拉菜单点击展开，全屏显示或弹出面板

Mobile-First Approach

移动端优先设计方法

Design and build mobile first, then enhance for larger screens. Mobile forces prioritisation — what makes it onto mobile is what actually matters.
css
/* Mobile first: base styles are mobile */
.container { padding: var(--space-4); }

/* Enhance for larger screens */
@media (min-width: 768px) {
  .container { padding: var(--space-8); }
}

@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
}

/* Ultra-wide protection */
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
先针对移动端进行设计和开发，再为更大屏幕进行增强。移动端迫使我们进行优先级排序——能出现在移动端的内容才是真正重要的。
css
/* Mobile first: base styles are mobile */
.container { padding: var(--space-4); }

/* Enhance for larger screens */
@media (min-width: 768px) {
  .container { padding: var(--space-8); }
}

@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
}

/* Ultra-wide protection */
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

Max-Width and Ultra-Wide Screens

最大宽度与超宽屏适配

Responsive design doesn't mean "expand forever." On very large monitors (2K, 4K, and ultra-wide), content must be capped to maintain readability and ergonomic comfort.
  • Ergonomics: Spreading critical UI elements across the full width of a 4K screen requires excessive neck movement and makes the interface feel "fragmented."
  • Readability: As noted in typography guidelines, line lengths should not exceed ~75 characters. On a 4K screen without a max-width, a single line of text could span thousands of pixels.
  • The "Safe Zone": Use a max-width container (typically between 1280px and 1600px) for all primary content.
  • Full-Bleed Exceptions: Background colours, decorative images, and secondary footers can remain full-width to maintain the design's "energy" while the content remains centered and contained.
响应式设计并不意味着“无限扩展”。在超大显示器（2K、4K及超宽屏）上，内容必须设置最大宽度，以保持可读性和人体工学舒适度。
  • 人体工学： 将关键UI元素分散在4K屏幕的全宽范围内，会导致颈部过度活动，使界面显得“碎片化”。
  • 可读性： 正如排版指南所述，行长度不应超过约75个字符。若4K屏幕未设置最大宽度，单行文本可能会跨越数千像素。
  • “安全区域”： 所有核心内容使用最大宽度容器（通常在1280px至1600px之间）。
  • 全屏例外： 背景色、装饰图片和次要页脚可保持全屏显示，以维持设计的“活力”，同时内容保持居中并被容器限制。

Review Checklist

审核检查清单

  • Does mobile navigation use a bottom tab bar or drawer — not a top nav that requires thumb stretching?
  • Are touch targets ≥ 44×44px on all interactive elements?
  • Are secondary sections hidden or collapsed on mobile rather than just shrunk?
  • Does sticky positioning adapt per breakpoint — not every sticky desktop element stays sticky on mobile?
  • Is the layout built mobile-first with progressive enhancement upward?
  • Are hover-dependent interactions (tooltips, dropdowns) replaced with tap equivalents on touch?
  • Does the primary action remain reachable with one thumb on mobile?
  • Is the primary content capped with a max-width (e.g., 1440px) on ultra-wide/4K monitors?
  • 移动端导航是否使用底部标签栏或抽屉菜单——而非需要拇指伸展才能触及的顶部导航？
  • 所有交互元素的触摸目标尺寸是否≥44×44像素？
  • 次要区块在移动端是否被隐藏或折叠，而非仅仅缩小？
  • 粘性定位是否随断点调整——并非所有桌面端粘性元素在移动端都保持粘性？
  • 布局是否采用移动端优先的渐进增强方式构建？
  • 依赖悬停的交互（工具提示、下拉菜单）在触摸设备上是否替换为点击触发的等效交互？
  • 移动端核心操作是否可通过单拇指触及？
  • 核心内容在超宽屏/4K显示器上是否设置了最大宽度（例如1440px）？