mirror of
https://gitee.com/tawords/tawords-docs
synced 2025-01-31 13:00:27 +08:00
97 lines
8.7 KiB
Markdown
97 lines
8.7 KiB
Markdown
## 视觉形象系统 <!-- {docsify-ignore} -->
|
||
|
||
为了体现出更好的视觉形象，更有利于视觉形象传播，同时更能展现出项目团队精神，特此研发**背Ta单词视觉形象识别系统**（**Tawords Visual Identity System**，简称“**TAVI**”）。
|
||
|
||
TAVI由背Ta团队负责人设计研发，分为基础板块（Ⅰ）和应用板块（Ⅱ）两大板块。以规范、实用为基本原则，对项目中使用到的及未来将可能使用到的各类相关标识进行整体设计，规范项目形象特征，完善标识使用规范。
|
||
|
||
> **基础板块**包括背Ta单词项目标志（LOGO）、标准字体、标准色彩、标志组合、辅助图形、禁用组合和专用字体。包含了基础设计要素及其规范使用形式。
|
||
>
|
||
> **应用板块**是基础部分在前端设计与项目宣传等方面使用示例。
|
||
|
||
TAVI适用于背Ta单词项目开发宣传中的各个环节，提供部分原图下载，欢迎大家在本视觉形象系统的约束下规范使用。
|
||
|
||
|
||
|
||
# （以下内容待完善） <!-- {docsify-ignore} -->
|
||
|
||
|
||
# Ⅰ. 基础板块
|
||
|
||
## 项目标志（logo）
|
||
|
||
[logo](../../../include/tavi/backcolor ':include :type=iframe width=100% height=600px')
|
||
|
||
<nobr>
|
||
|
||
<style>
|
||
.filletSample {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
</style>
|
||
|
||
### 圆角
|
||
|
||
|
||
| 圆角 | 圆角半径 ÷ ½边长<br />（百分比） | 示例 |
|
||
| ------------------- | -------------------------------- | ------------------------------------------------------------ |
|
||
| fillet0（圆形） | 0% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet0.png"> |
|
||
| fillet1 | 11.1% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet1.png"> |
|
||
| fillet2 | 33.3% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet2.png"> |
|
||
| fillet3 | 55.2% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet3.png"> |
|
||
| **fillet4（默认）** | **70.3%** | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet4.png"> |
|
||
| fillet5 | 82.5% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet5.png"> |
|
||
| fillet6（正方形） | 100% | <img class="assetsObject filletSample" objectPath="/v1/tavi/logo/sample/fillet/fillet6.png"> |
|
||
|
||
<style>
|
||
.colorSample {
|
||
width: 40px;
|
||
height: 20px;
|
||
display: inline-block;
|
||
border: solid 1px black;
|
||
vertical-align: middle;
|
||
margin-top: 2px;
|
||
margin-bottom: 2px;
|
||
}
|
||
</style>
|
||
|
||
|
||
### 背景色
|
||
|
||
下列背景色为推荐颜色，推荐使用下列标准颜色码。
|
||
|
||
在下方颜色无法满足实际需求时，可以自定义背景色，但需要满足：①背景颜色不允许过浅或白色；②背景颜色不允许过亮过鲜艳。
|
||
|
||
| 颜色 | 示例 | 十六进制颜色码 | RGB颜色 |
|
||
| ---------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------ |
|
||
| **棕色（标准色）** | <div class="colorSample" style="background-color: #4f3730;"></div> | #4F3730 | (79, 55, 48) |
|
||
| 黄色 | <div class="colorSample" style="background-color: #FFCF00;"></div> | #FFCF00 | (255, 207, 0) |
|
||
| 紫色 | <div class="colorSample" style="background-color: #5F52A0;"></div> | #5F52A0 | (95, 82, 160) |
|
||
| | <div class="colorSample" style="background-color: #8957A1;"></div> | #8957A1 | (137, 87, 161) |
|
||
| 浅紫色 | <div class="colorSample" style="background-color: #8F82BC;"></div> | #8F82BC | (143, 130, 188) |
|
||
| | <div class="colorSample" style="background-color: #8C97CB;"></div> | #8C97CB | (140, 151, 203) |
|
||
| | <div class="colorSample" style="background-color: #88ABDA;"></div> | #88ABDA | (136, 171, 218) |
|
||
| 蓝色 | <div class="colorSample" style="background-color: #556FB5;"></div> | #556FB5 | (85, 111, 181) |
|
||
| | <div class="colorSample" style="background-color: #00B7EE;"></div> | #00B7EE | (0, 183, 238) |
|
||
| 浅蓝色 | <div class="colorSample" style="background-color: #7ECEF4;"></div> | #7ECEF4 | (126, 206, 244) |
|
||
| 粉色 | <div class="colorSample" style="background-color: #F19EC2;"></div> | #F19EC2 | (241, 158, 194) |
|
||
| | <div class="colorSample" style="background-color: #F29C9F;"></div> | #F29C9F | (242, 156, 159) |
|
||
| 青色 | <div class="colorSample" style="background-color: #84CCC9;"></div> | #84CCC9 | (132, 204, 201) |
|
||
| 浅绿色 | <div class="colorSample" style="background-color: #89C997;"></div> | #89C997 | (137, 201, 151) |
|
||
| 绿色 | <div class="colorSample" style="background-color: #32B16C;"></div> | #32B16C | (50, 177, 108) |
|
||
| 橙色 | <div class="colorSample" style="background-color: #F8B551;"></div> | #F8B551 | (248, 181, 81) |
|
||
| 橙红色 | <div class="colorSample" style="background-color: #EC6941;"></div> | #EC6941 | (236, 105, 65) |
|
||
| | <div class="colorSample" style="background-color: #FFFFFF;"></div> | #FFFFFF | () |
|
||
| | <div class="colorSample" style="background-color: #FFFFFF;"></div> | #FFFFFF | () |
|
||
| | <div class="colorSample" style="background-color: #FFFFFF;"></div> | #FFFFFF | () |
|
||
| | <div class="colorSample" style="background-color: #FFFFFF;"></div> | #FFFFFF | (, , ) |
|
||
| 黑色 <br />👇<br />灰色 | <div class="colorSample" style="background-color: #000000;"></div> <div class="colorSample" style="background-color: #313131;"></div><br /><div class="colorSample" style="background-color: #434343;"></div> <div class="colorSample" style="background-color: #535353;"></div><br /><div class="colorSample" style="background-color: #626262;"></div> <div class="colorSample" style="background-color: #7D7D7D;"></div> | #000000 # #313131<br />#434343 #535353<br />#626262 #7D7D7D | (0, 0, 0) (49, 49, 49)<br />(67, 67, 67) (83, 83, 83)<br />(98, 98, 98) (125, 125, 125) |
|
||
|
||
</nobr>
|
||
|
||
|
||
|
||
|
||
# Ⅱ. 应用板块
|
||
|