首页

使用 vue 1.0.3 $set 函数遇到的坑

seo达人

vue 1.0.3  中 $set 函数是动态改变或添加一个 data 中的属性值时 属性 key 不可以使用纯数字。



例如:



var app = new Vue({

     el:"#app",

     data:{

         test:{

             k1:'v1',

             k2:'v2'

         }

     },

     methods:{

         changeTestValue:function{

             // 动态改变 test 中某一属性的值

             var key = 'test.k1';  // 改变 test 属性中的 k1 的值

             this.$set(key,'changev1');  // 此处执行没有问题

            // 改变 整个 test 的值可以使用

            this.$set('test',{k1:'change-demo-v1',k2:'change-demo-v2'});   // 此处执行没有问题

            // 动态给 test 增加一个属性  k3

            this.$set('test.k3','test-add-value3');   // 此处执行没有问题

 

 

            // 此处有坑 当你的 属性为全数字的时候,则 函数无效,不报错,但是也添加不上值。

            // 例如

            this.$set('test.123','test-add-123');  // 此处执行不报错,但是也没有效果。

 

 

            // 所以在使用老版本vue的时候尽量避免 属性 key 未纯数字,或其他特殊字符。

         }

     }

});



除了这个坑以外还有另外一个坑,不过没有具体试验,

watch 监听某一值得变化,好像有点问题, 实际结果是只要 data 中的任意一个值发生变化都会被捕捉到。







最后还是使用 vue 2.x  以上版本吧,bug 少很多。







另外 $set 函数在2.x 中使用方式有所变化。







this.$set(target,key,obj);



target 对象类型,是需要赋值或修改的对象,



key  是字符串类型, 是 target 对象的属性



obj  可以是字符串,可以是对象类型,是 你要修改的或增加的值


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

风靡社交圈的产品「绿洲」,有哪些值得关注的设计细节?

涛涛

这几天,各个产品群设计群又被「绿洲」的话题刷屏了,自从8月29日新浪悄悄上架了这款产品后,一时间中国版ins、意图称霸图片社交、趁小红书下架抢占用户等等说服层出不穷。今天我们就从一个设计师的角度,看看绿洲这款产品有什么不同。

绿洲是什么

绿洲是一款社交产品,从已经看到的产品功能和内容上,类似ins,也就是说他是一款图片社交产品,由新浪推出,目前处于内测阶段,除官方邀请的kol外只能通过邀请码注册使用。

社交产品在国内难做大家都知道,原因也不必再说,但社交产品一旦做成产生的巨大利益和助推力又让国内大大小小的公司都在向这个宝藏发起冲击。那么为什么新浪选择的是图片社交产品呢?

为什么会选择图片社交

首先是基于国内市场,还没有出现一家独大的图片社交产品,不像国外已经有了ins,国内的图片社交领域勉强还能算作是「蓝海」,加上最近小红书下架导致市场有短暂的空白,大批kol和内容生产者出走。也正是推出这款产品的良好时机。

当然也有一种说法是:国内的社交产品形态存在「跳代」的现象,从文字社交直接跳到了视频社交,并已经有了很成熟、用户规模极大的产品抖音,所以从产品发展形态来看,图片社交产品在国内并没有什么生存土壤。这里我直接说出自己的观点:我认为图片社交在国内还是有机会的,而且机会不小。对此我有以下几个维度的思考:

1. 信息含量和传达效率

首先不可否认的是图片的信息含量是远远大于文字的,使用图片能够更的传达信息和更丰富的情感,想一想过去很多伟大的文学作品往往需要用一本书来体现某些情感和精神。但是在科技社会里,往往是一张摄影作品更能震撼人心,图片中包含的信息更加直观,人物、场景、颜色、故事都可以直接呈现在用户面前,而不需要通过文字进行描写,也不需要运用很多写作技巧进行铺垫。这并不是说图片比文字更优秀,而是说图片的形态在互联网产品中可以更的传达信息和情感。

说到这可能有朋友会说:图片的信息和情感的传达更,那视频也同样比图片的信息含量更多,更,为什么图片社交还有机会呢?这就要说到下一个维度—内容生产门槛。

2. 内容生产门槛

无论是图片社交还是视频社交,内容都是产品中极重要的一部分,例如现在大家在看抖音时,大部分高质量内容都是由专业的内容生产者制作的,其中涉及到选题、剧本、拍摄、剪辑、后期、压缩等等流程,即使不是专业的团队生产也是身兼数职的多面手生产者。流程一长,工作量也就大大增加了。工作量一增加,门槛就会变高。如果不是为了靠抖音赚钱、如果不是为了增粉变现,又有多少人能投入这么多精力和时间去生产内容?内容不多、质量不高又怎么吸引更多用户来使用-参与-生产最后形成闭环?

绿洲则不是这样,虽然用户可以上传视频,但主要的内容还是图片,拍一张图片的各种成本要比拍一段视频小太多啦,结果就是有更多的内容生产者可以参与进来,而不是被高门槛拦在产品之外,当你生产了一段内容,至少要发给几个亲朋好友来看看吧?即使只在产品内部发个动态,如果有人为你点赞、评论、又关注了你,至少再拍一点的动力会大一些吧?这样循环下去,内容、用户就全部都有了。举个极端一点的例子,如果微信只能发图片,那么还会有这么多人使用吗?原因也是图片的生产成本要大于文字(非文学作品的文字)。所以我认为,内容生产门槛也是绿洲的优势之一。

3. 信息接收程度

最后一点则是大众用户的信息接受程度。我们可能从新闻报道上经常能看到体育记录的突破,例如几十年前科学家预言了人类短跑极限早就被突破几十次了。或者是看到人类平均寿命在过去几百年的时间里提高了几十岁。这里我想说的是:当互联网尤其是移动互联网普及之后,人类对于信息可接收量增加了多少?过去看纸质书和现在拿着手机,每天阅读文字图片视频等等能达到过去的多少倍?这里我没有找到专业机构的研究报告。但是这个增长程度我想大家的意见应该会十分一致。

信息接收能力的提高会倒逼着改变产品形态、过去我们每天只能接收2000个文字和50张图片,所以我们习惯看报纸。现在我们每天能接受10000个文字和300张图片,所以我们在用头条用微信用微信用抖音。当用户有了适应一项改变的基础,那么必然会出现满足用户这种进化的产品。抖音是,绿洲可能也是。

4. 磨刀霍霍的kol和网红

前几年无论公众号、头条号、直播很是催生了一批实现财务自由的幸运者们,但更多的确实没有抓住平台早期红利的玩家,在众多自媒体和直播平台都成熟之后,想要从中获利是越来越难了。这时候出现了一个新兴的、并且很有潜力的新平台。那这些错过了上一波机会的预备役kol和网红们会不会蜂拥而至呢?而更多的现有kol和网红为了巩固自己的地位、扩大影响力和粉丝规模也同样会去参与一番。去了之后为了自己的利益更是会给更多人安利这个产品。

说他有潜力是因为它占据的天时、地利与人和。天时已经说过,市场潜力巨大又缝小红书下架,地利则是国内暂无一家独大的图片社交产品,人和则是拥有几亿活跃用户的微博作为后盾。如此的产品,再加上利益驱动。想必内容方面已经问题不大了。

5. 内测+邀请的机制

这几天下载了绿洲的朋友们应该都知道,如果你没有邀请码的话即使下载了也是不能注册的,整个产品还处于「内测阶段」 。只有前期官方邀请的部分kol和少量内测用户才能使用,每个内测用户又只能邀请一定数量的更多用户。并且整体内测数量也有限制。截止9月4日下午内测人数已经满了,之后即使有邀请码也不能注册使用。那么这个内测+邀请机制有什么好处呢?

有种说法是饥饿营销,利用用户越得不到越想要的心理来获取更多用户。但这种说法有点说不通,因为内测总人数是有限制的。并且现在不是几年前了,可能今天你内测限制注册人数那明天用户就把你忘了,毕竟现在产品这么多,娱乐活动数不胜数,已经不是十年前那个产品稀缺的时代了。我大概有两点猜想,一是产品方希望通过内容试水,看看产品在市场上的反馈,进而做出符合国内用户习惯的修改再大规模推广(嗯,之所以要做符合国内用户习惯的修改是因为他太像ins了~),二是产品方希望变「爆火三天死」为「细水长流」,之前的马桶MT、聊天宝、包括子弹短信等等产品在刚刚发布的时候都是非常火爆、用户在短短几天之内就过了百万大关,但是现在呢?还有多少人在继续用?增长曲线还敢贴出来吗?而使用了内测+邀请机制则不同,一方面可以保持用户维持一定数量的增长,一方面又不会因为用户的三分钟热度而快速冷却,对于社交产品而言,如果你身边有朋友在用,那你继续用的概率就会大很多。如果你发现你身边的朋友在用,那即使你已经卸载了也有一定可能重新下载回来再用一用,也就是用细水长流的方式不断召回之前的用户,用留存做增长。

上面说了一些我为什么认为绿洲(或其他图片社交产品)有一定生存空间的原因。下面我们来看看绿洲中一些很不错的设计细节。

一些设计细节

1. 条目巨大,更重视内容质量

用户的一条动态(在产品设计中我们一般习惯称之为条目,下面以条目称呼它)往往占据了一整屏的空间,作者使用的还是长度较长的全面屏手机依然如此。这种设计可以在一定程度上说明产品方比较重视内容。做产品设计的朋友应该都知道:条目占据的空间越大一般包含的信息量就越多,也更容易形成转化,对应到绿洲中这个转化就是点赞、评论、关注等等用户的操作。一旦用户做出这些操作,就会对产品形成更深度的使用习惯,也就有更多可能性变成活跃用户。当然条目占据空间过大同样有风险,也就是如果这一条内容的质量不够高的话用户可能会产生流失,因为用户可能并不会继续向下滑动去看下一条内容了。所以一般内容质量较高的产品条目占据的空间较大,质量较低的产品条目占据空间较小,希望一屏之中能够容纳更多数量的条目,用户数量换质量希望其中能有一条对用户形成转化。所以绿洲的这个设计细节作者猜测是产品方重视内容的体现。

2. 上传图片,实时看到效果

如下图:

当我们在上传图片时,页面上部为图片的放大展示图,页面下部分为缩略图,用户可以在选择图片时实时看到自己选择的图片的细节,举个例子,如果某漂亮妹子想发张自拍,但是相机里保存的是几十张连拍照片,此时她就可以在选择图片时直接看到自己当前选择的图片是否是自己最满意的一张。而不需要上传后才能看到,或是切换到系统相册中去查看,再记住那张自己最满意的照片的位置再回来重新上传。

我们常见的产品中上传照片时一般都是直接显示缩略图,好处是页面效率高一屏可以展示更多图片,坏处是不能直接看到照片的细节。这种设计比较好的平衡了这个问题。关于上传图片的优秀设计我们前几天还分享了ZAO里面的一个设计案例,下图是ZAO核心流程中的两个页面,是选择「影视剧片段」和「上传替换素材」的页面:

在此页面选择要替换的人物,点击后进入下图上传素材,选择从相册选择。

我们可以看到,当我们选择从相册上传素材进行替换时,系统已经自动对相册内的图片进行了判断,在用户上传照片之前就对照片清晰度是否合适进行了提示,而不是上传后再给一个弹框。

作者对这个设计细节大致想法如下:

  • 提高操作效率
  • 避免上传后再进行提示打断用户自然的操作流程。
  • 避免因操作与预期不符产生的转化率降低
  • 加快内容生产速度,同时也就加快了产品传播速度
  • 避免因上传素材质量差而导致平台内容平均质量下降
  • 大家可以看到上图中一张共享单车的照片的清晰度是满足要求的,但是很明显我不能用它替换角色 。如果加上人脸检测的话效率会高(当然成本也会更高)。

与上面案例相关的东西作者还想起了闲鱼:

一是闲鱼中,当用户上传的商品图片比较模糊时系统会提示用户重新上传,以提高二手物品的卖出速度。这里的设计是在用户上传图片进行提示,作者觉得就没有ZAO中这个设计体验更好。

3. 更强、更方便的互动方式

社交产品中,用户之间的互动率是一个十分重要的指标,对内容的点赞评论可以很大程度上加强用户粘性,使用户与用户之间产生关系链,这样用户流失的概率就会小很多。一般的产品中常见的功能像点赞评论在绿洲里也有了不一样的变化,并且体验还真的不错,如下:

当用户对某一条消息产生了互动的倾向时,可以直接使用三个表情表示不同的情绪,分别是爱心、鼓掌和笑哭,如果想要评论的话只需要点击WOW按钮系统就可以自动生成一句评论,不需要用户自己思考写什么内容,这样用户进行评论操作的成本就大大的降低了。如果对生成的评论不满意的话还可以再次点击生成不同的评论。

4. 不足的用户认知负荷

当然作者同事也看到了体验不是很好的设计细节,如下图产品中使用了太多无文字按钮,导致根本不知道这些都是什么功能,绿洲对自己的介绍是更清爽的朋友圈,如果说是为了让界面更干净简约才使用了这样设计的话我觉得有些本末倒置了,国内用过ins的用户毕竟还是少数,对于大部分用火狐来说绿洲还是一款陌生的产品,在陌生的产品中使用这种不能明确表达功能含义的无文字按钮则让用户十分迷茫,大大增加了认知负荷。

