开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2020.06.07
制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。
1、左右布局
灵活性强，UI的限制小，左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；
右侧为内容版块范围，是网站内容的展示区域。
2、居中布局
中间的黄色部分为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在；
3.主流电脑屏幕尺寸有以下几种：
一般网站内容显示的区域为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。
字体设计的总原则是：可辨识性和易读性。
网页的中文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体
英文则建议使用TimesNewRoamn、Arial、ComisSansMS等无衬线字体
常用的字号大小有以下几种：
14px则适用于非突出性的普通正文内容。
16px、18px、20px、26px或者30px适用于突出性的标题内容。注意都是偶数原则，奇数像素会出毛边！
相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。
行间距：推荐以字体大小的1.5—2倍作为参考；
段间距：推荐以字体大小的2—2.5倍作为参考。
例如，当选用14px的字体时，行间距：21—28px；段间距：28px—35px。
正文字体颜色，保险起见，选用易读性的深灰色，建议选用#333333到#666666之间的颜色。
做网页设计时，你还要特别注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。
除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏的高度。
WindowXP的首屏高度平均值是580px
Window7的首屏高度平均值是710px
综合考虑到WindowXP已经逐渐退出市场，在实际操作时，我们以710px作为依据。
如下图所示，蓝色区域则是我们设计时需要着重考虑的首屏范围。
需要全屏显示的图片，宽度尺寸严格设计为1920px。
但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即控制在1200px以内。
避免遇到小屏幕设备时，内容显示不全，而造成信息的遗漏的情况。
响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）
无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）
我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。
常见的主要有如下几种方式：
1、布局不变，即页面中整体模块布局不发生变化，主要有：
2、布局改变，即页面中的整体模块布局发生变化，主要有：
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。
八、网页栅格
强调栅格化设计（grid-design）和栅格化布局（cssgrid）分开描述，是个人理解这完全属于两个不同的工作，前者针对网页设计师，而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计，主要是为了提高网页的规范性。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。而栅格化布局，特指前端攻城狮使用的css框架，来实现页面的响应式布局。
响应式设计只是网页设计的一个折中方案，依赖于项目实际情况进行选择。对于设计师来说，如果没有必须的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。
对于是否采用栅格化设计，采用下面几个案例说明一下：
（企业站之类-以介绍几种单一产品为主）
（功能型网站）
（不拘泥形式的设计形式）
针对这三个具有代表性的案例，栅格化设计是没有必要的。理由很简单，栅格的优点也是缺点，规范意味着统一也意味着限制，在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是需要设计感的。
但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。
关于栅格化布局，方案非常多，来看下面几个案例，我们都称之为栅格化设计。
（广义的栅格化系统-无间距的单元格）
（广义的栅格化系统-有间距的单元格）
对于不需要考虑页面响应（换句话说，和框架无关）的网页设计，原则可以简化成一句话：“由设计师自由决定”。
Grid-Guide自动生成的栅格系统（宽950-12列）
从图中可以看出，这三种方案列宽columnwidth和间距gutter不同，剩下的工作对于ui设计师来说就简单了很多，你可以把版式规范的png格式下载下来，作为你网页设计的基础版块，在此基础上进行列的划分。或者只是以这个参数为基础，重新建立参考线（我更推荐这种方式，尤其photoshopcc2017的新建参考线版面，装订线对应Gutter，列宽对应columnwidth）。我简单的拿版式规范做了个页面设计示意图，这就是基于栅格系统设计的优点，在划分列时，有理可依，有据可循。
【基于960grid系统的版块划分示意】
当然，既然是设计师，就可以感性的元素再多一些。比如，你希望更多的留白，就可以采用间距值较大的栅格版式，只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统，你还可以尝试很多方案，但MaxWidth的设定并不是那么随意，这个取决于网站的定位。
Grid-Guide自动生成的宽1180的栅格系统（24列）
至于高度和垂直间距，栅格化系统并没有统一的准则，设计师可以采用一些黄金分割之类满满的都是设计感之类的值，或者垂直间距与栅格系统的间距相同或是整倍，总之，也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况，尽量建立10的倍数或8的倍数（googlematerialdesign推荐）。
在前面提到过，如果网站的需求是响应式的设计，这时，设计师们一定一定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
看完你也许会明白为什么涉及到栅格化布局需要前端来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只要向前端索取他使用的框架的psd模板即可，里面参考线都是建好的。而前端一定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量，皆大欢喜。比如下面这张，就是目前最新的Bootstrap4的psd文件的截图。
【Bootstrap4】
设计师也可以自给自足，一般这些css框架库都会提供下载途径。尤其是Bootstrap，作为成熟的框架，很多模板文件可以套用。栅格化布局以使用的css框架库为准则，让前端开发提供给设计师再好不过。
1、网站设计及基本框架结构
1.1Container“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“,“wrap“,“page“.
1.2Header“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header”(或pageHeader).
1.3Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”,“navigation”,“nav-wrapper”.
1.4Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为:“subNav“,“links“，“sidebar-main”.
1.5Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为:“content“,“main-content”(或“mainContent”)。
1.7Footer“Footer”包含网站的一些附加信息，这部分还可以命名为:“copyright“.
2、需要注意的几点:
2.1尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.如:red/left/big等。
2.3涉及到交互行为的元素命名凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover点击：click已浏览：visited如:搜索按钮:btn-search、btn-search-hover、btn-search-visited