【提案】一种在普通功能按钮上提供“专业操作”入口的交互模式

[Gaubee]

通常情况下，我们需要最直观地展示一些功能按钮，对于小白用户来说是好事，用户能快速地用肉眼看到自己所能做的事情。

通常是文字优先，图标辅助；有些图标已经长期对用户教育，所以有时候也可以只用图标

但我们有时候需要对专业操作留下一些特定的入口，所以有了这个提案。 这个提案介绍了一种基于长按或者下拉来获得“专业操作”的面板的交互过程：

1. • [ ] 拥有该手势的按钮，在触摸的时候，会有“硬（比较不平滑）”的、短促的震动反 馈（它的僵硬感让人感觉是一个在向下按压一个弹簧）；
2. • [ ] 视觉上，按钮会立刻出现阴影，并且随着时间的推移，阴影会越来越大，给人感觉一种浮起的效果，通常能看到这里的阴影是

     初始是 blur=-2pt/spread=-1pt 的阴影，因此类似 border；并且阴影的位置取决于按钮的位置，通常假设光源在屏幕的整中心，最大会有 blur=-10pt/spread=-5pt 的淡阴影 随着元素离屏幕中心的位置越远，阴影的偏移会越大，最大偏移量是 blur * 0.5，注意，这里并不是完全的物理模拟，只是一种近似的模仿，目的只是不让阴影太过僵硬；如果技术上不方便支持偏移计算，那么统一使用零偏移 可以用以下 CSS 在 HTML 控制面板中切换查看效果：

     box-shadow: 0px 1px 2px -1px;
     box-shadow: 0px 5px 10px -5px;
     transition-duration: 500ms;

3. • [ ] 如果中途如果放开手势，那么阴影会淡化缩小，给人感觉按钮下沉回去了
4. • [ ] 在蓄力 250~500ms 后（取决于人或者场景），也是阴影最大化的时刻，“专业操作”就会被正式激活；同时触发震动反馈，这次震动会比较闷比较重（这种重击会调用人们的注意力集中，参考 IOS 桌面长按时的震动，但是需要再短促一点不要拖沓，强调“专业”）；
5. • [ ] 专业操作面板出现之前，按钮并且视觉上对应的按钮会快速地往面板将要出现的方向进行偏移，然后优雅地回到原处。
     1. 偏倚到“视觉重心”处返回，视觉重心就是阴影偏移量的位置；
     2. 如果不支持阴影偏移量的计算，那么使用scale+=5pt达到类似的效果。
     3. 这里在暗示用户可以通过向这个方向拉动按钮从而达到同样的效果；同时也在为即将出现的专业面板进行一个注意力方向的引导
6. • [ ] 专业面板会以按钮的视觉重心为起点进行展开，展开效果参考 IOS 的桌面长按图标呼出的 shortcut
7. • [ ] 按钮都可以通过向四周滑动来快速唤出专业操作面板
     1. 滑动不会完全跟手，需要提供至少 20pt 的滑动量
     2. 图标最多滑动到 5pt 的移，就会成功呼出专业操作的面板
     3. 向任何方向滑动都可以，往哪个方向滑动就优先往哪个方向暂时专业操作面板
     4. 如果对应的方向放不下面板，那么不会触发该滑动逻辑，而是保持原有的“长按”逻辑来触发专业操作

        这里可以考虑仍然强制显示，但是按所拥有的空间进行 scale 或者 scrollable？

     5. 使用滑动唤醒的面板，手指可以滑动到指定的按钮上放开手指，这等价于对按钮进行“单击”，这个过程中，手指经过的按钮都会触发震动
     6. 因此通过滑动来进行操作是最快的，可以完全凭借肌肉记忆来进行滑动单击指定按钮。

        所以这有可能会形成误触

8. • [ ] 不拥有该手势的按钮，在触摸的时候，只会有轻微的、平滑的震动反馈（让人感觉是一个小按钮，它的平滑感让人感觉按钮已经弹起）；同时也不会有阴影效果

补充说明：

1. 这种交互就意味着一个功能按钮，它既得是“功能”，又得是“入口”，因此通常情况下，其文字最好同时有动词和名词两个含义，如果不能，那么优先使用名词。
2. 通常这个名词是“当前状态”的描述。

举例：

1. theme-toggle-button，它有三种模式：暗色、亮色、自动。
   1. 通常情况下，用户只知道通过点击来改变亮暗模式，那么用户每次点击会看到当前界面颜色发生变化，多次点击就会循环
   2. 在专业模式下，用户可以直观地看到存在这三种模式独立的按钮，因此不需要多次点击循环，而是直接找到所需的色彩风格，甚至还能找到一些隐藏选项：比如 强制亮色、强制暗色、反相模式 等