您现在的位置是：首页 > 网站制作 > CSS3|Html5CSS3|Html5

别让这些闹心的套路，毁了你的网页设计

2018-11-08【CSS3|Html5】人已围观

简介网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题

网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题。

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

解决办法：最好的办法是使用最多三种主色调与素雅的背景。
1、推荐给大家两篇关于颜色搭配的文章《6条网页设计配色原则,让你秒变配色高手》以及《Web Color Design——设计师谈网页配色艺术》
2、如果你还在为获取web颜色而烦恼的话，建议你使用Color Scheme Designer取色工具，以不同的模式，可以让你一下获取相近的四个颜色。

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

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

对于font-family，一般来说14px及以下大小的文字，应当设置为宋体，当然也可以设置为微软雅黑。不过在XP下默认是没有雅黑字体的，所以在css里面可以这样设置字体： font-family:"Microsoft Yahei",simSun,Arial; 把几个字体用逗号隔开，如果系统没有第一种字体，就用第二种，如果没有第二种就用第三种，以此类推。对于大于14px的文字，特别是大于16px的文字，宋体看起来就比较丑陋了，所以建议是用黑体或者微软雅黑，看起来回舒服一些。

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

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

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

4、超大的导航菜单

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

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

5、乏味无趣的加载页面

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

解决办法：

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

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

6、设计臃肿，内容杂乱

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

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

7、对移动设备不够友好

智能手机已经成为人们在互联网上获取内容的最佳途径。大家的多数出站流量很可能都指向智能手机或者平板电脑。如果各网页没有针对移动设备进行优化，那么可能会面对难以进行正常访问等问题。

解决办法：让你的网页代码适应各种手机、平板等不同分辨率大小

8、无限滚动

无限滚动的出现，终于解决了移动端上查看繁复的分类页的问题。不过与此同时，无限滚动的设计，还为我们创造了不少从未遇到的新问题。举个例子，当你要访问一个重要的页面，而它正好在长滚动页面的底部，撇开加载页面的时间和流量不谈，滚到底部去找就已经是一个很头疼的事情了。

解决办法：就像超大的导航菜单一样，想要让它发挥作用一样有合理的解决方案。将传统的移动端页面和无限滚动两种模式结合起来使用，让用户自己来选择更适合自己的模式，这有助于提升页面的可访问性。