账号快捷登录

更新于 2026-06-01

登录按钮展示规范

小应账号快捷登录按钮的文案、图标、位置、明暗主题与视觉样式规范。

本文说明第三方页面如何展示“小应账号快捷登录”按钮。按钮展示应帮助用户明确识别账号来源，并在不同第三方页面中形成稳定记忆。

如果尚未完成客户端注册，请先阅读：注册申请流程。

推荐展示效果：

补充方式

已有主登录表单时使用 secondary。

或

主要 / 唯一方式

小应账号快捷登录是主流程时使用 primary。

基本原则

使用固定名称“小应账号快捷登录”。
使用小应官方图标，不使用 emoji、自绘图标或第三方图标替代。
建议把小应账号快捷登录按钮提取成独立可复用组件，统一管理文案、图标、primary / secondary 层级、主题适配和可访问性。
按钮应出现在登录 / 注册表单之后的直接位置，用户不应额外寻找。
视觉上应清晰、稳定、可信，不应像广告、活动入口或普通帮助链接。
按钮视觉层级应跟随它在当前页面中的登录地位：作为补充方式时使用 secondary 样式；作为主要或唯一方式时可以使用 primary 样式。
不建议使用背景阴影制造层级。优先通过填充色、边框、文字粗细和 hover 状态表达主次关系。
如果第三方网站本身支持区分明亮模式和黑暗模式，小应账号快捷登录按钮也应同时支持明亮模式和黑暗模式。
如果第三方网站本身只支持明亮模式或黑暗模式其中一种，小应账号快捷登录按钮只需要支持该网站已有的主题模式。
鼠标悬浮时应展示可点击状态：原生 CSS 使用 cursor: pointer;，Tailwind CSS 使用 cursor-pointer。
按钮文字和图标不应被鼠标拖拽选中：原生 CSS 使用 user-select: none;，Tailwind CSS 使用 select-none。

按钮文案

首选文案：

使用小应账号快捷登录

空间较紧凑时可使用：

小应账号快捷登录

不要使用以下文案：

不推荐文案	原因
使用小应一键登录	“一键登录”泛化严重，不利于用户记住账号来源。
使用小应登录	没有完整表达“小应账号”这一身份来源。
小应授权	偏技术概念，用户不一定能理解这是登录入口。
第三方登录	没有告诉用户具体使用哪个账号登录。
校园登录	含义过宽，容易和学校账号、统一身份认证混淆。
快捷登录	缺少品牌和账号来源。

官方图标

官方 SVG 图标地址：

https://developer.xiaoying.life/icon.svg

建议第三方开发者把该 SVG 下载到自己的项目中，例如：

src/assets/xiao-ying-icon.svg

然后通过项目的构建工具一起 bundle。这样可以避免第三方页面运行时依赖开发者平台的静态资源地址，也方便在 React、Vue 或其他前端框架中封装为项目内组件。

图标使用要求：

保持原始比例，不拉伸、不压缩。
不裁切、不加描边；明亮模式保持官方原色，黑暗模式应重新上色为纯白色以增加对比度。
不把图标放在复杂纹理、低对比度或强干扰背景上。
不用 emoji、手势、学校图标、应用图标替代小应图标。

视觉层级

小应账号快捷登录按钮的样式应取决于它在当前页面中的角色。

作为补充登录方式

如果第三方页面已有账号密码、手机号验证码、邮箱等主登录方式，小应账号快捷登录应作为补充入口展示。推荐使用 secondary 样式：

白色或页面表单背景。
清晰边框。
官方原色小应图标。
不使用背景阴影。
可以在普通登录按钮和小应账号快捷登录按钮之间使用“或”分隔。

作为主要或唯一登录方式

如果小应账号快捷登录是页面的主要登录方式，或者是唯一登录方式，应使用 primary 样式，让用户明确知道下一步主操作。推荐使用：

页面或产品的主色填充背景。
白色文字。
小应图标上色为纯白色。
不使用背景阴影。
不需要额外用“或”分隔，因为它本身就是主流程。

无论使用 primary 还是 secondary 样式，都必须保留固定文案、官方图标、足够对比度和明确可点击状态。

组件化管理

推荐第三方项目把小应账号快捷登录按钮封装成独立组件，例如 XiaoYingLoginButton。这样可以避免不同页面各自复制按钮代码后出现文案不一致、图标缺失、primary / secondary 层级混乱、黑暗模式遗漏或 hover / focus 状态不一致。

