首页

一个 npm 包的坎坷“续命”之生

seo达人

如果说 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




两栏布局

seo达人

两列布局的几种方法

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;

      }



双11大屏——情绪的超级机器

雪涛

双11所带来的巨大能量与共振,需要一块巨大的屏幕来承载这份共情——这并不是一条统计数据,抑或一张图表就可以完成的。

数据大屏的设计有什么不同?

数据大屏的设计,并非是传统意义上的设计师或产品经理就能完成的。它需要将艺术家、科学家与企业家的能力集于一身,需要拥有对动态数据的把握能力、对产业经济与供应链的结构方法、对社会议题的捕捉与构造,以及宏观的视野和细致入微的匠人用心。可视化让冰冷的数据产生温度。


1.双11为什么需要数据大屏?


数据大屏是一个凝聚情绪的超级机器。

数据大屏不讲述传奇,它就是传奇本身。



在这块巨幕上,数据是公开透明的,它的变化在实时的体现着每一笔消费的数字。每个人都能看到,也会被传递到全世界每个角落。双11所带来的巨大能量与共振,我们需要一块巨大的屏幕来承载这份共情——这并不是一则新闻播报、一条统计数据,抑或一张图表就可以完成的。在这样一个狂欢的日子里,手机、个人电脑、电视机这些面向个人的设备,全都需要融入到这个巨型的超级情绪机器之中。


2.导演、故事与设计


从宣传与商业作战的角度讲,数据大屏需要兼顾故事性和震撼性两重特点。通过故事脚本与内容框架的设计,让观众层层抽丝拨茧,从表层的情绪,看到内核的战略。


1. 内容规划:故事与脚本设计

2019数据大屏的内容框架大致分为三个层次。


情绪层:GMV的节节攀升满足了媒体不断推升的情绪高潮。在日益萧条的国际环境中,中国的经济仍能屡创新高,每一位在双11买买买的中国人背后是一种爱国主义与中国信心的体现。


业务层:阿里的自我表达。阿里经济体在城市中继续深化的服务我们的消费者,数据成为城市可持续发展的新资源;而商业操作系统随着数字经济时代的到来,开始系统的服务我们的品牌与商家,在新的时代续写“让天下没有难做的生意”。


战略层:企业与国家发展同行。阿里的改变,反射了社会关系和社会结构。点击购物车就能买到全世界的东西,而对于国内市场,精准的人群定位、产业带的建设都让拉动内需变成一个大众都能参与的事情。


2. 情绪规划:情绪链路与镜头设计

依据数据表现,双11当天的情绪高潮会集中0点和24点前后。24小时内,情绪的跌宕起伏,媒体向世界专递着这种情绪。现场,根据数据和情绪的变化,我们开始导演数据大屏在不同的时间段出现的镜头:GMV的弯道超车紧张窒息,晚饭过后是观看城市夜经济的最佳时机,还有“买遍全球的购物车”、“小镇青年”等进20个镜头。


3. 核心理念:新商业文明是中国的弯道超车

为什么是弯道超车?

大航海时代是贸易全球化的开端,也是当代中国继续扩大开放,用一带一路、进博会等等新模式,承接人类当今世界发展的新格局所在。互联网与移动互联时代的到来,让中国得以弯道超车占据世界领先地位,而随之到来的数字经济时代正式开始了人类历史上的新商业文明。马老师说:打造新商业文明的时机已经到来。数字时代是我们面临的最大机遇,这个新时代最大的风险就是错失机会。



我们将这个核心理念融入GMV大屏的设计,正如逍遥子所说的那样“消费不是商业的终点,通过消费者来提升生产端生产契机,优化生产决策。”为此,我们导演了新商业文明的数据大戏:GMV屏中的赛道,3个镜头穿越了大航海时代、互联网时代,数字经济时代弯道超车的新商业文明,快进了商业文明的发展。

11.11当天的数据也被融入其中,赛道上奔跑着饿了么、盒马配送线和菜鸟的物流线,空中飘散的气泡是实时产生的交易热力。


△2019双11数据大屏-GMV弯道超车&3个视角切换


3.双11数据大屏设计概览


1. GMV:11剁手铸就中国信心

