如果说 npm 的大新闻，莫过于之前的 left-pad 撤包事件，event-stream 投毒事件，Ant Design 彩蛋事件。使得很多前端开发者又开始重新思考 npm 生态时候真的存在问题？



今天我们文章的主角是 memwatch，一个用来帮助我们检查 Node.js 是否存在内存泄漏的库，和这个库传奇的一生。



2012 年 02 月 06 日，一位 Mozilla 的工程师 lloyd 创建了这个库，并写了一篇博文“Is My NodeJS Program Leaking?”（我的 Node.js 程序是否存在内存泄漏？）。这个包最初被命名为 gcstats，代码上传到了 github。



6 月 27 日，npm 包改名为 memwatch，发布 0.1.1 版。



7 月 4 日，lloyd 为这个库添加了开源许可协议：WTFPL，发布 0.1.2 版。很多人对这个开源许可协议可能比较陌生，WTFPL 的全称是 Do What The Fuck You Want To Public License，中文译名：你他妈的想干嘛就干嘛公共许可证。也许就是这份协议开启了 memwatch 库不寻常的一生。



2013 年 3 月 14 日，作者 lloyd 提交了最后一次代码，发布了 0.2.2 版本。支持的 Node.js 版本为 0.6.0。随后这个库再也没有更新过。



从作者的博文和推文可以看到，作者在 2014 年离开了 Mozilla。而从作者的 github 动态更可以看出，作者应该是转入了 golang 阵营。



2014 年 6 月 28 日，作者的一位前同事 deepak1556 fork 了这个库，增加了对 Node.js 0.11 的支持，并发起了合并请求。但是作者并没有回复，也没有合并此次请求。此时距离原作者放弃这个库也已经过去一年多了。



2015 年 2 月 7 日，marcominetti 又 fork 了 deepak1556 的库，增加了对 Node.js 0.12 的支持，并向原库发起了合并请求，同样没有得到作者的任何回复。于是 marcominetti 决定自立门户，于是将 memwatch 改名为 memwatch-next 发布到了 npm。



2017 年 1 月 27 日，如同前两位维护者一样，marcominetti 也最终放弃了继续更新这个库。到此时，此库支持的 Node.js 版本为 4、5、6。



2018 年 5 月 6 日，eduardbcom 又 fork 了 marcominetti 的库，增加了 Node.js 9 的支持，并且放弃了对 Node.js 9 以下所有版本的支持。改名为 node-memwatch 并发布到了 npm。随后再也没有更新过代码。



2018 年 7 月 17 日，一位开发者 dyatko 又 fork 了 eduardbcom 的库，增加了对 Node.js 8 的支持，并向原库发起了合并请求，同样没有得到作者的任何回复。



但在此次 pr 的评论中，另一位开发者说，airbnb 也 fork 了 marcominetti 的库，并改名为 @airbnb/node-memwatch 发布到了 npm。



有了大厂接手，也算是这个库最终的归宿吧。







相关阅读



开发者对 npm 公司不满，unpublish 了自己的所有模块



月下载量千万的 npm 包被黑客篡改，Vue 开发者可能正在遭受攻击



驳《我不是很懂 Node.js 社区的 DRY 文化》



机器人伪装成人类在 GitHub 上为开源项目修复 bug

两列布局的几种方法

html结构

 <div class="content">

      <div class="content-left">

        左侧固定200px

      </div>

      <div class="content-right">

        右侧自适应

      </div>

 </div>



1.通过float和margin-left

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content{

        overflow: hidden;

      }

      / 脱离文档流 /

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        / 通过margin-left将左边位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



2.通过 position: absolute;绝对定位

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        position: relative;

      }

      / 脱离文档流 /

      .content-left {

        position: absolute;

        top: 0;

        left: 0;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        / 通过margin-left将左边位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



3.通过flex弹性布局

/ 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: flex;

      }

      .content-left {

          / 除了width: 200px;还可以flex-basis: 200px; /

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

          / flex:1;将剩余空间分给它 /

        flex: 1;

        background: blue;

        height: 200px;

      }



4.通过 display: table;表格布局

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: table;

        / 必须给父级定宽不然自适应盒子没定宽只会由内容撑开 /

        width: 100%;

      }

      .content-left {

        display: table-cell;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        display: table-cell;

        background: blue;

        height: 200px;

      }



5.通过inline-block和calc（）函数

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        / 必须加font-size=0;把inline-block默认间距去掉，

        不过设置后里面文字不显示了可以给里面块设置font-size:20px;

        或者把两个块之间的换行删掉也能去掉间距/

        font-size: 0;

        overflow: hidden;

      }

      .content-left {

        font-size: 20px;

        display: inline-block;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        font-size: 20px;

        display: inline-block;

        background: blue;

        height: 200px;

        / 注意calc里的运算符两边要有空格 /

        width: calc(100% - 200px);

      }



6.通过float和calc()函数，左右两块都要浮动

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

      }

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }

      .content-right {

        float: left;

        background: blue;

        height: 200px;

        / 注意calc里的运算符两边要有空格 /

        width: calc(100% - 200px);

      }



