扁平化设计网站是什么？用模板做出一页扁平化风格的步骤

扁平化设计网站最容易出问题的地方，不在设计，在「值」写在哪。页面是纯色块加留白，没有阴影和渐变去遮，颜色差一点、字号乱一档，整页就散了。所以这套东西能不能做稳，取决于配色、字号、间距是不是写在一个地方统一管。落到能动手的层面就三件事：用区块编辑器拼内容，用theme.json统一配色、字号和布局，设计稿从Figma导进来。

对出海做站的人来说，值钱的地方在改动的成本。配色和字号写在一个文件里，换一个主色就是改几个值；散在CSS和每个区块的设置里，改一次要翻一遍。页面上线之后改配色、换字号是躲不掉的事。

• 扁平化是一套视觉风格，不是建站平台，也不是某个主题的名字。
• 能操作的路子是两个：区块编辑器里拼内容，theme.json里定配色、字号、布局。
• WordPress下载页标的是Free和Open，当前版本7.1.4。
• 最容易踩的坑，是theme.json里开了区块本身不支持的功能，写了也不生效。

这篇讲的是从判断风格开始，到把配色、字号、图标定下来，再按五步做出一页，最后是数字门槛和改不动时怎么回查。

这些工具在中国大陆能不能正常用，以官方说明为准。手边缺工具的，其他工具那份清单可以先过一遍。

扁平化设计网站是什么，和普通模板站差在哪

普通模板站和它的差别在约束。模板站给你几十个模块、十几套配色，随便挑，挑完拼在一起，每个模块都在抢眼；扁平化是自己先把规则定死，几个颜色、几档字号、一套图标，然后把内容往里填。规则越少，页面越统一。

这个差别会一路影响到后台。模板站拼的是模块样式，扁平化拼的是值：颜色值、字号值、间距值。值写在一个地方，全站跟着变；值散在每一页的设置里，改一次就要翻一遍。

「扁平化设计」在WordPress这套体系里对应什么

它是设计里的叫法，落到WordPress里，对应的是两组东西：区块编辑器和主题配置。官方把区块编辑器定位成建站与发布的现代范式，用一套模块化的区块来组织和排版内容。

区块是段落、标题、媒体、嵌入这类独立元素，每个区块有单独的编辑和格式控件。你在后台看到的一条线、一个按钮、一张图，都是一个区块。所谓做一页扁平化风格，落到操作上就是把区块按顺序排好，再统一它们的颜色和字号。

扁平化风格落到页面上，靠的是哪三样东西

字号层级管顺序。一页里只有大标题、小标题、正文三档，读者一眼就能分出哪句是重点。档位一多，页面看着就吵。

图标管细节。同一套线条、同一个粗细、同一个尺寸，图标才是装饰；混着用，图标就变成噪音。

这三样在WordPress里都有落点：颜色写在theme.json的color.palette里，字号写在typography.fontSizes里，版心宽度写在layout里。写一次，编辑器的取色器和排版选项里都能选到，前台和后台用的是同一套值。

区块主题和经典主题，做扁平化该选哪个

区块主题从WordPress5.9起可用，主要用HTML加一个主题配置文件搭出来，完全由区块组成，在站点编辑器里能改站点的所有部分。经典主题主要用PHP、JavaScript和CSS，没有版本限制，改外观要去动代码或者主题自己的设置页。

要整页都在后台改，选区块主题。只换一套颜色、别的不动，经典主题也能干，但每改一次颜色都要进CSS。主题手册开头的建议是把两类都读一遍再决定做哪一类，照着做能省掉一次返工。

版式怎么排、格子怎么对齐是另一件事，网格与层级排版里讲得更细。

做之前先定三件事：配色、字号、图标

这三件事定完再动手，后面每一步都省事。定的时候不要在编辑器里试，先写下来：几个颜色、几档字号、图标用哪一套。

配色怎么定：先定两个主色，再交给theme.json的色板

两个主色加一个背景色、一个文字色，四个值足够撑起一页。扁平化靠色块分块，颜色一多，块和块之间的边界就得靠边框和阴影补，风格就散了。真要第三个颜色，用在按钮和链接上，别铺满整块。

色板写在theme.json的color.palette里，每一项给一个name和一个slug，后台取色器里就能直接点到。官方写的机制是，主题声明的预设色板、字号、渐变会转成CSS自定义属性，同时入队到前端和编辑器。

这句话的意思很直白：后台取色器里点到的那个颜色，和前台渲染出来的颜色是同一个变量，不会出现选了A色显示B色的事。

