首页

v-for生成多个div并给div中的组件绑定值

seo达人

实际业务比较复杂不便展示,写一个简单的demo记录此功能



 



遍历此div:



<div v-for="item in demoArray">

    <input type="text" v-model="item.name">

    <el-switch class="exio-switch" v-model="item.status" active-text="开" inactive-    text="关" active-color="#13ce66"></el-switch>

    <button @click="showInfo(item)">查看</button>

</div>

js代码:



new Vue({

    el: '#app',

    data() {

        return {

            demoArray: [],

        };

    },

    created() {

        // 生成模拟数据

        for (let i = 0; i < 5; i++) {

            let e = {};

            e.name = "div"+i;

            e.status = true;

            this.demoArray.push(e);

        }

    },

    methods: {

        showInfo(item) {

            console.log(item.name);

            console.log(item.status);

        }

    }

})

页面展示:







修改一条数据:







验证双向绑定结果:







为了解决不确定数量的数据(数据来源可能是接口等)的展示和操作,将每条数据作为元素放在数组中,通过数组中元素的属性来进行双向绑定。



整理的仓促,emmm,收工




我以前在阿里巴巴的流量方法论

涛涛

作者从自身经验出发,结合实际案例,分享了流量获取过程中非常有价值的知识,值得运营人细读精读,一起学习。

大家好,我是国平。我做流量已经有16年了,2010年之前主要在阿里巴巴国际站负责免费流量增长,把海外B2B免费流量的日UV做到几百万。后来成立了一家乙方公司叫光年实验室(以前叫杭州光年),是携程、阿里云等40多家主流的大型互联网公司的流量顾问。另外这些年也没少折腾其他项目,其中做过电商(外贸独立B2C网站)、做过电商系统(类似有赞)、 做过移动端APP (社交方向)。

来“群响”这段时间,只要能参加的聚会都参加了,听过大家分享很多非常有意思的流量玩法。先不说不同行业的“隔行如隔山”,就是在流量领域,可能有很多种细分领域,大家之间的资讯都是隔离得很厉害的。流量的渠道和玩法是永远在变的,不过也有一些不变的东西,如平台和内容创造者的博弈、大家仰视平台的心态(其实没必要)、以及各种流量玩法的底层模式等。

我首先分享的是过去一个很主流的流量渠道–搜索引擎,看看在现在这个移动互联网时代和新媒体时代还能如何获取流量。

第一个议题就是:现在是否还值得做搜索引擎营销

结论是:值得做,不过如果不了解现在国内百度的现状生态,99%的人ROI一定会很差的。至于海外的Google,它依然是大部分人的第一大流量来源。

首先说为什么值得做。

大家可能不知道的是,在搜索引擎,也是65%以上的流量来自移动端,所以不要认为搜索引擎是PC流量的代表。百度的DAU是没有下降的,DAU在3亿多,大家在手机上也是会搜索的。

我喜欢把流量分为“搜索流量”和“社交流量”,分别对应“人找信息”和“信息找人”。我的观点是这两种大家获取信息的模式没有主次之分。

只是在国内,百度的相对市场份额是一路下滑的,先是淘宝、去哪儿等分走了很多垂直搜索的流量,接着又有微博、微信、抖音等社交平台相继崛起,百度没有以前那么重要了。

我们服务的好几家头部互联网公司每天的总UV(包括APP)当中,还有超过四分之一的流量来自搜索引擎。 客户不能拿来作为案例,不过有公开的渠道可以查到的一个例子:知乎某段时间的每天的总UV有四千多万的情况下,来自搜索引擎的UV有一千三百万。

搜索引擎流量的转化率,一直都是所有流量渠道里面最高的。因为社交媒体的流量的性质是“逛”,而搜索引擎流量是主动“搜”。搜索引擎流量在关键词和内容匹配的情况下,有不少做到过10%左右转化的例子。

然后搜索引擎流量相对稳定可控,而且像SEO自然排名这样的流量还不要花钱,这也是头部互联网公司比较重视这块的原因。不说它们,就是那种中型的以卖流量为商业模式的互联网公司,如融360、土巴兔就是其中的代表,每天都从百度获取百万UV以上SEO免费流量。

最后就是目前还存在一些以前很少有人知道的红利,这是今天后面要讲的重点。

那为什么说大部分人做搜素引擎流量的人ROI会很差,要从自然排名(SEO)和 竞价排名 (PPC)两块来看所谓的内情。

搜索引擎营销分为自然排名和竞价排名两块,自然排名就是非广告排名,是由系统按照一定的算法来决定谁应该排在最前面。竞价排名就是买排名(PPC。即Pay Per Click),根据你花钱的多少以及用户更喜欢谁的广告把你的广告排在前面去,当然在百度主要是看谁花的钱多。

对于自然排名来说,它的回报周期应该是一年以后,而很多人期望几个月就有好效果;然后是整个行业的无论是甲方公司还是乙方公司都没有很专业的人,搜索引擎营销服务商行业总体来说是一个逆淘汰的行业。还有百度自己的页面在搜索结果中占了快三分之一,而剩下的流量头部效用明显,也就是只有大网站才能获得不错的流量;在这么一种糟糕的情况下,百度对优秀内容的判断严重失控,很多人通过一些作弊的方法快速获取了很多流量。

