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

交流wtyg 发表了文章 • 0 个评论 • 4 次浏览 • 19 小时前 • 来自相关话题

什么是无框界面

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

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

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

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





那么卡片化呢?

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

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

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

无框的优势?

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

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





掌控注意力

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

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

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

减少设计束缚

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

很多网站运营人员会遇到工作效率不高的情况,一个很重要的原因是因为没有保证工作进行的方向是对的,也就是说有时候偏离了目标。而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 个评论 • 25 次浏览 • 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 个评论 • 31 次浏览 • 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 个评论 • 31 次浏览 • 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”。

来源:百度站长平台

 

数据分析能力是未来运营的分水岭

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

精细化运营以及变得尤为重要,数据驱动决策是我们运营人必须要面对的挑战也是我们要下意识学的一门技能。





数据驱动运营是未来运营的趋势,也是我们运营人的一个分水岭,在运营的刀耕火种时代已经趋于没落的时候,精细化运营以及变得尤为重要,数据驱动决策是我们运营人必须要面对的挑战也是我们要下意识学的一门技能。

但也是很多刚进入运营领域的新人一个头疼问题,因为他所涉及到的数据分析方法、方法论、逻辑分析能力以及一些工具的使用,而且一堆数据也是很多运营人员不愿面对的。本章节我们就从如何获取数据、如何分析数据以及一款产品都关注哪些数据维度。

一、数据从哪里获取

在我们分析数据之前,就必须得有数据供我们分析,所以我们就得拿到数据,怎么拿到呢?

数据的来源渠道主要有两种:

自有数据分析系统——公司自有的数据是最源质化的数据,也是最可靠、最全面的。一般而言,有条件的情况下都是以内部数据为准;

第三方数据分析工具,这个是借助外部工具获得数据。

下面给大家介绍主要5款的数据分析工具:

1.友盟

支持iOS、Android应用数据统计分析

2.growingio

growingio强大的地方在于无需埋点,就可以获取并分析全面、实时的用户行为数据,以优化产品体验,实现精益化运营。

3.应用雷达

仅针对iOS,查看App Store总榜和分类排名。查看产品在App Store 里的搜索度得分,评判ASO效果的标准之一。

4.百度移动统计

支持ios和android平台。另外,开发者在嵌入统计SDK后,可以对自家产品进行较为全面的监控,包括用户行为、用户属性、地域分布、终端分析等。

5.酷传

仅支持android平台应用监控。开发者可以查看应用在主流市场下载量、排名、评分评论、关键词排名等数据,还能系统地与同类竞品进行数据对比。

当然了,数据分析工具不止这5款,如果你们正在使用其他的,也是可以的。使用分析工具我们可以得到以下内容:

记录那些点击信息,包括没有与网站产生交互的信息;可直接生成链接的百分比,点击分布图和热力图;可统计用户的悬停,将用户潜在行为可视化

获取数据的方式其实多种多样,关键在于,作为运营人员要了解什么样的数据是重要的,对于这些数据的前后关联,是怎样的,这是一个联动的过程,不是一个单一的行为。

有了这些数据之后,我们该怎么去分析这些数据呢?哪些是可以为我们所用的额,又有哪些是可以剔除掉的。

二、如何分析现有的数据

从第三方数据分析工具或者自家的分析后台拿到这些数据后 ,该怎么去分析呢?我相信很多运营人在拿到数据时,都是没多少思路的。要么胡子眉毛一把抓,要么无从下手。这都是缺少分析思路的表现,需要宏观的方法论和微观的方法来指导。

在我们进行数据分析时经常会使用到方法论,这些方法论在我们进行数据分析时扮演宏观指导的角色。所以说在我们进行数据分析时,应该先找到适合自己的方法论进行指导。主要会用到的方法论:

1.PEST分析法:用于对宏观环境的分析,包括政治(political)、经济(economic)、社会(social)和技术(technological)四方面。

2.5W2H分析法:何因(Why)、何事(What)、何人(Who)、何时(When)、何地(Where)、如何就(How)、何价(How much)。

3.逻辑树分析法:把问题的所有子问题分层罗列。

4.4P营销理论:分析公司的整体营运情况,包括产品(product)、价格(price)、渠道(place)、促销(promotion)四大要素。

5.用户行为理论:主要用于网站流量分析,如回访者、新访者、流失率等,在众多指标中选择一些适用的。

6.AARRR(增长黑客的海盗法则):精益创业的重要框架,从获取(Acquisition)、激活(Activition)、留存(Retention)、变现(Revenue)和推荐(Referral)5个环节增长。

数据分析的方法论很多,这里不能一一列举;没有最好的方法论,只有最合适的。下面我详细介绍一下 AARRR 方法论,对于精益化运营、业务增长的问题,这个方法论非常契合。

对于互联网产品而言,用户具有明显的生命周期特征,我以一个APP为例阐述一下。

首先通过各种线上、线下的渠道获取新用户,下载安装APP。安装完APP后,通过运营手段激活用户;比如说首单免费、代金券、红包等方式。通过一系列的运营使部分用户留存下来,并且给企业带营收。在这个过程中,如果用户觉得这个产品不错,可能推荐给身边的人;或者通过红包等激励手段鼓励分享到朋友圈等等。需要注意的是,这5个环节并不是完全按照上面顺序来的;运营可以根据业务需要灵活应用。AARRR的五个环节都可以通过数据指标来衡量与分析,从而实现精益化运营的目的;每个环节的提升都可以有效增长业务。

在使用这些数据分析方法论要明确他们的作用:

●理顺分析思路,确保数据分析结构体系化。

●把问题分解成相关联的部分,并显示它们之间的关系。

●为后续数据分析的开展指引方向。

●确保分析结果的有效性及正确性。

再比如,我们在分析APP的数据维度时,会使用到趋势分析法,因为趋势分析是最简单、最基础,也是最常见的数据监测与数据分析方法。通常我们在数据分析产品中建立一张数据指标的线图或者柱状图,然后持续观察,重点关注异常值。在这个过程中,我们要选定第一关键指标,而不要被虚荣指标所迷惑。

如果我们将我们分析的APP的下载量作为第一关键指标,可能就会走偏;因为用户下载APP并不代表他使用了你的产品。在这种情况下,建议将日活跃用户作为第一关键指标,而且是启动并且执行了某个操作的用户才能算上去;这样的指标才有实际意义,运营人员要核心关注这类指标。

三、一款产品都关注哪些数据维度

我们都知道,运营人每天都会跟各种各样的数据打交道,那一款产品都有那些数据维度是我们经常会分析到的呢?

一款产品(特指APP)的数据指标体系一般都可以分为:用户规模与质量、渠道分析、参与度分析、功能分析以用户属性分析。

1.用户规模和质量的分析包括总用户数、新用户数、留存用户、转化率。用户规模和质量是APP分析最重要的维度,其指标也是相对其他维度最多,产品负责人要重点关注这个维度的指标。

2.渠道分析主要是分析各渠道在相关的渠道质量的变化和趋势,以科学评估渠道质量,优化渠道推广策略。渠道分析尤其要重视,因为现在移动应用市场刷量作弊是以及业内公开的秘密。渠道分析可以从多个维度的数据来对比不同渠道的效果,比如从新增用户、活跃用户、次日留存率、单次使用时长等角度对比不同来源的用户,这样就可以根据数据找到最适合自身的渠道,从而获得最好的推广效果。

3.参与度分析主要是分析用户的活跃度,分析的维度主要是包括启动次数分析、使用时长分析、访问页面分析和使用时间间隔分析。

4.功能分析主要包括:

功能活跃指标:某个功能的活跃用户,使用量情况;功能验证;对产品功能的数据分析,确保功能的取舍的合理性。

页面访问路径:用户从打开到离开应用整个过程中每一步骤的页面访问、跳转情况。页面访问路径是全量统计。通过路径分析得出用户类型的多样、用户使用产品目的的多样性,还原用户目的;通过路径分析,做用户细分;再通过用户细分,返回到产品的迭代

漏斗模型是用于分析产品中关键路径的转化率,以确定产品流程的设计是否合理,分析用户体验问题。用户转化率的分析,核心考察漏斗每一层的流失原因的分析。通过设置自定义事件以及漏斗来关注应用内每一步的转化率,以及转化率对收入水平的影响。通过分析事件和漏斗数据,可以针对性的优化转化率低的步骤,切实提高整体转化水平。

5.用户属性分析不管在我们的产品启动初期,还是战略的调整,分析用户画像都有着重要的意义。比如我们在产品设计前需要构建用户画像,指导设计、开发、运营;产品迭代过程需要收集用户数据,便于进行用户行为分析,与商业模式挂钩等等。

用户属性一般包括性别、年龄、职业、所在地、手机型号、使用网络情况。如果对用户的其他属性感兴趣的,可以到自的微信呢公众号后台或者其他诸如头条、uc等后台看用户属性都包含哪些维度。

以流量为中心、野蛮的运营时代已经结束,接下来的时代是以科学的数据作为依据,围绕着用户紧紧做精细化的运营时代。

作者:艺林小宇

来源:艺林小宇(cs-jy8)
  查看全部
