正确的登录页面设计可以创建或破坏一个网站，因为这将是你的访问者操作的第一个页面，如果这个页面做的不好，那么大多数人将不会再逛这个网站了。登录页面设计应该清楚地传达产品或服务的独特卖点，并专注于一个调用行动(CTA)，比如让访问者注册他们的详细信息或者购买。无论目标是什么，它都取决于页面的设计来引导用户走向它，无论是通过使用简洁的页面、漂亮的颜色或更明确的方向线索。

清晰、简洁的标题、子标题和敏感的、容易扫描的要点是当天的顺序。登陆页应该有醒目的标识，经常把企业形象与产品或服务相结合，直接切入正点以避免用户的注意力漂移。从网上找到了一些特别有效的登陆页面设计实例，大家可以参考一下。

01. Interface Lovers

为一个专为“界面爱好者”设计的网站设计一个登陆页面绝非易事，但Facebook的设计师Timothy Achumba却把它钉在了这里。该网站旨在激励人们，在UI设计的工艺上提供实用的建议，并庆祝不同设计师的独特体验。

设计把重点牢牢地放在内容上，并使用平衡的layoutin，由Achumba的初恋:print。“界面爱好者的设计，基于从报纸版面上取下的简单的三栏网格，是不复杂和干净的，”他说。美丽的人像摄影吸引了游客，并强调了网站对个人故事的兴趣。

为了构建这个站点，开发人员Iheanyi Ekechukwu利用了Tachyons，这是一个功能CSS框架，允许对设计进行细粒度的控制。结果是一个华丽的，最小的设计，没有任何的铃声和哨声。

02. Google Fonts

谷歌引导你直接到字体，没有任何麻烦

最初在2010年推出的谷歌字体现在在互联网上被浏览超过150亿次，在全球超过135种语言中。谷歌字体网站是干净和完全响应的，使用材料设计的网格和样式。

在她的博客文章中，设计师Yuin Chien解释道:“我们通过建筑的能力来玩尺度、颜色和字体的配对，我们邀请每个人在他们的项目中发现并无缝地使用字体。””,她是对的。界面既诱人又美观。这也是一种直观而有趣的探索。

至关重要的是，它不会强迫你跳过hoops来获取字体;他们就在登陆页面的顶端，准备好让你玩了。您可以直接输入页面的文本字段来测试它们。如果你被选择淹没了，谷歌可以很容易地缩小范围，在字体类别和方便的滑块上，有很多风格，厚度，倾斜和宽度。

03. MIT Technology Review

麻省理工学院的技术评论让它变得简单

很多网站都在用花里胡哨的方式来浏览这些页面，找到一个能让事情变得简单的网站是一种解脱。麻省理工学院(MIT)的技术综述首次发表于18世纪末，它有着悠久而自豪的传统，它的网站是专门为展示优秀的艺术和阅读而设计的。

登陆页面是一种乐趣，你可以用一个大胆的封面故事，三个次要的故事，以及一个被称为“下载”的故事。这使得访问者能够以一种没有废话的方式快速地了解事情。右上角的一个大红色订阅CTA也立即吸引了你的眼球，引导访问者进入付费的网站选项，而不会妨碍他们享受免费的内容。

04. Resn

神秘的“坠落”打破了常规登录页面设计的大部分规则

现在让我们来看看一个页面，它忽略了登陆页面设计的大部分规则，但无论如何都是成功的。从来没有人排队，使用标准的用户界面模式，设计机构Resn建立了一个以“Drop”为中心的登陆页面，这是一个神秘的、闪闪发光的泪滴形状的多边形，它充当了Resn心灵的入口。

点击并按住鼠标，你就会变成一个灰度，苹果主题的万花筒;一种用x射线激光束将人肉从旧画中剥离出来的蝙蝠。一个有趣的管;一种能提供奇异的剪纸的迷幻乐;天知道还有什么。Resn已经打破了许多创建登录页面的常规规则，但其结果足够令人信服，如果这种东西能让你的船漂浮起来，那么你很有可能继续挖掘，如果不这样做的话，你就不会浪费时间。“The Drop”可能是一个完美的过滤器，用来吸引公司想要与之合作的客户类型，这是一个你可能永远不会忘记的真正华丽的登陆页面。

