运营复活术:流失用户怎么唤醒与召回

交流GUZI 发表了文章 • 0 个评论 • 9 次浏览 • 2017-02-19 20:09 • 来自相关话题

用户从不同角度有不同的分类法:比如从用户活跃度来看,可以分为僵尸用户、低频用户、活跃用户和深度用户。





最近一直在思考用户分类的一些事情。因为当平台运营到一定阶段,一定会累积大批量的用户数据,这些用户数据是运营人员的黄金财产,如何管理和运营这些用户是运营人员的工作重点之一。

用户从不同角度有不同的分类法:比如从用户活跃度来看,可以分为僵尸用户、低频用户、活跃用户和深度用户,如果从用户对平台的价值来看,可能分法就变成了种子用户、普通用户、核心用户。不同的分类用户都应该有不同的运营策略。而从用户生命周期的角度来解析和管理用户,是目前数据化运营的常见方式之一。

什么是用户生命周期

所谓用户生命周期是根据传统营销学上的“客户生命周期”的衍生概念。

在百度百科上,对客户生命周期的解释是这样的:客户生命周期是指从一个客户开始对企业进行了解或企业欲对某一客户进行开发开始,直到客户与企业的业务关系完全终止且与之相关的事宜完全处理完毕的这段时间。

衍生到现在的互联网产品领域,指的应该是用户从对产品产生兴趣到不再关注产品的全过程。与客户生命周期不同的是,互联网产品的生命周期有可能很短,甚至还没开始就结束了,因为如果没有运营,他在每一个过程中都有可能直接走向流失(而不是一定要走到成熟后才死亡),所以运营的工作就是提高每一个阶段的生命成长率(转化率),以协助一个用户从兴趣阶段走向忠诚阶段。

一般用户生命周期的阶段和目标。

传统的“客户生命周期“,基本上包含五个阶段,不同阶段目标如图所示:





诞生到死亡,就如同一个人的生命的成长历程

将“客户生命周期”衍生到互联网产品领域,就变成了“用户生命周期”。但与客户生命周期的金字塔结构不一样,用户生命周期更像一个漏斗,每个阶段没有运营,用户就可能直接走向流失,结束生命。





 增长黑客中提到的“AARRR转化漏斗模型”和用户行为研究与用户的生命周期是紧密关联的。正因为用户的生命周期长短与运营息息相关,所以不管你是什么产品,必然要根据自己的产品特征和业务特性,对应的研究和区分用户处于何种生命周期阶段,并采用相应的对策。产品不熄,运营不止。

怎么判断用户处于哪个生命周期

之前的推文已经探讨过一些我自己关于不同生命周期阶段如何提升运营效果的思考:1、《公众号运营:用户拉新的三个套路 》2、《公众号运营:提高用户留存的4大驱动力 》今天的文章就不再多谈,今天我想分享的思考是我们知道用户会有一个生命周期,那么面对各种用户数据,怎么判断哪个用户处于哪个生命周期呢?

我必须承认大数据真的是我的弱项,但是对于用户生命周期的界定又与大数据密切关联,所以我只能够综合我的学习和思考做一些我的简单梳理,希望不会误导到大家:

1、潜在用户 (未关注平台但可能关注平台的用户)

定标签:对自己的产品核心价值进行提炼,并对已有用户进行梳理后,可以对潜在用户进行画像,对使用场景进行描绘,然后可以为潜在用户定标签。

找渠道:竞争对手的用户是什么渠道来的?我们的用户又通常关注和集中在什么渠道?(这些数据很多大数据工具如艾瑞什么的都可以获取)

挖数据:现在潜在用户的数据获取方式主要包括数据购买、数据租用和数据合作,搞定标签和渠道以后,要么做宣传推广,要么挖数据,只有这样,潜在用户才可能有了他的生命力。

2、新增用户(与平台有初体验的用户)

时间维度:根据不同需求,对新增用户对时间限定可能有差异,而且不同平台在对新增用户进行运营分析时,长短也会有区别。比如我们公司,在做运营时,一般以周或月为单位区划更多,而我觉得比如信用卡之类的平台,可能会以季和半年来判定新增用户更能有效分析转化率。

交互维度:除了时间,平台不同,对用户数据偏重的不同,可能对运营意义上的新增用户定义也可能受交互的影响,是新增访问用户、新增关注用户、新增注册用户、新增投资用户还是新增购买用户,不同平台用户的初体验可能是不一样的。

3、留存用户(一段时间内仍在平台的用户)

都说”一段时间内“仍在平台的用户是留存用户,这个一段时间的界定不同平台根据业务不同也同样会有所差异。众多分析工具一般是按天、周、月为轴提供不同留存用户数据。与上面相同,留存用户也受交互影响,是关注还是使用还是购买,不同平台要求不一样。不过除了根据时间与交互判定用户留存,建议运营还一定要将留存用户与渠道、行为等属性绑定在一起进行对比分析。

4、活跃用户(达到指定的业务标准的用户)

内容类平台的活跃用户定义可能是产生X篇内容的用户,也可能是评论X个的用户;APP平台的活跃用户可能是X天打开一次APP的用户,也可能是使用APP做过X次操作的用户;而我们公司那种O2O平台,活跃用户的指标又变成了月购买X次,月支付X次。所以不同平台的活跃用户判定,是和其业务目标、发展方向以及大数据要求等都分不开的。

5、忠实用户(愿意为平台发展献力的用户)

活跃用户最终有可能成为产品的献策者、管理者、内容持续贡献者、积极传播与分享者,我觉得当活跃度的指标达到一个峰值,就可以判定为忠实用户,忠实用户的激励绝对是平台发展的重中之重。

运营复活术:流失用户怎么唤醒与召回

如果判定之前的用户生命周期是为了防止用户流失,那么当用户真的在某个环节流失后,运营就要施展复活术,尽量再次唤醒和召回他们,而不是放任。

调研很重要:对于流失的用户,必须进行调研:为什么流失?是产品环节的原因,还是运营环节的原因,还是客服环节的原因还是其他?不做调研盲目的谈召回其实都是伪召回,治标不治本。

改善很重要:调研完,如果是因为对产品内容不满,那么就改善内容,如果是界面不友好,优化界面,如果是客服态度,培训客服。用户是妈妈,听妈妈的话,你才能长得快。

通知很重要:记得我以前看过一封邮件,是某个APP以ceo的名义发的,内容很真诚,告诉我他们平台现在已经做了很多什么样的改善,我又曾经在这个平台留下了什么样的足迹,看完以后我重新下载了这个APP。少点套路,多点真诚,多点真情,然后把这一切告诉已经流失的用户,不通知又何谈召回。

利益也很重要:采取完改善措施,在进行流失用户回流决策时不妨做做两种测试,一种使用纯改善的情感型通知,一种在此基础上添加回流的利益触点,相信后者的回流率应该会更高,不过这个需要效果跟踪才能够得出精准结论。

来源:同道Tongdao
  查看全部
用户从不同角度有不同的分类法:比如从用户活跃度来看,可以分为僵尸用户、低频用户、活跃用户和深度用户。

1487053742513.jpg

最近一直在思考用户分类的一些事情。因为当平台运营到一定阶段,一定会累积大批量的用户数据,这些用户数据是运营人员的黄金财产,如何管理和运营这些用户是运营人员的工作重点之一。

用户从不同角度有不同的分类法:比如从用户活跃度来看,可以分为僵尸用户、低频用户、活跃用户和深度用户,如果从用户对平台的价值来看,可能分法就变成了种子用户、普通用户、核心用户。不同的分类用户都应该有不同的运营策略。而从用户生命周期的角度来解析和管理用户,是目前数据化运营的常见方式之一。

什么是用户生命周期

所谓用户生命周期是根据传统营销学上的“客户生命周期”的衍生概念。

在百度百科上,对客户生命周期的解释是这样的:客户生命周期是指从一个客户开始对企业进行了解或企业欲对某一客户进行开发开始,直到客户与企业的业务关系完全终止且与之相关的事宜完全处理完毕的这段时间。

衍生到现在的互联网产品领域,指的应该是用户从对产品产生兴趣到不再关注产品的全过程。与客户生命周期不同的是,互联网产品的生命周期有可能很短,甚至还没开始就结束了,因为如果没有运营,他在每一个过程中都有可能直接走向流失(而不是一定要走到成熟后才死亡),所以运营的工作就是提高每一个阶段的生命成长率(转化率),以协助一个用户从兴趣阶段走向忠诚阶段。

