• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何做落地页设计?这儿有20个顶尖的案例和优点分析

如何做落地页设计?这儿有20个顶尖的案例和优点分析

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,着陆页,经验分享等相关知识,希望在学习及工作中可以帮助到您

Lisa :在今天这样一个互联网+时代,绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么的重要。这些潜在客户对你的公司及产品印象的好坏,很大程度上取决于你在网站设计上投入精力的多少。所以花时间构思一个好的网站设计,特别是主页部分的设计非常关键。

用户点击完搜索结果后首先跳转到的页面就是该网站的主页,主页直接影响到访客对该公司及其产品的第一印象,所以必须把这个页面尽可能设计得友好且抓人眼球。

在欣赏这20个优秀的主页设计之前,我们先来介绍一下现代主页设计应包含的基本要素。

有效介绍你的公司的能力

一个主页最重要的部分在于它能否有效地吸引访客的注意力。所以关键在于,你的主页能否在几秒钟内解答访客心中的三大疑问:

1. 这是个什么性质的公司?

2. 这个公司具体是做什么的?

3. 和竞争对手比,你的优势在哪?

如果你的主页能够准确清晰的回答这三个问题,那么访问者就能在了解你的公司的基础上有把握的购买你的产品及服务。

许多企业有其独特的标语或简短的口号,用以凸显其价值主张(UVP)。他们通过简练的语言传达出公司理念,与访客建立起一种联系。所以这些标语经常出现在主页上,并大量的用于公司的品牌营销策略。

自适应、简约的设计

访问者会通过PC、平板电脑或智能手机等设备登入你的网站。随着全球移动普及率的不断提高,最新的数据显示将近60%的网站流量是移动设备提供的。

为了确保你的网站有更好的用户体验,在页面设计时考虑其自适应性很关键。自适应设计意味着无论通过什么设备接入你的网站,用户的体验是相同的或非常相似的。首先,导航要设计的方便,使得用户可以快速浏览不同的页面;其次,功能需要类似,这样用户无需切换设备即可访问网站的全部功能;最后,设计要简单,这样才能确保你的设计在不同尺寸的屏幕上都可以清晰地传达。

一个风格一致且响应及时的网站将有助于保持品牌的知名度,为访问者跨平台与公司保持联系提供方便。

动态感,互动性和联系性

人们更倾向于记住那些能调动他们情绪的事情。将这个窍门应用到你的主页设计上可以为访问者创造一种非凡的体验。

一个动态主页可以让访客保持心情愉悦,在使用的过程也更容易留下深刻的印象。而充分利用变化的插图、动画、视频或迷你游戏可以增强开发者和用户之间的互动性。在页眉和页脚加迷你动画这样的小细节,也是提高用户体验的不错选择。

动态布局可以让访客了解你的整体想法。虚拟现实或360°场景漫游页面可以更立体地向用户展示公司业务及其产品,达到巩固其与品牌之间联系的效果。

定期更新主页内容、及时反映客户所需或分享公司的最新动态,这些都是使网站保持活力并与访客加强联系的方式。http://IBM.com提供了很多动态主页布局的案例。

换言之,在设计和布局主页时采用动态方式可以加深你与用户之间的合作,为他们提供有趣而又独特的体验,这样他们就会时不时地上你的网站逛逛啦!

简单、流畅的导航

整个网站的使用过程应该是很流畅的。如果访客在访问网站过程中产生了挫败感,那么这种负面情绪将会极大地影响你们之间的关系。

一个巧妙且直观的主页设计首先应该使用简单的导航,通过颜色和对比度等视觉分隔手段来打造易于识别的菜单。其次,不同页面标签之间应具有合理的逻辑关系,这样用户才能快速找到导航选项卡或按钮的位置。确保访问者知道自己在网站所处的位置也是非常重要的,因此选定之后产生一些视觉变化(如:突出显示,对比度或颜色更改)可以带来不一样的效果。一个优秀的主页设计可以使访问者在不同页面和分屏之间轻松游艺,时刻保持与用户的紧密联系,以激起他们继续访问的欲望。

适当加入号召性用语

你的主页有人访问了!这是一个很好的开始,但你要怎么留住他们呢?许多现代主页通过具体的号召性用语(CTA)吸引访客注意,例如“立即注册”、“加入我们”、“免费试用”、“立即订阅”等等,这里有一些可以增加点击率的CTA示例

网页应该致力于吸引目标用户的注意力,引导其进一步了解公司,找到自己想要的信息,留下联系方式,或以其他方式与公司进行联系。恰到好处的CTA可以引导访问者在你预期的路径上浏览,这样原本只起到宣传手册作用的主页将变为强有力的销售引擎。

和时代标准保持一致

就在不久之前,设计的世界还是相当平静、封闭和对称的。随着平面设计技术的日趋成熟,设计师们变得越来越大胆,开始挑战既有规则并采用创新性更强的设计。

现在,我们已经看到越来越多的不对称的网站布局,因为设计师们已厌倦完美平衡的世界,那有时意味着单调、无聊和教条。采用极简主义手段构建框架,并在定位元素和色板选择上加入更多创意,设计师们通过玩转设计创造振奋人心的新标准。