2019年,即使是在国际经济大环境衰退的今天,阿里的双11仍旧创造了新的商业奇迹:2684亿人民币的GMV的背后,是中国人为了家庭与自己而欢乐剁手,也是中国消费者面对全球大环境下对中国的强大信心。从2009年的电商大促,到11年后的全球狂欢节,阿里伴随着中国经济海洋的形成而不断掀起巨浪。李克强总理就曾经用双11的销售数据,来解答那些对中国经济感到不解的人们,让他们瞬间懂得中国经济是汪洋大海。


△2019双11数据大屏-历年GMV增速


2. 全球化:买遍全球的购物车

中国经济与中国消费者的贡献,是对全球经济的贡献。消费者购物车里藏着美好生活的愿景,打开了世界消费的新空间。天猫国际把来自全球78个国家和地区的品牌和商品带进中国,满足消费者的品质消费需求。买遍全球的购物车,更为世界经济增长贡献拉动力。越来越多国际品牌青睐中国市场,通过天猫国际满足中国消费者的需求。


△2019双11数据大屏-全球化


3. 服务夜生活点亮城市夜经济地图

随着政策的推动,全国经济进入夜生活消费时代,大量的城市开始准备成为一座座不夜城。在这个新的消费增长领域,新商品、新商机、新消费模式、新空间与新玩法都层出不穷。在未来,理解夜晚的中国,或许比理解白天的中国更为重要。


△2019双11数据大屏-杭州经济体服务网络


△2019双11数据大屏-天猫商超网络


△2019双11数据大屏-杭州城市夜生活


4. 相信不起眼的改变:小镇青年与那些你不知道的族群

14亿的中国人口、巨大的地域差异与文化差异意味着,每一种类型的消费人群都是海量的,都拥有现有经济理论所无法囊括的巨大潜力。小镇青年、银发一族、95后作为新消费崛起的代表族群,正悄悄改变着社会的消费结构。通过数据我们清晰看到:族群的喜好千差万别,数字化的新消费使得商家能针对消费者需求创造新供给。


△2019双11数据大屏-新人群,新消费


5. 品牌榜:千里江山图

天猫创造的价值是真正支持品牌的数字化转型,不仅仅赢得今天的业务,更在于决胜未来。国潮席卷而来,智能商业魅力无限,全球供应链在动荡与智能化中全面转身。全方位重构产品创新、品牌建设,强化天猫与品牌之间的合作,这便是我们想在双11这天展现的万里品牌江山画卷。


△2019双11数据大屏-品牌榜


4.结束语


当GMV越来越逼近2684亿人民币时,炸裂感给每个人的冲击是:中国又诞生了一个新的奇迹!即使在全球经济放缓的今天,中国人民对于天猫双11全球狂欢节的热情丝毫不减。在这背后,是数字经济时代下的阿里巴巴,向新商业文明迈进了一大步。

文章来源:站酷

「手势交互」的知识点

雪涛

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

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

手势的意义

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

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

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

手势的出现改变了什么?可以回想一下 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。

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

总结

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

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

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

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

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

文章来源:优设

体验设计师要懂的七大交互心理学

分享达人


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

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



阅读时间:大约9分钟


目录


  • 前言

  • 7±2法则

  • 费茨定律

  • 希克定律

  • 格式塔原则

  • 色彩心理学

  • 冯·雷斯托夫效应

  • 奥卡姆剃刀原理

  • 总结




前言


最近正好在学习用户体验方面的知识,也查阅了相关的资料和文章,输出是最好的输入,所以把整理的相关文档写下了,也是将所学的知识再巩固下,欢迎大家一起探讨。




7±2法则的定义


7±2法则出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2:我们加工信息能力的某些限制》。Miller最早对短时记忆能力进行了定量研究,他发现人的短时记忆能力的广度为7±2个信息块。

这说明人的大脑短时记忆的容量大约为“7”,并在7+2与7-2之间浮动,因此,心理学家把这个神奇的记忆容量规律称为“7±2法则”。由7±2法则我们可以得出,一般人接受新事物的记忆容量大约是7,最多不会超过9。


心理学家Alan Baddeley质疑7加减2规则。Baddeley(1994)翻出Miller的文章,发现那并不是真正的研究报告,只是一次专业会议的讲稿。Miller基本上是自言自语,猜想人能够同时处理的信息量有没有固有的限制。

此外,Nelson Cowan(2001)等研究者也追随了他的脚步。现在研究表明,那个“神奇的数字”其实是4。(无论是7±2还是4,便于我们记忆同时也协助我们工作提升效率就是最好的数字)