一般用户生命周期的阶段和目标。

传统的“客户生命周期“,基本上包含五个阶段,不同阶段目标如图所示:

1487053742166.jpg

诞生到死亡,就如同一个人的生命的成长历程

将“客户生命周期”衍生到互联网产品领域,就变成了“用户生命周期”。但与客户生命周期的金字塔结构不一样,用户生命周期更像一个漏斗,每个阶段没有运营,用户就可能直接走向流失,结束生命。

1487053742717.jpg

 增长黑客中提到的“AARRR转化漏斗模型”和用户行为研究与用户的生命周期是紧密关联的。正因为用户的生命周期长短与运营息息相关,所以不管你是什么产品,必然要根据自己的产品特征和业务特性,对应的研究和区分用户处于何种生命周期阶段,并采用相应的对策。产品不熄,运营不止。

怎么判断用户处于哪个生命周期

之前的推文已经探讨过一些我自己关于不同生命周期阶段如何提升运营效果的思考:1、《公众号运营:用户拉新的三个套路 》2、《公众号运营:提高用户留存的4大驱动力 》今天的文章就不再多谈,今天我想分享的思考是我们知道用户会有一个生命周期,那么面对各种用户数据,怎么判断哪个用户处于哪个生命周期呢?

我必须承认大数据真的是我的弱项,但是对于用户生命周期的界定又与大数据密切关联,所以我只能够综合我的学习和思考做一些我的简单梳理,希望不会误导到大家:

1、潜在用户 (未关注平台但可能关注平台的用户)

定标签:对自己的产品核心价值进行提炼,并对已有用户进行梳理后,可以对潜在用户进行画像,对使用场景进行描绘,然后可以为潜在用户定标签。

找渠道:竞争对手的用户是什么渠道来的?我们的用户又通常关注和集中在什么渠道?(这些数据很多大数据工具如艾瑞什么的都可以获取)

挖数据:现在潜在用户的数据获取方式主要包括数据购买、数据租用和数据合作,搞定标签和渠道以后,要么做宣传推广,要么挖数据,只有这样,潜在用户才可能有了他的生命力。

2、新增用户(与平台有初体验的用户)

时间维度:根据不同需求,对新增用户对时间限定可能有差异,而且不同平台在对新增用户进行运营分析时,长短也会有区别。比如我们公司,在做运营时,一般以周或月为单位区划更多,而我觉得比如信用卡之类的平台,可能会以季和半年来判定新增用户更能有效分析转化率。

交互维度:除了时间,平台不同,对用户数据偏重的不同,可能对运营意义上的新增用户定义也可能受交互的影响,是新增访问用户、新增关注用户、新增注册用户、新增投资用户还是新增购买用户,不同平台用户的初体验可能是不一样的。

3、留存用户(一段时间内仍在平台的用户)

都说”一段时间内“仍在平台的用户是留存用户,这个一段时间的界定不同平台根据业务不同也同样会有所差异。众多分析工具一般是按天、周、月为轴提供不同留存用户数据。与上面相同,留存用户也受交互影响,是关注还是使用还是购买,不同平台要求不一样。不过除了根据时间与交互判定用户留存,建议运营还一定要将留存用户与渠道、行为等属性绑定在一起进行对比分析。

4、活跃用户(达到指定的业务标准的用户)

内容类平台的活跃用户定义可能是产生X篇内容的用户,也可能是评论X个的用户;APP平台的活跃用户可能是X天打开一次APP的用户,也可能是使用APP做过X次操作的用户;而我们公司那种O2O平台,活跃用户的指标又变成了月购买X次,月支付X次。所以不同平台的活跃用户判定,是和其业务目标、发展方向以及大数据要求等都分不开的。

5、忠实用户(愿意为平台发展献力的用户)

活跃用户最终有可能成为产品的献策者、管理者、内容持续贡献者、积极传播与分享者,我觉得当活跃度的指标达到一个峰值,就可以判定为忠实用户,忠实用户的激励绝对是平台发展的重中之重。

运营复活术:流失用户怎么唤醒与召回

如果判定之前的用户生命周期是为了防止用户流失,那么当用户真的在某个环节流失后,运营就要施展复活术,尽量再次唤醒和召回他们,而不是放任。

调研很重要:对于流失的用户,必须进行调研:为什么流失?是产品环节的原因,还是运营环节的原因,还是客服环节的原因还是其他?不做调研盲目的谈召回其实都是伪召回,治标不治本。

改善很重要:调研完,如果是因为对产品内容不满,那么就改善内容,如果是界面不友好,优化界面,如果是客服态度,培训客服。用户是妈妈,听妈妈的话,你才能长得快。

通知很重要:记得我以前看过一封邮件,是某个APP以ceo的名义发的,内容很真诚,告诉我他们平台现在已经做了很多什么样的改善,我又曾经在这个平台留下了什么样的足迹,看完以后我重新下载了这个APP。少点套路,多点真诚,多点真情,然后把这一切告诉已经流失的用户,不通知又何谈召回。

利益也很重要:采取完改善措施,在进行流失用户回流决策时不妨做做两种测试,一种使用纯改善的情感型通知,一种在此基础上添加回流的利益触点,相信后者的回流率应该会更高,不过这个需要效果跟踪才能够得出精准结论。

来源:同道Tongdao
 

网站生死存亡 想要活?就要往“低”了看

交流wtyg 发表了文章 • 0 个评论 • 21 次浏览 • 2017-02-19 19:34 • 来自相关话题

当下的情况,很多站长都已经去做公众号之类的了,或者去做别的,网站越来越难做了。今天去A5逛了逛,发现一篇文章写得还可以,里面的一些观点我觉得阐述的很好,所以就顺带分享给大家:






下面开始的是一个有些庸俗的疑问,人究竟是脑袋决定屁股呢,还是屁股决定脑袋呢?在过去的十年,屁股可以决定脑袋,一个人坐什么位置,往往决定了他思考的角度和范围。而现在,中国互联网已经进入了一个“脑袋决定屁股”的时代:没有人留给你确定了自己的位置之后才开始思考的慢节奏。这个概述可能有点“粗”,但理就是如此。在过去的2016年,多少企业宣布停业,多少网站退出互联网市场,是什么原因呢?我认为归根到底还是“资本垄断”在5年前,网络信息的输出主要由无数的“站长”构成,而现迅速的被“企业”所替代:集“编辑、技术、推广、运营、设计”为一身的“站长”已然化作一家家大大小小的“企业财团”。同时,在所有人为在争夺一块口粮的时候,弱资本的企业将再次被排除之外,这就是为这里说的“资本垄断”,既然你弱,那么你就靠边站!

弱不是错,只是理想太丰满

前段时间有人找我做SEO诊断,只是三个人的小团队,手里的网站每天1000IP,却想做到50WIP,我说做不到,他说,那么十万IP总可以吧?我说也做不到,之后就没有之后了,否则那就是坑蒙拐骗了。人的胃有多大,决定了吃多少饭,继续吃下去,即使近在嘴前也难以下咽。先做很多的网站有个人,有企业,都有着理想的丰满,想着我要娶刘亦菲一样漂亮的媳妇,想着嫁习大大一样的男神,可是自身的条件却总是看不清。认识不到自身的不足,只是想要最美好的,哪里还轮得到你?

网站想要活下去,首先要做的就是“认清”自身的条件,我或许什么都可以做,但是却没有三头六臂的什么都做到尽善尽美,否则那就是超人了,事实上这个世界并没有超人。

让一步,并不是畏惧和退缩

邓小平在1991年提出了对外的“20字方针”即:冷静观察、稳住阵脚、沉着应付、韬光养晦、有所作为,此后的20多年,韬光养晦成为了中国外交的基本框架。20年后,中国外交战略从韬光养晦,到主动作为。试想,如果只是一路激进,反复消耗,还会有今天吗?20年中,我们发展了经济,强大了军事,才是最高的话语权。

对于网站也一样,目前做不到的东西,那么就将其当做是长远的战略,做网站也应冷静观察到最后的有所作为。也许,你做的范围并不大,但是却将一个项目发展做到了极致,一个产品做到了极致,就如格力一样,大家都认可的空调。反过来讲,小米曾经被估值“450亿”美元,但是为什么仅仅20个月之后直接缩水成40亿呢?从一个消费者的角度来看:感谢小米让中国高配手机市场价格下降。

