当前位置: 首页 >文章 > 着陆页设计
收藏
分享

着陆页设计

举报赵小马UI设计赵小马UI设计发布于 2018-08-032621阅读2点赞
正确的登陆页面设计可以制造或破坏一个网站,因为这是访问者将会看到的第一个页面,如果你弄错了,大多数人都不会在网站多逗留。 页面设计应清楚地传达产品或服务的独特卖点,并专注于一个行动号召,例如:让访问者注册其详细信息或进行购买。 无论目标是什么,它都取决于页面的设计,以便引导用户使用它,无论是通过使用大量留白,对比色还是更明确的方向提示,其目的都是为了页面更好的展示。...





闲话咱们就不多说了,直接进入今天的主题。

 

正确的登陆页面设计可以制造或破坏一个网站,因为这是访问者将会看到的第一个页面,如果你弄错了,大多数人都不会在网站多逗留。


页面设计应清楚地传达产品或服务的独特卖点,并专注于一个行动号召,例如:让访问者注册其详细信息或进行购买。

 

无论目标是什么,它都取决于页面的设计,以便引导用户使用它,无论是通过使用大量留白,对比色还是更明确的方向提示,其目的都是为了页面更好的展示。



01.  接口爱好者



设计一个专注于“界面爱好者”的网站登陆页面并不意味着什么,但Facebook的设计师已经在这里指出了这一点,该网站只在激发人们的兴趣,提供有关UI设计的实用建议,并庆祝不同设计师的独特体验。


设计将注意力放在内容上,并采用平衡布局,基于从报纸版面上取得的简单的三列网格,是简单而干净的。美丽的人像摄影吸引访客,强调网站对个人故事的兴趣。


为了构建网站,一个功能性的CSS框架,可以对设计进行细粒度的控制。结果是一个很好的设计,没有任何花里胡哨的阻碍。


02.  Google字体



Google字体最初于2010年推出,现在每天以超过135亿种语言在网络上查看Google字体超过150亿次。GoogleFonts网站使用材质设计  作为网格和样式,干净而且完全响应。 


通过在规模,颜色和字体配对方面的能力建设,邀请所有人在他们的项目中发现和使用字体,我们可以看到界面是非常漂亮的。这也是直观和有趣的探索。


至关重要的是,它并不强迫你跳过箍环来获取字体。他们就在目标网页的顶部,随时准备和你一起玩。你可以直接输入页面的文本字段来测试。如果您选择不当,Google可以使用字体类别的勾选框和样式,高度,倾斜度和宽度数量的方便滑块轻松缩小范围。

 

03.  MIT技术评论




所以很多网站都用他们的方式来打开这些页面浏览的花哨的技巧,这是一个救济,找到一个网站,保持美好和简单。麻省理工学院的“技术评论”于18世纪末首次出版,具有悠久而引以为豪的传统,其网站已经量身定制,展示出优秀的艺术作品,并且乐于阅读。


右上角的大红色订阅CTA也会立即引起您的注意,将访问者引导至付费网站选项,而不会妨碍他们享受免费内容。

 

04.  Monotype



Monotype的着陆页显示,它的低调而又聪明的设计与这个自信的声明并驾齐驱。整个着陆页面设计的左半部分是致力于公司的使命宣言,并有一个巧妙的转折:通过下拉菜单,您可以查看各种字体的文本,以各种不同的重量和风格,以了解什么Monotype呢。


页面的右侧是指向Monotype库,企业许可证和公司新闻的链接,带有不同字体的大型“M”图标,就像保护帽一样。一个柔和的棕褐色调色板将注意力集中在字体上。

 

05.  LS制作



LS Productions是一家位于苏格兰的剧照和动作服务制作公司,他们知道最大的资产是什么,而这正是您进入其网站时所呈现的内容。

 

一个窗口填充循环视频展示了公司所有工作的选择,全部设置在好看的地方。向下滚动,您将了解其三项主要服务:动作、剧照和位置。


“团队聚会”部分,只不过是粉饰门面而已。如果你想聘请LS产品,那么你已经移动到一个主要的服务页面,在那里你会发现丰富的良好的信息,用来说服你公司的适用性。

 

06.  Hipstamatic



对于复古模拟摄影应用Hipstamatic而言,这一切都是为了展现酷炫的功能,以及应用的外观,感觉和直观的导航,尽可能吸引用户参与。


在页面顶部,一个滚动画廊条在实践中展示了“Hipstamatic美学”,而iPhone展示了最新版本的应用程序,其旧版的ClassicMode和新的ProMode具有更多的最新功能。

 

在这之下,一个新的索引总结了Hipstamatic现在的全部内容:“制作漂亮的摄影作品”,一个大的CTA将你引导到App Store。

 

07.  苹果



毫无疑问,工业设计的无可争议的大师们可以把一个体面的网站联系在一起,Apple.com的简单易用赢得了用户。


主页通过公司广泛的产品范围把当前只是一个热门产品归零。除了顶部简单的导航栏,它只是拍摄精美的产品摄影,产品名称和口号。

 

这里甚至没有一个CTA--苹果明智地认为,精通技术的观众将知道图像和文本是超链接到更多的信息。这是一个真正的克制大师班。

 

08.  Pinterest




Pinterest知道自己想要什么,流行的在线剪贴簿对自己的品牌和信誉已经足够自信了,不必过于担心自己的出售。

 

在注册卡的背后,Pinterest的一个光荣摄影剪贴簿向上滚动,给用户提供了什么。这是一个你实际得到的简化和美化的版本 - 没有啰嗦的描述、广告或回报信息来凌乱这个版本的主页。



赵小马的话:

 

清晰,简洁的标题和副标题很强大,登陆页面应该突出显示品牌,通常会包含英雄形象来一目了然地沟通产品或服务,并且直截了当地切入点以避免用户的注意力漂移。

0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天64人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款