响应式 网页 设计 原则

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显现3栏，在移动设备上仅显现1栏。下面介绍响应式网页设计原则，希望对您有帮助。

1.响应式设计vs自适应网页设计

看似相同实则不然。这两种设计方法彼此相得益彰，所以说也没有对错之分。具体情况要依内容而定。

【资料图】

2.内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了运用像素和点进行设计，可能会觉得这个有点难掌握。不过不要紧，习惯了就很好理解了。

3.相对单位

你的设计目标可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要运用灵敏可变，而且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度50%就是表示宽度占屏幕大小(或许叫视区，也就是指所打开浏览器窗口的大小)的一半。

4.断点

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显现3栏，在移动设备上仅显现1栏。大多数CSS特点都能够实现断点之间的变形。断点放置的位置一般取决于内容。比方，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

5.最大和最小值

有时候内容占满整个屏幕宽度(例如在移动设备上)是好事，但如果相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这就是为什么要有最大/最小值。例如，如果宽度为100%，最大宽度1000px，那么内容就会以不超越1000px的宽度填充屏幕。

6.嵌套对象

还记得相对位置吗?如果一大堆要素彼此都紧密联系，那么必将难以操控。因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明了。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

7.移动优先还是台式桌面优先

严格来说，项目从小屏幕入手过渡到大屏幕(移动优先)，还是从大屏幕下手过渡到小屏幕(台式桌面优先)区别不大。但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策。通常情况下我们会从两方面同时着手，所以你还是要看哪种方式最适合你。

8.web字体vs系统字体

想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。虽然web字体看起来很炫酷，但你要记住，这些字体都需求用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多(条件是用户本机就有)，但太过一般。

9.位图vs矢量图

你的图标是否有许多细节，而且应用了许多华丽的效果?如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用jpg、png或gif。矢量图则最好运用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图一般比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有许多曲线，那有可能会比位图还大，所以要正确取舍。

总之，在进行响应式网页设计时，不是盲目的去操作，除了要根据客户的需求，来进行设计外，其次还需要注意以上的几个原则，要知道设计都是给人看的，所以用户体验也是最重要的，掌握好设计的技巧，才能设计出优秀的作品。

网页设计的基本原则

⒈符合受众心理与社会心理需求

懂得不同的受众以及不同社会层面的不同心理需求，是网页设计者应掌握的一项基本原则。在网页设计创作之前，设计者要对所表达对象的文化背景、审美心理以及审美感知等作一系列相应的了解。对不同的地方，设计者还要进行一定区域民俗文化现象的了解与学习。只有这样，设计出的网页作品才能与设计对象产生紧密联系，达到读者与作品的心连心、面与面的交流。

⒉分析用户需求，注意内容布局

设计者在设计网页时应该明确网站的类别，例如是企业网站、政府网站还是个人网页等等。因为不同类型的网页具有不同的主题与风格，设计网页时不能喧宾夺主，也不能主题与网站类别属性相矛盾，在图片、文字、色彩使用上要合理选择。所以，网页设计的第一步应该以用户需求和网站的类别为导向，所有的设计工作都应该围绕这个前提，正确定位，不能脱离主题。

⒊设计主题定位准确

网页设计是一种按照一定需要，有目的进行的一种计划与预定。其突出特点就是具有相当的制约性和约束力，即受到设计主题的限制和约束。网页设计作品应有自己鲜明主题，主题目标的鲜明性决定了设计的鲜明个性特征。设计主题定位要求准确，这是设计原则中的首要问题。网页主题是设计传递内容的主要信息，设计者应该充分运用所要传达的特定信息，调动画面中所有的视觉因素，使之发挥出最大的视觉效果，设计的定位要始终牢牢地把握住设计主题。

⒋网页下载的时间不能过长

为了保证网站有不断增长的点击率，除了有吸引人的内容之外，还要有较快的下载速度。网页加载速度对于一个网站而言是十分重要的，它直接影响用户的访问体验和满意度。如果2030秒还不能打开一个网页，一般人就会没有耐心。至少应该确保主页速度尽可能快，如没有必要，最好不要用大的图片，或者对图片进行压缩使用。

⒌网页对不同操作系统、浏览器的兼容

通常情况下，人们所设计的网页都在一种操作系统和浏览器中进行调试。在互联网中，有各式各样的操作系统和浏览器，网页中的一些技术、插件在不同的操作系统和浏览器中的效果是不同的，有的甚至根本无法兼容，因此要充分考虑网页的兼容性。比较常见的办法是在不同的操作系统和浏览器中做测试，保证最大的兼容性。⒍经常进行调试及数据更新为吸引更多用户，网站中的信息必须经常更新，如新闻、图片资料等。同时，由于网站要经常进行修改更新，网页之间的链接有时会出现断开现象，因此，要经常做网站的调试，检查是否有链接出错的地方并进行修复，以维护网站的正常运行。

网站建设中让用户厌烦的因素

在网站的建设中，除了结构不出错、尽量填充对用户有用的信息之外，还有另外一个因素也十分重要，就是要尽量摒弃掉一些会让用户产生反感的元素。试想，如果你是用户，在打开一个网站时面临着铺天盖地的广告、弹出框或者是好半天也加载不完的首页，那么你还有兴趣继续看下去吗?我想此时大多数人都会选择直接关闭网站，所以在网站的建设中，一定要避免这些因素过多出现的情况，那么容易让用户厌烦的因素有哪些呢?

一、会对用户浏览产生干扰的内容