05. Present & Correct

每个小组都是一个诱惑

在它整洁的华丽图像网格中，现在和正确的网站触及了它的核心受众:那些迷恋文具的人。

一张图纸背景，浅灰色的着色和经典的字体，一个学校锻炼的书vibe和每个面板显示一个漂亮的产品。Stock被精心安排在顶部菜单栏中显示的类别，很容易点击整个过程，从有趣的标题“蜉蝣”开始。

06. Monotype

就像公司本身一样，Monotype的登录页面是关于排版的力量

“我们是类型的公司，”Monotype的登录页面，它的低调而巧妙的设计与这自信的声明携手并进。整个左半边的页面设计都是为了公司的使命宣言，有一个巧妙的转折:通过一个下拉菜单，你可以看到文字的各种字体，以及各种各样的重量和风格，来体验一下Monotype所做的事情。

页面的右边是一个链接到Monotype图书馆，企业许可证，和公司新闻，在不同的字体中有大量的‘M’图标，像drop caps。柔和的sepia色调色板将重点牢牢地放在字体上。

07. LS Productions

《LS》的制作将你带进华丽的苏格兰地区

LS Productions——一家总部位于苏格兰的stills和移动服务制作公司——知道它最大的资产是什么，当你去它的网站时，你会看到它。一个窗口填充的循环视频展示了公司的工作，都是在美丽的地方设置的。向下滚动，你将学习它的三个主要服务:运动、静态和位置。

到这时，登录页已经完成了它的工作。下面的一切——每周的华丽地点，“会见团队”的部分——只是粉饰门面。如果你打算招聘LS产品，那么你就已经进入了一个主要的服务页面，在那里你会发现大量相关的、良好的信息，让你相信公司的适用性。

08. O'Neill

奥尼尔的照片重拍，完美地出售了冲浪和雪梦

美国生活方式品牌奥尼尔主要关注两件事:冲浪和雪。它的美国网站用一个图片引导的登陆页面，把你的衣服范围和运动装备都卖给了你，让你能在巨大的海浪和白雪覆盖的山脉上拍摄。

如果你知道你想要的是什么，那么在登陆点顶部的一组下拉链接可以直接把你带到你想要的东西，但在你的页面下方，你可以看到一些大的、图片引导的部分链接和Instagram画廊。这一切都足以让你冲到海滩上——或者是最近的山的顶部——但不是在先把奥尼尔的装备储存起来之前。

09. Hipstamatic

Hipstamatic的登陆页面显示了该应用程序的功能

对于复古的模拟摄影应用Hipstamatic，这一切都是为了展示酷炫的功能，以及应用程序的外观、感觉和直观的导航，尽可能吸引用户。

在页面的顶部，一个滚动的画廊展示了在实践中“Hipstamatic美学”，而一个巨大的iPhone展示了最新版本的应用程序，它的老式的经典模式和新的推广，具有更多最新的功能。在那下面，一个新的strapline总结了Hipstamatic现在的全部内容:“制作美丽的摄影”，一个大的CTA引导你到App Store。

10. Apple

苹果的登录页面围绕着精美的产品摄影

毫无疑问，毫无争议的工业设计大师可以把一个像样的网站整合在一起，而Apple.com毫不费力的简单，甚至赢得了一个D&AD黑铅笔。

该网站将该公司广泛的产品系列和零号产品放在一个热门产品上。除了顶部的简单导航栏外，它只是精美的产品摄影，产品名称和它的口号。这里甚至连一个CTA都没有——苹果明智地认为，它的精通技术的观众会知道图像和文字与更多的信息联系在一起。这是一个真正的大师班。

11. Pinterest

Pinterest非常有名，它的登陆页面不需要努力推销自己

Pinterest知道它想要什么，并没有心情去击败布什:它是注册的，或者什么都没有。流行的在线剪贴簿在其品牌和迅速发展的声誉上有足够的信心，不要过于担心自己的销售，或者让用户有机会浏览一些董事会，并有机会回避。

在注册卡的后面，Pinterest的一份令人愉快的照片剪贴簿，让人感觉很好，给用户提供了一种体验。这是一个简化版和美化版的你实际上得到的——没有冗长的描述，广告或repin info在这个版本的首页。