昨天晚上作者在家附近的面馆吃饭,正在等着自己的油泼面、羊肉串、拍黄瓜、小酥肉、酸梅汤的时候看到了一件事:某50岁左右的大叔点菜说想要一份凉皮。

服务员问:您是要麻酱凉皮的还是秘制凉皮?

大叔犹豫一下,问:秘制凉皮是什么的?

服务员答:就是有凉皮和面筋掺一块,放上醋、盐、香油、辣子,酸甜口的可辣可不辣。

大叔继续犹豫了一下说:那给我来个麻酱凉皮吧。

故事到这开始有点意思了,这个用户(大叔)对秘制凉皮是没有概念的,虽然经过服务员解释之后明白了是什么,也知道了口味,但是对于「秘制凉皮」这个概念的熟悉程度还是比较低,所以最终没有选择它。这和我们在进行产品设计时对一些文案的设计很像。大家第一眼看过之后能明白是什么意思吗?反正我是没有明白。不明白就会产生认知负荷。也就会影响向下的转化率。当用户点击几次没有找到自己想要的东西之后,他也就走了,去哪了呢?可能是「商城」「历史文章」「限时促销」这些他明白是什么意思的地方。

你只是绿洲,你还不是微信,这样的设计有些为时过早了。

昨天我故意吃的比较慢,观察了一下麻酱凉皮和秘制凉皮的购买人数,在大约40分钟的时间里,大约有7人选择了麻酱凉皮,2人选择了秘制凉皮。服务员大约解释了4次什么是秘制凉皮,每次大约需要20秒,加上顾客犹豫的时间,这40分钟里服务员大约多花了3分钟时间解释、等待用户做选择。

如果把这种场景放到我们的产品设计中则意味着更低的效率、更少的使用时间、更低的转化率。以及推出新功能之后更少的使用率。现在很多产品中对功能的命名都基本一致、一些常规图标的样式也都基本一样。目的也就是为了减轻用户的认知负荷。

转发和重定向的区别

seo达人

简单介绍

多个页面和 servlet 组成了一个基于 Java 的 web 应用程序。JSP 使用转发和重定向两种方式将控制权从一个 servlet 传递到另一个 servlet 或者 JSP。



转发(Forward)方法: 将请求从一个 servlet 转发到 web 应用程序中的另一个资源,这个资源可以是一个 servlet、JSP 页面、或者 HTML 文件。



重定向(Redirect)方法: 方法将请求重定向到另一个 web 应用程序。使用转发( Forward )方法无法完成此操作。如果一个重定向命中了同一个 web 应用程序的不同资源,那么它使用的 URL 将与原始请求的 URL 不同。如果你不想响应一个请求,你可以将请求重定向到一个不同的 URL,然后浏览器将会将你的新请求重定向到你提供的新的 URL。这篇文章详细解释了两种方式的不同之处。



什么是转发(Forward)

在基于 web 的系统或者应用程序中,通常需要在不同的资源或 JSP 之间转移控制权。例如:你如希望从电子商务网站下单,则需要先进行注册,然后才可以继续。如果你还未在他们的系统中注册,那么购物车界面可能会将控制权转移到负责注册过程的 JSP 表单。转发( Forward )方法即是用于此目的。它用于将请求从一个 JSP 转发到统一上下文中的另一个资源。



什么是重定向(Redirect)

此方法也用于转发 HTTP 请求,但与转发( Forward )不同的是:它是一个两步过程,其中重定向发生在客户端到不同的应用程序。Redirect 方法将用户重定向到新的 URL。客户端的浏览器会自动对来自服务器中的重定向表头中指定的 URL 发出新的请求。它需要与客户机进行往返通讯,因此相对来说会比转发( Forward )方法慢些。



转发(Forward)与重定向(Redirect)区别

转发(Forward)与重定向(Redirect)的描述

Forward() 方法用于将请求从一个 JSP 转发到另一个 JSP,或从一个 JSP 转发到另一个 servlet,或从一个 JSP 转发到 web 应用程序的另一个资源。控制是在容器的内部传递的,浏览器/客户机不参与此过程。Forward( )方法在 RequestDispatcher 中声明。



Sendredirect () 方法在 HttPServletResponse 中声明,用于将客户端请求重定向到不同服务器或上下文中可用的不同 URL。 通过重定向,您可以将浏览器重定向到完全不同的应用程序。



客户端是否参与转发(Forward)和重定向(Redirect)

这两种方法之间的一个关键区别是 web 容器在 Forward() 情况中处理了所有的内部进程,而且 URL 在客户端的浏览器中不会改变,因此客户端/浏览器不会参与其中,从而使它们完全不知道动作已经发生。



而在 Sendredirect () 的情况中,该方法设置适合的头部信息和正文内容以将请求重定向到不同的 URL 中,浏览器付负责将新的请求发送到客户端可见的 URL。



执行控制

当在请求时执行 Forward() 方法,当前的请求会被转发到另一个 JSP 页面,对当前 JSP 的处理也会被终止。请求可能会被转发到另一个用 Java 编程语言编写的 servlet,或者一个静态的 HTML 页面。



一个 SendRedirect() 请求只是简单告知浏览器转到另一个 URL,将执行控制发送到 web 应用程序之外。它使用一个两步的过程来指示浏览器的 URL 发出另一个将控制转发到另一个客户端的请求。



速度

Forward () 在服务器内运行,执行速度比 SendRedirect () 快。



重定向必须通过浏览器,然后等待浏览器发出新的 HTTP 请求。 一个重定向使得服务器发送 HTTP 响应状态代码 302 和一个包含新的 URL 的位置头到浏览器,并且在浏览器收到状态代码 302 之后,它对位置头中的 URL 发出一个新的请求。 这需要与客户机进行往返通信,这使得它比 Forward () 相对慢一些。



转发(Forward)和重定向(Redirect)比较图表

转发(Forward) 重定向(Redirect)

用于将请求从一个 JSP 转发到另一个 JSP,或从一个 JSP 转发到另一个 servlet,或从一个 JSP 转发到 web 应用程序的另一个资源。 用于将客户端请求重定向到不同服务器或上下文中可用的不同 URL。

Forward( )方法在 RequestDispatcher 中声明。 Sendredirect () 方法在 HttPServletResponse 中声明

不涉及客户端/浏览器,web 容器在内部处理该过程。 当客户端将 URL 作为一个新的请求后,控制权将会转移至客户端或浏览器。

当一个组件执行业务逻辑并与另一个组件共享结果时,它最有效。 当客户端应从一个页面重定向到另一页面时,此方法效果最佳。

它在服务器内运行,并且比重定向执行得更快。 它比转发慢,因为它需要与客户端进行往返通信。

使用时,原来的 URL 请求不变。 原始的 URL 请求会改变。

两种资源都必须属于同一上下文。 将请求重定向到不属于当前上下文的其它 URL。

转发(Forward)和重定向(Redirect)总结

学习转发方法和重定向方法之间的区别是 Java 开发人员最重要的部分之一。 虽然控制器可以在处理请求结束时执行转发(Forward)或重定向(Redirect)方法,但它们有自己的一组用途。



大多数情况下,您会使用 Forward () 方法,因为它比 SendRedirect () 稍微快一点,而后者实际上需要与客户机进行往返通信,使其比 Forward() 更慢。 通过重定向,你可以将浏览器导向到另一个应用程序。 这是转发无法做到的。



简而言之,当一个组件必须执行业务逻辑并与另一个组件共享结果时,转发(Forward)工作效果最好,而当客户端应该从一个页面重定向到另一个页面时,重定向(Redirect)工作效果最好。



以上内容翻译自:

Difference Between Forward and Redirect。

能力有限,还望斧正。

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

敏捷用研的最佳实践—如何让好的设计快速落地

涛涛

2019年7月20日,UXRen北京举办了《如何通过体验设计赋能产品增长》的沙龙分享,本文基于嘉宾 何晓頔(搜狗高级用户研究工程师)的现场分享总结而成。

何晓頔2015年开始从事用研工作,2018年加入搜狗,目前在搜狗搜索担任用户研究工程师;期间支持搜狗搜索相关产品的用户研究工作,完成搜狗阅读app、搜狗搜索app、搜狗图片搜索改版研究,搜狗医疗搜索系列研究,搜狗翻译app调研等项目;擅长全局思考问题,综合考虑各方诉求,通过研究方法的熟练运用,需求的深度解读,结果的产出,不断提升用研的影响力及价值。

 

沙龙笔记:

1. 为什么要敏捷用研

由于用研资源的紧张,传统研究模式周期长,使得用研游离在项目边缘,融入难,导致时效性跟不上整个项目的推进,出现信息不对等的情况,从而造成研究方向的偏差,而且研究结果也会和设计、产品的需求脱节,造成落地难的问题。

敏捷用研可以很好的解决这个问题,它可以很好地融入在项目的各个阶段中,能够在3-5天内地完成调研需求,真正融入到整个项目的流程中,在每个阶段都以结果导向的解决问题,形成每个阶段的连接器。所以说他以用户思维为核心,通过用研的驱动性,增加用户在整个项目中的参与度和体验感,不仅能够实现成本的减少,还能提高响应的效率,实现信息层面的对等,还原用户的真情实感,性价比高的同时还提升了用研的价值。

敏捷用研可以在敏捷项目的各环节中发挥作用,而且在不同阶段可以有针对性的解决问题。

  1. 概念验证:
    在规划阶段可以进行概念的验证,挖掘用户需求,以矫正概念方向;
  2. 方案验证:
    开发阶段可以对方案进行验证,对方案进行优化,提升效用;
  3. 体验评估:
    测试阶段可以进行体验评估,以减少产品的使用问题,及时进行优化调整;
  4. 改版调研:
    迭代阶段可以进行改版测的调研,以获取用户对改版效果的评价,收集需求,为迭代提供需求输入。

 

2. 敏捷用研案例:阅读书城改版研究

2.1 改版前

需求分析

  • 明确改版目标:如何提高首页CTR
  • 沟通当前产品出现的问题:书城页改版时间已久,现有的产品功能及形态已不能满足用户需求

用户点击行为研究

  • 了解用户对旧版书城页的浏览及访问行为
  • 了解首页各模块流量分布(点击热力图)

书城结构布局研究

  • 分析书城页的结构布局,产品功能点,产品交互、视觉、运营亮点
  • 找到旧版书城页问题
  • 竞品分析:QQ阅读、掌阅、书旗

2.2 改版中

用户需求挖掘

  • 挖掘用户阅读小说的习惯、用户阅读的心理模型、用户找书的场景及途径
  • 用户在app中找书的痛点,探索可能的机会点
  • 方法:用户体验地图

搜索行为探索

  • 用户搜索时找书难、模糊搜索找不到书
  • 了解用户日搜索query分类、 query与书单的匹配度,搜索请求量等相关用户搜索需求

2.3 改版后:改版效果评估

  • 整体CTR改版效果
  • 各改版模块CTR

2.4 项目合作模式

 

3.   敏捷用研经验

3.1 招募策略——健全流程

招募问卷设计

  • 招募问卷模板化
  • 设置预先摸底的问题

招募渠道

  • 充分利用用户群
  • 完善内部招募渠道
  • 周围朋友

招募用户特征及数量

  • 根据实时调研结论,不断调整
  • 5个用户为基础,随着研究需要逐渐增加

奖励机制

  • 在能力范围内,提供有一定吸引力的奖品

3.2 研究策略——模板化、透明化

模板化:搭建问题包,分门别类、系统整理,随时调用、整合

  • 访谈提纲设计模板化
  • 问卷设计模板化
  • 数据分析模板化

过程透明:边访谈边总结,根据需求,随时调整、直到数据样本趋于稳定

 

3.3 沟通策略——循序渐进

结合迭代研究模式,从小范围调研起步,与客户及时共享研究进度和成果,循序渐进:

  • 随时响应
  • 尽早汇报
  • 持续沟通
  • 忽略形式

3.4  参与策略

  • 全民调研,整合设计和产品资源,配合进行研究,提升效率

3.5 小结

敏捷调研不是为了快而快,而是快速解决产品需求和设计问题打造好的体验!

【Q&A】 宝珠、殷朝、何晓頔答现场观众问

问题1:内部用户招募。国企,公司logo优化调研, 因为时间和成本的关系,邀约的是公司的内部员工(年龄集中在40-50岁区间段),调研的结果内部员工更偏好原logo的微小变化的版本,与设计方期望差别非常大,想知道是否是不应该找内部员工测试。

回答:就上述问题,不建议找内部员工测试。

内部招募是一种短平快的用户招聘渠道,但是,

  1. 内部招募需要考虑公司的特点和情况,内部招募更多适用于内部用户与实际用户层贴合度高的情况,且如果调研方有资源,对时间成本要求不是非常高的情况下,还是建议找真实的潜在的用户。
  2. 内部招募需要考虑测试内容和人口学的关系,比如上述调研的问题在于logo类调研不适宜找内部员工做调研,因为对品牌认知评价来讲,公司员工的属性本身就是一种较大的影响变量,会影响品牌认知评价判断。

 

问题2:概念测试。概念型产品可以用电话访谈的形式进行测试么