而竞价排名这种花钱买排名的方式,对于很多人是鸡肋一样的存在了。我个人觉得百度的价值观不是很正,他们在一开始就用错误的方法在引导大家投放广告。 这个可能有点危言耸听,也就是在指责百度为了自己的利益,这十几年以来一直在误导大家去花更多的钱。

这是由于竞价排名的模式就决定了,只有大家都共同认为某些关键词的流量很大才会去竞争这个词,而大众都是拍脑袋来认为哪些词重要与否的,比如任何一个卖口红的都认为“口红”这个词要是不投的话,好像搜索引擎流量就不要做了,百度也就顺水推舟让大家用这种思维模式去投广告。

具体案例:我给大家两张图,假设客户是在卖“阿胶”:

为了让大家有直观的感受,我先考一下大家:假设你是这个卖阿胶的商家,你去百度投广告,你们会决定买什么关键词呢?

 

 

这张是曾经百度给客户培训的关键词选词方法:

这种方法就是大家去定义一些和你的业务相关的核心词,如阿胶、滋补品等,再定义一些前缀和后缀等,然后再排列组合。这样出来的词就是:

上海阿胶电话

北京阿胶电话

上海阿胶网站

……

由于大家选词方法一样,就会产生竞争,一定可以把少部分大家能想到的词的价格抬上去。

而这张是我们一直以来用的关键词选词方法:

这里是通过很多数据挖掘工具,先把整个行业用户正在搜索什么都列出来,必须要穷尽整个行业,越多越好,然后按照核心词再分成不同的组,这个时候用户的需求就明明白白列在你面前了。

从这份数据能看到,“阿胶”这个代表整个类目的词语,每天的搜索量也只有8078。搜索引擎上所有的行业都是这样的,用户搜索的80%的词,字数都是很多的。其实大家想一想也不难理解,即使一个初级网民,也明白用“阿胶”这样的词语是搜索不到自己想要的东西的,大部分来搜索引擎搜索都带有明确的需求而来,大部分人的需求都有个性化和独特的地方。

但是在商家投放广告的时候,就陷入了一个思维上的误区,以为“阿胶”这个词语特别特别重要。实际上,一个品类重要,不意味着代表这个行业的某个行业关键词就重要。

比如“iphone11 价格“这个词语的搜索量远远超过”手机“这个词语;”163邮箱“这个词语的搜索量一天是十多万,而”免费邮箱”这个词语的搜索量是三千多。“小说” 这个词搜索量不高,“TXT全本小说下载” 这个词每天有160多万的搜素量。

百度也就没有纠正大家的误区,让大家按照这个思维定势去买关键词。十多年来,很多人也是这样按照这个误区在做着SEO。

第二张图是我从百度于2019年10月28日获取的数据,每天百度上真实地搜索“阿胶”相关的关键词基本都在这里了。无论你怎么想破脑袋,你也想不出用户是这样在搜索的。图二的数据,即使有些从事了10年搜索引擎流量运营的人,从来都没看到过的。

我前面所说的流量红利,就是这么多年以来行业里都在用错误的方法做搜索引擎流量,所以以至于到了今天,搜索引擎上还有一大半的流量没有人要的。我再发几张图,大家自行去搜索就知道了。

(这里的日搜索量是指查询这个数据的那天再往前30天的流量总数除以30天,就得出最近一个月的日均搜索量。数据是有时效性的,所以要用的数据。)

以下是稍旧一些的数据。

投资理财:

汽车行业:

第二个议题:搜索引擎营销是一个什么样的流量世界

搜索引擎营销已经有一帮人做了十多年,现在来看这是一个什么样的流量世界呢?

首先搜索引擎是“长尾理论”的最佳实证, 在搜索引擎做流量要深刻的理解长尾效用。Google曾经公布过一个数据:google每天的十几亿次搜索中,如果匹配用户搜索的那个几个词语,有15%的搜索词是过去1年从来没有人这么搜索过的。比如类似搜索 “ how to make an automatic door in minecraft ”,这样的词的组合, 每天有15%的词过去1年都没人这么组合在一起搜索。这样的情况,不光Google和百度是如此,淘宝、小红书、微信搜索里都是这样。

如果真是情况是这样的,你根本就没法做到说我要“做某几百个词的排名”这样的事情,因为每天词语都在变。我看过太多团队其实就拿着几十个自己想出来的词在那里做投放和做SEO。这种情况十年前是这样,现在也还是这样。

很多人问过我怎么找搜索引擎营销方面的人。我的建议是只要他们问面试者一个问题就可以结束面试了。那就是问对方在做搜索引擎营销的时候目标关键词是多少个。

分这么几个水平段:

  • 少于1千个词—-还没有入门;
  • 1千到3万个词—-大部分是标准教程培训出来;
  • 3万到10万个词—-只有这个阶段才能考虑录用 ;
  • 10万到50万个词—-对于一个非常小业务范围的品类是合格的;
  • 50万到500万个词—-这样的人大概一年都面试不到一个。

在搜索引擎上,找到50万个属于某个行业词绝对是一种很强的能力。实际光找足50万这个数量还不够,如果要做好投放,还要找到最佳性价比、鲜的词。现场如果有在投放搜索引擎广告的人,对比看一下自己公司后台有多少关键词在投就知道你们目前所处的阶段了。

搜索引擎其实有广泛匹配的机制,但是如果你投的词太少,广泛匹配机制也并不能挽救你,而且这样会有很多没有转化的词在浪费钱。

