做网站设计最烦人的就是尺寸不对，改起来想砸电脑。这篇直接告诉你怎么设尺寸、怎么留白、怎么适配手机，照着做，少熬两个大夜。
咱干这行久了，发现很多新人（包括当年的我）最容易在尺寸上栽跟头。总想着把屏幕塞满，结果客户一看，这啥玩意儿？手机上看全变形了。其实ps做网站首页规范尺寸这事儿，真没那么多玄学，核心就两点：桌面端看体验，移动端看兼容。别听那些专家扯什么1920宽是黄金比例，那是十年前的说法了。现在主流显示器虽然大，但浏览器窗口哪能拉满全屏？所以，咱们得务实。
先说桌面端。我现在一般习惯把画布设成1440px或者1920px宽，高度不设死，因为网页是滚动的。但要注意，核心内容区（也就是用户第一眼能看到、不用滚动就能看到的部分）最好控制在1080px以内。为啥？因为很多笔记本屏幕也就1366宽，你搞个1920的图，两边留白太多显得空，内容挤在一起又显得乱。我在PS里建文件时，宽度直接定1440，背景色用浅灰，这样看着不刺眼，也能看清边界。记住，左边距和右边距至少留80px到100px，别把内容贴边，那样看着像山寨网站，土气得很。
再说说那个让人头秃的移动端。现在百分之八十的流量来自手机，你桌面端做得再花哨，手机上挤成一团也是白搭。所以，ps做网站首页规范尺寸的时候，你得心里有杆秤。手机端的宽度，建议直接按375px或者390px来设计。别嫌小，手机屏幕就这么大。你在PS里新建一个390宽的画布，把字体设大点，行距拉宽点。很多设计师喜欢把字号设成12px、14px，这在电脑上看着精致，在手机上就是蚂蚁字，用户得眯着眼看，谁受得了？手机端正文至少16px起步，按钮高度至少44px，手指头按着才舒服。
还有啊，别忽视栅格系统。PS里记得先拉参考线。我习惯用12栏栅格，每栏80px，间隙20px。这样排版出来的东西，看着就整齐，有节奏感。比如导航栏，左边Logo，右边菜单，中间留白，用栅格一卡，位置绝对错不了。要是没栅格，全靠肉眼对齐，最后导出给前端，人家肯定骂你。前端兄弟不是神仙，你给的图要是没对齐，他写代码的时候也得猜，猜错了还得返工，大家都不容易。
说到这，还得提一嘴切图。很多新人做完设计，直接截个屏发给开发，这绝对不行。你得用PS的切片工具，或者导出为SVG、PNG。特别是图标，一定要用矢量或者高清PNG，不然放大就糊，显得特别廉价。还有，颜色模式一定要选RGB，别选CMYK，那是印刷用的，网页上显示出来颜色会灰蒙蒙的，看着就不精神。
最后，别太纠结像素级的完美。屏幕分辨率千奇百怪，iPhone、安卓、Windows、Mac，每个都不一样。你做到1440宽适配主流，390宽适配主流手机，基本就稳了。剩下的，让前端去用CSS媒体查询去微调。咱们设计师的任务是提供清晰的视觉规范和布局逻辑，而不是去管每一行代码怎么写。
总之，ps做网站首页规范尺寸，不是为了炫技，是为了好用。你想想，要是你自己打开一个网站，字小得看不清，图都变形了，你是不是也想关掉？设计就是为人服务的，别整那些虚的。按我说的步骤，先定桌面端1440，再定移动端390，加上栅格参考线，颜色RGB，基本就能交差了。剩下的，就是多看看别人的好案例，多练练手，手感自然就来了。别怕犯错，改就是了，反正头发还多，经得起折腾。
