編輯導(dǎo)語：對設(shè)計(jì)師來說，設(shè)計(jì)布局、柵格、斷點(diǎn)這些詞一定是再熟悉不過了。當(dāng)我們進(jìn)入一個新環(huán)境時，應(yīng)該如何做出一份合理的設(shè)計(jì)布局？柵格和斷點(diǎn)到底該如何定義？如何做響應(yīng)式布局？針對這些問題，本文作者從六個方面為我們做出了解答。

作為設(shè)計(jì)師，新建畫板、設(shè)計(jì)布局、柵格永遠(yuǎn)是我們的起點(diǎn)。

很多設(shè)計(jì)師在公司，肯定有成型的設(shè)計(jì)系統(tǒng)，我們只需要按照規(guī)范做設(shè)計(jì)即可。但是，當(dāng)我們自己獨(dú)立去接咨詢項(xiàng)目的時候，或者加入一家 start up 的公司時，我們是否能夠獨(dú)立產(chǎn)出設(shè)計(jì)系統(tǒng)？我們是否可以做出為現(xiàn)在和未來功能留有余量的布局？我們的柵格和斷點(diǎn)到底該如何定義？如何做響應(yīng)式布局？

這些問題其實(shí)都是做一個設(shè)計(jì)系統(tǒng)的基礎(chǔ)，也是我們最應(yīng)該熟練掌握的技能。

我講在這篇文章里回答這些問題，我將自己的工作經(jīng)驗(yàn)以及長期參考的 Design Guideline 放在本文做為例子，包括 Carbon Design System、Fluent UI、Lighting Design System、Evergreen、Material Design、Ant Design，來幫助大家在最短的時間內(nèi)，解決上述問題。

本文將會分為 6 部分講解，相信耐心的你會開心看完得到一些收獲。

1. Part 1: 間距和最小單位 Spacing & Mini Unit
2. Part 2: 設(shè)計(jì)布局 Layout
3. Part 3: 柵格系統(tǒng) Grid System
4. Part 4: 斷點(diǎn) Breakpoint
5. Part 5: 畫板尺寸選擇 Frame
6. Part 6: 寬高比 Aspect Ratios

在寫正文前，我先普及一些新人可能不熟悉的英文詞匯，在 Design Token 中，我們不可避免的會使用一些英文詞匯，本文中為了方便，把一些常見的設(shè)計(jì)英文直接書寫，新入行的朋友不要慌張，在本文中還有更詳細(xì)的解釋。

• Margin 間距，表示固定距離、頁邊距
• Padding 填充，表示元素邊框與元素內(nèi)容之間的空間
• Offset 偏移
• Column 欄，?？s略書寫為col
• Row 行
• Grid 網(wǎng)格
• Gutter 水槽，指得是列、網(wǎng)格間得間隔
• Container 容器
• Box 盒子
• Card 卡片
• Component 組件，組件在 Sketch 內(nèi)才叫 Symbol，可能是開來源于java，表示引入 xx 數(shù)據(jù)類型

一、Part 1: 間距和最小單位 Spacing & Mini Unit

1. 設(shè)置最小單位為 8px 或 4px

統(tǒng)一設(shè)計(jì)的最小單位就像是固定一把尺子的最小刻度，這會讓我們的設(shè)計(jì)更簡單，更統(tǒng)一，落地實(shí)現(xiàn)更簡單。引用我特別喜歡的設(shè)計(jì)師 Mizko 說的一句話:” It’s will make your life much easier.” lol

在 Martial Design和 Ant design 中其實(shí)用到了最小間距和最小間距形成尺子這個概念，在 Carbon Design System 中則更直接，他們定義了2x Grid System，簡單來講就是界面設(shè)計(jì)的內(nèi)容都可以被2整除或者是2的倍數(shù) （IBM很神經(jīng) 甚至把 2x Grid 用到了他們的建筑設(shè)計(jì)、周邊設(shè)計(jì)等)，2x Grid 的 Mini Unit 是 8*8px，也就是他們設(shè)計(jì)的最小單位為 8px。同樣，我們從 Ant 和 MD 看到的設(shè)計(jì)最小單位也是 8px。