现场目前做的是新媒体行业居多,假设你是一个做美妆的,你的目标就是要小红书上的美妆KOL推广你的产品。假设小红书官方在后台把所有的美妆达人都拉一份数据统计有2万个,而你们现在只有20多个KOL在投,你的对手却有1000多个。(这里先忽略1000多个KOL的操作成本,和红人KOL营销不同,买某个词的流量在搜索引擎上操作成本很低。)这个和在搜索引擎上做投放是一模一样的。

类似的,不知道大家同不同意,现在还在找大V合作的,如果是做效果广告的话,就是那种以前在搜索引擎上买“阿胶” 这种关键词的人,ROI很低。

阿里巴巴的流量增长团队是2002年成立,现在在搜索引擎这块的投放水平可以看一个网页:https://www.alibaba.com/showroom/showroom.html

大家点一下A字母,这里都是以A开头的关键词,一页是120个词,A字母下有22429页。A到Z一共是2千多万个词。

以前这是我负责的,我能确定每个词每天的流量都达到了一定的搜索量,也就是说都是比较重要的词语。那时候我们的口头禅就是“加词等于加流量”。记得当时从国外一家专门卖词的公司买了3万多个优质的词,然后我们一个季度的KPI就完成了。

顺便提一下, 其实这种方法也可以用来做产品。

比如旅游行业,当时有个知名网站,我们把整个旅游行业的词挖掘到了大概有500万左右,然后像前面那样分组分类,就知道了这个行业大部分用户的诉求。

当你在搜索引擎上能分析的词达到500万的时候,已经基本上是全量数据了,这些数据至少可以代表这个行业一半以上的人的诉求。这可以成为大数据的一次很好的应用。后来通过这批数据,发现旅游行业只要你去做攻略类产品是一定会活得不好的,因为攻略类需求占比排在很后面。结果现在大家也看到有些做攻略类的APP至今挣扎在盈利边缘。

然后大家看前面的汽车行业的词库数据,从2015年起, “SUV”和“七座”一直是这个行业真正的热点,但还是很多汽车互联网公司不知道这个。

然后看在阿里巴巴的一个页面:https://www.alibaba.com/showroom/mp3.html

这里列出了MP3的一些属性,有按“功能”、“屏幕” “充电时间” “风格” 和 ”颜色”, 这里的属性分类以及每个分类里的那些项目,完全是按搜索引擎里用户的搜索量从高到低排序的。这样做的结果就是转化率和粘度非常高,比当时产品经理做的页面提高了4倍。

具体很多细节可以在线下聚会可以分享。

第三个议题:怎么做好SEO和PPC

做好SEO和PPC最重要的事情就是关键词挖掘,不做这个事情基本是没法搞好搜索引擎流量的。大家要明白这么一个场景:在搜索引擎上,你的流量是通过一个个的关键词作为载体传播出去的,没有太多词传播你的流量,总的流量怎么可能多呢。

具体的关键词工具,我先介绍我们开发的一个:

https://mp.weixin.qq.com/s/M1VCCFqNb9xSBnmD2hktFg

一个行业里,光靠人脑是想不出这么多词的,这个工具可以帮你自动挑出很多词。光年实验室正在做一个SAAS平台,还有更多的关键词工具会出来。

注意一点,词语的数据一定要有时效性,最好就是最近几天的。前面说过Google的15%的搜索词是过去1年从来没有人这么搜索过的,如果数据没有时效性是没什么意义的,很多一个星期前流量大的词现在可能就不是的了。

对于很多人来说,最能去执行的就是去百度做PPC投放。如果你们可以搞好关键词挖掘,百度对你来说依然是一个非常有红利的流量渠道。

不过要遵循一些基本规则:

1. 为了防止收不回成本,第一批投放的词必须是没有任何人和你竞争的

在百度,如果这个词没有人和你竞争,点击价格只要3毛钱就可以。

所以一开始的策略就是买别人没有投的词,我们所有投出去的词都要查一下有没有人在投,但凡有一个竞争对手就不投了。大家可能想不到的是,即使这样你竟然还是可以投很多词的。

2. 做好广告组和落地页面的优化

我个人觉得搜索引擎是最早教会国内互联网人什么是转化率、落地页、复购这些基本概念的,在它之后成熟的淘宝只是进一步把它普及给了更多的人。 而北美在90年代中期就有了第一波商业化的互联网公司,它们更早更系统的研究很多东西,可以去补课,比如《Landing Page优化权威指南》这种最基本的书。

很多淘系的培训,由于它是一个封闭系统,速成技巧居多,系统的东西不多。广告组和落地页面的优化,稍微科学地做一下改进,可能可以提升好几倍的ROI。

至于那种最基本的事情都无法做到的公司,比如:你们的投放人员投放的关键词少于100个;以及无论什么关键词的流量都跳转到首页等这种业余行为,应该立即关掉搜索引擎投放,去拓展现在的微信、快手和抖音等渠道。没有专业投放就只能放弃这个渠道了,但要我说这里真的很多流量没人要。

我曾经见过两家在海外竞争的中国互联网公司,同样的APP,一家的获客成本是1美元多,另一家是10多美元,而第二家一直以为本来就要这么多,直接决定了后面一家公司一年后在这个赛道出局。

不专业的投放就是在给公司放血,我见过很多不专业的投手害死公司。

3. 不要找外包公司,靠自己的团队打造自己的流量竞争力