在笔者看来:小米定位就是“屌丝”群体(很遗憾的用这个词),这一点非常好,也真正的为发烧而生了,但是之后却始终延续这个方向,本身就是错的。手机没有做到极致就去做笔记本、路由器、电视了,可是数量可以提升质量吗?随着消费者认知的加强,这样的选择群体将越来越少。不想用“苹果”举例,但是我们的选择真的是“崇洋媚外”吗?关键还是产品过硬、用户体验更好!小米一开始让一步选择了“低端市场”是对的,但是却没有在合适的时间选择进攻,就是错了。

想生存,网站就要往低了看

通过小米我们可以看出来,想生存就要往低了看,如果他一开始就进军高端市场,是没有半点机会的。网站呢?就各行各业来看基本已经被垄断的差不多了,新的站点,或者说竞争力偏低的站点更要往低了看。

往低了看并不是低头,也不是找“屌丝”,不同行业都有不同的用户群体,但问题就在于你可以抓住多少、并留住多少。很多的网站都喜欢向“高热”的关键词上去靠拢,最后做的不温不火。不是网站都乐此不疲的做竞价,争抢到烧钱到最后,发现全是烧钱了。也有一些网站懂得去刻意的做SEO,但是定位的偏差导致整体的运营失败。甚至一些网站每天的高跳出率,留不住哪怕一成的老客户,这就是目前绝大多数互联网企业的现状。

那么如何往低了看呢?我特别欣赏苹果的售后服务,再繁琐的问题都会为你孜孜不倦的解答。可有人说了,用苹果的相对都是高端一些的人群啊。固然如此,细节的态度100%影响了用户的选择,不能说别人花钱少了,买到的服务就低了,账不是这样算的。就网站角度而言,太多的网站严重忽视了细节方面的处理,从网站关键词布局,到结构的细节,以及用户角度的体验,都只是固执的认为:我觉得这样可以,很少的考虑,这样真的是最好吗?或者说,就将就一下得了。

低入基层,人心决不能丢

越是在困难的时候,越是考验执行力和毅力的时候,在这样大的经济环境下,并不是互联网企业受到波及,传统企业也一样如此。不同的是,有些企业死了,还有些企业踩着这些踏脚石步步升高了。不少企业在面临困难的时候,不去想如何解决这些问题,只是一味的红灯、做强调,或者说做严格的“标准”,我认为这样并不好,同时还丢了人心。在企业家中,我很佩服刘强东,虽然她霸占了我们的奶茶妹。不为别的,只为了他那句:我不能为了利润去牺牲员工60岁之后的保命钱。

讲到这里,话题可能稍微有点跑偏了,但是不偏的是从线下企业到线上企业,同样都是相同的道理。互联网经济寒冬?如何度过呢,老板深入基层往低了看,企业发展不做盲目定位,往低了看,网站发展注重细节,往低了看!我想,很多企业、网站都会有着更好的结果。

来源:A5营销
  查看全部
当下的情况,很多站长都已经去做公众号之类的了,或者去做别的,网站越来越难做了。今天去A5逛了逛,发现一篇文章写得还可以,里面的一些观点我觉得阐述的很好,所以就顺带分享给大家:

timg.jpg


下面开始的是一个有些庸俗的疑问,人究竟是脑袋决定屁股呢,还是屁股决定脑袋呢?在过去的十年,屁股可以决定脑袋,一个人坐什么位置,往往决定了他思考的角度和范围。而现在,中国互联网已经进入了一个“脑袋决定屁股”的时代:没有人留给你确定了自己的位置之后才开始思考的慢节奏。这个概述可能有点“粗”,但理就是如此。在过去的2016年,多少企业宣布停业,多少网站退出互联网市场,是什么原因呢?我认为归根到底还是“资本垄断”在5年前,网络信息的输出主要由无数的“站长”构成,而现迅速的被“企业”所替代:集“编辑、技术、推广、运营、设计”为一身的“站长”已然化作一家家大大小小的“企业财团”。同时,在所有人为在争夺一块口粮的时候,弱资本的企业将再次被排除之外,这就是为这里说的“资本垄断”,既然你弱,那么你就靠边站!

弱不是错,只是理想太丰满

前段时间有人找我做SEO诊断,只是三个人的小团队,手里的网站每天1000IP,却想做到50WIP,我说做不到,他说,那么十万IP总可以吧?我说也做不到,之后就没有之后了,否则那就是坑蒙拐骗了。人的胃有多大,决定了吃多少饭,继续吃下去,即使近在嘴前也难以下咽。先做很多的网站有个人,有企业,都有着理想的丰满,想着我要娶刘亦菲一样漂亮的媳妇,想着嫁习大大一样的男神,可是自身的条件却总是看不清。认识不到自身的不足,只是想要最美好的,哪里还轮得到你?

网站想要活下去,首先要做的就是“认清”自身的条件,我或许什么都可以做,但是却没有三头六臂的什么都做到尽善尽美,否则那就是超人了,事实上这个世界并没有超人。

让一步,并不是畏惧和退缩

邓小平在1991年提出了对外的“20字方针”即:冷静观察、稳住阵脚、沉着应付、韬光养晦、有所作为,此后的20多年,韬光养晦成为了中国外交的基本框架。20年后,中国外交战略从韬光养晦,到主动作为。试想,如果只是一路激进,反复消耗,还会有今天吗?20年中,我们发展了经济,强大了军事,才是最高的话语权。

对于网站也一样,目前做不到的东西,那么就将其当做是长远的战略,做网站也应冷静观察到最后的有所作为。也许,你做的范围并不大,但是却将一个项目发展做到了极致,一个产品做到了极致,就如格力一样,大家都认可的空调。反过来讲,小米曾经被估值“450亿”美元,但是为什么仅仅20个月之后直接缩水成40亿呢?从一个消费者的角度来看:感谢小米让中国高配手机市场价格下降。

在笔者看来:小米定位就是“屌丝”群体(很遗憾的用这个词),这一点非常好,也真正的为发烧而生了,但是之后却始终延续这个方向,本身就是错的。手机没有做到极致就去做笔记本、路由器、电视了,可是数量可以提升质量吗?随着消费者认知的加强,这样的选择群体将越来越少。不想用“苹果”举例,但是我们的选择真的是“崇洋媚外”吗?关键还是产品过硬、用户体验更好!小米一开始让一步选择了“低端市场”是对的,但是却没有在合适的时间选择进攻,就是错了。

想生存,网站就要往低了看

通过小米我们可以看出来,想生存就要往低了看,如果他一开始就进军高端市场,是没有半点机会的。网站呢?就各行各业来看基本已经被垄断的差不多了,新的站点,或者说竞争力偏低的站点更要往低了看。

往低了看并不是低头,也不是找“屌丝”,不同行业都有不同的用户群体,但问题就在于你可以抓住多少、并留住多少。很多的网站都喜欢向“高热”的关键词上去靠拢,最后做的不温不火。不是网站都乐此不疲的做竞价,争抢到烧钱到最后,发现全是烧钱了。也有一些网站懂得去刻意的做SEO,但是定位的偏差导致整体的运营失败。甚至一些网站每天的高跳出率,留不住哪怕一成的老客户,这就是目前绝大多数互联网企业的现状。

那么如何往低了看呢?我特别欣赏苹果的售后服务,再繁琐的问题都会为你孜孜不倦的解答。可有人说了,用苹果的相对都是高端一些的人群啊。固然如此,细节的态度100%影响了用户的选择,不能说别人花钱少了,买到的服务就低了,账不是这样算的。就网站角度而言,太多的网站严重忽视了细节方面的处理,从网站关键词布局,到结构的细节,以及用户角度的体验,都只是固执的认为:我觉得这样可以,很少的考虑,这样真的是最好吗?或者说,就将就一下得了。

低入基层,人心决不能丢

越是在困难的时候,越是考验执行力和毅力的时候,在这样大的经济环境下,并不是互联网企业受到波及,传统企业也一样如此。不同的是,有些企业死了,还有些企业踩着这些踏脚石步步升高了。不少企业在面临困难的时候,不去想如何解决这些问题,只是一味的红灯、做强调,或者说做严格的“标准”,我认为这样并不好,同时还丢了人心。在企业家中,我很佩服刘强东,虽然她霸占了我们的奶茶妹。不为别的,只为了他那句:我不能为了利润去牺牲员工60岁之后的保命钱。