回答:概念型产品,由于属于市场上未出现产品,很难在电话中通过语言描述的方式让用户理解和想象出来,因此,概念类测试不建议用问卷和电话访谈的方式,建议通过面对面访谈+高保真原型展示的方式进行测试,如果实在满足不了高保真,哪怕线框的示意图都比单薄的语言描述更强。

 

问题3:用研考核机制。用研的输出建议,有些被采纳,有些不被采纳,采纳的建议到产品成型很多已不是建议的“原型”了,如何衡量用研结果的直接作用。

回答:

  1. 摆正心态,用研不是万能的,是用户和公司之间能保持连接的纽带,用户侧的信息输出,建议采纳过程中需求方需要考虑的问题很多,产品KPI、产品的方向、设计的合理性、开发资源等等。
  2. 用研和需求方之间不是对立的,衡量用研结果的价值不应该是去“抢功劳”,跟合作方在价值上“分清楚”来证明自己的价值,而是与你的合作方“和谐相处”,通过“共创式研究”,以共赢的方式分享结果。
  3. 用研KPI设定:
    1)资源角度,KPI定为服务满意度,即把自己当做“甲方”里的“乙方”,需求方给用研的满意度评价(如邮件、正式的夸张、满意度调研,不限形式);

  1. 2)OKR的角度,用研的核心价值为“洞察”,回溯哪些洞察结果可以服务到公司的大目标上。这里依然需要注意的是,用研的定位更多为服务型的“资源”,“资源”必须嫁接在业务上,不要隔离业务衡量用研的价值,用研的价值更多体现上帮助其他部门做“洞察”上,无法决策后期需求方的产出方向,但只要是“有意义的洞察”都是有价值的。                文章来源:uxren

全球都在用的Booking,是如何做设计改版升级的?

涛涛

每一次学习改版案例,不仅仅只是去看在视觉层面的变化,更多的应该是要学习到作者改版背后的思考。为什么要这么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多东西要去思考。所以,带着问题并结合自己实际中所做的项目来看案例,应该会是一个很有收获的过程。

项目背景

Booking.com缤客 是一家荷兰初创公司,并已经发展成为全球最大的旅游电子商务公司之一。
在Booking上,旅客可以选择世界上任何一处的住宿地点,包括公寓,度假酒店,民宿,五星级豪华度假村,树屋甚至冰屋等等。每天,通过平台预订的房间数超过155万。无论是商务旅行还是休闲旅行,人们都可以快速轻松地预订到理想的住处。

竞品分析

自从Booking发布以来,许多竞争对手都采用类似的商业模式疯狂跟进,抢占市场,并且在某些方面比Booking本身做的还好。

在调研的前期阶段,我去搜集了一些竞争对手和类似的平台,分析UI,用户体验,用户地图,信息架构和关键功能。但是我并不会花太多时间过于深入的去分析这些产品,因为我希望将重点放在Booking这个产品本身的诉求上。

使用场景

在之前的调研过程中,我发现了许多不同的使用场景,经过汇总归集,我集中关注以下3个场景:

  • 场景1:用户知道其行程的日期和目的地(默认场景)
  • 场景2:用户明确了日期但对其旅行的目的地不清楚
  • 场景3:用户知道目的地但不确定其旅行日期

典型用户

在进一步的研究中,我明确了4位具有不同需求和不同目标的典型用户,这些数据对于改善不同用户的体验非常有用。

这个分析的目的是通过梳理最佳的用户流程并提升产品体验,来为不同需求的用户提供最好的用户体验。

△ 数据来源:在线研究和用户访谈(30个用户样本)

用户反馈

收集用户评论,从中我收到了很多有价值的反馈,这些评论中没有特别明确指出是可用性或功能性的问题。我将这些反馈分为4类(译者注:对反馈的问题进行提炼整理):

  • 预订被取消
  • App的Bug
  • 投诉的处理效率
  • 反馈的进度

毫无疑问,最相关的是预订被取消的问题。太多用户会注意到不合理的费用或与房间的主人取得联系时遇到困难。

用户访谈

基于30个用户样本,我试图获得进一步的用户反馈,从中注意到以下的几点事实:

  • 与其他平台相比,booking的平均价格通常更高
  • 产品过于突出好评,用户很难发现一些真实的差评
  • 当房屋主人接收到用户的回复时联系用户也很困难

我想引用一段话,来总结这里面遇到的问题,这段话也蛮有意思的,它说的是:

「与其他应用比较来看,套路显得有点多,会让你觉得一切看起来都蛮划算,总是想多卖一些东西给你。」

用户痛点

总结之前的分析,我提出了以下几点观点:

  • 没有一个完美的解决方案能够满足所有用户,用户需要尽可能多的掌握有用信息。
  • 没有的功能没有太多考虑到个性化需求。
  • 可以改进UI并使用户更加集中于他的目标,而不是完全「以推销为中心」
  • 优化用户与房东之间的联系问题

解决方案

从用户痛点出发,尝试找到合适的解决方案,来提升产品体验。

1. 主页

总的来说,我对首页进行了大手术。主页的搜索功能已经完全重新设计,减少过多的干扰信息。

导航:我设计了一个新的导航栏,剥离出「已保存」功能,这样用户就可以快速找到自己所收藏的商品。此外,我也优化了「交易」的模块,后面我会详细的说说这块的改动思路。

其它功能 :至于之前的版本,我保留了搜索和相关推荐的功能,重新设计界面以改善UI的可用性。

2. 社交功能

如今,社交网络在用户的生活中扮演重要的角色,那没理由在booking中做的这么差。我搞了一个新功能,允许用户关联自己的好友并查看他们的选择,包括他们的评价(喜欢/不喜欢)。我已将此功能放置到主页的下方,因为我希望在将其推广到其他模块之前收集更多有关它的数据。

3. 搜索功能

把这个功能分解为多个步骤。在输入第一个词后,即使没有指定日期或其他信息,也能显示相匹配的酒店。此外,我也加入了语音搜索,使搜索更容易。基于之前我对不同用户角色的定义,搜索的结果将根据最后的信息进行推荐:

  • 1名成人 ——背包客 ——酒店
  • 2名成人——度假夫妇——酒店,宾馆或B&B(某种酒店形式)
  • 2名成人+儿童——家庭——民宿公寓或酒店
  • 1名成人+商务选择——商人——酒店

4. 列表页面

列表页针对易用性方面做了整体的优化:

  • 我将筛选功能从3个按钮更改为2个按钮以减少用户的操作步骤——将它放在页面底部,方便使用
  • 我添加了标签功能来更好的区分属性类型
  • 在第一时间向用户展示物业的主要设施特点。注意:根据不同的用户,可以智能突出显示不同人正在寻找的不同信息。
  • 我将报价的方式转换为「单晚」而不是「总价」,以便在不同商品之间进行比较

5. 详情页

我列出许多可以在详情页面中加入的修改。将总价格突出显示,以免有些隐形消费用户可能会被忽略。

增强了一个与评论相关的次要功能,允许用户通过不同标签筛选它们。

6. 交易功能

在优化开始时,我确定了操作场景2—— 「用户还不知道自己的目的地」作为优化方向。为了提供更好的用户体验,我增加了一个新的功能,用户可以在其中找到不同目的地的区间。利用筛选功能,用户可以选择最适合其需求的区间(区间 – 大陆 – 国家等…)

动效原型

最后,我还设计了一个整个项目的动效原型,把之前所有重设计的页面串联起来。

结语

由于时间限制,分析和结果是基于我的个人经验和少量数据,需要进行深入分析和其他测试,以便完善和验证解决方案。

文章来源:优设网

vue-cli3插件初体验

seo达人

vue-cli3发布自2018年8月,距离现在还不是特别久,最好搭建项目刚好用到,所以写下这篇文章,记录一下踩坑经历。

vue的作者说过,vue-cli的本质是模

版的拉取,太多的配置导致了模版的难以维护,所以重构后的版本提供了插件的功能,一个插件对应一个功能,这样避免了多个模版,也使得cli维护性得到提高,这也是本篇文章的核心介绍内容。

我对cli3的理解是,一方面扩展了cli2的核心能力 ,一方面封装了webpack逻辑和配置。在过去要去做一个cli,通常需要阅读cli2的代码,cli2的核心模块分别是 generator,prompts,template,git-repo,并用同样的方法去做一个cli,这样其实成本不小,cli3的插件就是提供了这样一种能力,你用他的规则,去做一个npm包,并发到仓库,就可以获得这种能力。

首先,先介绍一下vue-cli3,他的发布带了哪些新功能呢?我总结一下,大概有以下5点:

1.功能丰富。这点相信大家都很好理解,他实在太好用了,模版里包含了大多数业界比较新的功能,可以一键集成typescripts等类型定义工具, eslint/tslint等语法检验工具,风格规范,prettier,husky等格式化工具,还有postcss、pwa、vue-cli-server等等。

2.提高封装性和扩展性。这点指的是vue-cli-server,在过去webpack的逻辑和配置在项目里独立维护,各个项目之间就像孤岛,vue-cli-server就像一个纽带,连接起了各个项目,为项目升级webpack提供便利性,并且通过一份配置,提供个性化配置。

这里顺带扯一下vue.config.js, 这个东西就是用来个性化配置webpack的,他提供了很多的配置项,具体可以看官方文档:

https://cli.vuejs.org/zh/config/

我们挑几个常用的来讲:

configureWebpack,这个几乎是用的比较多的,简单的方法,可以通过配置的方式配置,如下所示:

 
    
  1. module.exports = {
  2. configureWebpack: {
  3. plugins: [
  4. new MyAwesomeWebpackPlugin()
  5. ]
  6. }
  7. }复制代码


这份配置,最终会被合并到原来的配置里,不会覆盖。

复杂的方法,可以往这个字段传一个函数,如下所示:

 
  1. module.exports = {
  2. configureWebpack: config => {
  3. if (process.env.NODE_ENV === 'production') {
  4. // 为生产环境修改配置...
  5. } else {
  6. // 为开发环境修改配置...
  7. }
  8. }
  9. }复制代码

这样就可以在一个函数里做一些简单的逻辑,config是webpack config,你可以直接修改config对象,也可以返回一个对象,这个对象最终也会被合并会webpack对象。

第三种方式,是通过webpack-chain来链式调用,代码如下所示:

 
  1. module.exports = {
  2. chainWebpack: config => {
  3. config.module
  4. .rule('vue')
  5. .use('vue-loader')
  6. .loader('vue-loader')
  7. .tap(options => {
  8. // 修改它的选项...
  9. return options
  10. })
  11. }
  12. }复制代码

3.提供图形化管理界面,最所周知,gui易懂,cli,vue在降低学习门槛这方面,已经是非常好了。

通过vue ui指令,可以查看编译各个模块的情况,模块依赖情况,插件的情况,非常便于管理。

4.便捷性。vue-cli-server不仅支持项目的编译,也支持单文件的编译,具体的方法可以看官网介绍。

5.提供了cli的核心能力,也就是问询,模版渲染,文件生成这几大核心功能。具体的示意图可以看如下:


以上是cli2的核心模块,需要引用hbs,inquirer.js,metalsmit等基本模块,cli3的插件机制基本帮我们封装好了,我们只需要根据插件的规范,就可以获取这种能力。

由于有的读者可能对cli2的流程比较陌生,所以我想简单描述一下cli2的工作流程,如下图所示:


首先,cli2提供init指令,执行这个指令,会去远程拿模版文件,并拉到本地用户目录的.vue-template的文件夹,然后通过meta里问题,去问你,然后生成最终模版到你执行命令的目录。

说完vue-cli2,我们来看看vue-cli3的插件是怎么样的?

首先根据插件的位置,我们分成了cli插件,和service插件。cli的插件有完整的开发目录,所能做的事情也比较多一点,service插件是一份js文件,导出一个函数。

cli插件的目录如下所示:


具体的用发可以在官网了解到:

https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6

那么他们是怎么工作的呢?

cli的代码主要在@vue/cli 下面,他的大概的流程如下图所示:


@vue/cli/bin/vue.js:

 
  1. program
  2. .command('add <plugin> [pluginOptions]')
  3. .description('install a plugin and invoke its generator in an already created project')
  4. .option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
  5. .allowUnknownOption()
  6. .action((plugin) => {
  7. require('../lib/add')(plugin, minimist(process.argv.slice(3)))
  8. })
  9. program
  10. .command('invoke <plugin> [pluginOptions]')
  11. .description('invoke the generator of a plugin in an already created project')
  12. .option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
  13. .allowUnknownOption()
  14. .action((plugin) => {
  15. require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
  16. })复制代码

首先,执行vue指令,会执行@vue/cli/bin/vue.js,这里定义了vue add , vue invoke,vue build,vue serve,等指令,可以看出,add指令其实是包含invoke指令的,add指令主要是安装一个包,并且触发generator.js,invoke主要是触发generator.js。

然后再来看@vue/cli/lib/add.js,

 
  1. const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
  2. await installPackage(context, packageManager, options.registry, packageName)复制代码
 
  1. const generatorPath = resolveModule(`${packageName}/generator`, context)
  2. if (generatorPath) {
  3. invoke(pluginName, options, context)
  4. } else {
  5. log(`Plugin ${packageName} does not have a generator to invoke`)
  6. }复制代码

add.js主要安装包,然后执行invoke模块,我们再看看invoke模块做了什么。

