×

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

96
米田的主动设计
2017.12.21 11:50* 字数 1079

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

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

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


问题回答:

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

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

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

左/原图 右/效果图

那如何改进呢?

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

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

修改流程

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

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

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

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

Photoshop插件GuideGuide

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


针对图层进行调整

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

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


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

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

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

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

  • 将右侧方块往天平中间挪动
  • 将左侧方块的蓝色调亮一点

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

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

此时调整的策略:

  • 右侧添加一块差不多重量的暗色平衡视觉
  • 左侧盆栽的亮度稍微提高或往版面的中间线靠拢

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

日记本
Web note ad 1