特别是那种代为操作帐号的公司。这个句话得罪很多人,但是事实。流量获取、用户增长应该要成为一家公司的核心竞争力,怎么可能靠一家第三方公司拿到这个竞争力呢? 搜索引擎流量外包这是一个逆淘汰行业,好的公司已经出局。(像我们这样的顾问型公司也只适合成熟的流量团队)

例如现在上市的某家流量外包的公司,曾经我们在办公室把他们的方案当作笑话在传阅的。 当他们的收益来自于你投放广告金额的百分比的时候,你投放的金额越多,他们收入越高,利益相悖,怎么可能会有精细化优化的动机。由于甲方帐号太多、而这些帐号基本都是实习生在操作的外包公司不要太多。

以我有限的创业经验, 产品和流量,应该是要公司高管要花最多时间的部分。我这么多年看过很多好的用户增长团队,很大程度上他们成就了那些公司。例如,我比大家更早知道今日头条的张一鸣,在2006年他们做酷讯的时候流量是做得特别好,甚至有一种方法成了后来行业惯用的方法。

当时酷讯做火车票查询,他们从一个固定的火车查询数据里把很多站站查询、车次查询生成了几十万个不同的网页,而这些网页都命中了很多查询“上海到南京火车票”这样的流量,从前面的案例大家可以推算,这种流量偏偏是大头,而“火车票“这种太泛的词流量没大家想象的那么高,所以酷讯的搜索引擎流量是很好的。

这种做法即使是十年后被“欣欣旅游网“抄了一遍依然获得了大量流量。

操作方法具体看:http://huoche.cncn.com/

这种方法后来被总结为:当你的行业有一些从固有数据库能查询到的数据,请把它网页化,去命中搜索引擎的关键词,然后这些流量就是你的。

后来有人把QQ号码、邮政编码、手机号码、天气预报等等都网页化一遍,都是大量的流量。

最开始今日头条APP在推出后,一个多月就做了900万的装机量,这是擅长流量的团队才能完成的业绩。而“今日头条”这个APP早期对5千多个网站抓取内容再去做流量的做法,和早期站长的那些站群方式是何其相似。大家想想抖音这个APP本身是怎么火的,怎么可能没有流量增长团队在后面做了大量工作。

SEO这块,要充分利用百度把近三分之一的流量给了自己的产品这个状态。百度问答、百度贴吧、百度文库、百家号甚至百度网盘等等全家桶里,全部要有你的内容。当你有了上面那样的词库,词库里都是用户的搜索需求,搜索量哪些高哪些低已经全部告诉你了。然后再在百度这些渠道里铺内容就只需要一些常识,只要去琢磨如何把你的内容合理放上去就可以了。

最近的流量红利是百度小程序,这和以前的百家号一样,是优先排名的。我个人觉得这是百度最后一波红利了。

百度也给了很多大站很高的权重,如知乎、搜狐自媒体、CSDN(你没看错)等,这一点在海外的Google也是这样的趋势,这不是搜索引擎偏心,而是经过很长时间的进化,上面会聚集更多好的内容创造者。我们可以去上面铺内容并转化用户。

大家要放弃一定要用自己的网站去做流量的观念,流量肯定是越来越集中到头部去的,那种把自己的网站也要打造成流量中心的想法越来越不现实了,特别是啥优势也没有的小站。所以可以安心地做一个别人平台上的内容贡献者,在这些平台上贡献内容,转手再把这些页面拿去任何其他平台上去引流。我以前一直说的方法就是要“让内容在渠道中间流动”。

还是以“阿胶“为例,可以这样操作:

从上面的词库可以看出:“阿胶糕适合什么人吃“有2万多一天的搜索量,去百度一下这个词,我现在在杭州搜索,发现是一个广告都没有人投的。(不排除其他地方有或者当你看的时候可能会有)

这个时候,应该去知乎、百家号、搜狐自媒体、百度知道、百度小程序等等渠道里出现你的一篇软文,里面在推荐你的产品。这样做完后,你要和现在这些排在前面的网页去竞争排名,只要一些简单的SEO技巧比如“锚文本轰炸”或“外部链接”,甚至最原始的“关键词密度”,你排上去的几率非常大,然后这些流量就是你的了。当然最后,这个词如果被别人挖掘到,那也也会变成红海,所以你的应对方法就是去发现更多其他蓝海词语,或者直接硬抢也是没几个人在竞争的。还有,图片中那几个排名前三的百度问答,你即使现在再去回答一下也会有很多流量的。

这么多年了,百度依然还有很多流量没人要。这点百度其实是自己把自己作死的。你看,虽然百度让很多人出高价买了词,收入也很多,但是百度的很多流量没有卖出去。相当于流量还有很多库存,流量没有充分被商业化,而广告主却在高价流量中没有获得好的ROI,这是双输的。今日头条在这一点上就做得好很多,本来信息流的流量比百度还集中,头条的巨量引擎现在开始开发很多的功能让大家的投放尽量错开不要撞车。

如果你们是APP且内容很多,一定要找个前端工程师把内容网页化并做基本的SEO,可以白捡很多流量。比如今日头条的SEO在我看来还是做得不够好,内容也是重复的,但是应该在百度获得上百万日UV不是问题。

还有很多的技巧实在无法短时间说明白,影响SEO排名的因素有几十个现在一个都没怎么讲,但这些也并不重要,刚才提到的3个都是随便一查就能找到的技术。 这么多年,在流量领域有技术算法派也有策略派,最后都是策略派胜出。这点也可以给正在做抖音、微信、快手的人一些启示。