精细化运营以及变得尤为重要,数据驱动决策是我们运营人必须要面对的挑战也是我们要下意识学的一门技能。

1484189495857.jpg

数据驱动运营是未来运营的趋势,也是我们运营人的一个分水岭,在运营的刀耕火种时代已经趋于没落的时候,精细化运营以及变得尤为重要,数据驱动决策是我们运营人必须要面对的挑战也是我们要下意识学的一门技能。

但也是很多刚进入运营领域的新人一个头疼问题,因为他所涉及到的数据分析方法、方法论、逻辑分析能力以及一些工具的使用,而且一堆数据也是很多运营人员不愿面对的。本章节我们就从如何获取数据、如何分析数据以及一款产品都关注哪些数据维度。

一、数据从哪里获取

在我们分析数据之前,就必须得有数据供我们分析,所以我们就得拿到数据,怎么拿到呢?

数据的来源渠道主要有两种:

自有数据分析系统——公司自有的数据是最源质化的数据,也是最可靠、最全面的。一般而言,有条件的情况下都是以内部数据为准;

第三方数据分析工具,这个是借助外部工具获得数据。

下面给大家介绍主要5款的数据分析工具:

1.友盟

支持iOS、Android应用数据统计分析

2.growingio

growingio强大的地方在于无需埋点,就可以获取并分析全面、实时的用户行为数据,以优化产品体验,实现精益化运营。

3.应用雷达

仅针对iOS,查看App Store总榜和分类排名。查看产品在App Store 里的搜索度得分,评判ASO效果的标准之一。

4.百度移动统计

支持ios和android平台。另外,开发者在嵌入统计SDK后,可以对自家产品进行较为全面的监控,包括用户行为、用户属性、地域分布、终端分析等。

5.酷传

仅支持android平台应用监控。开发者可以查看应用在主流市场下载量、排名、评分评论、关键词排名等数据,还能系统地与同类竞品进行数据对比。

当然了,数据分析工具不止这5款,如果你们正在使用其他的,也是可以的。使用分析工具我们可以得到以下内容:

记录那些点击信息,包括没有与网站产生交互的信息;可直接生成链接的百分比,点击分布图和热力图;可统计用户的悬停,将用户潜在行为可视化

获取数据的方式其实多种多样,关键在于,作为运营人员要了解什么样的数据是重要的,对于这些数据的前后关联,是怎样的,这是一个联动的过程,不是一个单一的行为。

有了这些数据之后,我们该怎么去分析这些数据呢?哪些是可以为我们所用的额,又有哪些是可以剔除掉的。

二、如何分析现有的数据

从第三方数据分析工具或者自家的分析后台拿到这些数据后 ,该怎么去分析呢?我相信很多运营人在拿到数据时,都是没多少思路的。要么胡子眉毛一把抓,要么无从下手。这都是缺少分析思路的表现,需要宏观的方法论和微观的方法来指导。

在我们进行数据分析时经常会使用到方法论,这些方法论在我们进行数据分析时扮演宏观指导的角色。所以说在我们进行数据分析时,应该先找到适合自己的方法论进行指导。主要会用到的方法论:

1.PEST分析法:用于对宏观环境的分析,包括政治(political)、经济(economic)、社会(social)和技术(technological)四方面。

2.5W2H分析法:何因(Why)、何事(What)、何人(Who)、何时(When)、何地(Where)、如何就(How)、何价(How much)。

3.逻辑树分析法:把问题的所有子问题分层罗列。

4.4P营销理论:分析公司的整体营运情况,包括产品(product)、价格(price)、渠道(place)、促销(promotion)四大要素。

5.用户行为理论:主要用于网站流量分析,如回访者、新访者、流失率等,在众多指标中选择一些适用的。

6.AARRR(增长黑客的海盗法则):精益创业的重要框架,从获取(Acquisition)、激活(Activition)、留存(Retention)、变现(Revenue)和推荐(Referral)5个环节增长。

数据分析的方法论很多,这里不能一一列举;没有最好的方法论,只有最合适的。下面我详细介绍一下 AARRR 方法论,对于精益化运营、业务增长的问题,这个方法论非常契合。

对于互联网产品而言,用户具有明显的生命周期特征,我以一个APP为例阐述一下。

首先通过各种线上、线下的渠道获取新用户,下载安装APP。安装完APP后,通过运营手段激活用户;比如说首单免费、代金券、红包等方式。通过一系列的运营使部分用户留存下来,并且给企业带营收。在这个过程中,如果用户觉得这个产品不错,可能推荐给身边的人;或者通过红包等激励手段鼓励分享到朋友圈等等。需要注意的是,这5个环节并不是完全按照上面顺序来的;运营可以根据业务需要灵活应用。AARRR的五个环节都可以通过数据指标来衡量与分析,从而实现精益化运营的目的;每个环节的提升都可以有效增长业务。

在使用这些数据分析方法论要明确他们的作用:

●理顺分析思路,确保数据分析结构体系化。

●把问题分解成相关联的部分,并显示它们之间的关系。

●为后续数据分析的开展指引方向。

●确保分析结果的有效性及正确性。

再比如,我们在分析APP的数据维度时,会使用到趋势分析法,因为趋势分析是最简单、最基础,也是最常见的数据监测与数据分析方法。通常我们在数据分析产品中建立一张数据指标的线图或者柱状图,然后持续观察,重点关注异常值。在这个过程中,我们要选定第一关键指标,而不要被虚荣指标所迷惑。

如果我们将我们分析的APP的下载量作为第一关键指标,可能就会走偏;因为用户下载APP并不代表他使用了你的产品。在这种情况下,建议将日活跃用户作为第一关键指标,而且是启动并且执行了某个操作的用户才能算上去;这样的指标才有实际意义,运营人员要核心关注这类指标。

三、一款产品都关注哪些数据维度

我们都知道,运营人每天都会跟各种各样的数据打交道,那一款产品都有那些数据维度是我们经常会分析到的呢?

一款产品(特指APP)的数据指标体系一般都可以分为:用户规模与质量、渠道分析、参与度分析、功能分析以用户属性分析。

1.用户规模和质量的分析包括总用户数、新用户数、留存用户、转化率。用户规模和质量是APP分析最重要的维度,其指标也是相对其他维度最多,产品负责人要重点关注这个维度的指标。

2.渠道分析主要是分析各渠道在相关的渠道质量的变化和趋势,以科学评估渠道质量,优化渠道推广策略。渠道分析尤其要重视,因为现在移动应用市场刷量作弊是以及业内公开的秘密。渠道分析可以从多个维度的数据来对比不同渠道的效果,比如从新增用户、活跃用户、次日留存率、单次使用时长等角度对比不同来源的用户,这样就可以根据数据找到最适合自身的渠道,从而获得最好的推广效果。

3.参与度分析主要是分析用户的活跃度,分析的维度主要是包括启动次数分析、使用时长分析、访问页面分析和使用时间间隔分析。

4.功能分析主要包括:

功能活跃指标:某个功能的活跃用户,使用量情况;功能验证;对产品功能的数据分析,确保功能的取舍的合理性。

页面访问路径:用户从打开到离开应用整个过程中每一步骤的页面访问、跳转情况。页面访问路径是全量统计。通过路径分析得出用户类型的多样、用户使用产品目的的多样性,还原用户目的;通过路径分析,做用户细分;再通过用户细分,返回到产品的迭代

漏斗模型是用于分析产品中关键路径的转化率,以确定产品流程的设计是否合理,分析用户体验问题。用户转化率的分析,核心考察漏斗每一层的流失原因的分析。通过设置自定义事件以及漏斗来关注应用内每一步的转化率,以及转化率对收入水平的影响。通过分析事件和漏斗数据,可以针对性的优化转化率低的步骤,切实提高整体转化水平。

5.用户属性分析不管在我们的产品启动初期,还是战略的调整,分析用户画像都有着重要的意义。比如我们在产品设计前需要构建用户画像,指导设计、开发、运营;产品迭代过程需要收集用户数据,便于进行用户行为分析,与商业模式挂钩等等。

用户属性一般包括性别、年龄、职业、所在地、手机型号、使用网络情况。如果对用户的其他属性感兴趣的,可以到自的微信呢公众号后台或者其他诸如头条、uc等后台看用户属性都包含哪些维度。

以流量为中心、野蛮的运营时代已经结束,接下来的时代是以科学的数据作为依据,围绕着用户紧紧做精细化的运营时代。

作者:艺林小宇

来源:艺林小宇(cs-jy8)
 

搭建网站的流程/步骤

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

之前写过一些搭建网站的教程,都写的比较详细,所以内容量比较大,对于新人来说可能看起来很吃力。(大家可以到 【建站帮助中心】查看详细教程!)应朋友之邀,今天来帮大家理清一下思路。如果大家在搭建网站过程中遇到什么问题想问的,可以到建站问【建站问答】版块提问。

思路:域名+空间+程序=网站

1、注册一个域名

2、购买一个空间

3、将你的域名解析到空间

4、上传你的程序到空间并根据程序说明安装

5、大功告成

