在短短 10-15 秒内,登陆您网站的访问者可以决定他/她应该留在那里还是从那里切换。无论您在网站的后端部分编写了多少复杂的代码,如果您的 UI/UX 部分不令人印象深刻,那么用户就不会对其他事情感兴趣并会离开那里。网站设计是主观的,其中一个设计对一个用户来说可能令人印象深刻,但对另一个用户来说同样的设计可能很难看,这就是为什么它是设计师最复杂和最有创意的工作之一。网页设计不仅仅是在您的网站上添加内容和元素以使其美观,还涉及如何添加所有内容以使其易于使用。
如果用户无法确定您的网站的目的,如果用户在从一个页面导航到另一个页面时遇到困难,如果页面布局不令人印象深刻且易于理解,那么这些都是认真关注的标志你的网页。糟糕的网站设计背后有很多因素会给用户留下不好的印象。让我们讨论一些有效的网站设计的重要因素和技巧……
Design is not just what it looks like and feels like. Design is how it works.
-Steve Jobs
1.有一个目标和计划
用户需要一个访问应用程序的理由,这就是为什么您的网站应该清楚地解释或传达您向用户提供的服务或产品。你的网站和它的每一页都应该有一个目的和明确的规范,说明它的作用。根据您网站的目标(娱乐网站、电子商务网站、社交媒体等)绘制草图并确定所有关键元素(如导航、联系信息、号召性用语、搜索、页脚、按钮、图像、布局),您需要包含在您的网站上。
从用户的角度了解您的网站并据此进行规划。在你跳到代码之前,弄清楚你的用户的期望是什么,他们要查看什么页面,他们要阅读什么内容,并据此找出你想要元素去的地方。
2. 简单
复杂性是可怕的,在网页设计中,少即是多的方法更有效。使您的网站简单,并尝试一次显示一个细节,以引起每个部分的个人关注。大多数人将他们想要的所有内容都放在他们网站上的同一页面上,这使得屏幕混乱,用户会分心和困惑。以下是设计干净简单的网站时需要牢记的一些提示……
- 不要在您网站的主页上超载信息。如果内容或信息过多,请将它们放在内页上。此外,使您的网站在字体系列、字体大小、颜色、图像、标题和其他方面保持一致。
- 在您的设计中包含空白。在部分、段落和框之间提供足够的填充、边距、空间。它突出显示内容并使您的网站易于使用。
- 限制下拉菜单(下拉菜单、折叠菜单等)并避免使用大多数网页设计师更喜欢在网站上包含的侧边栏、滑块、手风琴、标签和轮播。用户会分心并忽略网站上的其余有用内容。圣母大学的一项研究也表示,我们应该避免使用轮播来吸引用户的注意力并增加点击次数。
3. 可读性
用户在阅读您网站上的文字时不应该遇到困难,因此您需要注意文字与其背景之间的对比。很多人使用带有文本的背景图像,其中图像没有任何叠加并且文本与图像混合。您应该在图像上使用一些深色覆盖,然后在其上使用文本,以使您的内容可读。
彩色背景也是如此,例如,不要使用带有稍浅文字的深灰色背景,而不是使用白色文字,这样会更加明显和可读。另外,不要使字体太小,保持正文至少为 16pt,并注意元素之间的空格。 Sans Serif 字体更适合在网站上使用。
4. 响应能力
人们使用移动设备进行大部分浏览,50% 的网络流量来自移动设备。这些都是您的应用程序应该在不同设备上可见的原因。文本、布局、图像您网站的所有元素都应该可以在不同的设备上查看和访问,以获得更好的用户体验。学习使用 CSS 网格、媒体查询、引导框架来使您的应用程序具有响应性或移动友好性。
5. 简单导航
如果访问者无法找到他们正在寻找的内容,他们肯定会离开您的网站,这就是关注您网站导航非常重要的原因。导航组织您的完整网站并引导用户在您的应用程序中移动。导航菜单应该位于您网站的顶部并具有粘性,因此如果用户向下滚动网页,他们仍然可以找到并访问您网站上的菜单。以下是一些使应用程序易于导航的提示……
- 在您的应用程序中使用“三击规则”,允许用户通过三击获得他们需要的所有信息。
- 菜单中的更多项目会使访问者感到困惑,因此尽量列出少于 7 项的项目,同时尽量避免下拉菜单,搜索引擎很难抓取下拉菜单。
- 您网站的品牌徽标应重定向到主页上的用户。
- 您可以在页脚中包含一些重要的菜单(例如使用条款/常见问题解答/联系方式/博客等)、菜单的缩短版本或社交图标。
6. 号召性用语
在您的网站上有一个明确的号召性用语按钮或表单非常重要,以指示用户应在页面上采取的下一步或操作来完成任务。例如,立即购买、注册、联系表格、订阅、注册表格、社交媒体按钮等。一旦用户知道网站的用途,CTA 就会向他/她提供某种指导。如果没有 CTA,用户将无法发现他/她是否需要购买产品、进行某种注册或订阅,并且用户可能会在未完成最终任务的情况下离开网站。最好将 CTA 放在首屏,这样访问者就可以在他们面前找到它。
7.加载速度
人们非常不耐烦,如果您的网站速度很慢,他们不会等待太久。如果他们的 id 没有快速加载,大多数用户会在 5 秒内离开网站。图片或视频的大小对网站速度有很大影响,所以在添加图片之前尝试压缩图片。此外,将代码组合到一个中央 CSS 或 JavaScript 文件中以减少 HTTP 请求。缩小 HTML、CSS、JavaScript(压缩以加快加载时间)。限制您网站上的大型项目并选择合适的主机。
8. 优先滚动
我们已经提到,您应该避免使用滑块或手风琴来在网站上展示大量信息。呈现更多内容并将其融入您的网站的最佳方式是使用滚动条。在其中一项研究中发现,当您在网页中添加滚动功能时,转化率最多可提高 30%。
9. 挑选合适的图片
一张图片说明了很多关于网站的信息,为您的网站选择合适的图片可以吸引大量访问者。我们强烈建议您使用不影响您网站速度的高质量优化速度。您可以从专业人士或照片库中获取图像,这些图像提供具有自然外观的高质量图像。您的图片应该清楚地说明您希望用户理解的消息类型。添加人物照片可以提高您网站的转化率。
10. 调色板
您网站的颜色应与您网站的品牌相匹配。选择合适的颜色来代表您的品牌非常重要。在选择颜色时,您还需要注意对比度。当你为你的网站选择颜色时,它应该相互配合,你的文字也应该清晰易读。您选择的颜色不应相互冲突,例如不要将紫色和红色并排使用,这会使您的网站变得丑陋。为主要元素(主要)、高光(次要)和其他不太重要的元素(背景)使用单一颜色。您还需要记住,您的主要、次要和背景颜色应该在整个站点中保持一致。鲜艳的颜色会产生情感,因此应谨慎使用(例如用于按钮和号召性用语)。