首页
UI设计正文内容

如何创建一个出色的网站主页部分

2024年05月06日
阅读时长 2 分钟
阅读量 11
如何创建一个出色的网站主页部分

设计一个总是有效的激励性主图的10个实用技巧

主图是用户打开页面时首先看到的东西。这是你赢得他们的机会,或者永远失去他们的机会。

用户只需要几秒钟就能处理第一个屏幕。但在幕后,市场营销人员、设计师和开发人员做了大量的细致工作。你如何快速找到正确的解决方案并选择完美的图片呢?

我整理了创建有效主图的最佳实践,与大家分享。让我们向最佳实践学习。

10个好的网页设计原则

1. 不要忽视主页部分的目标

主页部分的目标是让用户想要了解更多并执行下一步操作。它作为一个介绍,邀请进一步的沟通。

乍一看,用户想要看到的是好处问题的解决方案,而不是公司有多棒或者设计有多酷。:) 这些东西应该留在背景中!

主图是一种视觉刺激。它承诺好处、改进和积极变化。

如果用户:

  • 直观且立即喜欢视觉效果;
  • 看到了他们问题的解决方案;
  • 被图片所激励;
  • 被标题所激励;
  • 理解下一步该做什么。

用户将愿意向前迈出一步。

Cascade - 数字银行仪表盘的网站设计

2. 不要忽视用户的目标

为了惊艳并让观众留在第一个屏幕上,一些设计师无意中将用户的目标替换为自己的目标:设计一个令人惊叹的设计。但用户的目标并不是设计。

用户的目标是获得他或她所需要的东西:一个物品、一个服务或特定的信息。设计应该促进这个任务,而不是阻碍它。

智能设计不会引起注意,也不会分散用户的注意力,或者让他们惊讶地盯着屏幕看,忘记了他们来的目的。这对于主页部分尤其如此。

这是一个典型的案例。呈现给用户的关键点包括:

  • 公司提供的东西;
  • 这个优惠的优势;
  • 信任公司的原因;
  • 用户需要执行的操作。

信息很明显:我们的公司很棒,用户应该赶紧按下那个按钮。可惜,事情并不是这样运作的。

用户的目标与网站所有者、市场营销人员或设计师的目标无关。

任何对用户没有直接价值的信息都必须被隐瞒。像“我们是最好的”,“庆祝十年的成功”,“为什么人们信任我们”之类的信息应该放在视觉层次结构的底部。

主页部分的视觉效果必须优先考虑用户的目标。

向用户展示他们想要看到的,并让它看起来真的很好。这是你的首要任务。其他所有的东西 - 可靠性、信任、保证 - 只是为了巩固用户对他们来到了正确的地方的信念。

Cybervergent - 革命性的网络安全平台的网站设计

设计用户保留的有效方法

3. 记住:不要杂乱无章

主页必须对用户来说清晰明了,易于导航。这是你展示你的优势的地方。尽最大努力最大化可读性。包括:

  • 清晰、简洁的设计;
  • 明确的页面结构;
  • 充足的“空白”;
  • 没有干扰;
  • 重点的层次结构;
  • 有动力的简洁标题和副标题;
  • 与信息和文案相匹配的主图;
  • 可理解和可预测的导航面板。

保持简单和简洁!

Monex - 个性化金融仪表盘的网站设计

4. 将用户的目标变成视觉吸引力

设计师的任务是将用户的目标可视化,使其看起来有吸引力、生动和引人注目。全面研究和分析你的用户、产品和竞争对手的网站。这将帮助你为你的受众找到鼓舞人心的图片和激励性的信息。

顾客通常带着对他们目标的具体形象来到页面。重要的是要考虑到这一点并满足他们的期望。可预测性是人们对你的期望。这适用于视觉效果和用户体验。

遵循“一个想法,一个图片”的规则。让你的标题与图片共鸣、加强和增强。图片和文本必须激发用户的欲望和愿望,使他们愿意迈出一步。

关心用户:一种现代方法

Credify - 个性化金融平台的网站设计

5. 寻找特定的触发点

