小红书 移动视觉规范

摘要： 核心理念与设计原则小红书的视觉设计始终围绕其独特的社区文化和用户行为展开，核心理念：真实、美好、多元真实: 这是小红书的基石，视觉设计上体现在鼓励用户分享未经过度修饰的真实生活照片...

核心理念与设计原则

小红书的视觉设计始终围绕其独特的社区文化和用户行为展开。

核心理念：真实、美好、多元

• 真实: 这是小红书的基石，视觉设计上体现在鼓励用户分享未经过度修饰的真实生活照片、视频和体验，界面设计也倾向于干净、不干扰，让内容本身成为主角。
• 美好: “种草”的核心是激发向往，视觉上通过高饱和度、清新明亮的色彩，精致、舒适的排版，以及充满生活气息的图片和插画，营造出一种“美好生活触手可及”的氛围。
• 多元: 小红书的内容包罗万象，从美妆、穿搭到旅行、美食、家居，视觉规范需要具备高度的包容性，能够适应各种不同风格的内容，同时保持品牌整体的统一感。

设计原则

• 内容为王: 所有设计元素都为内容服务，界面元素简洁、克制，最大限度地减少对用户浏览内容的干扰。
• 清晰直观: 导航、操作和信息层级一目了然，让用户能够轻松、高效地发现、浏览和发布内容。
• 情感化设计: 通过插画、动效、文案和温暖的色彩，与用户建立情感连接，让使用小红书成为一种愉悦的体验。
• 高效探索: “瀑布流”布局是其标志性设计，它高效地展示了海量、碎片化的内容，符合用户“逛一逛”、“随便看看”的浏览习惯。

核心视觉元素拆解

色彩系统

小红书的色彩系统非常鲜明且富有层次感,是其品牌识别度最高的部分。

• 品牌主色:

  • 小红书红: #FE2C55，这是最核心、最具辨识度的颜色，它被广泛用于：
    • 图标: 底部导航栏的“关注”、“发布”等核心图标。
    • 按钮: 主要操作按钮，如“发布”、“关注”、“立即购买”等。
    • 高亮: 文字、标签、价格等需要突出显示的信息。
    • 强调: 在卡片、弹窗等界面中作为重要的视觉点缀。

• 辅助色:

  • 小红书橙: #FF6B35，通常用于与主色搭配，营造活力感和温暖感，常用于促销、限时活动等场景。
  • 品牌绿: #52C41A，多用于“已关注”、“成功”、“通过”等积极状态的提示。
  • 品牌蓝: #1890FF，常用于链接、次要按钮或需要传达科技感、信任感的场景。

• 功能色:

  
  （图片来源网络，侵删）
  • 成功色: #52C41A (绿)
  • 警告色: #FAAD14 (黄)
  • 错误色: #F5222D (红)
  • 信息色: #1890FF (蓝)

• 中性色:

  • 文字色:
    • #000000 (主要文字)
    • #333333 (次要文字)
    • #666666 (辅助文字)
    • #999999 (占位/说明文字)
  • 背景色:
    • #FFFFFF (主背景)
    • #F7F8FA (卡片/列表背景，轻微灰色，增加层次感)
    • #F2F3F5 (分割线/浅色背景)

色彩使用原则:

• 高频使用: 品牌红是绝对的视觉焦点，但需控制使用比例，避免视觉疲劳。
• 对比鲜明: 确保文字与背景有足够的对比度，保证可读性。
• 营造氛围: 通过色彩组合传递不同的情绪，如红色+橙色营造热情，白色+灰色营造简洁。

字体系统

小红书非常注重阅读体验,其字体系统清晰、易读且富有现代感。

• 默认字体: 在iOS和Android系统上，小红书均使用系统默认的无衬线字体，以保证原生体验的统一性。

  
  （图片来源网络，侵删）
  • iOS: San Francisco (SF Pro)
  • Android: Roboto / Noto Sans SC

• 中英文字体规范:

  • 中文: 优先使用思源黑体或苹方等现代感强、字重清晰的无衬线字体。
  • 英文: 优先使用 San Francisco, Helvetica, Roboto 等。

• 字号与字重: | 用途 | 字号 | 字重 | 示例 | | :--- | :--- | :--- | :--- | | | 24-28 | Medium/Semibold | 页面大标题 | | | 20-22 | Medium | 卡片标题、笔记标题 | | | 15-17 | Regular | 笔记内容、评论 | | 辅助说明 | 12-13 | Regular | 用户名、时间、标签 | | 小字/标签 | 10-11 | Regular | 图标旁文字、角落提示 |