后言:想说些什么,但是发现建站要说有说不完的东西,怕收不回来,还是不说了,大家先通过这篇教程理清一下思路吧。然后再认真看看下面两篇教程:

1、搭建网站:一篇实例图文带你入门!

2、域名怎样解析/绑定到主机?

脑补更多建站知识,请移步【建站帮助中心】!
  查看全部
之前写过一些搭建网站的教程,都写的比较详细,所以内容量比较大,对于新人来说可能看起来很吃力。(大家可以到 【建站帮助中心】查看详细教程!)应朋友之邀,今天来帮大家理清一下思路。如果大家在搭建网站过程中遇到什么问题想问的,可以到建站问【建站问答】版块提问。

思路:域名+空间+程序=网站

1、注册一个域名

2、购买一个空间

3、将你的域名解析到空间

4、上传你的程序到空间并根据程序说明安装

5、大功告成

后言:想说些什么,但是发现建站要说有说不完的东西,怕收不回来,还是不说了,大家先通过这篇教程理清一下思路吧。然后再认真看看下面两篇教程:

1、搭建网站:一篇实例图文带你入门!

2、域名怎样解析/绑定到主机?

脑补更多建站知识,请移步【建站帮助中心】!
 

超赞!人气超高的HTML5特效排行榜TOP10

交流xgzx 发表了文章 • 0 个评论 • 36 次浏览 • 2017-01-07 03:42 • 来自相关话题

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票










百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独










简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字










百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上










全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天










什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆










虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿










祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?










“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒










整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久










长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设 查看全部
现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票

20170107034222.jpg


1483601575848.png

百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独

1483601575910.jpg


1483601575980.png

简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字

1483601575909.jpg


1483601575588.png

百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上

1483601575242.jpg


1483601575911.png

全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天

20170107034742.jpg


1483601575438.png

什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆

1483601575297.jpg


1483601575261.png

虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿

1483601575144.png


1483601575407.png

祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?

1483601575693.jpg


1483601575545.png

“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒

1483601575869.jpg


1483601575919.jpg

整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久

1483601575255.jpg


1483601575455.png

长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设

域名怎样解析/绑定到主机?

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

刚开始接触到网站建设的朋友,可能在建站的过程中还有很多不明白,不清楚 域名怎样绑定到空间 等等问题,那就让我们逐个攻破吧!

前面我们写了一篇搭建网站的基本流程 图文教程,再加上 网站如何绑定自己的域名 这篇教程,就可以完整搭建一个网站了。我相信朋友们只要认真读过这两篇图文教程,跟着做了,并且有问题在下方提问解决了,搭建网站,你就算是入门了!

如果遇到其它问题欢迎到建站问【建站问答】板块提问,我们会耐心解答您的问题,同时欢迎广大站长老司机,一起来做这一件有意义的事情,帮助更多的建站新人,在建站问,留下你的足迹。

首先我们要明确,域名和空间是两个毫无联系的东西,但是都是网站需要的东西。我们要实现访问域名就能够在浏览器中获取你空间中的数据,也就是实现访问域名就能够访问到你的网站,那么我们肯定需要将它们联系起来,那么就是我们接下来要做的事情了。

教程开始:

首先你要注册一个自己的域名,这里演示我就用我在 爱名网 注册的一个域名(u84.cc);空间的话,我就用 Hostinger免费空间 ,因为今天正好遇到一个朋友不清楚如何把自己的域名绑定到Hostinger免费空间,这里就顺带了。

1、首先我们要明确,把域名和空间绑定起来是需要空间商提供一个ip地址 添加A记录,或者提供一个二级域名供添加CNAME记录/转发。

2、我们先登录Hostinger,进入后台找到官方提供给我们的绑定信息,经过一番寻找,终于被我找到了(ip:31.170.166.227)。其它主机都大同小异,仔细一点就能找到!(在此之前,我已经开通了这个免费空间,并且在空间后台添加了我的域名)





3、我们再登录爱名网,进入域名面板,找到域名,点击“解析”,接下来的事情就是关键了。





4、点击域名解析的高级设置,然后我们一一讲解这些信息该怎么填,填完后点击“添加一条”,即可。

1) 主机记录:我们这里就填 www,这个根据自己的需要,不再赘述。

主机记录就是域名前缀,常见用法有:

www: 解析后的域名为 www.u84.cc

@:直接解析主域名 u84.cc

*:泛解析,匹配其他所有域名 *.u84.cc

(最高只支持2级子域名级别,例如 xxx.xxx.u84.cc )

2) 记录类型:我们这里选A记录

要指向空间商提供的 IP 地址,选择「类型 A」,要指向一个域名,选择「类型 CNAME」A记录: 地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录。

CNAME:如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录。

MX:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录。

NS: 域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录。

TXT:在这里可以填写任何东西,长度限制255。绝大多数的TXT记录是用来做SPF记录(反垃圾邮件)。

3) IP地址/主机名:我们这里填我们刚找到的ip地址:31.170.166.227

最常见的是将空间商提供的「IP地址」填写在这里各类型的IP地址/主机名 一般写法如下:

A记录:填写您服务器 IP,如果您不知道,请咨询您的空间商

CNAME记录:填写空间商给您提供的域名,例如:xxxx.com

MX记录:填写您邮件服务器的IP地址或企业邮局给您提供的域名,如果您不知道,请咨询您的邮件服务提供商

TXT记录:一般用于 Google、QQ等企业邮箱的反垃圾邮件设置

NS记录:不常用。系统默认添加的两个NS记录请不要修改。NS向下授权,填写dns域名,例如:ns1.22.cn

4) 优先级:忽略

该优先级只针对MX记录,优先级数字设置越小,优先级越高.同一个域名的有两条不同优先级的mx的记录,通常是用优先级高的。

当优先级高的机器不能使用时,优先级低的就可以起到临时备份作用,代收邮件和转发。

当优先级高的机器正常时,低级别的会尝试把信件转发给优先级高的服务器。

5) 线路类型:选择通用即可

若空间商只提供了一个 IP 地址或域名,选择「通用」就可以了让指定线路的用户访问这个IP,常见用法有:

通用:必须添加,否则只有单独指定的线路才能访问您的网站。如果双线解析,建议「通用」线路填写「电信IP」

联通:单独为「联通用户」指定服务器 IP,其他用户依然访问「通用」










6} 现在我们在浏览器地址栏中输入我们解析到空间的域名(www.u84.cc),然后访问。看看是否成功解析。




看到上面的界面说明你已经成功把域名绑定在了空间上,已经能够通过域名访问该网站了。

温馨提示:

1、由于Hostinger空间的要求,我开通免费空间时在空间的控制面板添加了www.u84.cc 这个域名,所以前面就没有再赘述了。
 
2、如果你的空间控制面板上只提供了二级域名的话,只需要把“记录类型”改为CNAME,“IP地址/主机名”改为它提供的二级域名即可。

简而言之:

1、在你的空间控制面板上添加你要绑定的域名;

2、把你的域名解析到空间所提供的ip/二级域名上;

3、成功访问,大功告成!

如果大家在 空间怎样绑定域名 这个问题上还有疑问的话,欢迎在下方留言,老司机们会为大家免费解答,提供帮助!

---------------------

相关推荐:

1、关于域名,唠唠嗑。

2、注册一枚网站域名

3、带www与不带www的域名怎样解析到网站好?

4、网站域名301重定向怎么做?

5、国别域名和境外域名可以提交备案吗?

更多建站问题,请移步【建站帮助中心】!
  查看全部
ybk.jpg

刚开始接触到网站建设的朋友,可能在建站的过程中还有很多不明白,不清楚 域名怎样绑定到空间 等等问题,那就让我们逐个攻破吧!

前面我们写了一篇搭建网站的基本流程 图文教程,再加上 网站如何绑定自己的域名 这篇教程,就可以完整搭建一个网站了。我相信朋友们只要认真读过这两篇图文教程,跟着做了,并且有问题在下方提问解决了,搭建网站,你就算是入门了!

如果遇到其它问题欢迎到建站问【建站问答】板块提问,我们会耐心解答您的问题,同时欢迎广大站长老司机,一起来做这一件有意义的事情,帮助更多的建站新人,在建站问,留下你的足迹。

首先我们要明确,域名和空间是两个毫无联系的东西,但是都是网站需要的东西。我们要实现访问域名就能够在浏览器中获取你空间中的数据,也就是实现访问域名就能够访问到你的网站,那么我们肯定需要将它们联系起来,那么就是我们接下来要做的事情了。

教程开始

首先你要注册一个自己的域名,这里演示我就用我在 爱名网 注册的一个域名(u84.cc);空间的话,我就用 Hostinger免费空间 ,因为今天正好遇到一个朋友不清楚如何把自己的域名绑定到Hostinger免费空间,这里就顺带了。

1、首先我们要明确,把域名和空间绑定起来是需要空间商提供一个ip地址 添加A记录,或者提供一个二级域名供添加CNAME记录/转发。

2、我们先登录Hostinger,进入后台找到官方提供给我们的绑定信息,经过一番寻找,终于被我找到了(ip:31.170.166.227)。其它主机都大同小异,仔细一点就能找到!(在此之前,我已经开通了这个免费空间,并且在空间后台添加了我的域名)

