网页设计方案书

去年帮一个做手工皮具的网页朋友改版官网，上线两周跳出率从78%降到41%。设计书没动任何交互特效，网页只做了一件事：把首页那张3MB的设计书轮播大图换成了一张87KB的静态图，旁边直接放价格和购买入口。网页用户打开网页的设计书前3秒决定了他会不会关掉，这3秒里加载速度比视觉冲击重要得多。网页

先想清楚页面要让人干什么

很多设计方案一上来就画线框图、设计书定配色，网页顺序反了。设计书你应该先回答一个问题：访客到这页是网页来干嘛的？如果是看产品参数，就把参数表放在首屏可见区域；如果是设计书来比价的，就把价格和竞品差异标清楚。网页我见过一个卖工业轴承的设计书网站，首页放了一段30秒的网页品牌情怀视频，结果后台数据显示平均观看时长只有2.3秒。后来换成一张带规格参数的对比表格，询盘量翻了四倍。

每页只设一个主要行动目标。要用户填表单，就别在表单旁边放“返回首页”的显眼按钮。要用户打电话，就把电话号码做成可点击的tel链接，别让人复制粘贴。

结构比样式先落地

用纸笔画三栏：顶部放什么、中间放什么、底部放什么。顶部通常是导航和核心行动入口，中间是内容主体，底部是信任背书和联系方式。别把重要信息塞在“关于我们”里，用户没耐心翻。

拿一个餐饮店官网举例。顶部：订座电话+菜单入口。中间：招牌菜图片+价格+食材来源。底部：地址地图+营业时间+食客评价截图。完事。不需要“公司简介”那一页，没人看。

移动端不是缩小版桌面

手机上拇指能轻松够到的区域是屏幕下半部分。把“立即购买”按钮放在顶部右侧，点击率会掉一半。字体最小14px，行高1.6以上，段落别超过三行。表单输入框在手机上要大，别让用户放大页面才能点中。

有个细节：手机键盘弹出时会遮住半个屏幕。如果你的表单字段靠下，用户填到一半发现输入框被挡住了，大概率直接退出。把表单放在页面中上部，或者用固定底部的提交栏。

颜色和字体别超过三套

主色一个，辅助色一个，强调色一个。字体同理：标题一套，正文一套。我见过一个页面用了五种字体、七种颜色，看起来像打翻的调色盘。用户记不住你的品牌，只记得“乱”。

对比度要够。浅灰字配白底，在阳光下根本看不清。用在线对比度检查工具过一遍，正文对比度至少4.5:1。

加载速度是设计的一部分

图片压缩到100KB以内，WebP格式优先。图标用SVG，别用PNG。第三方脚本能砍就砍，一个统计代码加一个客服插件就够了。别装一堆“智能推荐”“在线聊天”“弹窗收集”，用户还没看到内容就被弹窗烦走了。

我自己的博客之前装了五个插件，加载时间4.2秒。删到只剩两个，降到1.1秒，自然搜索流量一个月涨了60%。搜索引擎和用户一样，没耐心等。

留白不是浪费空间

段落之间空一行，模块之间空两行。别把每个像素都填满。留白让眼睛有休息的地方，也让重要内容跳出来。一个塞满文字和图片的页面，用户扫一眼就头疼，直接关掉。

最后说一句：设计方案书不是给你自己看的，是给开发和客户看的。写清楚每个模块的尺寸、间距、颜色值、字体大小，别写“大概”“差不多”“看着办”。模糊的描述到了开发手里就是灾难。

(责任编辑：焦点)