How many breakpoints should you use? The less, the better.

制作响应式网页需要多少尺寸版本?三个论点说服你越少越好。

前言

我既设计网页也开发网页,并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是:

  • 用户界面:我需要绘制多少种尺寸的网页?
  • 前端:我需要为网页设置多少个断点?

每当有这些疑问,直觉便是观察其他设计稿件或样式库的做法,像是 Bootstrap🔗 默认有 6 个断点,:

  • Extra small - (< 576px))
  • Small - sm (>= 576px)
  • Medium - md (>= 768px)
  • Large - lg (>= 992px)
  • Extra large - xl (>= 1200px)
  • Extra extra large - xxl (>= 1400px)

这些数值取决于因为它们是 12 的倍数(Bootstrap 网格系统默认为 12 行)与常见的设备尺寸,但实际上这并不是一个绝对的准则,这篇文章主要是想探讨现代响应式网页应如何实践,为什么我最终得出尺寸版本越少越好的结论。

论点

AWD 与 RWD 的出发点不同

如果制作网页时仍纠结于网页在特定尺寸上应当要如何呈现的话,那么很有可能你还是以制作 AWD 网页的视角来思考如何制作响应式网页。AWD 强调针对特定设备提供特定的设计;而 RWD强调提供弹性且适应各种设备尺寸的设计。它们想要达成相同的目的:“让内容在不同设备尺寸上有着合理的配置”。

适应式设计不同的容器装载内容,而响应式则是让内容自由的流动适应容器
  • 适应式 (Adaptive):针对特定设备尺寸提供特定的设计。
  • 响应式 (Responsive):根据设备尺寸自动调整网页的布局和样式。

你写/设计的 RWD 可能还是一堆 AWD

不管是设计者还是开发者,在制作界面时都十分容易预设带入 AWD 的思维,因为网页在某个特定尺寸的样貌是一件具体容易沟通与定义的事实,且在网页初期的确也的确流行这样的做法,但随着技术发展,大众对于界面的要求也有所不同,现在普遍会希望相同的网页不管在电视、平板、手机甚至是手表上🔗都能够拥有良好的使用体验,促使 RWD 而非 AWD 成为主流是必然的趋势。

许多常见设备尺寸重叠的示意图
现今网页已经有太多不同尺寸与解析度的设备,每一个方框就代表一种市面上的设备尺寸

所以既然要迈向内容自由适应,那么就不应该再纠结于特定尺寸界面的样貌!只要最终网页能够在不同尺寸上有着合理的配置(用户体验良好)那么就是达成目的,而非纠结在特定尺寸上的样貌,因为将永远设计开发不完

AWD 的思考方式:“我需要为特定设备尺寸设计独特的样式”注定它只适合由页面整体 → 内容去规划网页,制造出一个又一个独立又片面的界面;而 RWD 的方式:“我可以从内容出发 → 页面整体,制定灵活的应对方式”,将大幅提升内容样式的复用性,实现网页模块化的概念。

我们都渴望有个具象的目标来指引我们开发一套新界面,但这并不现实,因为用户的设备尺寸与解析度是不可控因素,所以选择一个更有弹性的验收标准来评估网页是否能够真正适应各种场景反而是更实际且有效率的方向。

断点只是实现响应式的一种方法

如果网页有 6 个断点,那么该样式元素就需要进行 6 种测试,这样的测试与维护成本是非常高的!

断点(Breakpoint)是一种实现响应式网页的方法,但并不是唯一的方法。许多开发者习惯性地将断点视为制作响应式网页的必然步骤,这是因为早期 CSS 并没有提供太多方式来设计弹性内容,很多时候需要手动设置断点来达成合理的画面配置。

现代 CSS 已经提供了许多弹性的尺寸单位,像是 grid, flexbox, vh, vw, calc, clamp, min, max, aspect-ratio 可以让我们更自由地适应不同的屏幕大小,而不需局限于固定的断点。如果可以的话,应该尽量避免设置断点让内容的流动来解决布局问题,真正画面有巨大的转变需求时才使用断点。

  • ✔ 微调文字大小或间距尺度:使用 Clamp 或 rem 等动态单位
  • ✔ 巨幅的改变画面布局:使用断点来调整画面配置

举网页东东首页为例,使用了 grid 处理二维布局、flex 处理一维布局、clamp 处理文字尺寸过渡,只有在版面大改的状况下设置断点(将行动装置导航列设计在页面下方)。除了断点以外实现响应式的方式其实是很多元的。

网页本来就是响应式的

网页内容本身就像流动的水一样,依照装置尺寸不同而改变呈现方式,这点可以参考这篇文章 This is a motherfucking website.🔗,虽然有点粗鲁不过内容也点出许多现代网页的问题。

设计了许多花俏的界面破坏了网页的内容本质,实际上任何一个 HTML 网页内容本质就是可流动的,过度设计是否只是添加干扰与加大开发与维护难度呢?这里的过度设计是指,如果可以通过内容流动来达成合理的内容配置,何必又额外设计容器或装饰去做不必要的修饰?

总结

只有设计与开发相互合作才能打造完美好维护的网页,根据产品的种类与客群不同,适用的模式也会不同。本篇文章总共提出三个论点说服你开发一个「响应式网站」应该需要有多少个版本的设计稿件或者说是断点。身为前端的观点来说,每多一个断点意味着多一种版本的样式需要管理与维护,实现响应式的手段现今已经非常多元,在真正有必要的时候才使用断点即可。

UI 可以怎么做

有一定规模的网页是通过小组件到整体页面拼凑出来的,如 Atomic Design🔗 的概念,如果还停留在「响应式网页开发是以页而非内容来设计」将很难量产品质一致的界面。如果因为时间压力无法从小到大构建系统,各大设计系统可以借鉴🔗或是与前端讨论选择一款顺手的组件库也是很不错的方案。

  • 理解网页不仅仅是平面稿件,多留下线索与前端讨论设计想要达成的目的。(相较于精致片面的 Mockup,Wireframe 或随手的涂鸦详细的解释界面期望达成的目的会更好,或是善用现代工具标示)
  • 与前端一同维护设计系统🔗,从小组件开始规范统一。

前端可以怎么做

尽量避免重复造轮子,撰写可复用可维护的组件,不仅是切版这么简单(否则会切到死),工作更多时候应当留意整个项目的质量与可维护性。

  • 提出建议让 UI 能够更好地理解前端的限制与可能性。
  • 与 UI 一同维护设计系统🔗,从小组件开始规范统一。

延伸阅读