讲到这里,话题可能稍微有点跑偏了,但是不偏的是从线下企业到线上企业,同样都是相同的道理。互联网经济寒冬?如何度过呢,老板深入基层往低了看,企业发展不做盲目定位,往低了看,网站发展注重细节,往低了看!我想,很多企业、网站都会有着更好的结果。

来源:A5营销
 

百度索引量与site展现量不一致背后的原因

回复

交流wtyg 发起了帖子 • 1 人关注 • 0 个回复 • 17 次浏览 • 2017-02-19 19:10 • 来自相关话题

wordpress固定连接怎样设置比较好?

回复

交流wtyg 发起了帖子 • 1 人关注 • 0 个回复 • 19 次浏览 • 2017-02-17 05:12 • 来自相关话题

致新手:网站URL路径的优化要从简

回复

交流GUZI 发起了帖子 • 1 人关注 • 0 个回复 • 32 次浏览 • 2017-02-17 04:51 • 来自相关话题

网站开启百度云加速,https报错了

回复

交流wtyg 发起了帖子 • 1 人关注 • 0 个回复 • 37 次浏览 • 2017-02-15 12:20 • 来自相关话题

[记录]wordpress function.php 实用代码!

回复

交流wtyg 发起了帖子 • 1 人关注 • 0 个回复 • 43 次浏览 • 2017-02-13 06:14 • 来自相关话题

[记录]wordpress 文章,评论,建站天数等等代码

回复

交流wtyg 发起了帖子 • 1 人关注 • 0 个回复 • 31 次浏览 • 2017-02-12 17:44 • 来自相关话题

H5动效的常见制作手法

交流xgzx 发表了文章 • 0 个评论 • 36 次浏览 • 2017-02-10 10:58 • 来自相关话题

众所周知,一个元素,动往往比静更吸引眼球;

一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;

一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。

近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,“动效设计”一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法。





我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上呈现的呢?

对,答案必须是设计师们都非常熟悉的gif小动画了,H5动效制作的第一手法,便是GIF了。

动效制作手法 1:GIF

GIF图片擅长于 制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。





GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

聊完了GIF动画的一些特点,那么我们必须同时对比一下它的堂兄弟:逐帧动画 。

动效制作手法 2:逐帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片,由js脚本模拟编写 或是使 用css3新属性step()制作 而成。step()在移动端的兼容性是很好的,但使用比较小众。逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改。





做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,再通过 JavaScript脚本 或 CSS3 animation的过度函数step() 来控制图片的background-position,二者结合就可以快速输出一个逐帧动画啦。





从以往的经验看 GIF动画 或是 逐帧动画,我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果!如以下这个例子,这是陌陌的一个宣传h5页面,它便是由 逐帧分解图+JavaScript脚本模拟逐帧动画 拼合而成的。

视频直接观看H5效果:http://v.qq.com/page/r/4/t/r0174e7fg4t.html





动效制作手法 3:CSS3

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为 擅长于平面层的动画 。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子,来自阿迪达斯的H5运营页《罗斯-绝不凋谢》:

视频直接观看H5效果:http://v.qq.com/page/w/6/l/w0174ud2x6l.html





这炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。

这里给大家介绍一下CSS3的动画三大属性:Transform 变形,Transition 过渡,和Animation 动画。

Transform 变形:拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效,罗斯的例子中,便是对充分结合了这几个变化特效的产物。

Transition 过渡:拥有修改执行变换的属性,时长,速率和延迟时间的能力,大家都很熟悉的贝塞尔曲线,也是归属于transition的设定之下的。





拓展工具:贝塞尔定制传送门

Animation 动画:若将Transform解释为动作,Transition解释为过渡,那么Animation则是连续的几个动作,即动画。Animation可以我们设定keyframes的值,让元素在一段时间内完成多个动作。





然而我们如何高质高效把动画设计传达给工程师呢?

这里来个小小的Tips:建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装!

以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用”动画属性分解表”的方式。动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。





动画属性分解表示例:





动效制作手法 4:SVG

SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。看下图几个例子,涉及到这种沿着元素描边的动画,一般都是出自SVG之手啦,当然,它也可以实现一些复杂的动画,类似这个表情图片,不过实现成本是不太划算的。

知识普及:SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,它有一些特别的地方:

1、可被多种工具读取和修改(比如记事本)
2、尺寸更小,可压缩性更强
3、矢量
4、纯粹的 XML

一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。这里必须要注意的点是:如果你想制作一个SVG动画,请一定要使用AI工具绘制输出矢量图给到工程师同学哦。










动效制作手法 5:Canvas

HTML5 的新元素 <canvas>,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。我们定义它为 擅长于绘画的动画。如下图,绘制这样一个大量元素下落的动画效果,就是Canvas所擅长的。





Canvas可以算是SVG的堂兄弟,大部分的图表动画,都是由Canvas或是SVG制作而成的,二者的动画能力相似但也有以下这些区别:

1、canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。
2、canvas能以.jpg的格式保存图像,svg是文本的格式保存图像
3、canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素
4、canvas适合图像密集型的动画,而svg不适合大量使用,例如制作飘雪等
5、canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。





动效制作手法 6:Flash->Canvas

除去上面几种常见的手法,Flash转Canvas的方法也是今年特别火爆的一种形式。既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

以下引用咋们IEG小伙伴的例子,来让大家一探此方法的魔力所在。

视频直接看H5效果:http://v.qq.com/page/o/m/7/o0174u3cim7.html





动效制作手法 7:video

用视频输出非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子,相信大家瞬间就可以明白了吧^^。





动效制作手法 8:JavaScript

其实,只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。也就是说,所有的动画特效都离不开Javascript同学的支持。市面上有很多特别的Javascript脚本库,例如three.js,细细运用,就可以做出非同凡响的动画效果。





最后我们再以一个简单的表格来汇总这H5动效常见的制作手法,希望读完本文的小伙伴们都可以在下次遇见新动画效果时,第一时间挖掘出它背后的制作原理,好好运用这8大手法,人人都是优秀的动效设计师。(表格中所阐述的性能损耗和实现成本仅作参考,具体动画效果还需要具体分析,才可得知到底使用哪种方式是最适合的。)






来源:腾讯ISUX
  查看全部
众所周知,一个元素,动往往比静更吸引眼球;

一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;

一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。

近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,“动效设计”一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法。

20151127195133879.gif

我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上呈现的呢?

对,答案必须是设计师们都非常熟悉的gif小动画了,H5动效制作的第一手法,便是GIF了。

动效制作手法 1:GIF

GIF图片擅长于 制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。

20151127183548408-590x371.png

GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

聊完了GIF动画的一些特点,那么我们必须同时对比一下它的堂兄弟:逐帧动画 。

动效制作手法 2:逐帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片,由js脚本模拟编写 或是使 用css3新属性step()制作 而成。step()在移动端的兼容性是很好的,但使用比较小众。逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改。

20151127195231709.gif

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,再通过 JavaScript脚本CSS3 animation的过度函数step() 来控制图片的background-position,二者结合就可以快速输出一个逐帧动画啦。

20151127195430519.png

从以往的经验看 GIF动画 或是 逐帧动画,我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果!如以下这个例子,这是陌陌的一个宣传h5页面,它便是由 逐帧分解图+JavaScript脚本模拟逐帧动画 拼合而成的。

视频直接观看H5效果:http://v.qq.com/page/r/4/t/r0174e7fg4t.html

20151127195941433.jpg

动效制作手法 3:CSS3

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为 擅长于平面层的动画 。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子,来自阿迪达斯的H5运营页《罗斯-绝不凋谢》:

视频直接观看H5效果:http://v.qq.com/page/w/6/l/w0174ud2x6l.html

20151127200553574.jpg

这炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。

这里给大家介绍一下CSS3的动画三大属性:Transform 变形,Transition 过渡,和Animation 动画。

Transform 变形:拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效,罗斯的例子中,便是对充分结合了这几个变化特效的产物。

Transition 过渡:拥有修改执行变换的属性,时长,速率和延迟时间的能力,大家都很熟悉的贝塞尔曲线,也是归属于transition的设定之下的。

20151127200718351.jpg

拓展工具:贝塞尔定制传送门

Animation 动画:若将Transform解释为动作,Transition解释为过渡,那么Animation则是连续的几个动作,即动画。Animation可以我们设定keyframes的值,让元素在一段时间内完成多个动作。

20151127200739323.jpg

