走呀 - UI 设计规范

统一的设计语言，打造一致的用户体验

1. 颜色系统

设计原则

黑白简约风格，以无彩色为核心主题色。功能色仅用于状态提示。

1.1 主色 - 黑色系

主色
$tn-main-color
#000000
主色浅
$tn-main-color-light
#333333
主色深
$tn-main-color-dark
#000000
强调色
$tn-auxiliary-primary
#000000

1.2 灰色色阶

Gray-1
最浅灰
#FFFFFF
Gray-2
背景灰
#FAFAFA
Gray-3
浅灰背景
#F5F5F5
Gray-4
边框灰
#F0F0F0
Gray-5
分割线
#D9D9D9
Gray-6
禁用文字
#BFBFBF
Gray-7
辅助文字
#8C8C8C
Gray-8
次要文字
#595959
Gray-9
深灰文字
#434343
Gray-10
主要文字
#262626
Gray-11
深色文字
#1F1F1F
Gray-12
最深灰
#141414

1.3 背景色

页面背景
$tn-bg-color
#FFFFFF
灰色背景
$tn-bg-gray-color
#F5F5F5
深灰背景
$tn-bg-dark-color
#E8E8E8
间距背景
$tn-space-color
#FAFAFA

1.4 文字色

主要文字
$tn-font-color
#1A1A1A
次要文字
$tn-font-color-secondary
#4A4A4A
内容文字
$tn-content-color
#8C8C8C
辅助文字
$tn-font-sub-color
#BFBFBF
占位符
$tn-font-holder-color
#D9D9D9

1.5 功能色

错误
$tn-color-red
#FF4D4F
成功
$tn-color-green
#52C41A
警告
$tn-color-orange
#FAAD14
信息
$tn-color-blue
#333333

1.6 边框与阴影

边框色
$tn-border-solid-color
rgba(0,0,0,0.08)
边框实色
$tn-border-solids-color
#E8E8E8
轻阴影
$tn-shadow-color
rgba(0,0,0,0.06)
重阴影
$tn-box-shadow-color
rgba(0,0,0,0.12)

2. 图标系统

图标使用规范

项目使用两套图标系统：

  • SVG 图标：36 个自定义 SVG 文件，用于地图、导航等特定场景，尺寸 28×28，使用 currentColor 支持颜色控制
  • 图标字体：TuniaoUI 的 iconfont，约 420 个图标，通过 CSS class 使用

2.1 SVG 图标库 (static/icons/) - 共 36 个

home
search
location
heart
star
chat
user
users
bookmark
settings
share
add
delete
check
close
arrow-down
arrow-up
arrow-right
arrow-left
more
bell
clock
calendar
globe
plane
car
code
music
image
video
cloud
shield
document
phone
world
bag
route
compass
checkbox
checkbox-fill
circle
target
game
grid
hotel
restaurant
ticket
map
bookmark-fill
camera
star-fill
poi-scenic
poi-food
poi-stay
poi-favorite
add-route

2.2 TuniaoUI 图标字体 (部分示例)

home
search
position
like
star
chat
people
setting
phone
camera
image
video
notification
wechat
apple
android
share
forward
back
more
图标使用示例

SVG 图标：

<image src="/static/icons/home.svg" width="28" height="28"></image>

图标字体：

<text class="tn-icon tn-icon-home"></text>

颜色控制：SVG图标使用 fill="currentColor" 继承父元素颜色

3. 间距系统

3.1 基础间距

xxs
4px / 8rpx
xs
8px / 16rpx
sm
12px / 24rpx
md
16px / 32rpx
lg
24px / 48rpx
xl
32px / 64rpx
xxl
48px / 96rpx

3.2 组件间距

表单元素高度
70rpx ($tn-form-item-height)
卡片内边距
20-30px
列表项间距
10-15px

4. 圆角系统

0
4px
8px
12px
16px
20px
50%

3.3 圆角使用场景

圆角规范
  • 0px：无圆角，用于紧凑型元素
  • 4px：小圆角，用于按钮、输入框
  • 8px：中圆角，用于卡片、弹窗
  • 12-16px：大圆角，用于大卡片、面板
  • 50%：圆形，用于头像、徽标

5. 阴影系统

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5

5.2 阴影变量

轻阴影
$tn-shadow-color: rgba(0, 0, 0, 0.06)
重阴影
$tn-box-shadow-color: rgba(0, 0, 0, 0.12)

6. 字体规范

6.1 字体栈

推荐字体

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

微信小程序会自动使用系统字体，无需额外加载。

