Merge pull request #780 from auroraXiaox/feat_docs
fix(site): 适配移动端图片压缩问题
This commit is contained in:
MeloHG
GitHub
commit
8d10d3d54b
|
|
@ -64,13 +64,27 @@ Font is one of the most basic components of systematic interface design. It is t
|
|||
.font-size-img{max-width:80%!important;margin-top:32px!important}
|
||||
.font-weight-img{width:100%;height:100%;background-size:100% 100%;}
|
||||
.font-weight-list{margin-top:32px}
|
||||
.font-hight-img{width:1191px;height:409px;background-size:cover;margin-top:32px;margin-bottom:24px;max-width:100%}
|
||||
@media (max-width:750px){.doc-font-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
|
||||
.doc-font-item{max-width:none!important;margin-right:0;margin-bottom:20px}
|
||||
.font-size-img{max-width:100%!important}
|
||||
.font-hight-img{height:280px}
|
||||
}
|
||||
.font-typeface-img{width:100%;height:100%;background-size:100% 100%;}
|
||||
.font-table-content{margin-top:32px;margin-bottom:24px}
|
||||
.font-table{background-color:#fff!important;border:0.5px solid #E5E5E5;
|
||||
font-family:PingFangSC-Regular;font-size:14px!important;color:#31383F!important;
|
||||
letter-spacing:0;line-height:28px!important;}
|
||||
.doc-content-paragraph table td:first-child {width:55%;font-weight:normal!important;
|
||||
color: #31383F;font-family:none;}
|
||||
.table-first-tr{font-family:PingFangSC-Regular;font-size:14px;color:#91989F!important;
|
||||
letter-spacing:0;line-height:28px;}
|
||||
.first-td-speical{color: #91989F!important;}
|
||||
.first-td{font-family:none;font-size:14px;color:#31383F;
|
||||
letter-spacing:0;line-height:28px;}
|
||||
.table-tr td:not(:first-child){border-left:0.5px solid #E5E5E5!important;}
|
||||
.doc-content-paragraph table td{padding:5.5px 0 7px 20px}
|
||||
@media (max-width:750px){.doc-content-paragraph table td{padding:5.5px 0 7px 5px}}
|
||||
@media (max-width:750px){.font-weight-item:not(:last-child){margin-bottom:20px}}
|
||||
</style>
|
||||
|
||||
#### The shop name
|
||||
|
|
@ -99,4 +113,73 @@ In most cases, only the regular and Medium font weights appear in Chinese, and o
|
|||
#### Line height
|
||||
|
||||
When the type is larger, the line height is larger, and the coherence of the message displayed in large text is obviously fragmented. Therefore, it is recommended to keep the same spacing between different font sizes. The logical formula is as follows: "Line height = font size + n", where n is a multiple of 4 and 8 is recommended.
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/bes4GgXj3D1643358533063.png" class="font-hight-img">
|
||||
<div class="font-table-content">
|
||||
<table class="font-table" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr class="table-first-tr table-tr">
|
||||
<td class="first-td-speical">size</td>
|
||||
<td>rem</td>
|
||||
<td>Row height</td>
|
||||
<td>Row height</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">12px</td>
|
||||
<td>0.75</td>
|
||||
<td>16</td>
|
||||
<td>1.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">14px</td>
|
||||
<td>0.875</td>
|
||||
<td>20</td>
|
||||
<td>1.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">16px</td>
|
||||
<td>1</td>
|
||||
<td>24</td>
|
||||
<td>1.5</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">18px</td>
|
||||
<td>1.125</td>
|
||||
<td>26</td>
|
||||
<td>1.625</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">20px</td>
|
||||
<td>1.25</td>
|
||||
<td>28</td>
|
||||
<td>1.75</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">24px</td>
|
||||
<td>1.5</td>
|
||||
<td>32</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">24px</td>
|
||||
<td>1.5</td>
|
||||
<td>32</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">28px</td>
|
||||
<td>1.75</td>
|
||||
<td>36</td>
|
||||
<td>2.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">32px</td>
|
||||
<td>2</td>
|
||||
<td>40</td>
|
||||
<td>2.5</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">36px</td>
|
||||
<td>2.25</td>
|
||||
<td>44</td>
|
||||
<td>2.75</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,13 +64,27 @@ title: 字体
|
|||
.font-size-img{max-width:80%!important;margin-top:32px!important}
|
||||
.font-weight-img{width:100%;height:100%;background-size:100% 100%;}
|
||||
.font-weight-list{margin-top:32px}
|
||||
.font-hight-img{width:1191px;height:409px;background-size:cover;margin-top:32px;margin-bottom:24px;max-width:100%}
|
||||
@media (max-width:750px){.doc-font-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
|
||||
.doc-font-item{max-width:none!important;margin-right:0;margin-bottom:20px}
|
||||
.font-size-img{max-width:100%!important}
|
||||
.font-hight-img{height:280px}
|
||||
}
|
||||
.font-typeface-img{width:100%;height:100%;background-size:100% 100%;}
|
||||
.font-table-content{margin-top:32px;margin-bottom:24px}
|
||||
.font-table{background-color:#fff!important;border:0.5px solid #E5E5E5;
|
||||
font-family:PingFangSC-Regular;font-size:14px!important;color:#31383F!important;
|
||||
letter-spacing:0;line-height:28px!important;}
|
||||
.doc-content-paragraph table td:first-child {width:55%;font-weight:normal!important;
|
||||
color: #31383F;font-family:none;}
|
||||
.table-first-tr{font-family:PingFangSC-Regular;font-size:14px;color:#91989F!important;
|
||||
letter-spacing:0;line-height:28px;}
|
||||
.first-td-speical{color: #91989F!important;}
|
||||
.first-td{font-family:none;font-size:14px;color:#31383F;
|
||||
letter-spacing:0;line-height:28px;}
|
||||
.table-tr td:not(:first-child){border-left:0.5px solid #E5E5E5!important;}
|
||||
.doc-content-paragraph table td{padding:5.5px 0 7px 20px}
|
||||
@media (max-width:750px){.doc-content-paragraph table td{padding:5.5px 0 7px 5px}}
|
||||
@media (max-width:750px){.font-weight-item:not(:last-child){margin-bottom:20px}}
|
||||
</style>
|
||||
|
||||
#### 字号
|
||||
|
|
@ -98,4 +112,73 @@ title: 字体
|
|||
#### 行高
|
||||
|
||||
在当字号越大的时候，行高就会越大，在大号文字的展示上信息的连贯明显得出现割裂。因此建议不同字号之间的间距都保持相同，通过逻辑得到这样一个公式：「 行高 = 字号 + n 」 N为4的倍数，推荐为8。
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/bes4GgXj3D1643358533063.png" class="font-hight-img">
|
||||
<div class="font-table-content">
|
||||
<table class="font-table" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr class="table-first-tr table-tr">
|
||||
<td class="first-td-speical">尺寸</td>
|
||||
<td>rem</td>
|
||||
<td>行高</td>
|
||||
<td>行高</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">12px</td>
|
||||
<td>0.75</td>
|
||||
<td>16</td>
|
||||
<td>1.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">14px</td>
|
||||
<td>0.875</td>
|
||||
<td>20</td>
|
||||
<td>1.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">16px</td>
|
||||
<td>1</td>
|
||||
<td>24</td>
|
||||
<td>1.5</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">18px</td>
|
||||
<td>1.125</td>
|
||||
<td>26</td>
|
||||
<td>1.625</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">20px</td>
|
||||
<td>1.25</td>
|
||||
<td>28</td>
|
||||
<td>1.75</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">24px</td>
|
||||
<td>1.5</td>
|
||||
<td>32</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">24px</td>
|
||||
<td>1.5</td>
|
||||
<td>32</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">28px</td>
|
||||
<td>1.75</td>
|
||||
<td>36</td>
|
||||
<td>2.25</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">32px</td>
|
||||
<td>2</td>
|
||||
<td>40</td>
|
||||
<td>2.5</td>
|
||||
</tr>
|
||||
<tr class="table-tr">
|
||||
<td class="first-td">36px</td>
|
||||
<td>2.25</td>
|
||||
<td>44</td>
|
||||
<td>2.75</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ As an important element in UI composition, Icon affects the overall style of UI
|
|||
|
||||
<style>
|
||||
.doc-content-paragraph h4{margin-top:60px}
|
||||
.icon-img{background-size:cover!important;margin-top:16px;width:240px;height:160px;max-width:70%}
|
||||
.icon-img{background-size:100% 100%!important;margin-top:16px;width:248px;height:214px;max-width:70%}
|
||||
.last-icon-img{margin-bottom:24px}
|
||||
.icon-item{background-color:#F9FAFB;padding:65px 0;display:flex;align-items:center;justify-content:center;width:700px;max-width:100%}
|
||||
.special-img{width:160px;max-width:65%}
|
||||
.special-img{max-width:65%}
|
||||
</style>
|
||||
|
||||
#### Icon style
|
||||
|
|
@ -19,35 +19,35 @@ Using linear combination of ancient copper coin style, extract the design princi
|
|||
|
||||
As the underlying structure of diagram drawing, grid is the basis of all attribute design. Key factors such as the length and thickness of lines and the size and proportion of ICONS are determined on the basis of it. The typical icon size is 16px by 16px output.<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/gJ8ea5fyZh1643357792937.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/GTd675GAhd1644305037994.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### Canvas with auxiliary lines
|
||||
|
||||
As the actual operation area of icon design, the canvas plays the role of controlling the screen, limiting the size and adjusting the spacing. We normalize the circle, square and diagonal paths in the grid and generate a set of auxiliary lines system. The actual canvas should be positioned 28 by 28 pixels in the center of the grid, with 2 pixels of bleeding around it.<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/OXAyFwG4291643357792866.png" class="icon-img special-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/OKulJxPJES1644305037975.png" class="icon-img special-img">
|
||||
</div>
|
||||
|
||||
#### line
|
||||
|
||||
It is recommended to draw with 4px width strokes to allow more style possibilities in smaller grids, 4px at 32px.<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/loXom2M6m31643357793342.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/K5k0hHysz11644305038177.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### Rounded corners
|
||||
|
||||
Keep the outer corners 4px rounded, the inner corners unrounded and the outer corners rounded and the inner corners square.<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/YPPcY0uMVF1643357793367.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/Ybp8TGmKZS1644305038215.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### The Angle
|
||||
|
||||
Lines should preferably be tilted parallel to 45° auxiliary lines in the grid, or use multiples of 15°. In order to have high line definition in low resolution.<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/2iOJgK0Rf01643357793600.png" class="icon-img last-icon-img special-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/yeENJWIw4E1644305038385.png" class="icon-img last-icon-img special-img">
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈
|
|||
|
||||
<style>
|
||||
.doc-content-paragraph h4{margin-top:60px}
|
||||
.icon-img{background-size:cover!important;margin-top:16px;width:240px;height:160px;max-width:70%}
|
||||
.icon-img{background-size:100% 100%!important;margin-top:16px;width:248px;height:214px;max-width:70%}
|
||||
.last-icon-img{margin-bottom:24px}
|
||||
.icon-item{background-color:#F9FAFB;padding:65px 0;display:flex;align-items:center;justify-content:center;width:700px;max-width:100%}
|
||||
.special-img{width:160px;max-width:65%}
|
||||
.special-img{max-width:65%}
|
||||
</style>
|
||||
|
||||
#### 图标风格
|
||||
|
|
@ -19,35 +19,35 @@ Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈
|
|||
|
||||
栅格作为图表绘制的底层结构，是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16px*16px输出尺寸。<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/gJ8ea5fyZh1643357792937.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/GTd675GAhd1644305037994.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### 画布与辅助线
|
||||
|
||||
画布作为图标设计的实际操作区域起到了控制画面、限制大小、调整间距等作用。我们对栅格内的圆形、方形、斜线等路径进行了规范并生成了一套辅助线系统。图标的设计上实际画布应控制在栅格中心28*28px的区域，周围留有2px的出血。<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/OXAyFwG4291643357792866.png" class="icon-img special-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/OKulJxPJES1644305037975.png" class="icon-img special-img">
|
||||
</div>
|
||||
|
||||
#### 线条
|
||||
|
||||
绘制时建议使用4px宽度的笔画，这样以便在小尺寸的栅格内保证更多的样式可能性，在 32px 时为 4px。<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/loXom2M6m31643357793342.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/K5k0hHysz11644305038177.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### 圆角
|
||||
|
||||
保持 4px 的外圆角，内角无圆角，外圆内方。<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/YPPcY0uMVF1643357793367.png" class="icon-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/Ybp8TGmKZS1644305038215.png" class="icon-img">
|
||||
</div>
|
||||
|
||||
#### 角度
|
||||
|
||||
线条如需倾斜最好与栅格内 45° 辅助线相平行，或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。<br>
|
||||
<div class="icon-item">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/2iOJgK0Rf01643357793600.png" class="icon-img last-icon-img special-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/yeENJWIw4E1644305038385.png" class="icon-img last-icon-img special-img">
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ Avoid information dispersion, make information more focused, the overall use of
|
|||
|
||||
<style>
|
||||
.doc-content-paragraph h4{margin-top:60px}
|
||||
.layer-main{background-color:#F9FAFB;display:flex;align-items:center;justify-content:center;max-width:100%;padding:60px 0}
|
||||
.layer-half{background-color:#F9FAFB;display:flex;align-items:center;justify-content:center;max-width:100%;padding:60px 0}
|
||||
.layer-img{max-height:350px;background-size:cover;max-width:80%!important}
|
||||
.layer-item h4{margin-top:60px}
|
||||
.layer-item{padding:60px 0;background-color:#F9FAFB;width:816px;display:flex;justify-content:center}
|
||||
@media (max-width:750px){.layer-item{width:100%}}
|
||||
.layer-img{max-height:350px;background-size:cover;margin-left:-59px}
|
||||
@media (max-width:750px){.layer-img{margin-left:10px;width:80%;height:80%;background-size:cover;}}
|
||||
.last-layer-img{margin-bottom:36px}
|
||||
.pre-img{margin-bottom:60px}
|
||||
</style>
|
||||
|
|
@ -22,13 +24,13 @@ On the basis of ensuring financial security and reliability, the expression of y
|
|||
|
||||
#### Master card, master button
|
||||
|
||||
<div class="layer-main doc-content-paragraph pre-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/aLKIJLLXOT1643189958497.png" class="layer-img">
|
||||
<div class="layer-item pre-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/aL2YDKG34K1644306010789.png" class="layer-img">
|
||||
</div>
|
||||
|
||||
#### A floating layer
|
||||
|
||||
<div class="layer-half last-layer-img doc-content-paragraph">
|
||||
<div class="layer-item last-layer-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/CONWG6LXs71643189958385.png" class="layer-img">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ title: 层级
|
|||
|
||||
<style>
|
||||
.doc-content-paragraph h4{margin-top:60px}
|
||||
.layer-main{background-color:#F9FAFB;display:flex;align-items:center;justify-content:center;max-width:100%;padding:60px 0}
|
||||
.layer-half{background-color:#F9FAFB;display:flex;align-items:center;justify-content:center;max-width:100%;padding:60px 0}
|
||||
.layer-img{max-height:350px;background-size:cover;max-width:80%!important}
|
||||
.layer-item h4{margin-top:60px}
|
||||
.layer-item{padding:60px 0;background-color:#F9FAFB;width:816px;display:flex;justify-content:center}
|
||||
@media (max-width:750px){.layer-item{width:100%}}
|
||||
.layer-img{max-height:350px;background-size:cover;margin-left:-59px}
|
||||
@media (max-width:750px){.layer-img{margin-left:10px;width:80%;height:80%;background-size:cover;}}
|
||||
.last-layer-img{margin-bottom:36px}
|
||||
.pre-img{margin-bottom:60px}
|
||||
</style>
|
||||
|
|
@ -22,13 +24,14 @@ title: 层级
|
|||
|
||||
#### 主卡片、主按钮
|
||||
|
||||
<div class="layer-main doc-content-paragraph pre-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/aLKIJLLXOT1643189958497.png" class="layer-img">
|
||||
<div class="layer-item pre-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/aL2YDKG34K1644306010789.png" class="layer-img">
|
||||
</div>
|
||||
|
||||
|
||||
#### 半浮层
|
||||
|
||||
<div class="layer-half last-layer-img doc-content-paragraph">
|
||||
<div class="layer-item last-layer-img">
|
||||
<img src="https://pt-starimg.didistatic.com/static/starimg/img/CONWG6LXs71643189958385.png" class="layer-img">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue