丹凤千字科普：电脑页边距在哪里设置（详细资料介绍）

今日干货分享，前几天我参与了PC端网页设计的项目。在此之前，我深入学习了栅格系统在网页设计中的运用。

回想早年从事电商设计工作时，店铺装修的内容设计一般遵循980的宽度标准，以确保不同尺寸的电脑都能展示中间内容。栅格化系统不仅广泛应用于网页设计，平面设计、宣传册、宣传单等均可使用。其核心理念在于使设计作品更加整齐、整洁、有规律。

在此之前，我通常使用辅助线方法进行设计，虽然很多人可能觉得这种方法不够专业，但其目的与栅格系统相同，只是在细节上可能稍显不足。在设计行业摸爬滚打了6-7年后，我开始思考如何将产品设计得更加专业和精致，以接近大厂的设计水平。

在接触栅格化设计之前，我阅读了相关文章和视频，但许多内容理论高大上，实际应用却模糊不清。今天，我将与大家分享我所理解并消化的内容。

网页栅格系统制作分为有边距的栅格和无边距的栅格。无需深入了解其区分方式，关键要确保设计的网页具有良好的扩展性、统一性和开发便捷性。常见的网页尺寸总宽度有1920、1440和1366等。

我常用的网页总宽度是1920，这主要是基于个人习惯和摸索出的经验。在Photoshop和Sketch软件中都可以轻松进行网页栅格设计。

在Photoshop中制作网页栅格的操作步骤如下：

1. 打开Photoshop。

2. 点击“视图”。

3. 选择“新建参考线版面”。

4. 根据设定进行版面设置。常见的版心宽度有980、1000、1200、1280等。

在Sketch中制作网页栅格的操作则可以通过以下步骤实现：

1. 打开Sketch。

2. 选择“视图”。

3. 选择“布局”。

4. 进行布局设置。

栅格在网页设计中为何如此重要呢？

1. 它有助于内容对齐，提升页面的一致性和复用性。

2. 减少设计与开发之间的沟通成本。

3. 提高页面的可阅读性，并具备可拓展性。

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

关于计算公式W=(A*n)-i，实际上在我理解中，它是为了根据网页的总宽度、页边距、列宽等因素进行合理布局。例如，在一个总宽度为1920的网页中，如果版心内容宽度设为1000，那么两侧页边距共为920，将920除以2得到左右两边各为460的间距，这就是提前计算并布局好的结果。

对于不同设备端的设计尺寸，我常用的参数如下：

* 网页端通常总宽度为1440。

* iPad端通常总宽度为1024。

* 手机UI界面端通常总宽度为750。

以上是我在实际项目中常用的尺寸设计，但请注意，这些并非固定标准，你可以根据公司规范或个人想法进行调整。如果有什么疑问，欢迎向我提问，我会尽我所知分享经验。同样地，如果你有更深入的了解或建议，也非常欢迎你与我分享和交流。