George Mandler(1969)指出,人们能分门别类地记住信息,并且如果每个记忆类别里只有1~3条信息,那么人们能够出色地回忆起来。当每类超过3条信息时,记忆效果就会相应下降,每类有4~6条信息时,人能记住80%;储存信息条数越多,记住的比例就越低,当每类有80条信息时,人只能记住20%(如下图所示)。



举个直观的例子,以下随机给出10个词语,你看一遍能记住几个?

桌子   电脑   椅子  水杯   铅笔   地图   绿植   键盘   鼠标   文件


7±2法则的运用


1、组块记忆


为了改善不稳定的工作记忆,人们会采取一些有趣的策略。其中之一就是将信息“组块记忆”。

也就是把数字分为3-4-4来记忆,抖音的登录账号、美团的Dialog弹窗都是遵循的这一原则。

包括现在在生活中,我给别人发手机号码或者是身份证号的时候都会选择这个原则,自己看着也清晰,也便于对方将信息分类。



2、优化选项


网易新闻和今日头条的导航都遵循了7±2法则,更多的信息左侧滑动即可。



3、页面布局


7±2法则还可以帮我们将页面分组,将内容按照属性分类,使页面更有条理性和层次感,用户能的完成自己的操作,例如:饿了么




费茨定律的定义


任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

用数学公式表达为时间 T = a + b log2(D/W+1)。

T=移动设备所需时长;a,b是经验常量,D=设备起始位置和目标位置的距离;W=目标的宽度大小。



费茨定律的理解


1、设备当前位置和目标位置的距离D越长,所用时间越长;

2、目标的大小W越大,所用时间越短。


费茨定律的应用


1、按钮放大,点击更容易


闲鱼和印象笔记,一个是直接发布闲置,另一个是直接创建笔记,都属于核心功能,将用户最想要或最直接想点击的按钮外漏、放大;增加可点击区域来满足用户的需求。



2、让相关的内容更接近


淘宝、京东的加入购物车和立即购买,在视觉上让用户增加了他们相关性的认知,也减少了两个按钮操作之间的距离和时间。



3、页面的边和脚适合放一些按钮和菜单


安卓手机删除应用时的操作、Potoshop软件顶部菜单等、Mac操作系统的底部应用等,无论我们怎么操作,鼠标都不会超过这些区域。







希克定律的定义


希克定律 — 原称希克海曼定律(Hick Hymalrs 1aw),是一种心理物理学定律。

一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。


希克定律的应用


希克定律的应用很广泛,不仅是在产品上,在生活中也随处可用。


和同事每天都会遇到的问题,一到中午,同事就会问,吃什么?每日一问,看着商场众多美食,真是发愁,但如果她换种问法:我们今天中午吃海底捞还是和府捞面,这样的询问是不是就节省思考和作出选择的时间?


遥控器的设计也是,看到下面两个遥控器的样式,你会感觉哪个好用,很明显是右边小米的遥控器,老人再不用教的情况下就可以自己操作,左边的拿起来我们要花很多时间是研究如何使用,可能刚学会,想进行下一个操作的时候又要去花时间研究,是不是很闹心?



猿辅导APP中,导航默认的是所有的课程,对于学员来说选择自己想要学习的课程,比较浪费时间,右侧的设计就是将我们不感兴趣的课程关闭推荐,剩下的课程大大缩短了我们选择和寻找的时间




格式塔的定义


格式塔(德式造型)是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体,被认为大于其各部分之和”的理论基础上。


格式塔的应用


在我们做设计的过程中,常用的是原则有:简单性、接近性、相似性、连续性、闭合性等



1、简单性原则


简单原理适用于设计中的三角形构图,均衡构图,对称构图,向心构图,摄影中的对角线,X型构图等。这些构图方式都是为了把复杂的信息元素通过简单的方式让观者易于理解。


58同城和爱奇艺首页都是均衡和对称的构图



2、接近性原则


一个页面中,如果两个元素是接近的,给用户的感觉他们之间就有相关性


在支付宝我的页面中,个人信息都是有相关性的,所以放一起遵循了接近性原则



3、相似性原则


我们的眼睛很容易关注那些复杂环境中外表相似的东西,可以利用相似原则组织好界面中的信息和层级关系。


相似性原则在UI设计中也很常见,网易邮箱、腾讯视频都采用了相似性原则



4、连续性原则


人的视觉有追随一个方向上的连续性,以便把不关联的元素联系到一起。