在从概念到最终设计的过程中,记住:你正在创造一种激励性的触发器。可以自由地使用所有市场营销、设计和心理学的技巧来影响用户的感知。

每个受众都有自己的动机。了解你的用户,并找到最好的方式来吸引他们,无论是情感上还是理性上。(情感反应之后是对信息的理性评估。)

用户的情感需要在概念阶段设计并融入到项目中。

特定的触发器,如图片和/或文本,对于引起情感反应特别有效。

要找到最好的触发器,问问自己:

  • 当用户看到你的优惠时,他/她应该有什么感觉?
  • 它应该唤起什么样的记忆?
  • 它应该创造什么样的联想?

找到一个情感触发器通常需要一个很好的头脑风暴。列出情感及其可能的可视化,如引人注目的图片、插图或视频。测试最好的想法。

这是你未来转化和受众喜爱的关键。

情感不一定要是积极的。苹果曾经成功地利用恐惧,设计了一个鲜红色的艾滋病意识网站,并邀请人们成为献血者。它看起来很震撼。我不知道有多少人捐款,但有很多人买了红色的iPhone。 :)

Airjet - 航班订票的网站设计

6. 展示明确或隐含的好处

一个有效的触发器总是与用户的好处相关联。触发器推动用户执行行动,让他们获得这些好处。

受欢迎的主图侧重于:

  • 产品;
  • 行动;
  • 优势;
  • 上下文;
  • 过程(幕后);
  • 公司的所有者。

任何类型的主图都必须传达好处。

明确的好处:突出显示使用产品或服务的明显优势。

隐含的好处:在视觉和心理上突出用户的改善状态、重要性、成功、技能和机会。

通过用户分析,你可以决定什么应该明确展示,什么应该隐含展示。展示隐含的好处总是双赢。例如,一个销售钉子的网站,如果它的主页部分展示了一个节俭、聪明和整洁的工人的形象,而不仅仅是一张房子或一堆钉子的照片,那么它的表现会好得多。顾客会喜欢感觉自己像是一个能干的房主。

Fundex - 加密贷款平台的网站设计

7. 管理用户的注意力

清楚地知道你希望观众的目光去哪里。他们会首先看到什么?接下来呢?他们的目光应该停留在哪里?一切都取决于你的网站和产品的目标。需要提前规划好重点的层次结构,然后进行测试,确保它看起来符合你的需求。

用户的目光受到主导元素和焦点的控制。主导元素是最大和最吸引人的元素。焦点是图标、按钮和其他用户在主导元素之后看到的元素。它们负责用户的兴趣区域并保持他们的注意力。它们通常位于屏幕的边缘。

**小窍门1:**模糊你的设计布局,并向一个普通人(不是设计师)展示。他们首先看到什么?什么值得更多或更少的关注?这是在为时已晚之前纠正失败的想法的好方法。

**小窍门2:**使用眼动追踪软件。即使是一个简单的免费应用程序也可以帮助你检查高亮显示是否放置在正确的位置。

如果你发现用户的目光在任何给定的元素上停留的时间不够长,那就开始工作吧。也许值得通过使其更大、更亮、添加动画、增加字体大小等来进一步突出这个元素。(测试一切!)

注意:将主要的亮点放在情感触发器上,而不是CTA按钮上。

所有的视觉构图技巧和工具都必须按照优先原则进行层次排序。形状、颜色、阴影、对比度、大小、平衡、动作、排版 - 一切都必须遵循优先原则。

注意:消除干扰。所有不是第一印象的优先级的东西都必须减少可见性、隐藏或移动到其他地方。

Ramos - 数字业务分析平台的网站设计## 8. 使用相关的图片

当图片与网站的目的、理念和内容相匹配时,它们就是相关的。如果理念与其视觉表达不符,就会导致误解和不信任。这不仅仅是指脱离上下文的图像。一个致力于创新的网站如果使用过时的设计也是一个不相关的例子。同样,那些分散注意力、让信息传达变得困难的花哨效果也是不相关的。

主图必须在视觉上传达内容的本质。

