看别人的页面，最容易犯的错是眼睛先被配色和动效勾走，源码一眼不看。可真正决定这个页面值不值得学的，是它的HTML怎么组织内容。网页设计欣赏这件事，说到底不是收藏好看的站，是拿能验收的标准去拆别人的页面，再把结论改回自己的HTML。MDN把HTML定为内容和结构那一层，CSS只管外观和表现，还写明视觉上的重排改不了内容的逻辑顺序。
对做出海站的人来说，这件事的价值不在审美，在少走弯路。页面结构一开始写对，后面加内容、改版、让屏幕阅读器和键盘用户能顺着读下去，都省事。页面长得漂亮、源码一团，改起来比重做还贵。这些站能不能在你所在的网络环境打开，以官方为准，这篇只讲页面打开之后怎么看。
- 这是什么：看别人的页面，把看到的东西转成自己能落地的参考，只讲看、筛、转三步。
- 官方怎么说：MDN把HTML定为内容层、CSS为表现层。
- 怎么做：先定四条对照标准，再看案例，再回源改自己的HTML。
- 验收数字：只有对比度比值和字号门槛，没有价格和工期。
这篇讲的是怎么把看案例这件事做出结果，不是列一堆网站让你收藏。
本文目录
网页设计欣赏到底在「欣赏」什么
HTML是Web最基础的构建块，它定义Web内容的意义和结构。HTML之外的技术一般用来描述页面的外观和呈现，那是CSS；功能和行为交给JavaScript。这三层分开，是为了让内容在没有样式的时候也能读。
无障碍在Web开发里的意思，是让尽可能多的人能用网站，即使这些人的能力在某种程度上受限。Web从根上就是为所有人设计的，不论硬件、软件、语言、位置或能力。这个说法不是口号，它决定了你看案例时该先看哪一层。
看一个页面，先看它用什么元素组织内容。标题是不是标题标签，导航是不是导航标签，列表是不是列表，按钮是不是按钮。这层东西决定屏幕阅读器怎么读、Tab键怎么走。看完这层，再看它用CSS怎么摆位置。摆得再花，底层顺序没变。
MDN里有一句很实在的话，大量Web内容只要确保正确的HTML元素始终用在正确目的上，就能变得可访问。CSS和JavaScript用得对能带来可访问的体验，用错会显著损害无障碍。你看案例时判断一个页面值不值得学，先看它有没有做到这一点。
看页面习惯先翻源码，再看它长什么样。这个顺序能省掉很多后来返工的活。看别人的设计也一样，先看内容怎么组织，再看配色和动效。
想找国外的页面看，可以从国际设计网站这类入口进。进去之后按上面三层去看，不要只存图。
看之前先定 4 条对照标准，不然看再多站也白看
看案例之前先在纸上写下四条，看到任何页面都拿这四条过一遍。过不了的页面，只记配色或某一个小交互，不记结构。四条不写下来，看得越多越乱。
源文档结构是否良好、可访问
看什么：右键看源码，或者在开发者工具的元素面板里看。标题层级是不是连续，导航有没有用导航标签，正文是不是一段段段落，列表是不是列表，按钮是不是按钮。
为什么：推荐做法是从一份结构良好、可访问的源文档开始，这通常也能给最小屏幕设备一个好结构。底层源码控制语音朗读和Tab顺序，CSS改不了这件事。
看到不对怎么记：记下这个页面用了几级标题、导航是不是一堆链接包在普通容器里、有没有拿普通容器当按钮用。记这三样就够，不用抄整页代码。
布局是一维还是二维
看什么：导航横排、卡片列表这种一行或一列排开的，是一维。整页分栏、卡片跨行跨列的，是二维。
为什么：flexbox一般适合在一维上排布一组项目或控制项目间距。二维的网格排布用grid。分清楚这一点，你才知道该学它的哪段CSS。
看到不对怎么记：记这个页面是靠源码顺序排的，还是靠CSS把元素挪了位置。规范写明，order和grid定位只能用于视觉重排，不能用于逻辑重排，拿它们做逻辑重排的样式表不合规。看到有人这么干，记下来，别照搬。
前景背景对比度
看什么：正文文字和背景的颜色关系，按钮文字和按钮底色，图标和它所在的底色。
为什么：选配色时应该选前景与背景对比度良好的颜色，在设计约束内尽量做到最好，理想是AAA，至少AA。酷炫设计如果让人读不了内容，这个设计就没有价值。
看到不对怎么记：把前景色值和背景色值抄下来，回头用工具算比值。不要用眼睛判断，眼睛会被屏幕和环境光骗。
Tab 顺序跟视觉顺序一不一致
看什么：打开页面，按Tab键从头走到尾，看焦点是不是按你眼睛看到的顺序走。
为什么：键盘可访问性是最低无障碍要求的一部分。视觉重排不改变默认遍历顺序，也不影响语音这类非视觉媒体里的顺序。
看到不对怎么记：出现从页面顶部突然跳到尾部，记下跳转发生在哪两个元素之间。这就是布局需要处理的信号。
三类渠道怎么用：参考站、案例站、灵感站各看什么
渠道本身不分好坏，用错地方才浪费时间。参考站给你判断依据，案例站给你成品线索，灵感站给你配色和版式意图。三类混着看，最后只剩一堆截图。
参考站看规范和文档
MDN Web Docs是免费使用的资源，用来记录开放Web技术，每月服务数百万读者。它的使命是给开发者提供在Web平台上轻松构建项目所需的信息。HTML怎么定义、CSS布局怎么用、无障碍要注意什么，那里都有。
看的时候手上记三样：这条规则管哪个元素、适用条件是什么、反例长什么样。参考站不给灵感，给的是你判断一个页面对不对的依据。
案例站看成品页面
案例站给的是别人做好的页面。看的时候记住一条，它只作线索，不当官方依据。页面上没写它为什么这么设计，就不要替它编原因。看到某个站流量好，也不能倒推说它的设计就是流量好的原因。
手上记三样：这个页面解决什么问题、它的源码结构大概什么样、哪一块能对上自己页面的结构。对不上的，只记配色。
灵感站看配色和版式意图
灵感站上的页面通常更重视觉。看的时候记三样：主色和背景是什么关系、版式想让人先看哪里、哪些元素是纯装饰。纯装饰的东西不进你的结构层。
三类看完，笔记里应该只有少数几条能进自己的页面，其余都是线索。线索多了不是坏事，但要分清哪条能落地。
从「看到」到「能用」的三步
看到的东西要变成自己页面上的改动，中间隔着一道筛。筛不过的，看再多也只是存网址。
- 定标准。把前面那四条写在一张纸上或文档开头，后面每看一个页面都拿它对照。这一步不做，看得越多越乱。
- 筛案例。按四条标准筛，留下能对上自己页面结构的。对不上的，只留配色或某一个小交互。
- 回源改HTML。先把源文档写成结构良好、可访问的文档，再用CSS在上面加布局。发现某个元素逻辑上该在那个位置，回HTML源码改，不要用grid重排。
第一步的回查很简单：四条标准里如果有一条你写不出具体判断，说明还没看懂，回去看MDN对应那页。标准不是背下来的，是能拿来判断的。
第二步筛完，如果笔记里剩下十几个案例，说明筛得太松。再按「能不能对上自己页面的结构」砍一遍。留下的每个案例，你应该能说清楚要学它的哪一层。
第三步改完，按Tab键走一遍。看有没有从页面顶部跳到尾部，看焦点顺序跟视觉顺序是不是一致。不一致就回源码改元素顺序，不要在CSS里挪。规范在这件事上的建议也是回源码改，而不是用grid重排。
作品集页单独说一下。这类页面最容易犯的错，是把项目标题做成普通容器，把作品缩略图用grid排成网格之后Tab顺序跟视觉不一致。看别人的作品集，先看项目列表是不是列表标签，每个项目标题是不是标题标签，再看它怎么排。个人页内容少，结构清楚比花哨重要。
需要配图时，PSD素材免费网站这类站能省去找素材的时间。但素材是表现层，别让它替你做结构决定。
验收要用的数字：对比度和字号门槛
看完案例，真正要落到自己页面上的数字只有对比度比值和字号门槛。价格和工期这类数字，页面正文里没有，也不需要在这里列。
| 内容类型 | AA最低 | AAA增强 |
|---|---|---|
| 正文文字 | 4.5:1 | 7:1 |
| 大号文字（比正文大120-150%） | 3:1 | 4.5:1 |
| 活动用户界面组件和图标、图表等图形 | 3:1 | 未定义 |
正文最松也要到4.5比1，大号文字和按钮图标可以低一档。大号文字的定义是至少18pt，或者14pt加粗。到了这个尺寸，门槛从4.5比1降到3比1。
WCAG里对应的是1.4.3和1.4.11两条。1.4.3管标题或更大文字的3比1，1.4.11管用户界面组件和图形对象的最低3比1。数字不用记全，记住正文和图形的差别就行。
这些比值不适用于非活动控件、标识、纯装饰文字这类附带性文字。别拿装饰文字当借口，也别把正文往这条里塞。
配图时注意，图片上叠加的文字也要过对比度。从Pexels图库这类免费图库找图，选那些本身留了文字空间的，比事后加一层深色遮罩省事。
四个常见误区和回查顺序
误区一：用grid或flex做逻辑重排。结论是视觉上换了位置，Tab顺序没换，键盘用户会从页面顶部突然跳到尾部。依据是order和grid定位不影响非视觉媒体里的顺序，视觉重排也不改变默认遍历顺序。
误区二：为了当grid项目把标记拍平。结论是把列表拆成一堆普通容器去凑网格，结构和语义一起丢了。依据是grid布局里专门提醒过这种拍平标记的倾向。
误区三：只追酷炫配色。结论是前景背景对比不足，内容读不了，设计就白做。依据很直接，用户读不了你的内容，这个设计就没有价值。
误区四：用JavaScript组件模仿桌面界面。结论是看起来像，标记里的语义信息不够，辅助技术用不了。依据是这类客户端组件通常没有足够的语义信息让辅助技术读懂。
回查顺序固定：先看源文档结构是否良好，再用CSS加布局，最后用Tab键走一遍验证顺序。这个顺序反了，你会一直在CSS里打补丁。
还有一件事，某些视觉模式会让有光敏性癫痫、前庭障碍等问题的人出现身体症状。看案例时留意这类动效，别因为好看就照搬。
AI 能帮哪几步、哪三件必须自己动手
AI在这件事里能省的是整理和对照的工夫，替不了你在浏览器里走一遍。下面这几步可以让它先做，你验收。
先把你看中的案例页面的HTML结构贴给AI，让它按内容层和表现层拆一遍，指出哪些是语义标签、哪些是纯div堆出来的。再让它按对比度表逐条核对案例配色，列出不达标的组合。接着让它把案例里的布局意图翻译成flexbox或grid的写法建议，并标注哪些属于视觉重排、哪些会变成逻辑重排。最后让它生成一份Tab键走查清单，供你手动在浏览器里逐项过。
下面三条提示词是本文给的示例，可以直接复制去改。
「下面是一个网页的HTML结构，请按内容层和表现层拆开，指出哪些元素承担语义、哪些只是布局容器，并标出可能影响屏幕阅读器顺序的地方：[粘贴HTML]」
「这是案例页的前景和背景色值，请按WCAG对比度要求逐对计算比值，正文按4.5:1、大号文字按3:1、图标图形按3:1判断是否达标，列成表格：[粘贴色值]」
「我想在自己的页面复现这个布局意图，请给出flexbox和grid两种写法，并说明每种写法下Tab顺序会不会和视觉顺序不一致：[描述布局]」
必须你自己动手的有三件。一，在浏览器里打开自己的页面，按Tab键从头走到尾，看焦点顺序是否和视觉顺序一致，出现从顶部跳到尾部就回源码改HTML顺序。二，在Firefox开发者工具的Accessibility inspector里点Check for accessibility issues，看对比度报错项，决定改色还是改字号。三，把窗口拖小，或者用响应式设计视图按手机宽度看一遍，决定断点加在哪。
这三件没人能替你做，因为结果取决于你自己的页面长什么样。把笔记整理成稿子这类活，猎者出海的AI Agent能接写文章这一环，按大纲成稿、做本地化，判断哪块该改还是你自己来。
站内还有几篇工具类文章可以配套看：平面设计网、工业设计网站分类、Canva可画。
常见问题
MDN 是做什么的
它是免费使用、记录开放Web技术的资源，每月服务数百万读者。看HTML、CSS、无障碍的规则都可以从那里开始。
网页无障碍到底指什么
指让尽可能多的人能用网站，即使这些人的能力在某种程度上受限。Web从设计上就是给所有人用的，不分硬件、软件、语言、位置或能力。
对比度比值对哪些文字不适用
不适用于非活动控件、标识、纯装饰文字这类附带性文字。正文和大号文字该按表格里的比值走，别拿装饰文字当借口。
大号文字按什么标准算
至少18pt，或14pt加粗。到了这个尺寸，对比度门槛可以从4.5比1降到3比1。
看案例这件事，最后拼的不是你存了多少网址，是你每次看完能不能在自己的HTML里落下一处改动。四条标准用顺了，一个页面扫一眼就知道值不值得学。猎者出海的AI Agent能接掉整理和成稿，判断哪块该改还是你自己来。
发表评论