然而我们如何高质高效把动画设计传达给工程师呢?

这里来个小小的Tips:建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装!

以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用”动画属性分解表”的方式。动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。

20151127200846913.gif

动画属性分解表示例:

20151127200842723.png

动效制作手法 4:SVG

SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。看下图几个例子,涉及到这种沿着元素描边的动画,一般都是出自SVG之手啦,当然,它也可以实现一些复杂的动画,类似这个表情图片,不过实现成本是不太划算的。

知识普及:SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,它有一些特别的地方:

1、可被多种工具读取和修改(比如记事本)
2、尺寸更小,可压缩性更强
3、矢量
4、纯粹的 XML

一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。这里必须要注意的点是:如果你想制作一个SVG动画,请一定要使用AI工具绘制输出矢量图给到工程师同学哦。

20151127201012297.jpg


20151127201048604.png

动效制作手法 5:Canvas

HTML5 的新元素 <canvas>,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。我们定义它为 擅长于绘画的动画。如下图,绘制这样一个大量元素下落的动画效果,就是Canvas所擅长的。

20151127201042916.gif

Canvas可以算是SVG的堂兄弟,大部分的图表动画,都是由Canvas或是SVG制作而成的,二者的动画能力相似但也有以下这些区别:

1、canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。
2、canvas能以.jpg的格式保存图像,svg是文本的格式保存图像
3、canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素
4、canvas适合图像密集型的动画,而svg不适合大量使用,例如制作飘雪等
5、canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。

20151127201035489.gif

动效制作手法 6:Flash->Canvas

除去上面几种常见的手法,Flash转Canvas的方法也是今年特别火爆的一种形式。既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

以下引用咋们IEG小伙伴的例子,来让大家一探此方法的魔力所在。

视频直接看H5效果:http://v.qq.com/page/o/m/7/o0174u3cim7.html

20151127201028193.jpg

动效制作手法 7:video

用视频输出非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子,相信大家瞬间就可以明白了吧^^。

20151127203014493.gif

动效制作手法 8:JavaScript

其实,只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。也就是说,所有的动画特效都离不开Javascript同学的支持。市面上有很多特别的Javascript脚本库,例如three.js,细细运用,就可以做出非同凡响的动画效果。

20151127201019719.jpg

最后我们再以一个简单的表格来汇总这H5动效常见的制作手法,希望读完本文的小伙伴们都可以在下次遇见新动画效果时,第一时间挖掘出它背后的制作原理,好好运用这8大手法,人人都是优秀的动效设计师。(表格中所阐述的性能损耗和实现成本仅作参考,具体动画效果还需要具体分析,才可得知到底使用哪种方式是最适合的。)

20151127201015798.png


来源:腾讯ISUX
 

[ISUX译]响应式图像

交流xgzx 发表了文章 • 0 个评论 • 24 次浏览 • 2017-02-10 09:48 • 来自相关话题

自从2010年Ethan Marcotte开始讨论 响应式网页设计,开发者和设计师们竞相寻求 处理响应式图片的方法 。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令人左右为难。

一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题,他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站,所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题:

1、基于设备象素比(device-pixel-radio)选择
2、基于viewport选择
3、基于Art direction(美术设计)选择
4、基于图像格式选择

该规范中,img元素增加了两个新属性:srcset 和 sizes 。srcset 用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes 属性为浏览器提供将要显示图像的尺寸信息,srcset 使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。

我们现在可以根据用户的viewport,提供不同质量或美术设计(art direction)的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案。

固定宽度图像:基于设备像素比选择

视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

srcset 属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解 srcset 的浏览器会直接加载src属性中声明的图像。<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="[ISUX译]响应式图像" alt="USWNT crest" />




网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。不过,与内容相关的图片,通常也需要响应式,它们的大小往往随viewport改变。对于这类图像,还有更好的处理方法。

可变宽度的图像:基于viewport选择

对于可变宽度的图像,我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。

sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。需要注意是,源图尺寸值不能使用百分比,vw是唯一可用的CSS单位。<img srcset="uswnt-480.jpg 480w,
uswnt-640.jpg 640w,
uswnt-960.jpg 960w,
uswnt-1280.jpg 1280w"
sizes="(max-width: 400px) 100vw,
(max-width: 960px) 75vw,
640px"
src="uswnt-640.jpg" alt="[ISUX译]响应式图像" alt="USWNT World Cup victory">




上例中,我们告诉浏览器在viewport宽度小于400像素时,使图像的宽度与viewport等宽。在viewport宽度小于960像素时,使图像的宽度为viewport宽度的75%。当viewport大于960像素时,使图像的宽度为640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport单位详解 。

浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素,图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素(600*0.75)的图像,也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏,那么浏览器就会尝试加载第一张大于900像素(600*0.75*2)的图像,也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像,因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注:srcset和size列表是对浏览器的一个建议(hint),而非指令。例如,设备像素比(dpr)为1.5的设备,亦可用1x也可用2x的图像,由浏览器根据其能力、网络等因素来决定。)

前两个例子都是以不同质量显示相同的图像,仅用srcset属性就足够了。不必担心老旧浏览器,老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像,比如在较窄屏幕下仅显示图像的关键部分,那么要使用picture元素。

picture:基于Art direction(美术设计)选择

picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为:在一个特定的转效点(breakpoint)需要显示一个特定的图像。使用picture元素选择图像,不会有歧义。<picture>

<source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
<source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
<img src="ticker-tape-small.jpg" alt="[ISUX译]响应式图像" alt="USWNT ticker-tape parade">
</picture>




在本例中,当viewport大于960像素时,会加载图像的风景模式版本(ticker-tape-large.jpg)。当viewport宽度大于575像素时,浏览器会加载图像的裁剪过的肖像模式版本(ticker-tape-medium.jpg)。而当宽度小于575像素时,加载的图像( ticker-tape-small.jpg)已经被裁剪成焦点仅在一个球员上了。

picture元素是向后兼容的;不支持picture元素的浏览器将显示img。图像的所有标准属性(如alt),应该作用在img上而不是picture上。

source:基于图片格式选择

最近几年出现了一些新的图片格式,这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持。JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持。如果你想了解更多信息,可以查看Zoltan Hawryluk对这些新格式的深入研究。<picture>
<source type="image/vnd.ms-photo" src="wwc2015.jxr"> <source type="image/jp2" src="wwc2015.jp2"> <source type="image/webp" src="wwc2015.webp"> <img src="wwc2015.png" alt="[ISUX译]响应式图像" alt="WWC 2015">
</picture>
source的type属性用来指定每个图像的MIME类型,浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的,如果浏览器无法识别所有的图象类型,它会回退至原来的img元素。

现在可以使用这些东东吗?

在写这篇文章的时候, Firefox,Chrome和Opera的最新稳定版本均支持picture。Safari和IE本身均不支持picture。srcset的情况稍微好一点,Firefox、Chrome和Opera的最新稳定版本完全支持,Safari8和Internet Explorer Edge部分支持,可以使用x描述符用于根据分辨率切换,但不支持w描述符。Safari9已经完全支持srcset了(译者注)。

现有不少polyfills解决支持性问题,最知名的恐怕是Scott Jehl的picturefill。目前我(原作者)在我自己的网站上使用Alexander Farkas的respimage。目前的状况是,我们已对响应式图像的处理方案达成一致,并且这些解决方案逐渐被所有的主流浏览器实现。尽管该规范仍在不断完善之中,但原生的响应式解决方案离我们越来越近了。

来源:腾讯ISUX
  查看全部
自从2010年Ethan Marcotte开始讨论 响应式网页设计,开发者和设计师们竞相寻求 处理响应式图片的方法 。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令人左右为难。

一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题,他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站,所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题:

1、基于设备象素比(device-pixel-radio)选择
2、基于viewport选择
3、基于Art direction(美术设计)选择
4、基于图像格式选择

该规范中,img元素增加了两个新属性:srcsetsizessrcset 用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes 属性为浏览器提供将要显示图像的尺寸信息,srcset 使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。

我们现在可以根据用户的viewport,提供不同质量或美术设计(art direction)的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案。

固定宽度图像:基于设备像素比选择

视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

srcset 属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解 srcset 的浏览器会直接加载src属性中声明的图像。
<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="[ISUX译]响应式图像" alt="USWNT crest" />

20160314203815205.jpg

网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。不过,与内容相关的图片,通常也需要响应式,它们的大小往往随viewport改变。对于这类图像,还有更好的处理方法。

