网页设计包含哪些内容：视觉交互和加载速度都得算进去

上周三下午两点多，客户在微信上甩过来一句"你们网页设计包含哪些内容"，盯着屏幕看了快五分钟，愣是没打出一个完整的回复。不是不会，是真的懒得组织语言——那会刚改完第七版首页banner，眼睛发花，脑子里全是客户说的"能不能再大气一点"。

说起来好笑，第一次接私活的时候，以为网页设计就是把图片往里一丢，字体选好看点就完事了。后来有次半夜爬起来改稿，顺手打开同行的站，用取色器直接吸了人家按钮上的蓝，RGB值记在便签里，第二天照着调了一版。那个蓝客户居然说"就是这个感觉"。

网页设计里最先要搞定的视觉部分

视觉这块拆开说，其实就是版式、配色、字体三件事。版式上导航放顶部还是侧边，首屏留多少白，这些都是要反复调的。

配色不是随便挑三个颜色就往上堆，得考虑品牌色占比、辅助色在哪里用、中性色负责什么。字体更碎——标题用什么层级，正文行高设多少，按钮文字多大才看得清，手机上会不会换行换得莫名其妙。有次做一个企业站，正文用了思源黑体，行高设成1.6，结果在苹果机上显示偏宽，客户那边打开一看说字怎么挤成一团，又调了半天。

排版的时候偷过懒，直接抄了一个国外站点的栅格系统，12栏，gutter设成20px，套上去居然意外地合适。后来才反应过来，人家那套是经过无数次试错磨出来的，直接拿来用省了差不多两天的调版时间。

网页设计里看不见但躲不开的部分

交互这层最容易被客户忽略。点击按钮有没有反馈，鼠标移上去要不要变个色，页面滚动的时候会不会有视差效果，弹窗出现是淡入还是直接蹦出来。这些东西用户平时不会专门提，但做差了多半会来骂。有次做一个活动落地页，提交按钮点下去什么反应都没有，用户以为没提交成功，反复点，后来才知道是没加loading状态，后端接口慢了两秒，那两秒里页面像死了一样。按钮文字和背景的对比度也得过WCAG2.1的AA级，不然色弱用户很难看清。

响应式适配是另一个坑。同一个页面在1920的显示器上看着挺正常，切到手机上侧边导航直接变成一坨叠在一起。媒体查询断点设768px还是1024px，图片用srcset还是直接CSS缩放，这些都得一个个试。

加载速度也算。

最后一个晚上，把客户那版又过了一遍，图片压到WebP格式，首屏控制在1.5秒以内加载完。关电脑的时候窗外天都亮了，伸了个懒腰，脑子里突然冒出来——当初客户问的那个问题，到现在好像也没正儿八经回他。