网页设计--极简的引导页面

申请免费试用、咨询电话：400-8352-114

2013年10月7日由卡罗尔K |5评论

网页设计师在过去的几年中已经逐渐意识到，搞乱我们的设计非必需元素，不是一个好主意。毫无意义的照片，质感垃圾背景，令人费解的导航系统，社会共享按钮，博客岗位部件，和其他类型的页面膨胀过度的设计元素，从我们的网页设计的核心目标转移了人们的注意力。因此，现在更多地不是增加更多的东西和更多的选择，我们很多人都选择减少我们的设计 ，使其展现最基本的形式。在视觉上比他们的前辈更简单，给人们的感觉却更深刻。

简约的页面几例

为了确保我们在同一页上，让我们赶紧看看一些成功的Web应用程序的引导页面：

邮箱

TinyLetter

Dropbox的

IFTTT

请注意，上面的应用程序是相当复杂的，他们能完成他们的用户创新和复杂的事情。

然而值得注意的是，他们没有一个同样复杂的引导页面。

让我们研究这些很好的例子的简约的引导页面，并从中获得他们的设计模式，技巧和思想。

简约的引导页面：大思路

你会立发现有关简约的引导页面只有一个是他们的首要目标。

无论是点击一个注册按钮或Web表单中输入您的电子邮件地址，或下载到您的电脑上的东西，在这个页面上只有一个良好定义引导页面的网页设计师希望她的用户采取的行动。

约的引导页面没有复杂的导航菜单， 你通常不会对他们的社会化媒体按钮找到一个巨大的数组。缺乏装饰的照片，其唯一目的是填补空白的空间。

每一个设计元素，精心选择。

一切战略是用来支持和加强网页设计师想要的网站访问者采取行动。

引导页案例研究：Dropbox的

Dropbox的网站是一个逐步简约的设计，演示的概念有一个引导页面只有一个主要目标的一个很好的例子。

Dropbox的引导页面只有一个主呼叫行动，这是很容易发现，因为网页设计的主要目标是让网站的访问者点击注册按钮。

在网页上Sign up按钮是最有特色的元素。 。

是的，有次要的Dropbox的引导页面访问者可以采取：下载软件，请登录（如果你已经是一个Dropbox的用户），或了解更多关于Dropbox的替代行动。 然而，这些替代行动电话设计的方式，并不妨碍首要目标是让网站的访问者点击Sign up按钮 。

在柔和的时尚设计删除所有非必需的元素。 例如：

• 站点的名称（ 保管箱 ）甚至不显示在目标网页上，甚至应用程序的名称被证明是一种非必需的元素。
• Dropbox的解释如何工作的，他们用一个简单的例子，双提请您注意向Sign up按钮 。
• 标语（ 你的东西，任何地方 ）是短期和简单。

Dropbox的着陆页网站访问者采取什么样的行动就是了，做一个自信，果断的选择，然后将其设计的方式，强调在该行动。

着陆页案例研究：邮箱

邮箱 ，一个应用程序，帮助用户有效地处理在移动设备上的电子邮件，向我们展示了一个伟大的简约着陆页面设计的另一个例子。

主要动作是一个大的，独特设计的按钮点击标记在苹果App Store中的应用程序 ，使用户邮箱页面。

有力地说明了什么样的邮箱是一个简单的产品中的主呼叫行动的权利（产品，打开一个视频的时候点击）截图。

另类的动作出现在网站的导航菜单，但不再强调视觉导航菜单。

着陆页案例研究：因果报应

是一个美丽的简约引导页面的另一个很好的例子。

这个着陆页所需的主要行动是点击“ 立即购买”按钮。 主要动作显示两次：一次在中间的布局，和其他的顶部。 呼叫动作按钮都是绿色的，相同的标记，看上去很相似，它们之间创建连接。

次要的替代行动用户可以点击“ 了解更多 ”按钮。 正如你可以看到， 了解更多 “按钮的透明度降低了它的视觉重量，所以它不偷的注意力从主买现在号召性动作按钮旁边。

以上的呼叫动作按钮的简短描述简洁封装噶的独特的价值主张：一个社会共享的WiFi连接。

高清晰度的背景照片是有意义的，图为产品看起来像什么，并给你一个想法，关于尺寸的产品（手拿着产品是一个有用的上下文暗示）。

简约的着陆页的基本元件

您可能会看到现在中反复出现的设计模式。 简约主义的引导页面有三个主要组成部分：

1. 主要动作
2. 产品/服务的说明
3. 另类动作/秒

当我们去到下一个部分的这篇文章，我们通过几个例子，记住保持这三个组成部分。

简约的着陆页的设计技巧

下面是一些技巧和思路的基础上重复出现的图案，我们已经看到在简约的引导页面。

专注于创建一个良好的视觉层次

为了提醒大家注意一个引导页面的最重要的部分，视觉层次组成。

视觉层次是刻意安排的元素在设计中，最重要的元素是第一次见到。

一些影响一个引导页面的层次结构，在视觉设计元素的位置的主要特点是：

1. 大小：更大的元素是更高层次的。
2. 在网页中的位置：对于大多数网站的顶部和左侧的一个网页的元素层次结构中较高。
3. 色彩的对比：一个特定的元素和背景之间的对比度更强，以及作为其他元素之间的接近，会导致在视觉上层次到较高的位置。
4. 视觉的复杂性：相比周围的元素给出了一个更复杂的审美元素更强的视觉重量。
5. 空白：多个空格周围的元素，赋予了它更强的视觉重量。

