今日分享一些实用技巧，前些日子承接了一项PC端网页设计的项目，在着手之前，我专门研究了如何运用栅格化系统来开展网页设计工作。

提及一些与主题无关的话题，在我早年从事电商设计工作时，我们通常会将店铺的版心宽度设置为980像素，这一设计可以确保无论用户使用何种尺寸的电脑，都能清晰地看到页面中央的内容。

栅格化系统应用广泛，不仅网页设计领域可利用，平面设计、宣传册、宣传单等方面同样适用。此外，UI界面设计亦能借助其优势。之所以采用栅格化系统，目的在于使设计作品显得更为规整、整洁且富有条理。

在着手这个项目之前，我惯常采取的是绘制辅助线的手段来进行设计。或许很多人会认为这种方法显得不够专业，确实如此，不过它所实现的效果并未有所不同，只是在细节处理上略显粗糙。如今，我在设计领域已工作了六七年，或许是时候思考如何将产品设计得更为专业和精细，力求与大型企业的设计水准相媲美。

在着手这个项目之前，我曾研读过若干关于栅格化设计的文章，还观看了一些相关视频教程，然而内容大多模糊不清，充斥着抽象的理论，让人难以理解其具体含义，且感觉实用性不强。至于如何将这些理论应用到实际工作中，我更是茫然无知。今天，我将向大家分享自己对这些知识的理解和消化。

网页栅格系统的构建包括设置带有边距的栅格和没有边距的栅格两种形式，实际上，您并不需要对此有深入了解。您只需确保所设计的网页具有良好的扩展性、一致性和便捷的开发性即可。

通常设计网页尺寸的总宽度都有1920 1440 1366

我通常在制作网页时倾向于采用1920像素的宽度，这或许源于个人习惯，同时也是基于经验的积累。采用1920像素作为网页设计的基准，至今并未遇到任何问题。

在ps和软件中都可以制作

如果你想用ps做网页设计，制作栅格实际操作：

1， 打开ps

2， 点视图

3， 点新建参考线版面

在此时，你可以依据自己的设定进行版面调整。网页版心一般包括980像素宽的尺寸，这一规格并非强制要求。在进行设计工作时，若你进行了竞品分析，那么只需按照竞品的布局进行设计即可。

如果你想用做网页设计，制作栅格实际操作：

1， 打开

2， 视图

3， 布局

4， 布局设置

栅格在设计网页时为什么如此重要？

1， 它可以帮助我们对齐内容，提升页面的一致性和复用性

2，减少了设计、开发沟通成本

3sketch是做什么的， 提高可阅读性，具有一定的可拓展性

4， 为客户带来一致的用户体验

计算公式W=(A*n)-i

内容总宽 定义为w

页边距 n

列宽 a

水槽 I

列槽宽 A

这看起来可能相当繁琐，但我的看法是：以一个网页为例，若其总宽度为1920像素，那么内容区域宽度为1000像素，剩余的两边边距共计920像素。将920像素除以2，便得到每侧边距为460像素。进行画布布局时sketch是做什么的，需要提前进行这样的计算和规划。

网页端 我们通常总宽度是1440

设置参数如下：

iPad端 我们通常总宽度是1024

设置参数如下：

手机ui界面端 我们通常总宽度是750

设置参数如下：

以下是我日常所用的尺寸设计方案，但这些并非一成不变。您可以根据个人见解或参照公司过往的规范进行调整。我制定的参数均基于我实际操作中的经验。如有疑问，欢迎随时向我咨询，我会尽我所知与您分享。若您掌握的知识更为丰富，也期待您能给予我更多的指导。

如有侵权请联系删除！