晚上十点，美工小陈盯着PS里叠了二十多个图层的首页设计，客户突然在微信群里甩来新需求："再加个动态瀑布流效果"。血压飙升的瞬间，电脑右下角弹出提示——"未保存文件可能丢失"。别慌，我这就把在南宁干了八年网页设计的老张的绝活掏给你。
第一步：把乱成麻的需求理清楚
上周五民族大道某广告公司就栽在这：客户说要"高大上"，设计师理解成极简风，结果交付时甲方暴怒。教你个笨但管用的招数——打开手机录音，让客户对着话筒说三个竞品网站。然后上SimilarWeb查这些网站的配色方案、栏目结构，比甲方口述靠谱十倍。
救命三件套必须备齐
- 网页骨架急救包：准备三套现成布局（单栏式、F型、Z型），南宁会展中心那个爆款美食网站，其实就是用现成的F型布局改的
- 配色防翻车指南：记住这个公式：主色取自企业logo，辅助色用Adobe Color的"类比色"模式，警示色永远用#A4A
- 字体安全清单：思源黑体做标题，阿里巴巴普惠体当正文，文艺范的用站酷酷黑，别碰华文琥珀这类死亡字体
说到具体操作，青秀区有个工作室的做法很聪明：他们做餐饮类网页时，会把菜品图切成510px宽，用TinyPNG压到200KB以内，这样加载速度能控制在1.2秒。记住这几个数字：导航栏高度60px、侧边栏宽度280px、按钮尺寸最小44×44px，这是南宁用户最舒服的点击热区。
甲方临时加需求怎么破
上个月星湖路某公司遇到的情况你肯定熟悉——网站都快上线了，客户非要加个"领导致辞"栏目。这时候别动框架，直接在页面底部加个悬浮按钮，点击弹出模态框。既不影响整体结构，又能快速满足需求，改只要半小时。
要是遇到技术难题，比如客户非要实现卡片翻转效果，别急着写CSS。去Codepen搜"card flip"，找个点赞过千的代码片段，改改颜色和尺寸就能用。注意要加上transform-style: preserve-3d这个属性，不然在安卓机上会穿帮。
小编观点：见过太多设计师在响应式布局上栽跟头，其实有个取巧的办法——先用Bootstrap搭框架，再用Chrome开发者工具的Device Mode调试。重点看375px（iPhone）和1440px（PC）这两个断点，中间部分让系统自适应，省下的时间够你改三稿了。