这里再顺便说一下,“阿胶糕适合什么人吃“这个词如果你有把握用3毛钱的PPC成本可以收回投资的话,直接买一轮流量先。

第四: 基于关键词和基于关系链的流量方法

接下来我跟大家分享一种我多年来积累的流量体系,这是我最想分享的,它是很多方法的来源。

我个人的观点,流量一直只有两种载体:关键词 和关系链。很多渠道里的流量传播都是这两个基本载体中的一种,或者是变种、混合。

这是我们以前在阿里流量团队的方法论,它的推导是这样的:

流量的背后,是我们大家对信息的需求,不管你是找一个笑话段子、还是看一篇教你做饭的文章、或者是纯粹无聊打发时间随便刷刷。

人类目前为止传播信息的模式,要么通过文字、要么通过人和人的关系。

这个在原始社会甚至没有文字的时候都是这样的,比如一个部落发现了猎物要去捕猎,这个信息也是通过大家早就形成的语言以及人和人之间的关系网传递出去。

而假设我们回到20多年前没有互联网的时代呢?也是这样的。

我是80后,经历过没有互联网的时代。我举一个例子,那时候我有一个亲戚在船厂工作,他听人说有一种水下焊接的技术,但不知道具体是怎么实现的。在今天面对这样的情况你搜索一下就可以知道。

但是在没有互联网的时代,他也有两种方法可以去解决这个问题:一是去一家尽可能大的图书馆去查资料,以前的图书馆有个重要职能就是大家去查资料的地方;二是去问他的师傅或其他朋友,通过他们的关系网去找信息。很有意思的是,Google这个搜索引擎就诞生在1996年两位创始人在斯坦福大学给校方做电子图书馆的基础上的。

图文、视频他们传播的时候一定要用关键词给他们做索引的,比如抖音的算法就是给每段视频和每个人打标签,标签就是关键词,然后把人的关键词和视频的关键词做匹配,这是属于变种。

我们先看关键词为载体的流量渠道。

搜索引擎、淘宝和APP应用商店是关键词主导的流量渠道,这个自不必说。即使微信这个以关系链为载体的流量渠道,它首屏的搜索流量也非常大,所谓的WSO(微信搜索优化)也有了一些成功案例。而在微信小程序搜索里,如果你搜索“股票”,有几千个小程序都写着股票的标题,但是你搜索“股价”,却只有3个小程序写着股价的标题,你只要是第4个,也能每天来很多用户。仅仅整个股票证券行业,至少还有上万个这样的词没有人去关注。

在美国,有组织统计过所有搜索流量和所有社交流量,是非常巧合的1:1的比例,前面说过:“信息找人” 和 “人找信息” 这两种大家获取信息的模式没有主次之分,这里就有第一个数据上的证明了。

对于我们获取流量的人来说:人多的渠道要多圈人,词多的渠道要多占词。

我用一个例子开启大家的用关键词做流量的视角。 有一家做家装互联网的公司是这样获客的:在搜索引擎上把这个行业最热门的几千个关键词都搜集起来,买了十多个QQ号码,然后每个QQ号最多可以建500个群,他们建立的大量QQ群的群名称都是那几千个关键词中的一个,有软件可以批量维护群的活跃度,所以当QQ用户在用这些关键词去搜索QQ群的时候,他们的QQ群排在比较前面。这样十多个QQ号码每天能让八千到一万左右的QQ号码加入他们的群,然后再用微信私域的方法转化用户。

关键词为载体的流量都可以总结为一个这样的方法论: 在任何渠道里做流量,都可以观察这个渠道里是不是有些流量是通过关键词分发的。如果有,就去抢以关键词作为载体的流量。

至于关键词的来源,百度是一个普及程度很高的搜索引擎,只要那里热搜的关键词,在你要做流量的渠道里大概率也是热搜的。你都要做到大批量占领你所在行业的关键词,我们以前阿里的流量团队把这个方法叫“关键词占领”。

比如:微信好物圈,这是一个流量通过关键词分发的渠道;你占据了一批好的关键词命名的圈子,你就天然获得大量流量。

比如飞聊,也是一样的通过关键词分发的渠道,如果你认为这个平台会崛起,是一定要去里面建很多你包含这个行业的热门关键词为标题的小组,以后小组火了流量就是你的。目前飞聊的DAU也有几百万。

比如抖音这样的算法分发的平台,如果你的视频都打上很多行业热门词的标签,额外获得很多流量不是问题,更别说抖音是可以搜索的。去搜索一些热门关键词,很多排在前面的视频流量很大,但是他们可能不是靠内容精彩获得的流量,只是靠标签命中热门词流量就可以。

你只需要笃定一点:只要人类还在用文字传播信息,“关键词占领”的方法就会一直有效。

还有就算花钱购买流量的渠道都是能让关键词发挥作用的,比如今日头条的巨量引擎后台是开放了用关键词定位人群的投放的。

关于这个信息流投放,很多时候我们投放信息流,时间点很接近、人群属性可能都是25-45女性、高收入年龄什么的,大家的定向条件其实高度集中,所以广告展现是要靠提价的。但假如大家是用关键词定向,就不会撞车这么严重,也能触达到很多平常大家触达不了的用户, 平台流量得到充分利用,广告主ROI更好看,是多方共赢的。