字号与间距定几档

字号写进typography.fontSizes。版心宽度由layout里的contentSize和wideSize两个值定，默认值在第4节的表里，要改就改这两个值，别在每个区块上单独填宽度。

间距单位在theme.json里可选这五个：

"units": [ "px", "em", "rem", "vh", "vw" ]

选定一组之后，全站的间距按这个单位走。px好算，rem跟着浏览器的字号设置缩放，手机和桌面上更稳。要兼顾大字模式就留rem，只在个别地方用px。

图标从哪来、授权怎么读

Figma Buzz能访问模板、插入内容、团队库以及Figma Community的精选库。

授权里最容易被忽略的是美术素材。要进WordPress的商业GPL主题列表，门槛是分发100%GPL的主题，包括美术素材和CSS。也就是说GPL管的不只是代码，模板里带的图标、插图、样式表都在里面。GPL不要求一切必须零成本，只要求你收到软件的时候，它不限制你使用的自由。

授权条款一条一条对，尤其是图标和照片这两类。

用模板和工具做出一页扁平化风格：五步

起点只有两个：从空白画布开始，或者挑一个主题，然后定制细节。下面五步就是照这句话拆的，一步一个动作，做完能看到东西。

1. 选起点。从空白画布开始，或者挑一个主题。主题目录里能按区块主题筛，也能按Accessibility ready这类特性筛，筛出来的数量在第4节的表里。装完先确认一件事：区块主题能在站点编辑器里编辑站点所有部分，经典主题不行。
2. 用插入器把区块按顺序放进画布。区块编辑器就三块：插入器、内容画布、设置面板。插入器负责加区块，点中某个区块，设置面板显示这个区块自己的设置；什么都不选，设置面板显示整篇文章的设置。区块是独立元素，标题的字号、段落的行高、按钮的颜色各在各的控件里，改一个不会带着别的变。某个区块加不进去，或者加进去了找不到想要的选项，先看这个区块本身支不支持那项功能。
3. 用theme.json统一配色、字号、布局。文件放在主题目录根部，version写3，这个格式是WordPress6.6引入的。官方把theme.json当成配置区块编辑器设置的规范方式，用来替代一堆主题支持标记，好处是减少入队CSS的数量，避免优先级战争。它还能决定哪些定制项对用户开放、哪些藏起来，编辑器的默认布局也在里面定。回查顺序：改了没生效，先确认theme.json里真有这条设置。有设置的时候它优先于add_theme_support，代码里声明过的值会被盖掉。
4. 从Figma把设计稿或素材导进来。文件浏览器里打开Create new下拉菜单选Import，点Import from computer，选文件点Open，再点Done；也可以直接从电脑把文件拖进文件浏览器。能导的格式有.sketch、.fig、.jam、.deck、.buzz、.site、.make、PNG、JPG、.pptx，静态图片、GIF和视频还能直接导进Figma Design文件。导完文字缺了、图层少了，换个文件类型重导，文件大的要等几秒。
5. 前台逐屏核对对比度和可读性。保存不等于做完，到前台把每一屏过一遍：文字压在色块上清不清楚、按钮和背景分不分得开、窄屏上一行字会不会挤成一团。官方FAQ里有一条专门问样式在浏览器里更新为什么要等这么久，说明样式更新有延迟，改完没变化先等一会儿再刷新，别急着推翻重做。看清楚之后再决定这个值保留还是换掉。

第4步之前，版式先在纸上定下来会快很多，版式设计网站推荐里那批工具就是干这个的。

Figma导入的权限分三种情况：任何人都能把文件导进自己的草稿；导进草稿之外的共享文件夹，Starter和Professional计划要目标文件夹的编辑权限；Organization和Enterprise计划还要加一个付费席位。所以团队共用一份设计稿的时候，先确认你要放进去的那个文件夹，你有没有编辑权限。

数字和限制：做这一页会用到的门槛

这些数不用背，动手前扫一眼，能少返工两次。版本号对不上，后面的设置项就可能不存在。

表里几个数说清楚用法。WordPress下载页上标的是Free和Open，运行环境那行写的是「推荐」，不是硬性要求。theme.json的version写错，新格式的设置项不认，写进去等于没写。主题目录里那八千多个是主题总数，筛区块主题之后会少很多，别拿总数当候选量。

配色定完，随手要出一张封面图或者配色板的话，海报设计网站对比里那几家可以先过一遍。

常见误区：theme.json开了却没反应，问题出在哪