@vue/cli/lib/invoke.js

 
    
  1. const generator = new Generator(context, {
  2. pkg,
  3. plugins: [plugin],
  4. files: await readFiles(context),
  5. completeCbs: createCompleteCbs,
  6. invoking: true
  7. })复制代码

invoke里主要实例化generator类,然后把你的插件当成参数传给类,generator类算是vue-cli的核心类了。

@vue/cli/lib/generator.js

 
  1. plugins.forEach(({ id, apply, options }) => {
  2. const api = new GeneratorAPI(id, this, options, rootOptions)
  3. apply(api, options, rootOptions, invoking)
  4. })复制代码

这个类主要负责执行你的插件,然后把generatorapi作为参数传入插件的generator.js导出的函数。

具体的vue-cli插件的开发是怎么样的呢,我写了一个demo,用在模拟多项目的ci模版管理,通常每个项目都有一份.gitlab-ci.yml模版,所以我们一般可以抽出一个公共的ci模版来管理,这里我用cli插件来管理,真正的项目可能不具备可行性,这里我只是用来写一个例子。



目录结构大概如上所示,执行vue add foo后,就会出现propmts对话框,然后选择答案后,就会根据配置生成模版到你的根目录下。


_gitlab-ci.yml ,根据问题选择是否用私有npm仓库:

 
  1. script:
  2. <%_ if (options.config === 'npm') { _%>
  3. - nrm add companynpm http://xxx.y.cn:XXXXX/
  4. - nrm use companynpm
  5. <%_ } _%>复制代码

prompts.js,主要一些问题的设计:

 
  1. module.exports = [
  2. {
  3. name: 'config',
  4. type: 'list',
  5. message: `是否需要切换内部源:`,
  6. choices: [
  7. {
  8. name: '需要',
  9. value: 'npm',
  10. short: ''
  11. },
  12. {
  13. name: '不需要',
  14. value: 'npm',
  15. short: ''
  16. }
  17. ]
  18. }
  19. ]复制代码

generator.js 这个模块很简单,直接渲染模版

 
  1. module.exports = (api, options, rootOptions) => {
  2. // 复制并用 ejs 渲染 `./template` 内所有的文件
  3. api.render('./template')
  4. }复制代码

service插件主要放在项目本地,是一份js代码,然后导出一个函数,通过package.json配置指向这个js文件的路径,


service主要依赖的代码在@vue/cli-service里,首先先执行@vue/cli-service/bin/vue-cli-service.js文件,


 
  1. const Service = require('../lib/Service')
  2. const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  3. .....
  4. service.run(command, args, rawArgv).catch(err => {
  5. error(err)
  6. process.exit(1)
  7. })复制代码

该文件实例化Service类,这个类是service插件的核心类,然后再执行run方法。

再来看看@vue/cli-service/lib/Service.js的代码:

首先构造函数执行resolvePlugin,把官方提供的插件和项目里的插件都加载进来,

 
  1. constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
  2. this.plugins = this.resolvePlugins(plugins, useBuiltIn)
  3. }复制代码

resolvePlugin这个函数主要在这里引入本地的插件:

 
  1. resolvePlugins (inlinePlugins, useBuiltIn) {
  2. // Local plugins
  3. if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
  4. const files = this.pkg.vuePlugins.service
  5. if (!Array.isArray(files)) {
  6. throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
  7. }
  8. plugins = plugins.concat(files.map(file => ({
  9. id: `local:${file}`,
  10. apply: loadModule(file, this.pkgContext)
  11. })))
  12. }
  13. return plugins
  14. }复制代码