如果说在页面中的广告现在大部分用户已经见怪不怪的话，那么突然弹出并且遮挡内容，或是嵌入在主题内容中导致排版改变的广告大概大多数人仍然接受不了。

包括在浏览过程中定时出现的弹出框——你每过几分钟都要手动去关闭一次，还有一些假QQ提醒声音等，都会严重的影响用户的浏览体验。如果你不像流失大量用户，那么就最好不要让这些内容出现在网站里。

二、不清晰的导航栏

导航栏存在的目的就是为了帮助用户能够迅速找到他想要的内容。但事实上，有很多网站的导航栏并没有做到这一点，甚至让用户使用起来更加麻烦，如果这样的话，那么导航栏存在的唯一意义就只是一串代码组成的装饰品，而且这个装饰品恐怕不会给用户带来好心情。

有些网站的导航栏做的条理不清，或者是一些浮夸的设计使文字很难被看清甚至直接遮挡。在设计导航栏时，一定要基于简单、直观且易于观察的前提之下，否则这个导航栏还不如没有。

三、保持排版的整洁

就像人们都不喜欢自己的屋子太脏乱一样，一个简洁干净的排版更能收获用户的好感。反之，那些混乱不堪的排版简直是用户的噩梦，相信他们也不会再有兴趣第二次进入这样的网站。

四、保证网站功能不出现问题

对于有些网站而言，这并不是什么问题，但是出现不可用功能的网站绝非少数。网站想要给用户带来良好的体验，首先要保证你所展示给用户的内容是不存在问题的——如果出现了问题也至少及时让这些内容消失。

然而事实上，有大量网站的某些链接或者按钮是打不开的，可能出现这种问题有网站自己的苦衷，但用户并不知道这些，反而这会严重的影响到用户的使用体验，尤其是在这些标题已经引起了他们浓厚兴趣的前提下。

五、可读性差的内容不会给用户带来好感

这里的可读性指的是用户在阅读网站内容时所产生的真切的感受。包括排版、文字的大小、文字的格式和背景色等等。在进行页面设计的时候应该以“怎样的设计能让用户阅读时更加舒服”为主而不是“怎样的设计更加炫酷而且高大上”。

网站建设的细节有哪些

网站在建设时，如果可以在细节方面多一些把控，那么将会让网站在激烈的竞争中脱颖而出。在现在的互联网上，有不计其数的网站呈现在用户眼前，那网站在建设时不容忽略的一些细节有什么?

一、不要欺骗用户

这一点说出来可能让人觉得比较严重，但事实上确实有不少的网站存在着欺骗用户的行为。比如：在标题或者显眼的位置标注出某些内容可以免费使用，但是当用户真的要下载使用或者浏览一些内容时，却被告知需要花钱购买，这就是一种欺骗的行为。打着免费的旗号吸引用户但当用户真的接触到核心内容时就要收费，这样非常损害用户的使用体验。

网站利用一些核心内容来盈利无可厚非，但是不应该使用这种类似于标题党的方法来诱导用户，如果你的内容真的对用户有价值，那么即使从一开始就明确的告诉用户需要收费，想必也是有很大一部分用户是乐于买账的，而如果本身的内容不够优秀，又依靠这种方式来获取流量的话，那么换来的只能是更高的跳出率和更差的口碑。

如果网站建设的初衷就是通过这些优质的内容来盈利，那么完全可以在建设网站时就将注册和登录按钮突显出来，并以此来提醒用户：“如果您需要浏览核心内容，那么我们是要收取费用的。”如果是这样的话，用户也能接受，网站也可以获得利润，那么这种设计就十分成功了。

二、做好网站内容的选择和排版

其实内容的选择更多的可以看做是运营的工作，但是网站的主题是在建站时期就确定的，在日后的运营和内容的填充中都要围绕着这个主题来进行，所以内容的选择是一个一定要在建站时期就确定的问题。

确定了内容之后，就可以围绕这一主题进行相关的设计，因为根据网站类型和主题的不同，设计风格上也有着不小的差异。比如商务类的网站最好使用一些冷色调作为主题色，而如果是母婴用品类网站，自然就要选择一些可爱的颜色作为主体颜色。

所以针对网站类型的不同和针对人群的不同，只有确定了网站的内容才能够对网站进行良好的设计和排版，这样能够最大程度的带给用户更加舒适的浏览体验，同时也能让用户浏览网站时觉得更加自然。

内容的选择和网站的排版是互相衬托的，所以这两项工作也最好同时进行，也可以在建设的过程中进行一些调整和修改，直到内容和排版、布局等看起来十分和谐。

三、做好404页面的设计

404页面是用户最不想看到的页面之一，但同时也是一家网站几乎不可能避免的页面。很多原因都会导致404页面的出现，想要让它不被用户看见几乎不可能，但是在建站时能够做到的是让用户看到精心设计过的404页面，并借此缓解他们此时糟糕的心情。

这一点十分重要，如果404页面的设计是比较走心的话，确实可以让用户变得不那么暴躁，甚至也可能让用户理解网站，如果能够做到这一点的话，那么这个404页面的设计就是比较成功的了。更有甚者，一些设计巧妙的错误页面可以吸引用户驻留一段时间，而在这段时间里，用户的动作很可能会从“关闭网站”转换到“跳向其他网页”，如果能做到这样的话，就成功的挽留了用户。

在网站的建设时，一些细节处的用心总能让你有意外的收获，建站时的每一处细节都会被用户发现，从而使他们内心对你的网站多一分认同。所以在网站建设时，只有更多的注意细节方面的问题，才能让网站趋于完美。