可变宽度的图像:基于viewport选择

对于可变宽度的图像,我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。

sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。需要注意是,源图尺寸值不能使用百分比,vw是唯一可用的CSS单位。
<img srcset="uswnt-480.jpg 480w, 
uswnt-640.jpg 640w,
uswnt-960.jpg 960w,
uswnt-1280.jpg 1280w"
sizes="(max-width: 400px) 100vw,
(max-width: 960px) 75vw,
640px"
src="uswnt-640.jpg" alt="[ISUX译]响应式图像" alt="USWNT World Cup victory">

20160314203817341.jpg

上例中,我们告诉浏览器在viewport宽度小于400像素时,使图像的宽度与viewport等宽。在viewport宽度小于960像素时,使图像的宽度为viewport宽度的75%。当viewport大于960像素时,使图像的宽度为640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport单位详解 。

浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素,图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素(600*0.75)的图像,也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏,那么浏览器就会尝试加载第一张大于900像素(600*0.75*2)的图像,也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像,因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注:srcset和size列表是对浏览器的一个建议(hint),而非指令。例如,设备像素比(dpr)为1.5的设备,亦可用1x也可用2x的图像,由浏览器根据其能力、网络等因素来决定。)

前两个例子都是以不同质量显示相同的图像,仅用srcset属性就足够了。不必担心老旧浏览器,老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像,比如在较窄屏幕下仅显示图像的关键部分,那么要使用picture元素。

picture:基于Art direction(美术设计)选择

picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为:在一个特定的转效点(breakpoint)需要显示一个特定的图像。使用picture元素选择图像,不会有歧义。
<picture> 

<source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
<source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
<img src="ticker-tape-small.jpg" alt="[ISUX译]响应式图像" alt="USWNT ticker-tape parade">
</picture>

20160314203833264.jpg

在本例中,当viewport大于960像素时,会加载图像的风景模式版本(ticker-tape-large.jpg)。当viewport宽度大于575像素时,浏览器会加载图像的裁剪过的肖像模式版本(ticker-tape-medium.jpg)。而当宽度小于575像素时,加载的图像( ticker-tape-small.jpg)已经被裁剪成焦点仅在一个球员上了。

picture元素是向后兼容的;不支持picture元素的浏览器将显示img。图像的所有标准属性(如alt),应该作用在img上而不是picture上。

source:基于图片格式选择

最近几年出现了一些新的图片格式,这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持。JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持。如果你想了解更多信息,可以查看Zoltan Hawryluk对这些新格式的深入研究。
<picture>
<source type="image/vnd.ms-photo" src="wwc2015.jxr"> <source type="image/jp2" src="wwc2015.jp2"> <source type="image/webp" src="wwc2015.webp"> <img src="wwc2015.png" alt="[ISUX译]响应式图像" alt="WWC 2015">
</picture>

source的type属性用来指定每个图像的MIME类型,浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的,如果浏览器无法识别所有的图象类型,它会回退至原来的img元素。

现在可以使用这些东东吗?

在写这篇文章的时候, Firefox,Chrome和Opera的最新稳定版本均支持picture。Safari和IE本身均不支持picture。srcset的情况稍微好一点,Firefox、Chrome和Opera的最新稳定版本完全支持,Safari8和Internet Explorer Edge部分支持,可以使用x描述符用于根据分辨率切换,但不支持w描述符。Safari9已经完全支持srcset了(译者注)。

现有不少polyfills解决支持性问题,最知名的恐怕是Scott Jehl的picturefill。目前我(原作者)在我自己的网站上使用Alexander Farkas的respimage。目前的状况是,我们已对响应式图像的处理方案达成一致,并且这些解决方案逐渐被所有的主流浏览器实现。尽管该规范仍在不断完善之中,但原生的响应式解决方案离我们越来越近了。

来源:腾讯ISUX
 

无框界面时代或将到来:无框界面优劣浅谈

交流wtyg 发表了文章 • 0 个评论 • 57 次浏览 • 2017-01-24 12:02 • 来自相关话题

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。





那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。





掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?





但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。





发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015





不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。





无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
  查看全部
6362076364736241566999690.jpeg

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。

6362076364739361575243027.jpg

那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。

6362076364744041589257120.png

掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?

6362076364748721598973040.png

但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。

6362076364751841592514549.png

发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015

6362076364754961609757886.png

不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。

6362076364759641614771978.png

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
 

提高网站分析效率:创建网站分析之KPI

交流wtyg 发表了文章 • 0 个评论 • 60 次浏览 • 2017-01-20 14:26 • 来自相关话题

很多网站运营人员会遇到工作效率不高的情况,一个很重要的原因是因为没有保证工作进行的方向是对的,也就是说有时候偏离了目标。而KPI的设定则可以保证工作方向的正确性,进而提高网站分析效率。





一、网站分析KPI定义

KPI是指关键业绩指标,通常不同部门的KPI是不同的。KPI是将一个大目标分解为几个关键的小指标,并通过管理和考核这几个关键指标来促进目标的有效完成。也就是说网站分析的KPI是将整个网站的目标分解为若干个层次的关键指标,并对这几个层次的关键指标进行管理和优化,最终完成网站的整体目标。

举个例子:

当我们想要对网站进行优化时,通常是分为几个步骤来进行的:

1、将网站的目标转化为可以度量并对目标产生影响的几个关键指标;

2、对关键指标进行计算,得出这几个关键指标所需要的数据,然后在网站不同的页面和不同的功能中实施自定义追踪代码;

3、将追踪到的数据和之前计算得到的关键指标的自定义数据进行对比分析;

4、将分析结果和和解决方案写进网站分析报告中,得出结论,而这个结论中的核心数据就是我们所需要考核的数据,也就是说KPI。





由此可见,KPI是经过逐层分解和度量计算得出来的,这些KPI都是围绕着网站目标而逐层展开的,每个KPI的表现和变化都足以对网站的目标产生重大影响,要提高网站分析效率就得保证KPI的有效执行,不做无用功。

二、网站分析KPI创建的标准

创建KPI时候通常需要先将网站的目标进行量化,找出所有影响目标指标的因素,再挑选出最重要的几个指标,然后创建一级KPI,二级KPI,三级KPI,依次进行。KPI的重要性决定了我们在创建它的时候必须要有一套标准,而这标准就是:

* KPI必须是一个比率,百分比或平均数,也就是说KPI不能是原始数据,因为原始数据没有经过分析很难发现数据的变化和趋势;

* KP除了网站分析工具提供的指标,一定会有个性化的指标,因为每个网站是不一样的,考核的KPI必然有不一样的地方;

* KPI是制定是要分不同的层级的人,比如管理者的是战略级的KPI,部门的是战术级的KPI,他们更关注对工作有具体指导的指标;

* KPI要有清晰的定义和边界,让大家了解各自所管理的工作;

KPI的变化可以驱动目标的变化,即KPI发生变化时候会有相应的指标发生变化,也就是说KPI有着对网站的目标进行分析和优化的作用。





举个例子:

背景

假设某汽车网站的目标是”来自网站的咨询电话数量”,按照网站的目标进行分解,发现影响影响“来自网站的咨询电话数量”的指标是浏览过汽车详细信息页的访问次数。基于上述背景,哪个才是有价值的KPI呢?假设KPI是“访问来电率”,接着我们用上面的5条KPI设定标准来进行检验。

检验标准

按照上述的标准5:“KPI的变化可以驱动目标的变化,即KPI发生变化时候会有相应的指标发生变化,也就是说KPI有着对网站的目标进行分析和优化的作用”。

分析

当KPI访问来电率降低时候:原因可能是访问质量降低,也可能是访问了汽车详细页的访问者没有打电话,或者是访问量没有变化,而大部分访问者浏览了更少的页面等等。按照标准5当KPI的变化应该相应的指标也会发生变化,但是这边并没有,所以,访问来电率这个KPI是没有价值的。

正确的KPI应该是:汽车详细信息页面的浏览量来电率。因为这个KPI最直接的影响了网站来电量的多少。

三、以KPI为核心的工作流程

由于KPI的重要性,所以在工作前检查KPI是很有必要的。通常,检查从两方面进行:从网站的目标进行检查和从KPI的5个标准进行检查。

我们需要检查是否每一个KPI都和网站的目标相关,是否还有遗漏的其他影响网站目标的因素存在,以及是否有重复的内容存在。

