在过去的几年里，网页设计师们逐渐意识到，在我们的设计中充斥着不必要的元素并不是一个好主意。过多的设计元素，如毫无意义的库存照片、纹理粗糙的背景、复杂的导航系统、社交分享按钮、博客帖子小部件和其他类型的页面膨胀，将注意力从我们网页设计的核心目标上偷走。因此，我们中的许多人并没有增加更多的东西和更多的选择，而是选择将我们的设计简化到最基本的形式。
虽然我们正在构建的网站在视觉上比以前的网站更简单，但结果却适得其反。
极简主义登录页的几个例子
为了确保我们在同一页上，让我们快速看一下极简的登陆页面一些成功的网络应用:
邮箱
TinyLetter
Dropbox
IFTTT请注意，上面的应用程序相当复杂;他们为用户完成有用的、创新的、复杂的事情。然而有趣的是，他们没有一个同样复杂的登陆页面。让我们来学习一些很好的例子极简的登陆页面并从中获得设计模式、技巧和想法。
极简主义登录页:大想法
关于极简主义的登录页，你会立即注意到它们只是一个主要目标。无论是点击注册按钮，还是在网页表单中输入你的电子邮件地址，或者下载一些东西到你的电脑上，只有一个明确的动作，网页设计师希望她的用户采取。在极简的登陆页面上没有复杂的导航菜单。
你通常不会在上面找到大量的社交媒体按钮。该设计缺乏装饰性的库存照片，其唯一目的是填补空白。每一个设计元素都是精心挑选的。
每件事都是经过战略设计的，以支持和加强网页设计师希望网站访问者采取的预期的主要行动。
登陆页案例研究:Dropbox
网站Dropbox是一个渐进的极简设计的典型例子，它展示了在登录页面中只有一个主要目标的概念。Dropbox的登录页只有一个主要的行动号召，而且很容易发现，因为网页的设计方式。设计的首要目标是让网站访问者点击报名按钮。
的报名按钮是网页上最具特色的元素。其他一切都被淡化了。是的，Dropbox的登录页面访问者可以采取次要的替代操作:下载软件、登录(如果你已经是Dropbox用户)或了解更多关于Dropbox的信息。
然而，这些替代的行动号召的设计方式不会妨碍让网站访问者点击网站的主要目标报名按钮。所有非必要的元素都被删除或以柔和的方式设计。例如:
- 网站名称(Dropbox)甚至不会显示在登录页面上;甚至连应用程序的名称都被证明是一个非必要的元素。
- 为了解释Dropbox是如何工作的，他们用了一个简单的插图来吸引你的注意力报名按钮。
- 宣传语(你的东西，任何地方)简短而不复杂。
Dropbox的登录页面做出了一个自信而大胆的选择，它希望网站访问者采取什么行动，然后它的设计方式强调了这一行动。
登录页案例研究:邮箱
Mailbox是一款帮助用户在移动设备上高效处理电子邮件的应用程序，它向我们展示了另一个极简主义登录页面设计的例子。主要操作是点击一个设计独特的大按钮获取应用程序将用户带到苹果应用商店的邮箱页面。
在主要行动号召(点击时打开产品视频)的右侧，有一个简单的产品内部截图，有效地说明了Mailbox是什么。
在站点的导航菜单中可以看到替代操作，但是导航菜单在视觉上被弱化了。
登陆页案例研究:Karma
业力是一个美丽的极简主义登录页的另一个极好的例子。登录页上的主要操作是单击立即购买按钮。主要操作将显示两次:一次在布局的中间，另一次在顶部。
行动呼叫按钮都是绿色的，标记相同，并且在视觉上相似，以创建它们之间的连接。
用户可以采取的第二个操作是单击了解更多按钮。如你所见，透明度了解更多按钮减少了它在视觉上的分量，所以它不会偷走主窗体的注意力立即购买旁边的行动按钮。
号召行动按钮上面的简短描述概括了Karma的号召行动按钮独特的价值主张:社交共享WiFi连接。高分辨率的背景照片很有意义;照片展示了产品的样子，并让你对产品的大小有了一个概念(手拿着产品是一个有用的上下文提示)。
极简主义登录页的基本组成部分
到现在为止，您可能会看到一个重复出现的设计模式。一个极简的登录页面有三个主要组成部分:
- 主要行动
- 解释什么是产品/服务
- 可供选择的行动/秒
当我们进入本文的下一节并浏览更多示例时，请记住这三个组件。
极简着陆页的设计技巧
以下是基于我们在极简主义登陆页面中看到的重复模式的一些技巧和想法。
专注于创建一个良好的视觉层次
为了将注意力吸引到登陆页面最重要的部分，视觉层次结构应该很好地组合。视觉层次结构是对设计中各个元素的精心安排，使最重要的元素最先被看到。影响设计元素在登陆页面视觉层次结构中的位置的一些主要特征是:
- 大小:更大的元素在层次结构中位置更高。
- 在网页中的位置:对于大多数网站来说，网页顶部和左侧的元素在层次结构中更高。
- 颜色对比:一个特定元素与其背景之间的强烈对比，以及它附近的其他元素之间的强烈对比，将导致在视觉层次中的更高位置。
- 视觉的复杂性:与周围的元素相比，更复杂的美学赋予了元素更强的视觉重量。
- 空格:元素周围的空格越多，视觉权重就越强。
在下面的例子中，请注意大小、位置、颜色对比、视觉复杂度和空白是如何用来建立所需的视觉层次结构的。
例如:Numbrs
Numbrs的极简主义网页设计是一个关于视觉层次的很好的讨论点。应用程序的描述(1)和应用程序的主要行动号召按钮(2)是网页中最突出的两个元素。
音量控制(3)在视觉层次上也相当高，因为你可能想在访问登录页面时关闭音频。
站点的名称(4)和您可以采取的替代操作(5)在视觉层次结构中较低。
例如:漫步
的极简登录页中可以看到良好的视觉层次结构的另一个演示漫步．在设计中只有四个前景元素。
在视觉层次结构的最顶层是一个声明，让人们知道网站正在接受注册(1)。
在声明下面是一个呼吁行动的按钮，要求用户登录(2)。在视觉层次上明显更低的是Wander的登录页面访问者可以采取的次要替代操作，例如在Facebook上为Wander点赞(3)。Facebook按钮还显示了Wander在Facebook上的点赞数量，为网站访问者提供了双重目的社会证明关于应用程序。
网站访问者可以采取的其他次要行动是查看Wander的社交网络账户或阅读Wander的Tumblr博客(4)。
在网页设计中创建视觉层次结构
阅读这些指南，获得组合视觉层次结构的技巧和想法:
- 在你的设计中使用视觉重量-根据设计元素在视觉层次结构中的理想位置，为其提供适当的视觉权重的指南。
- 在网页设计中创建焦点本文讨论了一些吸引人们注意特定设计元素的技巧。
- 设计中的格式塔原则格式塔是一套人类心理学理论，它暗示了一些与在设计中建立良好的视觉层次有关的有用技术。
确保主要行动是最突出的元素
第一步是决定你希望你的网站访问者采取什么主要行动。是点击某个按钮吗?是点赞你的Facebook主页吗?
是填写网页表单吗?选择一项主要行动，然后全身心投入。然后设计网页来支持这个主要操作。
例如:enthuse.me
在zeal .me上可以看到将主要操作放在登陆页面最突出的元素:
有了良好的视觉层次结构，很明显，主要操作是单击开始吧!按钮。
例如:IFTTT
的主要动作IFTTT登陆页面非常明显:
有策略地使用颜色和字体
创建极简主义网站的网页设计师只有少数几个工具:颜色和排版是其中最主要的。
例如:Basecamp
Basecamp是一个极简主义的着陆页面的例子，它巧妙地使用了颜色和排版。
绿色用于主要的行动号召。蓝色用于次要的行动号召(例如现有用户的登录按钮和另一个描述人们使用Basecamp原因的网页链接)。
大字体和设计元素的颜色变化可以将你的注意力吸引到登录页的相关兴趣点。
例如:路径
接下来，让我们看看Path如何使用颜色和出色的排版来构建适当的视觉层次。一种独特的绿色被用于他们的主要期望动作，即填写网页表单。
不同的字体大小，文本颜色和文本处理有效地分割感兴趣的部分在他们的登陆页面。
保持文本内容简洁
到目前为止，这是众所周知的事实互联网用户很少阅读我们网站的内容。我们可以合理地假设，当互联网用户在一个他还没有使用过的产品的登录页面上时，他的耐心要短得多。极简着陆页必须保持文本内容简短，易于理解。
由于要阅读的内容更少，网站访问者可以更快地采取行动。
例如:合适
合适能够用3个词描述他们的web服务的价值主张:讲好故事。考虑到web服务是以内容为中心的，这是非常深刻的!在他们的登陆页面上有很少的文本内容，减少了网站访问者采取行动的可能性。
例如:装运
另一个保持文本内容简短的好例子是装运．简单的五个字——分享和审查你的设计-网站访问者立即意识到Shipment可以为他/她做什么。
快速解释产品/服务
有很多方法可以有效地说明产品或服务是如何工作的。这里的关键是让解释尽可能简单。让我们来看看几种有效说明概念的方法。
视频讲解示例:夫妻
“情侣”应用程序使用了一个产品视频来解释它是如何工作的，利用这个事实产品视频可以显著提高转化率。点击“立即播放”图标按钮，视频将逐步公开:
单击按钮后，将在模态窗口中显示YouTube视频。模式窗口很容易关闭，所以用户在采取下一步行动之前不必观看整个视频。
这个例子还恰当地揭示了一个应该应用于次要动作和内容的概念:进步的披露。在使用视频时，不要立即显示视频——这将影响登录页面的视觉层次，因为视频的大小和颜色有很重的视觉权重——只在用户明确想要看的时候显示视频。
交互式旅游讲解的例子:苹果Mac Pro
的苹果Mac Pro极简主义的登录页面演示了另一种描述产品的流行方式:交互式产品参观。
解释以一个快速的动画开始，以吸引你的注意力，并提供一个提示，网页具有动画互动。
一个静态照片说明的例子:Wallmob
在Wallmob登陆页面上找到的高分辨率背景照片是如何使用有意义的图像的典型例子。
背景照片说明了Wallmob是什么:一款移动设备上的销售点应用。
简单即复杂
正如你所看到的，这种设计着陆页的方法在概念上非常简单:极简主义的着陆页是以目标为中心的，而且只有一个目标。通过删除不需要的元素，您就有机会将您的设计和生产工作——以及网站访问者的注意力——引导到真正重要的事情上。
