设计花点的网站平面图

做网站平面图，花点不是随手撒的装饰。它更像页面上的视觉锚点，用户扫一眼先落在哪儿、记住什么、愿不愿意往下点，平面图阶段就该定下来。很多人把花点理解成放几张漂亮图、加几个图标，结果上线后页面挺热闹，用户却找不到重点。说白了，花点是替内容服务的，不是替设计师刷存在感的。

我习惯在画平面图前先问一句：这个页面只能留一个记忆点，留哪儿？答案通常不是Logo，也不是导航，而是首屏里最能说明“你是干什么”的那块内容。比如卖课的页面，主花点可以是课程封面加一句结果承诺；做工具的页面，主花点可能是产品界面截图加一个试用按钮。这个主花点要占首屏面积的两三成，超过四成就会压内容，低于一成又容易被忽略。首屏高度按桌面浏览器可视区700到800像素来算，移动端按650到750像素来算，主花点别掉到折叠线以下。

平面图上标花点，得标清楚四件事：位置、尺寸、层级、交互。位置不是“大概放中间”，而是在12列栅格里落到具体列。桌面内容区常用1200像素，槽宽24像素，左右边距80像素；移动端边距16像素，单列排。主花点放在首屏左上到中上区域比较稳，因为用户浏览网页时眼动常呈F型，左上和横向扫视区先被看到。但按钮别跟着挤在左上，桌面端放主花点右侧或下方，移动端放拇指容易够到的下半屏。按钮点击区至少44乘44像素，这是Apple人机指南里的老建议，WCAG 2.5.5也要求目标尺寸至少24乘24 CSS像素，实际做的时候按44像素更保险。

花点还分主次。主花点一个屏最多两处，副花点可以是数据、客户评价、小图标或背景纹理，作用是托住主花点，不是抢戏。平面图上用灰度稿验证最有效：把颜色全去掉，只看黑白灰，主花点还能不能第一眼跳出来。跳不出来，说明尺寸或对比不够；跳出来但旁边东西也在喊，说明副花点太多。正文对比度按WCAG 4.5比1，大文本按3比1，这个数平面图阶段就要标在色卡旁边，别等开发完再补。

花点的“花”不等于花哨。背景纹理、渐变、插画都能用，但要给它们定好边界。比如主视觉区允许一张大图，卡片区就用统一圆角和阴影，图标线性就全线性，别一半面性一半线性。平面图上可以画三个层级：一级花点用实心色块标，二级用描边，三级用浅灰。这样开发拿到图就知道哪里该给动效、哪里该留白。动效也别贪，首屏主花点做一个轻微入场就够了，滚动触发的花点放在第二屏，别让用户还没看清内容就先看动画。

移动端的花点要重新排，不是把桌面图缩小。桌面左右并排的主花点和文案，移动端通常改成上图下文，主花点放上半屏，按钮紧跟文案，别让用户滑两屏才看到行动点。加载速度也得在平面图阶段考虑，主花点如果是大图，标清楚压缩后大小，首屏图片尽量控制在200KB以内。Google 2016年的移动端研究提过，加载超过3秒，53%的访问会离开。花点再好看，等不出来也白搭。

最后拿平面图做一次五秒测试：给同事看五秒，问记住什么、下一步会点哪。如果答案和主花点一致，这版平面图就差不多了；如果大家记住的是背景图或某个小图标，回去改层级。花点设计不是把页面填满，而是让用户在该看的地方多看一秒。平面图阶段把这件事定准，后面视觉和开发都省劲。