2021年了,你还在这样设计网站,会死人的啊

简介: 2021年了,你还在这样设计网站,会死人的啊

前言
2020年,特殊的一年。从新冠肺炎的爆发,旱涝、地震······天灾、人祸,无一不在诉说着今年的多灾多难。企业在这个困难的时期,想要生存是需要更多的展示机会,企业网站就是必要的一个展示窗口。因为,由于社会疏远,越来越多的潜在客户正在通过公司的网站搜索信息。

精心设计的网站可以帮助发展业务,因为完美无瑕的设计给潜在客户留下了深刻的印象,帮助他们下决心选择自己的合作伙伴。但是,常见的Web设计错误可能会造成功亏一篑。

什么是网页设计,为什么如此重要?
在我们详细解决这些常见的Web设计错误之前,至关重要的是要了解Web设计的全部含义。Web设计是一个以美观的布局迭代地制定战略,概念化并交付信息和整体业务功能的过程。

网页设计的视觉组件包括文本内容,图像,视频,颜色,字体,不同的元素和形状,例如按钮,表单,图标,这些元素之间的间距以及整体布局本身。

设计功能包括网站速度,导航,动画,用户体验,用户交互,整个站点的技术架构,SEO,跨浏览器,跨平台,跨设备设计一致性和响应能力。

既然我们已经介绍了Web设计及其重要性,那么现在是时候理解设计师和开发人员在2021年必须避免的常见Web设计错误了。

12个常见的网页设计错误
网页设计不能够受所有人喜欢是正常,但是起码要避免常见的设计错误。考虑到这些,总结出必须避免12个常见的Web设计错误。

1.开发前不选择设计思想方法
大多数设计师犯的最常见的网页设计错误之一是,他们没有意识到设计思想和在纸上绘制布局的重要性。设计人员通常倾向于“假设用户”而不是进行广泛的“用户研究”以了解用户需求。但这不是进行网页设计的正确方法。

了解设计思维方法是为用户设计成瘾体验的关键。确定设计思想,这是一个了解并确定客户需求和动机的过程。善待客户,详细说明他们的问题并制定解决方案的想法是一种心态。

设计思维方法使设计人员能够确定目标,项目范围,构建业务功能,了解用户需求,技术能力,解决方案的可行性和有效性。所有这些都有助于设计师在跳到某些设计软件之前收集数据点,以设计正确的站点地图和线框。

一定要记住,如果您不了解客户,就无法为他们设计好的网站。因此,要善解人意,并进行用户研究以了解您的客户关心的是什么。

2.不优先处理网格和列
在2021年的今天,网页设计世界正在以惊人的速度变化,日常设计需要随之变化,跟上时代的眼光。但是,某些设计师仍然局限于按旧方式开发设计。

使用CSS技术,设计人员可以提供无缝的用户体验,其中内容使用行和列自动分段和对齐。CSS的grid-template-columns,minmax,autofit属性消除了使用媒体查询断点的需要,但是使用grid-template-area确实需要使用断点。

大多数设计师倾向于与CSS网格相关的Web设计错误之一是与CSS数字混淆。在设计诸如引导程序之类的CSS框架时,我们计算一行中的列数,通常为12,但是在网格系统中,我们计算行数或堆栈数。在网格系统中,从第1行到第7行的移动类似于跨越6列。

3.不分层战略美学
大多数设计人员需要避免的另一个Web设计错误是不对内容的视觉层次结构进行策略化,包括CTA。通过设计有效的视觉层次结构,可以有效实施精心设计的用户旅程。这可以通过使用吸引人的文字,颜色,图像和小动画来实现。这些元素之间的间距及其大小在推动用户参与方面也非常关键。弄错这一点意味着更少的用户交互,并可能损害您的业务利润。

4.不优先考虑直观的导航和辅助功能
跳过集思广益,站点地图和线框图的必要步骤是一些网站设计错误的基础。突出的功能之一是菜单和导航布局配置不佳。不正确的导航结构可能会驱使网站访问者离开,因为滚动浏览随机结构的网站很麻烦。假设您正在设计一个包含大量页面的网站,则将它们分组为类别并按层次排列这些类别是有意义的,从而使用户能够直观地浏览网站。

此外,每个设备的导航都不相同。尽管导航有不同的方法,但是您需要选择正确的策略。例如,在使用手机时,您可以选择汉堡菜单策略,因为它非常适合在较小的屏幕上导航。

除了导航之外,还有其他一些方面可以提高网站的可访问性。研究表明,有300多个Mn色盲人群。但是大多数设计师在设计网站和用户旅程时忽略了这方面。有数以百万计的视听障碍者。不让这些用户采用您的设计思维方法可能是主要但常见的网站设计错误之一。