在下面的例子中，要注意大小，位置，色彩对比，视觉的复杂性，和空白如何被用来建立所需的视觉层次。

例如：Numbrs

简约的网页设计Numbrs视觉层次方面是一个很好的话题。

的应用程序（1）和应用程序的主呼叫动作的按钮（2）的描述中，在web页面中的两个最突出的元素。

音量控制（3）视觉上的层次相当高太多，因为你可能要关闭音频，当您访问引导页面。

现场（4）和替代行动的名称，你可以采取（5）在视觉层次低。

例如：漫步

可以看出，良好的视觉层次组成的另一个示范漂移的极简引导页面。

仅有四个设计中的前景元素。

在视觉上的层次结构的最顶层的是一个声明，让人们知道该网站是在登录窗口（1）。 下面的语句是一个号召性动作按钮（2）中要求用户登录。

显著都是次要的替代行动漫步的引导页面游客可以乘坐，如喜欢在Facebook上漂移（3）在视觉层次低得多。 Facebook的按钮也显示Facebook的喜欢漂移的数量，服务的双重目的，向社会证明有关的应用程序的网站访问者。

其他辅助操作网站的访问者可以观看漂移的社交网络帐户或阅读漂移的Tumblr博客（4）。

建立在你的网页设计的视觉层次

阅读这些指南的技巧和思路视觉层次组成：

• 工作在你的设计中的视觉重量 -给你的设计元素，适当的视觉重量的基础上自己想要的位置，在视觉上层次的指南。
• 创建联络员在你的网页设计 -有些技术提请注意特定的设计元素，在这篇文章中讨论。
• 格式塔原理在设计中的应用 -完形是一组人的心理理论，意味着一些有用的技术在您的设计中树立了良好的视觉层次。

确保主要动作是最突出的元素

第一步是决定你想你的网站访问者采取什么主要动作。 它是点击某个按钮？ 是喜欢你的Facebook页面？ 是它填补了一个Web表单？

选择一个主要动作，然后提交给它充分。 然后，设计的网页支持，主要操作。

例如：enthuse.me的

引导页面上最突出的元素的主要作用一个很好的示范，可以看出上enthuse.me ：

有了一个良好的视觉层次，它的主要作用是立即明显上手！按钮点击。

例如：IFTTT

注意怎么的主要作用是相当明显的在IFTTT引导页面：

使用颜色和排版战略

网页设计师创建极简网站只会有几个工具，在他们的军火库：颜色和字体是其中最主要的。

例如：大本营

大本营是一个例子，简约的着陆页，使用的颜色和版式战略。

用于绿色的主呼叫行动。 蓝色用于二次呼叫行动（如日志现有用户和其他网页的链接描述的原因，人们使用的Basecamp）按钮。

大字体和色彩的设计元素的变化有助于提请您注意在引导页面的利益相关点。

例如：路径

接下来，让我们来看看路径如何使用颜色和漂亮的版式，建立适当的视觉层次。

一个显着的绿色的颜色是他们的首要期望的动作，这是填补了一个Web表单上使用。

不同的字体大小，文字颜色和文字处理有效地分割部分的兴趣，他们的引导页面。

保持文本内容简洁

现在， 网民很少阅读本网站的内容，这是一个众所周知的事实，我们可以合理地假设一个互联网用户的耐心是更短的时候，他的一个产品，他不涉及尚未引导页面上。

简约的引导页面必须保持短期和易于理解的文字内容。 用更少的东西，阅读，网站访问者更迅速地提示采取行动。

例如：美满

心满意足 3个字来形容他们的Web服务的价值主张： 告诉伟大的故事，这是如此的深刻，内容是围绕Web服务！ 着陆页面上很少有文字内容，减少出轨站点访问者的道路采取行动的可能性。

例如：运费

提单上可以看到的另一个良好的示范文本内容保持有益的短。 在5个简单的字- 分享和检讨自己的设计 -网站的访问者变成即刻知道什么一批可以为他/她做。

产品/服务快速解释

有许多方法，有力地证明一种产品或服务是如何工作的。 这里的关键是要保持尽可能简单的解释。

让我们来看看几个方法可以有效地阐释一个概念。

视频说明：情侣示例

夫妻的应用程序使用的产品视频解释它如何工作，趁着产品视频可以显着提高转换率的事实。

视频正在逐步披露，点击“现在播放”图标按钮：

点击按钮后，YouTube的视频显示在一个模态窗口。 模态窗口是容易接近，使用户不必采取下一步行动前，观看整个视频。

这个例子也恰如其分地揭示了一个概念，应该被应用到行动次要内容： 使用视频，而不是立即呈现视频-这会影响到引导页面的视觉层次，因为视频有沉重的视觉重量，由于其规模和颜色 - 视频显示，只有当用户明确希望看到它。

例如互动旅游说明：苹果的Mac Pro

苹果的Mac Pro的简约引导页面描述产品演示另一种流行的方式：交互式产品旅游。

解释开始一个快速的动画来吸引你的注意力，以及提供一个提示，该网页有动画的交互。

的一个静态图片说明：Wallmob的例如

高清晰度的背景照片的的登陆Wallmob页面找到，是一个典型的例子，如何用一个有意义的图像。

的背景照片足以说明什么Wallmob，为您的移动设备的应用程序：一个销售点。

简单是复杂的

正如你可以看到，这样的设计引导页面是非常简单的概念：简约主义着陆页是目标为中心，目标只有一个。

通过去除不必要的元素，给你机会直接设计和生产的努力 - 以及您的网站访问者的注意力 - 真正重要的东西。