亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放

概念

线框图（Wireframe或Wireframing）

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

例如：

特点

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

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

可以(yi)快速(su)调整布局，有一个整体预览的效(xiao)果。

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

所以线框图的也(ye)应当作设计的一部分！

下面的线框图(tu)设(she)计(ji)，将会以上方的线框图(tu)作为例(li)子，进行讲解。

线框图设计

构建栅格（网格）系统

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

建立栅格（网格）

页面尺寸和安全宽度(du)设计

在Photoshop中，建立(li)分(fen)辨率(lv)为(wei)(wei)1920像(xiang)素宽(kuan)度的画布（新建时将(jiang)分(fen)辨率(lv)调整为(wei)(wei)72像(xiang)素\英寸），取1200像(xiang)素为(wei)(wei)网页(ye)的安全(quan)宽(kuan)度。

(不(bu)同分辨率、不(bu)同的开发(fa)框架对应(ying)的安(an)全宽度(du)会有所不(bu)同，这里(li)需(xu)要多(duo)多(duo)实(shi)践且根据不(bu)同的情况而定！）

建立参考线

执行(xing) 【视图→新建(jian)参考(kao)线(xian)版面→新建(jian)参考(kao)面板 】

设立如图的数据：

（这(zhei)里选取(qu)1200像素(su)(su)作为(wei)安全宽(kuan)度，所以左右的边距（1920-1200）%2=360像素(su)(su)，建立(li)一(yi)个常用的12列网(wang)格(ge)，每列网(wang)格(ge)之间的留白(bai)距离通(tong)常为(wei)20像素(su)(su)）

创建好后就像这样啦：

到这里，便创建完成了网格！

基础布局

分屏设计

亚洲(zhou)人(ren)成影院午夜网站(zhan)_无码人(ren)妻精一(yi)区(qu)(qu)二(er)区(qu)(qu)三区(qu)(qu)_人(ren)人(ren)妻人(ren)人(ren)爽人(ren)人(ren)澡人(ren)人(ren)_美女内射(she)无套日韩(han)免费播放(fang) 第一(yi)屏设(she)计的高度为768像素，创建(jian)一(yi)个(ge)1920×768像素的矩形，使用属性窗口，将其放(fang)在（0，0）点处。

（下面的(de)设(she)计(ji)可根(gen)(gen)据768像(xiang)素(su)的(de)高度(du)设(she)计(ji)，建立(li)以(yi)768像(xiang)素(su)为倍数的(de)参考(kao)线，但需根(gen)(gen)据具体的(de)内容及项目合理建立(li)参考(kao)线。）

顶部导航(hang)栏(lan) 高度为(wei)80像素，建(jian)立相应的矩形，并且添加相应的导航(hang)文字。

关于字体(ti)的位置调整：

Step 1. 输入完(wan)所有(you)文字后，选(xuan)中所有(you)的对应文字图层(ceng)

Step 2. 选(xuan)择工具(ju)(ju)栏(lan)(lan)里面的【移动(dong)工具(ju)(ju)】（工具(ju)(ju)栏(lan)(lan)里面的第一个）

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

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

效(xiao)果完成图！

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

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

这里创建了(le)一个高度为118像素的(de)矩形，加上(shang)相应文字(zi)并进行排版。

至(zhi)此完成(cheng)了整个线(xian)框图的(de)设计。

文字排版

这里使用(yong)【字符(fu)】或(huo)【段落(luo)】面板创建(jian)文字模板，提高效率。

执行【窗(chuang)口→段落样(yang)式(shi)(shi)】菜单(dan)命令，在下(xia)方点(dian)击新建(jian)样(yang)式(shi)(shi)的按(an)钮(niu)（下(xia)方倒数第二个(ge)，与(yu)新建(jian)图层的按(an)钮(niu)一样(yang)），新建(jian)段落样(yang)式(shi)(shi)。

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

对应的效果（大字使用h3，小字使用desc）：

创建段落样式的用处：

对于字体的(de)排版更(geng)规(gui)范更(geng)高效，其(qi)他屏用到(dao)相应的(de)字体时可以直接选(xuan)中(zhong)相应的(de)文字图层，点击段(duan)落(luo)样式面板(ban)中(zhong)的(de)【清除(chu)覆盖】按(an)钮(niu)（弧形箭头）将已(yi)经设置好(hao)了的(de)段(duan)落(luo)样式运用到(dao)文字中(zhong)去(qu)。

总结

这(zhei)里大致(zhi)讲解(jie)了(le)线框图设计，知识(shi)点比(bi)较(jiao)散(san)，但(dan)较(jiao)为重(zhong)要(yao)的(de)有(you)(you) 构建栅(zha)格（网格）系统、导(dao)航栏文字的(de)排列方(fang)式(shi)、建立(li)段落样式(shi)等(deng)，但(dan)对(dui)于规(gui)范设计都会(hui)有(you)(you)许多帮助，而这(zhei)背(bei)后对(dui)应的(de)许许多多大的(de)方(fang)面(mian)，例如 构建栅(zha)格的(de)大小(xiao)(xiao)、选择(ze)安全宽(kuan)度的(de)大小(xiao)(xiao)、字体选择(ze)等(deng)等(deng)，都是需要(yao)深入地(di)去学习(xi)加实践才(cai)会(hui)更加熟练。

版权(quan)声明(ming)：本文(wen)为(wei)CSDN博主「多啦爱吃(chi)鱼鱼」的原创(chuang)文(wen)章，遵循(xun)CC 4.0 BY-SA版权(quan)协议，转载请附上原文(wen)出处(chu)链接及本声明(ming)。

原(yuan)文链接：//blog.csdn.net/weixin_44705587/article/details/97769328