我们在APP中常看到列表也是连续性原则的应用




色彩心理学定义


在自然欣赏、社会活动方面,色彩在客观上是对人们的一种刺激和象征;在主观上又是一种反应与行为。色彩心理透过视觉开始,从知觉、感情而到记忆、思想、意志、象征等,其反应与变化是极为复杂的。色彩的应用,很重视这种因果关系,即由对色彩的经验积累而变成对色彩的心理规范,当受到什么刺激后能产生什么反应,都是色彩心理所要探讨的内容。


色彩心理学应用


  • 黑色:精致和力量

  • 白色:干净、精致、纯洁

  • 红色:勇气、激励、力量;也能激发欲望

  • 蓝色:冷静、安定、信任、安全

  • 黄色:乐观、欢乐

  • 绿色:平衡、可持续的增长

  • 紫色:皇权、精神意识、奢华

  • 橙色:友谊、舒适、食物

  • 粉色:平静、女性化、性


一说到美食,我们能想到的颜色就是橘色,暖色系,因为这个颜色会增加食欲

插播一个知识点:美团外卖选择的橘色,跟美食相关的颜色,我们可以理解,但饿了么平台为什么会选择蓝色而不是暖色系呢?饿了么是以科技为主导的,核心并不是美食,所以选用了科技蓝



在一些电商类网站都会将加入购物车、立即购买颜色设置为红色,因为红色可以刺激人的眼球,来增加点击的欲望,还有微信群和朋友圈的未读,都设置成红色



颜色也是影响人们的情绪,比如长时间在橘色的环境下呆着,会使人焦虑不安,所以一些餐厅在颜色、灯光选择上都会选择用一些暖色系,蓝色和褐色,会使人平静,适合一些酒吧;


但色彩也不能滥用,它是具有联系和含义的,例如:红色代表赤字,即经济困难;也可以代表警告、危险等;绿色代表环保、通行,所以在选用颜色上也要考虑它的含义和意义,要谨慎。




冯·雷斯托夫效应定义


冯·雷斯托夫效应告诉我们,某个元素越是违反常理,就越引人注目、令人难忘。

Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊,比如说有聚光灯照射,那么相比其他物品,受试者就更容易回忆起这件物品。


比如,下面这个红西红柿


如果你想要让某物引人们的注目,就要使它特殊化,可以通过色彩、尺寸、留白等方式来引起注意


例如:小红色的红色按钮、苏宁易购一套节日气氛的首页





奥卡姆剃刀定律定义


奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)又称“奥康的剃刀”,它是由14世纪英格兰的逻辑学家、圣方济各会修

士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”


奥卡姆剃刀定律的应用


我们在进行页面设计的时候并不是内容越多越好,信息飞速发展的时代,大家都讲究快、效率,我只要通过这个APP尽快达到目的为好,繁冗的功能对用户来说只会降低用户体验感,抖音APP底部的导航开始是文字加icon,后来发现图标会影响整体的效果,因为当视频播放的时候,下面的Tab识别度会降低,经过改版,将icon去掉,文字放大,CTR也上去了,之后小红书就开始参考抖音的改版:我不管你去掉的原因是什么,CTR上去就行



总结


一句话在回顾下文章的定律


7±2法则:一般人接受新事物的记忆容量大约是7,最多不会超过9

费茨定律:A和目标B的距离越长,所用时间越长;A大小越大,所用时间越短。

希克定律:选择越多,花的时间就越多,选择的数量增加,做出决定的时间也会跟着增加。

格式塔原则:常用的是原则有:简单性、接近性、相似性、连续性、闭合性

色彩心理学:颜色也是影响人们的情绪,选用上要谨慎

冯·雷斯托夫效应:某个元素越是违反常理,就越引人注目、令人难忘

奥卡姆剃刀原理:简单有效原理,去繁从简

转自:站酷-麦小兜Sarah 

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


如何复制网页上不能复制的文本!!!

seo达人

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

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

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网络有着更加精准的效率。支持医生运用机器跨医院操作手术等。

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

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

如何把产品的痒点变成爽点?

雪涛

新康众用户体验设计部 – 伊格:在细节(体验)决定「成败」的今天,设计该如何寻找支点撬动产品体验,甚至于是行业体验?

2007年1月9日,史蒂夫·乔布斯在 MacWorld 大会上正式推出了第一代 iPhone,至今已过去近 13 年了。为了带来更好的用户体验,第一代 iphone 在硬件的设计上,摒弃了以往的物理键盘,开发了「虚拟键盘」结合手势交互用于信息输入,无疑是当时智能手机行业内的一大颠覆式改革。