组件建议统一管理：

固定文案“使用小应账号快捷登录”。
官方图标路径与 alt=""。
primary / secondary 两种视觉层级。
明亮 / 黑暗主题下的图标上色规则。
type="button"、cursor: pointer、focus 样式等交互细节。
user-select: none 或 select-none，避免按钮文字被误选中。

摆放位置

小应账号快捷登录按钮应立即跟在登录 / 注册表单的主提交按钮之后。

推荐结构：

用户名
密码
验证码
[登录 / 注册]
 
或
 
[小应图标] 使用小应账号快捷登录

摆放要求：

可以使用“或”分隔普通登录和小应账号快捷登录。
不应折叠进“更多登录方式”“其他方式”“菜单”等二级入口。
不应放在页脚、帮助区、说明文字之后或页面底部。
不应只在普通登录失败后才展示。
移动端页面中，用户看到登录 / 注册表单时，也应能直接看到或自然滚动到该按钮。
如果页面同时支持登录和注册，小应账号快捷登录按钮应和登录 / 注册主流程保持同一视觉分组。

主题适配

小应账号快捷登录按钮应跟随第三方登录页自身的主题策略：

网站支持明亮 / 黑暗模式切换时，按钮也应随页面主题切换，不能只在其中一种模式下可读。
网站仅提供明亮模式时，可以只实现明亮模式按钮。
网站仅提供黑暗模式时，可以只实现黑暗模式按钮。
黑暗模式下，小应图标应重新上色为纯白色，确保图标和深色背景之间有足够对比度。
黑暗模式下应保持按钮边框、文字和背景之间有清晰对比，避免出现文字过暗、边框不可见或按钮像普通输入框的问题。

按钮结构

组件内部推荐使用以下基础结构：

<button type="button" class="xiao-ying-login-button">
  <img src="/assets/xiao-ying-icon.svg" alt="" />
  <span>使用小应账号快捷登录</span>
</button>

如果小应账号快捷登录是主要或唯一登录方式，可以在同一个组件上增加 primary modifier：

<button type="button" class="xiao-ying-login-button xiao-ying-login-button--primary">
  <img src="/assets/xiao-ying-icon.svg" alt="" />
  <span>使用小应账号快捷登录</span>
</button>

图标已经由按钮文案说明含义，img 可以使用空 alt，避免读屏软件重复朗读“小应”。

原生 CSS

.xiao-ying-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #d9d9df;
  border-radius: 12px;
  background: #ffffff;
  color: #1f1f24;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
 
.xiao-ying-login-button:hover {
  background: #f7f7f9;
}
 
.xiao-ying-login-button--primary {
  border-color: #165dff;
  background: #165dff;
  color: #ffffff;
}
 
.xiao-ying-login-button--primary:hover {
  border-color: #0e42b3;
  background: #0e42b3;
}
 
.xiao-ying-login-button:focus-visible {
  outline: 3px solid rgba(51, 102, 204, 0.28);
  outline-offset: 2px;
}
 
.xiao-ying-login-button img {
  width: 24px;
  height: 24px;
  flex: none;
}
 
.xiao-ying-login-button--primary img {
  filter: brightness(0) invert(1);
}
 
@media (prefers-color-scheme: dark) {
  .xiao-ying-login-button {
    border-color: #d9d9e6;
    background: #171722;
    color: #f4f4f7;
  }
 
  .xiao-ying-login-button:hover {
    background: #20202c;
  }
 
  .xiao-ying-login-button:focus-visible {
    outline-color: rgba(139, 124, 246, 0.55);
  }
 
  .xiao-ying-login-button img {
    filter: brightness(0) invert(1);
  }
 
  .xiao-ying-login-button--primary {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #ffffff;
  }
 
  .xiao-ying-login-button--primary:hover {
    border-color: #2563eb;
    background: #2563eb;
  }
}
 
[data-theme="dark"] .xiao-ying-login-button,
.dark .xiao-ying-login-button {
  border-color: #d9d9e6;
  background: #171722;
  color: #f4f4f7;
}
 
[data-theme="dark"] .xiao-ying-login-button:hover,
.dark .xiao-ying-login-button:hover {
  background: #20202c;
}
 
[data-theme="dark"] .xiao-ying-login-button img,
.dark .xiao-ying-login-button img {
  filter: brightness(0) invert(1);
}
 
