网站改版设计和布局

建设一个网站很不容易，时间、人力、经济上都会投入很多成本，但随着时间的推移，企业网站势必会涉及到网站改版的问题，如何重新设计一个网站，什么时候网站需要重新设计，实际上网站页面设计这几个情况下，网站改版就要着手进行了。如果出现以下问题，企业网站是一定需要考虑重新设计了：

1、网站跳出率偏高

网站跳出率是指访问者到达您的网站某一个页面后没有进一步访问其他页面就离开了您的网站，这个跳出率可以通过GoogleAnalytics(分析)或者百度分析查看。虽然按照行业及网站类型不同，跳出率会有所不同，但平均值大约在40%到55%左右，从另一个角度说100个网站里，有大约55个网站只被访问了一个页面。

2、网页加载时间超过3秒

如果时间超过三秒，则应寻找技术人员重点解决或者考虑重建您的网站。一项研究发现：将近一半的访问者放弃了三秒钟(或更少的时间)无法加载完成的网站;而另一项研究指出：网站加载时间每增加一秒钟，转化次数会减少7%。

3、网站页面缺少基本的SEO元素

网站要在Googl、百度、Bing和其他搜索引擎上有良好的曝光度，则必须执行页面搜索引擎优化(SEO)。例如：每个页面都应该有一个唯一的标题标签来描述页面的主要内容。标题标签是一个HTML元素，在打开页面时会显示在浏览器选项卡中，搜索引擎将使用该标签创建搜索结果列表，该标签内容会显示在搜索结果中。现在有统计数据显示：访问网站的所有互联网用户中有五分之三是通过移动设备访问的。但是，如果您的网站无法在移动设备上正常运行，则这些用户可能会放弃该网站。您可以使用自适应设计来更新您的网站，以使其在移动设备上兼容。响应式设计使用比例单位实现动态布局，它能够自动适应所有浏览设备提升访问体验。

4、导航比较复杂

从搜索排名和跳出率到网站转化和用户满意度，导航几乎可以影响网站性能的每个方面。用户首次访问您的网站时，应该能够轻松找到特定内容。如果导航复杂或令人困惑，访问者不会停留很长时间，也不会参与到您的业务中来。将自己置身于网站的典型访问者模式中，通过单击导航链接尝试查找特定的内容。如果在桌面端三次点击以内无法找到内容或在移动设备上无法轻松找到内容，这需要更新网站以曾现更为简洁易于学习的导航结构。

5、与品牌形象不匹配

如果网站与您的品牌形象不匹配，则需要对其进行重新设计。从徽标到标题的字体以至文章的格式，网站上的每个元素都必须反映您企业的品牌形象。否则，访问者很难记住您的业务内容及提供的服务。以品牌为中心对网站进行全面改造比较耗时，但这对于为企业创建独特的身份至关重要。当人们访问网站时，会看到品牌元素，这些元素将与您的业务下意识地关联起来。

6、网站包含死链接

无效链接也称为断开的链接，对网站的用户体验有害。它们看起来像普通的链接，但是正如它们的名称所暗示的那样，它们在单击时不会将访问者引导到预期的页面。相反，无效链接会将访问者引导至404错误页面，这通常会导致人们失望地离开站点。

7、无效的CTA

请注意点击网站CTA用户所占的百分比，这被称为点击率(CTR)，反映了网站的CTA是否能够吸引访问者的注意力，并使他们点击链接的文本或图像。如果网站CTA点击率很低(大多数网站低于3%)，请尝试重新设计CTA。更改CTA的位置，形状，颜色，文本都会影响它的性能。

8、较多的安全问题

如果常常需要解决网站的技术问题而不是考虑如何优化网站，那么就需要研究新的服务器托管方案、或者是选用新的内容管理系统，甚至重新设计网站的功能和框架。没有什么比网站持续稳定的工作更能够帮助你专注于发展企业的业务。在设计之初考虑一定的伸缩性也很有必要，为将来业务的发展留下网站扩展空间。另外缺少SSL安全证书是一个非常严重的问题，需要联系建设商尽快为网站安装。如果不能安装，需要考虑重新设计网站。

布局方式，本质上就是去处理窗口宽度与网页内容的关系。用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？网页布局通常会分为：固定布局、流式布局、自适应布局、响应式布局。

1.固定布局

固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容“写死固定”在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用px作为基础单位。当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条。固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题，固定布局通常出现在老旧的政府项目、网页的登录注册中。

2.流式布局

流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的“水”，通过在页面，设计不同的“杯子”容器来装下页面内容，这里的“水”一般指的是文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器，它高度固定，只会变化其宽度，比如卡片、外层容器控制宽度等等。因为“杯子”的限制，也就导致水会根据杯子的宽度进行延展流动，进而形成流式布局。使用流式布局可以通过较低的开发成本，来实现一个页面当中多尺寸的小范围适配，如果屏幕尺寸跨度较大，则会比较困难，而流式布局最常使用的方式就是通过栅格系统，来确定整个“杯子”的宽度，进而让“水”能够在页面当中实时滚动展示，这里有两个需要注意的点：

在研发层面，杯子的大小是需要进行限制的，通常会去设定它的最大值与最小值，当它超过最大值则居中对齐，当他在流式布局当中，窗口超过其最大值则固定左侧，右侧空白补充；窗口小于其最小值则展示横向滚动条。

流动的“水”需要去考虑它漫出的情况，即在“水杯”高度固定的情况下，整个宽度无法装下如此多“水”的情况，通常我们可以使用“…”进行标注。这个思路后续在响应式布局当中也会体现。

3.自适应布局

自适应布局是将差别较大的屏幕尺寸，去创建多个不同的设计稿，每一个设计稿去对应一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案。通俗一点来说，自适应就是去单独设计桌面端、平板端、移动端的页面，并且将它们三者进行独立，而系统通过不同尺寸间的屏幕断点/浏览器UA等进而适应出不同的设计页面。

自适应主要是表达多个设备尺寸下进行切换的布局方式，在不同的设备之间，也是需要去使用流式布局以及其他布局方式，而不同的设备之间，屏幕分辨率的差异就会涉及到一个关键点，屏幕断点。

屏幕断点，屏幕断点，又叫媒体查询@media，因为在整个设计当中，屏幕尺寸是极其复杂的，除了我们常见的尺寸：1920、1080、1440、1366，用户还可以通过调整窗口的大小，进而改变网页尺寸。而屏幕断点，最主要是判断屏幕的宽度，来确定目前的尺寸究竟应该采取什么设计方案。关于屏幕断点的媒体查询，是在前端CSS3代码当中，提供给用户校验整个屏幕的宽度。而确定断点才是这其核心，这里给大家提供两个思路，实际设计当中还会更为复杂：

物理断点：也就是屏幕当中，已经划分好的断点方式，比如显示器的全宽大小、不同设备之间的屏幕分辨率差异，

设计断点：在设计过程当中，一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题。

其实屏幕断点不是最终目的，最终还是想通过屏幕断点，将页面当中不同的不同元素的处理方式实现在设计稿中，如果不需要，完全可以不考虑增加屏幕断点。

4.响应式布局

响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。它更像是流式布局与自适应布局的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化。通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备。