Robinhood

标题:It’s Time to Do Money
描述:Robinhood, a pioneer of commission-free investing, gives you more ways to make your money work harder.
产品:股票和基金、期权、黄金、现金管理、加密货币


SEO 与 页面权重

登录前的主页

地址:https://robinhood.com/us/en/
TDK和OG标签比较齐全:


<meta name="generator" content="React Static">
<title>It’s Time to Do Money | Robinhood</title>
<meta data-react-helmet="true" property="og:title" content="It’s Time to Do Money | Robinhood">
<meta data-react-helmet="true" name="twitter:title" content="It’s Time to Do Money | Robinhood">
<meta data-react-helmet="true" name="description"
    content="Robinhood, a pioneer of commission-free investing, gives you more ways to make your money work harder.">
<meta data-react-helmet="true" property="og:description"
    content="Robinhood, a pioneer of commission-free investing, gives you more ways to make your money work harder.">
<meta data-react-helmet="true" name="twitter:description"
    content="Robinhood, a pioneer of commission-free investing, gives you more ways to make your money work harder.">
<meta data-react-helmet="true" property="og:url" content="https://robinhood.com/us/en/about/">
<link rel="preload" as="script" href="https://cdn.robinhood.com/assets/robinhood/brand_2/main.9bee7d53.js">
<link data-react-helmet="true" rel="canonical" href="https://robinhood.com/us/en/about/">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta property="og:image" content="https://cdn.robinhood.com/assets/robinhood/shared/robinhood-preview.png">
<meta property="og:image:height" content="740">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1300">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Robinhood">
<meta property="og:type" content="website">
<meta property="fb:app_id" content="674753905956192">
<meta property="twitter:site" content="@RobinhoodApp">
<meta name="twitter:image" content="https://cdn.robinhood.com/assets/robinhood/shared/robinhood-preview.png">
<link rel="shortcut icon" href="https://cdn.robinhood.com/assets/robinhood/shared/favicon.ico">
<link rel="apple-touch-icon" href="https://cdn.robinhood.com/assets/robinhood/shared/iphone.png">
<link rel="apple-touch-icon" href="https://cdn.robinhood.com/assets/robinhood/shared/ipad.png" sizes="76x76">
<link rel="apple-touch-icon" href="https://cdn.robinhood.com/assets/robinhood/shared/iphone-retina.png"
    sizes="120x120">
<link rel="apple-touch-icon" href="https://cdn.robinhood.com/assets/robinhood/shared/ipad-retina.png"
    sizes="152x152">

首页模块

  1. 标题描述 & 下单交互演示
  2. 免佣金
  3. 小数股的支持介绍
  4. 可通过Robinhood进行 理财的学习
  5. 产品多元化介绍:股票和基金、期权、黄金、现金管理、加密货币
  6. 站点地图、法律披露

登录后的主页

地址:https://robinhood.com/
登录后的该页面完全变为账户开头相关引导、新闻、理财相关的资讯。

登录页

只添加了标题:Log In | Robinhood
主提示:Welcome to Robinhood
地址:https://robinhood.com/login

注册页

主提示:Make Your Money Move
点击首页顶部的注册,页面先跳转到介绍页(主要为说明为什么要注册Robinhood)然后再从该页面的注册按钮跳转到注册页
地址:从“ https://referral.robinhood.com/robinhood/ ” 然后跳转到 “ https://signup.robinhood.com/
注册流畅:Account - Basic Info - Identity - Funding - Submit;
从介绍页到完成开户,用户开始使用前基本对产品有了一定的了解。

产品介绍页

中间为Apple 股票数据、新闻、开户引导,右侧为下单相关入口
Robinhood 中的 Apple 股票产品页


Robinhood 网站截屏

交互细节

  • 产品介绍使用下单动画进行演示;
  • 用户点击退出,页面跳转到登录页;
  • 注册和登录页面无返回首页、站内链接等多余入口;
  • 注册开户加入了产品介绍和身份认证;
  • 页面配色简约

布局

响应式网页,可在不同尺寸设备打开体验

  • 手机布局:页面宽度 < 768px
  • 平板布局:768px ≤ 页面宽度 < 1024
  • 小屏电脑:1024 ≤ 页面宽度 < 1440px
  • 宽屏电脑:< 1440px页面宽度

配色

主题:#21CE99、#18563E
涨跌 (黑色背景):红 #F45531、绿 ##21ce99;
背景:#FFF、#F5F8FA、#000、#1b1b1d
文字:#040D14、#505558、#828282
黑色按钮、线条:#242A2D、#171718
互换:#040D14 ~ #18563E
特殊:#ED32B9


文字


body{
font-family: "DIN Pro", -apple-system, BlinkMacSystemFont, sans-serif;
}

H1{
font-size: 36px;
font-weight: 500;
letter-spacing: -0.29px;
line-height: 42px;
margin: 0;
}

H2{
font-size: 26px;
font-weight: 500;
letter-spacing: -0.14px;
line-height: 30px;
margin: 0 0 16px;
}

H3{
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

H4,p{
font-size: 13px;
letter-spacing: normal;
line-height: 18px;
margin: 0;
}


视觉


动画过度时间
transition: width 300ms ease 0s;

块块投影
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px 0px;

最后修改:2020 年 03 月 20 日 08 : 38 AM
如果觉得我的文章对你有用,请随意赞赏