恭喜你成为UI中国推荐设计师 （详情）
//百度统计 20220402 uicn
查看全部热门榜单
全部

常用搜索： 作品集AEui设计aigciconlogoapp

您的意见是我们 UI 中国进步的动力！
点击立即反馈按钮，发表您的意见！
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈！
群号：302892100
备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求
取消 发送需求

提交完成
感谢您对UI中国的支持和信赖！
我知道了
编辑推荐
原型设计：一个好的Web登录页原型需要这些
0.0°
2020-03-15 原创文章 教程 举报 9734 162 65 1

获取用户最关键一步——注册登录页面如何设计？

获取用户有多难，相信每个人互联网人都深有体会，一定要非常努力优化产品的每一个体验步骤，才能吸引别人的注册。

注册登录页面就是让路人变成用户的最后一步，也是最关键的一步。



一个出彩的登录页面，可以吸引住用户，让他成为你的注册用户，也能够体现产品的质感和品牌的特性，甚至能提升用户体验，拉近与用户的距离。
Mailchimp 登录页

为此，本期「素材播报」上架了一些关于登录的页面和组件，都是根据网上 100+ 的优秀登录页面设计作品总结而来。

接下来，请看详细报道：

Web 登录页面之大图背景


大图背景的登录页面，是最为常见的页面设计之一。这样的设计不仅会让人有一种沉浸式的体验，图片的选择也会体现产品气质。

通常，大图背景的登录页面会搭配大卡片、小卡片，当然也会有人选择无卡片的形式。

比如，outlook 的登录页面就是大图+小卡片的形式。图片背景与系统的保护程序的风格相呼应。邮件作为工作的工具，采用风景的照片，给人以冷静的感觉。


更典型的是《华盛顿邮报》，直接用华盛顿特区的实景图片作为背景，可供选择的三种登录方式，也与图片中的颜色吻合，一切都是那么的和谐。


还有哪些经典样式呢？请看素材广场本期上架的 7 款大图背景 Web 登录页面。


Web 登录页面之纯色背景


纯色背景的 Web 登录页面应用范围更广。因为设计简洁的产品，即使是登录页也会一以贯之。

比如  Linkedin ，就没有任何背景图片或动画。毕竟我们不需要在登录页面显示有趣，简洁明了的展示就是完美的页面了。


还有些会选择在突出自己特质的颜色上搭配一些图片。

像 Shopify ，用沉静的蓝色作为自己的底色，注册表单旁只是一个简单的图片：一位眼神坚定的女性，却传递出了所有人都可以在这里创建店铺，并获得成功的讯息。


 Dribbble 也是采用这样的形式：左边用户制作的插图，颜色丰富且极具设计感，直接表达出 Dribbble 本身的概念。


纯色背景能做的也不止这些。在素材广场中，我们例举出了 13 种纯色背景登录页面的样式，包含了大卡片、小卡片、插画+卡片、无卡片、插画+卡片的类型。


Web 登录页面之拼色背景


如果觉得纯色和图片过于普通，你可以尝试带有更多产品原色的拼色背景。

Uber 就是一个很好的范本，在纯色的背景添加了条纹图文和插画，增加了视觉趣味，体现出了生机感。



也可以学 Diprella， 在拼色的背景上玩一些简单的交互，让注册、登录变得好玩了起来。



上面两种样式，都属于对拼色背景基础版的优化升级，素材广场提供了更多的样式，等着产品经理和设计师前去探索。



Web 登录页面组件


这次的组件素材都是常见的 Web 登录组件，依据尺寸划分了大、中、小三类，每一类又根据组件的设计样式（方形、圆形、线性）以及登录方式（账号密码登录、第三方登录、扫码登录...）分类。

本套组件既可以单独使用，也可以配合上面的登录页面使用哦～



相信刀友们都看出来了，本次的素材无论是对设计师还是产品经理，都是非常有用的。

设计师可以从相关版式设计中获取设计灵感，产品经理则可以直接使用这些版式和组件，快速搭建一个美观且符合需求的 Web 登录页面。



有没有感受到我们满满的诚意呢？！

如果你喜欢这次的素材请点个赞吧～关于本期的素材，你有任何的想法也可以留言告诉我们哦～或者，你有什么急切需要我们上架的素材，也可以留言说出来。

Powered by Froala Editor

更新：2020-03-15

收藏

162人已收藏

分享

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱，看得我比“老坛酸菜”还酸！
  • Figma”断供“后：墨刀能为中国企业做什么？
  • 产品经理干久了，有哪些后遗症？
  • 超实用的后台原型，产品大佬的摸鱼技巧都在这里！
相关标签
UI设计产品经理网页设计ui设计师

    猜你喜欢

      2020-03-15 原创文章 教程 举报 9734 162 65 1

      原型设计：一个好的Web登录页原型需要这些

      0.0°

      你确定要举报原型设计：一个好的Web登录页原型需要这些？

      如果查出恶意举报，十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      外链地址：

      对谁可见：

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师
      取消 确定

      添加收藏！
      您还可以进行 分类收藏
      创建收藏夹 确认 取消

      您确认要推荐？

      该作品发布时间：2020年03月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      取消 确定
      65
      162
      1

      删除经验

      您将要删除您的编辑推荐大作

      原型设计：一个好的Web登录页原型需要这些

      在她入驻到UI中国的日子里

      总共吸引了9734位设计师的驻足流连

      总共收获了65位设计师的由衷赞赏

      总共获得了162位设计师的悉心珍藏

      总共引起了1位设计师的深入讨论

      依然要删除吗？

      残忍删除 太可惜,不删了

      账号或密码错误，请重新输入

      账号或密码错误，请重新输入

      账号注册 忘记密码
      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      账号注册
      第三方账号登录