响应式网页设计的要点
有时候，如果内容占据了屏幕的整个宽度是很好的，比如在移动设备上。但是如果是在电视屏幕上，相同的内容，占据了你的屏幕整个的宽度，通常就意义不大了。下面介绍响应式网页设计的要点，希望可以帮助到大家。
[图片0]
1.响应式 vs 自适应网页设计
它们看起来似乎是相同的，但事实并非如此。这两种方法相辅相成，并没有说哪个是正确的那个是错误的，内容决定一切。
2.内容流动
随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。如果你是使用像素和磅来进行设计的，这可能会有点棘手，但是当你习惯了之后，就会变得很有意义了。
3.相对单位
画布大小可以是desktop、mobile或是它们之间的任何尺寸。像素密度也可以有所不同，所以我们需要灵活的、在各种屏幕上都可以使用的单位。这就是相对单位(如百分比)派上用场的时候了。所以设置50%的宽度也就意味着它会占据屏幕(或视图，即打开的浏览器窗口的尺寸)的一半。
4.断点
断点允许布局在预定义的点改变。例如:desktop屏幕上有3列，但是在mobile上只有一列。大多数CSS属性可以根据断点改变。通常你会根据具体的内容来设置断点。如果一个句子超过了屏幕长度，你可能就需要为其添加一个断点。但是使用断点是需要谨慎——当它很难理解什么内容会影响什么内容的时候，它可能会迅速地导致混乱。
5.最大值和最小值
有时候，如果内容占据了屏幕的整个宽度是很好的，比如在移动设备上。但是如果是在电视屏幕上，相同的内容，占据了你的屏幕整个的宽度，通常就意义不大了。这就是Min/Max值发挥作用的时候了。比如说，设置width为100%，然后max-width是1000px，那么内容会填满屏幕，但是不会超过1000px。
6.嵌套对象
还记得相对位置吗?让很多元素的位置依赖于其它元素来定位是很难控制好的，因此使用容器来包裹元素可以让它更易理解，也更整洁。这就是静态单位(比如像素)发挥作用的时候了。对于你不想要模块化的内容(比如logo或按钮)，它们是有用的。
优先 还是Desktop优先
从技术上讲，如果一个项目是从一个较小的屏幕开始，变成较大的屏幕(mobile优先)，还是反过来(desktop优先)，并没有太大的差别。然 而它还是增加了额外的限制，可以帮助你决定是否从mobile优先开始。通常大家在一开始的时候都会两端一起写，所以，还是看看哪个运行起来更好。
8.网页字体 vs 系统字体
希望你的网站上有很酷的Futura或Didot字体吗?可以使用网页字体!虽然它们看起来非常棒，但是记住字体放得越多，你加载页面的时间也会越长。在另一方面，加载系统字体确是快如闪电，但当用户本地没有这套字体时，它就会返回默认的字体。
9.位图 vs 矢量图
你是否想过在图标上添加很多的细节和花哨的效果?如果想过的话，使用位图比较合适。如果没有，可以考虑使用矢量图。对于位图，使用的是jpg、png或gif格 式的图像，而对于矢量图，最好的选择是SVG或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片必须经过优化。另一个方 面，矢量图通常比较小，但是一些旧版的浏览器不支持。此外，如果它有很多曲线的话，它也可能会比位图要重。所以，慎重选择。
RWD响应式网页设计基本原则
RWD响应式网页设计对于解决多尺寸屏幕问题是个很好的解决方案，从平面的角度切入需克服很多困难，没有固定的页面尺寸、没有毫米或英寸，没有任何限制会让人感到无从下手。随着建立网站的小工具越来越多， 网页设计若只局限于电脑版或手机版已不在适用。因此我们来厘清，如何运用RWD响应式网页设计的各项基本原则，来建立一个流畅的网页。为了简单起见，我们将着重于布局。
响应式网页设计(Responsive) Vs 自适应网页设计(Adaptive)
这两种设计方式彼此相辅相成没有对错之分，具体情况要依内容而定。
内容流
网页随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说网页内容会向下方延伸，这就叫做内容流。如果已习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。
相对位置 Relative units
使用者的网页显示器可能是桌机屏幕，也可能是行动装置或者介于两者之间任何的显示器。像素的须跟随屏幕尺寸改变，因而需要灵活能够适应各种情况的单位。百分比相对单位就很好运用，宽度50%就是表示宽度占浏览器视窗大小的一半。
截断点 Breakpoints
断点可以让网页版面布局在预设的点进行变形，也就是说，在桌机网页上显示3栏，在移动装置网页上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于网页内容。比如一句话要换行，可能就需要加上断点。但断点使用时需要谨慎，如果搞不清内容之间的逻辑关系，很容易弄的一团乱。
最大和最小值 Max width
在行动装置有时网页内容占满整个屏幕宽度，但如果相同的网页内容在桌机屏幕上也撑得满满的，版面就不太适当。因而有宽度最大/最小值的设定。例如行动装置宽度为100%，最大宽度1000px，大屏幕的内容就会以不超过1000px。
巢状物件 Nested objects
如果网页很多元素彼此都要互相关连将难以控制。因此将元素放置到容器中就会让它们变得更好管理，并且简洁明快。静态单位像是像素，对于是否要缩放的内容很有用，如 logo 跟按钮。
移动优先还是桌机优先 Mobile or Desktop first
网页从小屏幕转到大屏幕(移动优先)，还是从大屏幕转到小屏幕(桌机优先)区别不大。如果以行动端优先， 在网页设计上会多一些需考量的限制。通常两方面同时着手，所以还是必须考虑网页使用者习惯与市场。
网页字体 vs 系统字体 Webfonts vs System fonts
网页字体很多元，但这些字体都需要载入时间，字越多载入页面的时间也就越长。系统字体加载速度则快得多，使用者本机就有内建这些字型。
点阵图 vs 向量图 Bitmap images vs Vectors
你的图片是否有很多细节，并且应用了很多华丽的效果?如果是，那就用点阵图。如果不是，考虑使用向量图。如果是点阵图，使用jpg、png 或 gif。向量图则使用 SVG 或图标字体。但必须注意档案的大小，未经过优化的图片不能传到网上。向量图通常档案比较小，不过部分较旧的浏览器可能不支援向量图。如果图片有很多曲线，档案有可能会点阵图还大，所以要明智取舍。
响应式网页设计流程的思考
“自适应网页设计“这个装置，独立设计理念已经像野火一样蔓延在社区的设计与开发。规模较大的企业界接受响应式网页设计的证据在2011开始显著的重新设计的星巴克，时代杂志和波士顿环球网站。这并不奇怪，在用来上网–手机，不同的设备数量的迅速增加平板电脑、手持游戏设备，游戏机，冰箱，谁知道还有什么在不久的将来。我们最近的文章”响应式网页设计21新鲜的例子“突出了一些神奇的网站展示响应网页设计的美丽和能力。
然而，资源成本比“传统”的网页设计绝对是相对较高的，有说法称它将花费至少50%来开发一个响应式网站设计。虽然现在有越来越多的资源，响应网页设计来对付这种模板和框架，作为设计师和开发者，我们如何优化我们的工作效率呢?正如响应网页设计是不断演化的，所以将响应式网页设计流程。本文将响应式网页设计工作流的一些主要因素。
[图片1]
为什么要改变我们的工作流程?
通过提高效率，显著节省时间。无论你是为赚更多的钱，花更多的时间在你的PlayStation或创新更好的网页设计–远离经典网页设计的工作流程是必须的。> > >发现线框设计发展>的推出，这种粗糙的一步一步的“瀑布”的过程进行网站设计的开发已被证明和大多数网站将大约三或四年前以这种方式创建。
传统的Web设计流程
有明显的缺陷涉及使用这种传统的方法与响应的网页设计。这是我第一次参与响应的网页设计项目，花费的时间大约是五倍的老学校的固定宽度的网站项目。想象一下，交给每一个单页网站布局和视口大小的位图设计。它是否会使用原型，视觉模式，在浏览器或作出响应的设计决策设计及时–一点一滴的节省的时间加起来。认为响应式网页设计流程是灵活的，就像设计本身。
内容第一
在任何网站的内容始终是重要的，但现在比以往任何时候更具有响应式网页设计。在你的计划和头脑风暴的结构不管，它是确定内容的优先顺序至关重要。一个使用响应式设计和专用或移动网站设计在内容交付之间最大的差异。所有的用户可以访问所有内容的网站所提供的–这背后是响应式网页设计希望你或你的客户喜欢的网站响应的原因的哲学。
本书内容溢出
在响应式设计，对任何内容的重要性权重是关键由于内容阶方差取决于设备的可能性。泛滥的内容是在响应式网页设计由于拟合相同数量的内容在桌面屏幕的要求，移动设备的常见问题。考虑更多的问题在你的客户调查问卷，在最初的接触或在早期的研讨会来减轻可能的问题后，在你的响应Web项目的生命。
设备规划
“你怎么没有iPhone的一个布局呢?五十的用户完美的查看我们的网站在iPhone”，作为一个客户，摇了摇头，失望–这是我的第一个错误学习。一个坚定的把握对项目的要求和内容的量，希望这不会太难决定哪个设备宽度和多少不同宽度的设计。这响应式设计规划的简单装置图是一个可下载的Photoshop文件的理想宽度为三至六的布局设计。这个决定无疑是第一你做设计时的响应。
设备规划宽度
在浏览器与PS图象处理软件和焰火设计
在浏览器设计的优点是响应式网页设计放大，“用Photoshop为响应设计烟花是像把刀”安迪·克拉克(–枪战。“说大话)。不可否认，有些项目将提供更快的结果和真实的，“当场”测试。熟悉的工具如萤火虫和firesass将“枪”这个“枪战”，设计师可以利用HTML5和CSS3将找到原型非常快。决策，如颜色和浏览器中的字体大小可以非常有效。
萤火虫
我个人很欣赏在浏览器设计的许多好处。我试过这个方法好几次，但我发现我还是喜欢开始Photoshop。我喜欢杰瑞米吉拉德“设计到极端”的方法，从网站的桌面版本。一旦我满意的字体，图像，桌面的网站风格和整体的设计方向，我工作在最小的布局或“网站使用类似的视觉方向，调整布局适当移动版”。我喜欢这个工作流程以及针对客户要求任意设计一个完整的检修的可能性。然而，我喜欢的绝对不是适合每个人、每个项目。
草图
“花很短的时间素描你可以节省几个小时在电脑上。你不仅能节省自己的时间，你甚至可以买得起自己安心一些。每当那个邪恶的怪物“设计师的块在蠕动，它不可避免地留下一个破坏性的自我怀疑的道路它醒来。我挑战你，开始用素描作为你的过程的一部分，你会看到在次你打虚拟墙虚无的数量明显减少。”
Tara Roskell(–“designbloguk)。我敢肯定，草图已经大部分设计师的工作流程的一部分，它现在比以往任何时候都更加重要的响应网页设计的时代。
响应式设计素描
考虑到许多敏感的网页设计师直接跳到浏览器，它是以测试首先提交时间为HTML / CSS的已有观念尤其重要。我用响应式设计速写本使素描生活的微风;我经历这些笔记小说非常快。你会惊奇地发现，大量的问题和内容布局挑战你不想为你勾画出你的设计思路。
情绪板和风格的瓷砖
情绪板一直在平面设计的世界存在。概念收集意象统领全局的“感觉”，一个网站的设计是完美的响应式网页设计既然是完全有可能的六个视觉上完全不同的布局(虽然很少)。有规律的锻炼我与客户是目前与三略有不同的情绪板来确定哪些风格的共鸣与客户需求最开始设计之前。这消除了人们的猜测从响应式网页设计流程来减少多个设计修改的机会。
B2B网站设计的要点
一、一个中心
所谓一个中心是指以用户体验为中心，两个基本点是指以寻找产品差异化，寻找盈利模式点。那么四项基本原则是针对一个中心，即用户体验为中心的阐述。
我们在做网站的产品设计的时候，最为核心的问题当然是用户体验，没有好的用户体验，任何对网站的畅想都是空中楼阁。好的用户体验是一个网站推广与网站对于用户黏性的保障。而很多网站成功的最大因素也是用户体验的完美。随着用户体验的不断深化，很多网站也把用户体验提高到了网站建设的核心模块，那么究竟什么是用户体验呢?用最简单的话说用户体验就是:“用户以快的方式找到其所需要的内容"。用户体验直接决定着用户的数量，而用户的数量直接决定着网站的成败!所以我们把用户体验作为整个产品设计中最为重要的环节，也是整个网站设计的中心点。
二、两个基本点
1、寻找产品差异:
即寻找产品功能差异化，不同网站同一产品提产的功能却有所不同，这就是产品差异化。 由于网站的产品特点是技术含量相对较低，可模仿性强。所以一款产品上线获得成功，马上就会有大量的模仿网站出现。但功能上的完全相同势必会造成用户浏览上的乏味，先入为主的网站也使你的产品没有立足的可能。只有从功能上寻找突破点才能使用户对网站有兴奋点。
所以，产品差异化是实现网站核心竞争力的手段之一，是指很多网站虽然定位相似，但实际功能却并不相同，只有不同的产品才能给用户以新的体验，也才能够使你的产品有自己的特色，也才能在众多的网站当中立足。如三大门户网站虽然起初都以资讯为主，但如今搜狐以娱乐为主，新浪资讯为主，而网易则以邮箱和游戏为主，分别发展了自己不同领域的产品功能，这就是网站产品定位中的差异化的表现。谷歌搜索推出的理念是精英搜索，而百度则面对的是国人娱乐搜索与电子商务平台搜索，不同网站同一产品提产的功能却有所不同，这就是产品功能的差异化。
2、寻找盈利模式:
盈利模式是一个网站生存的根本，网站的人气固然重要，但很多网站都是有人气没财气，比如很多在国内知名的博客社区，每日访问量很大，但由于没有好的盈利模式连经营也很成问题，当初如果不是靠别人收购恐怕服务器费用都是问题。更何况现在的网站大都需要团队作战，如果没有很好的盈利模式，坐吃山空很难维持开支。所以在设计产品的同时也要兼顾盈利模式的设计思路。又了清晰的盈利模式就能更好的组织产品结构。马云曾说过没有盈利模式就是最好的盈利模式，所以淘宝网在建立之处没有收取差价的功能设计，没有店铺收费的功能设计，但确在后面设计了支付宝，靠着支付宝大量的滞纳资金，既可以成为最有效的盈利模式。我想也许马云在设计淘宝网之初对于庞大的队伍开支，应该已经有了比较清晰的盈利模式。
三、四项基本原则
对于四项基本原则其实是对用户体验的阐述，它包括内容、使用性、技术性与品牌。
a、内容
内容指网站的整体结构，网站形成的元素等，表现在文字，图片，多媒体等形式。
1.重要内容核心位置的摆放:重要内容应该按照网络浏览热度图的规则安排在点击率最高的区域。
2.网站内容关联性所提供的引导性阅读，便于用户更快的找到其所需的内容。
3.提供内容的准确性，资讯类网站内容的及时性。
4.板块间内容的清晰划分，与频道内容的专一性定位。
5.针对主要目标受众的优化。导航的措词，文章的属性等因素。针对不同群体和年龄的网站应该用不同群体的语言和文章。
6.网站管理人员人为的管理与更新。
7.多语言的综合性辅助内容。
b、使用性
使用性包括对所有网站的内容和特点的易用性与友好性，使客户更好的通过网站达到其要获取的目的。避免产生因错误引起的挫败感。
1.使用上的简易性:网站快速帮助浏览者达到其最终访问的目的。使用功能尽可能的简单化，尽量实现少用键盘多用鼠标，而使用鼠标也应该注重一次点击实现最终结果的功能。
2.防止错误以及障碍的产生:防止死链接，防止错链接，防止死图片，防止因广告阻碍点击而影响使用、防止广告自动发声等。
3.用户及时获得对其浏览过程中所需的反馈。如其所浏览过的页面与项目，关注过的人等浏览轨迹。其提交信息后的提示等。
4.及时准确的互动提示。如会员信息提示，邮件更新提示等等。
5 功能的详尽性。提供的功能不要模糊不清，重要项目需要自填，不要设立菜单选择选项。如51job要求工资一项设计下拉选项，并且标明4500-6000元，这样不仅数字跨度太大，而其没有自填项，使用户很难表达清晰自己的意图。
c、技术性
技术性包括所有的网站技术上的指标与所实现功能，其最终目标是通过技术手段使浏览者实现其所需功能。
1、网站的打开浏览速度。
2、网站数据库的相互关联性(提供相互关联的关键词链接、与不同网站同一旗下的用户数据统一等)。
3、网站访问的安全性与个人隐私的保护。
4、后台管理的逻辑性与合理性。
5、搜索功能的精准性设计。
6、浏览器的兼容性。
d.品牌
用来衡量网站品牌的描述包括:
1.网站的视觉效果的一致性。包括布局方式、文字格式、链接式样、项目符号、板块边距等等。
2.行业内网站的知名度以及相关网站的链接度。
3.网站品牌在网络上的推广度。