Vouchatlas

一本为数字游民打造的众包旅行安全地图集。

中性基底搭配数据驱动的色彩高亮。

humanist-sans

• display24px · 500
• body16px · 400
• caption12px · 400

基于一致的 4px 基础系统。

使用细微的 1px 边框和柔和阴影来界定边界。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 1px 2px -1px

左右分割布局，左侧为主导的地图可视化，右侧为数据边栏。

交互元素上平滑的背景色与边框色过渡。

按钮和交互式地图元素上微妙的色彩过渡。 · 触发边栏中的数据更新。

• button 极简的胶囊形按钮，带有细微边框和悬停过渡效果。
• card 干净的卡片，带有柔和阴影和紧凑的内边距。
• chip 用于显示数据状态的小型标签式元素。
• input 标准圆角文本输入框。
• hero 以交互式地图可视化为核心的全宽区块。

• 语气 客观且信息丰富。
• 标题风格 直接、以问题为导向的标题。
• 按钮文案 极简且功能性强。

• 避免使用装饰性字体——截图显示的是干净、易读的无衬线字体排版。
• 避免添加厚重的阴影——截图显示的是细微、柔和的 box-shadow。
• 避免使用未经验证的亮色强调色——截图显示的是用于数据的功能性红色和橙色。
• 避免使用复杂渐变——截图显示的是纯色和简单的线性色阶。
• 避免界面拥挤——截图显示的是充足的留白和聚焦的布局。
• 避免过度使用圆角——截图显示的大多是直角或轻微圆角的边缘。
• 避免: 情感化语言
• 避免: 营销式夸张
• 避免: 复杂术语