7.使用grid布局

 / 清除浏览器默认边距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: grid;

        grid-template-columns: 200px 1fr;

        / grid布局也有列等高的默认效果。需要设置: align-items: start;。 /

        align-items: start;

      }

      .content-left {

        height: 200px;

        background: red;

        / grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，

        grid布局默认是box-sizing设置的盒宽度之间的位置。

        而flex则是使用两个div的border或者padding外侧之间的距离。 */

        box-sizing: border-box;

        grid-column: 1;

      }

      .content-right {

        background: blue;

        height: 200px;

        box-sizing: border-box;

        grid-column: 2;

      }

业内有很多人觉得手势交互没必要拿出来深究，觉得用户使用产品的过程中，自然而然就会去使用拇指，进行手势操作。但这种说法，就跟「用户心理模型」类似。当然，对于用户来说没必要深究手势交互，但作为设计师，如果不了解其背后的逻辑，那么就无法解决产品设计背后的一些问题。

所以我们今天，好好聊一聊手势交互这件事。你会发现，原来你以往观察或以为的设计问题，都是手势交互在作祟。

手势的意义

我们以前经常听到「以用户为中心做产品设计」这句话，意思是产品需依附于目标用户的真实场景来设计。与此同时，其实还有一句话在提醒着交互设计师如何做产品设计，就是「以触摸屏为中心做产品设计」。

为什么呢？因为用户从始至终都是在跟触摸屏做接触，不管换了什么设备，他们都是要通过屏幕与产品进行交互的。

我们可以在这里思考一下手势的意义。

手势的出现改变了什么？可以回想一下 iPhone 4 发布的时候，当看到这样一台屏幕上没有任何按键的设备，是不是会觉得不可思议？键盘，电话接听按键等都消失不见了。

人们在使用 iPhone 这样的产品时，不再需要去强行记忆任何固体按键。触摸屏与手势的结合，帮助我们隐藏不必要的元素，帮助用户聚焦于内容，在有限的物理空间获得更多的信息。

所以用户通过触摸屏与产品进行交互，跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。

手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键，需要通过上下左右这样的操作来定位指示器，而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。

综上所述，我们能知道，手势的三个要素：简洁、易用、直观。

所以我们通过一些常见的手势行为，就可以在产品界面上很轻松的完成任务。

常见的手势行为：

• 点击：单指短暂触摸表面；
• 双击：单指快速两次触摸表面（通常是缩放）；
• 拖动：沿表面移动而不会破坏接触；
• 捏/展开：用两根手指触摸表面以移入（捏合）或移出（展开）；
• 按下：单指触摸表面并按住；
• 滑动：快速手势，不需要触摸目标。

当然，我们经常也会遇到一些背离手势交互的产品设计，虽然也是点击、拖动等等，但操作起来总是不那么顺心。这里面有一个关键点就是，手势直观性。

有数据表明，苹果的 3D Touch 使用率非常低，就是因为直观性太差，用户不知道通过这个操作能带来什么结果，且使用它需要长按，经常会同时呼出「卸载」，那么效率也就会降低。久而久之，用户就不去使用了。

正面例子如下图，滑动与文案结合。

这样一看，用户马上就能知道这个操作行为如何触发，紧接着就产生行动，然后会反馈结果。

这也是手势交互的核心：触发，行动，反馈。

对比 3D Touch，触发没有提示，行动后时常有两种反馈结果，相比起来就不那么友好了。

除了上面聊的这些，手势交互还能从另一方面来提升效率，就是拇指操作区域。

拇指驱动设计

我们都知道，现在手机屏幕越来越大，甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维，跟进这个趋势的变化。

这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。如下图。

结果是，手机屏幕变大，双手持机的用户变多，但依然还有 75％ 的用户是使用拇指来触摸屏幕的。因此，术语「拇指驱动设计」应运而生。

我们上面说到，在使用一些产品的时候，经常会遇到使用起来不顺心的情况，然后说了「手势直观性」的概念。但这里，还有个更重要的原因，就是「拇指操作区域」。

拇指操作区域被分为三块内容，分别是：易于触达，难以触达，以及介于两者之间的区域。

看下图。

所以在设计界面时，要注意界面的主要操作元素是否处于用户易于触达的范围之内。

如果你仔细观察并思考过，也会发现，iOS 的产品界面中，「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出，而是让用户聚焦于当前页面，想要返回，那就需要付出一点成本，什么成本？操作成本。

有人会说，由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果，因此在大多数 iOS 产品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用户都知道这一点，也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率，所以本质上他们并不矛盾，只是相比以前，我们现在的操作更快了。并且「右滑」返回，本身在手势操作中相比「点击」也是更具操作成本的。

当了解了手势的一些意义，以及拇指操作区域对于产品设计的重要性之后，我们就可以通过一些案例来做一个全局分析了。

1. 内容在上，操作在下

许多人设计 App，但是没人研究过 App 为什么要这么设计。

比如，为什么起初要把标签栏放底下呢？关于这个问题，当初我也是问了许多人，而基本都只是说这是官方设计规范。这相当于是一句废话。

通过翻阅多方资料，我发现在工业设计领域有一条重要的基本设计原则：内容在上，操作在下。

比如在使用电脑的时候，操作在下意味着使用者在操作过程中，手指始终处于界面下方，而内容在上面，就不会出现手指遮挡内容的情况。

如下图的键盘操作提示：

基于此，相信你也知道为什么标签栏在下方了吧？