[data-theme="dark"] .xiao-ying-login-button--primary,
.dark .xiao-ying-login-button--primary {
  border-color: #3b82f6;
  background: #3b82f6;
  color: #ffffff;
}
 
[data-theme="dark"] .xiao-ying-login-button--primary:hover,
.dark .xiao-ying-login-button--primary:hover {
  border-color: #2563eb;
  background: #2563eb;
}

Tailwind CSS

Secondary 样式，适合小应账号快捷登录作为补充登录方式：

<button
  type="button"
  class="inline-flex min-h-12 w-full select-none cursor-pointer items-center justify-center gap-2.5 rounded-2xl border border-neutral-300 bg-white px-5 text-base font-semibold leading-none text-neutral-900 hover:bg-neutral-50 focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-blue-300"
>
  <img
    src="/assets/xiao-ying-icon.svg"
    alt=""
    class="h-6 w-6 shrink-0 dark:brightness-0 dark:invert"
  />
  <span>使用小应账号快捷登录</span>
</button>

Primary 样式，适合小应账号快捷登录作为主要或唯一登录方式：

<button
  type="button"
  class="inline-flex min-h-12 w-full select-none cursor-pointer items-center justify-center gap-2.5 rounded-2xl border border-blue-600 bg-blue-600 px-5 text-base font-semibold leading-none text-white hover:border-blue-700 hover:bg-blue-700 focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-blue-300"
>
  <img
    src="/assets/xiao-ying-icon.svg"
    alt=""
    class="h-6 w-6 shrink-0 brightness-0 invert"
  />
  <span>使用小应账号快捷登录</span>
</button>

如果项目使用 Tailwind 的 dark 变体，可以同时写出明亮和黑暗模式：

<button
  type="button"
  class="inline-flex min-h-12 w-full select-none cursor-pointer items-center justify-center gap-2.5 rounded-2xl border border-neutral-300 bg-white px-5 text-base font-semibold leading-none text-neutral-900 hover:bg-neutral-50 focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-blue-300 dark:border-neutral-200 dark:bg-[#171722] dark:text-neutral-50 dark:hover:bg-[#20202c] dark:focus-visible:outline-violet-400"
>
  <img src="/assets/xiao-ying-icon.svg" alt="" class="h-6 w-6 shrink-0" />
  <span>使用小应账号快捷登录</span>
</button>

如果第三方页面已有成熟的设计系统，可以调整圆角、边框颜色、字体和 hover 状态，但应保持文案、图标、可读性和入口位置一致。

React 封装示例

import type { ButtonHTMLAttributes } from "react"
import xiaoYingIconUrl from "./assets/xiao-ying-icon.svg"
 
type XiaoYingLoginButtonVariant = "primary" | "secondary"
 
export function XiaoYingLoginButton(
  {
    className = "",
    variant = "secondary",
    ...props
  }: ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: XiaoYingLoginButtonVariant
  },
) {
  const isPrimary = variant === "primary"
  const variantClassName = isPrimary
    ? "xiao-ying-login-button--primary"
    : ""
 
  return (
    <button
      type="button"
      className={["xiao-ying-login-button", variantClassName, className]
        .filter(Boolean)
        .join(" ")}
      {...props}
    >
      <img src={xiaoYingIconUrl} alt="" aria-hidden="true" />
      <span>使用小应账号快捷登录</span>
    </button>
  )
}

Vue 封装示例

<script setup lang="ts">
import xiaoYingIconUrl from "./assets/xiao-ying-icon.svg"
 
const props = withDefaults(
  defineProps<{
    variant?: "primary" | "secondary"
  }>(),
  {
    variant: "secondary",
  },
)
</script>
 
<template>
  <button
    type="button"
    :class="[
      'xiao-ying-login-button',
      props.variant === 'primary' ? 'xiao-ying-login-button--primary' : '',
    ]"
  >
    <img :src="xiaoYingIconUrl" alt="" aria-hidden="true" />
    <span>使用小应账号快捷登录</span>
  </button>
</template>

不推荐展示方式

使用 emoji、手势图标或不相关图标代替小应图标。
把按钮文案写成“使用小应一键登录”“第三方登录”“校园登录”等非官方表述。
把小应账号快捷登录藏在二级菜单或“更多方式”中。
把按钮做成普通文本链接，导致用户难以发现。
把按钮做成广告横幅、活动入口或带营销话术的卡片。

按钮展示完成后，继续阅读：接口定义与开发适配流程。