feat: 巨子测肤 H5 原型(按 Figma 设计稿还原)
- design/: Figma 设计稿提取产物 — 设计规范文档、9 张整屏预览、 8 个 SVG 组件切图、15 张位图素材、完整节点数据(full.json) - h5/: 纯静态 H5 实现 — 启动页/隐私弹窗/档案填写(肤质轮播)/ 三连拍照/报告页,375px 基准还原,含压缩素材与 Playwright 验收截图
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 999 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 854 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg width="131" height="58" viewBox="0 0 131 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_12_36)">
|
||||
<mask id="mask0_12_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="131" height="58">
|
||||
<path d="M0 0.000530243H131V58H0V0.000530243Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_12_36)">
|
||||
<path d="M34.7172 2.09808e-05H25.204C25.1089 7.36681 23.663 14.3988 21.1165 20.8898H27.9903C31.7588 14.7136 34.1511 7.6163 34.7172 2.09808e-05Z" fill="white"/>
|
||||
<path d="M48.803 56.8462V25.28C48.803 22.4998 51.0643 20.246 53.8538 20.246C56.6432 20.246 58.9056 22.4998 58.9056 25.28V56.8462H68.8075V21.9134C68.8075 16.2341 64.1887 11.6307 58.4916 11.6307C52.7933 11.6307 48.1745 16.2341 48.1745 21.9134V56.8462H48.803Z" fill="white"/>
|
||||
<path d="M68.7989 56.8462V25.28C68.7989 22.4998 71.0603 20.246 73.8497 20.246C76.6392 20.246 78.9015 22.4998 78.9015 25.28V56.8462H88.8035V21.9134C88.8035 16.2341 84.1847 11.6307 78.4875 11.6307C72.7893 11.6307 68.1705 16.2341 68.1705 21.9134V56.8462H68.7989Z" fill="white"/>
|
||||
<path d="M48.8083 56.8462H38.9148V11.9886H48.8083V56.8462Z" fill="white"/>
|
||||
<path d="M127.45 37.0503H102.133V29.5509H127.45V37.0503Z" fill="white"/>
|
||||
<path d="M121.216 42.8615C120.722 45.9638 118.042 48.3513 114.793 48.3513C111.194 48.3513 108.266 45.4333 108.266 41.8467V27.7563C108.266 24.1698 111.194 21.2517 114.793 21.2517C118.39 21.2517 121.318 24.1698 121.318 27.7563V37.0496H130.999V27.7563C130.999 18.8495 123.729 11.6027 114.793 11.6027C105.856 11.6027 98.5853 18.8495 98.5853 27.7563V41.8467C98.5853 50.7536 105.856 58.0004 114.793 58.0004C123.381 58.0004 130.36 51.2884 130.897 42.8615H121.216Z" fill="white"/>
|
||||
<path d="M7.03432 11.9886H17.0936V56.8462H7.03432V11.9886Z" fill="white"/>
|
||||
<path d="M10.5421 2.95639e-05C7.87411 2.90758 4.17106 4.79612 0.000106812 5.15404V11.9882H17.0937V2.95639e-05H10.5421Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_12_36">
|
||||
<rect width="131" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.87109 11.9203C6.44609 11.3453 7.36718 11.3106 7.98359 11.841L8.06914 11.9203L21.2543 25.1055L34.4395 11.9203C35.0145 11.3446 35.9363 11.3102 36.5527 11.841L36.6375 11.9203C37.2125 12.4953 37.2473 13.4164 36.7168 14.0328L36.6375 14.1184L22.9023 27.8531C22.0297 28.7254 20.6281 28.7664 19.7059 27.9465L19.6062 27.8531L5.87031 14.1176C5.26367 13.511 5.26367 12.527 5.87031 11.9203H5.87109Z" fill="#2C2C2C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M44.5 40.584L64.792 20.292C65.3113 19.7727 66.0156 19.481 66.75 19.481C67.4844 19.481 68.1887 19.7727 68.708 20.292C69.2273 20.8113 69.519 21.5156 69.519 22.25C69.519 22.9844 69.2273 23.6887 68.708 24.208L48.416 44.5L68.708 64.792C69.2273 65.3113 69.519 66.0156 69.519 66.75C69.519 67.4844 69.2273 68.1887 68.708 68.708C68.1887 69.2273 67.4844 69.519 66.75 69.519C66.0156 69.519 65.3113 69.2273 64.792 68.708L44.5 48.416L24.208 68.708C23.6887 69.2273 22.9844 69.519 22.25 69.519C21.5156 69.519 20.8113 69.2273 20.292 68.708C19.7727 68.1887 19.481 67.4844 19.481 66.75C19.481 66.0156 19.7727 65.3113 20.292 64.792L40.584 44.5L20.292 24.208C19.7727 23.6887 19.481 22.9844 19.481 22.25C19.481 21.5156 19.7727 20.8113 20.292 20.292C20.8113 19.7727 21.5156 19.481 22.25 19.481C22.9844 19.481 23.6887 19.7727 24.208 20.292L44.5 40.584Z" fill="#2C2C2C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 960 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M81.72 10.8H8.50498C6.47998 10.8 4.72498 12.555 4.72498 14.58V75.42C4.72498 77.67 6.47998 79.2 8.50498 79.2H81.45C83.7 79.2 85.23 77.445 85.23 75.42V14.58C85.5 12.555 83.745 10.8 81.72 10.8ZM79.2 17.1V50.94L71.37 40.095C65.295 33.3 61.02 35.28 57.735 40.365C54.945 44.91 51.435 51.21 51.435 51.21C47.655 57.78 45.135 62.55 36.81 57.78C36.81 57.78 30.015 53.73 26.19 50.985C21.375 47.7 17.1 56.52 12.825 61.605L11.07 63.63V17.1H79.2ZM20.115 31.725C20.115 36.765 24.39 41.085 29.475 41.085C34.56 41.085 38.835 36.81 38.835 31.725C38.835 26.64 34.56 22.365 29.475 22.365C24.39 22.365 20.115 26.46 20.115 31.725Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 737 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.1181 13.78C10.6546 13.3342 10.0664 13.04 9.43174 12.9365C8.79705 12.8329 8.14588 12.925 7.56478 13.2005C6.98368 13.476 6.50018 13.9217 6.17853 14.4786C5.85688 15.0355 5.71232 15.677 5.76406 16.318L6.66406 32.254C6.71605 33.0926 7.09862 33.8763 7.7278 34.4331C8.35699 34.9899 9.18138 35.2744 10.0201 35.224L25.9161 34.21C26.5411 34.1769 27.1423 33.9594 27.6438 33.585C28.1453 33.2105 28.5247 32.6959 28.7341 32.106C28.9418 31.5162 28.9704 30.8781 28.8163 30.272C28.6622 29.666 28.3323 29.119 27.8681 28.7L23.3001 24.794C26.4671 21.3125 30.4194 18.6373 34.8284 16.9907C39.2374 15.3441 43.9758 14.7737 48.6497 15.327C53.3235 15.8802 57.7978 17.5411 61.7005 20.1716C65.6033 22.802 68.8217 26.3261 71.0884 30.4508C73.3551 34.5754 74.6045 39.1816 74.7327 43.8863C74.861 48.591 73.8643 53.2584 71.8257 57.5004C69.7871 61.7424 66.7653 65.4366 63.0116 68.2757C59.258 71.1149 54.8808 73.017 50.2441 73.824C44.0386 74.9032 37.6507 73.9727 32.0109 71.1682C26.3712 68.3636 21.7743 63.8314 18.8901 58.232L18.6941 57.92C18.2841 57.1196 17.6638 56.4459 16.8999 55.9713C16.136 55.4966 15.2573 55.239 14.3581 55.226C13.6985 55.2263 13.0455 55.357 12.4366 55.6106C11.8277 55.8642 11.275 56.2357 10.8103 56.7038C10.3456 57.1718 9.97806 57.7272 9.72882 58.3379C9.47958 58.9485 9.35357 59.6025 9.35806 60.262C9.37406 61.098 9.60206 61.918 10.0221 62.642C13.8546 70.0771 19.9597 76.0952 27.4491 79.8204C34.9385 83.5457 43.4212 84.7839 51.6629 83.3546C59.9046 81.9254 67.4752 77.9034 73.273 71.8739C79.0707 65.8444 82.7931 58.1221 83.8984 49.8308C85.0037 41.5394 83.4343 33.1117 79.4185 25.774C75.4027 18.4363 69.1502 12.5715 61.5707 9.03315C53.9912 5.49481 45.4803 4.46751 37.2766 6.10076C29.0729 7.73402 21.6044 11.9426 15.9581 18.114L11.1181 13.78Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="181" height="181" viewBox="0 0 181 181" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.7423 2.50693C134.817 2.50693 172.978 40.6683 172.978 87.742C172.978 134.816 134.817 172.977 87.7423 172.977C40.6681 172.977 2.50693 134.816 2.50693 87.742C2.50693 40.6683 40.6681 2.50693 87.7423 2.50693Z" stroke="white" stroke-width="5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M90.751 25.5706C126.749 25.5706 155.931 54.7529 155.931 90.7514C155.931 126.749 126.749 155.931 90.751 155.931C54.7529 155.931 25.5706 126.749 25.5706 90.7514C25.5706 54.7529 54.7529 25.5706 90.751 25.5706Z" fill="#F5F078"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 673 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.5 KiB |
@@ -0,0 +1,28 @@
|
||||
<svg width="315" height="315" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_12_57)">
|
||||
<mask id="mask0_12_57" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="315" height="315">
|
||||
<path d="M0 0H315V315H0V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_12_57)">
|
||||
<path d="M312.367 157.469C312.305 189.488 302.368 220.946 283.825 247.074C265.762 272.529 239.944 292.292 210.61 302.978C180.09 314.093 146.239 315.313 115 306.415C84.9198 297.848 57.8632 280.029 37.9533 255.929C17.7205 231.438 5.39449 200.803 3.05669 169.123C0.692574 137.082 8.32902 104.729 25.0042 77.2481C41.0985 50.7214 65.1451 29.3505 93.3724 16.4679C122.926 2.97823 156.656 -0.757879 188.478 5.71411C219.257 11.9755 247.704 27.7536 269.414 50.4336C291.195 73.1873 305.689 102.429 310.54 133.553C311.772 141.464 312.351 149.465 312.367 157.469C312.37 159.162 315.003 159.166 314.999 157.469C314.936 124.828 304.771 92.64 285.765 66.066C267.35 40.3184 241.317 20.4164 211.584 9.52218C180.578 -1.83889 146.055 -3.05502 114.3 5.98258C83.7246 14.685 56.1063 32.8287 35.9086 57.3688C15.4389 82.2371 2.96367 113.088 0.469678 145.207C-2.07522 177.969 5.77534 211.192 22.8805 239.265C39.2925 266.202 63.8182 287.987 92.5738 300.984C122.683 314.59 156.805 318.352 189.178 311.761C220.37 305.41 249.274 289.347 271.276 266.366C293.487 243.161 308.344 213.263 313.171 181.489C314.378 173.536 314.984 165.511 314.999 157.469C315.003 155.775 312.37 155.772 312.367 157.469Z" fill="#282828"/>
|
||||
<path d="M183.045 248.883C166.948 256.364 148.047 256.364 131.949 248.883C131.112 248.493 129.904 248.937 129.968 250.02C130.564 260.214 129.976 273.383 121.88 280.773C119.047 283.357 115.516 285.365 112.29 287.432C109.284 289.359 106.232 291.212 103.132 292.985C100.415 294.54 97.6703 296.07 94.8516 297.433C94.146 297.772 93.9424 298.995 94.5848 299.499C97.3842 301.698 100.675 303.34 103.892 304.814C112.931 308.958 122.647 311.532 132.449 313.069C147.341 315.401 162.693 315.61 177.65 313.754C188.216 312.441 198.717 310.065 208.554 305.93C212.647 304.211 216.892 302.261 220.41 299.499C221.052 298.995 220.848 297.772 220.145 297.433C217.324 296.072 214.579 294.54 211.862 292.985C208.763 291.212 205.711 289.359 202.704 287.432C199.478 285.365 195.949 283.357 193.114 280.773C185.02 273.384 184.43 260.214 185.027 250.02C185.125 248.327 182.492 248.334 182.394 250.02C181.894 258.565 182.447 267.727 186.168 275.569C188.395 280.262 191.809 283.278 196.026 286.163C200.965 289.542 206.048 292.718 211.255 295.67C213.739 297.075 216.245 298.463 218.814 299.706C218.727 299.016 218.637 298.327 218.549 297.639C219.062 297.237 218.381 297.756 218.207 297.876C217.651 298.255 217.089 298.627 216.515 298.981C214.353 300.317 212.083 301.482 209.774 302.542C201.051 306.539 191.608 308.975 182.157 310.481C167.634 312.794 152.612 312.943 138.017 311.202C127.661 309.967 117.303 307.622 107.653 303.607C104.721 302.386 101.846 300.994 99.1165 299.367C98.3811 298.928 97.6527 298.476 96.9489 297.988C96.7822 297.872 95.8994 297.21 96.4452 297.639C96.3575 298.327 96.268 299.016 96.1802 299.706C103.259 296.286 110.042 292.116 116.581 287.773C121.034 284.814 125.248 282.018 127.944 277.273C130.243 273.225 131.458 268.629 132.107 264.047C132.767 259.4 132.876 254.7 132.6 250.02C131.94 250.397 131.28 250.776 130.621 251.155C147.645 259.068 167.349 259.066 184.374 251.155C185.91 250.443 184.574 248.172 183.045 248.883Z" fill="#282828"/>
|
||||
<path d="M157.497 57.1367C169.967 57.1209 182.976 60.5411 194.247 65.6548C195.048 66.0163 195.89 65.7338 196.181 64.8687C198.314 58.5353 199.365 51.6439 198.405 44.9929C197.036 35.5096 190.921 28.2023 182.2 24.417C175.483 21.4987 168.051 20.4984 160.783 20.265C152.787 20.0105 144.492 20.5212 136.827 22.978C127.376 26.0087 119.557 32.5193 117.135 42.4133C115.327 49.8013 116.351 57.7667 118.706 64.9178C118.992 65.7847 119.845 66.0655 120.64 65.704C131.939 60.5587 144.989 57.1191 157.497 57.1367C159.191 57.1384 159.194 54.5061 157.497 54.5044C144.506 54.4868 131.041 58.0896 119.31 63.4314C119.956 63.6929 120.6 63.9544 121.244 64.2176C119.368 58.5213 118.369 52.3739 119.08 46.3846C120.128 37.5382 125.533 30.6872 133.593 27.016C139.974 24.1099 147.179 23.1553 154.126 22.9078C161.867 22.6323 169.841 23.0781 177.281 25.3875C186.183 28.1532 193.412 34.1619 195.474 43.5118C196.978 50.3348 195.848 57.621 193.643 64.1685C194.288 63.9052 194.932 63.6437 195.576 63.3823C183.873 58.072 170.452 54.4868 157.497 54.5044C155.804 54.5061 155.8 57.1384 157.497 57.1367Z" fill="#282828"/>
|
||||
<path d="M236.677 155.235C240.547 127.759 237.388 97.6435 216.455 77.4449C203.688 65.1257 186.459 58.1904 169.094 55.5616C162.667 54.5894 156.571 54.2823 150.132 55.0036C133.716 56.8409 117.318 62.3723 104.181 72.5716C95.3479 79.4297 88.3047 88.3848 83.7924 98.6245C77.8829 112.026 76.2103 126.876 76.9457 141.405C77.1791 146.036 77.6706 150.644 78.3165 155.235C78.6236 154.694 78.9307 154.156 79.2361 153.615C74.0814 155.267 69.892 159.859 68.2404 164.918C66.4239 170.485 67.4489 176.618 69.3567 182.013C70.68 185.751 73.3162 188.988 75.8418 192.015C77.7302 194.277 79.7837 196.41 82.1004 198.235C84.0749 199.791 86.4812 201.501 89.0577 201.829L87.7887 200.862C90.109 207.627 93.6227 214.132 97.433 220.153C105.25 232.511 115.707 243.619 128.851 250.321C144.677 258.392 163.869 259.417 180.421 252.894C194.699 247.268 206.232 236.582 214.923 224.126C218.168 219.474 221.041 214.559 223.521 209.457C224.362 207.73 225.155 205.979 225.898 204.207C226.278 203.294 226.896 202.234 227.066 201.251C227.089 201.121 227.163 200.988 227.207 200.862C226.784 201.185 226.361 201.506 225.938 201.829C227.983 201.569 229.925 200.386 231.574 199.224C233.68 197.74 235.58 195.981 237.328 194.095C239.97 191.243 242.964 187.855 244.724 184.373C249.103 175.707 249.24 163.479 241.32 156.853C239.694 155.495 237.794 154.268 235.758 153.615C234.141 153.098 233.448 155.639 235.057 156.155C238.859 157.371 242.65 161.184 244.091 165.252C248.177 176.788 240.077 189.164 231.351 196.122C230.045 197.161 228.602 198.159 227.051 198.8C226.768 198.917 225.195 199.289 225.938 199.196C225.318 199.275 224.876 199.556 224.667 200.162C222.459 206.598 219.088 212.774 215.485 218.512C207.96 230.5 197.916 241.241 185.248 247.826C169.78 255.865 150.964 256.705 134.808 250.17C121.12 244.632 110.031 234.046 101.789 221.992C97.2013 215.285 92.9768 207.886 90.3266 200.162C90.116 199.549 89.6719 199.274 89.0577 199.196C89.8053 199.291 88.3942 198.975 88.1345 198.875C86.9831 198.429 85.9037 197.754 84.8928 197.054C80.1102 193.73 76.0138 188.699 73.0161 183.769C70.1903 179.124 69.1215 172.055 70.4483 166.766C71.2662 163.511 73.1161 160.636 75.7435 158.545C77.0124 157.534 78.6903 156.553 79.9364 156.155C80.6788 155.916 80.9596 155.267 80.8561 154.535C77.0651 127.627 80.3331 98.0699 101.15 78.5944C113.575 66.9718 130.148 60.5577 146.8 58.0711C152.734 57.1849 158.416 56.9462 164.364 57.5815C180.028 59.2521 195.764 64.515 208.425 74.0352C217.041 80.5124 223.914 89.0657 228.432 98.8474C234.461 111.905 236.103 126.581 235.445 140.822C235.233 145.411 234.78 149.986 234.139 154.535C233.906 156.191 236.442 156.907 236.677 155.235Z" fill="#282828"/>
|
||||
<path d="M79.8462 140.228C90.0486 138.74 102.459 133.496 106.912 123.578C108.883 119.187 108.949 114.408 107.893 109.768C107.352 110.309 106.813 110.848 106.273 111.388C111.287 112.773 116.526 113.541 121.688 114.08C132.115 115.166 142.972 114.923 153.074 111.897C159.233 110.053 164.972 107.096 169.835 102.872C169.103 102.677 168.37 102.484 167.636 102.291C169.442 107.78 172.633 113.008 176.091 117.588C183.659 127.612 194.093 135.142 206.206 138.645C215.847 141.432 225.962 141.579 235.848 140.228C237.519 140 236.808 137.462 235.148 137.69C219.666 139.805 203.698 137.49 190.751 128.333C182.927 122.802 176.638 115.142 172.347 106.601C171.471 104.855 170.764 103.382 170.174 101.591C169.853 100.612 168.737 100.348 167.975 101.01C153.072 113.952 130.319 113.598 112.012 109.993C110.323 109.661 108.632 109.309 106.973 108.851C105.973 108.573 105.134 109.505 105.353 110.469C107.077 118.03 104.693 124.936 98.6222 129.753C94.08 133.358 88.4391 135.539 82.8562 136.922C81.6329 137.225 80.3938 137.508 79.1459 137.69C77.4768 137.932 78.1858 140.47 79.8462 140.228Z" fill="#282828"/>
|
||||
<path d="M108.977 155.731C111.306 153.764 115.22 151.734 118.541 150.711C126.242 148.34 133.77 150.267 139.658 155.731C140.899 156.882 142.765 155.026 141.519 153.869C135.176 147.982 126.965 145.623 118.558 147.962C114.473 149.1 110.373 151.119 107.115 153.869C105.82 154.964 107.689 156.818 108.977 155.731Z" fill="#282828"/>
|
||||
<path d="M175.336 155.731C177.665 153.764 181.579 151.734 184.9 150.711C192.601 148.34 200.129 150.267 206.017 155.731C207.258 156.882 209.124 155.026 207.878 153.869C201.535 147.982 193.324 145.623 184.918 147.962C180.832 149.1 176.732 151.119 173.474 153.869C172.179 154.964 174.048 156.818 175.336 155.731Z" fill="#282828"/>
|
||||
<path d="M206.017 167.688C203.688 169.655 199.774 171.686 196.453 172.709C188.752 175.08 181.224 173.153 175.336 167.688C174.095 166.537 172.23 168.394 173.476 169.55C179.819 175.438 188.029 177.796 196.436 175.457C200.522 174.32 204.622 172.3 207.879 169.55C209.174 168.455 207.303 166.602 206.017 167.688Z" fill="#282828"/>
|
||||
<path d="M139.658 167.688C137.329 169.655 133.415 171.686 130.095 172.709C122.393 175.08 114.865 173.153 108.977 167.688C107.736 166.537 105.871 168.394 107.117 169.55C113.46 175.438 121.67 177.796 130.077 175.457C134.163 174.32 138.263 172.3 141.52 169.55C142.815 168.455 140.945 166.602 139.658 167.688Z" fill="#282828"/>
|
||||
<path d="M142.43 222.358C151.675 226.799 163.44 227.122 172.565 222.358C174.067 221.573 172.738 219.301 171.236 220.085C162.964 224.404 151.874 223.983 143.758 220.085C142.238 219.355 140.901 221.624 142.43 222.358Z" fill="#282828"/>
|
||||
<path d="M136.65 199.279C136.65 207.176 130.248 213.579 122.348 213.579C114.45 213.579 108.046 207.176 108.046 199.279C108.046 191.382 114.45 184.978 122.348 184.978C130.248 184.978 136.65 191.382 136.65 199.279Z" fill="#EAE6E1"/>
|
||||
<path d="M208.341 199.279C208.341 207.176 201.938 213.579 194.039 213.579C186.141 213.579 179.736 207.176 179.736 199.279C179.736 191.382 186.141 184.978 194.039 184.978C201.938 184.978 208.341 191.382 208.341 199.279Z" fill="#EAE6E1"/>
|
||||
<path d="M128.631 131.455H186.363V140.549C186.363 140.549 161.337 140.631 161.337 159.296V205.707H153.657V159.296C153.657 159.296 155.391 140.549 128.631 140.549V131.455Z" fill="#EAE6E1"/>
|
||||
<path d="M174.406 240.887C174.406 244.444 166.836 247.329 157.497 247.329C148.158 247.329 140.588 244.444 140.588 240.887C140.588 237.33 148.158 234.445 157.497 234.445C166.836 234.445 174.406 237.33 174.406 240.887Z" fill="#EAE6E1"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_12_57">
|
||||
<rect width="314.985" height="314.985" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"9052675658f473925018c8052baaa64ed96c6e81": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/启动页/背景",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/启动页弹窗/背景/背景 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/档案填写/年龄/背景/背景 拷贝 3",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/拍照弹窗/背景/背景 拷贝 2"
|
||||
],
|
||||
"d906086aa2916ab4fde0b2b25a33446f3976243d": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/启动页/顶部占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/启动页弹窗/屏幕占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/档案填写/屏幕占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/拍照弹窗/屏幕占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/正面/屏幕占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/左面/屏幕占位/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/右面/屏幕/图层 4 拷贝",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/屏幕/图层 4 拷贝"
|
||||
],
|
||||
"bcd45d8b8ff2cb8006d2388cc3bd5909d773b9f4": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/档案填写/年龄/背景/图层 1",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/拍照弹窗/背景/图层 1"
|
||||
],
|
||||
"0c2649580bbfba167f5fbd5b43f27d605321d8fc": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/正面/矩形 7"
|
||||
],
|
||||
"b466dcb1fc56beed23bc92bfdce1cd1b035dbda8": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/左面/矩形 7"
|
||||
],
|
||||
"fff7744d91a448031c3b7c6c557df0ac1581b422": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/右面/矩形 7"
|
||||
],
|
||||
"124fb200a6ffa0fbaf06eb498c396d1b52d39d53": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/背景/图层 1"
|
||||
],
|
||||
"e35dfbc1f9895e2cf234f1dc7822ebc4b793ddd8": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/产品推荐/产品/PSD剪贴组/图片"
|
||||
],
|
||||
"6c8bcb417b2470c0a22bf15f0cde485ad3aa69fa": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/产品推荐/产品/PSD剪贴组/ChatGPT Image 2026年9月17日 19_01_25",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/隐藏内容展开 / 报告页 · 备选产品图片 1/ChatGPT Image 2026年9月17日 19_01_25 · 显示副本"
|
||||
],
|
||||
"c968e752b1f186a40f89c5768a7dd79c5d30354f": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/产品推荐/产品/PSD剪贴组/图层 3",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/隐藏内容展开 / 报告页 · 备选产品图片 2/图层 3 · 显示副本"
|
||||
],
|
||||
"29fb992986523978a4e5207faae421fc3c886016": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/产品推荐/产品/PSD剪贴组/图层 4",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/隐藏内容展开 / 报告页 · 备选产品图片 3/图层 4 · 显示副本"
|
||||
],
|
||||
"7fb42c89250772f5ef469703761967d63311d318": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/具体描述/PSD剪贴组/图层 9"
|
||||
],
|
||||
"f219fd961a49c598f4ee3d9e0987d08b3294b349": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/具体描述/PSD剪贴组/图层 7",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/隐藏内容展开 / 报告页 · 备选检测图片/图层 7 · 显示副本"
|
||||
],
|
||||
"ea2aa13b5fa0e4664124dd2a632da227889e22ca": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/具体描述/PSD剪贴组/图层 11"
|
||||
],
|
||||
"d306158fd1fc092fbbda75778d95dd9fe5a38b84": [
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/报告页/具体描述/图层 10",
|
||||
"01 · PSD可编辑重建/01 · PSD可编辑重建/隐藏内容展开 / 报告页 · 图层 10 图片素材/图层 10 · 显示副本"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
+137
@@ -0,0 +1,137 @@
|
||||
# 巨子测肤 · 1'me 在线肌肤测试 — UI 设计规范
|
||||
|
||||
> 来源:Figma 文件《巨子测肤 · UI外发版 · PSD可编辑重建》
|
||||
> 提取日期:2026-09-21 · 文件 key `RTNcNqkBPg5Stcoi5d7FUP`
|
||||
|
||||
## 1. 基准与尺寸换算
|
||||
|
||||
设计稿以 **1080px 宽**(全屏 1080×2339)为基准,是微信小程序风格界面(带胶囊按钮)。
|
||||
|
||||
| 目标 | 换算 | 示例(62.3px 大标题) |
|
||||
|---|---|---|
|
||||
| 微信小程序 rpx | `rpx = px × 750 ÷ 1080 ≈ px × 0.694` | ≈ 43rpx |
|
||||
| iOS 逻辑像素 pt | `pt = px ÷ 2.88` | ≈ 21.6pt |
|
||||
| CSS px(375 基准) | `px = px ÷ 2.88` | ≈ 21.6px |
|
||||
|
||||
## 2. 色彩规范
|
||||
|
||||
### 品牌色
|
||||
| 色值 | 用途 |
|
||||
|---|---|
|
||||
| `#F5F078` 柠檬黄 | **品牌主色/CTA**。启动页「开始检测」按钮框、油性肤质插画强调 |
|
||||
| `#282828` 深炭灰 | **主文字色**(全稿使用最多,×143),同时用于插画描边 |
|
||||
|
||||
### 文字色阶(从深到浅)
|
||||
| 色值 | 用途 |
|
||||
|---|---|
|
||||
| `#000000` | 纯黑标题(护理建议标题、弹窗文案) |
|
||||
| `#282828` | 正文主色 |
|
||||
| `#333333` / `#2C2C2C` | 次级正文(隐私协议、下拉箭头) |
|
||||
| `#4A4A4A` / `#464646` | 护理建议条目正文、备注正文 |
|
||||
| `#757575` / `#707070` | 弱化说明(隐私勾选文案、产品副标题、免责小字) |
|
||||
| `#868686` | 报告页数据标签(综合评分、肌肤年龄、维度名) |
|
||||
| `#D30C0C` | 警示红(低分维度分数 5.1) |
|
||||
| `#FFFFFF` | 反白文字(深色/图片背景上、拍照页指示) |
|
||||
|
||||
### 背景与分隔
|
||||
| 色值 | 用途 |
|
||||
|---|---|
|
||||
| `#F5F5F5` | 浅灰背景(全屏 ×15 处) |
|
||||
| `#FFFFFF` | 卡片/弹窗底色 |
|
||||
| `#EAE6E1` 米灰 | 干性肤质插画底色 |
|
||||
| `#DBF6D6` 淡绿 | 中性/混合偏油肤质插画底色 |
|
||||
| `#D6D6D6` | 轮播标识-未选中圆点 |
|
||||
| 描边 `#E5E5E5` / `#EFEFEF` | 输入框/分隔线 |
|
||||
|
||||
> 注:全稿无圆角、无阴影定义 —— PSD 重建版的按钮均为矢量图形(见切图),开发时按钮圆角需按切图自行实现(主按钮接近胶囊/大圆角样式)。
|
||||
|
||||
## 3. 字体规范
|
||||
|
||||
全稿统一 **Noto Sans SC(思源黑体)**,无衬线。层级如下(px 为设计稿原始值,rpx 已按 ×0.694 换算):
|
||||
|
||||
| 层级 | 字号/行高(px) | 字重 | rpx | 用途示例 |
|
||||
|---|---|---|---|---|
|
||||
| Display | 83 / 146 | 500 | 58 | 报告页维度分数(7.2、5.1) |
|
||||
| H1 | 66~67 / 87~90 | 500 | 46 | 弹窗欢迎语、启动页 Slogan(白) |
|
||||
| H2 | 62 / 88~109 | 500/700 | 43 | 「您的肌肤状态」、拍照页步骤 1/3、产品推荐标题 |
|
||||
| H3 | 59 / 109 | 700 | 41 | 报告页「您的肌肤状态表现」 |
|
||||
| H4 | 41~42 / 73 | 400/500 | 29 | 表单标签「您的日常肤质/年龄/性别/地区」、按钮文字「开始检测」 |
|
||||
| H5 | 41 / 46 | 400 | 29 | 拍照指示短句(正脸居中/光线充足/取下眼镜) |
|
||||
| H6 | 37 / 59~66 | 500/700 | 26 | 肤质名称(干性肌肤…)、护理建议标题 |
|
||||
| Body | 33 / 50 | 400/500 | 23 | 弹窗正文、维度名(纹路/紧致) |
|
||||
| Body-S | 29 / 41~54 | 400/500 | 20 | 肤质描述文案、护理建议条目、隐私协议 |
|
||||
| Caption | 25 / 27~50 | 400/500 | 17 | 轮播轴标签(偏干/水油平衡)、报告页标签 |
|
||||
| Caption-S | 21 / 30~58 | 300/400/500 | 15 | 免责声明、产品小字(`*` 开头备注) |
|
||||
|
||||
小程序字重注意:Noto Sans SC 的 300/500/700 在小程序中可分别用 PingFang/思源的 Light/Medium/Bold 对应,或直接引入 woff 字体包。
|
||||
|
||||
## 4. 组件切图(assets/svg/)
|
||||
|
||||
| 文件 | 原组件 | 尺寸 | 说明 |
|
||||
|---|---|---|---|
|
||||
| `按钮-主按钮.svg` | 按钮 / 主按钮 | 523×113 | CTA 主按钮,柠檬黄 #F5F078 底 |
|
||||
| `拍照-快门.svg` | 拍照 / 快门 | 178×178 | 拍照页快门按钮 |
|
||||
| `图标-关闭.svg` | 图标 / 关闭 | 89×89 | 弹窗关闭 |
|
||||
| `图标-下拉与返回.svg` | 图标 / 下拉与返回 | 40×40 | 表单下拉箭头/返回 |
|
||||
| `图标-相册.svg` | 图标 / 相册 | 90×90 | 拍照页相册入口 |
|
||||
| `图标-重拍.svg` | 图标 / 重拍 | 90×90 | 重拍按钮 |
|
||||
| `品牌-1me.svg` | 品牌 / 1'me | 131×58 | 品牌 LOGO |
|
||||
| `肤质-面部插画.svg` | 肤质 / 面部插画 | 315×315 | 肤质选择页插画基础形 |
|
||||
|
||||
肤质插画 5 个配色变体(同一面部插画换色):
|
||||
| 肤质 | 底色/强调 | 对应文案 |
|
||||
|---|---|---|
|
||||
| 干性 | `#EAE6E1` 米灰 | 全脸干燥,容易紧绷、缺乏光泽 |
|
||||
| 混合偏干 | 米灰系 | 两颊偏干,T区油脂较少或偶尔出油 |
|
||||
| 中性 | `#DBF6D6` 淡绿 | 水油平衡,肤感舒适,无明显干燥出油 |
|
||||
| 油性 | `#F5F078` 柠檬黄 | 全脸易出油,容易泛油光、毛孔明显 |
|
||||
| 混合偏油 | 淡绿系 | T区易出油,两颊相对清爽或轻微干燥 |
|
||||
|
||||
## 5. 图片素材(assets/images/,共 15 张)
|
||||
|
||||
| 素材 | 尺寸 | 用途 |
|
||||
|---|---|---|
|
||||
| 启动页-背景 | 1414×2423 | 启动页全幅(三人合影+蓝天) |
|
||||
| 启动页-顶部装饰 | — | 状态栏区装饰 |
|
||||
| 档案填写-背景 | 1080×2339 | 档案页全幅背景 |
|
||||
| 正面/左面/右面-拍照示意 | 1082×2350 | 三个拍照引导页背景 |
|
||||
| 报告页-背景 | 4915×11457 | 报告页长图背景(注意超大,建议压缩) |
|
||||
| 产品图-1~4 | ~500×650 | 报告页产品推荐 |
|
||||
| 检测图-1~4 | ~300×360 | 报告页六维检测示意 |
|
||||
|
||||
## 6. 页面清单(design/ 下有整屏 PNG 预览)
|
||||
|
||||
| # | 页面 | Frame ID | 尺寸 |
|
||||
|---|---|---|---|
|
||||
| 01 | 启动页 | 2:2 | 1080×2339 |
|
||||
| 02 | 启动页弹窗(隐私授权) | 2:3 | 1080×2339 |
|
||||
| 03 | 档案填写(含肤质选择轮播) | 2:4 | 1080×2339 |
|
||||
| 04 | 拍照弹窗(引导) | 2:5 | 1080×2339 |
|
||||
| 05-07 | 正面 / 左面 / 右面(相机取景) | 2:6/2:7/2:8 | 1080×2339 |
|
||||
| 08 | 报告页(长页) | 2:9 | 1080×3548 |
|
||||
| — | 肤质选择(档案页子模块,用户直链节点) | 4:48 | 713×873 |
|
||||
|
||||
另有 15 个「隐藏内容展开」补充画板(肤质变体展开、报告页备选文案/备选图等),原始数据在 `full.json` 可随时按需导出。
|
||||
|
||||
## 7. 目录结构
|
||||
|
||||
```
|
||||
design/
|
||||
├── 设计规范.md ← 本文档
|
||||
├── 01~09-*.png # 9 张整屏预览(1080 宽)
|
||||
├── full.json # Figma 完整节点数据(含矢量路径)
|
||||
├── file-tree.json # 文件结构树
|
||||
├── node-4-48.json # 肤质选择节点详细数据
|
||||
├── imgusage.json # 图片引用关系
|
||||
└── assets/
|
||||
├── svg/ # 8 个组件矢量切图
|
||||
└── images/ # 15 张位图素材(中文名)
|
||||
```
|
||||
|
||||
## 8. 还原建议
|
||||
|
||||
1. **流程**:启动页(授权弹窗)→ 档案填写(年龄/性别/地区/肤质轮播)→ 拍照弹窗 → 正面/左/右三连拍 → 生成报告。
|
||||
2. 肤质选择是**轮播交互**(轮播标识×4 圆点 + 偏干↔偏油轴标签),插画随选项换色。
|
||||
3. 报告页为长滚动页:总分(82 分/100)→ 六维度 → 三维度拆解 → 具体描述(配检测图)→ 护理建议 → 产品推荐 → 免责声明。
|
||||
4. 位图素材均为 PNG(原始命名 .jpg 已改),报告页背景 4915×11457 建议压缩后再入包。
|
||||
5. 颜色、字号直接抄本规范第 2、3 节;组件直接用 assets/svg 切图。
|
||||
Reference in New Issue
Block a user