我们聚焦于「虚拟键盘」本身来分析,「虚拟键盘」在日常生活的输入场景中已经做得足够的「好用」、「」,甚至于近乎完美。在「体验经济」愈演愈烈的今天,各行各业为了打造更好的输入体验,都围绕着「虚拟键盘」并结合行业特性做着一些个性化的设计尝试,比如我们今天要讲的「汽车行业」。

行业聚焦

说到了「汽车行业」,我们首先从「汽车」本身开始说起,目前汽车共拥有两个「身份信息」,一个是车架号(VIN码)、一个是车牌号,在日常生活中我们最常接触的就是车牌号,其次才是车架号。

从互联网兴起至今,各行各业为了营造更好的服务体验,都走上了「互联网+」/「移动互联网+」的战略路线,当然「汽车行业」也不例外。围绕汽车本身衍生出了众多对 B 端以及对 C 端客户的汽车服务,如常见的「智慧停车、违章缴费、维修、保养、保险、车联网等」一系列汽车服务,均可以在线上场景中体验到。

我们在线上体验汽车服务的同时,首先需聚焦于汽车本身,其核心要素之一就是「汽车身份信息」,在体验流程中首先需要将车牌信息录入系统,才能便于我们后续更好的对服务进行体验(如:线上停车缴费、违章缴费、维保预约、保险理赔等众多与汽车相关的场景)。

那么在「汽车行业场景」中使用「系统键盘」输入车牌信息是否依旧能达到「好用」及「」的体验呢?经过测试后得出了结论:在使用「系统键盘」输入车牌信息时,虽然能够完成输入任务,但相较于日常生活中的输入体验,使用「系统键盘」输入车牌信息就显得不是那么的「好用」及「」了。

痛点解析

我们回到车牌本身来分析一下,使用「系统键盘」输入车牌信息,从输入体验的角度来衡量,在「行业场景」下,「系统键盘」为何只被评定为「能用」?

基于上述问题我们先从车牌开始说起,路面上常见的车是「私家车」和「警车」,从「国家车牌行业标准文件」中分析得出,常见的标准车牌是由「省份、城市、序号」三者组合而成的,其中具体信息又是由「汉字、英文、数字」构成的。

在「行业场景」下使用「系统键盘」输入车牌信息,不够好用、的两个主要原因如下。

痛点一:输入操作繁琐

使用「系统键盘」在进行车牌信息输入时,需要在汉字、英文、数字三者之间来回切换才能完成车牌信息的输入任务。

痛点二:无法达到标准化输入

使用「系统键盘」输入的车牌信息是否有效、是否符合国家标准最终还需要在输入任务完成后,依靠系统的校验机制来验证其有效性。

上面所述的问题,虽然还称不上是「痛点」,但是对于那些每天与车打交道的用户而言也算是一个「不痛不痒」的问题,在细节(体验)决定成败的今天,细微的体验问题我们也应当尽可能的让其变得「完美」。

设计策略

基于上述问题,通过洞察分析我们发现了「设计机会点/发力点」,以「虚拟键盘」为抓手,明确了设计策略,开始着手设计符合行业特性的「专用输入组件 」。 在「行业场景」下通过「专用输入组件」输入车牌信息,围绕「」(提高输入效率)、「防错」(定义防错机制使得输入的信息符合国家标准)两个目标进行设计,从而使其在「行业输入场景」下达到「好用」及「」的体验。

目标与方法

基于上述的设计策略,我们明确了本次设计的核心目标 :解决输入效率(提效)、解决输入出错(防错机制)。那么接下来我们分析一下国家对于汽车行业车牌标准的相关政策与规则,从中挖掘达到设计目标的方法。

1. 认识车牌

在做分析之前我们需要对其关键因素(车牌)有一定的认知,下面所展示的车牌基本涵盖了目前我国所有的车牌类型。其中包括常见的如「普通蓝牌」、「普通黄牌」、「新能源车牌」、「教练车牌」、「警用牌」等。

2. 车牌分类

为了使车牌信息变得更具条理性,我们对其进行一次分类,分类的依据「是基于他们相互之间的组合规则与共性特征而决定的」。我们将其分为四大类:「普通车牌」、「特种车牌」、「新能源车牌」、「特殊类车牌」。