另外，为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢？

界面右/左上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的：编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。

通过这一小段之前聊过的内容，你们会发现，手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。

汉堡包菜单的消失解析

汉堡包菜单，也就是侧边栏导航，Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。

我们一起来看看市面上给出的三类说法。

1. 可见性太低

默认状态下，用户是看不见侧边栏的，除非点击了侧边栏的弹出按钮。所以这种情况下，里面的功能都是用户脑袋里已知的，但很可能都想不起来。比如，现在你回想一下知乎底部 5 个标签分别是什么？或者微信右上角「+」里面有哪些功能？是不是要想一会儿，才能记起来？甚至还是想不起来。

之前我在文章里写过，用户对于功能的使用一定是「所见即所得」，而不是「心向往之」。用户只会注意自己看到的信息，而不是凭借记忆或想象来使用产品。

底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。

2. 效率较低

效率较低主要在于操作频率，大家看下面两组图的对比。

第一张图，当用户从首页进入到个人信息页面，只需要两步；而第二张图，则要三步。

这里多一步看起来似乎影响不大，但如果现在要从个人信息页面到「标签 3」的话，第一张图也只需要两步，第二张图还是需要三步，当频繁去使用这样的产品后，用户的整体效率就会下降，体验也会随之降低。

3. 与平台模式冲突

大家应该知道，在 iOS 的操作页面中，通过手势可对 tab 进行左右切换，而侧边栏除了通过点击菜单按钮展开之外，也可以通过右滑弹出。这里面有什么冲突呢？看下图。

当页面聚焦在「标签 2」时，右滑除了能回到「标签 1」，同样也很可能会切出侧边导航栏。

这样的手势冲突，导致页面层级与功能导航的优先级混乱了。

无论是导航还是控件，当它们组成一个页面后，它们的操作就会有优先级。比如下面这个例子。

如果你对标红的分段控件比较熟悉，就知道，它是可通过屏幕滑动进行切换的。但是在「短信」里，它是不能通过滑动屏幕进行切换的，因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时，我们会将子层级操作优先于父层级操作。

譬如你进入朋友圈，是不能马上回到首页的，这时候页面层级较深，产品人员要将用户聚焦于页面本身，如果直接能返回到首页，页面层级和产品架构就会混乱。

类似的例子还有很多，我这里就不继续列举了。

所以从「短信」的例子可以看出，当控件与控件之间的手势发生冲突时，我们要考虑优先级，将内容优先于页面来处理。那么回到上面的例子，分段控件与汉堡包菜单的手势发生冲突时，很明显我们要优先分段控件的操作，而禁止掉汉堡包菜单的右滑手势。结果就是，效率又低了。

4. 小结

这三类，如果你认真思考里面的关系，其实就会发现，它们的共通点就是与拇指的联系过于被动或直接被切断了。

• 第一个「可见性太低」的例子，菜单被隐藏，拇指不能直接与菜单产生关系，并且距离过远，拇指难以触达。
• 第二个「效率太低」的例子，用户需要通过拇指来回操作，导致效率降低，这就跟使用遥控器控制电视机一样，用户无法直接触达内容。
• 第三个「手势冲突」的例子，其实就很清晰了，就是说标签栏的优先级可能会被页面的其它控件所取代，那么拇指就无法直接对其产生作用，从而禁止当前页面的手势交互行为。

它们的核心点就是拇指与触摸屏的关系。

如果你现在还不能深刻理解汉堡包菜单的劣势，那就想一下去看一下现在的产品，其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。

在「我」这个标签页里，这一系列功能列表，无非就是另一种模式的汉堡包菜单，只是这里呈现的都是不重要的功能，并不影响用户使用这个产品。回想一下，你是不是很少，甚至从来没用过这里的某几个功能？再跟手势结合，就会发现，「我」所处区域并不是容易点击的区域，这就是它效率低下的原因了。现在能懂了么？

弹框的操作路径

当传统的确认弹窗逐渐被手势操作取代，大家就应该察觉到：以往从电脑迁移到移动设备上的交互行为已逐渐被改善。

我曾经写过一篇文章，叫「取消按钮的设计逻辑」，讲了「左取消，右行进」这个原理。意思就是当我们在设计弹框的时候，用户已经习惯这样的操作路径，所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说，就是右边更容易点击。

后来有同学说到，但是有些特殊场景，譬如删除资料，而产品人员不希望用户删除，于是把删除放在左边，取消放在右边。毕竟右边更容易点击，所以位置换了会比较合理。

这是错的！

我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消，右行进」的认知之后，违反这样的一致性，去换位置是很危险的。所以出现了 action sheet，来解决一些产品关于 alert 无法解决的问题。

如图。

大家要记住的是，当页面逻辑与手势操作产生逻辑冲突时，我们不是去否定以前已经被验证且正确的内容，而是通过创新，来解决这个冲突。这就是拇指驱动设计的一种方式。

包括我们以前在移动设备上选择删除某项数据，都会弹出警告框，询问我们是否确认删除。这种方式会打断我们的操作行为，久而久之，用户已经对此交互方式习以为常，或者说免疫了，但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除，已经被更多产品功能用来取代没必要弹框的操作。

也许很多人没思考过底层原因，或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化，让用户操作起来更加方便。

