网页设计框架模板网页字体制作设计相关知识专员专员分享

松江，地理位置优越，有土地、有工厂，设立企业非常多。地处北京市西北部，历史文化古老，有着“上海之根”的称呼，处于黄浦江上游，东与松江区、奉贤区为邻，南、西南与金山区接壤，西、北与青浦区交界；区境南北长约24千米，东西宽约25千米。工厂及企业数字化改革过程中，是要找到一些入门级操作，如建立网站，塑造网络品牌口碑，进行有效营销及推广，打造网络品牌，进行精准获客等。

凤凰山工作室网络营销专员，在此分享一些网站制作设计相关知识。

一、网页尺寸

制作网页时，我们选择的信噪比是72像素/英寸，使用的画布尺寸为1920px*1080px。

然而并不代表我们可以在整个画布上作图。网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不同样。

1、左右布局

灵活性强，UI的限制小，左边通栏为导航栏，宽度没有详细的限制，可依照实际状况调整；右侧为内容版块范围，是网站内容的展示区域。

2、居中布局

后面的红色部分为有效的显示局域，用于网页内容的展现；换句其实，两边均为留白，没有实际功能，只是为了适配而存在；

3、主流手机屏幕尺寸有下面几种：

一般网站内容显示的区域为996px；中国网站大个别还是以1000个像素为界限，因达到1000像素适合在大屏幕上浏览，小屏幕会变得拥挤。所以网站宽度在1000像素以内可以确保大个别客户舒适的浏览网站。

二、网页图标

字体设计的总原则是：可识别性和易读性。

网页的中文字设计是平台默认的图标：宋体、微软黑体、苹果系统黑体

英文则建议使用TimesNewRoamn、Arial、ComisSansMS等无衬线字体

常用的字号大小有下面几种：

12px是应用于网页的最小图标，适用于非突出性的日期，版权等注解性内容。

14px则适用于非突出性的普通正文内容。

16px、18px、20px、26px或者30px适用于突出性的标题内容。注意都是双数原则，奇数像素会出毛边！

三、字体间距

相邻两个文字的厚度，其实不应该太过介意，除了特殊的需求之外，都可以使用默认数值的长度。

行间距：推荐以字体大小的1.5—2倍成为参考；

段长度：推荐以字体大小的2—2.5倍成为参考。

比如，当选择14px的字体时，行长度：21—28px；段长度：28px—35px。

四、字体颜色

主文字色彩，建议使用公司品牌的VI颜色，可提升公司网站与公司VI之间的关联，增加可识别性和记忆性。

正文字体颜色，保险起见，选用易读性的深蓝色，建议选择#333333到#666666之间的颜色。

五、首屏内容

做网页设计时，你需要非常留意网页的首屏内容，在构图和内容展现上，首屏模块的设计至关重要。

除去任务栏，浏览器菜单栏或者状态栏的高度，剩下的是首屏的高度。

WindowXP的首屏高度平均值是580px

Window7的首屏高度平均值是710px

综合考虑到WindowXP已经渐渐淡出市场，在实际操作时，我们以710px作为根据。

如右图图示，蓝色区域则是我们设计时必须注重考虑的首屏范围。

此外，是关于图片尺寸的问题。

需要全屏显示的照片，宽度规格严格设计为1920px。

然而值得注意的是，图片内容的有效范围不能达到网页内容的有效范围，即控制在1200px以内。

避免碰到小屏幕设备时，内容显示不全，而导致信息的遗漏的状况。

六、响应式布局设计

响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下体现一致，保证可交互可操作。

因为页面的宽度发生了差异，进而信息呈现也颠覆了就是响应式设计。直到最终在电脑屏幕上显示的照片信息成为了一列。

对页面进行响应式的设计推动，需要对同样内容进行不同长度的布局设计，有两种形式：桌面优先（从桌面端开始向上设计）；移动优先（从移动端向上设计）

无论基于哪种方式的设计，要兼容所有设施，布局响应时不可导致地必须对模块布局做一些差异（当页面宽度发生差异的长度范围就是临界点的概念。所以做响应式设计时我们必须清楚每一个长度的厚度范围在多少时我们就可以建立出相对应清晰的一个临界点，制定了临界点以后就明白，当屏幕的长度范围位于哪一个点的之后，我们的页面信息该怎么展示。）

我们借助JS获取设备的屏幕宽度，来颠覆网页的布局，这一过程我们可以称之为布局响应屏幕。

常见的主要有如下几种方法：

1、布局不变，即页面中整体模块布局不出现差异，主要有：

2、布局改变，即页面中的整体模块布局出现差异，主要有：

这些之后，单一方法的发力响应能够满足理想效果，需要结合多种组合形式，但方法上尽可能是保持简洁轻巧，而且同一临界点内（出现布局改变的临界点称之为临界点）维持统一逻辑。否则页面实现得太过复杂，也会妨碍整体感受和页面性能。

八、网页栅格

网上有些关于栅格化平台的文章讲的特别理论化，又是算法又是组件，而且和响应式加码混在一起，让新晋的网页设计师们实在无从下手，所以此处以实例来表明何时引入以及如何最快的构建栅格化平台。在所有关于UI的文章中，我会反复提出和前端开发人员的沟通，因为它们是你设计方案的执行者，这一点十分重要。