关于关系链的流量,我在线下听过大家分享过很多好方法,特别是内容驱动、私域社群的很多玩法等。有时候很有感慨的,今天大家做的很多内容十多年前也有一批人和你们是同样的心态和状态,只是平台变了,但很多讨论的内容都是如出一辙。淘宝当年用一种仰视平台(163/网易/搜狐)的心态去拉流量,今天又有那么多商家用仰视淘宝的心态去获取流量,想想很有意思。

和关键词的玩法不一样,关系链的玩法我觉得国内是远远领先国外的。

不过国外有一批同行也是做社交关系链流量的,他们比我们更早把社交关系链的方法系统化一些,他们是怎么做的呢?

这里插述一下,像微信公众号这样的平台我觉得其实是抄袭自Facebook。这个一个很另类的观点,我借这个机会说一下。

大家看一张截图,Facebook在2009年就推出了一个产品叫 Facebook Pages,如:https://www.facebook.com/pages/ (需要翻**墙)

商家、公司、公众人物、社群可以给自己生成一个页面,这个页面大家可以关注,然后如果商家发布什么消息可以更新到你的信息流上。这和微信公众平台是完全一定的定位和功能,只是早了4年多。他们很多商家在Facebook做营销也是要拼命涨粉的,如Amazon的Facebook Pages有了快3千万粉丝。

而2013年,现在这样定位的微信公众平台才正式进入大家视野。所以如果我们借鉴吸收国外同行的方法也有一些有意思的角度。

基本上那时候的方法论是这样的:如果传播流量的载体是关系链,那就去优化这4个点: 即,传播信息的人的数量、传播信息的人的影响力、传播信息的速度、传播信息的美誉度。

国内是把传播信息的速度做到了的,相信不用我复述那些方法。然后做各种帐号矩阵的人也是把传播信息的人的数量做得非常好了,比如至今微博上的很多明星的流量运营团队。

国内严酷的竞争环境造就了大家各种奇招百出。我分享几个我们做社交关系链流量的玩法,看看我们是如何按国外的社交流量方法论做国内的平台的。

在“传播信息的人的数量“上,我举快手APP的例子。

快手APP上官方是分均分发流量的逻辑,也就是你打开快手,会把你附近的一些人推荐在你的快手主页。为了迎合这种分发逻辑,我们肯定是要做多帐号分发的。比如直播是这样操作的:我们开发了一个自己的群播系统,长下面这个样子,

它的视频信号是用一个摄像头来拍的,视频内容输入这个系统后,可以把这个视频分发到无数个其他快手帐号上,每个帐号模拟不同的地理位置,这样只要一个直播内容就可以出现在全国各个不同的地方。

当然它也可以把同一个视频信号同时在快手、抖音、腾讯、斗鱼等APP上跨平台同时直播。快手是不太喜欢相同的内容的,所以这个摄像头拍摄的画面的背景是绿幕,这个系统可以实时渲染出不同的背景,这样看起来就是不同的内容了。(没有破解app等非法操作。)

在社交关系链的传播方法里,环境很恶劣,你是被逼着要这么做的,在场的大家应该都知道,因为其他人会去布局更犀利的事情。有些我们都知道的大公司,私底下也很多类似的操作。在其他条件相同的情况下,如果传播人数别人比你多个几十上百倍,你也就没法安心地靠内容驱动了。

在增长黑客的很多成功案例里,以及现在我们在市面上看到的成功产品,有大量依靠人数取胜的例子。

那怎么做到“传播信息的人的影响力“ 呢?我们打造了这么一个系统,这个系统的原理和“企查查”的原理差不多,就是打造一个聚合爬虫(合法的爬虫,从不同的数据源爬取数据聚合在一起),这样做的结果就是:指定任何一个行业,每天都能找到几千个这个行业下的优质KOL,并有他们的个人微信二维码等联系方式。

如下图就是金融领域每天抓取到的数据:

会按各种指标给每个KOL打分,分数低于一定的值就先不考虑联系。但还是每天都有这么多的KOL,这又怎么来大量联系呢?我们也偷了个懒,是用企业微信批量联系的。

由于企业微信一天加上万个人都不是问题,所以我们就做了一套企业微信的群控系统,可以批量把这些人加为好友,然后群发话术来沟通,粗筛一遍后再人工沟通。在别人都在批量“洗”终端用户时,我们在批量“洗”行业内的KOL。

以下是我们的微信群控软件的演示版,企业微信类似:

大部分人都没注意企业微信的功能,这个企业微信大家一定要重视的,非常好用。过一段时间我们会推出一个企业微信的工具出来。

很多人不知道企业微信官方就有群发接口,不要再用那些山寨的群发功能了,然后每天加人不会轻易被封,加人还没有总数限制,而且你能相信腾讯官方在企业微信里竟然还开发有“活码”这种东西吗?

从策略上来说,如果腾讯官方专门希望你用企业微信来做私域,你哪有还不赶快用的道理,只会越来越顺应大家的需求的。只是注意一点,企业微信目前还没有朋友圈,微信群功能也受限(有消息说11月底都会放开),所以一定是要探索一套新的不同于个人微信私域运营的流量玩法。

这种玩法还特别适合产品冷启动,大家在冷启动的时候最缺的就是种子用户,这类聚合爬虫的方法可以让你迅速获得你想要的用户从而冷启动成功,我们自己就有过很多冷启动成功案例。

说起这个群控系统,我们做了两套不同技术原理的系统。大家知道基于xposed的群控系统在今年618的时候已经被微信严打,以前我们也认为xposed这种群控方案侵入性太强,我如果是微信官方也会非常不喜欢别人把我的APP改得乱七八糟。两套系统用的是别的解决方案,只是用它替代人工,不要非法破解使用就行,目前这两套方案都是比较安全的。