• 行高与字间距:

  • 行高: 通常设置为字号的 1.4-1.6 倍，保证大段文字的阅读舒适度。
  • 字间距: 在标题或需要强调的场景中，可以适当增加字间距，提升呼吸感和设计感。

图标系统

小红书的图标设计风格统一,简洁、现代、易于识别。

• 设计风格:

  • 线性为主: 大部分图标采用线性风格，线条粗细均匀，视觉轻盈。
  • 面性为辅: 核心操作图标（如发布按钮）和部分功能图标会使用面性设计，以增强视觉权重和识别度。
  • 圆角处理: 图标普遍带有适度的圆角，与品牌整体柔和、友好的气质保持一致。

• 尺寸规范:

  • 导航图标: 通常为 24x24pt。
  • 列表/功能图标: 通常为 20x20pt 或 22x22pt。
  • 小图标: 如“已赞”、“收藏”等，通常为 18x18pt 或 20x20pt。

• 使用原则:

  • 表意清晰: 图标所代表的功能应一目了然，避免歧义。
  • 风格统一: 在同一界面中，应保持图标风格（线性/面性）、粗细、圆角的一致性。

排版与布局

小红书的排版是引导用户阅读和探索的关键。

• 信息层级:

  • 通过 字号、字重、颜色 的变化来建立清晰的信息层级，标题 > 正文 > 辅助信息。
  • 留白是建立层级的重要手段,不同元素之间保持足够的间距，让界面“透气”。

• 栅格系统:

  • 采用 12列栅格系统 来规范布局，确保所有元素对齐，界面规整、有序，这在进行响应式设计（适配不同屏幕尺寸）时尤为重要。

• 核心布局模式:

  • 瀑布流: 这是小红书的灵魂，它以卡片的形式，灵活地展示不同尺寸的图片，最大化屏幕利用率，激发用户的探索欲。
  • 列表布局: 用于信息流、搜索结果等需要快速浏览大量文本内容的场景。
  • 卡片式布局: 用于笔记详情页、个人主页等，将标题、图片、作者信息、互动按钮等内容模块化组织，结构清晰。

• 间距规范:

  • 使用 8dp 作为基础单位来定义间距（如 8px, 16px, 24px, 32px），这有助于保持整个界面的节奏感和一致性。

图片与视频

是小红书的生命线,对图片和视频的呈现有严格要求。

• 封面图:

  • 高质量: 要求图片清晰、构图美观、色彩明快。
  • 吸引力: 封面是点击率的决定性因素，通常会选择笔记中最精彩或最具代表性的图片。
  • 安全区域: 需预留顶部和底部区域，避免被系统UI（如时间、信号、导航栏）遮挡关键信息。

• 内容图/视频:

  • 风格统一: 鼓励保持个人账号的图片风格一致性（如滤镜、色调），但整体社区风格偏向于明亮、清新、有质感。
  • 比例适配: 支持多种图片比例（1:1, 3:4, 16:9等），瀑布流会智能适配。

• 品牌插画:

  • 小红书会使用一系列可爱的、风格化的插画用于空状态、引导页、活动宣传等场景。
  • 插画风格: 扁平化、线条流畅、色彩明快、充满生活气息和故事感，与品牌调性高度统一。

品牌精神与体验延伸

小红书的视觉规范最终服务于其品牌精神：“标记我的生活” (Mark My Life)。

• 社区感: 通过用户头像、昵称、评论等元素，营造出一种朋友分享的亲切氛围。
• 沉浸感: 简洁的界面设计让用户能专注于内容本身，无论是浏览“瀑布流”还是阅读一篇深度笔记。
• 激励感: “点赞”、“收藏”、“关注”等互动反馈即时且正向，鼓励用户参与和创造。

小红书的移动端视觉规范是一个以用户为中心、以内容为核心的完整体系，它通过：

• 高辨识度的色彩 建立品牌认知。
• 清晰易读的字体 保证信息传达效率。
• 简洁统一的图标 降低用户学习成本。
• 灵活有序的布局 优化内容探索体验。
• 高品质的视觉呈现 承载“美好生活”的品牌愿景。

所有这些元素共同作用,创造出一个既美观又实用，既能激发用户灵感又能满足其信息需求的独特产品体验，对于设计师而言，理解其背后的“种草”文化和社区生态，是准确运用这套视觉规范的关键。