Stable0x - 为首个受监管的收益型稳定币设计的网站

9. 使用简短而有力的标语

使用简短而有力的标语来吸引用户。想出一个好的标语并不像看起来那么容易,这是一个创造性的过程。我建议进行头脑风暴。你的字符空间有限,但你需要简洁地传达你的价值观,解释一些好处或问题的解决方案,或者提出一个相关的问题,以引起用户的兴趣。头脑风暴是找到原创想法的好方法。

Flash - 为购物电子邮件服务设计的网站

10. 在 CTA 上保持微妙

你可能有一张具有良好转化潜力的主图,但如果没有 CTA,它将毫无价值。然而,对待 CTA 应该谨慎。

永远不要使用 CTA 施加压力。

设计你的 CTA 时要友好而不具有攻击性,而不是强求。不要迫使用户一次性学习所有内容、购买或订阅。CTA 是用户在实现目标的路径上的一个逻辑步骤。如果你的标语和可视化没有引起他们的兴趣,任何 CTA 按钮或文本都不会起作用。

CTA 是你的设计和商业理念的有机延伸。欢迎访问你的网站。这就是 CTA 按钮或消息的目的:它邀请用户参与行动。

将你的用户界面和用户体验聚焦在使用户的目标变得有吸引力上。

只有这样,你的 CTA 才能发挥作用。按钮并不能激励任何人。人们被未来的想法和图像所激励。

免责声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关文章

在 Figma 中使用自动布局的技巧
2024年11月21日20:43
本文分享了在 Figma 中使用自动布局构建响应式组件的技巧,重点介绍了“固定”、“填充”、“拥抱”等大小选项的应用。文章通过实例展示如何创建组件,并在设计过程中逐步测试其响应性,确保最佳的可扩展性和稳定性。通过调整组件和布局设置的顺序,设计师可以更有效地利用自动布局工具。
设计更好的文本输入控件的 8 个技巧
2024年11月17日10:35
本文分享了设计用户输入表单中文本输入控件的8个实用技巧:不要将标签用作占位符,避免使用过长的标签,清晰传达输入要求,不要在控件内使用占位文本,使用适当的输入控件,仅标记可选字段,调整输入控件宽度,使用视觉指示和文本突出显示错误。这些技巧有助于创建直观、用户友好的输入表单,提高产品的可用性和用户体验。
登录表单用户界面设计指南
2024年11月14日21:09
本文探讨了设计简单、极简登录表单的方法,包括层次结构条带的应用和网格间距的定义。通过详细的设计步骤,强调用户界面的逻辑分组和字体选择,确保对比度检查以提高易用性。同时,提供了一些可能的改进建议,帮助设计师展示对细节的关注。
如何处理超过 100 个选项的筛选器
2024年10月11日18:00
在模态中添加导航,通过侧边栏和堆栈设计,使用户可以轻松浏览数百个筛选选项。在移动设备上,使用手风琴菜单或逐级深入的方法来处理筛选器。这些设计解决方案可以提升用户体验,尽管实施需要大量工作。
设计下拉菜单的 10 个最佳实践
2024年09月10日20:20
本文分享了设计下拉菜单的10个最佳实践,包括避免过长菜单、不要在仅有2个选项时使用下拉菜单、禁用无效选项、避免过于明显的选项使用下拉菜单、限制多级菜单等。此外,还提到了设计清晰的视觉设计、考虑移动设备适配、组织选项顺序、提供搜索功能和设置默认选择。通过遵循这些实践,可以提高产品的可用性和用户体验。
UI 设计技能等级与被雇佣关系的分析
2024年07月04日21:34
通过观察500份初级UI设计师作品集,发现达到第四级及以上的设计师更容易被雇佣。关键因素包括可读性、布局、颜色、对比度、字体选择等。从第一级到第五级的设计水平有明显差异,第四和第五级的设计更受欢迎。设计师需要注意间距、字体选择、结构等细节。第五级设计要求严格遵循8点网格、一致的间距和清晰的结构。练习和努力是提升设计水平的关键。