登录按钮展示规范

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

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

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

推荐展示效果：

或

基本原则

使用固定名称“小应账号快捷登录”。
使用小应官方图标，不使用 emoji、自绘图标或第三方图标替代。
按钮应出现在登录 / 注册表单之后的直接位置，用户不应额外寻找。
视觉上应清晰、稳定、可信，不应像广告、活动入口或普通帮助链接。
鼠标悬浮时应展示可点击状态：原生 CSS 使用 cursor: pointer;，Tailwind CSS 使用 cursor-pointer。

按钮文案

首选文案：

使用小应账号快捷登录

空间较紧凑时可使用：

小应账号快捷登录

不要使用以下文案：

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

官方图标

官方 SVG 图标地址：

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

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

src/assets/xiaoying-icon.svg

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

图标使用要求：

保持原始比例，不拉伸、不压缩。
不裁切、不加描边、不重新上色。
不把图标放在复杂纹理、低对比度或强干扰背景上。
不用 emoji、手势、学校图标、应用图标替代小应图标。

摆放位置

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

推荐结构：

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

摆放要求：

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

按钮结构

推荐按钮结构：

<button type="button" class="xiaoying-login-button" style="cursor: pointer;">
  <img src="/assets/xiaoying-icon.svg" alt="" />
  <span>使用小应账号快捷登录</span>
</button>

如果样式已经统一写在 .xiaoying-login-button 中，也可以省略内联 style。图标已经由按钮文案说明含义，img 可以使用空 alt，避免读屏软件重复朗读“小应”。

原生 CSS

.xiaoying-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;
}
 
.xiaoying-login-button:hover {
  background: #f7f7f9;
}
 
.xiaoying-login-button:focus-visible {
  outline: 3px solid rgba(51, 102, 204, 0.28);
  outline-offset: 2px;
}
 
.xiaoying-login-button img {
  width: 24px;
  height: 24px;
  flex: none;
}

Tailwind CSS

<button
  type="button"
  class="inline-flex min-h-12 w-full 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/xiaoying-icon.svg" alt="" class="h-6 w-6 shrink-0" />
  <span>使用小应账号快捷登录</span>
</button>

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

React 封装示例

import type { ButtonHTMLAttributes } from "react"
import xiaoyingIconUrl from "./assets/xiaoying-icon.svg"
 
export function XiaoyingLoginButton(
  { style, ...props }: ButtonHTMLAttributes<HTMLButtonElement>,
) {
  return (
    <button
      type="button"
      className="xiaoying-login-button"
      style={{ cursor: "pointer", ...style }}
      {...props}
    >
      <img src={xiaoyingIconUrl} alt="" />
      <span>使用小应账号快捷登录</span>
    </button>
  )
}

Vue 封装示例

<script setup lang="ts">
import xiaoyingIconUrl from "./assets/xiaoying-icon.svg"
</script>
 
<template>
  <button type="button" class="xiaoying-login-button" style="cursor: pointer;">
    <img :src="xiaoyingIconUrl" alt="" />
    <span>使用小应账号快捷登录</span>
  </button>
</template>

不推荐展示方式

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

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