6.2 字体大小

xs - 12px
辅助文字、标签
sm - 14px
正文、按钮
md - 16px
标题、强调文字
lg - 18px
大标题
xl - 24px
超大标题、数字
xxl - 32px
特大标题

6.3 字体颜色

主要文字
$tn-font-color: #1A1A1A
次要文字
$tn-font-color-secondary: #4A4A4A
内容文字
$tn-content-color: #8C8C8C
辅助文字
$tn-font-sub-color: #BFBFBF

7. 组件示例

7.1 按钮

7.2 卡片

卡片标题

这是卡片内容区域，使用白色背景和轻微阴影。

7.3 输入框

7.4 标签

默认 成功 警告 错误

7.5 列表项

列表标题
列表描述信息
另一个列表项
更多描述信息

7.6 头像

A
B
C

8. 使用指南

8.1 颜色使用

颜色规范
  • 主色使用中性灰色系，营造简约专业风格
  • 页面背景使用白色或浅灰色
  • 文字颜色使用深灰色，确保可读性
  • 功能色仅用于状态提示（错误、成功、警告、信息）
  • 避免大面积使用高饱和度颜色

8.2 图标使用

图标规范
  • SVG 图标保持 28×28 尺寸
  • 使用 currentColor 继承父元素颜色
  • 图标字体通过 class 控制：tn-icon tn-icon-xxx
  • 避免混用两套图标系统

8.3 间距使用

间距规范
  • 使用 8 的倍数作为基础间距单位
  • 保持页面边距一致性（通常 16-32px）
  • 组件内部间距使用较小值（8-16px）
  • 组件之间间距使用较大值（16-32px）

9. 资源目录结构

静态资源
mini-program/
├── static/
│   ├── icons/           # 36 个 SVG 图标
│   │   ├── add-route.svg      # 添加路线
│   │   ├── bag.svg            # 包/购物袋
│   │   ├── beach.svg          # 海滩
│   │   ├── bell.svg           # 铃铛/通知
│   │   ├── bookmark.svg       # 书签/收藏
│   │   ├── calendar.svg       # 日历
│   │   ├── camera.svg         # 相机/拍照
│   │   ├── car.svg            # 汽车
│   │   ├── chat.svg           # 聊天
│   │   ├── checkbox.svg       # 复选框(未选)
│   │   ├── checkbox-fill.svg  # 复选框(已选)
│   │   ├── circle.svg         # 圆形
│   │   ├── compass.svg        # 指南针
│   │   ├── delete.svg         # 删除
│   │   ├── game.svg           # 游戏
│   │   ├── grid.svg           # 宫格/网格
│   │   ├── heart.svg          # 心形/点赞
│   │   ├── home.svg           # 首页
│   │   ├── hotel.svg          # 酒店
│   │   ├── location.svg       # 定位
│   │   ├── map.svg            # 地图
│   │   ├── mountain.svg       # 山
│   │   ├── poi-favorite.svg   # POI 收藏
│   │   ├── poi-food.svg       # POI 美食
│   │   ├── poi-scenic.svg     # POI 景点
│   │   ├── poi-stay.svg       # POI 住宿
│   │   ├── restaurant.svg     # 餐厅
│   │   ├── route.svg          # 路线
│   │   ├── search.svg         # 搜索
│   │   ├── settings.svg       # 设置
│   │   ├── share.svg          # 分享
│   │   ├── star.svg           # 星标(未选)
│   │   ├── star-fill.svg      # 星标(已选)
│   │   ├── ticket.svg         # 票/门票
│   │   ├── user.svg           # 用户/单人
│   │   └── users.svg          # 用户/多人
│   │
│   ├── markers/
│   │   └── ordered/     # 20 个 SVG 地图标记
│   │       ├── 1.svg ~ 20.svg  # 黑底白字编号标记(64x64)
│   │
│   ├── logo.png         # 应用 Logo (4KB)
│   └── author.jpg       # 作者头像 (34KB)
│
├── tuniao-ui/
│   ├── iconfont.css     # 图标字体 (~420 图标)
│   ├── theme.scss       # 主题变量
│   └── components/      # 84 个 UI 组件
└── libs/
    ├── api/             # API 接口
    ├── components/      # 自定义组件
    └── ...              # 其他工具

资源统计：
• SVG 图标 (icons/): 36 个
• SVG 地图标记 (markers/): 20 个
• PNG/JPG 图片: 2 个
• 图标字体 (iconfont): ~420 个
• 总计: ~478 个图标资源