在检查完毕后我们就可以开始以KPI为核心进行具体的分析工作了,通常以KPI为核心的工作流程是按照以下步骤进行的:

* 按照KPI对数据的需求实施网站追踪代码,获得网站的关键指标;

* 汇总网站分析的KPI指标,对产生变化的指标进行细分,然后去找出原因;

* 通过分析的原因和结论生成报告,并标明产生变化的指标和原因;

* 把报告给KPI的部门负责人,按照报告进行相应的调整。

总结

网站分析KPI指标大部分都是个性化的,我们只有在工作中始终以KPI为核心来开展工作,才能保证 工作不会偏离方向,即提供工作效率的一种。创建KPI、检验 KPI、将KPI应用到工作流程中,实现一个闭环。

来源:人人都是产品经理
  查看全部
很多网站运营人员会遇到工作效率不高的情况,一个很重要的原因是因为没有保证工作进行的方向是对的,也就是说有时候偏离了目标。而KPI的设定则可以保证工作方向的正确性,进而提高网站分析效率。

cMQhPsIqKMxIGXtBMYBh.jpg

一、网站分析KPI定义

KPI是指关键业绩指标,通常不同部门的KPI是不同的。KPI是将一个大目标分解为几个关键的小指标,并通过管理和考核这几个关键指标来促进目标的有效完成。也就是说网站分析的KPI是将整个网站的目标分解为若干个层次的关键指标,并对这几个层次的关键指标进行管理和优化,最终完成网站的整体目标。

举个例子:

当我们想要对网站进行优化时,通常是分为几个步骤来进行的:

1、将网站的目标转化为可以度量并对目标产生影响的几个关键指标;

2、对关键指标进行计算,得出这几个关键指标所需要的数据,然后在网站不同的页面和不同的功能中实施自定义追踪代码;

3、将追踪到的数据和之前计算得到的关键指标的自定义数据进行对比分析;

4、将分析结果和和解决方案写进网站分析报告中,得出结论,而这个结论中的核心数据就是我们所需要考核的数据,也就是说KPI。

u7oNyvywoL99JSsvxPZS.jpg

由此可见,KPI是经过逐层分解和度量计算得出来的,这些KPI都是围绕着网站目标而逐层展开的,每个KPI的表现和变化都足以对网站的目标产生重大影响,要提高网站分析效率就得保证KPI的有效执行,不做无用功。

二、网站分析KPI创建的标准

创建KPI时候通常需要先将网站的目标进行量化,找出所有影响目标指标的因素,再挑选出最重要的几个指标,然后创建一级KPI,二级KPI,三级KPI,依次进行。KPI的重要性决定了我们在创建它的时候必须要有一套标准,而这标准就是:

* KPI必须是一个比率,百分比或平均数,也就是说KPI不能是原始数据,因为原始数据没有经过分析很难发现数据的变化和趋势;

* KP除了网站分析工具提供的指标,一定会有个性化的指标,因为每个网站是不一样的,考核的KPI必然有不一样的地方;

* KPI是制定是要分不同的层级的人,比如管理者的是战略级的KPI,部门的是战术级的KPI,他们更关注对工作有具体指导的指标;

* KPI要有清晰的定义和边界,让大家了解各自所管理的工作;

KPI的变化可以驱动目标的变化,即KPI发生变化时候会有相应的指标发生变化,也就是说KPI有着对网站的目标进行分析和优化的作用。

ZtJ6XlgfKGrs2s2H5Cao.jpg

举个例子:

背景

假设某汽车网站的目标是”来自网站的咨询电话数量”,按照网站的目标进行分解,发现影响影响“来自网站的咨询电话数量”的指标是浏览过汽车详细信息页的访问次数。基于上述背景,哪个才是有价值的KPI呢?假设KPI是“访问来电率”,接着我们用上面的5条KPI设定标准来进行检验。

检验标准

按照上述的标准5:“KPI的变化可以驱动目标的变化,即KPI发生变化时候会有相应的指标发生变化,也就是说KPI有着对网站的目标进行分析和优化的作用”。

分析

当KPI访问来电率降低时候:原因可能是访问质量降低,也可能是访问了汽车详细页的访问者没有打电话,或者是访问量没有变化,而大部分访问者浏览了更少的页面等等。按照标准5当KPI的变化应该相应的指标也会发生变化,但是这边并没有,所以,访问来电率这个KPI是没有价值的。

正确的KPI应该是:汽车详细信息页面的浏览量来电率。因为这个KPI最直接的影响了网站来电量的多少。

三、以KPI为核心的工作流程

由于KPI的重要性,所以在工作前检查KPI是很有必要的。通常,检查从两方面进行:从网站的目标进行检查和从KPI的5个标准进行检查。

我们需要检查是否每一个KPI都和网站的目标相关,是否还有遗漏的其他影响网站目标的因素存在,以及是否有重复的内容存在。

在检查完毕后我们就可以开始以KPI为核心进行具体的分析工作了,通常以KPI为核心的工作流程是按照以下步骤进行的:

* 按照KPI对数据的需求实施网站追踪代码,获得网站的关键指标;

* 汇总网站分析的KPI指标,对产生变化的指标进行细分,然后去找出原因;

* 通过分析的原因和结论生成报告,并标明产生变化的指标和原因;

* 把报告给KPI的部门负责人,按照报告进行相应的调整。

总结

网站分析KPI指标大部分都是个性化的,我们只有在工作中始终以KPI为核心来开展工作,才能保证 工作不会偏离方向,即提供工作效率的一种。创建KPI、检验 KPI、将KPI应用到工作流程中,实现一个闭环。

来源:人人都是产品经理
 

案例分析:聊聊扁平化设计的六点优势

交流adminjzw 发表了文章 • 0 个评论 • 56 次浏览 • 2017-01-18 06:00 • 来自相关话题

著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。





扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。





Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”





Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955





Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955





Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。





GIF for the Weather App

扁平化设计最基本、最突出的特征包括:

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则





Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。





设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。





UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。





Pull To Refresh





Portrait vs Landscape interaction





GIF for Pull Down





Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。





The set of flat icons





Flat icons applied in Veggie App





Flat icons and tabs design for Blog App





Flat icons applied in Saily App





Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。





Cafe Coupon App





Weather App





Moneywise App





Illustration for SwiftyBeaver





Timeline App





Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。





Free Colorful Wallpapers





Free Space Wallpapers





Star Wars Rogue One





Underwater Explorer





Halloween Haunted Castle





Rio 2016





Californication Bus





San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。





Tales of the Jazz Age Book Cover





Pikachu Poster





Muscles Magazine





Suicide Squad Poster





Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。





Logo mascot for Saily App





Logo lettermark for PassFold





Logo design for Andre





Logo for Design4Users





Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

译文地址:http://www.uisdc.com/flat-design-history-benefits
  查看全部
著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

VA1yScFBJBhNhHRGB56H.jpg

扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。

ovaXdsyrPaed0HeE4zm5.jpg

Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”

VctR5IlQNBoDpbJwcJLc.jpg

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

0geqrBEASUf1X7oW9mT9.jpg

Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955

LpxltRhqNUMvirUVpccL.jpg

Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。

DufX84FkS806RGZG3Z9h.gif

GIF for the Weather App

扁平化设计最基本、最突出的特征包括

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则

qeP04fZumELiPOQPylQl.gif

Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。

cdwhRTKKKzQTCOMSgOaP.jpg

设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。

kpAlH27i1HkdQtLqYSjs.jpg

UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。

J026IYeXXjXqJRfqg7WV.gif

Pull To Refresh

AjlEKMzTRyGdsS64PHgo.gif

Portrait vs Landscape interaction

YkCuj9R06IKIHDeeZTKF.gif

GIF for Pull Down

LtclmavCC4OvdOI1w1PS.gif

Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。

UtnQ8qgDoTNbyjrc3FIi.jpg

The set of flat icons

3awr5xisfgmzdOM17goZ.jpg

Flat icons applied in Veggie App

pyTnlhSJbCwx84gFRCHQ.jpg

Flat icons and tabs design for Blog App

YmsaZWied3aRf0EnRBsl.jpg

Flat icons applied in Saily App

xiJCBAVhnGO5IlGfCA9g.jpg

Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。

0e5HIXACkYI4x40JXIE4.gif

Cafe Coupon App

Uao2dHMduQSqpm2ondZe.jpg

Weather App

zELEPuEA4XsybrTbXkp7.jpg

Moneywise App

