参与了HumiApp的开发，简单写个规范

色系

以前的版本不用看

- 2024.3.12更新 -

以粉色#F20E61为主色调，避免使用纯黑#000

F20E61

F4F4F4

3D3D3D

959595

EBEBEB

FFFFFF

39C5BB

HumiApp

- 2024.7.11更新 -

文字图标

字体

以前的版本不用看

- 2024.3.12更新 -

base.css里添加以下行

body {
  font-family:
    PingFang SC,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    HarmononyOS_Regular,
    'Microsoft YaHei',
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    Helvetica,
    'Hiragino Sans GB',
    Arial,
    sans-serif;
}

- 2024.7.12更新 -

字号

以前的版本不用看

不完全参考Airbnb或Material，单位px/rem，16px=1rem

Title 1 | HeadBar · 18

Title 2-2 · 16

Title 2 | Nav · 14.4

Title 3 · 12

正文 · 15

MICRO · 10

在index.html文件中加入setFontSize( )函数，以375px屏幕为基准

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
  <title>Humi</title>
</head>

<script>
  let uiWidth = 375 //标准宽度尺寸
  function setFontSize() {
    var fontSize = document.documentElement.clientWidth / (uiWidth / 16)
    document.documentElement.style.fontSize = fontSize + 'px'
  }
  setFontSize()
  window.addEventListener('resize', setFontSize)
</script>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

在main.css文件中设置 整体字体大小

body {
    font-size: 16px; /*之后使用rem布局，改变html的font-size*/
    padding: 0;
    margin: 0;
}

- 2024.3.12更新 -

<h1>

font-size: 24px;
font-weight: 700;
line-height: 25px;

<h2><标题>

font-size: 18px;
font-weight: 700;
line-height: 25px;

<h3><提示>

font-size: 13px;
font-weight: 500;
line-height: 17px;

<h4><副标题>

font-size: 12px;
font-weight: 400;
line-height: 17px;

<li>

font-size: 15px;
font-weight: 500;
line-height: 17px;
list-style: none;

<span><正文>

font-size: 14px;
line-height: 19px;

<nav><导航栏>

font-size: 8px;
line-height: 13px;

- 2024.7.12更新 -

间距

以前的版本不用看

不做规范

怎么好看怎么来，不知道怎样好看就用默认

- 2024.3.13更新 -

屏幕两侧边距

16px
14px
8px

纵间距 row-gap

组合

8px
20px

组合

18px
24px

横间距 column-gap

8px
16px

填充 padding

18px 15px
10px 16px
12px 14px

- 2024.7.12更新 -

图标

统一用iconfont

项目所用图标均上传到阿里巴巴矢量图标库，点击查看

以前的版本不用看

.iconfont {
    font-size: 1.2rem;
    color: #241917;
}

- 2024.3.14更新 -

12*12
14*14
16*16
18*18
20*20
24*24
28*28

- 2024.7.12更新 -

通用控件

注意App统一16px=1rem

布局

注意安全边距

以iPhone X为例，设计稿尺寸宽度为375px

- 2024.3.14更新 -

分隔线

小的

align-self: stretch;
height: 1px;
background: #F4F4F4;

大的

align-self: stretch;
height: 8px;
background: #F4F4F4;
- 2024.7.12更新 -

圆角

border-radius: 7px
border-radius: 10px
border-radius: 12px
- 2024.7.12更新 -

头像size

96*96
80*80
72*72
60*60
36*36
14*14
- 2024.7.12更新 -

按钮

会慢慢补充的，有常用的@我

设置界面

.button {
    background-color: #DE1E64;
    width: calc(100% - 2*2rem);
    padding: .5rem 0;
    border-radius: 1.875rem;
    border: 2px solid #DE1E64;

    position: relative;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    @include flexcc;

    span {
        font-size: .9rem;
        color: #fff;
    }
}

- 2024.3.14更新 -

提示框Toast

提示框

.toast {
  position: fixed;
  bottom: 8rem;
  display: flex;
  justify-content: center;
  width: 100vw;
  z-index: 999;

  span {
      font-family: Source Han Sans;
      font-size: .9rem;
      background-color: #fff;
      color: #DE1E64;
      padding: .6rem 1.2rem;
      border-radius: 2rem;
      box-shadow: 0 3px 10px #0000002a;
  }
}

- 2024.3.14更新 -

加载Loader

- 2024.3.14更新 -

输入框

等我更新

- 2024.3.14更新 -