KingDraw 移动端界面与操作方式
移动端设计理念
移动端 KingDraw 的界面设计围绕一个核心假设:用户用一只手画结构式。因此与 PC 端相比,移动端做了大量针对触控的简化——按钮放大、手势优先、高频功能前置。
移动端主要功能区
移动端界面大致分为以下几个区域:
| 区域 | 位置 | 主要功能 |
|---|---|---|
| 顶部工具栏 | 屏幕上方 | 撤销 / 重做 / 保存 / 分享 / 登录 |
| 手势绘制入口 | 右上或右下 | 点击进入手势绘制模式 |
| 底部工具栏 | 屏幕下方 | 按键切换、长按展开更多工具 |
| 画板区 | 中央 | 主要绘制区 |
| 更多工具 | 弹窗面板 | AI 识别、3D 模型、属性分析等 |
长按 = 展开更多
移动端工具栏的一个关键交互模式:长按边角有三角标识的功能键,会弹出更多选项。
例如:
- 长按【箭头工具】→ 显示所有箭头样式
- 长按【流程图工具】→ 显示空心模型、实心模型、角度模拟图、3D 图等
- 长按【手势绘制工具】→ 显示手势对照表,十几种常用手势一览
这个设计避免了在小屏幕上堆叠过多按钮,高频工具直接点,低频工具长按调。
放大镜功能
移动端独有的体验优化:当你的手指遮挡住了正在操作的元素时,KingDraw 会自动弹出放大镜,让你看清楚当前操作点。这在微调键角度、在拥挤位置添加元素时特别有用。
工具栏自动隐藏
绘制过程中工具栏会自动淡出,只保留最必要的按钮,让画板区域尽可能占满屏幕。点击屏幕边缘或停顿时工具栏会重新出现。
移动端 vs PC 端的操作差异
| 操作 | PC 端 | 移动端 |
|---|---|---|
| 画一个苯环 | 点击工具栏苯环图标或按 a | 手势画一个圆 = 苯环 |
| 在键上添加键 | 点击键的端点 | 手指点击键端点 |
| 调整键角 | 框选后拖动端点 | 手指直接拖动 |
| 打开高级化学键 | 右键点击双键 | 长按底部工具栏化学键图标 |
| AI 识别图片 | 不支持 | 从相册选择或拍一张 |
移动端的操作逻辑整体上是"尽量用一根手指、一步操作",遇到复杂需求再进入完整工具栏模式。