您的位置:首页 > 技术分享 > 网络编程

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

umzs2013-05-29 06:05:21次浏览

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

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

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

1612292418138734.jpg
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、超大的导航菜单

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

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

5、乏味无趣的加载页面

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

解决办法:

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

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

6、设计臃肿,内容杂乱

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

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

7、对移动设备不够友好

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

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

8、无限滚动


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

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

Tags:网页  设计

取消

感谢您的支持,我会继续努力!

扫码支持
扫码打赏,建议金额1-10元

打开支付宝扫一扫,即可进行扫码打赏哦

文章评论