一眼对比
32px,二十个方案 × 三端;点任一格可跳到该方案。A B C E 和 P–T 是字标类,D 和 F–J 是通用图形,K–O 是贴系统概念与功能的图形渐变字标
字标侧栏标志原样搬过来:晴空渐变圆角方块+白字。和页面左上角的标志完全一致,看页签就知道是哪套系统的风格;三端同色,靠字区分。
三端分色
字标形和 A 一样,三端各一色:发行晴空蓝、销售青绿、TRS 靛紫。三套系统常常同时开着,颜色比 16px 的字更容易一眼分开;页面内主色仍然统一是蓝,只有页签图标分色。
圆形徽章
字标圆底渐变+一圈细白环+白字,像一枚印章。圆形在一排方形页签图标里更显眼;细环在 32px 以上看得见,16px 时自然消失不添乱。
票据·折线·互换
图形白色线条图形:发行=一张票据,销售=上升折线,TRS=互换箭头。汉字「销」12 画,缩到 16px 会糊成一团;图形的笔画只有两三根,最小尺寸也清楚。代价是和侧栏字标不一致。
深底渐变字
字标深蓝方块,字用晴空渐变填色。浅色页签条上对比最强,显得更金融、更稳;深色页签条上底色会和背景融在一起,只剩渐变的字。
纸飞机·柱状·循环
图形实心白色图形:发行=纸飞机(发出去),销售=三根上升的柱子(业绩),TRS=循环箭头(总收益互换)。实心块比线条在 16px 更扎实,不会断笔;三个都是常见图标,不用解释就能认。
层叠票据·价签·K线
图形线条图形,按「交易的东西」取:发行=一叠票据,销售=价签,TRS=K 线。和业务对象一一对应:发行端管票据、销售端卖票据、TRS 端看行情做交易;K 线一眼就是交易系统。
印章·投资者·天平
图形线条图形,按「谁在用」取:发行=盖章(发行方签发),销售=投资者人形,TRS=天平(对冲平衡)。三个图形互不相似,混在一排页签里最不容易认错;天平的笔画最多,16px 时会略细,上面第三个尺寸可以核对。
浅底蓝图形
图形白底淡蓝描边方块,图形用晴空渐变填色:发行=扩音器(发布),销售=一点分发到三点(卖给投资者),TRS=闪电(算法执行)。唯一的浅底方案:在深色页签条里是最亮的一个,在浅色页签条里靠描边分得开;想要页签图标不那么「一块蓝」就选它。
圆底流向箭头
图形圆形渐变底,三个白色箭头讲资金流向:发行=向上发出,销售=箭头送到一个点(交付给投资者),TRS=一上一下的多空。三端用同一套「箭头」语言,一看就是一家的;圆底和 C 一样在方形页签图标里显眼。
三方主体
功能业务全景里三方各是什么:发行方是「产品的工厂+账房」(工厂),销售方是「理财经理+营业部」(门面),TRS 是「上手券商的通道」(链接)。直接画业务文档里对三方的定性,不借用泛泛的图标;工厂、门面、链接三个剪影形状差得远,16px 也分得开。
票据+动作角标
功能三端围着同一张共赢票据转,只是动作不同:发行「+」新发(票据管理),销售「¥」卖出收款(订单/出入金),TRS「⇄」对冲互换(交易下单)。三端共用一个票据外形,一看就是一套系统;角标说明本端对票据做什么。角标在 16px 时只剩一个白点,靠 32px 以上辨认。
账房与资金
功能按钱的流向取:发行=算账清算(计算器:清算管理、汇率、费用),销售=出入金(银行:资金管理),TRS=融资付息(百分号:收取利息、融资额度)。三端菜单里都有「资金/清算/财务」,这组把各端最独有的那一项画出来:发行方算账、销售方收付、TRS 付息。
A/B 共赢
功能产品核心是 A 类、B 类两腿匹配成一张票据:实心=A、空心=B。发行=两腿拼成一张票据,销售=A 类与 B 类两位投资者,TRS=总收益互换的两腿(半实半空的圆)。「共赢票据」最独特的就是 A/B 匹配,别的系统没有;实与空的对照在 16px 也看得出,三端用同一套语言。
订单链路
功能一笔订单怎么走:销售=投资者下单(订单勾选:订单管理、开户审核),发行=对冲(盾牌+走势:对冲进度、风控三线),TRS=算法执行(芯片:算法下单、常驻工作进程)。按订单在三端之间流转的顺序取图,三个图形各对应本端最核心的一个菜单;芯片和盾牌在一排页签里辨识度高。
拼音首字母
字标形和 A 一样,字换成拼音首字母:发行 F、销售 X、TRS T。拉丁字母笔画少,是所有文字方案里 16px 最清楚的;代价是 X 要想一下才对上「销售」,和侧栏的「销」字标不一致。
浅底蓝字
字标白底淡蓝描边方块,字用晴空渐变填色(I 的底配 A 的字)。文字方案里唯一的浅底:深色页签条上最亮,浅色页签条上靠描边分开;不想页签里再多一块蓝就选它。
宋体字标
字标渐变方块+白色粗宋体:发/销用宋体黑,T 用衬线体。宋体的横细竖粗更像金融机构的印章和票面,和晴空渐变的现代感形成对比;横笔在 16px 会变细,第三个尺寸要看一眼。
深底字+分色底条
字标深蓝方块+白字,底部一条色带按端分色:发行晴空蓝、销售青绿、TRS 靛紫。A 的统一和 B 的分色各取一半:方块和字三端一样,只靠底部色带区分;色带 16px 时还有 3px 高,看得见。
双字竖排
字标渐变方块里放完整简称:「发/行」「销/售」上下两行,TRS 一行。不用猜字,32px 以上一眼读出系统名;16px 时两个字会糊成两团,只能靠位置和颜色认,适合主要在大页签或书签栏里看的场景。
选完之后
- 交付物。每端一套:
favicon.ico(内含 16/32/48 三档位图)、favicon.svg(矢量,现代浏览器直接用)、apple-touch-icon.png180px、icon-192.png/icon-512.png(加到主屏或 PWA 用)。源文件在本目录svg/,位图在png/。 - 接入。替换
*_frontend/public/favicon.ico,index.html的<link rel="icon">再加一条 svg;三端一起改,记一份代码改动记录。 - 可以混搭。比如 B 的三端分色配任一图形方案(D、F–J 的图形都能换成三端各一色),或 C 的圆形配 B 的分色——在各端的圆点里分别点就行,选好后点底栏「复制」把结果发我。
- 16px 的提醒。「销」12 画,所有带字的方案缩到 16px 都会偏糊(上面每行第三个就是 16px 实际大小),A/B/C/E/Q/R/S 之间这点没有差别,T 双字更糊;文字方案里 P 拼音首字母最清楚。在意的话选图形类(D、F–O),或者图形只给销售一端用。
- 深色页签条。E 的深蓝底在深色页签条里会和背景融在一起(见各方案第二条页签条);I 的白底在深色页签条里最亮;其余方案两种页签条都清楚。