Banner

到了这里，我再举个所有人都熟悉的例子，就是轮播图了。

轮播图最早出现于网页端，后来被大量商家模仿，以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。

下面来看轮播图与手势的关系。

试想：你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久，更不会看完你 Banner 的内容。以至于有研究表明，大部分产品里，除了第一张 Banner 的点击率能达到 83% 之外，其余的点击率都非常低。

有人说可以点击下面的原点指示器做跳转，这么小的点，你觉得点击它现实么？所以手势交互与轮播图是相互矛盾的一种设计方式。

所以当运营策划了一个活动，而你就往顶部的轮播图里塞，这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品，他们以卖广告位给商家作为盈利点，但即便如此，我相信这个广告位除了第一张图的点击量稍高外，其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面，而不是强制指定于显示第一张的原因。

毕竟轮播图在顶部，用户需要通过拇指长时间的在「延伸区域」进行操作，那么使用率自然就降低了。

如果你的产品有很多活动是在同时期进行的，那么我给部分产品的建议是放一个活动主题入口，如下图。（当然，这要视情况而定，并不是通用的。）

搜索框的变化

我们现在看到的搜索框基本都是放在屏幕顶部。

为什么呢？

市面上对这个问题的解释是这样的：用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框，设计师打破这个常规就要承担风险。

看完这篇文章，你就已经知道，对于用户来说，由于屏幕顶部离拇指很远，处于难以触达的区域，在体验上很不好。所以搜索框成了认知上应该在顶部，但操作体验上又不应该在顶部的一个设计。

但是回想一下，会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后，就能知道，拇指驱动设计的概念被越来越多的人认识到其重要性。

地图类产品把搜索框移到下面来的首创应用不是高德，应该是 Lyft。

瞧，拇指驱动设计，多酷~

总结

《上瘾》里有句话：当人们不由自由地做出下一个举动时，新的习惯就会成为他们日常生活的一部分。

当手势充分地发挥了作用，辅助用户操作或实现功能，它就成了用户不可分割的一部分。

今天通过对手势意义的解读，以及拇指驱动设计的解析，再加上这些案例的拆解，我相信你能更好地理解为什么手势交互这么重要了。

交互设计师对于「触摸屏」，必须有深刻的认识，才能理解设计背后的逻辑。

如果这篇文章对你有帮助，记得点个赞，后面我好持续输出。

文章来源：优设

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

心理学在我们生活中涉及的面很广，是每个行业都要了解的，对于设计师来说，更要了解用户的心理，因为我们的设计是面向用户的 

   我们经常需要引用（白嫖）一些网页上的文字，但是豆丁网，百度文库等等设置的有复制权限，我们无法直接复制，或者复制文字有上限，提示付费。

    这里介绍几种，都是些花里胡哨的白嫖方案：

1.手机扫描：

    拿着手机，用手机QQ的文字扫描直接去识别问题，遇上好识别的文章短的直接就识别，但是这种方法遇到文章比较长的就十分麻烦。可以针对那些选中



2.魔鬼牵引：

    原来在计蒜客就这样搞，选中网站上的文字，然后用鼠标一直拖到别的页面，或者一个记事本什么的，屡试不爽。



3.侧边翻译：

    侧边翻译，火狐或者谷歌下载一些插件，比如说侧边翻译，这个东西小巧玲珑，选中文字侧边翻译之后你就可以对文本进行复制了。



4.原始查看法：

    在浏览器中直接F12，打开浏览器查看，就下面这个东西，浏览器你要复制的文本就在这里面，里面封装的html语言，你可以搜索你需要找的文字，然后可以直接复制，如果想要复制多一点你也可以直接把里面的html语言拿出来解析到自己的网页里面，然后再进行复制。





5.氪金法：

    没别的，充钱就完事了。



6.某巨巨提供：

    下载一个ocr工具，类似qq扫描的功能。

互联网的底层逻辑就是以一种更的形式来满足了我们的需要，让我们的生活和生产更加的智能和。

底层逻辑是什么？如果给它一个释义的话，那应该是：最初的意图或做一件事情原始的出发点。

互联网的底层逻辑

我们生活在一个网络时代。可以利用网络，购物，打车，叫外卖，娱乐，办证，学习等需要。可是在没有网络的年代里，做任何事情都是需要跑腿和亲力亲为。

我们对比没有网络年代。互联网给我们生活带来了极高的便利和效率。

我认为互联网的底层逻辑是：用一种更的形式来满足我们生活生产而产生的需要。

我们拿买衣服，购买外套举例。

• 进店购买：询问导购–找到外套–挑选–决定买不买
• 网上购买：搜索外套–屏幕展示外套–挑选–决定买不买。

经过对比发现：

进店购买和网络购买最初的意图都是满足穿衣服。两种形式的心理活动逻辑一样。都是店铺找到外套，然后作出购买决定。只是两种方法的获取形式和途径是不一样的。

1. 实体店询问导购，变成了我们线上自主搜索。
2. 口头说出外套变成输入关键词“外套”。
3. 获取到的结果由导购带到引导变成外套信息数据展示

互联网技术的让购物，让买衣服多了一种途径，多了一种形式并且有别于我们传统的购买方式。

