[UE] 如何在手机上快速创建设计原型图

偶尔我们思绪迸发的时候，并不是坐在宽敞的办公桌前或舒服的小书房里，也许你正在地铁上拿着手机发呆，也许你正在咖啡厅里啄着拿铁小资。

但有没有那样一刻的尴尬，当你脑子里闪现一个灵感设计时，却发现粗大的手指头无法再手机修长润滑的屏幕勾勒出你即便是再简约的雄才远略？

现在我要设计一款解决这个问题的手机APP。暂不命名，反正也还不知道什么时候能有空把这个想法付诸实施。

1 功能模块

① 几何绘制

  ※ 直线

  ※ 矩形（圆角可调）

  ※ 椭圆

  ※ 弧

  ※ 点

② 光栅绘制

  ※ 线条粗细

  ※ 线条颜色

  ※ 填充颜色

  ※ 线型

  ※ 线条拐角

  ※ 线端形状

③ 变换操作

  ※ 水平|垂直翻转

  ※ 象限旋转

④ 视图

  ※ 视图画布可缩放

  ※ 视图画布可移动

  ※ 视图画布可旋转

2 交互问题

对于一个设计类的工具APP，操作的傻瓜化并不是它考虑的重点，如何顺利地完成我们想要的设计图才是它需要必达的使命。

所以我们把这个APP的主要交互操作定义为 双手操作。左手主要负责功能键点取，右手主要负责功能的调节操作。

双手操作虽然损失了单手的便捷，但却能实施一些组合操作，有效地提高了操作效率，从另一方面看它简化了工具类APP交互的复杂度。

2.1 图元的选取

2.2 图元在变换时的指示

当用手指去移动或者旋转一个图元时，常常因为手指太大而遮挡图元，只能等你移开手指才能知道图元到底被你笨重粗大的手指移动到哪里去了。这样的交互操作都不精确，对于某些场景来说，我们可以使用吸附功能来准确定位图元，但有时候我们想要微操时该怎么办呢？

使用轮盘来精确移动图元

进入图元的精确移动交互后，画布右边和底部会出现两个轮盘，右边的竖直轮盘用于纵向（相对于屏幕）的移动微调，底部的水平轮盘用于横向（相对于屏幕）的移动微调。手指单指移动图元依然有效，起到粗调的作用。双指移动、双指旋转要禁止。

图片发自App

使用轮盘来旋转图元

进入图元的旋转交互后，图元画布右手操作的窄边（手机竖屏时为屏幕底部，手机横屏时为屏幕右侧）会出现一个环尺用于调整图元的旋转。图元中心会有一条连线连接到环尺上，用来更明显的指示旋转的角度偏差。手指双指旋转图元依然有效，可以大幅度旋转图元。单双指移动和双指缩放要禁止。

图片发自App

使用轮盘来缩放图元

进入图元的精确缩放交互后，，画布右边和底部会出现两个轮盘，右边的竖直轮盘用于纵向（相对于屏幕）的缩放微调，底部的水平轮盘用于横向（相对于屏幕）的缩放微调。手指双指缩放图元依然有效，起到粗调的作用。双指移动和双指旋转要禁止。

图片发自App

[有进一步的想法再写]