具体分类细则如下:

  • 普通车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母」 构成的,这类车牌属于 7 位数牌照。
  • 特种车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母/汉字」 构成的,并且序号中 「汉字必须是车牌号的最后一位」 ,这类车牌属于 7 位数牌照。
  • 新能源车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母」 构成的,这类车牌属于 8 位数牌照。
  • 特殊类车牌:这类车牌因无共性规则,我们将其定义为特殊类。(这类国家特殊单位的车在我们的日常生活中/汽车行业内的工作中接触到的机会也不会很多)。

3. 定义设计范围

分类完毕后,我们定义一个设计范围,因为在设计时我们往往很难通过一套设计方案来满足所有车牌的输入场景,所以在设计时我们会围绕那些有规则的、有共性特征的车牌进行组件的设计,从而满足大部分的输入场景。

根据车牌的分类规则,我们将「普通车牌」、「特种车牌」、「新能源车牌」三大类,定义在行业输入组件的设计覆盖范围内。特殊类车牌虽然在日常生活中接触到的概率较少,但是我们也应当尽可能的满足其输入场景,通过自定义车牌号的方式,调用「系统键盘」来完成其输入任务。

4. 共性&差异

在明确了分类细节与设计范围后我们对范围内的三类车牌做一次共性与差异化的具体分析,以便于在组件设计时根据规则定义一些防错机制。(为了便于理解,防错机制将会在Demo阶段展示)

普通牌 & 特种牌:共性特征(组合规则一致、二者都属于7位数牌照)差异(特种牌的序号中多了一个「汉字序号」,并且汉字序号必须是车牌号的最后一位)。

特种牌 & 能源牌:

  • 共性特征:组合规则一致;
  • 差异:特种牌属于 7 位数牌照,且存在汉字序号;能源牌属于 8 位数牌照,且不存在汉字序号。

能源牌 & 普通牌:

  • 共性特征:组合规则一致;
  • 差异:能源牌属于 8 位数牌照,普通牌属于 7 位数牌照。

5. 分析总结

通过上述的几步分析,我们对国内的车牌有了一定的了解,并为其进行了归纳细分,定义了设计范围,分析了范围内各类车牌的共性以及差异,最后我们结合「国家车牌行业标准文档」与上述几步的分析结果,得出以下结论:

  • 常见的标准车牌号是由「省份、城市、序号」组成的,省份位的字符必须是汉字(各省、自治区、直辖市简称),城市位的字符必须是英文(发牌机关代号:A~Z),序号位的字符必须是数字/字母组合(A~Z / 0~9),特殊序号位的字符必须是汉字(港、澳、挂、学、警)且汉字序号必须是车牌号的最后一位。
  • 行业输入组件定义为两种:省份输入组件(因国内省份较多所以将其作为一个独立的组件)、车牌号输入组件(该组件由英文、数字、汉字序号组成)。
  • 特殊类车牌:这类车牌虽无共性规则,但需要满足其输入场景,通过自定义车牌号的方式,调用系统键盘来完成其输入任务。

具体方案 – 省份输入组件

省份输入组件的结构分为两部分。

第一部分是文字按钮,点击后调用「系统键盘」输入自定义车牌信息。

  • 满足特殊类车牌号的输入场景;
  • 满足一些自定义信息的输入场景。例如我们通过调研了解到,汽车维修行业他们有时候不单单会录入车牌信息,偶尔还会录入一些特殊的车牌代号,比如洒水车001、警车003等。

第二部分是车牌号的省份简称(各省、自治区、直辖市简称)。简称部分采用了国家地理行政区的划分原则,对各区域内省份依次排序(排名不分先后)。

下面说明一下按照行政区划分原则做为省份排序的好处。

以华东区为例,该区域包含了山东、江苏、安徽、浙江、福建、上海这几个城市,在同一个行政区内必然会有一/多个经济体系相对发达城市。城市一发达,附近省份的外来车辆就会相对较多,例如在江苏地区总会看到安徽地区的车辆一样 。

现在的软件基本都使用了定位技术,我们在外省进行车牌信息的录入时,系统是会自动获取并填写当前所在地区的省份简称,以降低用户使用键盘的输入次数。如果我们是外地牌照车辆则需要将当前省份简称删除,再修改为车牌的实际省份简称。

按照行政区作为省份排序的好处:在修改省份简称时,相邻的省份在排序上会比较接近,这样用户在查找、选择对应省份时比起按首字母排序/其他方式的排序,查找效率会相对更快。