再如直播卖货，直播卖货在网络上火了一把。口红一哥李佳琦直播卖货，1分钟售罄14000支唇膏、打破“30秒涂口红”吉尼斯记录、5个半小时带货353万……最高时段3000万人在线围观。

现在我们要聊的并不是网络红人的伟大数据。而是网络直播这个事。想一下，网络直播是否在真实生活情景有原型。

看到上面的情景，是不是觉得熟悉了。

• “瞧一瞧，看一看”
• “厂家做活动，回馈消费者，不要1999，不要1599，只要999”
• “走过路过不要错过”
• …..

我们暂时称这些情景为现场直播，现场叫卖。由于互联网技术的成熟，直播平台的成熟。将现场直播搬到了网络直播。网络直播底层逻辑就是现场叫卖的另一种形式。

我们可以发现，互联网很多项目其实都是可以从现实生活中找到原型：

• 购物–电商
• 线下地推–网络直播
• 电话叫餐–外卖
• 培训–网课
• 阅览馆–电子书
• 办证跑腿提交纸质资料–网上提交电子档资料
• ……

互联网如何让生活生产变得更为？

1. 连接，跨空间，跨地域连接人

假如没有网络，我们人与人之间的生产活动大多只存在于本地圈子。例如：

• 在当地文化圈学习，与当地同龄人成为同学。
• 信息和话题交流闭塞，对外界信息获取滞后。
• 和当地人做生意，把货品卖给当地的消费者。

有了网络：

• 在抖音快手，我们可以看到其他城市的面貌，了解更多的人文民俗。
• 在网络课程上学习平时接触不到的知识。比如：理财，摄影，写程序，做会计。
• 还可以通过电商将生意做到全国各地。

网络连接能突破界限，跨地域、跨空间，将不同省份，不同城市的人，通过互联网联系起来。然后将我们的信息，个人技能，社会信息放大到更多地方。

2. 赋能，释放能量，价值最大化

以前有种现象。那就是信息不平衡，需求与被满足不平衡。

比如：A想采购一批水果加工仪器，但当地农业为主，别说售卖水果加工仪器，即便是询问他人也鲜有人知道。

但在网络时代，我们只要百度或者阿里巴巴搜索。总会得到我们想要的线索或者结果，总能找到加工仪器供应商的信息。

再如：十八线县城要学习IT编程语言，一般来说要去大城市培训机构学习。有了网络，直接在一些课程平台上购买课程就可以了。

上面的例子想说明的就是互联网可以放大社会资源的利用率，将价值更大化，让更多人参与参与到社会资源的共享当中。消除局限和阻隔，将知识课程提供千千万万的人可以学习使用。

滴滴平台一方面解决了人们打车难的问题，另一方面也将闲赋私家车全部利用起来，给打车这和私家车车主同时满足需求和创造价值。

几年前我们看着小卡片的菜单和电话叫外卖，现在我店家再也不用通过发传单来招揽生意了，只要用户有需要打开app就可以实现足不出户享受用餐。

互联网将社会资源效率更大化。无论是外卖平台，学习平台，电商平台都是将原来局限在小范围的服务放大到全国各地的人群使用。这些都是互联网技术赋予的能量。

3. 破界，突破界限，让不可能成为可能

在那个守着电视机，听广播看报纸，用着纸币的年代。怎么也不会想到今天我们可以拿着手机看新闻，追剧，刷抖音；用手机乘公交，乘地铁；手机当钱包，网纱购物，线下消费。所以很多老人好像有点不能理解年轻人的生活方式。

所以技术可以让满足我们需求的方式发生改变，甚至是颠覆的。

从前我们看的也并不是电视本身，而是看声情并茂的画面；报纸也不是报纸而是信息；使用纸币是为了完成交易。电视，报纸，纸币这是一个时代的载体。

互联网技术的发展让这些载体发生了变化，打破了刻板印象。让我们知道了很多东西其实只是个物体，这些物体帮助实现我们内心产生的需要。

今天只是这些物体被新的物体替代了，就好比手机替代了一部分看电视的需求。在十几年前我们怎么也不会想到今天那么多东西都被改变和替代。也许我们现在不切实际的想法，在将来的某一天也终将会被替代和成为现实。

互联网把我们每一个人连接在一起。放大了市场，提升了效率，突破了界限。用一种新的形式满足人们日新月异的需求升级。

互联网继续，5G来袭，展望未来。

互联网已经渗透到了各行各业。大到与我们生活息息相关，也可以小到陌生领域。人们都说互联网的发展已经到了瓶颈，我更愿意相信是互联网是暂时进入到了它的发展周期。

技术只会不断的向前，不断的用新的更好的方式来突破替代的旧的形式。随着5G网络的到来，肯定会有新一轮的技术革命到来。

第5代移动通信网络比4G网络的传输速度要快10倍以上，一部1G的电影可在8秒之内下载完成，我相信这绝对又是一个新的起点，很期待5G时代给我们带来的惊喜。

4G时代连接人与人，是服务业的升级

不难发现，4G网络应用大多数属于服务范畴。像电商，外卖，打车，餐饮其实都是服务员行业。4G时代提高了服务效率，实现了跨距离，跨空间服务。

视频聊天可以穿越见面时空对话；电商可以让你在一个地方买遍全国甚至全球；新零售可以实现不出门买菜做饭。4G网络连接人与人，大大提高了人与人之间服务的效率和数量。

