• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 这7种设计误区,会影响网页内容的体验

这7种设计误区,会影响网页内容的体验

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,经验分享,网页设计等相关知识,希望在学习及工作中可以帮助到您

设计中出现误差或者错误其实是很正常也很普遍的现象,也许你只是想尽快完成一个设计项目而仓促地提升进度,也可能是因为项目本身的复杂度过高,你忽略的某些问题。但是无论是怎么造成,总得试图解决问题,修复不完美的设计。

而今天我们要探讨的核心是影响你的网页内容的设计误区,这些误区有的让网站的信息无法正确的传达,有的让人感到迷惑,这些问题可能会导致用户无法接受,理解错误,甚至感到不适。那么,有哪些常见的影响内容的设计问题需要规避呢?

1、不合理的排版

排版设计出问题,首当其冲的空间设计不合理。段间距和行间距是文本内容常见的空间控制变量,虽然有的排版会因为间隙过大而显得松散,但是更常见的问题其实是排布布局过于紧密,缺乏呼吸感,这可能会让设计看起来混乱,可读性低下。

一般而言,对于大段的文本内容,行间距最好是文字高度的120%到150%。对于较小的文本,考虑到移动端的用户使用场景,这个行间距可能还得在提高一些,这样 才能确保舒适的阅读体验。

但是,不论是怎样控制,核心始终在于确保阅读体验是愉悦而恰到好处的。拥有恰当而富有流动性的排版,视觉上才会令人舒适。间距太大太小都不合适。

另一方面,整个页面排版的行间距的比例要保持一致,这样能让视觉上更加统一,也能够强化同类、相关元素的关联性,增加可读性。

2、所有元素尺寸一样

所有的图片尺寸都一样,所有的文本都一样大小,所有的按钮都一样的样式,这样的“一致”看起来不错,但是实际上会显得更加无聊。

网页中的许多元素可以一致,但是不能完全一样,这是两个概念。基于不同的需求,不同的位置的按钮尺寸是不能完全一样的,但是它们可以沿用相同的样式,并且设计几个相对固定的尺寸比例,这样也可以更好的控制整个视觉和体验。

其实这当中,图片在网页框架中的使用就是一个最好的实例。不同页面的首图尺寸是一样,其中的图片如果要应用到不同整个布局其他的位置的时候,直接按比例缩小,其中的元素视觉重量会直接降低,信息传达的有效性也随之降低。最理想的状况,是根据整个网页框架布局的需求,基于原图有针对性地进行切图。

3、忽略层次

我们所看到的绝大多数的网页是需要通过精心组织的层次结构来呈现内容的,毕竟网页内容也是遵循 80/20 法则的,20%的内容常常能够拥有80%的重要性。这也使得网页的层次结构如此的重要。

网页中不同的内容是有轻重缓急的,而这种重要性不论是基于设计的需求还是用户的需求,都是能够进行判断和划分的。与此同时,用户在快速浏览内容的时候,重要的内容应当置于重要的、易于扫视查看的位置。在我们之前的《F式布局》的文章当中,对此有详细的陈述。

在确定了重要性优先级之后,层次结构的设计思路就可以基本确定了。首图、标题等元素是承载重要信息的载体,而能够引导用户行为的CTA按钮、输入框等元素,则能在交互的层面上,强化内容的效力。所有的这些东西,在设计网页的层次结构的时候,应该系统的考虑。

4、忽视基础功能

网页的可用性始终是摆在易用性之前的。我想你也有过这样的经验:打开网页之后经过漫长的等待而网页无法加载;点击一个按钮而没有相应的反馈;想找到网页背后所有者的联系方式,但是在About Us 的页面中一无所获。

这些基础的工作都需要设计师用心做好。确保网页的基础功能都能够顺畅的使用,正确的反馈,而这些基本的可用性问题,常常出现在搜索框、导航、页脚甚至业务逻辑当中。

在网页当中,不同类型的元素涉及到不同类型的内容,即使文本和图片也常常带有链接,或者牵涉到特定的功能或者交互,而用户对于这些功能是有预期的。可用的按钮、链接等基础功能,确保了信息的完整性和功能的完整性,只有这样,用户才能信任网页本身。

5、不够简练的文案

网页中的文案是需要反复推敲的。

许多网页在使用文案的时候,不够简练,用户很容易在浏览过程中迷失。人集中注意力的时间始终是有限的,所以,尽量在交互和UI中使用明确、精准的描述性的语言,直接地指引用户,清晰地阐明交互的结果。

清晰简练的语言文案是维持用户兴趣、推动交互继续的动力。

6、低分辨率

清晰度不足的图片绝对是设计的硬伤。现如今的高清的屏幕无处不在,低分辨率的图片在如今的屏幕上无所遁形。

随着网络的覆盖和带宽的拓展,大尺寸的图片和文件已经慢慢成为标准了。当你需要精准地控制图片尺寸和屏幕分辨率完全对应起来,也可以参考响应式设计,借助断点来控制显示的尺寸。

当然,最重要的一点在于,使用低分辨率的图片,还不如干脆不使用。

7、太多机巧

过多的插画,繁复的特效,太多的设计趋势,当常见的设计机巧和效果在网页上堆积起来的时候,会很容易稀释网页中真正重要内容。不同寻常的色彩,奇特的动画,巨幅的图片,这些真正抓人眼球的元素应该有针对性、有计划地使用。

它们确实是提升趣味性、吸引用户注意力的重要手段,但是同样需要谨慎使用。

当你想要使用特定的设计元素、采用流行的设计趋势或技巧的时候,选择一个思路,尽量主次分明。很多时候,一个设计趋势,比三个趋势叠起来更有用。

结语

如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

【这些最佳实践帮你在UI设计上更上一层楼】

  1. 《网页设计中,如何突破栅格的限制又保持协调?》
  2. 《帮你搞定长滚动网页的设计最佳实践》
  3. 《觉得自己学了假设计?真正的新用户引导应该这么设计》
  4. 《老生常谈!设计高素质的UI应该掌握这7个关键属性》
  5. 《这8个要点,能让你的网页首图抓住用户注意力》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23想成为高级视觉设计师?先学会引导读者视线的方法!
  • 2017-08-06关于门户网站焦点图设计的一些总结
  • 2018-08-232017年大家都在学习的服务设计,这篇文章带你快速入门!
  • 2018-08-23还不知道什么是DPI和PPI的设计师,该收藏这篇教程了!
  • 2017-08-06浅谈浏览器的兼容模式下的button中文字垂直方向不居中显示
  • 2018-08-23如何做好一个搜索体验流程?看这篇超全面的总结!
  • 2018-08-23旅行照千篇一律?你可能需要试试这4个新思路
  • 2018-08-232017年过半,设计师们都跟着这些趋势做设计
  • 2018-08-23Facebook 产品设计师:如何提高自己的设计审美?
  • 2018-08-23总监经验!视觉设计师必须知道的交互设计模式

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 不仅要考虑到一般情况,设计师还要为极端情况而设计
    • 编写HTML和CSS的6种最有效的方法
    • 成为解决问题的人!总结我在用户测试里吸取的5个教训
    • 零基础必备:详解十种常见的水彩基本技法+问题总结
    • 5个电商案例,教你学会优雅高效地给设计师们提修改意见
    • 腾讯干货!虚拟To B支付设计研究之海外研究篇
    • 网页编码为什么不用gbk或者gb2312而用utf-8
    • 适合小公司!为什么你只需要5个用户去做可用性测试?
    • EditorConfig 的配置
    • 关于开发手机网站的一些总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有