从可访问性的角度来看,文本大小,颜色对比,页面标题,图像替代文本,键盘可访问性,轮播,广告,自动播放视频,滚动新闻提要和行情自动收录器等移动和闪烁的内容是网站的重要组成部分。对抗远视的人可能希望在小型设备上缩放内容。有视觉障碍的人可能更喜欢语音来消费内容而不是文本。注意力不集中的用户可能希望暂停轮播等。一个好的网页设计会将所有这些都纳入图片,以增强网站的可访问性。错误地操作可能会导致不良的用户体验并损害您的业务。

5.不遵守安全第一,响应式设计方法
尽管网站安全在很大程度上取决于技术体系结构,但是在一定程度上,它也与网站设计和用户旅程有关。设计人员如何描绘用户旅程,极大地影响了开发人员实施设计的方式。如果从设计阶段就开始优先考虑网站安全,则可以避免许多安全漏洞。例如,将关键业务数据置于身份验证和支付墙后面。

除安全性外,设计还必须在浏览器和设备之间具有响应性和一致性,以提供全渠道的体验。网站开发中的重大网页设计错误之一是针对不同的平台和设备设计不同的用户旅程和路线图。当务之急是保持设备之间尽可能的一致性。如果可以在发布之前检查响应度会更好。

6.内容过多会使网页设计混乱
信息太少,将面临无法交付用户正在寻找的解决方案的风险。但信息太多,最终可能会设计成难以理解,使用或访问的解决方案。设计师可以通过资源和最终提供一个高度混乱的网站来覆盖所有的访客。尽管它很成功,因为它从早期开始就很受欢迎。也许为了保持用户的一致性,他们仍然没有更改网站设计。但是,不应犯同样的错误。

要避免的常见Web设计错误之一不是从一开始就构建可伸缩设计。这就是许多企业改进其网站设计的根本原因。非结构化,非模板化的网站设计是一个增长瓶颈,因为在数百页之后,错误地变得难以维护,开发和扩展这些网站。为了避免这些设计可伸缩性问题,设计方法应采用“分而治之”的策略。

将整个网站界面划分为不同的网页,例如产品列表,产品信息,用户配置文件,用户交互等。接下来,将每个网页界面的组成部分划分为可重用的块和组件。这些组件中的每一个都应专注于提供一种功能。例如,轮播,简短的用户资料,产品说明,评论等。接下来,使用这些组件来构建整个网站。这种方法可确保网页的更快开发和可伸缩性。

7.没有清晰的号召性文字
没有清晰的“行动号召”是另一个常见的网页设计错误。网站就像营销和销售漏斗或管道。您的网站访问者会在该渠道中遍历,从潜在客户阶段转到转化客户阶段。在适当的地方没有给出明确的“行动号召”,可能会导致许多潜在客户无法转变。

8.设计不良或不相关的图像
我们都知道图像和图形是Web设计的关键部分。如果做得好,图像可以清楚地将信息传达给访客。做错了,他们会使读者困惑。许多企业仍然没有关注他们的图像,而是使用低质量和不相关的图像。不要犯这个错误,因为低质量的图像会破坏您的网站并关闭访问者,这会损害您的转化。同样,无关的图片只会使您的访问者感到困惑,从而导致他们不采取所需的操作。不过话虽这么说,也不应该在网站上摆满太多图片。

9.不注意404页面设计可能会损害SEO
Web设计不仅限于开发布局和用户地图。更需要扩展Web设计,以合并内容和搜索引擎优化(SEO)。从SEO的角度来看,可以轻松避免多个常见的网站设计错误。

SEO关键的网站设计的第一个错误是没有专用的自定义404页模板。您可以为您的域名创建一个自定义的404页面,以向用户显示相关内容,也可以使用302或301重定向链接到网络上的其他页面。网站上的链接断开会损害企业声誉。用户认为该网站是一个骗局,并且该产品/服务不是标准的。使用302或301重定向,可以轻松处理这些断开的链接。对于链接断开的外部网站,您必须不断测试,识别和替换此类链接。

其次,SEO特定和常见的网站设计错误包括不使用标题和标题标签。使用描述性页面文字不会像标题中那样具有影响力。同样,使用较大的字体对SEO的影响不如使用h1,h2标签。

10.多媒体相关的网页设计错误
我们已经强调了自动播放视频的刺激性,尤其是声音。此外,它使网站加载速度非常慢。通常最好不要自动播放视频,而要等待某种用户活动来触发播放此类视频。例如,用户滚动到页面上包含视频的部分。

我们还强调了关闭轮播的速度有多快。除此之外,还有更多与多媒体相关的Web设计错误应避免。

首先,一个重大的网页设计错误是不优化您的网站图像。大尺寸图片会使网站加载速度变慢。如果您的网站加载速度缓慢,则可能会严重损害您的转化。您是否知道四分之一的访问者会放弃一个网站,而该网站的加载时间超过4秒?甚至搜索引擎也不喜欢这样的网站。因此,作为设计师,最好使用清晰,优化的图像。作为开发人员,应尝试延迟加载这些图像。图像的延迟加载使网站加载速度更快。

第二,避免使用廉价的免费图片。每个人都用过它们;大家都知道您何时使用它!它产生一个廉价的印象。因此,如果免费图片不完全准确,请避免使用它。

