基于网格系统塑造独特的版式——栎工坊评改过程

2017-12-21 本文已影响26人米田的主动设计

最近自己参与评改网友作业分享，设计选图感觉很赞，版式有自己的思考。但是摆放有些失控，因为没有利用到基础网格的功能。

原来问题如下
那个男人12月12日提问:老师您好，仰慕已久。我主要是碰到了一下问题：

▍在制作网页的时对于网页交互的体验不够了解，往往是做的很平。
▍优秀网页应该具备那几点呢？来证明一个网页作品。
▍网页在制作过程中对于后台优化的问题怎么尽量做到最好，本人略懂代码，在平时学习中经常听到在制作网页的时候要考虑到后台优化问题。

问题回答：

▍交互体验，这类型的网页可以尝试用视察滚动处理

▍优秀网页整体统一，每个模块都自己细节，包括视觉和交互细节。

▍根据程序员的思维制作源文件，最直观的就是图层的命名。还有每个模块图片比例尺寸的问题，尽量做到一致。

左/原图右/效果图

那如何改进呢？

▍利用网格栅格系统，规范整体设计
▍图层编组要有逻辑规范
▍视觉平衡，每个画面处理都应该是感觉是平衡

小提示：
对于栅格系统，我们利用到PS参考辅助线插件神器GuideGuide。
他能根据画布，画板，所选图层或您的选择添加辅助线，快速生成满足不同场景的参考线。

因为是特殊构造的网页，那么，为了保持在特立中寻找统一的特点。
设计最好遵循在完整的网格系统进行，方便调整时有规范可寻。

为了保证快速生成网格系统
我们会用到Photoshop插件GuideGuide，设置时注意划分的数量以及每个组件的间距即可。
一般，自己习惯将此划分为20等分，每个间距是8.

当然更理想的状态如上，将整个页面宽度划分为12等分。
这一套体系，基本沿用了现有前端框架常用的栅格系统，即12等分系统。

譬如Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Photoshop插件GuideGuide

每个元素都遵循栅格系统对齐
主要是物体的左侧和右侧元素间交叉对齐

针对图层进行调整

设计师成不成熟的标志，有一个细节可以看出来，就是对图层的处理。

就像程序员的代码为了时别人看懂，都会做好注释工作。

最后调整重点都是视觉平衡。
物理上的平衡和感知上的平衡是不一致。

后者更强调感觉，就如同下图，物理层面上，左右方块大小质量都是一致，而但我们观察时会发现，明显右侧的方块显得更重要。

这是由于视觉神经在作怪，此时如果只是单纯以数值为调整基础，就会显得很无力。

一般我们会做这样的调整：

同样，在具体处理每个画面时，也是基于这点考虑。

譬如上图，我们观察发现左侧是盆栽整体偏暗，即视觉认知上是显得比较重。

此时调整的策略：

如果你对我这次讲演感兴趣
可以移步到如下网址观看完整的讲解过程：
http://www.xuehui.com/pinggai/239