你熬了三个通宵做的网页设计稿，一传到手机就糊成马赛克？别觉得夸张，去年某公司实习生把1920尺寸设计图直接导出，结果移动端文字小得要用放大镜看。今天就带你扒开PS尺寸设置的门道，保准看完不再踩雷。
▬▬▬▬
三大要命误区
- 迷信1920全屏（实际显示区域只有1440左右）
- 忘记留安全边距（内容被浏览器工具栏吃掉一截）
- 用72ppi做4K屏设计（导出图片全是锯齿边）
有个做电商详情页的妹子跟我哭诉，她按1280宽度做的设计，在苹果笔记本上显示直接少了两栏商品。后来发现现在13寸MacBook分辨率都飙到2560了，这尺寸设置就跟穿错码鞋子似的。
▬▬▬▬
黄金尺寸对照表
► 电脑端：1440px宽度+1200内容区（留240给滚动侧边栏）
► 平板端：768px宽度+650内容区（上下各留60空白）
► 手机端：375px宽度起步（别傻傻用320了，现在手机都是全面屏）
重点来了：新建文档时把分辨率调到144ppi，这是兼顾清晰度和文件大小的甜点值。你猜怎么着？某设计平台统计显示，用这个参数的设计师，返工率比用72ppi的低47%。
▬▬▬▬
自适应神器
装个蓝湖插件（自动生成多端预览）
开启智能参考线（Alt+Ctrl+；这个组合键能救命）
用好画板工具（一个文件塞进三种尺寸方案）
上周有个小伙儿接了个企业站私单，靠画板功能同时做PC和移动端设计，交稿时间直接砍半。客户验收时惊了："你这设计图咋跟变魔术似的，手机电脑看着都合适？"
▬▬▬▬
出血位怎么留
电脑端左右各加80px安全区（防止内容被浏览器插件遮挡）
手机端顶部留44px（给iOS的状态栏腾地方）
底部导航栏区域高度别小于98px（成年人拇指平均宽度）
说个真实案例：某教育平台把登录按钮放在手机端底部，结果用户总误触到iOS的Home横条。后来把按钮上移20px，注册转化率立马上涨13%。这就跟停车入库似的，多留半米就能避免剐蹭。
▬▬▬▬
字体大小玄机
电脑正文用16px起步（小于这个值老年人看着费劲）
手机标题敢放到32px（全面屏时代不怕字大）
行高设1.5倍绝对安全（1.2倍太挤，1.8倍又浪费空间）
有个做医疗网站的设计师不信邪，非用14px做正文。结果用户平均阅读时长只有23秒，后来调到16px，直接翻倍到47秒。这差距就跟老花镜度数配准了似的，立马清晰。
▬▬▬▬
个人觉得尺寸设置就像炒菜放盐，宁可开始少加点，后面慢慢调整。千万别一上来就怼满屏尺寸，那跟炒菜先倒半袋盐一个道理。记住，好设计是改出来的，我见过最牛的设计师，一个首页尺寸方案能迭代28稿。你要是头铁非要一次到位，等着甲方的修改意见砸晕你吧。