具体方案 – 车牌号输入组件

车牌号输入组件分为三部分,第一部分是自定义车牌号的文字按钮 + 完成操作按钮;第二部分是汉字序号 + 数字序号的按键;第三部分是英文序号以及删除按键。

其中英文字母按键是由 25 个字母组成,缺少了字母 i ,因为大写字母 i 与数字 1 的字体设计及其相似,导致两者很难辨别,所以在「行业标准文件」中明确指出,字母 i 不可用于组成车牌信息。

当然「行业标准文件」中还指出了另一个字母,也不可用于组成车牌信息,他就是字母 O ,原因与字母 i 一样,大写的字母 O 与 0 及其相似,导致两者很难辨别。

那么为什么我们的组件中还要包含字母 O 呢?因为在过去字母 O 是作为公务车专用代号,存在于车牌号的第二位(城市代号位)俗称「O牌特权车」。随着 O 牌泛滥,特权肆意,有的省份就将 O 牌由公务专用改为了普通民用,还有的省份直接取消了 O 牌,当然还有部分省份保留着 O 牌作为公务用车专用代号,所以我们在组件设计中保留了字母 O。

DEMO – 演示

为了更好的展示设计方案,以及便于大家理解其中的设计细节,下面我们通过 DEMO 的方式,定性的模拟几种输入场景,通过「专用输入组件」并结合防错机制进行车牌号的录入。

场景一:车牌号省份简称修改

基于地理定位技术,进入信息填写页面系统会默认获取到当前地区的车牌省份简称,此时如果是外省车辆,则需要对省份简称做修改变更。其实车牌号第二位也能通过定位技术获取到,但是目前我国存在一个城市拥有多个发牌代号的场景,例如苏州市发牌机关代号「苏E」、「苏U」,包括一些直辖市也存在这种情况,所以这也是城市代号不默认获取的直接原因。通过定位技术获取信息本身是一种提效的策略,但是基于上述场景反而可能会适得其反,

场景二:输入第2~5位车牌号

车牌号的第二位必须是英文,此时数字序号按键与特殊汉字序号按键为禁用状态。当第二位车牌号输入完毕时,数字序号按键变为可用状态,此时无论输入的第二位车牌号是否为字母 O 都必须将其禁用,因为字母O只会存在于车牌号的第二位。

场景三:输入第6~7位车牌号 – 完成普通车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号。当第 7 位车牌号输入了英文/数字时,禁用特殊汉字序号,至此普通车牌号输入完毕。

场景四:输入第6~7位车牌号 – 完成特种车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号,因为特殊汉字序号只会存在于车牌号的第 7 位。当汉字序号输入完毕后,删除按键以外的其余按键全部禁用,因为标准的特种车牌只有 7 位,至此特种车牌号输入完毕。

场景五:输入第6~8位车牌号 – 完成新能源车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号。当第 7 位车牌号输入了英文/数字时,禁用特殊汉字序号。当第 8 位车牌号输入了英文/数字时,删除按键以外的其余按键全部禁用,因为标准的新能源车牌只有8位,至此新能源车牌号输入完毕。

场景六:演示特殊类车牌号的输入方法

特殊车辆在我们的日常生活中/汽车行业相关业务中接触到的概率较少,但我们也应当尽可能的满足其输入场景。点击自定义按钮后,弹出系统默认键盘,此时车牌号输入框中内容清空,文案变为「请输入自定义内容」,用户将信息输入完成后系统不做强制校验。

最后,我们又通过定性的方式,基于两个输入场景对组件的输入效率进行了模拟预估,得出结论:使用「专用组件」输入车牌信息,相比较于使用「系统键盘」输入效率均大幅度得到了提升。

总结

俗话说「艺术产生情绪,设计解决问题」。设计是需要基于一定的规则体系之内,倘若设计脱离了商业/行业规则,缺少了解决问题的能力,那么其结果就可能变成了一个耐人寻味的艺术品。

在细节(体验)决定成败的今天,如何将「痒点」变为「爽点」,如何通过细微的设计优化改良产品的用户体验甚至于影响到整个行业的体验,这正是我们作为产品人、体验设计师该深耕发力的地方。

文章来源:优设

交互设计师如何梳理业务需求?

雪涛

需求整理的现状

写这篇文章的初衷,是在实际工作中遇到 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档