第三,使用上下文图标,特别是图标。我们知道这是一件显而易见的事情,但是即使在2020年,也有惊人数量的设计师甚至没有这样做。这有助于传递正确的信息并提升品牌。

第四,不要在同一网页上使用几种字体样式。另一个常见的网页设计错误是无法在整个网页上保持字体样式的一致性。

11.不设计启用多语言语音功能的网站设计
今天,可以用多种语言构建网站,甚至可以添加基于语音界面的功能。但是,没有多少设计师和网站所有者正在使用这些Web功能。如果企业在不同国家/地区拥有客户,则为了更好地吸引目标客户,可以使用母语开发网站。为了提高可访问性,可以将基于语音的界面添加到网站。在整个网站设计计划中不考虑语音和多语言方法将是一个错误。

12.不利用分析或测试来确保跨浏览器兼容性
设计与内容一样,是可以反复改进的创造性作品。使用复杂的分析工具,您的网站分析管理员可以为您提供有关用户如何浏览您的网站的数据。此外,分析,测试可以帮助您发现断开的链接。根据分析输入,您可以找出用户旅程中的缺陷。您可以确定哪些在起作用,哪些需要改进,哪些需要升级。

在成功完成开发阶段之后,请记住所有要避免的网站设计问题和网站设计错误,我们可以进入测试阶段。测试网站是必不可少的步骤,因为世界上充斥着物理上或内部不同的设备。跨浏览器测试,可用性测试和A / B测试仅举几例,因为不同的目标要求使用不同的测试类型。

开发人员倾向于犯的最常见的网站设计错误之一是,假设重新设计的网站是完美的,并且没有像他们应该的那样严格地执行浏览器兼容性测试。他们认为,由于重新设计的网站与以前的网站具有相似的功能,因此严格的重新检查功能毫无意义。尽管这不是一个好方法,但在重新设计部分是不可原谅的错误。以这种心态,很多事情都会出错,例如跨浏览器兼容性。因此,请始终以同样的决心对您的网站进行测试,以使其优化并使其对受众没有错误,从而避免所有相关的网站设计问题。

总结
网站可能是企业最重要的资产,因此尽量需要使其无懈可击,以创造良好的第一印象。但是要做到这一点,就需要避免这些网页设计错误。

不用担心这些常见的网站设计错误很容易避免和解决。识别它们是最困难的一步。但是,只要识别了这些错误,就可以轻松避免或纠正它们。

目录
相关文章
|
6月前
|
人工智能 小程序 算法
分享64个JavaGame源码总有一个是你想要的
分享64个JavaGame源码总有一个是你想要的
159 0
|
6月前
|
人工智能 Java 关系型数据库
分享66个JavaGame源码总有一个是你想要的
分享66个JavaGame源码总有一个是你想要的
263 0
|
JSON JavaScript 前端开发
继续死磕前端
继续死磕前端
|
人工智能 移动开发 测试技术
你的交互文档写的好不好?一看便知!
你的交互文档写的好不好?一看便知!
123 0
|
数据采集 搜索推荐 安全
怎么做网站关键词布局?
答案是:选择竞争难度低且有一定流量的关键词。确定关键词,根据用户的需求和搜索习惯,确定网站的关键词。 在进行Google优化时,关键词布局是非常重要的一步。 关键词布局不仅能帮助网站在搜索引擎中得到更好的排名,还能帮助用户更快地找到他们需要的信息。
81 0
怎么做网站关键词布局?
|
存储 Web App开发 缓存
一个简单的弱网差点搞死了组内前端
最近上线了一个 React Native 外访项目,用户为公司外访员,外访员根据公司业务去实地考察,收集记录一些资料,考察记录资料的过程全部用公司配的专用手机,里面安装了当前外访项目APP。目前项目试运行阶段,还没有正式交付。APP项目上线后,在用户真实使用中遇到一些各种各样的问题,有些问题处理时也比较棘手(如弱网情况),这次主要复盘APP在实际场景中的弱网(或网络不稳定)相关的问题。
904 0
一个简单的弱网差点搞死了组内前端
|
Web App开发 移动开发 前端开发
前端,真的死了吗?
前端,真的死了吗?
149 0
|
Java C语言
看似无害的代码如何搞垮系统
编程就像魔法。最近遇到一个诡异的问题:添加一段看似无害的简单代码后,系统原有功能不可用了。 ## 复现演示 jdk 8 可使用如下演示代码复现这个问题。 `TaskCenter` 是一个任务框架,可添加多个任务,随后框架将执行这些任务。 `First` 任务是新增代码,看起来简单无害,且看不出对原有任务 `Count` 有何影响,但添加 `First` 任务后,其自身执行正常,原本正常的 `C
128 0
|
域名解析 网络协议 网络架构
一篇文章,只用看三遍,终生不忘网络分层!
一篇文章,只用看三遍,终生不忘网络分层!
162 0
一篇文章,只用看三遍,终生不忘网络分层!