biji/doc/mobile_prototype.md

移动端高保真原型

1. 设计原则

• 简洁至上: 界面元素保持简洁，避免不必要的装饰，让用户专注于内容。
• 移动优先: 所有设计首先考虑在小屏幕上的呈现效果和操作体验。
• 色彩协调: 采用柔和且具有科技感的色彩方案，并提供完整的暗黑模式支持。
• 交互流畅: 通过精细的动效和即时反馈，提升用户操作的流畅感和满足感。

2. 色彩与字体

• 主色调: #4A90E2 (科技蓝)
• 辅助色: #F5F7FA (背景灰), #FFFFFF (白色), #FF4D4F (危险红), #52C41A (成功绿)
• 字体: Inter (无衬线字体)

3. 原型设计

页面一：主页 (笔记列表)

graph TD
    subgraph 手机屏幕
        direction TB
        subgraph 顶部导航栏
            A[笔记]
        end
        subgraph 内容区域
            B[搜索框]
            C[笔记卡片1]
            D[笔记卡片2]
            E[...]
        end
        subgraph 悬浮操作按钮
            F[+]
        end
        subgraph 底部导航栏
            G[笔记] -- active --> G
            H[搜索]
            I[我的]
        end
    end

    style A fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
    style F fill:#52C41A,stroke:#333,stroke-width:2px,color:#fff,border-radius:50%
    style G fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff

• 描述:
  • 顶部: 显示当前页面标题“笔记”。
  • 内容:
    • 一个固定的搜索框，方便用户快速查找笔记。
    • 笔记以卡片形式垂直排列，每张卡片显示标题、摘要和所属分类。
    • 支持下拉刷新和上拉加载更多。
  • 悬浮按钮 (FAB): 右下角的“+”按钮，用于快速创建新笔记。
  • 底部导航:
    • 笔记: 当前激活的Tab。
    • 搜索: 跳转到专门的搜索页面。
    • 我的: 跳转到用户中心页面。

页面二：笔记详情/编辑页

graph TD
    subgraph 手机屏幕
        direction TB
        subgraph 顶部导航栏
            J[返回]
            K[笔记标题]
            L[保存]
            M[...]
        end
        subgraph 内容区域
            N[Markdown渲染视图 / Vditor编辑器]
        end
    end

• 描述:
  • 顶部:
    • 左侧为“返回”按钮。
    • 中间显示笔记标题。
    • 右侧在查看模式下显示“编辑”和“更多”操作（如删除、移动）；在编辑模式下显示“保存”。
  • 内容:
    • 查看模式下，渲染Markdown内容。
    • 编辑模式下，加载Vditor编辑器，并将常用编辑工具栏固定在键盘上方。

页面三：“我的”页面

graph TD
    subgraph 手机屏幕
        direction TB
        subgraph 用户信息
            O[头像]
            P[用户名]
        end
        subgraph 菜单列表
            Q[笔记分类]
            R[回收站]
            S[系统管理]
            T[修改密码]
            U[退出登录]
        end
        subgraph 底部导航栏
            V[笔记]
            W[搜索]
            X[我的] -- active --> X
        end
    end

• 描述:
  • 顶部: 显示用户头像和用户名。
  • 菜单:
    • 笔记分类: 点击后以下钻（Drilldown）或弹窗形式展示分类树，方便用户按分类筛选笔记。
    • 回收站: 跳转到回收站页面。
    • 系统管理: 仅管理员可见，用于管理注册设置。
    • 修改密码/退出登录: 用户账户操作。

4. 交互动画

• 页面切换: 使用平滑的左右滑动效果。
• FAB点击: 按钮轻微放大并伴有涟漪效果。
• 加载: 使用骨架屏（Skeleton Screen）作为内容区域的占位符，提升加载体验。

---

这份高保真原型以Markdown和Mermaid图的形式呈现，旨在清晰地传达移动端的设计思路。