怎样设计出优秀的登录页

怎样设计出优秀的登录页

By:limo- 2017-12-04 10:44:41


正确的登录页面设计可以创建或破坏一个网站,因为这将是你的访问者操作的第一个页面,如果这个页面做的不好,那么大多数人将不会再逛这个网站了。登录页面设计应该清楚地传达产品或服务的独特卖点,并专注于一个调用行动(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在这个版本的首页。


『阅读更多建站知识文章』