
3.2 界面设计
3.2.1 用户界面原型

 登录界面原型
1. 登录主界面
   - 顶部：小米便签Logo和应用名称
   - 中部：账号输入框、密码输入框/验证码输入框
   - 底部：登录按钮、忘记密码链接、注册账号链接
   - 切换登录方式选项卡（账号密码/短信验证码/第三方登录）

2. 验证码获取界面
   - 手机号输入框
   - 获取验证码按钮（带60秒倒计时）
   - 图形验证码（防刷机制）


主界面原型
1. 笔记列表视图
   - 顶部：搜索框、新建笔记按钮
   - 中部：按时间/分类排序的笔记列表
   - 底部：分类标签栏、个人中心入口

2. 笔记编辑视图
   - 顶部：返回按钮、标题编辑区、保存按钮
   - 中部：富文本编辑区域
   - 底部：格式工具栏（字体、颜色、插入等）

3.2.2 UML类图模型


class User {
  +String userId
  +String username
  +String password
  +String phone
  +List<Device> devices
  +login()
  +logout()
}

class Note {
  +String noteId
  +String title
  +String content
  +Date createTime
  +Date modifyTime
  +User creator
  +save()
  +share()
}

class LoginUI {
  +TextField usernameField
  +PasswordField passwordField
  +Button loginButton
  +Button forgetPwdButton
  +Button registerButton
  +show()
  +hide()
  +validateInput()
}

class EditorUI {
  +RichTextEditor editor
  +Toolbar toolbar
  +StatusBar statusBar
  +saveNote()
  +formatText()
  +insertMedia()
}

class AuthService {
  +authenticate()
  +getUserInfo()
  +getAccessToken()
  +refreshToken()
}

User "1" -- "*" Note
LoginUI ..> AuthService : depends on
EditorUI ..> Note : manipulates


 3.2.3 界面跳转顺序图模型


actor User
participant "LoginUI" as login
participant "AuthService" as auth
participant "MainUI" as main
participant "EditorUI" as editor

User -> login : 输入账号密码
login -> auth : 发送认证请求
auth --> login : 返回认证结果
alt 认证成功
    login -> main : 跳转主界面
    User -> main : 点击新建笔记
    main -> editor : 打开编辑界面
    User -> editor : 编辑笔记内容
    editor -> Note : 自动保存
else 认证失败
    login --> User : 显示错误提示
end

 3.2.4 设计规范

1. 视觉风格
   - 遵循MIUI设计语言
   - 主色调：小米橙(#FF6700)
   - 辅助色：科技蓝(#1A73E8)
   - 字体：MIUI系统字体

2. 布局原则
   - 重要操作置于拇指热区
   - 编辑区域占屏幕60%以上
   - 工具栏常驻底部

3. 交互动效
   - 登录按钮按压效果
   - 笔记卡片滑动删除动画
   - 编辑界面平滑过渡

4. 无障碍设计
   - 文字对比度≥4.5:1
   - 支持系统放大功能
   - 关键操作语音反馈

5. 多设备适配
   - 手机：单栏布局
   - 平板：主从视图
   - 折叠屏：自适应布局切换

3.2.5 状态管理

1. 登录状态
   - 未登录：限制部分功能
   - 已登录：全功能可用
   - 登录过期：自动刷新token

2. 编辑状态
   - 新建状态：空白编辑器
   - 修改状态：加载现有内容
   - 只读状态：分享查看模式

3. 同步状态
   - 同步中：状态栏提示
   - 冲突状态：提示解决
   - 失败状态：重试机制