影响网页内容的七种设计误区

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


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

影响网页内容的七种设计误区

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

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

1、不合理的排版

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

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

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

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

影响网页内容的七种设计误区

2、所有元素尺寸一样

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

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

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

影响网页内容的七种设计误区

3、忽略层次

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

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

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

影响网页内容的七种设计误区

4、忽视基础功能

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

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

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

影响网页内容的七种设计误区

5、不够简练的文案

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

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

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

影响网页内容的七种设计误区

6、低分辨率

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

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

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

影响网页内容的七种设计误区

7、太多机巧

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

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

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

影响网页内容的七种设计误区

结语

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

 

原文作者:CARRIE COUSINS

原文地址:designshack

译者:@陈子木

译文地址:http://www.uisdc.com/7-design-mistakes-ruin-content

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23016/

(0)
CatherineCatherine
上一篇 2017-05-03 16:13
下一篇 2017-05-03 18:14

相关推荐

  • 阿里巴巴技术架构首次曝光 | 站在双11的肩膀上看阿里云企业级互联网架构

    2015天猫双11全球狂欢节以912.17亿元的答卷完美收官。 双11当天14万笔/秒的交易创建峰值和8.6万笔/秒的支付峰值双双刷新了世界纪录,相比首届双11,订单创建峰值增长了350倍,支付峰值增长了430倍。 天量数字的背后…

    2015-11-18
  • 全面了解iOS 11

    作者:沄海   UI得以迅速发展,苹果公司功不可没,他开启了移动化浪潮,拥有了世界各地超过十亿的设备,有潜力使任何想法或设计成为主流。这一次,苹果对之前对设计风格做了较大变动。 今天分析的两个版本分别是 iO…

    交互专题 2023-03-03
  • 百度地图:智能化设计探索,让出行更简单

    出行一直是地图用户的核心诉求。随着移动互联科技的飞速发展,越来越多的出行服务参与到地图用户的生活中,同时也使得用户的出行场景变得复杂多变。但传统地图的出行功能无论从产品还是从用户体验上,大多只满足了用户规划路线、导航驾车等基础需求。所以,探索用户的潜在出行需求,设计贴心的出行服务,让用户的出行更有效率并提升出行体验,是地图设计团队的核心目标。

    2017-05-12
  • 人机工程学在交互设计中的运用

    大家在做设计的时候都会遵循一些交互规范或者常用的一些规律,但是经常情况下,我们都没有深入的研究为什么这样定义这个数值,这个数值是否合理?如果没有严格的理论支持,在设计中直接运用一些规律,就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。

    2017-05-03
  • 实用干货!如何让设计效果高还原度落地?

    一个产品完整的设计流程中,交互与视觉定稿后,后续视觉规范的输出、UI控件的整理与标注、开发的高还原度,都会影响产品最终的用户体验。作为视觉设计 师,在视觉设计 的最后阶段则是繁琐且像素级别的精雕细琢,设计讲究的不仅是美感还有严谨态度与逻辑。

    2017-05-24
  • 交互设计篇|经历一个产品从0到1我都学会了什么

    好的设计不仅能满足用户需求、提升易用性,还能弥补技术上的短板。在经过一个产品从0到1的实现后,对这一点感受的尤其深刻。下面列出几个我产品设计中的教训和收获。图书馆打印插队如果不给出理由则此行为被接受的概率为60%;如果给出一个理解则此行为被接受的概率为94%;甚至在解释原因时只提供“因为”而无实质原因的情况下,此行为被接受的概率竟然为“93%”。足见,“人就是单纯地喜欢做事有个理由”。那么,产品与用户“交流”时,就需要有个“理由”让用户看到自己行为操作与产品回应之间的解释,从而顺应操作规则从而更好的使用产品。

    2017-05-06
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 交互设计:如何设计更好用更舒适的触控手势?

    引言:我们生活在一个人机互动频繁,由设备驱动的世界中。 随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模…

    2017-08-04
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29