5G时代连接人与物，交互体验升级

随着5G网络的到来及速度效率的提升，我们可以实现更加多元化的连接。

5G可以做到4G想做但有无法实现的事情，例如扩展到人与物之间的连接；也可以在4G基础上实现更加精准的计算，又如精密的医疗，更加精准和快速的大数据。

5G网络将继续升级改变我们生活，它将继续改变娱乐，交通，医疗，智能家居等等领域。我们可以试着猜想：

• VR技术，让看电影能够有更佳的3D体验。
• 网上购物不在需要看图片。而是有更好的体验，身临其境在虚拟的店铺中。可以对商品有触摸和移动等虚拟的互动体验。
• 无人驾驶技术
• 智能家居。不在家或者在外地对家居进行操作，比如：关窗，开空调，扫地等。
• 智能医疗。如；远程手术。由于5G网络有着更加精准的效率。支持医生运用机器跨医院操作手术等。

技术的进步会给我们的生活带来改变，我们期待新的形式来满足我们的需求，期待我们的生活和生产更加的智能和。

 文章来源：人人都是产品经理

需求整理的现状

写这篇文章的初衷，是在实际工作中遇到 PRD & DRD 文档，对于一些交互设计图，会产生不理解，或者说在实际落地画图的时候会发现一些前后不一致的问题，解释过于冗余，不清晰。在接触新的业务时，很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。

在传统瀑布式需求分析流程中，我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图，只是了解一下大概是什么类型的产品，很难发现企业产品中真正关键的流程价值点在哪里，或者说也不清楚后续发展的走向，只能卯足了劲去做图做说明，整理完整。时间紧迫压力大，又要照顾整个项目。往往决定产品成功与否的，是产品 20% 的主要功能（二八原则）。所以在面临初期产品设计中，应该将主要精力放在重要功能流程中。

目前，在互联网产品中，敏捷开发是所有产品设计者最推崇的。原因在于，能够对业务、设计、开发更有前瞻性&敏捷性。

理解业务需求，是做好交互的首要条件

产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼，也是设计师需要参与完成的。业务需求是一个比较大的任务，来源可能是老板的要求，可能是产品提出的，也可能是用户的反馈。通过业务需求，我们要分析出相关的业务目标。有个偶然的机会，了解到彩色 UML 的设计方法，在具体实践中，感觉这个方法能够快速适应任何业务流程，简单方便，易懂，并能快速发现业务流程中的问题，加以修正完善。

彩色UML建模

有幸认识王海鹏老师，他推荐了早年他翻译的彩色 UML 建模一书，作者 Peter Coad，是将彩色和企业组件集成到建模技术之中的第一本书的主要作者，是世界上经验丰富的建模人员之一，他所创建的模型几乎涉及到所有行业。

此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型，给定一种颜色，你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型，并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型，都遵循这个组件所表达的基本形状和职责。

笔者利用彩色 UML 建模的设计方法，用于业务梳理工作，达到了意想不到的效果。以下为彩色 UML 建模基本概念（截取彩色 UML 建模书中的介绍）。

△ 《彩色UML建模书》第9页

△ 《彩色UML建模书》第10页

△ 事例会员注册

交互设计中常用图

1. 实体关系图（又称ER图）

定义：ER 图是用来描述现实世界中的实体关系模型，所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。

作用：促使你以最适合技术理解实现的方法，来规范的描述功能模块的核心要素，其实就是数据库的物理结构。而这种描述是无二义的，最清晰传达 PM 的设计思想。

2. 功能结构图

功能结构图就是按照功能的从属关系画成的图表，在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点，分解得最小功能模块可以是一个程序中的每个处理过程，而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说，功能结构图就是以功能模块为类别，介绍模块下各功能组成的图表。

作用

• 梳理需求，以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
• 思考并明确产品的功能模块及其功能组成。

3. 信息结构图

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

作用

• 帮助 PM 梳理复杂内容的信息组成，避免信息内容在展示过程中出现遗漏、混乱、重复；
• 作为开发工程师建立数据库的参考依据。

信息结构图构成要素

• 导航：网页访问者的访问途径。
• 频道：某一个同性质的功能或内容的共同载体，也可称为功能或内容的类别。
• 子频道：某频道下细分的另一类别。
• 页面：单个或附属某个频道或分类下的界面。
• 模块：页面中多个元素组成的一个区域内容，可以有一个或多个，也可以循环出现，如：文章列表。
• 模块元素：模块中的元素内容，以文章列表举例，文章标题、文章摘要、文章发布时间，这些都是元素，都是组成模块的内容，同时他们也是可以循环出现的。元素的类型可以是：文字、图片、链接等等。

4. 产品结构图

定义：产品结构图是综合展示产品信息和功能逻辑的图表，简单说产品结构图就是产品原型的简化表达。

作用：它能够在前期的需求评审中或其他类似场景中作为产品原型的替代，因为产品结构图相较于产品原型，其实现成本低，能够快速对产品功能结构进行增、删、改操作，减少 PM 在这个过程中的实现成本。

5. 业务流程图（泳道图）

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

作用

