# visual interface design

**Repository Path**: jiayichen/visual-interface-design

## Basic Information

- **Project Name**: visual interface design
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 颜色规范
###   主色


<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#76b8c4</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#7fd4ce</p>
</div>

</div>



<div style="display: flex;">
<div style="background-color:#76b8c4;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#7fd4ce;width:70px; height:70px;">
  <p>	</p>
</div>

</div>


### 辅助色

<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#70a7c6</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#52d2dd</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#4b58ab</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#f3d4c9</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#f16c6c</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#efb50d</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#6f583c</p>
</div>
</div>


<div style="display: flex;">
<div style="background-color:#70a7c6;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#52d2dd;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#4b58ab;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#f3d4c9;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#f16c6c;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#efb50d;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#6f583c;width:70px; height:70px;">
  <p>	</p>
</div>

</div>



### 中性色

<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#060924</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#50564f</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#94979d</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#e6e3e1</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#f5f6f6</p>
</div>
</div>





<div style="display: flex;">
<div style="background-color:#060924;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#50564f;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#94979d;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#e6e3e1;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#f5f6f6;width:70px; height:70px;">
  <p>	</p>
</div>
</div>


### 总结
<p>以水色为主基调，给与用户清新整洁的感觉；加以饱和度较低的蓝绿色系辅助色，让整个页面看起来色彩相对统一，且具有层次感，让用户沉静下来，符合产品帮助用户精心专注于学习的主旨。</p>


## 图标规范
### 常规图标
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E4%B8%BB%E9%A2%98%E8%89%B2.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%88%86%E4%BA%AB.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%A4%87%E4%BB%BD.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%A4%96%E8%A7%82.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%B8%AE%E5%8A%A9.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%BA%95%E6%A0%8F.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E7%9B%AE%E6%A0%87.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E8%AE%BE%E7%BD%AE.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E9%92%9F%E8%AE%BE%E7%BD%AE.jpg">
<p>	</p>
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/VIP.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E6%8E%92%E8%A1%8C%E6%A6%9C.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E6%97%B6%E9%97%B4%E8%BD%B4.jpg">


### tabbar图标
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E6%97%B6%E9%92%9F.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E6%9B%B4%E5%A4%9A.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E6%B7%BB%E5%8A%A0.jpg">
<p>	</p>
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E4%BB%A3%E5%8A%9E.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E5%BE%85%E5%8A%9E.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E6%88%91%E7%9A%84.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E6%95%B0%E6%8D%AE.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/tabbar%E5%9B%BE%E6%A0%87/%E9%94%81%E6%9C%BA.jpg">


### 第三方登录图标
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%AC%AC%E4%B8%89%E6%96%B9/%E5%BE%AE%E4%BF%A1.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%AC%AC%E4%B8%89%E6%96%B9/%E9%82%AE%E4%BB%B6.png" style="width:100px; height:100px;">

### 番茄钟页图标
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E4%B8%8B%E8%BD%BD.png">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E5%88%86%E6%9E%90.png">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E6%96%B9%E5%90%91.png">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E6%9A%82%E5%81%9C.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E7%81%AF.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E7%BB%88%E6%AD%A2.png">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E9%87%8D%E6%96%B0.jpg">
<img src="https://gitee.com/jiayichen/visual-interface-design/raw/master/img/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE/%E7%95%AA%E8%8C%84%E9%92%9F%E9%A1%B5%E5%9B%BE%E6%A0%87/%E9%9F%B3%E4%B9%90.jpg">

## 总结
- 相同模块的图标体量感一致，常规图标中基本为同色系深浅叠加彩色平面图标，让用户的视线会聚焦在内容上；而在tabbar图标和番茄钟页图标采用了线条粗细相同的线性图标让整体规整，同时多处采用的线性图标装饰性会更强，弱化对重要内容的干扰；在相同模块中，图标拥有一样的圆角角度圆角，使产品整体更显圆润可爱，轻松活泼，热情。

## 自己作品
 
 ## 颜色规范
###   主色


<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#B9E1E7</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#F4AEAE</p>
</div>

</div>





<div style="display: flex;">
<div style="background-color:#B9E1E7;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#F4AEAE;width:70px; height:70px;">
  <p>	</p>
</div>

</div>


### 辅助色

<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#14A1A2</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#6DC6D7</p>
</div>
<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#347F8C</p>
</div>
<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#E5554E</p>
</div>



<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#D80B2E</p>
</div>



</div>


<div style="display: flex;">
<div style="background-color:#14A1A2;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#6DC6D7;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#347F8C;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#E5554E;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#D80B2E;width:70px; height:70px;">
  <p>	</p>
</div>

</div>



### 中性色

<div style="display: flex;">
<div style="width:70px; height:50px;">
  <p>#000000</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#CFD6DF</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#e6e3e1</p>
</div>

<div style="width:70px; height:50px;">
  <p>	</p>
</div>

<div style="width:70px; height:50px;">
  <p>#FFFFFF</p>
</div>
</div>





<div style="display: flex;">
<div style="background-color:#000000;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#CFD6DF;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#e6e3e1;width:70px; height:70px;">
  <p>	</p>
</div>
<div style="background-color:transparent;width:70px; height:70px;">
  <p>	</p>
</div>

<div style="background-color:#f5f6f6;width:70px; height:70px;">
  <p>	</p>
</div>
</div>


### 总结
<p>以绿冰色和藕粉色为主基调，藕粉的温暖感与冰绿的寒冷感相抵消，给与用户文雅柔和又清爽的感觉；不一味强调极端的多彩，而采用同色系的蓝绿色作为辅助色进行深浅叠加，让整个页面看起来色彩相对统一且具有层次感。</p>


## 图标规范
### 常规图标
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E8%A1%8C%E7%A8%8B%E4%BF%AE%E6%94%B9.png" style="height:100px;">
<p>	</p>
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E8%A1%8C%E7%A8%8B%E4%BF%AE%E6%94%B92.png" style="height:100px;">
<p>	</p>
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E8%B5%84%E6%BA%90%E5%8B%BE%E9%80%89%E6%A1%86%2016.png" style="height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%8B%BE%E9%80%89.png" style="height:100px;">
<img src="" style="width:100px; height:100px;">
<img src="" style="width:100px; height:100px;">


### 播放图标
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E5%81%9C%E6%AD%A2.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E6%92%AD%E6%94%BE.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%B8%B8%E8%A7%84%E5%9B%BE%E6%A0%87/%E6%9A%82%E5%81%9C_1.png" style="width:100px; height:100px;">



### tabbar图标
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%BE%85%E5%8A%9E.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%88%91%E7%9A%84.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%89%93%E5%8D%A1.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%97%A5%E5%8E%86%E5%9B%BE%E6%A0%87.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E7%A4%BE%E5%8C%BA.png" style="width:100px; height:100px;">
<p>	</p>
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E5%BE%85%E5%8A%9E%E4%BA%AE.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%88%91%E7%9A%84%E4%BA%AE.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%89%93%E5%8D%A1%E4%BA%AE.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E6%97%A5%E5%8E%86%E4%BA%AE.png" style="width:100px; height:100px;">
<img src="https://gitee.com/jiayiup/webpage_making/raw/master/img/%E7%A4%BE%E5%8C%BA%E4%BA%AE.png" style="width:100px; height:100px;">




## 总结
- 相同模块的图标体量感一致，图标都采用相同的圆角，使产品整体更显圆润可爱，轻松活泼，热情；运用主色调同色系深浅叠加和渐变进行搭配的线性图标装饰性会更强，弱化对重要内容的干扰。