网页设计问题及解决方法

在某些情况下，GIF动画非常有趣，动画能够让访问者获得更好的使用体验，音效可能也有助于提升感受，但这些都只是点缀，切记不可画蛇添足。下面介绍网页设计问题及解决方法，希望对您有所帮助。

[图片0]

1、色彩种类运用过多

很多站长为了让自己的网站更有吸引力，往往会给网站增添一些绚丽的颜色，加入大量色彩鲜艳的文字与边框，而这些颜色的运用与图片内容并不协调。降低了网站内容的可读性。所以如何更好的把握网站<访问者的喜好,为用户提供一个可读性更强的网站?这其中颜色就起到了相当大的作用。

解决办法:最好的办法是使用最多三种主色调与素雅的背景。

2、字体大小存在问题

这类问题往往存在多种表现形式，包括字体不足12号使得用户无法看清甚至点不到后退按钮。很多网页的上的字体都是正常大小,对我们来说刚好,但是父母来说网页上的字就会偏小了。

解决办法:一般中文的字体大小是12px或者14px。随着显示器分辨率不断提高，12px的文字在大于1440*900的显示器里看起来会显得比较小，阅读起来不是很容易，所以现在网页设计里面用12px的已经比较少了，特别是文章正文部分，普遍都会用14px。

3、过度使用GIF、动画与音效

在某些情况下，GIF动画非常有趣;动画能够让访问者获得更好的使用体验;音效可能也有助于提升感受。但这些都只是点缀，切记不可画蛇添足。GIF动画过多会造成一种庸俗而幼稚的氛围，而大家对于音效以及音乐的取向也有所不同。有时，我们精心设计，却难以实现效果。

解决办法:千万别让费尽心力添加的动画与音效成了刺眼又刺耳的垃圾元素。使用GIF动画最好能免则免

4、超大的导航菜单

大型的导航菜单，对于包含大量不同子页面的网站而言，似乎是一个很好的解决方案，然而实际情况并非如此。我们常见的网站设计错误就是在边栏及子菜单中塞进长长的清单，超大的导航菜单对于绝大多数的普通用户而言，看起来更像是迷宫。这看似满足了全部用户的需求，实则会分散用户注意力，并让用户觉得不那么爽。如果导航、侧栏与底栏无法协同工作，那么网站内容再好也将没有意义。

解决办法:信息分类整合其实是就是为了应对这种情况而存在的，将网站的导航内容规划为不同的大分类，有了层级，用户更容易筛选;又或者你可以将导航设计成为更为有趣的图文式链接，让它看起来不那么枯燥，也不失为一个可取的方案。永远不要低估在屏幕上留白的重要性，因为其是创造平衡美感的重要基础。

5、乏味无趣的加载页面

随着技术的进步，时间对于人们来说越来越宝贵，为了一个20M的网页在浏览器前静静坐上1分钟等待加载，那大多数用户都会有关掉它的冲动，因为我们会在这个过程中无数次怀疑这个页面是不是卡住了。如今的网站加载需要的是速度和效率，这符合当前的真实用户需求。给用户提供即时的位置、时间和响应对一个优秀的产品来说很重要。

解决办法:

如果你的网站在加载速度上有问题，首先应该加载页面中较轻的元素，以及整个框架，然后使用加载器将较大和较重的元素逐步填充进去。这样一来，用户就不会觉得页面卡在那儿，而是在逐步加载了。

缓冲应该尽量避免，如果它必须存在，那就应该有趣一点。加载页面可以是一个加载进度条，一个为浪费用户等待时间的道歉或者是配有文案的简单动画。

6、设计臃肿，内容杂乱

不断增加的功能会导致需求和交付之间的延迟，这会让设计逐渐变得臃肿。将各类新闻、链接以及图片塞进同一页面只会使其显得杂乱不堪，导致用户难以阅读及导航。

解决办法:坚持增加必要且有价值的功能，尽量避免内容混乱多余。

如何设计网页布局

第一条 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。

第二条 合并重复的功能而使界面简洁

在整个网站开发期间我们会有意无意地创建很多模块，版面或者元素，而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块，它无用且降低了电脑性能。此外，界面上模块越多，用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

第三条 将不同区域的颜色区分出来

颜色，层次及模块间的对比这些视觉上的设计可以很好地帮助用户浏览你的网站:他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面，你就需要将可点击的元素(比如连接，按钮)，可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中，我将点击操作的元素设置为蓝色，选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

第四条 界面要有鲜明对比,让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后，你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面，以达到突出重心的目的。综合所有这些，最后得到的界面会使你的主要意图与界面其他元素有明显的区分，得到完美的呈现。

第五条 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的，单列滚动的长页面是不错的，但是我们应该适当地设置一些小节，并且环环相扣，来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

第六条 让界面平滑显示而不要死板地呈现

用户进行操作过程中，界面上的元素会经常出现，隐藏，打开，关闭，放大缩小移位等。给这些元素增加些自然的动画，淡入淡出效果不但美观，也更符合实际，本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长，那样会让想尽快完成操作的用户不耐烦。

第七条 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的作用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时，我们经常在界面上方便地拖出很多区块来，这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐，这样做不会让那些多余的线条来扰乱视觉。