通过业务流程图，钻研关键事件的流程，分析为什么要这么做，探索出更深层次的问题，从而对现有不合理的业务流程进行重组优化，进而制定优化方案，改进现有流程；阐述在项目中各个角色是如何产生相关联系的。

绘制规范/建议

• 让涉众参与，不要闭门造车：与业务流程图包含的各个参与角色代表适时确认事情的原本流程。
• 恰当的层次分解，不要将所有的环节都铺到一张图上。
• 逐渐深入，先抓枝干：切忌一开始就陷入细节。
• 流程一定有开始和结束：切忌交出来的流程图，让读者问：流程的开始点是什么？用清晰的代表开始和结束的符号来完成第一步和最后一 步。
• 流程图符号绘制排列顺序：由上至下，由左至右。
• 同一流程图符号大小宜相对一致。
• 编号：这是让沟通效率更高的优化措施。当你有了编号系统，相当于对你的流程图都赋予了唯一识别身份证号。负责流程规则审核和优化的部门能够清楚在邮件里传达 H5.1 流程优化，大家就更明确指的是什么。
• 路径符号应避免互相交叉。

6. 任务流程图

任务流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

作用：基于业务流程，进行任务流程梳理，阐述角色和程序发生交互的流程，你如何进行操作，系统如何进行反馈。

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图，但业务流程更偏向于业务限制、后台逻辑等，并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等，从而引导用户完成用户目标。

7. 页面流程图

定义：指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

作用：

• 交互设计/原型设计的底子，基本依据。
• 站在用户视角，代表用户所有可能的操作过程，页面流程能快速发现体验问题。
• 突出页面元素与逻辑关系，提升原型设计的效率。

8. 线框图/原型图

定义：页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。

作用：用例阐释者，用来了解用例的用户界面；系统分析员，用来了解用户界面如何影响系统分析；设计员，用来了解用户界面如何施加影响及它对系统「内部」的要求；类测试人员，用来制定测试计划活动。

构成要素

• 页面标题：即每一个页面的对应标题，一般就是导航栏标题。
• 页面内容：以黑白为主，保证信息规整易读。
• 交互说明：用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则等等。
• 主流程线：只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受。

9. 线框图/原型图交互说明的几种类型

限制

包含范围值、极限值等。

范围值主要指数据的取值范围。比如，当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围，否则开发人员就不清楚该如何设定，如图所示。

极限值主要指数据的显示限制。比如，最多应该显示多少字数，过时如何显示，是否折行等，如图所示。

状态

包含默认状态、常见状态、特殊状态等。

「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明，否则开发人员可能难以意识到这是用户填完的效果，还是默认就有的。

「常见状态」主要指针对某一个模块，经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块，一般会出现 3 种状态：未登录状态、登录后未签到状态、登录后已签到状态，如图所示。

「特殊状态」一般指非正常情况下的样式、文案、说明等，如图所示：

操作

包含常见操作、特殊操作、误操作、手势操作等。

「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件，在经过不同操作后会立即出现如下的状态。

「特殊操作」主要指一些极端情况下的操作。一般，用户不会这么操作，但是一旦遇到极端情况，还是要想好应对措施，因为对于开发人员来说，不管是正常的还是极端的操作情况，他们都要去编写对应的代码。如下图，是填写用户信息的例子，当不写交互说明时，开放往往会遇到很多问题：如果已经勾选了 2 个人，再勾选第 3 个人，怎么办？如果勾选了「张XX」，下面区块中会相应地出现张XX的信息，那么这时候允许修改张XX的身份证信息吗？假如允许的话，修改后「张XX」还保持勾选状态吗？表单提交后要新增一个被保险人信息吗？若修改的是除身份证号码以外的信息，「张XX」 还保持勾选状态吗？提交表单时是覆盖原存储信息吗？若修改后出生日期、性别与身份证号码不吻合怎么办？等等。

面对各种复杂的情况，一方面要和开发人员积极探讨，看看有没有其他的解决方法可以简化各种逻辑判断；另一方面，在得出结论后，要把交互说明写清楚，避免出现让开发人员感到棘手的情况。

「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示，提示中已告诉用户「库存5件」，如果这个时候用户在「数量」一栏中输入「6」会怎么样呢？系统会自动帮用户将其改为「5」省去用户手动修正的操作。

「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。

反馈

用户操作后得到的反馈动作，包含提示、跳转、动画等。

「提示」主要指操作后，系统反馈给用户的文字说明等，如图所示。

「跳转」主要指点击某个链接后，页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话，需要注明跳转时的转场方式，如图所示。

「动画」主要指用户操作后，系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强，是非常常见的一种反馈形式。比如删除某条信息，该信息以渐变消失的形式告诉用户：这条信息已经被删除了。在移动应用中，动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式，必要时可以制作 domo 动画演示效果给开发人员。

文章来源：站酷

作为UI设计师，我相信大家都是专注于界面设计的好不好看，至于界面与界面之间如何交互，点击之后如何反馈，是一个比较容易被忽略的重要环节。

那么我们怎么处理好界面交互中的加载设计，减少用户因等待产生的焦虑情绪，保证整个体验无缝衔接，今天这篇文章就来总结下APP中数据加载模式设计。

一、为什么要加载？