后台改不动，多数时候是设置根本没人接收。按下面三条顺序查，比一遍遍清缓存快。

区块没实现的功能，theme.json开不了

官方写明，区块本身没实现的功能，主题在theme.json里怎么写都开不了。首字下沉这种效果就是例子，区块没实现，主题怎么写都开不了。

背后的规则是，并非所有设置对所有区块都相关。设置区给主题的是一个开或关的机制，具体功能要区块自己去支持。所以排查顺序是：先看这个区块支不支持那项功能，再看theme.json里的层级写没写对，最后看是不是被别处的设置盖住。三步都过了还没反应，换掉这个功能，别在上面耗。

以为外观工具默认开着

appearanceTools是一个布尔设置，默认值是false。不显式打开它，后台就没有背景、边框、链接颜色、尺寸、间距、行高这些控件，你在theme.json里配的值看着像没生效，实际是根本没有能改的入口。

动手的时候把它写成true，再回后台看那些控件有没有出来。出来了再调值，出不来就回头查主题有没有读theme.json。

照搬案例和模板导致同质化

对照案例的时候按标准筛，不整页照搬。要看的是别人怎么用留白分块、怎么把字号压到三档，不是把颜色和间距一起复制过来。网页设计案例筛选里给了挑案例的口径，照着筛比随手存图强。

AI能帮哪几步，哪几步必须人来做

这一页的活分两类：整理、起草、对照清单，能交给AI；判断和验收，得自己做。

AI能帮的三步：

• 把这一页要放的区块按顺序列成一张表，标题、段落、图片、按钮、分隔线各占一行，写明用途。你拿着这张表去插入器里一条条加，不会加着加着忘了结构。
• 按theme.json的settings结构，把配色、字号、间距整理成一份能直接粘的JSON草稿。结构它熟，颜色值还得你给。
• 把从Figma导出的文件清单，对着官方支持的文件类型一条条核，哪些能直接导、哪些要先转格式，列成两列。

下面三条提示词是本文给的示例，不是官方模板，复制过去把数值改成自己的就能用。

• 「按WordPress theme.json version 3的结构，给我一份settings草稿，包含color.palette两个颜色、typography.fontSizes三档、layout.contentSize 800px与wideSize 1000px，只输出JSON。」
• 「把下面这页的区块按插入顺序列成表：标题、段落、图片、按钮、分隔线，每行写区块名和用途，不要写代码。」
• 「对照Figma官方支持导入的文件类型列表，检查我这份文件清单里哪些能直接导入文件浏览器，哪些需要先转格式。」

必须人做的三件事。先说最关键的，进后台的站点编辑器，把插入器里能加的区块过一遍，加不上、没有对应控件的，从清单里删掉，不要硬留。第二，theme.json里色值和字号的具体数字自己填，填完到前台看文字和背景的实际对比，决定这个值留还是换。第三，在Figma的文件浏览器点Create new选Import，导完打开文件看图层和文字全不全，不全就换文件类型重导。

整理资料、对照官方文档这种活，猎者出海的AI Agent能接一段：把theme.json的设置项和Figma支持的文件类型对着原文列成表，人只看哪几条对不上。判断和验收还是人的事，它不替你做决定。

软件预算不想花在工具上，设计软件免费档里能先挑一个画版式。

常见问题

扁平化设计网站一定要用WordPress吗

不一定。扁平化是视觉风格，任何能写HTML和CSS的方式都能做出来。这篇给的是WordPress这条路，因为区块编辑器和theme.json的每一步都有官方说明可查，出问题能回去对。

theme.json和add_theme_support冲突时听谁的

听theme.json。只要theme.json里有设置，它的值就优先于代码里用add_theme_support声明的值。改不动的时候先翻theme.json，别急着在functions.php里加东西。

用户自己改的链接颜色，优先级怎么算

官方FAQ里有一条专讲用户提供的链接颜色的优先级，遇到链接颜色不按你定的显示，先去对那一条。

blockGap是什么，怎么用

官方FAQ里有单独一条讲blockGap是什么、怎么用。

Figma导入要什么权限，免费计划能导吗

导进自己的草稿没有额外要求，任何人都可以。要放进草稿之外的共享文件夹，Starter和Professional计划需要那个文件夹的编辑权限，Organization和Enterprise还要付费席位。

一页做完，第二页、第三页就是复制。规则定不住的站，每加一页都像重做一次；颜色、字号、图标这三样定死了，一页扁平化风格页面就是一个小时的事。