第八条 界面设计得一致

界面设计中尽量保持一致性成了一个普遍遵循的准则。可以在很多方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。不过在让界面变得一致之前，记住一点，适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对，我们应遵从一致的设计准则，但适当地打破这种常规。

第九条 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明，可以在这些方面做文章:对齐方式，间距，颜色，缩进，字体大小，元素尺寸等。当所有这些调整运用得适当时，可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计，这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行，你可以乘坐高铁快速到达景区(从页面顶部瞟到底部)，但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方，而不是对着空白单调的一个屏幕。

第十条 优化页面加载速度，不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条，二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)。

效网页设计的主要原则

1.目的

伟大的网页设计总是考虑到用户的要求。您的网络客户是否在搜索娱乐，信息或某些互动?您的网站页面需要有一个明确的目的，并以最有吸引力的方式满足您的网站访问者的特定要求。

2.沟通

网络上的个人需要快速的信息，所以有必要清楚沟通，使您的信息简单阅读和消化。将一些有效的策略纳入您的网页设计中，包括:使用标题和小标题整理信息，使用子弹点而不是漫长的句子，切割华夫饼。

[图片1]

3.字体

一般来说，Sans Serif文字字体(如Arial和Verdana)在线阅读更为简单。在线阅读的基本字体大小为16px，最大为3个字体，最多为3个点，以保持您的设计合理化。

4.颜色

一个好的网页设计和一个很好的调色板可以提升用户体验。互补色彩创造和谐与平衡。使用对比色的内容和背景将使阅读更加简单。充满活力的色彩创造情感，应谨慎使用。为了包装起来，白色空间/负面空间是有效的给您的网站一个现代和整洁的外观。

5.图像

一张照片画了一千个字，为您的网站挑选正确的图片可以帮助您与目标受众进行品牌连接和定位。如果您手头上没有专业照片，请考虑购买图片以提升网站的外观。同样，考虑使用信息图表，图形和视频，因为这些在传达时可能比书写文字大。

6.您的网站导航

引导人们关注个人采取行动和移动您的网站的简单性。一些有效导航的策略包括智能页面层次结构，使用面包屑，设计可点击按钮，并遵循“三点一击”，这意味着用户将有能力在树状点击中发现他们正在搜索的信息。

7.网格布局

将内容随机放置在您的网页上可能会导致无关紧要的外观。基于网格的布局将内容整理到按照排列和调整的区域，部分和框中，从而提示网站设计更加美观。

8.“F”图案设计

眼睛跟踪研究的特点在于个人以“F”模式扫描计算机屏幕。人们看到的大部分是屏幕的顶部和左侧，通常屏幕的右侧很少见到。而不是试图驱动观众的视觉流动，有效设计的网站将与阅读者的自然行为一起工作，并显示信息的重要性。

9.加载时间

每个人都讨厌需要加载时间的网站。使页面加载时间更加活跃的提示包括简化图片尺寸(大小和尺寸)，将代码整合到基本的CSS或Javascript文档中，并将HTML，CSS和Javascript缩小。

10.手机友好

目前来看，通常有许多具有不同屏幕尺寸的设备可以访问网站，因此您必须考虑您的网站是否适合移动设备。但是，如果您的网站不适合移动设备，您可以在响应式布局中进行重建，也可以构建一个承诺的便携式网站。

创建一个令人愉快的功能的网站很容易，基本上记住了这些设计元素。这些有效的网页设计原则可以为您的网站提供一些帮助，为访客提供更多迷人，有用的和至关重要的。

网页设计配色原则

1. 需要配色的是你的画布，而不是你的图片

一个在网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台，目的是帮助突出网站的内容。所以，为了突出网页的内容，淡色才是首选。

2. 选择简单的灰色作为你网站的基调

你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，比如白色/浅灰色与深灰色的搭配文字背景。

你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性，并且把你的图片突出在最前方。

3. 只选择一种颜色突出显示

如果你选择好几种不同的色调来，那么你的配色方案绝大多数是有问题的。你颜色用得越多，你的页面就越来越难以控制。所以，在你网页以灰色基调的前提下，你最好只选择一种鲜艳的颜色来作为你想要突出的事物，比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色，等等。

你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器，并单击你彩色方块的中心。

4. 如果有疑问，请使用蓝色

如果你对你的高亮色的选择有疑惑的话，不妨使用蓝色。蓝色是一种弹性比较大的颜色，可以和很多种颜色搭配。

另一方面，如果你是用蓝色，那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好，不妨使用蓝色。比较安全的蓝色包括从海军蓝到深蓝色(H235-H190)，而我通常选择H205的蓝色。

5. 给你的高亮色增加变化

你一旦选择了高亮的颜色，从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色，高亮色的稍微变化会让你的颜色选择变得简单，但又不显得乏味。

6. 尽量不要使用颜色选择器右上角的颜色

颜色选择器的右上角是一块肥沃的土地。它们可以执行出惊人的效果，而且非常诱人，但通常想用好需要大量的经验。如果没有足够的经验，它们可能会导致事故的发生，所以最好以削弱你的颜色，最好都保持比较淡化的色彩。