跳到主要内容

外部设计-第2版 

· 阅读需 6 分钟 · https://short.bfban.com/exterior-design · 打印
Cabbage lol
Cabbage lol
Cabbagelol

介绍​

此内容定义了各项图标使用范围以及例子，各项图标使用不同颜色划分领域

BFBAN 标志​

WEB - 紫色​

  • logo Logo web-all.png:

    logo logo logo

    ↑ 展示不同圆角例子

    • 描述: 默认
    • 使用范围: 主体网站
    • 使用示例: 宣传品牌或组织

  • logo Logo web-all.svg

    • 描述: 默认，SVG版本，自动识别暗黑模式
    • 使用范围: 主体网站
    • 使用示例: 宣传品牌或组织
信息

这里提供了一份使用svg例子 https://github.com/BFBAN/exterior-design/blob/main/Example/use-icon-web.html ,实现暗黑游览器模式

  • logo Logo web-community-relaxed.png

    • 描述: 社区, 超宽体留白
    • 使用范围: 主体社区网站
    • 使用示例: 社区群组、比如QQ群、Kook

APP - 深蓝​

  • logo Logo app-bottom-text-relaxed.png

    1. logo 宽体 Logo app-bottom-text-relaxed.png

    2. logo 窄边框 Logo app-bottom-text.png

    • 描述: 应用程序宽体，底部带文字
    • 使用范围: 应用门户网站或是文档、应用图标
    • 使用示例: 嵌入程序、小程序、移动设备程序、桌面程序

  • logo Logo app-relaxed.png

    • 描述: 默认, 宽体留白
    • 使用范围: 主体网站
    • 使用示例: 宣传品牌或组织

  • logo Logo app-all.png:

    logo logo logo


    提示

    ↑ 展示不同圆角例子，在安卓或苹果、鸿蒙系统可能需要切片图标，你可以使用宽体图标来生成

    • 描述: 应用程序默认
    • 使用范围: 应用门户网站或是文档、应用图标
    • 使用示例: 嵌入程序、小程序、移动设备程序、桌面程序

Bot - 浅蓝​

  • logo Logo bot-all.png

    1. logo 风格化2 Logo bot-style2.png

    2. logo 风格化3 bot-style3.png

    • 描述: 机器人图标、蓝色底
    • 使用范围: 机器人图标、允许在右下角添加第三方组织或个人角标
    • 使用示例: 机器人程序

  • logo Logo bot-bottom-text.png

    • 描述: 机器人图标、窄体、底部图片+文字
    • 使用范围: 机器人图标
    • 使用示例: 第三方机器人

SDK - 红​

  • logo Logo sdk-all.png

    • 描述: SDK包、插件图标、红色底
    • 使用范围: SDK包默认图标
    • 使用示例: Python SDK BFBAN api、(TS/JS) SDK BFBAN api、Dart SDK BFBAN

  • logo Logo sdk.png

    • 描述: SDK包、插件图标、红色底，无风格化
    • 使用范围: SDK包图标、为了和web-all.png保持统一风格化提供其中一个版本
    • 使用示例: Python SDK BFBAN api、(TS/JS) SDK BFBAN api、Dart SDK BFBAN

  • logo Logo sdk-widget.png

    • 描述: 外部小部件插件、红色底
    • 使用范围: 外部小部件插件默认图标，带视图插件都可使用
    • 使用示例: (JS)BFBAN player share Widget(Website 玩家分享)、包视图插件

使用徽章部件​

WEB​

  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-web.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: 主站链接
  • 使用示例: 主站

APP​

  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-app.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: 应用程序
  • 使用示例: 应用程序网站

BOT​

  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-bot.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: 机器人
  • 使用示例: 机器人网站

SDK​

  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-sdk.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: SDK链接
  • 使用示例: SDK门户、SDK文档网站
  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-widget.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: Widget 部件
  • 使用示例: 部件
  <img src="https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-plugin.png?raw=true" width="auto"
       height="40px"/>
  • 使用范围: Plugin 插件
  • 使用示例: 插件

补充说明

  • 以上一切属于bfban开源组织，解释权所有
  • 底部推荐绿色