你可能會問那直接用 2px 為什么不行？我會回答那會讓你的人生很難，因?yàn)?2 規(guī)定出來的間距太多，設(shè)計(jì)調(diào)用時，反而會出來更多規(guī)則，讓你的設(shè)計(jì)韻律感不佳。

在一些設(shè)計(jì)團(tuán)隊(duì)分享中看到一個比較有意思的結(jié)論，在目前統(tǒng)計(jì)的用戶常用屏幕尺寸中，8px 和 4px是整除率最高的之一，所以選擇 8px 或者4px，我在工作中常用的最小單位是8px，比較推薦。

但是在一些情況下，8px 不能滿足我們的所有需求，所以，我們可以出現(xiàn)一些特例，比如 2px、4px、6px 等特殊間距。我們比如某個間距是 2*8=16px 我們覺得不夠時，還可以 16+4=20px進(jìn)行調(diào)整，規(guī)矩是為了更好的統(tǒng)一而不是限制。（我腦中是一把尺子，大刻度是8，小刻度是4。）

在 B 端設(shè)計(jì)中，Ant 有一個最小單位為 8px 的常用模度表，可以作為參考, 這對我們設(shè)置頁面布局規(guī)則將有提效。

所以這里總結(jié)一下，一般我們使用 2x grid 思維作為基準(zhǔn)，用 8px 作為最小單位，最小間距也可以是2px 、4px等，建立自己的模度表，并常使用，讓自己設(shè)計(jì)更簡單。

補(bǔ)充一點(diǎn)，蘋果的設(shè)計(jì)規(guī)范內(nèi)，有些地方有基數(shù)，是因?yàn)樗麄冇昧舜罅康娜肆θフ{(diào)整到最舒適，團(tuán)隊(duì)強(qiáng)大，做“尺子”的人，人家怎么弄怎么對咯。

2. 在設(shè)計(jì)軟件中設(shè)置快速操作

Figma 中，在 Preferences 里的 Nudge amount 設(shè)置 big nudge=8 即可。

Sketch中，在 Preferences 里的 Canvas 設(shè)置 big nudge=8 即可。

二、Part 2: 設(shè)計(jì)布局 Layout

設(shè)計(jì)布局其實(shí)是產(chǎn)品的功能和訴求決定的。

對于 B 端后臺類產(chǎn)品，功能比較復(fù)雜，所以在布局上比較講究如下幾點(diǎn)：

1. 規(guī)劃導(dǎo)航形式：布局前整理現(xiàn)有功能和未來可能新增功能，預(yù)留功能收納的導(dǎo)航，為未來新增功能留足空間。
2. 劃分功能區(qū)：布局時考慮用戶端設(shè)備，如果是 PC 端盡量保證用戶在一屏內(nèi)可以高效操作，可以橫、縱向分割屏幕，劃分功能區(qū)，如導(dǎo)航區(qū)、操作區(qū)、內(nèi)容區(qū)等。
3. 考慮多端適配：如果是比較簡單的后臺，建議采用百分比規(guī)劃空間，或者采用固定版心的形式進(jìn)行大屏適配，利用 Break Point 來進(jìn)行不同屏幕的適配；如果是功能復(fù)雜的后臺，比如國內(nèi)常見的飛書，就要配合柵格、相對值及固定值來進(jìn)行后臺布局，將頁面靈活處理，盡可能在一屏內(nèi)完成所有交互。
4. 合理利用副屏：在 PC 端設(shè)計(jì)時，一些功能可以提前收納如 Dialog、Drawer、Right Side Area中，這樣不止可以減少頁面的跳轉(zhuǎn)，讓用戶更加專注，也可以讓功能得到更好的收納，實(shí)現(xiàn)用戶體驗(yàn)和產(chǎn)品需求的雙豐收。

就像上文所述，規(guī)劃產(chǎn)品布局需要看功能訴求，每個產(chǎn)品千差萬別，那么我這邊來列舉一些常見的布局供大家來參考，希望會有幫助。

案例1: 簡單的 2 col 和 3 col 布局設(shè)計(jì)，如下圖：

在一些功能不復(fù)雜的系統(tǒng)，我們的布局可以相對簡單，也方便多設(shè)備適配。

先說適配，我們可以吧 Body 1 看作移動端的一屏，同理 Body 2 和 Body 3 也一樣，配合 Break Point 就可以輕易的實(shí)現(xiàn)多端適配。比如，我們可以通過設(shè)置 Body 1 的寬度區(qū)間和所占屏幕比例約束，當(dāng)?shù)侥骋粋€ Break Point 時，只顯示或不顯示 Body 1 即可。同理，Body 2、Body3 也是這個方法。