0170106141753.jpg

3、我们再登录爱名网,进入域名面板,找到域名,点击“解析”,接下来的事情就是关键了。

20170106143617.jpg

4、点击域名解析的高级设置,然后我们一一讲解这些信息该怎么填,填完后点击“添加一条”,即可。

1) 主机记录:我们这里就填 www,这个根据自己的需要,不再赘述。

主机记录就是域名前缀,常见用法有:

www: 解析后的域名为 www.u84.cc

@:直接解析主域名 u84.cc

*:泛解析,匹配其他所有域名 *.u84.cc

最高只支持2级子域名级别,例如 xxx.xxx.u84.cc

2) 记录类型:我们这里选A记录

要指向空间商提供的 IP 地址,选择「类型 A」,要指向一个域名,选择「类型 CNAME」A记录: 地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录。

CNAME:如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录。

MX:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录。

NS: 域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录。

TXT:在这里可以填写任何东西,长度限制255。绝大多数的TXT记录是用来做SPF记录(反垃圾邮件)。

3) IP地址/主机名:我们这里填我们刚找到的ip地址:31.170.166.227

最常见的是将空间商提供的「IP地址」填写在这里各类型的IP地址/主机名 一般写法如下:

A记录:填写您服务器 IP,如果您不知道,请咨询您的空间商

CNAME记录:填写空间商给您提供的域名,例如:xxxx.com

MX记录:填写您邮件服务器的IP地址或企业邮局给您提供的域名,如果您不知道,请咨询您的邮件服务提供商

TXT记录:一般用于 Google、QQ等企业邮箱的反垃圾邮件设置

NS记录:不常用。系统默认添加的两个NS记录请不要修改。NS向下授权,填写dns域名,例如:ns1.22.cn

4) 优先级:忽略

该优先级只针对MX记录,优先级数字设置越小,优先级越高.同一个域名的有两条不同优先级的mx的记录,通常是用优先级高的。

当优先级高的机器不能使用时,优先级低的就可以起到临时备份作用,代收邮件和转发。

当优先级高的机器正常时,低级别的会尝试把信件转发给优先级高的服务器。

5) 线路类型:选择通用即可

若空间商只提供了一个 IP 地址或域名,选择「通用」就可以了让指定线路的用户访问这个IP,常见用法有:

通用:必须添加,否则只有单独指定的线路才能访问您的网站。如果双线解析,建议「通用」线路填写「电信IP」

联通:单独为「联通用户」指定服务器 IP,其他用户依然访问「通用」

20170106144018.jpg


20170106160443.jpg

6} 现在我们在浏览器地址栏中输入我们解析到空间的域名(www.u84.cc),然后访问。看看是否成功解析。
20170106160953.jpg

看到上面的界面说明你已经成功把域名绑定在了空间上,已经能够通过域名访问该网站了。

温馨提示

1、由于Hostinger空间的要求,我开通免费空间时在空间的控制面板添加了www.u84.cc 这个域名,所以前面就没有再赘述了。
 
2、如果你的空间控制面板上只提供了二级域名的话,只需要把“记录类型”改为CNAME,“IP地址/主机名”改为它提供的二级域名即可。

简而言之

1、在你的空间控制面板上添加你要绑定的域名;

2、把你的域名解析到空间所提供的ip/二级域名上;

3、成功访问,大功告成!

如果大家在 空间怎样绑定域名 这个问题上还有疑问的话,欢迎在下方留言,老司机们会为大家免费解答,提供帮助!

---------------------

相关推荐

1、关于域名,唠唠嗑。

2、注册一枚网站域名

3、带www与不带www的域名怎样解析到网站好?

4、网站域名301重定向怎么做?

5、国别域名和境外域名可以提交备案吗?

更多建站问题,请移步【建站帮助中心】!
 

减少认知过载:塑造更好的用户体验

交流adminjzw 发表了文章 • 2 个评论 • 78 次浏览 • 2017-01-05 05:18 • 来自相关话题

设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读:

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载:

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆:

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:





搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文:

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源:

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用:

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因:

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作:

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!





(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案:

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。)





让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。