尽管如此,大多数现代网站通常还是由以下部分组成:

  • 创意的布局
  • 相关CTA用语
  • 巧妙运用的留白
  • 令人愉悦的配色
  • 合适的字体元素
  • 高互动性、大片式用户体验
  • 悦耳的背景音乐

总的来说,主页关系到访问者对你公司的第一印象,所以它必须能有效地介绍你的公司及产品。你还需要考虑到设计的适应性,同时确保该页面是动态的、有吸引力的、易于浏览地,这样用户才会更愿意去注册。根据需要更新你的主页和网站,保持你线上内容的话题性和有效性,这样你的网站一定会有很高的回访率!

介绍完一个优秀的主页所需的理论部分,下面让我们来看看20个顶级的首页设计实例,分析这些理论在实践中是如何进行运作的。

1.?PLEX.TV

这个设计好在哪?

  • 资料丰富,但简洁。利用视频和滑动客户推荐页等互动方式,利用最少的文字成功描述了产品的内容。
  • 通过以内容为主的方式让用户获取产品的具体信息,如这款产品可以在哪里使用、如何使用以及如何开始使用。
  • 用户提示语的合理放置。页面设计和布局不仅适用于新用户,也为想添加更多设备的老用户提供方便。

2.?SLACK

这个设计好在哪?

  • 简单的主页,丰富的口号。
  • 没有不必要的动画或过分装饰分散用户的注意力。消息清楚且切中要害。
  • 整体设计与应用程序的外观保持一致,使整个品牌具有连续性。
  • 即使有很多的内容,导航依旧清晰简单。

3.?Dropbox

这个设计好在哪?

  • 干净、简单的设计,变幻多端的布局。
  • 吸引人的搞笑手绘,有效推销产品的语言。
  • 一个强有力的标语,充分描述了产品功能:“随时随地,与人分享”。

小贴士:Dropbox是一个著名的品牌,该公司目前主要致力于推广他们新的文档创建工具Paper 。Paper的主页被分割成三个色块,分别代表的产品的三个不同部分:业务解决方案,文档工具和经典应用。简约、清晰的设计与Dropbox的其他品牌相一致,但功能强大到独树一帜。

4.?STORYTRAIL

这个设计好在哪?

  • 现代元素设计和易于操作的导航。
  • 将其功能清楚地展示在首页,便于访客了解。
  • 通过毫无违和感的动画体现其特性。
  • 文字伴随流畅的动画效果出现和消失,让访客产生一种参与感,想继续往下浏览。

5.?MEETTHEGREEK

这个设计好在哪?

背景视频有两个目的:吸引访客的注意力,创造有趣的体验。

  • 餐厅在主页设置了这样的一个主人公角色,成功取悦了用户,与用户建立起紧密的情感联系,让他们有进一步探索的欲望。
  • 柔和的颜色和简单的字体让访客产生一种好像在与主人公交谈的感觉。
  • 友好的设计和简单的导航与背景视频融为一体。
  • 点击菜单栏时,屏幕会分割成两部分。这样访客在浏览相关信息的时,视频也在屏幕另一边同步播放。
  • 主页设计让人充满积极的能量,并自然而然地产生一种“内部”视角。

6.?FORHONOR

这个设计好在哪?

  • 主页设计使用户一步步沉浸到游戏世界。
  • 有一套优秀的字体与之完美配合。
  • 冲击剑的音效渲染了整体氛围。
  • 与用户的微交互遵循着简单的规则:触发 -> 规则 ->反馈 ->循环模型。微交互是一个无休止的循环。

7.?ENJOY-AIIA

这个设计好在哪?

  • 简约、明亮、醒目的设计。
  • 合适的字体组合。
  • 清晰可视化的操作按钮在体现品牌特性的同时,与用户形成互动。
  • 在不影响整体风格、保持品牌认知度

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2017-08-06分享20个优秀的网页表单设计案例
  • 2018-08-23超全面的移动端顶部栏设计分析
  • 2018-08-23我在网易游戏做交互实习这段时间,总结了这8个点
  • 2017-08-06如何在网站中插入天气预报
  • 2017-08-06网页变灰的笔记 细节问题处理
  • 2017-08-06关于儿童类网站的视觉结构布局设计的方法分析
  • 2018-08-23用品牌基因法,三步帮你搞定图标设计!
  • 2018-08-23用这个设计方案,成功解决了为色盲设计的难题
  • 2017-08-06css如何实现自定义更为美观的链接提示效果
  • 2018-08-23设计道理谁都懂,为什么换自己就不会?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 交互进阶!如何扫除交互设计路上的3大障碍?
    • 网站图标Icon添加方法!
    • 超全面的图标基础知识总结
    • Web 设计 实现干净代码的12条定律[图文]
    • UTF-8文件的Unicode签名BOM(Byte Order Mark)问题
    • 分享5个有帮助的CSS选择器丰富你的CSS经验
    • 轻松看懂规范!详解组件控件结构体系之加载类
    • WEB中文字体应用指南
    • windows下NodeJS安装配置步骤
    • 让IE6、IE7、IE8支持CSS3的圆角、阴影样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有