再說布局內(nèi)容，Body 1 可以是導(dǎo)航，也可以是內(nèi)容，Body 2 和 body 3 放入主要信息 1 和主要信息 2 即可。另外，案例要靈活運(yùn)用，在這樣的布局上，我們也可以增加頂部導(dǎo)航，來釋放 Body 1 的壓力。

案例2: 簡單的固定版心設(shè)計(jì)，如下圖：

這樣的布局依舊是適合一些功能不復(fù)雜的系統(tǒng)，其實(shí)很多網(wǎng)頁就是這樣的設(shè)計(jì)。

先說適配，我們可以將 Break Point 設(shè)置不同的版心大小，只要在版心內(nèi)做好設(shè)計(jì)即可。我們也可以想一下，如何能讓這個布局更好的適配？相對值是答案，我們可以把固定的版心設(shè)置成相對大小，比如屏幕寬度的 80% ，再設(shè)置斷點(diǎn)和最大最小值，那么這個產(chǎn)品在多設(shè)備下的適配會更有生機(jī)。

這個布局承載復(fù)雜功能的原因是，頂部導(dǎo)航的容納功力有限，用戶需要反復(fù)去頂部導(dǎo)航搜尋。這樣布局的變形是在 body 左側(cè)可以增加快速導(dǎo)航，右側(cè)增加輔助信息內(nèi)容模塊，比如 Titter 就是這樣處理的。

案例3: 工具型后臺，如下圖：

工具型界面設(shè)計(jì)其實(shí)很常見，比如 Adobe 系列，隨著功能和復(fù)雜度的增加，header 和 Side Area 的復(fù)雜程度也在加深。

用這種布局的情況也可能是自定義功能的后臺，比如用戶要自定義審批表單和試卷等。Side Right Area的增多有時是為了優(yōu)化交互，比如我很推薦的動效軟件 Protopie, 在右邊分了 3個side area，分別是交互方式、時間、參數(shù)，這大大節(jié)省了動效制作的操作成本。

這樣布局的響應(yīng)式也同樣，就是設(shè)置 Side Bar 的參數(shù)即可。

案例4: 常用后臺設(shè)計(jì)系列，如下圖：

上圖是一部分目前的主流后臺布局手段，通過產(chǎn)品的規(guī)劃的多少決定 Header 和 Navigation 的交互以及位置。

是否用到 Right Side Area 也是功能決定的，可以通過響應(yīng)布局實(shí)現(xiàn)預(yù)留 Side Area 的位置，如果不是一直全局出現(xiàn)，可以用 Drawer 形式呼出。

Body 區(qū)域需要根據(jù)業(yè)務(wù)場景分區(qū)，操作區(qū)、顯示區(qū)等。Content 一般在 Body 內(nèi)，利用百分比或者柵格來規(guī)劃響應(yīng)。這部分適配一般也是用 Break Point 和規(guī)定格模塊參數(shù)來決定，一般會使用柵格。

三、Part 3: 柵格系統(tǒng) Grid System

1. 柵格的起源

網(wǎng)格系統(tǒng)開始是書面書籍的輔助線，1692年，新登基的法國國王路易十四感到法國的印刷水平不盡人意，因此命令成立一個管理印刷的皇家特別委員會。

