最近自己参与评改网友作业分享，设计选图感觉很赞，版式有自己的思考。但是摆放有些失控，因为没有利用到基础网格的功能。
原来问题如下
那个男人12月12日 提问:老师您好，仰慕已久。我主要是碰到了一下问题：
▍在制作网页的时对于网页交互的体验不够了解，往往是做的很平。
▍优秀网页应该具备那几点呢？来证明一个网页作品。
▍网页在制作过程中对于后台优化的问题怎么尽量做到最好，本人略懂代码，在平时学习中经常听到在制作网页的时候要考虑到后台优化问题。
问题回答：
▍交互体验，这类型的网页可以尝试用视察滚动处理
▍优秀网页整体统一，每个模块都自己细节，包括视觉和交互细节。
▍根据程序员的思维制作源文件，最直观的就是图层的命名。还有每个模块图片比例尺寸的问题，尽量做到一致。
左/原图 右/效果图
那如何改进呢？
▍利用网格栅格系统，规范整体设计
▍图层编组要有逻辑规范
▍视觉平衡，每个画面处理都应该是感觉是平衡
小提示：
对于栅格系统，我们利用到PS参考辅助线插件神器GuideGuide。
他能根据画布，画板，所选图层或您的选择添加辅助线，快速生成满足不同场景的参考线。
修改流程
因为是特殊构造的网页，那么，为了保持在特立中寻找统一的特点。
设计最好遵循在完整的网格系统进行，方便调整时有规范可寻。
为了保证快速生成网格系统
我们会用到Photoshop插件GuideGuide，设置时注意划分的数量以及每个组件的间距即可。
一般，自己习惯将此划分为20等分，每个间距是8.
当然更理想的状态如上，将整个页面宽度划分为12等分。
这一套体系，基本沿用了现有前端框架常用的栅格系统，即12等分系统。
譬如Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
Photoshop插件GuideGuide
每个元素都遵循栅格系统对齐
主要是物体的左侧和右侧元素间交叉对齐
针对图层进行调整
设计师成不成熟的标志，有一个细节可以看出来，就是对图层的处理。
就像程序员的代码为了时别人看懂，都会做好注释工作。
最后调整重点都是视觉平衡。
物理上的平衡和感知上的平衡是不一致。
后者更强调感觉，就如同下图，物理层面上，左右方块大小质量都是一致，而但我们观察时会发现，明显右侧的方块显得更重要。
这是由于视觉神经在作怪，此时如果只是单纯以数值为调整基础，就会显得很无力。
一般我们会做这样的调整：
- 将右侧方块往天平中间挪动
- 将左侧方块的蓝色调亮一点
同样，在具体处理每个画面时，也是基于这点考虑。
譬如上图，我们观察发现左侧是盆栽整体偏暗，即视觉认知上是显得比较重。
此时调整的策略：
- 右侧添加一块差不多重量的暗色平衡视觉
- 左侧盆栽的亮度稍微提高或往版面的中间线靠拢
如果你对我这次讲演感兴趣
可以移步到如下网址观看完整的讲解过程：
http://www.xuehui.com/pinggai/239
网友评论