7个让人抓狂的网页设计

   有些时候,当我满怀期待地点开某些网站的时候 —— 它们的存在简直是设计的灾难!相信我,当你看见它们也会抓狂的。从莫名的链接丢失到糟糕的可用性,本文会分享一些会让人瞬间暴走的错误设计。注意!千万别让你的用户遇到和下面同样的问题。

  1. 缺乏对比度


  网页上的文字和图片都需要具备较高的可读性,最简单的方法就是让它们具有高对比度。但是许多设计师却经常忽视这条规则。

  图片背景与文字对比度太差,导致文字模糊不清无法阅读,用户不仅错过这段话也错过了你要传达的重要内容。

  你必须保证每一个元素都与它周围的其他元素区别开来,记住这些基本方法——色彩、空间、尺寸。合理地运用它们让你的每个元素都清晰可见吧!

  上图的两个对比问题——白色的文字与浅色的图片颜色过于相近以及过小的字号都让这段文字的可读性变得极差。

  2. 糟糕的导航和操作流程


  当我登陆了网页的第一眼,你就得让我明白接下来我该做哪个操作。点击按钮以及信息需要放在显眼的位置——这就是为什么导航和菜单栏往往处于页面的顶部。

  导航的标签内容和运行效果必须清晰直观,当你尝试使用水平方向的滚动条或者其他一些不太寻常的动效设计的时候,给用户一些暗示让他们知道你的网页如何工作吧!过于复杂的设计会让用户感到无所适从并放弃你的网站。

  3. 糟糕的图片搭配处理


  没有什么比一个优秀的图片被其他设计掩盖更糟糕了。如果你花了时间为你的网站搭配了一张优秀的图片,为什么要让它被其他的设计元素所覆盖呢?加上简单的一行字就可以了!这也是为什么透明按钮成为了新的流行趋势。

  当设计师追逐潮流的时候,经常会落入这样的误区。顶栏很有趣,滚动也很棒,可是当你为它们搭配上文字,一切就容易变得不那么和谐了。页面上的每个图片都需要与文本搭配,让每个文字都可读,图片上的每个设计元素都清晰可见。

  不要用文本或者按钮覆盖图片上任何重要的部分。当你觉得你的页面设计出现了这样的情况,最好更换一个更加简洁的背景并在其他地方放上你的这张图片吧。

  当第一眼看到上面这张图的时候你会被吸引是因为它的素描风格。但仔细看看,人物面部被文字遮盖了,那段褒奖之辞也让整体显得杂乱无章。

  4. 不使用网格


  在网页设计中,有些“杂乱”也能让人赏心悦目,不对称是其中的一种,不使用网格绝对不是!

  是否使用网格是区分设计好坏的专业指标之一。网格让一切变得清晰有组织性 —— 让你的元素之间保持一致的适当的间距,你知道应当把你的元素放在哪儿、怎么放。网格帮助你确定元素的尺寸、文本的尺寸和空间,通过比例展现内容的侧重点。

  5. 不采用响应式设计


  使用响应式设计框架!使用响应式设计框架!使用响应式设计框架!重要的事情说三遍! 你的网页或许需要在手机上运行,它必须要和在电脑上运行一样流畅。

  我总能遇到一些网站,在手机上加载出的是一整个页面。这些网站并不是响应式设计,至少没有手机版的视图,以至于用户无法使用。(虽然很不常见,但那些只提供手机版视图的网站也相当让人无奈。)

  或许很多用户和我一样,如果我不能在手机上顺利使用你的网站,那我也不会在我的电脑上打开它了。

  6. 链接丢失

  崩溃的链接是网页上最让人恼火的事之一。养成每年都去审核你的网页上链接是否畅通的习惯吧!你可以手动检查或是使用某些工具,比如Website Link Checker.

  如果你的logo并不能链接到你的网站首页,我也会感到奇怪。Logo都是要链接到网站首页的。(以及当处于首页的时候,不要禁用返回按钮。)

  考虑链接的可用性。保证你的链接,特别是那些文本中的链接足够明显并且易于点击而不造成误操作。不要在你的文本中添加很多文字链接,特别是在小的移动设备屏幕上,用户很难点击到正确的链接。

  7. 自动播放音乐


  在网页上添加声音会很生动,可千万别在没有用户提示的情况下播放音乐。

  你应当提供给用户一个打开/关闭音乐的按钮,并且默认关闭。音乐或许会让用户惊艳,可要是用户正处于工作环境或是心情很差的时候这么做却适得其反。用户需要能完全操控你的网页,而自动播放的音乐却与之背道而驰。我需要网页音乐但播放必须得到我的同意,如果我没办法找到按钮关闭自动播放的音乐,那只能直接关掉网页。

  但应用在广告上这倒是个不错的招数。如果你有有声音的内容必须要播放,考虑放一个大的弹出式静音按钮。用户往往会接受几秒钟的广告时间并会去阅读内容。虽然这不是一个理想的方法,却是一个比较好的解决方案。

  看看上面这张页面,它会自动播放音乐但应当是静音的。再看看能不能一眼找到切换按钮吧——按钮太小了特别是对比其他元素它更难被找到了。

  更严重的罪状

  没有最糟只有更糟,下面的一些细节设计错误也会让我弃之而去,别让你自己成为这些粗心犯的错误的受害者了。

  没有搜索功能

  语法或拼写错误

  没有呼叫功能

  文字中出现太多链接

  连字符连接的文本

  超小的按钮

  糟糕的排版和可读性

  每个人都很容易造成这些设计失误(你在整体设计很棒的网站上也会发现这些潜在问题)。在设计和开发过程中关注这些小细节,你可以成功避开这些失误。别惹你的用户生气(严肃脸)!