有些时候我们用这些系统能形成比较大的优势,但是越是这样我们反而越会想办法做好内容。毕竟我们是从大平台出来的,我们并不想在任何平台出于搞流量的需求而制造内容垃圾的。

为了防止带偏大家,我再多说一句。对于很多这样做流量的方法看起来很激进,但做起来是有底线的。应该要像阿里巴巴内部的那种做事风格,那就是:初心要正,但是做事要狼性。

我们从事的互联网行业是个信息产业,所以要尽可能地“传递高质量的信息”,把内容做到尽可能地好。而在分发这些内容的时候却要无所不用其极地、想尽一切办法去传播这些内容。

最后我们再来说一下“传播信息的美誉度”。我们国内真的非常不重视这个,而欧美的同行是很重视这个的,在这块做得非常好。

举个例子,我2011年曾经去瑞士日内瓦培训过一家公司,他们有个业务是专门帮瑞士本国的那些品表在新浪微博上做传播。他们的工作之一竟然是把一个微博帐号历来所有人的评论全部人肉分析一遍,用Excel全部统计好。分成正面评价和负面评价,而正面负面的评价又会分为好几个维度,具体到了是哪些角度是正面的,也有哪些维度是负面的。

而且让我吃惊的是这一切那时候竟然是人肉操作的,而操作这个的人也只学过3年中文,为了理解文字内容还要去翻词典。

社交媒体是最应该重视美誉度的。我们国内现在有了传播深度这个概念,美誉度就决定了每一层传播的时候的你的势能是加百分之几十的还是减百分之几十,按照数学公式计算,后面的结果天差地别。

今天的分享就到这里,希望对大家有启发。最后我建议大家去看一部电影叫《社交网络》,讲的是Facebook的创立历史。电影里前面十分钟在宿舍那段其实讲了马克·扎克伯格做增长黑客的方法,如果你能看懂的话非常有意思。

其实我所知道的增长黑客文化正是来源于Facebook,Facebook的历史上也有很多不能说的隐秘的获取流量的方法的。

文章来源:

用超多案例,总结了 10 个让登录体验更好的小技巧!

涛涛

看似简单的登录框,暗藏了多少值得推敲的用户体验?这10个细节,就是你和设计高手的区别。

技巧1:更明显

你不应该让你的用户到处寻找登录区域。他们找的时间越长,就会越沮丧。他们越沮丧,最终登录的可能性就越小。

一个很好的例子就是 Gmail 的登录页面。

你可以确切地知道你需要在何处登录,以及要在输入区域输入什么内容,上面的例子,如果你没有 Gmail 帐户,它允许你通过单击「创建帐户」来轻松地创建一个帐户。

好的用户体验是使你的登录区域明显,使你的用户尽可能容易地进行登录操作。

技巧2:使用第三方登录

第三方登录正迅速成为用户登录账户的方式,理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

通过允许用户使用用户的第三方账户中的信息来创建一个账户,可以解决所有关于这些问题。

让我们来看看下面的石墨文档和MONO登录时的选择方式:

甚至还有更方便的注册登录方式,手机短信验证码在注册的同时登录:

一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录,从用户的角度看,这很明显是一个不好的体验,但是产品的角度去思考就不一样了,产品为了获取用户更多的信息,则需要这样来设计流程。

这种设计流程该不该用,这需要在产品和用户之间进行权衡,第三方与手机短信验证码登录,在提高用户体验的同时,可以提高用户的效率,使界面更加直观。

技巧3:更简单

因为环境不同,在中国很多网页端的网站,第三方登录很的产品很少。

例如,如果你的 QQ 没有在电脑端登录,因为即使选择第三方 QQ 登录,你也要拿出手机—打开 QQ —打开扫一扫,进行扫码登录等一些列的操作。

又或者,当你想要登录 behance,只要浏览器有记录之前的第三登录,点击第三方登录即可直接进入该网站,甚至不用注册。

可以看下面的腾讯网与 behance 的网页登录:

好的登录体验应该只有账号、密码两个输入字段,或者手机号码、短信验证码两个字段,以及使用第三方登录的选项。在简单、的同时,并为用户提供了很好的体验。

技巧4:区分注册与登录

如果一个用户来到你的网站进行注册,或者想他们返回登录界面,这就需要让用户清楚的知道他在何处,下一步应该去哪里。

我们通过使用登录字段与注册字段的区别来帮助他们,让我们看看下面的 dribbble 注册界面:

创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册,而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗?

dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口,这样更加清晰明了。

同时可以看看 dribbble 的主页面,他们会把 sign in 与 sign up 的进行区分,在 sign up 加上微边框,让用户能更快区分两者的不同。

技巧5:跳过用户名

让用户用他们的用户名来进行登录真的不是一和很明智的做法,为用户省去记录你产品的用户名的麻烦,应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。

ins 让用户有机会用他们的电话号码或电子邮件地址登录。

反例:

尽可能让用户同时用手机号码或邮件地址来登录,因为用户可能会忘记他们用来登录你的产品的电子邮件地址,所以这时,用户能使用手机号码进行登录。

技巧6:密码可显示

给用户提供可显示密码的按钮,减少用户输错密码的操作,当输错的同时,可进行对错的字段进行纠正,不用全部删掉重新来。

