失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 网页UI设计基础之线框图设计(栅格建立 基础布局 分屏 文字排版)

网页UI设计基础之线框图设计(栅格建立 基础布局 分屏 文字排版)

时间:2020-10-03 17:28:48

相关推荐

网页UI设计基础之线框图设计(栅格建立 基础布局 分屏 文字排版)

线框图介绍

概念

线框图(Wireframe或Wireframing)

网站线框图是网站框架的草图,是网站设计师根据网页设计标准将客户需求图形化的一种展现形式。

例如:

特点

作为一个视觉设计的起点,后期可以提高视觉设计的便利性,提高质量。

能灵活更换图片、文字等,节省试错时间。

可以快速调整布局,有一个整体预览的效果。

PSD文件可以直接用于后期的视觉设计阶段。

所以线框图的也应当作设计的一部分!

下面的线框图设计,将会以上方的线框图作为例子,进行讲解。

线框图设计

构建栅格(网格)系统

栅格俗称网格或网格系统,就像是一个网络可以帮助我们定位,更精确设计,使设计更规范,同时能够给前端工程师提供很好的开发标准和规范。

建立栅格(网格)

页面尺寸和安全宽度设计

在Photoshop中,建立分辨率为1920像素宽度的画布(新建时将分辨率调整为72像素\英寸),取1200像素为网页的安全宽度。

(不同分辨率、不同的开发框架对应的安全宽度会有所不同,这里需要多多实践且根据不同的情况而定!)

建立参考线

执行 【视图→新建参考线版面→新建参考面板 】

设立如图的数据:

(这里选取1200像素作为安全宽度,所以左右的边距(1920-1200)%2=360像素,建立一个常用的12列网格,每列网格之间的留白距离通常为20像素)

创建好后就像这样啦:

到这里,便创建完成了网格!

基础布局

分屏设计

首页第一屏设计的高度为768像素,创建一个1920×768像素的矩形,使用属性窗口,将其放在(0,0)点处。

(下面的设计可根据768像素的高度设计,建立以768像素为倍数的参考线,但需根据具体的内容及项目合理建立参考线。)

顶部导航栏高度为80像素,建立相应的矩形,并且添加相应的导航文字。

关于字体的位置调整:

Step 1. 输入完所有文字后,选中所有的对应文字图层

Step 2. 选择工具栏里面的【移动工具】(工具栏里面的第一个)

Step 3. 在顶部的属性栏中可以看见对应的调整图标

将开始和结尾的两个图层移动到相应参考线范围内,使用【顶对齐】【按右分布】或【水平居中】即可对齐文字。

效果完成图!

通栏Banner建立一个广告区域或非广告的Banner区域作为产品额外的信息流,更加提升视觉效果。

Footer页脚的设计页脚设计是线框图设计的最后一步,也很重要,是网站不可缺少的一部分。

这里创建了一个高度为118像素的矩形,加上相应文字并进行排版。

至此完成了整个线框图的设计。

文字排版

这里使用【字符】或【段落】面板创建文字模板,提高效率。

执行【窗口→段落样式】菜单命令,在下方点击新建样式的按钮(下方倒数第二个,与新建图层的按钮一样),新建段落样式。

图中新建了如下的段落样式:

对应的效果(大字使用h3,小字使用desc):

创建段落样式的用处:

对于字体的排版更规范更高效,其他屏用到相应的字体时可以直接选中相应的文字图层,点击段落样式面板中的【清除覆盖】按钮(弧形箭头)将已经设置好了的段落样式运用到文字中去。

总结

这里大致讲解了线框图设计,知识点比较散,但较为重要的有构建栅格(网格)系统导航栏文字的排列方式建立段落样式等,但对于规范设计都会有许多帮助,而这背后对应的许许多多大的方面,例如 构建栅格的大小、选择安全宽度的大小、字体选择等等,都是需要深入地去学习加实践才会更加熟练。

最后最后

文章的素材来源:《破译Web UI》一书加上自己的一些见解~

加油!ヾ(◍°∇°◍)ノ゙

如果觉得《网页UI设计基础之线框图设计(栅格建立 基础布局 分屏 文字排版)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。