时间: 2024-08-03 17:19:15

7个让人抓狂的网页设计的相关文章

64位Vista SP1的两个让人抓狂的bug

使用32位Vista SP1的用户也许暗自庆幸没有使用64位的Vista SP1,因为,64位的Vista SP1又爆出两个新的bug.这两个新出现的bug简直有些令人抓狂.不过,目前还没有证实其他使用64位Vista SP1的用户也遇见这两个新的bug. 最先发现这两个新bug的用户用电子邮件的方式向IT媒体作了相关的报道.一个问题是使用64位Vista终极版用户采用双核处理器,系统的Windows Mobile Device Center将会发生错误. 图 1Windows Mobile发生

iPad 6曝光:屏幕改进让人抓狂!

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 iPad 6会不会在今晚一同亮相呢? 现在有用户在微博上给出了iPad 6的一些消息,让人最无语的是,起屏幕变成了一体的,也就是说内屏和外屏做成一体,这样带来的后果是,玻璃碎了就要换一整个屏幕. 与此同时,该用户带来的消息还显示,iPad 6拥有金色版本,而之前的传闻则显示,该机的屏幕加入防眩光屏幕图层,指纹识别传感器,搭载A8处理器等等.

网页设计中7个令人抓狂的错误

糟糕的网页设计会给用户带来糟糕的体验,从而影响网页的流量,或是产品的销售.那么在设计网页的过程中,应该避免出现哪些错误呢? 所有人都知道网页设计的重要性,糟糕的网页设计会给用户带来糟糕的体验,从而影响网页的流量,或是产品的销售.那么在设计网页的过程中,应该避免出现哪些错误呢? 1. 要求用户必须注册才能浏览网页内容 这种做法足以让用户立刻感到气愤不已.也许这样做能够让你获得一些注册用户,但是你失去的远比所得到的要多. 2. 忘记针对不同设备优化网页 要知道,现在很多用户都不再使用PC浏览网页了.

令人抓狂太空科普网站

  我们都知道宇宙很大很大很大,但究竟有多大,恐怕绝大多数人都没有明确的概念.其实是,即便是我们身在的小小太阳系,它庞大的程度也足以让人抓狂.刘慈欣的科幻小说<三体2:黑暗森林>中有这么一个场景,在面对真实比例的太阳系地图时,中国太空军的第一批军官们几乎都崩溃了. 这个页面以真实.精确的比例展示了太阳系的广袤.它将月球的直径(3474.8千米)显示为一个像素,然后依次列出太阳和八大行星.冥王星(你不是大行星了但是我们依然爱你)的相应大小.彼此距离. 只要按住键盘右方向键,就能从太阳出发,一直走

薪水不公让我抓狂该怎样向老板开口?

来上海有一段时间了,一直都觉得上海很适合我,无论是这里的天气.人.还是发展机会,我觉得都比我家乡好.我曾经疑惑,是不是上一辈子就住在这十里洋场.纸醉金迷的上海滩,听着唱片里周璇吟着天涯歌女,在百乐门缓缓起舞--这样一想,感性的我就常常沉浸在幻想中.可是经历一段时间的磨练之后,我发现,踏入职场,涉及到利益问题,往往就不能够再随意而感性地生活了,不然就可能被出卖,被背叛.我曾经以为自己的待遇不错刚来到公司的时候,对新工作有些不知所措.同事中有一个年龄跟我差不多大的女孩来得比我早.初来乍到,我在工作中

CSS标准网页设计UL和DIV使用的技巧总结

css|标准|技巧|设计|网页|网页设计 了解结构化CSS设计内容,首先看下面两个例子: <div id="nav"> <ul>  <li></li>  <li></li>  ...... </ul></div> 很多人,包括许多业界大牛,都建议你这样写即可: <ul id="nav"> <li></li> <li><

网页设计会碰到的十个问题

这其实是一篇老外写的博客,而在文中详述了在他眼中因为文化差异导致的网页开发问题."特色"其实并不是只有中国才有,可能就算是作为中国的设计师,也还需要考虑到印尼特色.新加坡特色-- 有谁愿意回被人当成少数人对待?除非是有幸成为"高富帅"或"白富美"的一员,否则那个"少数群体"通常就会被歧视.而与社会歧视一样,技术歧视也是源于对某些因素的忽视,但是人们似乎并没有足够认识到这样做的危害. 这种问题很大程度上都应该是归结于文化差异,而

网页设计之用户确认页设计技巧

在网站中当用户做一些删除等危险操作时我们经常使用确认页对其进行提醒,那么我们什么时候该使用确认页? 以上的那个图,就是本文的主角:二次确认页,她的英文名是confirmation alert. 此文的背景:当时为什么想做这个二次确认页的研究,也是由于当时做的一个项目.当时那个项目出现了很多个二次确认页. 有很多人的意见: "啥?删除地址也要二次确认?不用吧" "这里为什么不确认一下呀?直接就提交了?填错了怎么办?" "删除前,怎么不加个确认呀?"

网页设计实例分析:日式网页设计案例分析

文章描述:在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. 在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. Rakuten NicoNicoDouga Gigazine 看看日本这些最流行的网站(比