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

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

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


问题回答:

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

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

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

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

左/原图 右/效果图

那如何改进呢?

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

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

修改流程

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

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

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

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

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

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

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

Photoshop插件GuideGuide

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

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


针对图层进行调整

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

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

37b9df0c00f2f79afafc90d928355f6e - 基于网格系统塑造独特的版式——栎工坊评改过程
f4a3d4188c400ff3c9acd192266fbc75 - 基于网格系统塑造独特的版式——栎工坊评改过程
1c87c314ae1361aeae9bc20272c9e95b - 基于网格系统塑造独特的版式——栎工坊评改过程

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

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

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

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

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

  • 将右侧方块往天平中间挪动
  • 将左侧方块的蓝色调亮一点
998bac6b4159a2d394ae879227ba1742 - 基于网格系统塑造独特的版式——栎工坊评改过程

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

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

此时调整的策略:

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

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