写于2021/03/29

网格系统

理解网格系统

网格系统总宽=模块列数+模块栏宽（列数-1）+左右边距。
在总宽一定时，web端一般有12列和24列两种分法，列数越多设计的灵活度越高，但难度也增加。
image.png
如果使用Sketch制图，可以在“布局设置”中设置网格参数。
image.png

设置多大合适？

当你不知道在显示器尺寸上定义多少列宽和槽宽合适时？这里有一个网站“Grid”可以帮助你进行实时预览。
预览时先要知道自己的显示器尺寸，因为在不同尺寸下设置的预览效果不同。

我的mac电脑显示器尺寸为：5120*2880
image.png

统一使用12列时，常规的960px宽度在大多电脑上看着应该都比较合适，在5120*2880屏幕尺寸里看着比较窄。下面是将宽度放到1600时，就显得比较大气了。注意列宽总和的设置值最好能被12整除，使每一列的宽度可以是一个整数。
image.png
image.png
在设置网页内容宽度大于960px时，要注意对text对显示宽度要保证显示在960px以内，才能让用户有一个较为舒适对阅读体验，因为文本宽度超过960px时，浏览效率将降低。
image.png

响应式设计

缩放时页面怎么变化？

在页面的缩放过程中，有变化的也有不变的，下面以dribble为例子，展示的是dribble网站正常情况和被拉伸缩小的情况： 屏幕录制2021-03-26 下午6.35.18.mov (18.17MB)

变化的和不变的元素

在拉伸过程中，下面图a、图b、图c对应三个窗口宽度，其中：

不变的元素

  • text属性不发生变化，包括文本大小、颜色、粗细等都不变。
  • 图片所在容器的顺序不变，都是按照从左到右，从上倒下的顺序排列，只是在图c一列时，顺序只需要从上倒下排列。

变化的元素

  • 列数变了：随着图abc的拉伸缩小，为了更好的展示效果减少列数，以获得清晰度合适的视图。
  • 元素位置变了：比如，导航栏从b到c发生了明显的变化。又比如，从图a到图b过程中，slogan区域的间距产生了变化；从图b到图c过程中，sologan区域的“左对齐+右对齐”模式变为了居中对齐。
  • 图像大小变了：除了作品区的图象依据网页大小进行自适应，slogan区域的图片也在随着缩放发生变化。
  • 元素被隐藏了：比如，从图b到图c过程中，详细菜单被隐藏，点击时才出现。

图a-6列image.png
图b-3列 image.png
图c-1列 image.png

前端实现的案例说明

1.案例结果展示

由于dribble变化的元素有点多，这里简化了一下元素，用下方从左到右的响应式设计作为说明案例。
image.png

2.前期设置

首先，设置网页的宽度可以进行自由缩放（可以设置最大缩放比例为1.0，此时禁止用户缩放）
其次，使用插件适配最终缩放的设备宽度（比如选择设备为iphone，宽度就自动缩放为iphone宽度）
还有，可以找到开源的代码供使用，比如purecss是美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。
image.png

3.分栏的响应式变化定义

借用pure里的删格导航里的下面这个表格，取用下述代码规定中的关键词：sm、md、lg、xl
image.png

应用关键词sm、md、lg、xl，并合分栏规则相结合
image.png

结合表格和此行代码，表示不同窗口宽度下显示的分栏规则：

  • 窗口宽度小于568px时，分1栏显示
  • 窗口宽度小于768px时，分2栏显示
  • 窗口宽度小于1024px时，分3栏显示
  • 窗口宽度小于1280px时，分4栏显示

将此行代码分别贴到需要做响应式设计的模块里，就达成了下图随宽度变化的分栏数量变化。（针对不同模块，可根据元素实际合适比例，再设置不同参数的变化和显示方式）
image.png

4.样式的响应式变化定义

一般来说，在窗口大小变化后，除了分栏的自适应变化，其他元素也会做相应的变化。在下面图中：

  • 左图为pad端的窗口宽度，导航菜单位置位于右上角；
  • 右图为手机端的窗口宽度，此时导航的样式应该追随手机端的设计方式，将导航菜单单独以一行展示，并且点击右上角的汉堡包图标，可以控制菜单的隐藏和出现。

image.png

关于菜单位置的变化实现方式：
1.一般要在切换到手机屏幕大小时，先将菜单隐藏掉
2.再重新设计一个菜单进行显示。应用根据屏幕宽度调整样式的代码，假设有4个菜单，将菜单宽度设置为25%的设备宽度。
image.png

关于手机端点击出现和点击隐藏的实现方式：
1.设置“checkbox”控制菜单类别的出现和隐藏
2.将“菜单图标”和“checkbox”设置连接关系
3.隐藏“checkbox”
4.完成了在点击“菜单图标”时，可以控制菜单类别的出现和隐藏
（welcome的位置会自动定义在模块里上下居中，随着菜单的出现和隐藏都能处于合适的位置）
image.png

5.响应式设计的最终效果

响应式的模式：将元素设置为浮动，当元素的宽度之和大于网页宽度时正常显示，设置模式有：自动、隐藏、滚动、可显示；小于时正常显示。
image.png

响应式设计策略总结

01 精简并优化导航体系
主导航收起，页面中的副导航内容丰富且包含多级子类目，以点击样式展开。

02 移除不必要的特效
PC端的悬停动效、视差滚动等特效在移动端可直接移除。

03 合理的字体排版
字体大小、行距需根据移动端阅读感受调整至舒适的版式，确定合理的PC-移动端样式映射关系。

04 控件排布关系可进行调整
PC端横向排布的控件，可以在移动端横向排布，但需要注意层级关系保持一致。

05 优化按钮或可点击元素的位置及热区大小
保证移动端按钮或可点击元素位置易于操作、操作热区大小合理，以保证操作准确性。

06 复杂任务向PC转移
移动端有着其自身的局限性，从而导致复杂性较高的任务很难完成，此时可以把复杂性转移到PC端，提供明确路径，引导用户前往PC完成。