他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的， 重視功能性的新字體。委員會由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成，在這個嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的編排，試驗(yàn)傳達(dá)功能的效能，這是世界上最早對字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動，也是柵格系統(tǒng)最早的雛形。

萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）發(fā)布的CSS Grid Layout Module Level 1制定了二維的基于網(wǎng)格的布局體系。

2. 柵格的定義

柵格系統(tǒng)英文為 Grid Systems，（又稱網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。

3. 使用柵格的意義

1）節(jié)奏感 Rhythmic

網(wǎng)格系統(tǒng)確保各個布局之間的一致性，提升體驗(yàn)和視覺的一致性，使設(shè)計(jì)更有秩序感、節(jié)奏感。

2）動態(tài)的 Dynamic?

使用網(wǎng)格可以跨不同屏幕尺寸的多個設(shè)備體驗(yàn)連貫，是響應(yīng)式設(shè)計(jì)的必備手法之一。

3）效率化 Efficiency?

效率化分三個層面體現(xiàn)：

• 對設(shè)計(jì)師：能讓設(shè)計(jì)師高效準(zhǔn)確設(shè)計(jì)界面，多端口屏幕設(shè)計(jì)減少，提高設(shè)計(jì)效率；
• 對開發(fā)：節(jié)省開發(fā)成本，增加配合效率，落地實(shí)現(xiàn)更精確；
• 對用戶：秩序感的界面降低了用戶的理解成本，讓用戶體驗(yàn)更好。

4. 柵格的類別

我們從 Figma 的 Layout Grid 可以看出，柵格的分類大致有四種：

1）網(wǎng)格式 Grid

網(wǎng)格式的柵格系統(tǒng)使用范例是 2x Grid System ，這是 IBM 設(shè)計(jì)的基礎(chǔ)。無論使用何種設(shè)備或媒介，2x Grid System 都能提供足夠的結(jié)構(gòu)和指導(dǎo)，讓設(shè)計(jì)師可以專注于自己的創(chuàng)意。

2x Grid System 的基礎(chǔ)固定單元是 8px 的小方格，通過組合這些小方格，組成了rows、column、container、card 和 components，以及 margin 和 padding。

有些情況，就是網(wǎng)格形式的柵格系統(tǒng)，利用最小單元格計(jì)算出的 padding 和 margin 形成水槽。下圖是 2x Grid System 的示例：

2）列式 Column

列式網(wǎng)格式常見的互聯(lián)柵格形式，我們見到的大部分網(wǎng)頁及開源組件庫幾乎都是列式的，(蘋果的網(wǎng)頁只用了相對值，保證在響應(yīng)下的絲滑變化，這是需要很大的成本的，碰巧我的公司也是這樣搭建，確實(shí)計(jì)算起來比較麻煩），下圖是列式示例：

3）行式 Row

行式一般比較少，在柵格系統(tǒng)中，行式經(jīng)常用于標(biāo)定 header 和 footer 來使用。在網(wǎng)格系統(tǒng)中，我們之前講過最小單位，為了方便設(shè)計(jì)，經(jīng)常用行式柵格作為最小單位的”尺子”標(biāo)記在畫板，我用 FIgma 的在操作舉例：

行式柵格更多的作用是來調(diào)整縱向的最小單位，比如我們設(shè)定 Mini Unit=8px，就可以在 Layoout Grid 設(shè)置 Count=1000+ ，Type=Top，Gutter=0，Height=8px（mini unit)。相信我，這一定會讓我們的設(shè)計(jì)生涯輕松很多。

4）組合式 Compound (前三種方式混合使用)

在大部分情況下，前三種方式都是組合使用的，只不過我們經(jīng)常不列出行式或者用輔助線來代替。

5. 柵格系統(tǒng)的構(gòu)成

柵格由 欄 (Column)、水槽 (Gutter) 、 邊距 (Margin) 、最小單位 (Mini Unit) 構(gòu)，前文講過最小單位，所以下面不贅述。

1）欄 (Column)

Column 欄是柵格系統(tǒng)內(nèi)容的容器，盛放文本、表格、圖片等內(nèi)容及元素。