1、用户在进行某些操作时，都要从后台请求数据，这个过程都需要时间，系统应该始终在合理的时间内做出适当的反馈，让用户了解正在发生的事情，让用户知道此时的操作是有反应，减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣，吸引用户注意力，增加沉浸式体验，让用户轻松自在的享受等待；

2、体验无缝衔接，减少用户跳失，正常的等待加载时间是0.3秒以内，同时不同场景对应有不同的加载方式。

二、常见的加载场景及方式

a.加载场景：

不同场景有不同的加载方式，常见的加载场景一般有以下几种：下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中，要根据不同的场景搭配不同的加载样式，才能更好的做到缓解用户等待焦虑，降低用户的跳失率。

b.加载方式：

1、全屏加载

主要出现在手机H5页面，例如微信的文章详情页。一般会有进度条或有趣的动画设计，减轻用户等待时的焦虑感。加载失败后，页面通常为空白页，且有重新刷新操作按钮。

优点：将整个页面的内容都加载出来才展现给用户，能保证内容的整体性，全部加载完才能够系统化的阅读。

缺点：一般等待的时间较长，容易产生焦躁情绪，尤其是遇到网络不好的情况

2、下拉刷新加载

主要出现在页面内容为推荐类、或者信息更新频次高的产品，通过刷新加载新数据，加载的loading样式可以结合产品logo或IP形象进行设计，增加趣味性，吸引用户注意力。

3.占位图加载

如果页面布局样式比较固定，可以采用占位图加载机制，先加载页面布局和占位图，先给用户展示页面框架，后加载页面图片细节部分，这种加载方式相对于直接展示白屏来说，呈现给用户无缝衔接的感觉，体验更加流畅。

4.分布加载

当页面中有文字和图片时，优先加载占网络资源较小的元素，如先加载文字，后加载图片，图片加载完成前使用占位符显示，保证用户可以顺畅阅读，缩短用户的等待时间，提高产品体验。

优点：可以帮助用户快速阅读内容，了解信息。

这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。

5.自动加载（懒加载）

当浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。对于自动加载，要注意每次加载多少条内容，或者多少屏的内容。一般会在距下面内容一定距离时开始加载，当网速非常快的时候，用户并不能感知懒加载的动作，这样可以营造一种无极限浏览的错觉，很容易的把用户吸引住。

优点：无需用户操作，自动加载后续内容，营造沉浸式体验。

应用：适合feed流、瀑布流、算法推荐类的内容。

6.预加载

提前加载好页面信息内容，这样当网络不好的时候，可直接从本地缓存中渲染，就不用再加载了。

比如用户在看A页面的时候，App在后台加载完B页，等用户打开B页的时候就不需要等待加载了，因为App已经帮用户提前加载好了，给用户提供无缝链接的感觉，弊端就是服务器压力很大，就是要预测用户行为，加载其他数据，这样会消耗不少流量，所以建议在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。

7.渐进式加载

一般出现在图片类产品，比如pinterest、unsplash等，当浏览图片的时候，经常是先看到一张模糊图或与图片较为相似的色彩值图片，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。渐进式加载能够大大的提升体验感。

8.后台加载(异步处理)

用户在前端执行操作后，客户端立即给予操作成功反馈提示，然后把请求放到后台与服务器交互，这一过程用户是看不到的，也不需要等待，体验是非常棒的。

例如在用微信发朋友圈时，会觉得特别流畅，即使在网络不好的情况下，会看到你的动态立即展示在朋友圈列表，并不会提示你网络不好，操作失败，全部以操作成功来显示，其实它只是将你发布的操作记录了下来，等网络一好就将动态上传到服务器，从而完成发布行为，微信的点赞也是同样的操作，你给好友点了赞，并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为会，给用户带来体验流畅的感觉。

所以这种加载方式是需要根据具体使用场景来权衡使用的，对于一些重要的操作，建议还是使用模态的方式加载，对于一些小操作，如点赞、订阅、关注，可采用后台加载的方式。

9.模态加载

以上几种方式都是采用非模态加载，不会对用户造成干扰，用户可以做别的事情，不需要等待加载完成，大大降低了等待的焦躁感。

模态加载对用户干扰比较大，需要中断用户的其他操作，用户只能等待加载结束，因为如果用户执行了其他操作就会打断正在进行的加载过程，实现不了用户的目标。

应用：用户执行的操作本身不能和其他操作同时进行，例如登录，退出，应用启动，手机支付等场景。

三、具体实施方法小结

1、能用非模态加载的尽量不要去用模态加载，如果非得用模态加载，也尽量给一个能取消的按钮，方便用户在不愿意等待的情况下取消操作。

2、如果加载的时间比较长，最好能告知用户加载进度，让用户心理有个预期，这样用户更愿意等待，不会因为等待产生焦虑感，分分钟卸载你的产品。科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计，这是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得很顺畅了。

3、数据加载本身就是很考验用户心态感受，所以尽量通过一些有趣的动画来转移用户的注意力，营造沉浸式体验，同时增加了趣味性，给予了产品人性化的设计。

总结

作为产品设计人员，尽量给用户好的体验，我们应该让产品自己去解决问题，而不是把问题抛给用户。在考虑人与客户端交互的同时也要把客户端和服务端之间的数据传输考虑进来，站在用户、客户端和服务器闭环的角度去思考产品，才能设计出体验更好的数据加载方案。

转自-站酷

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。