1.把栅格化设计和栅格化布局分开

强调栅格化设计（grid-design）和栅格化布局（cssgrid）分开描述，个人理解这完全属于两个不同的工作，前者对于网页设计师，而前者对于前端开发人员。栅格化设计是不需考量页面的响应的基于栅格化平台的设计，主要是为了提升网页的完善性。对于一些中规中矩的网站，或者说通常创意型的网站，栅格化设计而是比较推荐的，尤其是一些规模大周期长，后期应该不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于前期的维护。而栅格化布局，特指前端攻城狮使用的css框架，来推动页面的响应式加码。

响应式设计也是网页设计的一个折中方案，依赖于项目实际状况进行选取。对于设计师来说，如果没有需要的规定，可选用广义的栅格系统，并在此基础上自由发挥创意。

2.绝不万能的栅格化系统

针对是否采取栅格化设计，采用以下几个案例说明一下：

（企业站等等-以介绍几种单一产品为主）

（功能型网站）

（不拘泥于形式的设计方式）

对于这三个带有代表性的实例，栅格化设计是没有必要的。理由很简洁，栅格的特点也有缺点，规范意味着统一也意味着限制，在以上的实例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是必须设计感的。

但绝大多数状况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容繁杂无章的页面呈现清爽感。关于栅格化布局，方案十分多，来看以下几个实例，我们都称之为栅格化设计。

（广义的栅格化平台-无间距的单元格）

（广义的栅格化平台-有厚度的单元格）

（广义的栅格化平台-有厚度的单元格）

针对不应该考量页面响应（换句其实，和框架无关）的网页设计，原则可以简化成一句话：“由设计师自由决定”。

3.栅格化设计的参数

网上搜索结果最热的960gird栅格化系统从2009年就开始陆续推出，但目前，仍然有众多设计师在使用，除了考量到显示设备的分辨率，还依赖于960gird的灵活性。所以，对于新晋webui来说，采用960grid仍然是最佳的方案，不会出彩但也不会错误。如果是考量到宽屏的设计（必须放弃一个别分辨率不高的用户），可以把栅格化平台的长度建为980甚至以上。但没有栅格化设计心得的设计师必须注意，这里说的960是含边距部分，换句其实，在psd文档中，你的内容部分是950px，栅格化版面可以通过一些特别好用的在线软件，比如知名的Grid.Guide，这是12列栅格在内容长度950下的三种版式规范，你也可以使用24列，灵活度更高。

Grid-Guide自动生成的栅格系统（宽950-12列）

从图中可以看出，这三种方案列宽columnwidth和长度gutter不同，剩下的工作针对ui设计师来说就简单了这些，你可以把版式规范的png格式下载下来，作为你网页设计的基础版块，在此基础上进行列的界定。或者仅仅以这个参数为基础，重新确立参考线（我更推荐这些模式，尤其photoshopcc2017的新建参考线版面，装订线对应Gutter，列宽对应columnwidth）。我简单的拿版式规范做了个页面设计示意图，这就是基于栅格系统设计的特点，在界定时，有理可依，有据可循。

【基于960grid系统的版块划分示意】

其实，既然是设计师，就可以感性的元素再多一些。比如，你期望更多的留白，就可以运用间距值较大的栅格版式，只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统，你还可以尝试这些方案，但MaxWidth的设定并不是如此轻易，这个取决于网站的定位。

Grid-Guide自动生成的宽1180的栅格系统（24列）

至于高度和平行间距，栅格化平台并没有统一的准则，设计师可以运用一些黄金分割等等满满的都是设计感等等的值，或者平行间距与栅格系统的宽度相等或是整倍，总之，也必须一个完善指导全站设计。

栅格系统的参数按照项目的实际状况，尽量建立10的倍数或8的倍数（googlematerialdesign推荐）。

4.栅格化布局的参数

在上面提及过，如果网站的意愿是响应式的设计，这时，设计师们必定定先问一下前端他们打算怎么实现响应式加码，而不是把设计稿完成后留给人们后YY他们能百分百给你复现你的设计稿。关于响应式的栅格系统，首先声明一点，当前端乐意并认识CSS原理和框架的建立模式时，可以形成其它颜色的网格网页设计框架模板，比如7、9、11、13等等，甚至诸多异形网格，但在绝大多数状况下，更多的前端攻城狮青睐于高（tou）效(lan)，而它们常用的css框架比如Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（虽然栅格系统也是Bootstrap的一个别，如果仅仅应该一个响应式的css的话网页设计框架模板，可选的十分多，比如960.gis），除此此外，有也许你那漂亮的前端攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定出来之前，请放下架子，请教一下开发人员，因为即使不想承认，但这些状况下是前端来指导设计。值得庆幸的是，这种状况在现实中十分少的，（但不排除你接手的是一个二次开发的项目等等之类），确定它们使用哪种框架之后，设计师可以开始自己的工作了。下面也举个实例，是960gis的。

【960-grid-system栅格化布局】

看完你或许会知道为什么涉及到栅格化布局需要前端来确认了，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.6Sidebar“Sidebar”部分可以包括网站的次要内容，比如今天更新内容列表、关于网页的介绍或广告元素等…这部分还可以命名为:“subNav“,“side-panel“,“secondary-content“.