(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案:

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。





(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。





(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。





(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。





(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案:

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。





(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。





许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。





(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法:

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。





(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。





(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面:

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。





(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案:

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。





(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。





任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。





(Image: Slack)

6.不易寻找到的页面:

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。





(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。





(Image: Mojo Yogurt)

解决方法:

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。





1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。





(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。





比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。





(右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性:

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。





SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案:

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。





(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。





附言:

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
  查看全部
设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:

953085.jpg

搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!

953101.jpg

(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。

953102.jpg

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。

953103.gif

(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

953104.jpg

(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

953106.jpg

(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。

953107.jpg

(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

953108.jpg

(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。

953109.jpg

(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。

953110.jpg

许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。

953111.jpg

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

953112.jpg

(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

953113.jpg

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。

953114.jpg

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

953115.jpg

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

953116.jpg

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。

953117.jpg

(Image: Slack)

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

953119.jpg

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。

953120.jpg

(Image: Mojo Yogurt)

解决方法

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

953121.jpg

1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

953129.jpg

(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。

953135.jpg

比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。

953138.jpg

右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。

953144.jpg

SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。

953146.jpg

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。

953147.jpg

附言

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
 

一个菜鸟从零学做网站的经历

回复

交流chat 发起了帖子 • 1 人关注 • 0 个回复 • 52 次浏览 • 2017-01-01 13:16 • 来自相关话题

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

交流wtyg 发表了文章 • 6 个评论 • 133 次浏览 • 2016-12-26 00:49 • 来自相关话题

建站新手在使用AndFTP时可能会遇到一些问题,或者不知道怎么用,受网友之托,今天出一个AndFTP使用教程,虽然对于已经会建站的朋友来说,这些很简单,很简单,但是再简单的东西,如果没有了解过,可能还是会出现问题,所以这篇教程就有了写出来的理由,大牛前辈可以忽略,但欢迎纠正,给后者留下更正确的经验借鉴,在此谢谢路过的你们。

还记得几年前,自己没有电脑,也是通过andftp操作网站数据的,比如说:上传网站程序、下载网站备份、有必要时,把网站文件下载到本地,然后用编辑器做一些修改。这些都是可以的。

从此再也不用担心建站没电脑了,手机照样也能进行管理,但是应该没有电脑方便。好了,教程开始:

1、百度搜索andftp




2、点击“普通下载”即可




3、点击普通下载,百度推崇人性化,这一点在用“百度手机助手”,下载软件时可一点没体现出来,但是也情有可原,我们继续吧




4、下载好后,安装




5、打开AndFTP软件,点击顶部加号图标




6、进入连接信息填写界面,在这个界面也就是关键了,信息填写不正确,那肯定是前功尽弃的,这里我们详细说一下应该怎么填写:

1)首先你要从你的虚拟主机管理面板获取3样信息:1.ftp地址(域名/ip地址)、2.ftp用户名、3.ftp密码,这些信息虚拟主机管理界面都会提供,如果找不到可以联系虚拟主机客服咨询,或者联系 建站问 客服求助,因为很多主机商的控制面板不同,所以这里就不给大家演示怎么找了,大同小异,我都觉得我写的这教程太啰嗦,请大家见谅,如果有没明白的,可以在下方回复,我们会在0-48小时内回复您。

2)域名:即是上面叫你找的ftp地址

3)类型:默认即可

4)端口:默认即可

5)用户名:即是上面叫你找的ftp用户名

6)密码:即是上面叫你找的ftp密码

7)下面的基本可以默认,续传支持 建议打开

8)点击保存后,会弹出对话框,叫你输入“将被保存的FTP设置名称”,这个主要是考虑你网站多了,添加的FTP项目多了,好分辨哪个是哪个,所以你自己随便取名吧




7、添加好后,他会自动跳转到点击连接的界面




8、点击屏幕中间的那个FTP图标,即可连接到你的虚拟主机根目录,然后就可以进行一些你需要的操作了。

后言:如果大家在此过程中遇到什么问题,欢迎在建站问【建站问答】板块提问,或者在下方提问,会有老司机告诉你怎么办,相信我,呵呵。

更多建站问题,可以到 建站帮助中心 查阅相应教程,如果未找到,也可以联系官方客服,如果有必要,我们会及时出相应的教程,感谢大家对建站问的支持!

相关教程:

1、8uftp使用入门教程
  查看全部
andftp.jpg

建站新手在使用AndFTP时可能会遇到一些问题,或者不知道怎么用,受网友之托,今天出一个AndFTP使用教程,虽然对于已经会建站的朋友来说,这些很简单,很简单,但是再简单的东西,如果没有了解过,可能还是会出现问题,所以这篇教程就有了写出来的理由,大牛前辈可以忽略,但欢迎纠正,给后者留下更正确的经验借鉴,在此谢谢路过的你们。

还记得几年前,自己没有电脑,也是通过andftp操作网站数据的,比如说:上传网站程序、下载网站备份、有必要时,把网站文件下载到本地,然后用编辑器做一些修改。这些都是可以的。

从此再也不用担心建站没电脑了,手机照样也能进行管理,但是应该没有电脑方便。好了,教程开始

1、百度搜索andftp
Screenshot_2016-12-26-00-24-16.jpg

2、点击“普通下载”即可
Screenshot_2016-12-26-00-28-37.jpg

3、点击普通下载,百度推崇人性化,这一点在用“百度手机助手”,下载软件时可一点没体现出来,但是也情有可原,我们继续吧
Screenshot_2016-12-26-00-28-49.jpg

4、下载好后,安装
Screenshot_2016-12-26-00-29-07.jpg

5、打开AndFTP软件,点击顶部加号图标
Screenshot_2016-12-26-00-29-44.jpg

6、进入连接信息填写界面,在这个界面也就是关键了,信息填写不正确,那肯定是前功尽弃的,这里我们详细说一下应该怎么填写

1)首先你要从你的虚拟主机管理面板获取3样信息:1.ftp地址(域名/ip地址)、2.ftp用户名、3.ftp密码,这些信息虚拟主机管理界面都会提供,如果找不到可以联系虚拟主机客服咨询,或者联系 建站问 客服求助,因为很多主机商的控制面板不同,所以这里就不给大家演示怎么找了,大同小异,我都觉得我写的这教程太啰嗦,请大家见谅,如果有没明白的,可以在下方回复,我们会在0-48小时内回复您。

2)域名:即是上面叫你找的ftp地址

3)类型:默认即可

4)端口:默认即可

5)用户名:即是上面叫你找的ftp用户名

6)密码:即是上面叫你找的ftp密码

7)下面的基本可以默认,续传支持 建议打开

8)点击保存后,会弹出对话框,叫你输入“将被保存的FTP设置名称”,这个主要是考虑你网站多了,添加的FTP项目多了,好分辨哪个是哪个,所以你自己随便取名吧
Screenshot_2016-12-26-00-30-28.jpg

7、添加好后,他会自动跳转到点击连接的界面
Screenshot_2016-12-26-01-54-16.jpg

8、点击屏幕中间的那个FTP图标,即可连接到你的虚拟主机根目录,然后就可以进行一些你需要的操作了。

后言:如果大家在此过程中遇到什么问题,欢迎在建站问【建站问答】板块提问,或者在下方提问,会有老司机告诉你怎么办,相信我,呵呵。

更多建站问题,可以到 建站帮助中心 查阅相应教程,如果未找到,也可以联系官方客服,如果有必要,我们会及时出相应的教程,感谢大家对建站问的支持!

相关教程:

1、8uftp使用入门教程
 

关于域名,唠唠嗑。

交流adminjzw 发表了文章 • 0 个评论 • 154 次浏览 • 2016-12-23 00:06 • 来自相关话题

对于初识建站的朋友,肯定对这个词一脸懵逼,很正常,没接触过的东西谁知道是啥玩意儿?

但是它是现代互联网网站不可或缺的一样东西(网站的构成要素),人们可以通过它找到相应的网站,而且它在全世界是独一无二的,就像世界上没有完全相同的两片树叶。打断,

在编写这篇文章的时候,我就在想怎样讲这个域名,我觉得完全没有必要,因为百度/360/搜狗等,随便一搜,各种专业解释,专业的相关介绍一大堆,如果大家想详细了解可以去搜一下。但是我还是想写点东西,至少是从非专业的角度给大家说说我认识的域名。

一、域名的作用:相对于IP地址,更便于人们记忆。

一个东西没有它的作用,有何用,况且域名对于网站还是那么重要的东西,这儿又废话了。

在没有域名以前,我们都是通过IP地址来访问某个网站,你说ip那么长一串数字,多难记呀!(比如:建站问的ip:125.629.547.157,建站问的网址:www.jianzhanwen.com ,你说哪个更便于记忆?)我相信这么一举例,大家都懂了。但并不是说域名取代了ip地址,正确的说 应该是域名作为了 ip地址 的面具,对于大众来说:记忆起来更方便,实质上起作用的还是ip地址。如若要说到ip地址和域名之间的关系,这就会涉及到DNS。

二、这是几级域名?

1、今天在 站长群 里,想找几个友情链接,刚把 www.zhange5.com  这个域名一发,有位朋友很快的说,这是三级域名,如果对这方面比较了解的朋友就知道它只是个二级域名。

2、包括曾经遇到一位老师,在讲解这个知识点的时候,还是搞错了。这里并没有啥意思,毕竟人无完人。所以觉得在这个知识上还是有必要和大家唠唠嗑,如果我哪里说错了,欢迎指出来,非常感谢!

咱们今天就拿建站问的域名说事儿吧,本来想拿xxx.yyy,怕把新人搞糊涂了。

一级域名:jianzhanwen.com

二级域名:2ji.jianzhanwen.com

三级域名:3ji.2ji.jianzhanwen.com

对!没错,估计你已经看出来规律了。

但是,有这类后缀的域名:.com.cn ,那假如注册一个 jzw.com.cn,这算几级域名呢?我比较赞成这种说法:“这是.cn 顶级域名下的商业类2级域名”,所以它是二级域名。

因此得出结论:无论你后缀是啥,我只看点的数量。

三、域名的后缀

随着互联网的发展,域名的花样在这几年花样百出,我个人还是比较推崇主流(.com/.cn/.net等),虽然手上也有几个非主流,但是个人都觉得都很有意义。详细了解>>

最后,终于还是写完了这篇文章,虽然写法有点不科学,但是希望大家读起来不是太枯燥,有问题可以在下方回复交流。本来还想在这篇文章里写点什么,但是想到很多东西在前面的文章里都说过,所以就没必要再写了,下面给几条相关文章的链接,想多了解一点可以通过链接过去看看。

相关文章:

1、注册一枚网站域名

2、国别域名和境外域名可以提交备案吗?

3、带www与不带www的域名怎样解析到网站好?

4、【大拿分享】浅谈网站换域名注意事项
  查看全部
ym.jpg

对于初识建站的朋友,肯定对这个词一脸懵逼,很正常,没接触过的东西谁知道是啥玩意儿?

但是它是现代互联网网站不可或缺的一样东西(网站的构成要素),人们可以通过它找到相应的网站,而且它在全世界是独一无二的,就像世界上没有完全相同的两片树叶。打断,

在编写这篇文章的时候,我就在想怎样讲这个域名,我觉得完全没有必要,因为百度/360/搜狗等,随便一搜,各种专业解释,专业的相关介绍一大堆,如果大家想详细了解可以去搜一下。但是我还是想写点东西,至少是从非专业的角度给大家说说我认识的域名。

一、域名的作用:相对于IP地址,更便于人们记忆。

一个东西没有它的作用,有何用,况且域名对于网站还是那么重要的东西,这儿又废话了。

在没有域名以前,我们都是通过IP地址来访问某个网站,你说ip那么长一串数字,多难记呀!(比如:建站问的ip:125.629.547.157,建站问的网址:www.jianzhanwen.com ,你说哪个更便于记忆?)我相信这么一举例,大家都懂了。但并不是说域名取代了ip地址,正确的说 应该是域名作为了 ip地址 的面具,对于大众来说:记忆起来更方便,实质上起作用的还是ip地址。如若要说到ip地址和域名之间的关系,这就会涉及到DNS。

二、这是几级域名?

1、今天在 站长群 里,想找几个友情链接,刚把 www.zhange5.com  这个域名一发,有位朋友很快的说,这是三级域名,如果对这方面比较了解的朋友就知道它只是个二级域名。

2、包括曾经遇到一位老师,在讲解这个知识点的时候,还是搞错了。这里并没有啥意思,毕竟人无完人。所以觉得在这个知识上还是有必要和大家唠唠嗑,如果我哪里说错了,欢迎指出来,非常感谢!

咱们今天就拿建站问的域名说事儿吧,本来想拿xxx.yyy,怕把新人搞糊涂了。

一级域名:jianzhanwen.com

二级域名:2ji.jianzhanwen.com

三级域名:3ji.2ji.jianzhanwen.com

对!没错,估计你已经看出来规律了。

但是,有这类后缀的域名:.com.cn ,那假如注册一个 jzw.com.cn,这算几级域名呢?我比较赞成这种说法:“这是.cn 顶级域名下的商业类2级域名”,所以它是二级域名。

因此得出结论:无论你后缀是啥,我只看点的数量。

三、域名的后缀

随着互联网的发展,域名的花样在这几年花样百出,我个人还是比较推崇主流(.com/.cn/.net等),虽然手上也有几个非主流,但是个人都觉得都很有意义。详细了解>>

最后,终于还是写完了这篇文章,虽然写法有点不科学,但是希望大家读起来不是太枯燥,有问题可以在下方回复交流。本来还想在这篇文章里写点什么,但是想到很多东西在前面的文章里都说过,所以就没必要再写了,下面给几条相关文章的链接,想多了解一点可以通过链接过去看看。

相关文章:

1、注册一枚网站域名

2、国别域名和境外域名可以提交备案吗?

3、带www与不带www的域名怎样解析到网站好?

4、【大拿分享】浅谈网站换域名注意事项
 

wordpress设置301重定向方法

回复

交流guichen 发起了帖子 • 1 人关注 • 0 个回复 • 89 次浏览 • 2016-12-20 03:40 • 来自相关话题

【科普】搜索引擎的工作原理

交流adminjzw 发表了文章 • 0 个评论 • 71 次浏览 • 2016-12-20 01:58 • 来自相关话题

有人说,搜索引擎技术似乎不需要本地化,这一看就是彻底不懂这个领域的人讲的。当然,实话说,如果有人说,google在中文本地化方面做得非常好,我是可以部分同意的,同意的比例可能会比google工程师少一些。但我相信google工程师也会告诉你,搜索引擎是需要本地化的。

今天写篇科普文,讲讲搜索引擎的技术机理和市场竞争的一些特点。当然,作为从事或有兴趣从事流量运营的朋友,是可以用另一个角度去理解本文。

搜索引擎的核心技术架构,大体包括以下三块:第一,是蜘蛛/爬虫技术;第二,是索引技术;第三是查询展现的技术; 当然,我不是搜索引擎的架构师,我只能用比较粗浅的方式来做一个结构的切分。

1、 蜘蛛,也叫爬虫,是将互联网的信息,抓取并存储的一种技术实现。

搜索引擎的信息收录,很多不明所以的人会有很多误解,以为是付费收录,或者有什么其他特殊的提交技巧,其实并不是,搜索引擎通过互联网一些公开知名的网站,抓取内容,并分析其中的链接,然后有选择的抓取链接里的内容,然后再分析其中的链接,以此类推,通过有限的入口,基于彼此链接,形成强大的信息抓取能力。

有些搜索引擎本身也有链接提交入口,但基本上,不是主要的收录入口,不过作为创业者,建议了解一下相关信息,百度,google都有站长平台和管理后台,这里很多内容是需要非常非常认真的对待的。

反过来说,在这样的原理下,一个网站,只有被其他网站所链接,才有机会被搜索引擎抓取。如果这个网站没有外部链接,或者外部链接在搜索引擎中被认为是垃圾或无效链接,那么搜索引擎可能就不抓取他的页面。

分析和判断搜索引擎是否抓取了你的页面,或者什么时候抓取你的页面,只能通过服务器上的访问日志来查询,如果是cdn就比较麻烦。 而基于网站嵌入代码的方式,不论是cnzz,百度统计,还是google analytics,都无法获得蜘蛛抓取的信息,因为这些信息不会触发这些代码的执行。

一个比较推荐的日志分析软件是awstats。

在十多年前,分析百度蜘蛛抓取轨迹和更新策略,是很多草根站长每日必做的功课,比如现在身价几十亿的知名80后上市公司董事长,当年在某站长论坛就是以此准确的分析判断而封神,很年轻的时候就已经是站长圈的一代偶像。

但关于蜘蛛的话题,并不只基于链接抓取这么简单,延伸来说

第一,网站拥有者可以选择是否允许蜘蛛抓取,有一个robots.txt的文件是来控制这个的。

一个经典案例是 https://www.taobao.com/robots.txt

你会看到,淘宝至今仍有关键目录不对百度蜘蛛开放,但对google开放。

另一个经典案例是 http://www.baidu.com/robots.txt

你看出什么了?你可能什么都没看出来,我提醒一句,百度实质上全面禁止了360的蜘蛛抓取。

但这个协议只是约定俗成,实际上并没有强制约束力,所以,你们猜猜,360遵守了百度的蜘蛛抓取禁止么?

第二,最早抓取是基于网站彼此的链接为入口,但实际上,并不能肯定的说,有可能存在其他抓取入口,比如说,

客户端插件或浏览器, 免费网站统计系统的嵌入式代码。

会不会成为蜘蛛抓取的入口,我只能说,有这个可能。

所以我跟很多创业者说,中国做网站,放百度统计,海外做网站,放google analytics,是否会增加搜索引擎对你网站的收录?我只能说猜测,有这个可能。

第三,无法被抓取的信息

有些网站的内容链接,用一些javascript特殊效果完成,比如浮动的菜单等等,这种连接,有可能搜索引擎的蜘蛛程序不识别,当然,我只是说有可能,现在搜索引擎比以前聪明,十多年前很多特效链接是不识别的,现在会好一些。

需要登录,需要注册才能访问的页面,蜘蛛是无法进入的,也就是无法收录。

有些网站会给搜索特殊页面,就是蜘蛛来能看到内容(蜘蛛访问会有特殊的客户端标记,服务端识别和处理并不复杂),人来了要登录才能看,但这样做其实是违反了收录协议(需要人和蜘蛛看到的同样的内容,这是绝大部分搜索引擎的收录协议),有可能遭到搜索引擎处罚。

所以一个社区要想通过搜索引擎带来免费用户,必须让访客能看到内容,哪怕是部分内容。

带很多复杂参数的内容链接url,有可能被蜘蛛当作重复页面,拒绝收录。

很多动态页面是一个脚本程序带参数体现的,但蜘蛛发现同一个脚本有大量参数的网页,有时候会给该网页的价值评估带来困扰,蜘蛛可能会认为这个网页是重复页面,而拒绝收录。还是那句话,随着技术的发展,蜘蛛对动态脚本的参数识别度有了很大进步,现在基本上可以不用考虑这个问题。

但这个催生了一个技术,叫做伪静态化,通过对web服务端做配置,让用户访问的页面,url格式看上去是一个静态页,其实后面是一个正则匹配,实际执行的是一个动态脚本。

很多社区论坛为了追求免费搜索来路,做了伪静态化处理,在十多年前,几乎是草根站长必备技能之一。

爬虫技术暂时说到这里,但是这里强调一下,有外链,不代表搜索蜘蛛会来爬取,搜索蜘蛛爬取了,不代表搜索引擎会收录;搜索引擎收录了,不代表用户可以搜索的到;

site语法是检查一个网站收录数的最基本搜索语法,我开始以为是abc的常识,直到在新加坡做一些创业培训后交流才发现,大部分刚进入这个行业的人,或者有兴趣进入这个行业的人,对此并不了解。

一个范例,百度搜索一下 site:4399.com

2、索引系统

蜘蛛抓取的是网页的内容,那么要想让用户快速的通过关键词搜索到这个网页,就必须对网页做关键词的索引,从而提升查询效率,简单说就是,把网页的每个关键词提取出来,并针对这些关键词在网页中的出现频率,位置,特殊标记等诸多因素,给予不同的权值标定,然后,存储到索引库中。

那么问题来了,什么是关键词。

英文来说,比如 this is a book,中文,这是一本书。

英文很自然是四个单词,空格是天然的分词符,中文呢?你不能把一句话当作关键词吧(如果把一句话当作关键词,那么你搜索其中部分信息的时候,是无法索引命中的,比如搜索一本书,就搜索不出来了,而这显然是不符合搜索引擎诉求的)。所以要分词。

最开始,最简单的思路是,每个字都切开,这个以前叫字索引,每个字建立索引,并标注位置,如果用户搜索一个关键词,也是把关键词拆成字来搜索再组合结果,但这样问题就来了。

比如搜索关键词 “海鲜”的时候,会出现结果,上海鲜花,这显然不是应该的搜索结果。

比如搜索关键词 “和服”的时候,会出现结果,交换机和服务器。

这些都是蛮荒期的google也不能幸免的问题。

到后来有个梗,别笑,这些都是血泪梗,半夜电话过来,说网监通过搜索发现你社区有淫秽内容要求必须删除,否则就关闭你的网站,夜半惊醒认真排查,百思不得其解,苦苦哀求提供信息线索,最后发现,有人发了一条小广告,“求购二十四口交换机” 。 还有,涉嫌政治敏感,查到最后 “提供三台独立服务器”,  看出其中敏感词了没?你说冤不冤。 这两个故事可能并不是真的,因为都是网上看到的,但是我想说,类似这样的事情真的有,并非都是空穴来风。

所以,分词,是亚洲很多语言需要额外处理的事情,而西方语言不存在的问题。

但分词不是说说那么简单,比如几点,1:如何识别人名?2、互联网新词如何识别?比如 “不明觉厉”。3、中英混排的坑,比如QQ表情。

做一个分词系统,说到底也不难,但是要做一个自动学习,与时俱进,又能高效率灵活的分词引擎,还是很有技术难度的。  当然,这方面我不是专家,不敢妄言了。

现在机器学习技术发达了,特别是google在深度学习领域拥有领先优势,以前很多通过人工做标定,做分类的工作可以交给算法完成,从某种意义来说,本地化的工作可以让机器学习去完成;未来,也许深度学习技术可以自己学习掌握本地化的技巧。 但我想说两点,第一,从搜索引擎发展历史看,在深度学习技术还没成熟的情况下,本地化的工作是非常重要的,也是很重要的决定竞争成败的要素;第二,即便现在深度学习已经很强大,基于当地语言的人工参与,标定,测试,反馈,一些本地化的工作依然对深度学习的效率和效果拥有不可替代的作用。

索引系统除了分词之外,还有一些要点,比如实时索引,因为一次索引库的更新是个大动静,一般网站运营者知道,自己网站内容更新后,需要等索引库下一次更新才能看到效果,而且索引库针对不同权重的网站内容,更新的频次也不太一样。 但诸如一些高优先的资讯网站,以及新闻搜索,索引库是可以做到近似实时索引的,所以我们在新闻搜索里,几分钟前的信息就已经可以搜索到了。

我以前经常吐槽一个事情,我在百度空间发表的文章,每次都是google率先索引收录,当时他们的解释是,猜测是因为很多人通过google阅读器订阅我的博客,而google阅读器很可能是google快速索引的入口。(然并卵,百度空间已经没有了,google阅读器也没有了。)

索引系统的权值体系,是所有SEOER们最关心的问题,他们经常通过不同方式组合策略,观察搜索引擎的收录,排名,来路情况,然后通过对比分析整理出相关的策略,这玩意说出来可以开很长一篇了,但今天就不提了。

但我说一个事实,很多外面的公司,做SEO的,会误认为百度里面的人熟悉这里的门道和规律,很多人高价去挖百度的搜索产品经理和技术工程师去做SEO,结果,呵呵,呵呵。 而外面那些草根创业者,有些善于此道的,真的比百度的人还清楚,搜索权值的影响关系,和更新频次等等,比如前面说到的,身价几十亿的那个80后创业者。

基于结果反推策略,比身在其中却不识全局的参与者,更能找到系统的关键点,有意思不。

3、查询展现

用户在浏览器或者在手机客户端输入一个关键词,或者几个关键词,甚至一句话,这个在服务端,应答程序获取后处理步骤如下

第一步,会检查最近时间有没有人搜索过同样的关键词,如果存在这样的缓存,最快的处理是将这块缓存提供给你,这样查询效率最高,对后端负载压力最低。

第二步,发现这个输入查询最近没有搜索,或者有其他条件的原因必须更新结果,那么会将这个用户输入的词,进行分词,没错,如果不止一个关键词,或者是一句话的情况下,应答程序会又一次分词,将搜索的查询拆成几个不同的关键词。

第三步,将切分后的关键词分发到查询系统中,查询系统会去索引库查询,索引库是个庞大的分布式系统,先分析这个关键词属于哪一块哪一台服务器,索引是一种有序的数据组合,我们用可以用近似二分法的方式思考,不管数据规模多大,你用二分法去查找一个结果,查询频次是log2(N),这个就保证了海量数据下,查询一个关键词是非常快非常快的。 当然,实际情况会比二分法复杂很多,这样说比较容易理解而已,再复杂些不是我不告诉大家,是我自己都不是很清楚呢。

第四步,不同关键词的查询结果(只是按权值排序的部分顶部结果,绝对不是全部结果),基于权值倒序,会再汇总在一起,然后把共同命中的部分反馈回来,并做最后的权值排序。

记住,搜索引擎绝对不会返回所有结果,这个开销谁都受不了,百度也不行,google也不行,翻页都是有限制的。

再记住,如果你多个关键词里有多个不同品类冷门词,搜索引擎有可能会舍弃其中一个冷门词,因为汇总数据很可能不包含共同结果。搜索技术不要神话,这样的范例偶尔会出现。

这是三大部分,多说一点,其实还有第四部分。

用户点击行为采集和反馈部分

基于用户的翻页,点击分布,对搜索结果的优劣做判定,并对权值做调整,但这个早期搜索引擎是没有的,后面才有,所以暂时不列为必备的三大块。

此外,一些对搜索优化的机器学习策略,对易混词识别,同音词识别等等,相当部分也都基于用户行为反馈进行,这是后话,这里不展开。

关于第四部分,我以前说过一个词,点击提权,我说这个词价值千金,我猜很多人并没理解。没理解就好,要不我要被一些同行骂死了。

以上是单指搜索引擎的工作原理,和一些技术逻辑,当然,只是入门级的解读,毕竟再深入就不是我能讲解的了。

但搜索引擎的本地化,并不局限于搜索技术的本地化。

百度的强大,不只是搜索技术,当然有些人会说百度没有搜索技术,这种言论我就不争论了,我不试图改变任何人的观点,我只列一些事实而已。

百度的强大还来自于两大块,第一是内容护城河,第二是入口把控。

前者是百度贴吧,百度mp3,百度知道,百度百科,百度文库

后者是hao123和百度联盟。

这两块都是本地化,google进中国的时候,在这两块都有动作

投资天涯,收购265,以及大力发展google联盟,这些都是本地化。

此外,重申一下,百度全家桶的出现以及,百度全家桶和hao123的捆绑,是360崛起之后的事情,hao123从百度收购到360崛起之前,一直风平浪静的没做任何推广和捆绑,从历史事实而言,请勿将本地化等同于流氓化。

来源:caoz的梦呓
  查看全部
6361773626208870564268127.jpg

有人说,搜索引擎技术似乎不需要本地化,这一看就是彻底不懂这个领域的人讲的。当然,实话说,如果有人说,google在中文本地化方面做得非常好,我是可以部分同意的,同意的比例可能会比google工程师少一些。但我相信google工程师也会告诉你,搜索引擎是需要本地化的。

今天写篇科普文,讲讲搜索引擎的技术机理和市场竞争的一些特点。当然,作为从事或有兴趣从事流量运营的朋友,是可以用另一个角度去理解本文。

搜索引擎的核心技术架构,大体包括以下三块:第一,是蜘蛛/爬虫技术;第二,是索引技术;第三是查询展现的技术; 当然,我不是搜索引擎的架构师,我只能用比较粗浅的方式来做一个结构的切分。

1、 蜘蛛,也叫爬虫,是将互联网的信息,抓取并存储的一种技术实现。

搜索引擎的信息收录,很多不明所以的人会有很多误解,以为是付费收录,或者有什么其他特殊的提交技巧,其实并不是,搜索引擎通过互联网一些公开知名的网站,抓取内容,并分析其中的链接,然后有选择的抓取链接里的内容,然后再分析其中的链接,以此类推,通过有限的入口,基于彼此链接,形成强大的信息抓取能力。

有些搜索引擎本身也有链接提交入口,但基本上,不是主要的收录入口,不过作为创业者,建议了解一下相关信息,百度,google都有站长平台和管理后台,这里很多内容是需要非常非常认真的对待的。

反过来说,在这样的原理下,一个网站,只有被其他网站所链接,才有机会被搜索引擎抓取。如果这个网站没有外部链接,或者外部链接在搜索引擎中被认为是垃圾或无效链接,那么搜索引擎可能就不抓取他的页面。

分析和判断搜索引擎是否抓取了你的页面,或者什么时候抓取你的页面,只能通过服务器上的访问日志来查询,如果是cdn就比较麻烦。 而基于网站嵌入代码的方式,不论是cnzz,百度统计,还是google analytics,都无法获得蜘蛛抓取的信息,因为这些信息不会触发这些代码的执行。

一个比较推荐的日志分析软件是awstats。

在十多年前,分析百度蜘蛛抓取轨迹和更新策略,是很多草根站长每日必做的功课,比如现在身价几十亿的知名80后上市公司董事长,当年在某站长论坛就是以此准确的分析判断而封神,很年轻的时候就已经是站长圈的一代偶像。

但关于蜘蛛的话题,并不只基于链接抓取这么简单,延伸来说

第一,网站拥有者可以选择是否允许蜘蛛抓取,有一个robots.txt的文件是来控制这个的。

一个经典案例是 https://www.taobao.com/robots.txt

你会看到,淘宝至今仍有关键目录不对百度蜘蛛开放,但对google开放。

另一个经典案例是 http://www.baidu.com/robots.txt

你看出什么了?你可能什么都没看出来,我提醒一句,百度实质上全面禁止了360的蜘蛛抓取。

但这个协议只是约定俗成,实际上并没有强制约束力,所以,你们猜猜,360遵守了百度的蜘蛛抓取禁止么?

第二,最早抓取是基于网站彼此的链接为入口,但实际上,并不能肯定的说,有可能存在其他抓取入口,比如说,

客户端插件或浏览器, 免费网站统计系统的嵌入式代码。

会不会成为蜘蛛抓取的入口,我只能说,有这个可能。

所以我跟很多创业者说,中国做网站,放百度统计,海外做网站,放google analytics,是否会增加搜索引擎对你网站的收录?我只能说猜测,有这个可能。

第三,无法被抓取的信息

有些网站的内容链接,用一些javascript特殊效果完成,比如浮动的菜单等等,这种连接,有可能搜索引擎的蜘蛛程序不识别,当然,我只是说有可能,现在搜索引擎比以前聪明,十多年前很多特效链接是不识别的,现在会好一些。

需要登录,需要注册才能访问的页面,蜘蛛是无法进入的,也就是无法收录。

有些网站会给搜索特殊页面,就是蜘蛛来能看到内容(蜘蛛访问会有特殊的客户端标记,服务端识别和处理并不复杂),人来了要登录才能看,但这样做其实是违反了收录协议(需要人和蜘蛛看到的同样的内容,这是绝大部分搜索引擎的收录协议),有可能遭到搜索引擎处罚。

所以一个社区要想通过搜索引擎带来免费用户,必须让访客能看到内容,哪怕是部分内容。

带很多复杂参数的内容链接url,有可能被蜘蛛当作重复页面,拒绝收录。

很多动态页面是一个脚本程序带参数体现的,但蜘蛛发现同一个脚本有大量参数的网页,有时候会给该网页的价值评估带来困扰,蜘蛛可能会认为这个网页是重复页面,而拒绝收录。还是那句话,随着技术的发展,蜘蛛对动态脚本的参数识别度有了很大进步,现在基本上可以不用考虑这个问题。

但这个催生了一个技术,叫做伪静态化,通过对web服务端做配置,让用户访问的页面,url格式看上去是一个静态页,其实后面是一个正则匹配,实际执行的是一个动态脚本。

很多社区论坛为了追求免费搜索来路,做了伪静态化处理,在十多年前,几乎是草根站长必备技能之一。

爬虫技术暂时说到这里,但是这里强调一下,有外链,不代表搜索蜘蛛会来爬取,搜索蜘蛛爬取了,不代表搜索引擎会收录;搜索引擎收录了,不代表用户可以搜索的到;

site语法是检查一个网站收录数的最基本搜索语法,我开始以为是abc的常识,直到在新加坡做一些创业培训后交流才发现,大部分刚进入这个行业的人,或者有兴趣进入这个行业的人,对此并不了解。

一个范例,百度搜索一下 site:4399.com

2、索引系统

蜘蛛抓取的是网页的内容,那么要想让用户快速的通过关键词搜索到这个网页,就必须对网页做关键词的索引,从而提升查询效率,简单说就是,把网页的每个关键词提取出来,并针对这些关键词在网页中的出现频率,位置,特殊标记等诸多因素,给予不同的权值标定,然后,存储到索引库中。

那么问题来了,什么是关键词。

英文来说,比如 this is a book,中文,这是一本书。

英文很自然是四个单词,空格是天然的分词符,中文呢?你不能把一句话当作关键词吧(如果把一句话当作关键词,那么你搜索其中部分信息的时候,是无法索引命中的,比如搜索一本书,就搜索不出来了,而这显然是不符合搜索引擎诉求的)。所以要分词。

最开始,最简单的思路是,每个字都切开,这个以前叫字索引,每个字建立索引,并标注位置,如果用户搜索一个关键词,也是把关键词拆成字来搜索再组合结果,但这样问题就来了。

比如搜索关键词 “海鲜”的时候,会出现结果,上海鲜花,这显然不是应该的搜索结果。

比如搜索关键词 “和服”的时候,会出现结果,交换机和服务器。

这些都是蛮荒期的google也不能幸免的问题。

到后来有个梗,别笑,这些都是血泪梗,半夜电话过来,说网监通过搜索发现你社区有淫秽内容要求必须删除,否则就关闭你的网站,夜半惊醒认真排查,百思不得其解,苦苦哀求提供信息线索,最后发现,有人发了一条小广告,“求购二十四口交换机” 。 还有,涉嫌政治敏感,查到最后 “提供三台独立服务器”,  看出其中敏感词了没?你说冤不冤。 这两个故事可能并不是真的,因为都是网上看到的,但是我想说,类似这样的事情真的有,并非都是空穴来风。

所以,分词,是亚洲很多语言需要额外处理的事情,而西方语言不存在的问题。

但分词不是说说那么简单,比如几点,1:如何识别人名?2、互联网新词如何识别?比如 “不明觉厉”。3、中英混排的坑,比如QQ表情。

做一个分词系统,说到底也不难,但是要做一个自动学习,与时俱进,又能高效率灵活的分词引擎,还是很有技术难度的。  当然,这方面我不是专家,不敢妄言了。

现在机器学习技术发达了,特别是google在深度学习领域拥有领先优势,以前很多通过人工做标定,做分类的工作可以交给算法完成,从某种意义来说,本地化的工作可以让机器学习去完成;未来,也许深度学习技术可以自己学习掌握本地化的技巧。 但我想说两点,第一,从搜索引擎发展历史看,在深度学习技术还没成熟的情况下,本地化的工作是非常重要的,也是很重要的决定竞争成败的要素;第二,即便现在深度学习已经很强大,基于当地语言的人工参与,标定,测试,反馈,一些本地化的工作依然对深度学习的效率和效果拥有不可替代的作用。

索引系统除了分词之外,还有一些要点,比如实时索引,因为一次索引库的更新是个大动静,一般网站运营者知道,自己网站内容更新后,需要等索引库下一次更新才能看到效果,而且索引库针对不同权重的网站内容,更新的频次也不太一样。 但诸如一些高优先的资讯网站,以及新闻搜索,索引库是可以做到近似实时索引的,所以我们在新闻搜索里,几分钟前的信息就已经可以搜索到了。

我以前经常吐槽一个事情,我在百度空间发表的文章,每次都是google率先索引收录,当时他们的解释是,猜测是因为很多人通过google阅读器订阅我的博客,而google阅读器很可能是google快速索引的入口。(然并卵,百度空间已经没有了,google阅读器也没有了。)

索引系统的权值体系,是所有SEOER们最关心的问题,他们经常通过不同方式组合策略,观察搜索引擎的收录,排名,来路情况,然后通过对比分析整理出相关的策略,这玩意说出来可以开很长一篇了,但今天就不提了。

但我说一个事实,很多外面的公司,做SEO的,会误认为百度里面的人熟悉这里的门道和规律,很多人高价去挖百度的搜索产品经理和技术工程师去做SEO,结果,呵呵,呵呵。 而外面那些草根创业者,有些善于此道的,真的比百度的人还清楚,搜索权值的影响关系,和更新频次等等,比如前面说到的,身价几十亿的那个80后创业者。

基于结果反推策略,比身在其中却不识全局的参与者,更能找到系统的关键点,有意思不。

3、查询展现

用户在浏览器或者在手机客户端输入一个关键词,或者几个关键词,甚至一句话,这个在服务端,应答程序获取后处理步骤如下

第一步,会检查最近时间有没有人搜索过同样的关键词,如果存在这样的缓存,最快的处理是将这块缓存提供给你,这样查询效率最高,对后端负载压力最低。

第二步,发现这个输入查询最近没有搜索,或者有其他条件的原因必须更新结果,那么会将这个用户输入的词,进行分词,没错,如果不止一个关键词,或者是一句话的情况下,应答程序会又一次分词,将搜索的查询拆成几个不同的关键词。

第三步,将切分后的关键词分发到查询系统中,查询系统会去索引库查询,索引库是个庞大的分布式系统,先分析这个关键词属于哪一块哪一台服务器,索引是一种有序的数据组合,我们用可以用近似二分法的方式思考,不管数据规模多大,你用二分法去查找一个结果,查询频次是log2(N),这个就保证了海量数据下,查询一个关键词是非常快非常快的。 当然,实际情况会比二分法复杂很多,这样说比较容易理解而已,再复杂些不是我不告诉大家,是我自己都不是很清楚呢。

第四步,不同关键词的查询结果(只是按权值排序的部分顶部结果,绝对不是全部结果),基于权值倒序,会再汇总在一起,然后把共同命中的部分反馈回来,并做最后的权值排序。

记住,搜索引擎绝对不会返回所有结果,这个开销谁都受不了,百度也不行,google也不行,翻页都是有限制的。

再记住,如果你多个关键词里有多个不同品类冷门词,搜索引擎有可能会舍弃其中一个冷门词,因为汇总数据很可能不包含共同结果。搜索技术不要神话,这样的范例偶尔会出现。

这是三大部分,多说一点,其实还有第四部分。

用户点击行为采集和反馈部分

基于用户的翻页,点击分布,对搜索结果的优劣做判定,并对权值做调整,但这个早期搜索引擎是没有的,后面才有,所以暂时不列为必备的三大块。

此外,一些对搜索优化的机器学习策略,对易混词识别,同音词识别等等,相当部分也都基于用户行为反馈进行,这是后话,这里不展开。

关于第四部分,我以前说过一个词,点击提权,我说这个词价值千金,我猜很多人并没理解。没理解就好,要不我要被一些同行骂死了。

以上是单指搜索引擎的工作原理,和一些技术逻辑,当然,只是入门级的解读,毕竟再深入就不是我能讲解的了。

但搜索引擎的本地化,并不局限于搜索技术的本地化。

百度的强大,不只是搜索技术,当然有些人会说百度没有搜索技术,这种言论我就不争论了,我不试图改变任何人的观点,我只列一些事实而已。

百度的强大还来自于两大块,第一是内容护城河,第二是入口把控。

前者是百度贴吧,百度mp3,百度知道,百度百科,百度文库

后者是hao123和百度联盟。

这两块都是本地化,google进中国的时候,在这两块都有动作

投资天涯,收购265,以及大力发展google联盟,这些都是本地化。

此外,重申一下,百度全家桶的出现以及,百度全家桶和hao123的捆绑,是360崛起之后的事情,hao123从百度收购到360崛起之前,一直风平浪静的没做任何推广和捆绑,从历史事实而言,请勿将本地化等同于流氓化。

来源:caoz的梦呓