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

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


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

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

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

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

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

相关推荐

  • 全国高校“用户体验、视觉界面(UI) 设计、交互设计新技术实践教学与应用师资研修班

    商务合作联系QQ:3158521867 或加微信号:jujiao01一、会议背景近年来新技术、新趋势不断爆发,同时掀起了互联网的蜕变热潮,行业和用户更加成熟理性,随着网站和平台开发需求不断增多,智能手机广泛应用,用户体验、视觉界面(UI) 设计、交互设计对于网络产品来说是赢得用户的关键特性。苹果、google等顶级企业的成功案例已经深刻说明了这一点。打破传统界限,连接商业与技术,在新商业环境中实现更大的价值,把设计领域、设计概念向外延展...

    2018-03-30
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 干货!Sketch49交互原型新功能大解析

    2月28日发布了Sketch49新版本的消息,笔者打开了官网看到了最新的版本更新视频,确实还是挺激动的。觉得Sketch按照这样的发展趋势,马上就能“统一六国”了,哈哈。一起来看看Sketch49的版本更新了哪些新功能吧!(先看介绍,使用教程在后面哦!)亮点一:交互原型功能画板(Artboards)和热区(Hotspot)链接实现页面间的跳转,实现动态交互原型(类似交互软件Marvel中的热区链接 )Sketch49版本中的交互原型预览...

    2018-03-07
  • 交互设计 | 做设计你怎能不了解心理学?

    以用户为中心的设计7个原则:(1)应用存储于外部世界和头脑中的知识(2)简化任务的结构(3)注重可视性,消除执行阶段和评估阶段的鸿沟(4)建立正确的匹配关系(5)利用自然和人为限制性因素(6)考虑可能出现的人为差错(7)最后选择,采用标准化今天分享的【主题】什么是无形的设计?【Giver】IHan,自由设计师有形的通常是指硬体的设计,所以像是越来越小的晶片或者你可以做曲面的屏幕之类,那无形的话通常是指它的一些背后的一些科技的发展,或者是...

    2018-05-02
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • APP设计中便捷的单手操作

    探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的。 用户是如何使用手机的 Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出,…

    2014-09-07
  • 交互分析:什么时候该用新窗口打开(target=_blank)?

    是否从新标签打开页面看起来也许并不是特别起眼,甚至可以说是一个很小的细节。但是正是这种小细节往往决定了你网站的用户粘性,是否可以在竞品中胜出。

    2017-08-04
  • 7个设计技巧,让内容和用户体验无缝地配合起来

    好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”

    2017-08-04