run方法又会执行init方法,在该方法内部执行插件:

 
  1. init (mode = process.env.VUE_CLI_MODE) {
  2. // apply plugins.
  3. this.plugins.forEach(({ id, apply }) => {
  4. apply(new PluginAPI(id, this), this.projectOptions)
  5. }
  6. }复制代码


那么service插件要如何来实践,我们来看如下的例子:

首先在package.json配置一下,指向本地的插件my-service.js

 
  1. "vuePlugins": {
  2. "service": [
  3. "my-service.js"
  4. ]
  5. }复制代码

my-service.js的代码如下所示:

 
  1. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  2. const webpack = require('webpack');
  3. module.exports = (api, projectOptions) => {
  4. api.registerCommand(
  5. 'analyze',
  6. {
  7. description: 'start analyze server',
  8. },
  9. (args) => {
  10. // 注册 `vue-cli-service analyze`
  11. let options = projectOptions.pluginOptions.demoOptions
  12. console.log(options);
  13. // resolve webpack config
  14. const webpackConfig = api.resolveWebpackConfig();
  15. webpackConfig.plugins.push(new BundleAnalyzerPlugin());
  16. webpack(webpackConfig,(err,stats)=>{
  17. if(!err) console.log('打包成功')
  18. })
  19. },
  20. );
  21. };复制代码

该插件主要扩展vue-cli-service的指令,加了analyze指令,这个指令主要会向webpack的配置增加一个BundleAnalyzerPlugin的插件,用来分析包的大小,当然,这里也是没有太大的现实可行性的,vue-cli 提供了vue ui的Gui界面让你看到打包后各个模块的大小,或者cli的命令,vue-cli-service build --report,也能生一个报告,效果也是一样。


至此,vue-cli和service插件的使用和实现都介绍完了,如果有哪里写的不到位,希望各位大神能提出指正

图解WWDC 设计分会:映射与可供性

涛涛

映射-Mapping

在去餐厅用餐之前,我们还有些时间再了解一项基础设计原理。让我们回头看看在「邻近性」原理当中提到的灯光明暗控制开关。你能仅通过最左侧这个开关的样式看出它所控制的灯光明暗度吗?

如下图这样又如何?

我们之所以能从后者当中进行判断,所依据的就是映射关系。所谓「映射」,即是指,将被控对象的行为规律体现到控件自身的操作方式中,譬如开关把手的上升和下降,对应着灯光亮度的升高和降低。

映射同样体现在多个控件的布局当中,它们的次序应该能够反映出多个被控对象之间的相对位置关系。

我们假设这三个开关用于控制卧室天花板上的三盏灯。依据映射关系而设计的开关位置应该能够帮助人们快速判断出它们各自控制着哪一盏灯。映射原理有助于设计师对控件的类型、位置和次序进行决策。

当映射关系不明确时,我们通常需要依靠文本标签才能理解开关与灯之间的对应关系。这并非完美的解决方案,因为阅读和理解文字需要花费时间和精力,同时人们也难以依靠记忆进行快速操作。

在界面设计当中,映射关系也体现在控件类型的选择上。例如通过滑块(slider)控制文本的横向字间距就是很符合直觉的交互方式。而相比于滑块或是步进控件(stepper),旋钮则更适于旋转操作。

当然,最直接的映射才是最好的映射。为人们提供直接操作目标对象的能力是最为简单、精准、符合直觉的解决方案。macOS 上的鼠标指针操作,或 iOS 当中的手势操作,都可以为人们带来直接操作的体验。

可供性-Affordance

不知各位如何,我是很饿了,这就准备下楼去吃饭。我们在大堂见,然后一起去餐厅。

坐在餐桌前,你会看到面前摆放着一个空盘子。我们能用这个盘子做什么?显然,放些食物在里面。除此之外呢?

盘子很光滑,可以旋转或是滑来滑去。

盘子有一圈宽边,可以抓着拎起来。

我们对于如何与这个盘子进行互动的观点便是可供性的体现。换句话说,盘子的外形特征为我们提供了如何与之进行互动的视觉及触觉线索,使我们意识到哪些交互行为可行,哪些不可行。我们会意识到要将食物放进去,或是将它滑到其他地方。但我们通常不会想要倒水进去,然后端起来喝。

可供性并非物体自身所具备的属性,它更多是在代表行为主体与目标对象之间的互动关系。可供性会因行为主体的差异而有所不同。举个极端些的例子,对我而言,飞盘可以用来抓住或扔出去,而对我的狗来说,飞盘就是单单用来叼的。不过另一方面,碟子对我和我的狗来说都是用来盛放食物的。

由于可供性所具有的主观特性,一个人能感知到的交互特性在另一个人看来则未必如此。当可供性所传达的交互特性与人们的常规行为有着高度关联时,人们会更加容易感知到。

例如,我其实可以把碟子当作茶托,这会是个不错的茶托。但我猜我们大家日常很少真的这样去做,因此我会更乐于将碟子视为盛放食物的容器,而非将水杯放在里面。

我们能从我们所互动过的任何环境及事物当中感知到可达性。当我们走进餐厅时,门的大小及形状可以传达出供人穿过的特性,连续的地面使我们意识到可以在上面安稳地行走。

椅子的造型暗示我们可以坐下,桌子的构造令我们明白可以将物品摆放在上面。

人造物品当中都包含有传达可供性的视觉线索,使人们明白哪些行为可行。清晰的、显而易见的视觉线索可以帮助人们迅速了解如何与之进行互动。

对于 app 界面设计而言也是同样的道理。滑块控件由把手和滑轨构成,暗示着拖拽的特性。

旋钮的样式意味着可以旋转。

按钮则一目了然地传达着可点击的特征。

在以上每一个例子当中,可供性的传达效率都是极高的。事实上,随着时间的推移,我们会越发适应于抽象度不断提升的可供性传达形式。我们所熟悉的界面当中的按钮,无非是现实世界里真实按钮的高度抽象化版本;那四个圆角足以将虚拟与现实两个版本的同一种物体关联起来。

同理,滑块把手周围那细微的投影效果也足以让我们意识到其独立于滑轨之上的操作特性。

而且,仅有的这一点点视觉线索可能都不是必需的,对于很多人来说,一条直线上的一个实心圆足矣传达滑动操作的可供性了。

有时候,可供性也可以通过动效进行传达。在天气 app 中点击主体内容,界面整体便会稍稍上升,暗示着可以通过滚屏来查看更多内容。

无论你使用何种方法,都必须确保 app 界面能够清晰准确地传达其自身的交互特性,否则,人们将困惑于如何与之互动。他们很可能会以错误的方式进行操作,然后发现无果,进而将控件理解成不可交互的元素,app 的可用性也会因此而受损。

vue1.0和vue2.0的区别

seo达人

一、生命周期钩子的差别



    vue1.0的生命周期如下:



    



    



    vue2.0的生命周期如下:



    



    



    用一张表格来做对比:



    



二、代码片段



    在vue1.0中可以在template编写时出现:



<template>

   <div>第一行</div>

   <div>第二行</div>

</template>

    在vue2.0中在template编写时,必须只有一个根元素,否则会报错。



<template>

   <div id='root'>

      <div>这是第一行</div>

      <div>这是第二行</div>

   </div>

</template>

三、for循环遍历数组、对象时的参数顺序的变更,遍历数组之前是(index,value),现在是(value,index);对象的之前是(key,value),现在是(value,key).



    移除了$index和$key两个隐式声明变量,以便在v-for中显式声明。



    之前的track-by已经替换为key来代替



    v-for的循环范围也发生了改变,之前v-for='item in 10',范围为0-9,现在是:1-10。







四、Props 的参数



    1、如果需要检查 prop 的值,创建一个内部的 computed 值,而不再在 props 内部去定义coerce。



    之前是:



props: {

  username: {

    type: String,

    coerce: function (value) {

      return value

        .toLowerCase()

        .replace(/\s+/, '-')

    }

  }

}

    现在改成用computed来代替:

props: {

  username: String,

},

computed: {

  normalizedUsername: function () {

    return this.username

      .toLowerCase()

      .replace(/\s+/, '-')

  }

}

    这样有一些好处:



        可以对保持原始 prop 值的操作权限。



        通过给予验证后的值一个不同的命名,强制开发者使用显式申明。



    2、twoWay参数的移除,v-bind 的 .once和.sync 修饰符 移除



            Props 现在只能单向传递。为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。



    3、



五、计算属性



cache: false 弃用,在 Vue 未来的大版本中,计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。    

六、Built-In 指令



v-bind 真/假值 变更;在2.0中使用 v-bind 时,只有 null, undefined,和 false 被看作是假。这意味着,0 和空字符串将被作为真值渲染。比如 v-bind:draggable="''" 将被渲染为 draggable="true";

用 v-on 监听原生事件 变更,现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符;

带有 debounce 的 v-model移除;

使用 lazy 或者 number 参数的 v-model ,替换;

使用内联 value的v-model 移除;

v-model with v-for Iterated Primitive Values 移除;

带有 !important 的v-bind:style 移除;

v-el 和v-ref 替换,简单起见,v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用;

v-show后面使用v-else 移除。    

七、自定义指令



自定义指令 简化;    

八、过渡



transition 参数 替换,Vue 的过渡系统有了彻底的改变,现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果,而不再使用 transition 属性;

可复用的过渡 Vue.transition 替换,在新的过渡系统中,可以通过模板复用过渡效果;

过渡的 stagger 参数 移除。    

九、事件



events 选项 移除,事件处理器现在在created钩子中被注册;

events 选项 移除Vue.directive('on').keyCodes 替换,新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes;

$dispatch 和 $broadcast 替换,可使用Vuex。    

十、过滤器



插入文本之外的过滤器 移除;

过滤器参数符号 变更   现在过滤器参数形式可以更好地与 js 函数调用方式一致,因此不用再用空格分隔参数,现在用圆括号括起来并用逗号分隔。

内置文本过滤器 移除,替换 json 过滤器;替换 capitalize 过滤器;替换 uppercase 过滤器;替换 lowercase 过滤器;替换 pluralize 过滤器。

双向过滤器 替换。

十一、插槽



重名的插槽 移除;

通过具名 <slot> 插入的片段不再保持 slot 的参数。请用一个包裹元素来控制样式    

十二、特殊属性



keep-alive 属性替换,不再是一个特殊属性,而是一个包裹组件。    

十三、计算插值



 属性内部的计算插值 移除;

HTML计算插值 移除,取代的是v-html指令;

单次绑定替换成v-once。  

十四、响应



vm.$watch   换成    update生命周期钩子;

Array.prototype.$set弃用,用Vue.set代替

Array.prototype.$remove 移除  用 Array.prototype.splice 替代;

Vue.set 和 Vue.delete 移除;

替换vm.$data 移除;

vm.$get 移除,可以直接取回响应数据。

十五、围绕DOM的实例方法



vm.$appendTo 移除;

vm.$before 移除;

vm.$after 移除;

vm.$remove 移除。    

十六、底层实例方法



vm.$eval 移除;

vm.$interpolate 移除;

vm.$log 移除    

十七、实例DOM选项



replace: false 移除,现在组件总是会替换掉他们被绑定的元素。为了模仿,可以用一个将要替换元素类似的元素将根组件包裹起来。    

十八、全局配置



Vue.config.debug移除,因为警告信息将默认在堆栈信息里输出;

Vue.config.async移除,异步操作现在需要渲染性能的支持;

Vue.config.delimiters移除,可以在使用自定义分隔符时避免影响第三方模板;

Vue.config.unsafeDelimiters移除,HTML的插值替换为v-html。    

十九、全局API



带el的Vue.extend移除;

Vue.elementDirective移除;

Vue.partial移除。


佐藤可士和的设计思路大揭秘

涛涛

在佐藤看来,这些整理工作常常被他人视为是在浪费时间,而实际上整理是一种培养思路的好习惯,长此以往,不仅能让自己的思路变得更加清晰,同时,思维也会跟着变得更加敏锐起来。

在与客户的沟通过程中,我们可以清楚的了解到,具体需求是什么。随后再将这个需求中的关键点进行提炼与整理,最终完成这个设计。而不应该全是凭借设计师自己的灵感和专业水准去完成创作。

两度落榜高校

△ 多摩美术大学以「自由与意力」作为教育理念。现为日本规模最大的美术大学。

佐藤的父亲是位建筑师,祖父是俄罗斯语学者、前东京外国语大学荣誉教授。在这样的家庭环境的熏陶之下,让佐藤从小就喜欢上了画画。并且在报考志愿的时候,也选择了艺术类的大学。但这一切似乎并没有那么容易,没错,他落榜了。

但这并没有让他放弃这个想法,经过了两次落榜之后,终于在他20岁的时候,进入了多摩美术大学就读。

六年磨一剑

1989年,刚刚从多摩美术大学毕业的佐藤,凭借着优异的成绩,入职了一家日本知名的广告公司「博报堂」。在这期间,受到了Takuya Onuki先生的指导,成长迅速。经过长达六年的工作积累,佐藤终于小有成就。他的作品「本田型格(Honda Integra)」获得艺术指导协会的(ADC)年度大奖。在「博报堂」工作的这些年,佐藤除了收获了大量的经验和知识外,还遇上了在人生中给予他巨大帮助的人,也就是他的妻子佐藤悅子。

成立武士事务所

时间一转又过了五年,这时的佐藤已经习得了一身本领,终于有一天,他决定离开这家公司,去成立属于自己的工作室 「 株式会社サムライ」 ,至此开启了他魔术般的设计生涯。

△ 事务所内部一角

在次偶然的情况下,有位外国摄影师问他「可士和」在英文里是什么意思,当他解释到第二个字」士」的时候就卡住了,因为在日文的发音罗马里「 SAMURI 」是武士的意思。也这是事件启发了他的想法,并且给自己的事务所命名为「 SAMURI 」。根据佐藤的妻子回忆,当时她听到这名字的第一反应是:「什么?武士事务所?也太土了吧!」

在佐藤可士和的作品中,除了人尽皆知的优衣库设计。他所经手的工作还包括有:偶像团体「SMAP」的整体视觉设计、NTT移动电话设计、纽约全球旗舰店的创意指导、迅销公司的企业识别设计、藤幼稚园的更新计划、国立新美术馆的标志设计等。

获得奖项

  • 东京ADC Grand Prize(得奖作品:本田 Integra)
  • 每日设计奖(毎日デザイン赏)
  • 朝日广告奖
  • 龟仓雄策奖
  • 东京TDC金奖
  • 香港 「亚洲最具影响力大奖」

除了获得众多奖项外,在2007年,佐藤成为了明治学院的客座教授,同时也是东京ADC(艺术指导俱乐部)、东京TDC(字形指导俱乐部)、JAGDA(日本平面设计师协会)的常驻会员。

对灵感的看法

在佐藤可士和看来,只依靠灵感的设计是远远不够的,除此之外,设计师还需要去考虑产品背后的逻辑。灵感如果太跳跃性,太过超前的话,是没办法解决现有问题的。但是在设计的过程中,灵感也是必不可少的关键因素,许多时候我们都需要通过「灵感」来扩充想法。而灵感的并不一定非要在自己的脑海中产生,通常创意的答案就在客户哪里,而我们做的工作只是总结对方的思绪并加以重新创造。

△ 佐藤可士和的超整理术

在《佐藤的整理术》这本书中也曾表明过,他自己的工作室里面没有多余的东西,没有电话和电视,偌大的会议室里也只有一条长长的会议桌和雪白的墙。

△ 佐藤可士和的事务所(内部)

把环境中的干扰元素清理到限度,这有助于人对的情绪的整理。还有每当他完成一个项目都会聚集所有员工来整理所有的资料。目的也在于在整理的过程中让人时刻的保持清醒的精神状态,以做出更迅速、更准确的判断。

设计师就是视觉医生

佐藤所从事的职位是「艺术指导」,可能一般人认为的艺术指导工作,就是负责「拟定和执行平面计划的统筹者。」

但在他看来艺术指导是「拟定全盘的沟通战略,并运用设计的力量将其化为有形之物」的工作,通过跟客户进行多次全方位的沟通,整理出客户的需求以及内心的期待,从而做出符合客户与市场需求的解决方案。佐藤将自己的职位定位为医生,客户就是患者,通过「望闻问切」找出症状的病因和治疗方向。

在整理的过程中需要统理对方的思绪,很多时候客户虽然对自己的产品非常了解,但对于产品的市场价值却并没有明确的认知,或者头绪很乱,不能总结出产品特点和价值。也有些客户对于自己的需求说不清楚,有时候是他们想要的太多,但他们并没有明确自己的目标是什么。这时就需要跟客户深度沟通一一推敲客户堆积如山的问题,加以整理、逐步将产品最关键最本质的焦点提取出来,将其打磨精致成为联结产品和消费者的桥梁。

作品解析

1. SMAP(2000)

2000年,佐藤可士和担任了由木村拓哉等超人气偶像组成的组合SMAP的整体形象策划。这次设计中他采用全新的传播策略。否定传统的广告宣传方式,为日本流行音乐领军团体之一SMAP的十周年纪念引入了一种很酷的宣传方式。

佐藤可士和以「流行乐队就是品牌」的新视角,重新定位了SMAP,并制定一种新的传播策略,在CD夹克和各种音乐会商品上都使用了独特的视觉标识。佐藤可士和将涉谷停放的汽车披上印着乐队形象的车罩,在路灯上悬挂横幅、为公共汽车车身设计特殊的视觉样式,还有报纸广告和海报宣传等其他传播媒介。

受乐队CD包,盒子,碟底的启发,他重新修改了位置和颜色比例,设计出一个容易让人记住的三色符号。并通过各种街头活动营造出轰动,热闹切且有吸引力的热点。

他将整个城市定位为一个大型传播媒介的想法得到了高度认可,并在2000年赢得了许多著名奖项。可士和还为乐队设计了一种以他们发行的CD命名的饮料,「Drink Smap!」并进行了更多的实验广告。他设计了饮料运输车、工人工作服和安装在音乐商店的自动售货机。利用这独特的产品作为广告媒介,成功的吸引了大量的关注。

2. OZOC (2002)

佐藤可士和曾担任OZOC(年轻女性时尚品牌)的创意总监,并负责其旗舰店的传播策略,该旗舰店于2002年在原宿开业。佐藤可士和在建筑师荒木伸男(Nobuo Araki)的帮助下开始了这个项目,创作出一个红色立方体建筑,但一个月后,这座建筑的颜色一夜之间变成了朴素的白色木材。

佐藤可士和将建筑概念定义「变化」。「变化」是时尚的本质,随着时间的变化而变化。他将建筑与OZOC品牌的灵活性进行了结合,展示OZOC品牌对潮流的敏感度。OZOC在日本有100多家商店,它希望为品牌传播创造一种独特的方法。

佐藤可士和抛弃了以往时装广告策略,即使用外国模特的照片。将OZOC的新旗舰店作为媒介,并称之为「原宿广告架构项目」(haap)。为了强调这一理念,佐藤可士和利用建筑工艺,为店面外部建造了一系列广告板。为了强调设计概念,还将建筑过程和设计的稿图,模型等应用于广告主题。佐藤还制作了一本特殊的概念书里面记录着建筑的施工过程,并在开幕式上分发给记者和其他相关从事者。

他证明了除了文字,照片等传统广告媒介外,建筑设计和室内设计也能在品牌传播中发挥着积极和重要的作用。

3. 藤幼儿园(2004)

佐藤先生为藤幼儿园提出了一个全新的观点,指出「幼儿园本身就是一个巨大的游乐场」的宏伟概念。他将建筑作为培养每个孩子创造力的媒介赋予了新的视角。佐藤先生利用场地上现有的日本大榆树,提出了一个木制屋顶和甜甜圈型的建筑,孩子们可以在上面每天跑步和玩耍。中间的区域被设计一个中央庭院,来促进平时公共活动时的团结性。佐藤先生也为幼儿园设计了操场设备,将它融入了幼儿园本身。他的想法是使幼儿园成为「学习的接口」,成为新的幼儿教育模式。

佐藤与手塚夫妇建筑团队合作,手塚夫妇的设计以融合自然的多功能空间而闻名。他们的建筑理念是:「无人独处的空间」。幼儿园的空间设计也秉持着这一理念。屋顶作为孩子们的游乐场,为孩子们提供了丰富而有趣的内置设备。

让孩子可以屋顶上自由地奔跑和玩耍,然后通过滑梯或绳梯回到地面。甚至连排水系统都是为孩子们设计的,从屋顶收集的雨水形成瀑布。佐藤先生还为幼儿园标志、网站和儿童t恤设计了类似剪纸的字体和字符。

该项目以「幼儿园本身就是一个巨大的游乐场,培养每个孩子的创造力」为理念,代表幼儿教育的未来,在国际上获得了高度赞誉,获得了2011国际机构(CELE)颁发的「最优秀设施奖」,以及众多其他全球建筑和教育奖项。

4. 优衣库(2006)

2006年优衣库在纽约SOHO的旗舰店开业开始,佐藤可士和负责了时尚品牌优衣库的所有全球品牌传播活动。为了实现优衣库独特的创意和设计基础,他提出了以「具有美学意识的超合理性」为概念,总结了优衣库对世界的价值和主张。

可士和通过修改日本片假名和原始字体设计出新的视觉标志,并组织了由建筑师、室内设计师和平面艺术家组成的专家团队,为伦敦、巴黎、上海、东京和柏林的每一家旗舰店设计,每个地区的旗舰店都延续着相同的基调和感觉。这种与优衣库整体业务管理直接相关的全面传播策略,提升了优衣库品牌的全球影响力。

优衣库在纽约Soho的第一家全球旗舰店的logo,用回了原logo鲜艳的红色,片假名和英文表达了优衣库如何将欧美的休闲装转变成日本风格。

整个平面设计从标志到原始字体都是传播策略的核心。佐藤将标志和字体组合成一种视觉图案,并将其运用在建筑外墙面板,出租车车厢,屋顶,和各种媒体,通过各种传播形式来吸引人们对优衣库的兴趣,促使人们去了解优衣库。

此外,以负责设计各个旗舰店的片山正通先生、担任网站设计的中村勇吾先生为中心,组建了在全球展开的创意团队将优衣库的品牌形象,在巴黎、伦敦、柏林、莫斯科、上海等各城市进行品牌本地化。

佐藤还为优衣库的衬衫品牌「UT」进行设计,2007年东京原宿旗舰店开业并发布衬衫专业品牌「ut」,并以「衬衫的未来的便利店」为概念开展了设计。将t恤衫放入瓶包装瓶,陈列在设计成饮料机型的展架上呈现出一种未来式的购物感。

「UT」一发布就在日本国内引起热烈反响,商店数天挤满了客户甚至连店内的商品也出现了销售一空的场景,这种现象让人不禁发出欣喜的赞叹。佐藤以一种全新的品牌设计战略来重塑优衣库。将公司经营与品牌设计相结合创造出一种全新的品牌战略。

5. 今治毛巾品牌形象(2006)

「Imabari毛巾品牌项目」于2006年作为日本经济、贸易和工业部推广日本品牌项目的一部分。由于无法招募到下一代工人,Imabari面临着与廉价外国产品的竞争,前途未卜。佐藤可士和得知情况后为该公司制定了新的品牌标识和品牌策略,将Imabari的高价值转化为「最安全、最可靠、质量最高的品牌」。佐藤可士和创造的标志象征着Imabari(今治)地区丰富的自然和工业的复兴。将Imabari的品牌定位为品质保证的标志,选择了纯白的毛巾作为主打产品,体现了品牌的精髓。

将「最安全」和「最可靠」作为核心品牌理念。当时,由于发生了几起食品安全事件,日本消费者的危机感增强了。人们对食品信息的安全性非常重视。佐藤可士和利用这种焦虑,直接定位Imabari产品的可追溯性和高质量。红、蓝、白分别代表太阳、海洋和水,是Imabari毛巾高品质的基础。这个标志的首字母是「I」,增加了欧洲的味道,为「全球品牌」定下了基调。

白毛巾以前并没有被用来代表高质量,但佐藤认为,作为Imabari的主要产品,它最清楚地代表了Imabari的价值。这清晰明确的信息极大地提高了Imabari的品牌知名度和销量,并将其定位为日本的全球品牌之一。

2012年,在东京青山南美开设了第一家概念店。2017年在产地今治设立了旗舰店和毛巾实验室。为了展示日本Imabari毛巾的区域生产商。还新成立了「毛巾实验室」,让游客可以在这里体验毛巾的安全高质量的品质。所有这些活动都有助于加深消费者对该品牌的吸引力和热情。这个项目的创新方向,包括制定和执行的沟通策略,大胆的标志和清晰的品牌信息获得该地区100多家公司的共同关注。

6. 国立新美术馆(2007)

2007年1月开幕的国立新美术馆,是日本第五个国立美术馆,也是最大的国家美术馆,也是三十年来第一家开放的博物馆。它没有永久的收藏,作为一个展览场所更多的活动来源于艺术教育和展览活动。

佐藤可士和以」全新「做为出发点,将」没有收藏品「的缺点转化为优点,并结合美术馆做为「日本最大的展示空间」的优点来规划策略。

识别标志以「新」这个字作为主要元素,想要用视觉表现出美术馆的与过去其他美术馆的不同,「就不能局限于旧框架,通过迄今没有任何人做过的尝试。佐藤可士和提取」开放「做为关键词,因为该美术馆致力发挥艺术中心的功能,除了搜集信息之外,更是期望美术馆能成为信息交流地。

佐藤将「新」设计成美术馆的视觉标志并通过标志强调这种「开放场所」的特征,去除「新」这个文字里所有线条和弯角的封闭部分,制作独特的开放式字体。此外,所有线条都是一边直角,另一边圆角,这个灵感源自黑川纪章先生建筑的启发,美术馆建筑的正面呈现海浪般的曲线,另一侧的展示空间则是直线,通过字体的特征让人联想到建筑的外形。

他还为博物馆衍生品和标牌开发了原创的模板式英文和数字字体,以表达博物馆的开放性和多元化,并将其核心价值观和独特建筑统一为一体,作为其综合视觉传播策略的一部分。通过统一建筑概念和视觉传播概念,提升了美术馆的设计完整度和统一性,确立美术馆整体的全新形象。

7. 千里复健医院(2007)

「康复度假村」是佐藤可士和2007年为这家医院开发的宏伟概念。医院的作用是提供康复治疗的施设,为正在康复的病人恢复活力和信心让他们回归正常生活。

通过理事长桥本康子医生的叙述的详情,整理和思索后提出「复健休闲中心」概念。医院是修养的场所,但是通过提供舒适的空间和真诚的服务,能发挥心灵康复的功能。

由可士和担任家具设计的监制,建筑内部采用休闲饭店风格,有热带鱼悠游其间的水槽,客厅有暖炉,芳香疗法,和图书馆。家具全部是摩登的北欧制品,采用柔和的间接照明,充满温馨感的木质地板让患者放松心情。员工制服全服翻新,委托滝沢直己先生设计,新的制服给人整齐洁净的印象,又兼具「整齐」和「高雅」的高级感可以使患者感到安心。

医院的结构都是木质材料目的是为了营造出温暖的氛围,让患者感受到大自然的治愈能力。佐藤先生还制定了康复医院新脑卒中病房的更新计划,该病房是为纪念康复医院成立10周年而建造的。他扩大了「康复度假村」的概念,为患者提供放松的环境,并将重点放在康复上,作为医院新计划的一部分。

此外医院还设置了一间音乐室和一间铺着木板的美术室。佐藤先生还将自己亲自创作的绘画和瓷器放置在大厅内外展出,为患者提供一种新的治疗艺术能量。

8. 7-11便利店(2010)

7-11便利店是世界上最大的便利店连锁集团。它不仅具备便利店个性化和便捷化的特色,更有着其经营和发展的独到之处。其庞大的店铺网络,规范化的商品管理,与时俱进的经营理念。

在即将到来40周年之际,佐藤可士和为7-11便利店重新制定了一套经营战略,重新定位该品牌的重点,便利店的优点并不在于价格而在他的产品质量和形象,为了提高品质和形象,可士和为便利店重新设计了1700多项商品包装。这一举措打破了每季度最高销售记录。佐藤可士和强调卖的不只是商品,而是对生活的重视,设计源于生活,应该通过设计来培养生活美感。

佐藤先生还参与了「Seven Cafe」(七咖啡)咖啡机的命名、包装和设计并创造出超高的人气,可以被认为是一种社会现象。并在1年里占据国内咖啡销量No.1的位置。

佐藤先生专注于最细节的设计,以最大限度地发挥这些优势。简单的包装设计,非常适合个人家庭餐桌,受到寻求高品质产品的消费者的欢迎。佐藤还针对食品进行分类,并按类别放置品牌标签,以便客人能够根据自己的需求轻松地选择产品。品牌重塑的第二年开始,以日常用品为主的「生活方式」品类开始逐步打造自有品牌。

在第三年,他推出了「Seven Café」,给7-11便利店带来了巨大的成功。佐藤先生将重塑品牌的传播方法结合到产品中,并从设计的角度出发结合。这是其他便利店产品都没有的一个因素。因此,他不仅带来了巨大的经济成功,也带来了巨大的影响,创新日本的生活方式。

9. 开被乐记念馆(2011)

「开杯乐纪念馆」以创造思考为概念,通过有关方便面的各种展览和体验项目,让参观者在愉快的气氛中了解发明、发现的重要性,学习创业精神,是一个体验型饮食教育设施。该公司的创业者安藤百福先生生前一直有一个念头:「希望告诉孩子们发明、发现的重要性」 纪念馆的logo创作灵感来源于开杯乐靠近杯口的外沿设计,设计3个惊叹号「!!!」来表现「发明和发现」的喜悦。内部基调以红色和白色为主,简洁明了。并将这一理念体现在博物馆的平面,空间和展示内容。

10. YANMAR公司(2013)

为了纪念Yanmar诞生 100周年,佐藤可士和为yanmar公司重新定制了一个品牌战略,该公司涉及工程、农业、建筑、海洋工程和全球能源等多个领域。

为了实现yanmar公司全球化的目的,佐藤制定了名为「高端品牌项目」战略,以展示洋马公司计划的未来发展方向。

佐藤为公司设计新的标志,还与创作者合作,创造了拖拉机原型和新农业服装,作为体现洋马全球化的意愿。YANMAR的品牌形象在国内外有所不同,在日本它以其拖拉机和公司卡通男孩角色Yanboh和Marboh而闻名。在海外,洋马是游艇和海洋工业的热门品牌。基于这一事实,佐藤将洋马的许多活动转移到「食品生产」和「能源转型」这两个主要视角,专注于一个企业使命,即追求一个可持续的,循环型社会。

佐藤设计了源自Oni-Yanma的Flying Y标志,该标志启发了公司名称,在日语中意为「蜻蜓」。此外,在新闻发布会和经销商活动上以新拖拉机和新农业、海洋服装的设计为特色,有力地表达了Yanmar的未来愿景。

佐藤还负责监制和指导位于大阪的新办公楼的建设,在办公楼在2014年建成。建筑本身的定位旨在通过采用进的环境技术实现零排放的概念模型。佐藤可士和将YANMAR FLYING-Y BUILDING大楼定位为传播媒体,不断传递洋马「可持续未来」的使命。

11. MoltBene企业新形象(2015)

MoltBene是日本著名护发公司,在即将到来的40周年纪念,邀请了佐藤可士和为公司制定新品牌战略的策划和执行,包括改变公司名称, 并为「MoltBene」开发新的企业形象。他为公司提出一个新的命题「人生中,体验新的美」。他还将集团子公司整合在这一新口号和新公司名称「美的体验」概念里。

佐藤设计的新标志灵感来自于「美」的日文汉字形式。整个标志是由 「美」简化和抽象而形成的,并使用紫色作为公司的新企业颜色。这区分了公司的独特性,因为紫色不是公司徽标中常用到颜色。同时负责新公司总部的入口和美容工作室的室内设计,并负责安装艺术品。

佐藤先生设计了公司新总部内部新美容工作室。用于员工培训,与新闻会议等,旨在该空间与整体品牌战略同步。

从工作室天花板上的织物和佐藤先生在墙上的表达了这个工作室作为新「美」的体验发源地的定位。通过在新公司名称、新标识、新美容工作室的内部设计以及其他新的传播媒介中象征性地融入新的使命宣言,将这些元素融合在一起,向社会提出了一种新的品牌战略方案。

12. Miwa Yamamoto(2016)

Miwa Yamamoto是一家Tenobe Somen(日本手工细麦面)公司。为了纪念诞生300周年,佐藤可士和被委托设计新的公司名称和新标识,还有公司的旗舰产品「白龙」新包装设计。在整个项目中,佐藤致力于将当代日常生活和传统工艺与日本食品传统之间相融合创造出和谐共生的形态,同时也为品牌创造了未来的形象。

考虑到公司日后扩张其他产品生产线,从而应对日益多样化的消费者饮食习惯,佐藤可士和先生提出将公司名字「Miaw SomenYamamoto」简化成为「Miwa Yamamoto」。

他表示公司历史悠久,与奈良古城历史相互交织有着深刻的历史渊源。基于这份历史情感佐藤以印章的形式设计出公司的新标志。公司产品」白龙」的包装以白色为基调,配合极简又细致的图案。简单而现代的,与其他竞争产品区别开来。包装上的图案细腻又精致与产品产生呼应,同时标志象征着Miwa Yamamoto细麦面背后独特而精致的技术水平。

13. DIFFERENCE(2016)

2016年佐藤为DIFFERENCE更新品牌形象系统,还为此定制了一套全新的西装订购系统。客人通过店内的裁缝进行初步测量,将测量好的尺寸保存进一个独特的APP应用中,从开始的测量尺寸到选材,布料,到支付都可通过该应用完成。

这建立了一套全新的服务模式,将线下实体店和线上店铺连接起来创造出一套新的订购系统。佐藤先生还提供了根据每个顾客的数据进行促销信息分析,将合适的促销信息传播到合适的客户身上。极大限度地发挥了定制西服的优势。

2016年10月在青山开业,佐藤先生设计了一个精致的室内空间。该应用程序允许商店提前询问顾客的个人喜好和预算,向他们展示不同的西装选择和面料样品,这样顾客一旦来到商店,就可以触摸和感觉他们「想要」的西装。顾客在真实商店和虚拟商店之间有一种无缝的体验。很多客户都很欢迎这项服务,因为每个人都可以在整个过程中享受到高质量的服务和个性化。

14. 武田制药(2018)

佐藤可士和为武田制药有限公司在东京·日本桥本町建设了的新全球总部提供了室内设计指导。佐藤设计了一个精致又具有代表性的室内空间,向世界展示武田公司的品牌核心。

他根据武田自成立以来的使命「生命的力量」为概念来进行设计并体现在公司的内部结构中, 从入口到接待处到工作区域的运动过程讲述了人类生活的故事。

并以生命中不可缺少的八个元素,生命,水,光,地球,树,人,联系和未来的汉字来作为空间装饰里的主要形式。将这些汉字提炼成现代符号,传达出了一种日本企业特有的「和」的感觉,并作为艺术品应用于墙壁、地毯和灯光。

该项目作为空间品牌的视角得到了广泛关注,不仅是为了传达武田支持「生命的力量」,还为所有与武田合作的人提供了分享同样美好未来的空间。

15. 日清食品公司设计工厂(2019)

2019年负责日清食品关西工厂的参观设施的创意指导、室内装饰设计。佐藤结合了趣味性和品牌历史,设计出与普通工厂不同的形式。

在入口处是巨大的杯,面外观采用日清的代表色:紅与白为主,从入口处走进內部参观后,映入眼帘的便是一条长长的红色走廊,全长200米的鲜红的参观通道内部同样延续了入口处的红白设计,与工厂内部的干净用色形成强烈对比,给人留下一种冲击又和谐的对比,在红色走廊里有40个大显示器展示生产过程,每分钟生产400个杯面,同时还能听到生产线中发生的声音取样。

日清工厂总面积约10万平方米,1年内最多可生产10亿顿产品。拥有尖端设备和IoT技术,是国内最大的食品工厂之一。

16. SAMURAI INCUBATE(2019)

2019年7月SAMURAI INCUBATE在日本总部的公司更换了全新的办公地点,同时也重新修订了企业形象系统。佐藤可士和为该公司重新整理了行动的方针,对齐经营理念提出修正,把焦点聚焦在「志勇礼诚」这句话上。

LOGO标志把「志勇礼诚」这四个字,无限的抽象化与简化,使logo的视觉表现上与日本极简的审美观念融合统一。

四个正方形水平排列,即统一又平衡稳固,象征了今后公司新事业的基础。新办公司在东京都港区的六本木一丁目街道中,佐藤认为新的公司地点是新开始的舞台,寓意着在这里能创造出更多新的商业机遇。新公司在六本木区选择了一栋三层楼并以「无」作为概念,去除了楼中附属的东西让大楼接近刚建好的状态。

公司二楼的灵感来自于「道场」这里能根据不同的用途灵活运用其空间,也可以做为一些特殊活动的场所。正面有一面纯白的墙,传达着一种从无到有的理念,同时也是这个空间中重要的标志。其他的空间是无隔断的一体化空间设计,可以满足快速的繁忙事务的处理。在空间设计中材质选择了木头、不锈钢、布、玻璃,希望这里散发出轻松和质朴的氛围。

设计师正在参与的战争——争抢用户注意力

鹤鹤

早些时候,在medium上看到了政府UX设计师,Cyd Harrell所写的以”尊重用户“为主题的文章,里面提到了尊重用户的时间,尊重用户的能力以及尊重用户价值。


阅读后使我脑海中一个一直以来都若隐若现的想法逐渐露出一角,从那开始我渐渐关注用户、时间、掌控力、注意力这一组词语所组成的一个模糊的概念,这个概念的核心就是产品如何侵扰用户,过度商业化然后导致用户的信息超载情况。 

这个观点一开始还是很模糊,我并没有获得足够的信息支持我阐述清楚这个主题,直到后面,我看到NNG(尼尔森诺曼集团官网)的一篇关于”注意力经济“的文章,终于把这一系列元素组织好,产出了今天这篇文章。(本来以为理清这一个主题要很久)


首先我要提出一个词语,"wicked problems”。在我学习国外的设计思维课程时,在前面几个章节中有提到一个“wicked problems”即棘手的问题这样一个概念,也可以翻译为抗解问题。指的是极为复杂,严重,上升到社会层面及人类层面的问题。如环境污染,农民工问题,教育问题等。而设计思维被发明出来一个重要目的或者说任务就是用于解决一些这样的问题,用系统思维和创新性的视角来挖掘潜藏的核心问题,以及探索对应的最佳解决方案。 

我提到这一点不是要对比国内国外环境,也不是要赞美国外的设计氛围,而是想提醒大家,我们设计师可以做更多,可以想得更多,可以用设计思维,结合理性和创意去解决很多问题。我一直以来翻译一些国外的系统理论,设计方法论,也是想用自己的力量让大家了解更多设计的可能,除了眼前的屏幕,我们的视野应该放的更长更远,去思考我们解决的问题,以及我们所设计的方案可能会衍生的一系列问题。


我接下来要讲的,就是在当下环境下一个很关键的问题,用户注意力。 

一:用户的注意力


注意力成为人类的限制因素

大家回忆一下,每天清晨,都有哪些内容吸引你的注意力?了解时间、看一下微信未读消息、早报新闻等等等等。到了公司食堂,你看一下周围有多少人一边吃东西一遍盯着手机屏幕?在去工位的路上,又有多少人低头玩着手机走路?这还没完,到了工位上,打开电脑,接收邮件,查看工作事项;打开网站阅读一些学习内容;微信突然跳出来一个红点,打开网易云音乐挑选一首歌,选着选着看到群聊里一条新鲜轶事,然后腾讯新闻弹出来,忍不住又去点开阅读下。


没错,这是我的日常生活,我是一个选择恐惧症患者,但我却总是忍不住把自己置于一个同时处理超多个事项的情况下。读这篇文章的你也应该一样。我曾经很多次想,这种情况应该怪我自己吗?还是别的什么问题?


OK,这确实并不单纯是人的问题,还有产品、服务的问题。注意力是当下时代最为宝贵的资源,而产品一直在争抢的所谓的时间,也只是注意力的一部分而已。在信息大爆炸甚至工业革命之前,人类的大部分历史中,知识、信息都是很宝贵的资源,只有很少部分人能够阅读,能够获取一定的信息。但在信息大爆炸的今天,我们可以轻易获得大部分我们想了解的或不想了解的信息,只需要动动手指,只需要睁开眼睛。 

我们获得了巨量的信息,但我们的信息处理能力并没有产生什么变化,是的我们现在处理信息的总量,和几百年前的人类祖先并没有什么区别。因此,几百年后的今天,信息资源已经不是限制因素了,注意力才是,用有限的注意力,去获取无限的信息,结果显而易见。你在浏览文章的时候是没有办法看动漫的,当然你在作图时也无法浏览新闻。 

分心导致低效

到这里,大家应该都清楚,人类的注意力有限,我们无法同时做很多事情,然而很多时候,我们却在同时进行很多事情,因为一次性完成多个任务,对于我们有着很强的吸引力,然而结果往往是错误百出或者是更低的效率。 

在《简约至上,交互设计四策略》中专门提到了分心对用户的影响,有时候,分心不是用户自发的,而是来自产品的错误引导。产品界面中过多干扰元素,或者诱导元素导致用户经常性的转移注意力,这些东西让原本简单的任务变得异常复杂。比如阅读。


如果你经常在medium阅读文章,你会发现一类文章读起来效率很低,且经常容易令你分心乃至焦虑。那就是在文内插入各种链接的文章。每一个链接仿佛都在勾引你,快来看一下吧,这里有好东西,然后读者就打开了一个、两个乃至四五个网页,因此读一篇文章附送了五篇文章,那么读者需要把这些附加内容浏览完毕再重新开始阅读最初的那篇文章吗?当然有些人会凭借顽强的毅力(或者根本不感兴趣)跳过那些链接并阅读完整篇文章,那你很厉害,但是大部分人都做不到,尤其是设计师,因为我们对知识始终保持饥渴。

(写到这里微信突然弹出来几条消息,然后youtube推了一个视频,最后我又想起来长安十二时辰最后一集我并没有看,再次回来已经是十分钟后了,这还是我强忍住去看视频和电视剧的结果)


这些链接分明可以放在文章的结尾,感兴趣的人自然会去择优而读。除了文内链接,文章左右两侧的广告、弹窗以各种形式挑战你的注意力,瞥一眼你就会浪费几秒,没忍住点进去则会浪费更多时间,是的我是谁我在哪我在干什么?我只是想阅读一篇文章而已,所以为什么现在逛淘宝。


各种设备也在不断地使我们分心,不仅限于屏幕,还包括听觉触觉,如手机的语音提醒、震动。持续的打断甚至会使人们上瘾,可能下一个消息很重要,我必须看一下,于是你又拿起手机解锁然后打开微信,你看个锤子肯定又是腾讯新闻。不停的打断会影响我们的正常任务,可能是学习也可能是工作。最终我们可能需要花费更多的时间来完成计划事项,且完成的质量堪忧。 
PS:打游戏应该很少分心 

在现实中,人类不会这样互相打断,如果我们想要请求某人帮忙,会根据对方所处的场景状态来决定是否打断对方,也会考虑事件的紧急程度。如果事情很重要比如你的手机在网吧被偷了(重要),而你在玩游戏(没那么重要),那我们会选择打断对方。


而机器的问题在于,它不会以人的方式思考,我们设计师经常提到要以人为中心,但机器本身只会执行指令,企业的指令,因此不管信息是否重要,它会按照设定推送给你。事实上,社交应用及各种产品都应该区分信息的重要程度,而不是各种信息不分主次不分场景一股脑推送出来。


我们都知道福格模型B=MAT,想要促成结果需要对应的需求,更确切的说是场景+时机+需求。当我在公司门口,打开滴滴准备打车时自动弹出了家的地址,我只需要点击就能填写完毕而没必要重复输入,这是一个很流畅且体验良好的提醒。


而我这样一个轻度视频用户,偶然打开爱奇艺瞬间收到40多条内容推送,要不是因为开了会员我会当场卸载!!


分心也是拖延症的一个罪魁祸首,我们拖延的一个重要原因是注意力被其他事物所吸引,有可能是游戏,有可能是新闻资讯。大部分人都不能按照自己的最初计划完美及时的去完成。总是一拖再拖,可能并不是我们想拖延,而是有太多内容在吸引我们的注意力。凯利教授的《自控力》中就提到所有人想要拥有自控力,都需要知道我想要、我不想和我要做这三部分内容。以便抵制来自生活中的各种吸引力或者说诱惑。


二:注意力经济的崛起

1997年,Michael H. Goldhaber写道,“全球经济正在从物质经济转向基于人类注意力的经济”。许多服务都是免费提供的,而用户为服务需要花费的货币就是注意力。用户不用付费,只需要支付注意力。


产品争抢用户注意力

注意力经济的最初概念竟然从1997年就被提出,我看到时相当震惊,在二十多年前,企业就开始低效的使用用户注意力来变现,国内是什么时候开始的呢,答案应该是从争抢用户使用时长的竞争策略开始,占领用户时间就等于占领用户注意力。 

我们已经沉溺于争抢注意力策略这个泥沼中,从各种花费巨量时间的游戏如王者荣耀,到风靡至今的各类直播平台,再到时下流行的短视频,我们在不停的花费时间、时间、时间,注意力被无意识的“窃取”。用户不需要花费一分钱也可以正常娱乐,而你的参与,你的注意力的参与却在帮助企业不断挣钱。


如果你还不清楚自己是如何被争抢乃至窃取注意力的话,你可以回忆一下你每天接收到各种推送信息,除了各类应用的Push,还有短信、电话、邮件等等。推送提醒你关注的主播上线了,提醒你的内容新闻,提醒你一切可以诱惑你的信息。购房后销售人员信誓旦旦说不会泄露业主信息,交房前一年就有各种装修家居的短信和电话轰炸。淘宝购物没有一周就各种五星好评的消息请求。这则是另一种层面的窃取用户注意力了。


如果给你推送的是你想要的内容你是应该开心呢还是担忧呢。因为你有时也会想,关于你的信息是不是已经被泄露到处都是。当然并不都是恶意泄露,随着技术进步我们有了大数据技术,但精准推荐虽好,用户隐私是否也应该划入考虑范围?


畸形的注意力变现策略

我们在上面提到了大数据、智能推荐广告技术的负面影响,即侵犯用户隐私,随着用户对这一技术的感知越发明显,抱怨声会接踵而来,企业不得不考虑倾听用户的声音,将保护用户隐私纳入考虑范围,当然这应当是个可选项,那些有意识想要摆脱这种隐私暴露问题的用户,可以选择关闭这项技术在它个人生活中的应用,而并不介意隐私问题的用户可以继续享受智能推荐带来的便利。


我们虽然一再强调它导致的隐私问题,但事实上智能推荐利用现代技术实现了精准投放广告这一的广告变现形式,相比其余的商业模式要委婉的多。


广告的本意即广而告之,其目的在于将产品推荐给有需要的用户,广告本身是没有任何贬义的词汇,但在信息爆炸的当下,广告对于用户甚至对于广告投放者本身都变成了一个带有贬义的词,产生这种意识变化的原因就是当下广告的性质产生了畸变,广告已经不是一个双赢的推荐行为,而是一个过于干扰用户的打扰行为。


更多情况下,广告投放者倾向于用巨量的投放数量来换取一定比率的转化,这是一种传统低效的广告变现手段,当然平台获得实实在在的收益,建立在展示付费模式下的广告不用考虑最终转化率,只需要无脑投放,这导致了广告信息的总量产生了巨幅的提升。除此之外,更多广告是建立在吸引注意力这一诱导行为上,更鲜艳的颜色,夸张的动效,让人血脉喷张的文案,H内容擦边球,不论用户当前在执行什么任务,只要他不是瞎子都会或多或少被转移注意力乃至引导到广告详情页面。


除此之外,我们还会利用设计思维,预测用户行为,根据用户习惯主动将干扰性内容放置在用户的核心路径,从而产生一些误操作的假象,比如将关闭按钮做的微小,比如将banner无限接近按钮从而引发误操作。结果就是用户的任务中断,不得不重复的返回修正操作,这样持续性的犯错使用户困扰且失落,却不知道这是设计人员的策略。吸引用户注意力的变现策略大多建立在牺牲用户体验的基础上,我们都能意识到这不是一种可持续发展的收益模式,它容易侵害用户价值,培养低质量用户,且会衍生一系列其他问题。


目前这种盗窃用户注意力的变现性质主要有以下几个方式。

1.引人注目的动画吸引注意力 
2.拥挤不堪的界面设计,一次性显示大量信息,期望一定比率的内容可以吸引一定数3量的用户 
3.强迫用户聚焦的广告行为,如不可关闭的视频 
4.网站或应用频繁发送服务通知和广告通知期望用户重新参与进产品


三:注意力争夺的负面结果


低效的广告效率

还是那个简单的逻辑,用户的注意力有限,同时各种产品和服务的广告通知铺天盖地而来,且数量不断增加,不仅引用户反感,更造成广告传达效率低下的现状,无论是PC还是移动端,人口红利已经消耗殆尽,用户自身更是形成抗拒广告的习惯,这种情况下,继续延续传统的粗放型广告投放收益只会持续下降,不同的广告商盲目的放量,最终造成的结果是用户全部忽略。


用户事实上都比较懒,能不去做任何行动,就会一直保持原状。例如邮箱订阅了几十家内容,每天都会收到数十封推广邮件,用户或许并不会因为厌烦而点开每封邮件逐一退订,但他会直接忽略所有内容,不论如何,造成的结果就是广告低效乃至无效。与之相反,我们看一个正面例子,Youtube的广告模式。Youtube提供一个五秒的试看期限,超过五秒后用户可以选择继续看广告或者直接跳过去浏览心仪的内容。若是用户对广告感兴趣,那他可以接受广告并转化为对应的消费者,广告投放者和消费者是一个双赢的状态,这样不仅考虑了企业利益,更考虑了用户价值,尊重用户的选择,使内容可控。

再来看国内的视频平台,体贴的为大家提供了一个关闭声音的按钮,我不否认这也是一个提升体验的地方,因为大部分用户都对长达一分钟的广告并不感冒,因此经常性的操作是关闭声音,然后在这一分钟去做一些其他的事情。这种情况下,广告的作用并没有发挥,而广告投放者仍然要为之付出对应的费用,因为广告确实被展示了,只是用户没有看。从用户的视角,则是我对这则广告(对应的商品)并不感兴趣,但我不得不为之浪费一分钟。


当然这就是国内产品的现状,当其他人都在使用粗放的竞争手段,你就很难与其划分界限。且企业往往会考虑到品牌曝光等策略,考虑长远投入而不是眼下的转化,那就是另一种情况了。


广告盲现象

广告盲现象是由广告现状培养出来的用户习惯,指的是人们会自动忽略一些常用的广告投放位置的内容,自动忽略看起来像是广告的内容。这种现象很广泛和常见,比如百度搜索顶部的前几条,带有广告标签的搜索结果,用户一般并不会去点击,而是选择下拉浏览其他选项,另外在PC两侧的信息往往容易被忽略,因为这里也是广告经常投放的位置。


若手机同时出现三行以上的推送,用户往往不会仔细阅读而是直接清空。甚至连最吸引注意力的弹窗广告也能第一时间被识别并关掉,在弹窗还未加载完毕前。 
广告通常为了争抢用户注意力而被刻意做的不一样,但用户忍耐力比想象中更好,这个情况可以参考适应性偏见原则,且用户主动屏蔽信息也越来越成为习惯性行为,尤其是那些看起来花哨、内容丰富理应很吸引人的banner,正因如此吸引人,用户能快速分辨并将其定义为广告然后自动忽略,例如我们在线阅读小说是中间插入的banner,往往只会短暂打断我们的阅读进程。 
与medium的阅读体验不同,medium的文内链接更多的是吸引力,用户能意识到这些链接是更具吸引力的内容,且是正向的有益的(往往属于知识性质的优质内容),而我们在线阅读小说中插入的广告则会使用户形成误解——推销类广告,没有任何意义。因此用户会立即忽略。我们都了解一个词即耐受性,事实上用户往往比他自己了解的更加能够忍受一些东西。虽然从商业角度考虑,各种产品服务都在争抢用户注意力,从而不断的打断用户的工作、思考、学习,但人们已经逐渐掌握了一定窍门,来主动屏蔽一些无益的广告内容,乃至形成广告盲的行为习惯。 
针对这种情况了,设计人员和广告投放者应该怎么办呢?你可以选择加大投放数量,这种做法必然会很快见效,但不是长远之计,更佳的方案是考虑用户场景、习惯,通过洞察用户来提高广告投放的效率质量,智能推荐是一种做法,针对自家产品制定个性化方案也是一种方法,创意推动广告自传播也是一种手法,总之,传统买量放量的投放方式应该重新被考虑,如何双赢来回归用户价值是每个企业应该认真考虑的问题。 
我把企业围绕注意力经济不断争抢用户注意力的现象定义为一场战争,企业与企业,企业与用户都被编织在这张罗网中。在这场战争中用户是一个什么状态,我的回答是被掌控、被投入以及被摧毁。


四:被控制的用户


产品掌控用户而不是用户掌控产品

这个时代,人仿佛是手机的奴隶。新技术的发展往往会给一批人带来恐惧,因为它即意味着更高的效率,更方便的生活,也意味着过去的消逝甚至迷失。从工业化在到信息化,变化一直在发生,我们迎接新生事物的同时也迎接来一批同样数量的问题。


我们实际上并没有被手机掌控,而是被手机里的一系列产品所掌控。当然,你不会被微信阅读这样的产品掌控,大部分人都不会阅读成瘾。但与之对应的,社交成瘾、游戏成瘾、八卦成瘾等现象却屡见不鲜。我们生活在大文娱时代,来自各方面的欲望、诱惑在不断地吸引注意力,不断的打断正常的任务目标。我们内心深处想要学习练习,想要更好的成绩,想要更好的工作,但这些从社会价值和个人价值角度更加正向的目标却往往被各种娱乐向产品打断,且往往过度沉溺,因为很少有产品会提醒你已经花了多少时间,他们只想占领你所有的注意力,然后把注意力货币转化为自己的收益。


“惯性”导致的持续投入 
关于用户持续投入进一个产品,而忽略时间、精力的现象,在当下已经是常态。我们都知道沉没成本和鸡蛋理论。但我认为这两个概念还不够,因此我引入了一个惯性的概念,同滚雪球效应异曲同工。持续投入产生惯性,最终导致难以逃离,与之对应的用户行为就是频繁的卸载又安装游戏,以及成瘾性的过度使用某个产品,好吧说到这大家都能猜到是什么游戏什么产品。事实上我没有针对性,而是讲的一个更普遍的现象。 
惯性投入导致的沉迷产品我们如何定义的,为何强调沉迷现象?因为沉迷造成的结果是用户时间和精力的消耗,从社会价值考虑过度娱乐而消耗时间是不被认可的行为。设计师经常考虑体验层,考虑商业价值,但的确很少考虑到用户价值,及与之对应的社会价值的实现。这里面一个重要因素就是时间,我之前分享的《用户体验设计基础》中提到的一套交互设计理论中,就把时间纳入考虑范围,事实上这是贯穿用户使用流程中的一个关键因素,但我们的确很少考虑到,不仅仅是完成任务的时间,更有使用产品的总时长,及会衍生的一系列问题。 
我们也曾体验过一些尊重用户时间的产品,如阅读超过2个小时会提醒用户进行休息,同时在沉浸式体验的界面设计中仍然保留时间的展示。 
所以现在,体验已经不仅限于交互、任务完成率、可用性易用性这些基础内容,体验还涉及到用户价值,尊重用户,你更可能会获得用户的尊重。 
越来越多的自控力挑战
自控力挑战来自两方面,一方面是用户自身,即用户自我控制能力,另一方面则来源于挑战,即海量的信息对注意力的争抢乃至盗窃。当然这些挑战不局限于好坏某个方面。因为我们既可能被游戏等娱乐项目吸引,也有可能被学习内容吸引,更有可能被同时完成多个任务的期望所吸引。 
个人的自我控制能力是天生的,但可以通过后期锻炼来进一步提升。问题在于生活中的诱惑,吸引力的来源变多了,用户沉迷于各种产品真的应当归咎于用户自身吗?这个问题就像是美国核事故操作失误应该完全归咎于操作人员一样可笑,毕竟控制开关的设计本身存在更多问题。外在信息的干扰的确在成倍的增加,网络小说、游戏、短视频不断增加的自控力挑战都是罪魁祸首。你期望七八岁的小孩子能有多强大的自控力呢?同理,青年群体就应该有很强大的自控力吗?(成年人很多都没有如此强大的自控力可以面对社会上的各种吸引力)。 
我们还经常陷入低效学习怪圈,以一个过于分心的状态去学习知识。比如同时收藏了UX体验书籍课程、插画设计课程、动效设计、C4D等等在学习UX时忍不住想到插画,学习插画时又想到C4D,无法掌握自控力的结果就是分心产生同时完成多个任务的欲望,最终结果就是注意分散导致的低效率学习,投入与产出完全不成正比。


五:设计师如何参与到这场战争

事实上我们已经参与到了这场战争中,当作为设计支持人员为商业目标而进行设计时,我们已经在争抢用户注意力。虽然存在用户注意力被过度经济化的问题,但这是行业现状,也不是个人能够解决的,它已经上升到wicked problem的层面。那么作为企业一份子的我们必然需要了解如何争抢用户注意力,这和企业盈利挂钩。这也是目前大部分设计师都正在做的事情。另一方面我们应该利用设计思维探索其他可能,即“戒瘾”的可能性。兼顾商业价值和体验,最终在保证收益的情况下避免过度争抢用户注意力。


打造上瘾产品
提到打造成瘾的产品,最为人熟知的就是上瘾模型,触发——行动——多变的酬劳——投入。不同于工具类产品,成瘾产品大部分发生在killtime的产品类型中。如游戏、短视频、直播、新社交产品等。上瘾模式最早来源于游戏设计,后来逐渐被应用于其他产品设计中。简单来说,设计师需要了解几个核心元素,动机、行为、触点,洞察用户需求与动机,创造对应的触发器,然后使用户按照预期的方案进行交互,最终将商业目标转化为用户行为。常见的用法如游戏中的排行榜,利用攀比心理引导用户付费。再如积分商城,利用持续的投入减少用户流失的比例,从而创造更多变现机会。


打造上瘾产品关键点在于对用户心理的把握,这需要一定的敏感度,以及对应的心理学知识如沉没成本、金发姑娘效应等。同时也需要对应的方法来帮助梳理可能的痛点机会点。较常用的是用户体验地图,我们通常用它来发掘体验向的问题,但事实上作为梳理用户体验流程和对应情绪节点的方法可以适用很多场景,比如上瘾点的挖掘。


关于用户体验地图(也叫用户旅程图)可以查阅梓暄的这篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。 
我接下来提供另一个方法用来梳理用户与各种设计元素的关系。这是一种帮助我们系统思考的方法,具体分为五个步骤。


1.将信息分解为节点(信息块 如对象、概念)和链接(节点之间的链接和关系)


2.可视化信息(草绘或将它们摆在现实中,黑板上桌子上等等)
帮助了理解信息及关系。


3.与他人协作,包括利益相关者。分享你的思维模式可以帮助其他人在你的想法上继续思考,反之亦然。创建物理图和分组注释以生成不同的系统模型,允许团队综合多个观点。


4.快速发布解决方案以持续收集反馈,反馈有助于解决我们没有找到正确答案的问题,收集的反馈越多,下一步中有效指导信息就越多。


5.迭代,每次迭代都能利用反馈来解决一些新的问题,从而最终解决整个棘手的问题。 

能打造出一款真正让用户上瘾的产品固然很重要,但像我强调过好多遍的那样,我们应当考虑用户价值,考虑衍生问题。如果一定要争抢用户注意力,也请遵循一个总的设计原则,即下面要提到的总的设计价值,由Cyd Harrell提出,且Cyd Harrell一直致力于此。


总的设计价值

我们所服务的互联网企业不断争抢用户注意力,都期望用户停留更多时间为企业创造更多价值,但却忽略了尊重用户的时间、尊严、和能力。——Cyd Harrell 
这是我很赞同的一个总的设计原则,即尊重用户的时间尊严和能力。如果问你,有没有一个全世界通用的大家都认可的设计价值? 我想那就是尊重用户。 
很多时候,我们设计师都无意识的参与到了争抢用户注意力的战争中,从近些年的设计主题由视觉到体验再到商业,我们可以看出其实设计师仍然处于纯粹的为企业服务的状态,互联网设计围绕着企业机器运转,忽略用户价值,忽略用户注意力承载度,最终导致了广告盲及各种成瘾现象。从社会价值角度讲,用户应该把更多时间投入到工作学习与生活中,而不是在无意义的各种推广和猎奇信息中沉溺迷失。 
借用Cyd Harrell的话,如果不能够让一些企业采取这样的价值观,并将它们运用在产品中,仅在我们设计领域传播这种价值观是没有任何意义的。但相信有很多体验设计领域的设计师都在努力帮助企业做出正确的选择,去尊重用户价值。很高兴的是从王者荣耀的防沉迷策略,到抖音的青年保护计划,我们能看到一些企业对于这些产品衍生问题进行方案探索。 

无论是沉迷问题,还是低效率问题都是以用户注意力为核心的一个wicked problem,它没有清晰的解决方案,且会持续很久,我们无法知道哪种解决方案是最终方案,只有更好的方案和差一些的方案,这也是wicked problem的 一大特性。读到这文章也要结束了,我无法提供一个注意力问题的解决方案,因为它涵盖的领域,相关的利益者实在太庞杂,不是简单的处理某个节点的问题就能够解决的。写这篇文章的目的更多的是让大家了解到我们目前介入及面临的一个现实存在的问题——注意力问题。同时希望大家能开始意识到尊重用户这一设计原则的重要性,尊重用户,尊重用户的时间和尊严,这句话对我感触很大,希望也能触发你对于设计的另一种认识.


最后,我们可能不知道答案是什么,但我们知道我们必须不停的探索。 


转自-UI

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档