OUmjWUlwGA8bYqGuRJUV.jpg

Illustration for SwiftyBeaver

Z91xUJPAEijOXQKDXImq.gif

Timeline App

NWKL93uZdpw26auhW5tR.jpg

Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。

pRteKEcssaYy2qEw5O5M.jpg

Free Colorful Wallpapers

1TwpXwmViRlatk52MfHc.jpg

Free Space Wallpapers

LZ41vqQwD8Xfagkwrs1s.jpg

Star Wars Rogue One

G5SOrXdvwnJ5gmGjsznh.jpg

Underwater Explorer

4IfyPXB54v9WOCYycPVq.jpg

Halloween Haunted Castle

SuQj98Ej5OByqrFQ5iSF.jpg

Rio 2016

kaixiZXuuCY8fNbcBuyb.jpg

Californication Bus

z6ycJBBja7HmQYEDcmam.jpg

San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。

0BPIkAWzvhvY63x7bWYN.jpg

Tales of the Jazz Age Book Cover

TinZvOWqGIf87ZE6Iy4h.jpg

Pikachu Poster

vUv6COWehLyjNW3gt4fj.jpg

Muscles Magazine

hH1bt1cBq3X2vekN36fF.jpg

Suicide Squad Poster

qqoTa1uiKUvLemGMrTD7.jpg

Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。

uKLgUYHx5on34JCtxF0l.jpg

Logo mascot for Saily App

Nj9TbBMsRqf9go4JzzHy.jpg

Logo lettermark for PassFold

ixbJlQ45qsNNDoAvyW2I.jpg

Logo design for Andre

xmFaH47d660oDeW4Faqj.jpg

Logo for Design4Users

QNV8zfWKSI7ej73X6eJu.jpg

Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

译文地址:http://www.uisdc.com/flat-design-history-benefits
 

8uftp使用入门教程

交流wtyg 发表了文章 • 0 个评论 • 85 次浏览 • 2017-01-17 01:18 • 来自相关话题

做网站少不了上传和下载网站数据,所以这里给大家介绍一款软件 8uftp。但是这里不详细地给大家讲解每一个功能细节,那样得长篇大论了。看了这篇 8uftp使用入门教程!至少,你可以学会怎样连接你的网站空间,上传下载网站数据。

---------

首先大家要准备好一些信息:ftp地址(网址/ip地址)、ftp账号、ftp密码,这些信息一般网站空间的控制面板都会提供。

1、打开8uftp,将以上准备好的信息分别填入,端口21默认就可以了。





2、点击后面的“连接”按钮,我们就能够成功连接到你的网站空间。网站数据的上传下载,我就不多说了,经常用到电脑的朋友都知道鼠标右键,在8uftp界面两边窗口里选中(全选:选中一个,再Ctrl+A;多选不连续:按住Ctrl不放,点选你要选择的内容;多选连续:选中你要开始的内容,按住Shift不放,再选中你要结束的内容,即可)你要上穿或者下载的内容,然后右键,有很多选项,点击上传或者下载即可。

相关教程:

1、AndFTP使用教程:手机也能操作网站数据!
  查看全部
8uftp.jpg

做网站少不了上传和下载网站数据,所以这里给大家介绍一款软件 8uftp。但是这里不详细地给大家讲解每一个功能细节,那样得长篇大论了。看了这篇 8uftp使用入门教程!至少,你可以学会怎样连接你的网站空间,上传下载网站数据。

---------

首先大家要准备好一些信息:ftp地址(网址/ip地址)、ftp账号、ftp密码,这些信息一般网站空间的控制面板都会提供。

1、打开8uftp,将以上准备好的信息分别填入,端口21默认就可以了。

20170117015700.jpg

2、点击后面的“连接”按钮,我们就能够成功连接到你的网站空间。网站数据的上传下载,我就不多说了,经常用到电脑的朋友都知道鼠标右键,在8uftp界面两边窗口里选中(全选:选中一个,再Ctrl+A;多选不连续:按住Ctrl不放,点选你要选择的内容;多选连续:选中你要开始的内容,按住Shift不放,再选中你要结束的内容,即可)你要上穿或者下载的内容,然后右键,有很多选项,点击上传或者下载即可。

相关教程:

1、AndFTP使用教程:手机也能操作网站数据!
 

【新司机指南】小白站长进阶攻略之那些唾手可得的搜索展现标识

交流wtyg 发表了文章 • 0 个评论 • 55 次浏览 • 2017-01-15 01:13 • 来自相关话题

老站长毋庸多言,新站长不可不知!

有些特殊的搜索展现,可以提升搜索结果点击率,为网站带来更多流量,都是什么?到哪里可以获取?重磅广而告之!

优质资源系列

1、站点子链





搜索结果中直接把子频道、子站点展现出来,最有价值的信息直接呈现给用户,堪比品专效果,不同的是,这个站点子链展示可是免费的!站点子链权限的获取需要审核,开通后可对子链内容进行提交和修改。

2、闪电标识





闪电标识意味着该页面为MIP页面,可以极速打开,页面体验更好。凡是进行MIP改造的站点,提交生效后即可享有。

3、原创标识





高质量的内容生态构建,首先要有高质量的内容,未来百度搜索对原创内容的扶持力度将会加大。如果不想错过这个福利资源,就需要密切关注百度站长平台。





官网系列

1、站点logo





搜索结果中出现了图片,就好比人化了妆,店面做了装饰,这样的结果直接映入眼帘,非常吸引眼球。如果你的站点还没有logo图片,或者logo图被抓错了想修改,使用站长平台验证官网,通过站点管理-站点属性提交符合要求的站点logo即可实现。





2、官网标识





山寨镜像横行的年代,官网标识很好的帮助搜索用户区分真假官网,提高搜索结果的可信度,提高搜索结果点击率,提升流量。

可通过百度信誉V官网购买“官网标”等产品。

除此以外,站长平台提供官网保护工具,站长提交多个精准的品牌词及对应官网地址,通过审核后用户在搜索相关品牌词时,官网可优先展现。优质的网站数据将有机会免费获得“官网标”。

3、V1、V2、V3





当V出现的时候,证明这家企业通过了百度信誉认证,企业身份真实有效。分为三个等级,最高级别为金色的“V3”,往下依次为蓝色的“V2”,“V1”。

来源:百度站长平台

  查看全部
老站长毋庸多言,新站长不可不知!

有些特殊的搜索展现,可以提升搜索结果点击率,为网站带来更多流量,都是什么?到哪里可以获取?重磅广而告之!

优质资源系列

1、站点子链


6361990108917696209843491.jpeg

搜索结果中直接把子频道、子站点展现出来,最有价值的信息直接呈现给用户,堪比品专效果,不同的是,这个站点子链展示可是免费的!站点子链权限的获取需要审核,开通后可对子链内容进行提交和修改。

2、闪电标识

6361990108927056228871676.jpeg

闪电标识意味着该页面为MIP页面,可以极速打开,页面体验更好。凡是进行MIP改造的站点,提交生效后即可享有。

3、原创标识

6361990108937976249372442.jpeg

高质量的内容生态构建,首先要有高质量的内容,未来百度搜索对原创内容的扶持力度将会加大。如果不想错过这个福利资源,就需要密切关注百度站长平台。

6361990108944216255859117.png

官网系列

1、站点logo


6361990108947336254102454.jpeg

搜索结果中出现了图片,就好比人化了妆,店面做了装饰,这样的结果直接映入眼帘,非常吸引眼球。如果你的站点还没有logo图片,或者logo图被抓错了想修改,使用站长平台验证官网,通过站点管理-站点属性提交符合要求的站点logo即可实现。

6361990108953576264887301.jpeg

2、官网标识

6361990108958256278901393.jpeg

山寨镜像横行的年代,官网标识很好的帮助搜索用户区分真假官网,提高搜索结果的可信度,提高搜索结果点击率,提升流量。

可通过百度信誉V官网购买“官网标”等产品。

除此以外,站长平台提供官网保护工具,站长提交多个精准的品牌词及对应官网地址,通过审核后用户在搜索相关品牌词时,官网可优先展现。优质的网站数据将有机会免费获得“官网标”。

3、V1、V2、V3

6361990108966056292158823.jpeg

当V出现的时候,证明这家企业通过了百度信誉认证,企业身份真实有效。分为三个等级,最高级别为金色的“V3”,往下依次为蓝色的“V2”,“V1”。

来源:百度站长平台