让我们来下面的脉脉和片刻:

技巧7:记住用户信息

还有什么比再次到你之前登录的网站或 app,却发现你需要再次输入账户密码登录更令人沮丧的事情吗?

当你的用户返回到你的网站时,请确保他们已经登录了,或者为了方便登录,提前为他们预先填充账户和密码等字段。

谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时,他们的登录信息都会被记住,使登录过程更加简单。

盟友银行允许用户勾选 「保存用户名」 复选框,允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法,展示形式可以多样化,可根据自己产品与用户需求来进行把控。

技巧8:轻松恢复密码

有时你的用户会忘记他们的登录信息。当这种情况发生时,尽量让恢复过程尽可能的轻松。

公众号的账户密码输入栏有记住密码复选框,以防用户忘记他们的用户名和密码,不用每次进来都输入账户密码进行登录。

印象笔记对他们的密码做了一些巧妙的处理,让用户知道他们多久以前更改了密码。

这个小小的提示可以唤起用户的记忆,帮助他们记起密码。

如果用户忘记了他们的登录信息,要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧,你的用户将因此会喜欢上你的产品。

技巧9:让用户知道大写锁定已开启

我们都有过这样的经历:令人沮丧地输入和重新输入你的密码都无济于事,结果却发现你一直开着大写锁定键。

可以通过警告你的用户,防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

技巧10:无密码登录

让你的移动用户使用无密码登录,现在很多特别是金融类 app,都可以让用户进行指纹登录,因为不像其他 app 一样可以一直保持用户已登录状态,在保障安全的同时能更便捷。

以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。

欢迎关注作者的微信公众号:「设计探」

模拟购物数据实时流处理——实时数据大屏

seo达人

项目介绍

本项目总体分为



平台搭建

模拟数据源生成

实时流数据处理

实时数据大屏

这几个部分,我将分成几个博客分别介绍这些部分的工作,本文主要介绍最后一个部分,实时数据大屏。

前面的几篇文章已经将平台的搭建,数据模拟生成,流数据处理部分做了详细的介绍,这篇文章主要是对前面所做的工作进行一个升华,关分析出数据不够直观,而能将所做的东西更加直观的表达出来就需要进行可视化了,下面我将为大家介绍可视化部分的工作



平台搭建,具体可以看平台搭建

模拟数据源生成,具体可以看模拟数据源生成

实时流数据处理,具体可以看实时流数据处理

项目下载地址下载



环境介绍

首先还是对环境介绍一下,这部分主要使用的将是html,php,js,css等做网站所需要的一些语言及工具,由于需要进行异步数据加载,所以还需要一个本地的服务器,本文使用的是phpstudy,主要是这个工具还集成了mysql,能简化不少我们的工作,当然如果自己拥有服务器,那完全是可以将这个部署在服务器上面的



首先我们先要安装phpstudy,这里不对具体的安装过程进行介绍,安装完成后我们可以进入网站的根目录



在这个目录下新建一个目录即可作为我们的网站目录了



然后我们可以使用phpstudy带的站点域名管理为我们的网站设置一个域名,其中的网站目就是我们刚刚创建的网站目录



在hosts里面是需要加入IP和域名的映射的,如:



127.0.0.1 www.sshstudy3.com

1

这样就可以在浏览器里面通过访问域名来访问我们要做的网站了



接下来我们需要去创建数据库,打开phpMyAdmin,我们可以进入数据库管理界面



这里的账号密码默认都是root



进入后我们可以看到如下界面



在这里可以创建数据库,或者进行数据库的访问等,不再赘述



到这里基本需要使用到的环境就基本完成了,接下来就是代码的部分


JavaScript之递归 详解!

seo达人

首先了解一下递归的定义:



递归:递归函数自己调用自己,且函数内部必须有结束条件、否则就是一个死循环;



 递归案例:求 n 的阶乘 (循环 || 递归)



阶乘公式先了解一下:







即n的阶乘 =  n(n-1)的阶乘,如归使用for循环来做这件事件就很简单:



    //for循环

    function fact(n) {

        let end = 1;

        for (var i = 1; i <= n; i++) {

            end
= i

        }

        return end

    }

    console.log(fact(5)) //5的阶乘 120

再看看递归的做法:



    //递归

    function fact(n) {

        if (n === 1) {

            return 1 //结束条件

        }

        return n fact(n - 1) //此处的fact函数相当于当前队列的阶乘

    }

    console.log(fact(5)) //5的阶乘

解析: 公式 n
(n-1)!  则函数内部只需要返回 n该函数 n-1,



即 n
(n-1)!  == nfact(n-1)  







 看一下内部队列顺序,当形参为5时 阶乘为 5
fact(n-1),直至形参n = 1时,fact函数有了返回值 1,有了结束条件后整个函数结束自掉,返回阶乘结果。



递归的优点:递归的实现明显要比循环简单得多。



递归的缺点:



1、效率低:递归由于是函数自己掉自己,而函数调用是有时间和空间的消耗的:每一次函数调用,都需要在内存栈中分配空间以保存参数、返回地址以及临时变量,而往栈中压入数据和弹出数据都需要时间。



2、性能差:调用栈可能会溢出,每次函数调用会在内存栈中分配空间,而每个进程的栈的容量是有限的,当调用的层次太多时,就会超出栈的容量,从而导致栈溢出。 



总结:对于JavaScript而言,能用循环解决的事情、尽量不要考虑递归、 慎用! 


一个 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档