頁邊距不是固定值的情況，列的寬度是固定的。如果是固定邊距的情況，列的寬度不是固定的。UI設(shè)計(jì)中，我們一般會選取頁邊距固定，也就是設(shè)置Margin。

總之，列和頁邊距只有一個是固定值，另一方的值由運(yùn)算得出。

具體運(yùn)算公式：

Viewport Width= Column Width * number of column + 2*Margin + Gutter Width *(number of column -1)

Number of Column 和 Gutter 是我們自己定義的，Viewport Widt 使用柵格部分頁面寬度也是固定的，那么只要變量只剩 Cloumn 和 Margin，給其中一個值定義，即可算出另一方的值。

另外，列數(shù)也可以通過定義 Break Point 改變， 在不同 Break Point 下的界面設(shè)置不同的列數(shù)。

例如，

• 頁面寬度小于 400px 時，用 6 列，滿足手機(jī)端；
• 頁面寬度在 400-1200px 時，用 8 列，滿足pad和小型電腦；
• 頁面寬度大于 1200px 時，用 12 列，滿足PC端的大尺寸。

Container 如果是卡片形式，可以設(shè)置 Padding 來讓視覺更有秩序。在我們使用柵格系統(tǒng)做 B 端的 PC 端設(shè)計(jì)時，建議選用 24 欄設(shè)計(jì)或者 12 欄設(shè)計(jì)。需要注意的是，列和欄是有區(qū)別的，在 Ant Design 中 1列 = 1欄+1水槽。

2）水槽 Gutter

水槽：是列之間的空間，可幫助分隔內(nèi)容。

水槽的寬度是固定的，但是對于不同的端的設(shè)計(jì)，我們可以設(shè)置 Break Point， 在不同 Break Point 下的界面設(shè)置不同水槽寬度。在針對不同端口設(shè)計(jì)時，移動端常用的水槽寬度較小，PC 端的水槽寬度往往較大，響應(yīng)式布局往往通過設(shè)置 Break Point 來定義不同端口在下水槽的寬度。

需要注意的是，水槽的寬度要小于列寬，避免出現(xiàn)設(shè)計(jì)留白過大的情況。

比如，在 Material Design 中，在移動設(shè)備上，0-599 dp 時 ，此布局網(wǎng)格使用 16dp 水槽；在平板電腦上，斷點(diǎn)為 600-094 dp時 ，此布局網(wǎng)格使用 24dp 水槽。

3）頁邊距 Margin

頁邊距分兩種，固定邊距和非固定邊距，值得注意的是，非固定邊距的情況下，Margin還可以定義為相對值，比如 Margin = 10% screen width，也就是頁邊距等于10%的屏幕寬度。

在一個app界面設(shè)計(jì)中，可以有1-3種固定頁面邊距，這是根據(jù)頁面呈現(xiàn)內(nèi)容和你想呈現(xiàn)的視覺效果決定的。一般來說，頁邊距越大，相應(yīng)定義的水槽也可以越大或者維持不變，這是為了讓頁面更清爽，留白更多，有時也是為了突出高級感，反之，如果頁面內(nèi)容過多，可以用小邊距。需要注意的是，同一個頁面只能使用一種邊距。

在響應(yīng)式布局時，也可以根據(jù) Break Point 去設(shè)置頁邊距的值。

比如，在 Material Design 中，在頁面寬度在小于等于600px的情況下，margin = 16px在頁面寬度大于600px的情況下，marigin = 32px

四、Part 4: 斷點(diǎn) Breakpoint

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport size.

斷點(diǎn)是自定義屏幕的寬度范圍，在不同范圍下確定不同的布局規(guī)則，這是為了適應(yīng)不同的設(shè)備和屏幕尺寸。

我們先來看一下如下幾個 Design System 的斷點(diǎn)規(guī)則：

