广东快3>WIKI库>学习UI设计>栅格化布局设计示例

栅格化布局设计示例



利用栅格系统完成网页的制作


1.建立栅格系统框架


sample1.png


2.草图设计


规划出整个页面的布局,可以根据版面、模块要求,在纸上画出草图。主要包含:页眉、插图、内容区-左、内容区-右、页脚。


sample2.png


在photoshop中建立基本的模型,可以使用形状工具和参考线划分出相应的区域。


sample3.png


打开设置好的栅格框架


sample4.png


用参考线和形状工具画出各个功能区域的位置


sample5.png


3.相关内容的填充


需要注意的是,模块内部的元素在排版时,应尽量跟水平栅格和垂直栅格相对齐。同一级别的文字之间应该使用统一的行间距。可以将每一行的文本基线尽量落在水瓶栅格线之上。垂直方向上,上下段落之间应该保持对齐,尽量与竖切列边缘对齐,必要时,可以沿栅格拉出一些参考线。


把网格系统参考调整到最上面,把导航进行调整。


sample6.png


打开导航部分,添加logo


sample7.png


banner部分


sample8.png


内容部分:复制对应文本,对文本的行高调整。去掉栅格系统、参考线。


sample9.png


页脚部分的制作


sample91.png


制作右边页脚的部分


sample92.png


4.对细节部分进行修饰


对banner部分添加网络底纹效果,对banner中的图片增加阴影效果。增加页脚的纹理样式。



小作业


掌握栅格系统进行网页布局的各项技巧。完后曾课中的示例。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录