网页设计 栅栏 第1篇
3. Timothee Roussilhe
网站布局思路：视差滚动布局
该网站是设计师Timothee Roussilhe的一个简单而富有创意的简历网站。他增加了视差效果，为访客提供更愉快和令人印象深刻的体验。向下滚动时，会有很多个盒子移入和移出。令人惊奇的是，所有的盒子都增加了视差效果，你会觉得你正在看一场电影。
如果你想设计一个看起来很酷，富有创意和令人印象深刻的网站，那就添加一个视差效果。但是不要把它搞得一团糟，保持布局简单并使用更干净的配色方案。
访问网站：
网页设计 栅栏 第2篇
栅格系统中水槽与边距的变化遵循8n的变化规律，此处n为大于0的正整数，即n=1、2、3…。
用于规范元素间距的8n，n取整当然最佳，但也可以根据业务情况取、。
原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。
栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。
从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。
四、Q&A
Q1：当栅格系统中出现无法整除的情况，如何处理?
A1：理论上来说，可以通过调整固定区域如导航的宽度来改变内容区域的大小，使列宽可以整除，且边距和槽宽能被最小原子单位（如8）整除。
但如果仍然出现无法整除的情况，可以优先调整页边距的数值，无需追求完全整除。
栅格化的目的是一致性和效率，偶尔有一些不“完美”的尺寸是完全允许的。
用户使用页面时也看不到我们使用的栅格系统，几乎注意不到几像素的变化。
只要让用户感受到的是页面整体呈现出来的节奏与韵律感，以及一致的视觉语言带给的严谨就足够了。
Q2：盒子模型填充栅格时，盒子对齐的是栅格还是水槽，里面内容的元素也要同等对齐吗？
A2：盒子模型对齐的是栅格而非水槽，而这个盒子里面的内容元素不受栅格的约束。
只要父级模块对齐栅格，子级元素可以不对齐水槽，同时子模块也可以有自己的栅格系统。
Q3：一套栅格搭建完成后，是否全局都要强制对齐栅格？
A3：并不是，栅格用在典型页面工作台、数据概览、卡片页居多，非常规设计时不需要栅格系统。
甚至在特定情况下，我们也可以打破布局栅格设置，来组织页面内容。
打破布局栅格可以使元素突出，吸引视觉焦点（比如：全站横幅，或是市场运营类内容）。
但需注意，对中后台系统而言，过多使用会导致页面凌乱。
五、最后
栅格上篇正式完结撒花啦，敬请期待下篇《栅格在响应式设计中的运用》。
网页设计 栅栏 第3篇
按照亲密性原则，我们可以按照8n定义几个常用的间距值。
人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值。
为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。
经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。
3. 利用栅格公式计算栅格体系
栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度。
基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。
通过对栅格公式的计算，将具体的值带入公式：1440-左侧导航宽度=24栏+23*16+2*24。
4. 组织内容，分配页面比例
建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。
我们把页面上最终承载内容称为“盒子（Box）”，这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
网页设计 栅栏 第4篇
此外还有最小单位、总宽度、列数三个计算因子。
三、案例——搭建栅格
以下图数据总览页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。
乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。
另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
1. 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。
栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
网页设计 栅栏 第5篇
8. Casangelina
网站布局思路：不对称布局
Hotel Casangelina酒店是世界十大悬崖酒店之一，位于阿马尔菲海岸的悬崖上。客人可以在酒店露台上的全景室外游泳池放松身心。通过极简主义UI设计，滚动区域中图片和字体的融合增强了网页浏览的沉浸感。这是UI设计和用户体验的完美结合。背景音乐和动态酒店全景视频增添了视觉真实感，让用户通过网页设计感受整个酒店的优雅。
因为太喜欢这个网站了，所以多说了几句，现在讲讲不对称布局，就是页面的布局两边缺乏平等。不对称是艺术界长期以来最喜欢的技术，在网页设计师中很受欢迎。但要注意不要将不对称与不平衡混为一谈，不对称的目标是在不可能或不希望对两个部分使用相同的权重时创造平衡。使用不对称性可以创建张力和动态，并且把用户的注意力集中在各个对象（焦点）上。
访问页面：
9. Tinkerwatches
网站布局思路：大图配带明确CTA
此布局的核心元素是一张用作页面背景的大照片。该照片用于向访问者介绍网站内容。这种布局可以创造出强烈的第一印象，并和用户产生互动。明确的CTA是关键，引导用户互动。如果你想要以最简洁的方式展示更多的信息，这种布局可以考虑，就像是无声胜有声。但要仔细选择背景图像。
访问网站：
以上就是Mockplus为大家精选的9款网站布局设计了，希望对您有所帮助。当然啦，心动不如行动，马上使用Mockplus开始你的网站布局设计吧。Mockplus有大量的封装图标和组件，可以直接拖拽使用，界面布局即刻呈现。如果怕位置不准，使用Mockplus的网格和参考线，精确到每一个细节，实现更完美的布局。这就像码积木，你想怎样搭建，界面就可以怎样呈现，全都只需鼠标拖一拖。现在试试，小白也能做设计！返回搜狐，查看更多
网页设计 栅栏 第6篇
5. Assemble
网站布局思路：网格卡片布局
这种布局是无限可操作的，网格的大小，间距和列数可以不同，卡片的样式可以根据屏幕大小而变化（卡片可以重新排列以适合任何屏幕）。因此，网格卡卡在响应式设计中运用很广。
此布局非常适合构建内容较多的网站，且具有相同层次结构的项目。
访问网站：
网页设计 栅栏 第7篇
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层。
其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理。
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航。
2. 确定列数、水槽值、边距
网页设计 栅栏 第8篇
7. Beverages
网站布局思路：盒子布局
Beverages是一个100％响应的网站模板，其餐厅主题适用于任何食品和饮料网站的设计。所谓的盒子布局，就是一个大标题宽度框加一些较小的盒子，每个盒子都占据了屏幕大空间的一部分。较小的盒子数量可以从2到5不等。每个盒子都可以是一个链接，通向更细节，更复杂的页面。
访问网站：
网页设计 栅栏 第9篇
（1）目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。
可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计。
（2）灵活性方面，4pt最佳，8pt次之。
但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。
而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的。
（3）开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计。
因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。
网页设计 栅栏 第10篇
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位网格的大小。
中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？
网页设计 栅栏 第11篇
即固定网格和流动网格组合的形式，常用于后台系统设计、工具型界面设计等。
例如：上面的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。水槽宽度保持不变。
栅格系统的使用步骤
Sketch非常方便，在「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统（中文和英文对照）
Ps中「视图」-「新建参考线版面」，虽然没有Sketch那么方便，但依然能够很方便设置出栅格系统，如图。
本文总结：
网页设计 栅栏 第12篇
水槽是列与列之间的间隔，水槽宽度越小内容越紧凑；越大留白越多，页面更有呼吸感，但水槽宽度不能比列宽大，否则不利于内容的展示。水槽内不可以放内容，不然的话使用栅格还有什么意义。