网页遮罩设计 第1篇
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层。
其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理。
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航。
2. 确定列数、水槽值、边距
网页遮罩设计 第2篇
按照亲密性原则，我们可以按照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）”，这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
网页遮罩设计 第3篇
此外还有最小单位、总宽度、列数三个计算因子。
三、案例——搭建栅格
以下图数据总览页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。
乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。
另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
1. 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。
栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
网页遮罩设计 第4篇
栅格系统中水槽与边距的变化遵循8n的变化规律，此处n为大于0的正整数，即n=1、2、3…。
用于规范元素间距的8n，n取整当然最佳，但也可以根据业务情况取、。
原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。
栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。
从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。
四、Q&A
Q1：当栅格系统中出现无法整除的情况，如何处理?
A1：理论上来说，可以通过调整固定区域如导航的宽度来改变内容区域的大小，使列宽可以整除，且边距和槽宽能被最小原子单位（如8）整除。
但如果仍然出现无法整除的情况，可以优先调整页边距的数值，无需追求完全整除。
栅格化的目的是一致性和效率，偶尔有一些不“完美”的尺寸是完全允许的。
用户使用页面时也看不到我们使用的栅格系统，几乎注意不到几像素的变化。
只要让用户感受到的是页面整体呈现出来的节奏与韵律感，以及一致的视觉语言带给的严谨就足够了。
Q2：盒子模型填充栅格时，盒子对齐的是栅格还是水槽，里面内容的元素也要同等对齐吗？
A2：盒子模型对齐的是栅格而非水槽，而这个盒子里面的内容元素不受栅格的约束。
只要父级模块对齐栅格，子级元素可以不对齐水槽，同时子模块也可以有自己的栅格系统。
Q3：一套栅格搭建完成后，是否全局都要强制对齐栅格？
A3：并不是，栅格用在典型页面工作台、数据概览、卡片页居多，非常规设计时不需要栅格系统。
甚至在特定情况下，我们也可以打破布局栅格设置，来组织页面内容。
打破布局栅格可以使元素突出，吸引视觉焦点（比如：全站横幅，或是市场运营类内容）。
但需注意，对中后台系统而言，过多使用会导致页面凌乱。
五、最后
栅格上篇正式完结撒花啦，敬请期待下篇《栅格在响应式设计中的运用》。
网页遮罩设计 第5篇
传统上，日本文字是垂直书写的，这种传统在网页设计中也可以看到。通过垂直显示文本，设计师可以拥有无限的创意空间，可以灵活布局，同时保持可读性。
可以看到垂直排版是如何与视觉相辅相成的，以及如何引导访问者在阅读和吸收信息时的视线。有趣的是，当文字以垂直方式呈现时，可以从左向右阅读。然而，通常情况下，文字是从右向左阅读的，因为这是印刷媒体的传统。
网页遮罩设计 第6篇
如果你仔细观察网站设计，你会发现它们由许多矩形构建和分层。然而，巧妙地利用白色空间和不规则形状，可以创造出令人耳目一新的设计，并为浏览和查看网站建立创意节奏。
传统的日本风格 — 和风
尽管生活在现代世界，日本成功地保留了其传统，因此当在日本旅行时，可以和谐地体验到现代与传统的两面。此外，根据2009年的一项研究，日本有超过20,000家拥有100多年历史的公司。
因此，对于那些代表传统日本食品、糕点、酒店等传统企业的网站，它们展示了传统日本美学的美丽。
精选文章：