WebUI网页设计规范（二）

六、响应式布局设计

创新互联建站专注于中阳企业网站建设,自适应网站建设,商城开发。中阳网站建设公司,为中阳等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

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

由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到zui后在手机屏幕上的显示图片信息变成了一列。

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）

无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。

所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）

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

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。

七、网页栅格

网上有些关于栅格化系统的文章讲的非常理论化，又是算法又是模块，而且和响应式布局混在一起，让新晋的网页设计师们简直无从下手，所以这里以案例来说明何时采用以及怎么zui快的建立栅格化系统。在所有关于UI的文章中，我会反复强调和前端开发人员的沟通，因为他们是你设计方案的执行者，这一点非常重要。

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

强调栅格化设计（grid-design）和栅格化布局（css grid）分开描述，是个人理解这完全属于两个不同的工作，前者针对网页设计师，而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计，主要是为了提高网页的规范性。

对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。而栅格化布局，特指前端攻城狮使用的css框架，来实现页面的响应式布局。

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

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

企业站之类-以介绍几种单一产品为主

功能型网站

不拘泥形式的设计形式

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

但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。

关于栅格化布局，方案非常多，来看下面几个案例，我们都称之为栅格化设计。

对于不需要考虑页面响应（换句话说，和框架无关）的网页设计，原则可以简化成一句话：“由设计师自由决定”。

3.栅格化设计的参数

网上搜索结果zui热的960 gird栅格系统从2009年就开始正式推出，但至今，仍然有很多设计师在使用，除了考虑到显示设备的分辨率，还依赖于960 gird的灵活性。所以，对于新晋web ui来说，采用960 grid 仍然是zui佳的方案，不会出彩但也不会出错。如果是考虑到宽屏的设计（需要舍弃一部分分辨率不高的用户），可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助一些非常好用的在线工具，比如知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。

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

至于高度和垂直间距，栅格化系统并没有统一的准则，设计师可以采用一些黄金分割之类满满的都是设计感之类的值，或者垂直间距与栅格系统的间距相同或是整倍，总之，也需要一个规范指导全站设计。

栅格系统的参数根据项目的实际情况，尽量建立10的倍数或8的倍数（google material design推荐）。

4.栅格化布局的参数

在前面提到过，如果网站的需求是响应式的设计，这时，设计师们一定一定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。

八、命名规范

1、网站设计及基本框架结构

网页设计-命名规范

1.1 Container

“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.

1.2 Header

“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).

1.3 Navbar

“navbar“等同于横向的导航栏，是zui典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

1.4 Menu

“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.

1.5 Main

“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

1.6 Sidebar

“Sidebar” 部分可以包含网站的次要内容，比如zui近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

1.7 Footer

“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.