我們先從 Break Point 個數(shù)來看，Sales Force 的斷點(diǎn)個數(shù)最少，個人認(rèn)為的原因是 Sales Force 的用戶群體多用PC端，因?yàn)榇蠖酁楹笈_操作，需要保證用戶在單屏能盡量方便完成所有操作，所以 Break Point 較少。而其他三家都有自己的硬件設(shè)備，為了設(shè)計(jì)能更好的服務(wù)于全端的設(shè)備，所以斷點(diǎn)個數(shù)較多。

我們再從 Break Point 的值來看，各個 Design System 的值都大相徑庭，這是因?yàn)橐m配獨(dú)特的產(chǎn)品尺寸。下面，我們來看一下主流設(shè)計(jì)軟件的默認(rèn)設(shè)備畫板尺寸：

我們可以得出下面結(jié)論：

• 0-599px 大致為手機(jī)適配
• 600-1023 大致為平板適配
• 1024-1439 大致為手提電腦適配
• 1440+ 大尺寸適配

（ps: 這是我個人常用的 Break Point 參數(shù)）

所以我們在定義 Break Point 前，需要看產(chǎn)品功能復(fù)雜度及該產(chǎn)品的用戶常用設(shè)備。如果用戶什么設(shè)備都用且所有功能都需要，那么恭喜你，全端適配響應(yīng)，Break Point 規(guī)則會很多，人生很難。反之，我們用戶常用設(shè)備少，我們可以減少斷點(diǎn)。

在定義 Break Point 的大小和具體值后，我們還需要定義在該 Break Point 范圍內(nèi)的規(guī)則，常見的包括: Column number, Gutter, Margin，Column size 等，甚至在有些時候，為了更好的呈現(xiàn)效果，我們更改某些 Font Size, Padding 等。比如，我們在 PC 端使用了64號字作為 Huge-title，但是在移動端64號字可能會效果很差，我們就需要在移動端的斷點(diǎn)范圍縮小字號，也許它可以是28號字。

回到我們 Break Point 的定義， Break Point 讓我們可以適配不同的設(shè)備，所以，在不同的 Break Point 下，我們需要靈活而統(tǒng)一的調(diào)整不同的參數(shù)，比如，絕對值變?yōu)橄鄬χ档鹊?。但是我們同樣需要考慮開發(fā)成本，盡量靠合理的交互避免復(fù)雜的規(guī)則產(chǎn)生，這一點(diǎn)以后有機(jī)會再寫。

在規(guī)則比較多的情況下，建議建立 Google Doc 制作表格，進(jìn)行規(guī)則管理。

五、Part 5: 畫板尺寸選擇 Frame

B 端項(xiàng)目在 PC 端的設(shè)計(jì)稿尺寸很多公司都不一樣，據(jù) Ant 統(tǒng)計(jì)，使用中臺系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366，個別系統(tǒng)還存在 1280 的顯示設(shè)備。

根據(jù)工作的經(jīng)驗(yàn)，直接說結(jié)論：

• 如果客戶多為政府、國企、醫(yī)院、學(xué)校等，這樣的機(jī)構(gòu)有很多古早屏，為了更好的適配，統(tǒng)一為：1280*800；
• 一般為1440*900，注意，需要去掉瀏覽器 Browser，所以一般設(shè)計(jì)區(qū)域?yàn)椋?440*820。

畫板統(tǒng)一是必要的，就像移動端的統(tǒng)一是一個道理，這會大大減少團(tuán)隊(duì)的溝通和理解成本。

六、Part 6: 寬高比 Aspect Ratios

在調(diào) Container 大小時，限制寬高比，這樣做將增強(qiáng)產(chǎn)品之間的統(tǒng)一感。我們可以制定幾個合適本產(chǎn)品的寬高比，然后制出表格，從表格中選擇一個縱橫比，然后根據(jù)需要乘以每個維度的基本單位以設(shè)置寬度和高度，保持縱向或橫向的比例。

如下寬高比是一個設(shè)計(jì)體統(tǒng)應(yīng)該有的：1:1，2:1，2:3，3:2，4:3，16:9

七、結(jié)尾

Grid System 內(nèi)容遠(yuǎn)比短短的這一篇文章要多，需要了解更多的朋友可以去看Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》。

本文由 @JQ Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議