Thankyoumachine Zendesk

一个为 SaaS 平台设计的简洁、专业的帮助台界面

采用黑与白的高对比度配色，并搭配一个鲜明的黄绿色强调色用于主要操作。

humanist-sans

• display68px · 600
• display-small42px · 600
• display-small32px · 500
• body16px · 400
• caption14px · 400

主标题使用粗体人文主义无衬线字体，行高紧凑，字间距为负值。 · 正文保持舒适的 1.5 倍行高以确保可读性。 · 按钮使用略重的字重 (500-600) 以示强调。 · 页脚文字使用较小字号 (14px) 以容纳密集信息。

采用一致的 8px 网格系统，各部分之间留有充裕的留白。

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.08) 0px 8px 24px 0px

标准 12 列网格，拥有宽裕的边距，并清晰分隔页头、英雄区和页脚部分。

交互元素采用平滑的背景位置过渡。 · 悬停状态采用线性微交互。 · 主要布局变化采用 cubic-bezier 过渡。

交互元素上的细微背景色过渡。 · 通过光标指针提供即时视觉反馈。

• button 药丸形状的主要按钮，采用高对比度的强调色背景；次要按钮采用细微的轮廓样式。
• card 在此视图中未明确展示，但英雄区图片使用了圆角容器。
• chip 在此视图中不存在。
• input 在此视图中不存在。
• hero 分屏布局，左侧为大标题，右侧为圆角图片容器，两者之间由充裕的留白分隔。

• 语气 乐于助人、专业且直接，即使在传达错误信息时也是如此。
• 标题风格 大号、粗体且略带口语化（例如“哎呀，此帮助中心已不存在”）以柔化负面信息。
• 按钮文案 清晰、以行动为导向的按钮（例如“阅读指南”、“免费试用”），采用高对比度样式。

• 不要为主内容区域使用深色背景——截图显示的是干净的白色背景。
• 不要为标题使用衬线字体——截图中所有文字均使用人文主义无衬线字体。
• 不要为正文使用低对比度颜色——截图采用高对比度的黑字白底。
• 不要使用尖锐的矩形按钮——截图使用的是带大圆角的药丸形状按钮。
• 不要在英雄区堆砌过多元素——截图显示的是带有充裕留白的简洁分屏布局。
• 不要将强调色用于文字或背景——截图将其限制用于高对比度按钮。
• 避免: 避免在面向用户的文案中使用过于专业的术语。
• 避免: 避免使用没有清晰层级的大段文字。
• 避免: 避免将强调色用于主要行动号召以外的任何用途。