首页

利用 CSS 变量实现令人震惊的悬浮效果

周周

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

171422eli2zvv3zq2eq2mu.gif

那么如何使用CSS实现这个效果?

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素,等待,直到用户将鼠标移过它;
   2.计算相对于元素的位置;
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }

结果
成功啦!将其加入到对于的HTML页面,你炫酷的按钮就可以使用啦!

设计方法:用问题引出答案,群策群力绘制用户体验地图

蓝蓝设计的小编

周五参加了港大space学院的工作坊,感谢Google张英惠老师的精彩授课,学到了通过发问找到解决问题的方法,群策群力绘制用户体验地图。IMG_20170922_152217.jpg

怎么制作微信小程序的旋转动画?

seo达人

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

微信小程序被给予的能量是无穷的,在小程序发展逐渐成熟的当下,小程序开发能实现的需求越来越完善。最近小程序中有一个图片旋转的需求,在微信小程序上是可以通过切换多张图片达到旋转的效果,但微信小程序自带的API中带有这么一个动画组件,因此小程序制作旋转动画可以使用image+Animation来实现。

首先在wxml中定义image

注意其中的animation属性,image就由它来实现动画。

而{{animation}}我们在js的data中定义

data: {

animation: \'\'

},

相关代码

var _animation;

var _animationIndex

const _ANIMATION_TIME = 500;

pages {

...

onShow: function () {

_animation =wx.createAnimation({

duration:_ANIMATION_TIME,

timingFunction: \'linear\',//linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end

delay: 0,

transformOrigin:\'50% 50% 0\'

})

},

/**

* 实现image旋转动画,每次旋转 120*n度

*/

rotateAni: function (n){

_animation.rotate(120* (n)).step()

this.setData({

animation:_animation.export()

})

},

/**

* 开始旋转

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 进行一次旋转

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

},  _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进行一次旋转

},

/**

* 停止旋转

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自带的Animation可以实现一次动画,然后可以通过setInterval来达到不断旋转的目的,在使用时,控制startAnimationInterval和stopAnimationInterval即可。


微信小程序怎么制作旋转动画

微信小程序视频教程,尽在即速学院。


在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。

1、rotate的值应该是上一次结束时的值,

2、如果设置了全局变量,记得在oncreate时初始化,不然第二次打开同一页面会有问题。

注意事项:

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值,原因有两点:

1、我们需要便利的控制开始和停止,

2、animation在小程序进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行

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

氛围独特情绪深沉的深色系网站,设计上有什么讲究?

博博

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


在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常常会呈现出更为独特的氛围,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。

想要借助深沉的色调来创造情绪相对独特的网站设计,是有一些可供遵循的常见的设计技巧,今天的文章,我们来分享一下这方面的内容。

深色,并不定是黑色

首先这一点必须明确,深色并不一定是黑色。

在选取配色的时候,网明亮的色彩当中添加黑色或者灰色所得出的色彩,通常会显得更加深沉浓重,这样的色彩中往往会包含之前的色调。

在上面的 Hooligan 这个网站当中,设计师不仅采用了深沉的黑色背景,而且采用了和黑色背景相当匹配的暗金色,两种深色之间色彩明暗依然存在对比,和白色的标题文本构成了三个层次,不仅富有视觉吸引力,而且创造出了沉稳厚重的氛围。

阴影的使用

阴影和光线往往是相伴出现的,而阴影所带来的舞台剧般的效果则充满了戏剧感和神秘感,这也是设计师喜欢它的原因,这样的设计会让用户心中产生兴趣和好奇心。

在上面的 Clear Motion 这个网站当中,车辆周围被阴影所包围,文本内容很容易吸引用户的注意力。同时,用户会好奇这辆车有什么特殊的地方,有什么地方看起来不太一样,黑暗的氛围下,用户的好奇心会身不由己地高涨起来。

黑色叠加层

用黑色的半透明层叠加到图像上,也是制造深色系背景的一种常见手法。在图片的选取和不同的透明度之下,背景图片所呈现出来的效果和氛围,是非常不同的。

透明度较低的情况下,黑色叠加图层会让用户看不清背景中的信息,这使得背景信息在整个设计中参与度较低。透明度较高的情况下,更多的背景元素会透过叠加层呈现出来,和前景元素产生交叉和互动。但是总的来说,黑色叠加层让元素之间产生对比,也使得行为召唤元素更容易发挥作用。

在上面的 Fhoke 这个网站当中,透明叠加层让背景中的场景适当地透露一点出来,但是真正吸引人注意力的,还是在标题和左侧的行为指引上。

简陋的画布

细节较多的背景让人觉得信息丰富,而粗陋的画布则更容易创造出一种虚无的感觉,相应的,后者是会让人更有探索的欲望。粗陋甚至赤裸的深色系画布很好地将神秘感和探索的欲望结合到了一起。

Dubois 这个网站的背景同样非常的简单,没有纹理,只是通过均匀分布的小圆点来进行装饰,如果你仔细观察会发现这些点的分布、色彩其实是有微妙变化的,会引导你去注意位于整个页面底部的文本标题,虽然绝大多数的网站并不会把标题放在这样的位置上。

字体的选取

Punk is Not Dead 这个网站给你的感觉是否很独特?网站的设计非常清晰,识别度极高,网站本身还有音频组件,它的设计从视频到音频一应俱全,整体充满了朋克的风格。

黑暗的背景和明亮的字体色彩有助于实现这样的效果,但是字体的选取才是最关键的。想象一下使用普通的字体,是完全达不到这样的效果。尖锐粗糙的边缘和并不那么友好的可读性,让他在视觉上和朋克的精神保持了一致。

黑白配色

当设计完全失去色彩,仅仅保留黑白两色的情况下,会给人什么样的感觉呢?如果整个设计是以黑白两色为主,搭配少量其他的颜色,体验和氛围又是什么样的呢?

黑白配色和纯黑为主的配色一样,很容易创造出戏剧化的效果,这两种色彩本身所构成的冲突和对比就是原因。

黑白的强烈对比,常常会促使访客在浏览过程中忙于注意不同的细节,面对 Super Rebel 这个网站的时候,这种感觉就非常明显。打开页面之后,注意力会迅速被右上角的图片吸引,随后便忍不住把对比强烈的所有模块都扫视一遍。黑白色搭配大量信息很容易创造出信息过载的效果和体验。

图片的选取

Jimmy Chin 在他的作品集网站的「关于」页面当中,他将自己的照片直接放了进去,色彩采用了单纯的黑色。

色彩的明暗和饱和度的选取,直接影响着整个设计的情绪,在这里,单纯的黑色让整个页面的形式感更强,而所呈现出来的感觉也非常的锐利。想想看,他穿着黄色的衬衫和绿色的裤子,那么整个图片所呈现出来的感觉是完全不同的,浮夸而醒目。

图片的选取对于情绪的表达和氛围的营造有着巨大的影响。

也可以营造轻松的氛围

许多深色系的网站都给人以深沉、怪异的感觉,但是深色并不完全代表着负面的情绪。深色系的网站同样可以被设计得轻松而富有活力,这主要取决于你如何将元素组合到一起。

在 Atom 这个网站当中,整个背景都采用了典型的深灰,但是卡通角色和轻盈的色调让网站凸显出一种可爱而有趣的感觉。这样的设计也能带来视觉奇观,并且不会让用户感觉到负面的感受。

这种设计让用户和网站之间的情感联系更轻松,让服务更容易为用户所接受。

结语

那些带有负面情绪和独特氛围的网站,你喜欢吗?带有这样情绪和氛围的网站,需要设计师花费更多的时间和精力来拿捏程度,来达成相应的设计目标,而且这样的设计并非不好。情绪化的设计,有趣而神秘的氛围,带有负面情感的表达,躁动甚至暴躁的设计,这些都有其独特的作用。

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


如何快速成长?这5个思维助你完成职场跃迁

博博

口述:飞鱼船长

重述编写: Eireen (个人公众号:包总学习笔记)

全文共 7037 字 15 图,阅读需要 16 分钟

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

———— / BEGIN / ————


不少刚转行做运营没多久的新人,在目前的工作中,经常会遇上这样的问题:我刚入行做运营,到底要怎么做才能快速进步?


一、超越预期


假设一种情况,一家公司同时来了5个能力、天赋、背景都一模一样的实习生,经过半年的时间,他们的能力都会差不多吗?


不会!


一定会拉开很大的差距。


这些人最开始不是都差不多吗?为什么会被拉开很大的差距?


我们来具体看下,5个人在6个月里会怎么过:


刚开始由于每个人的经验尚浅,所以被分配的工作都是比较简单、基础的执行工作。


一段时间后,总会有个难一点的工作,交给谁呢?


应该是交给一个稍微更信任的一点的人来做,因为TA能做好的概率会稍微大一点。


这个人因为接手了一个更有难度的工作,比起还在做简单重复工作的同事相比,TA能力提升的速度也会更快些。


那么到了下次,还有一个比较有含金量的挑战型任务,会交给谁呢?


肯定还是这个人嘛!


所以最开始的一个小小的差距,就会带来后续巨大的改变。


那么,如何获得最开始的一个小小差距呢?


那就是不断超越领导的预期。


不断超越领导的预期,从而获得更多的信任。


得到更多的信任之后就能获得更大的权限,从而帮助自己更快的成长,达成正向循环。


0?wx_fmt=png


没有达成正向循环会怎么样?


举个例子,某公司的运营助理小张,他的上司每天交给他的任务就是排版、作图、制表等简单工作,偶尔还让他去打印资料、寄快递。


由于每天做事情做的非常杂,所以小张认为自己没什么提升,慢慢工作开始懈怠了下来;上司看到他这种样子,也就更加不可能给予他更多的机会,在不知不觉的情况,机会大门早已经被关闭。


我们如何才能避免出现小张这种情况呢?


有一个简单有效的方法:当我们接到一个任务的时候,有意识地去想这件事情如何能做的更好,提高自己的标准,而不是很随意地完成了手中的任务。


不要小看这件事,我们在职场中做的每一件事情都是在为我们获得更多的信任做准备,今天做出超越预期的事情是在为明天获得更多信任做积累。


我们做的任何事情都指向一个目的:让上司知道,我是值得被信任的人。


0?wx_fmt=png


职场中的信任跟机会有非常大的联系,公司会把重要的事情交给信任的人去做,而像小张这种不太靠谱的人自然是继续打杂。


有人可能会说:哎呀,我能力不行,做不出来很完美的结果。


慢着,这里纠正一个问题:超越预期并不是一项能力,而是一项意识。


「能力和意识有什么区别呢?」


区别在于能力是显性的,而意识是隐性的。


0?wx_fmt=png


能力很容易通过完成各种任务体现出来,而意识是非常难以察觉的。


这就导致很多人认为能力比意识要重要,但其实意识反而比能力更加重要,也更难培养,所以我们才需要把能力和意识区分开来。


如何从生活中的点滴可以培养自己超越预期的意识?


我们可以强加一些小动作,在电脑桌面上换上“超越预期”的背景,或者在小贴纸写上“超越预期”四个字,然后贴在电脑上。


每天提醒下自己:


0?wx_fmt=png


当你刻意培养了这种超越预期的意识时,潜移默化你的进步速度就会比那些没有这种意识的人快上很多。


为什么?


因为把一项工作做到60分及格的水准,其实是非常简单的;稍微好一点的能把事情做到80分,就觉得这件事已经做的很好了,然后就停在这里了。


更高的自我标准,决定了你更快的进步速度。


很多时候,我们做任何工作,都只喜欢把事情从0分做到80分,然后就开始做下一件0分到80分的事情。


但其实很多人都可以把工作从0分做到80分,例如招个大学生来,说不定他也可以把工作从0分做到80分,那对比他,你的优势其实就荡然无存了。


0?wx_fmt=png


看到这里你可以停下来想一下,自己之前的工作中,是不是很多时候仅仅只是把事情从0分做到80分?


所以,从今天起就可以开始刻意培养自己超越预期的意识,并且尝试去做一次超越预期的事情。


可能从短时间内看不出差距,但是把时间线拉到一年来看的话,差距就会变得非常明显。


0?wx_fmt=png


我相信不管是工作中,还是生活上,你很快会收到正面的反馈。


从而让自己从打杂的坑跳出来,去实自己现真正的价值。


二、差异化意识


如果有一件事情,能做到的人有很多,那这件事情的价值几乎为零,人们只会为这种工作付很少的钱。


比如说洗衣服、打扫卫生、扫大街这类大部分人都能做到的事,这种工作的工资会非常低。


如果一个工作只有少量的人能够做到,那么这个人就会很有价值,这个社会也会为他的工作付出很多的报酬。


比如那些顶尖的程序员、设计师、运营之所以工资这么高,就是因为他们能做到很多其他人都做不到的事情。


让自己成为不可替代的人,最重要的因素就是培养自己的差异化优势。


那么,如何培养自己的差异化呢?


互联网里有一个思维,叫紫牛效应。


如果你开车到草原上,路旁庞大的牛群吸引了你的目光,一大群黑白相间的奶牛在高速公路旁绵延数十公里。你惊讶的赞叹:“好美呀!此景只应天上有。”


二十分钟后,牛群已经引不起你的兴趣,反正每只黑白相间的牛都一样。刚才还觉得新鲜趣味的牛群,现在却已索然无味。


突然,你的视线中出现了一只紫色的奶牛,你会大吃一惊,“怎么会有紫色的牛,居然世界上会有紫色的牛,太不可思议了!!”


0?wx_fmt=png


你的目光会集中在这头紫色的牛身上,从此留下深深的印象,并且一辈子不会忘记。


这件事情带给我们什么样的启发?


与众不同的事情总能被人们津津乐道,而与众不同的人也会被公司深刻记住。


在职场中,你只有作为一头“紫牛”,才能引起注意。


很多人没有与众不同的闪光点,自然就没办法吸引注意。就像在投简历的时候,所有人的简历都是千篇一律 ,没有很突出的特点和优点。


甚至你可以回想一下自己以前被拒绝过的简历,是不是包含了以下的这些词:工作认真、积极向上、团结友爱。


每个人都会这么写,HR凭什么会把精力放在你这份简历上呢,要知道HR每天都很忙的。


TA每天收到几百份一模一样的简历,TA看完肯定很快会关掉,不会有任何反应,也不会叫你过来面试。


那什么样的简历会让TA有反应,并且停下来,去想让这个人来面试呢?


这也就回到了我们之前说的“紫牛效应”了。


一定是这个简历有特别突出的亮点,或者有很大的差异化,有好看的背景配图、有不同的过往经历、有好看的头像照片等,才会引起HR的注意,并且让他停下来,打电话叫你过去面试。


这句话听起来是句废话,但是生活中很多人都没有养成这种意识。

什么意识?


0?wx_fmt=png


假如没有这种差异化的意识,在竞争中我们是会处于劣势的。


举个例子:假设两个能力完全一样的人同时过来面试,其中一个人在面试前就针对公司运营现状写了一份长达8000字分析报告,而另外一个人只带了一张单薄无比的简历过来面试。


你觉得谁通过面试的可能性会大一些?


当然是那个准备了分析报告的的面试者,因为他有很明显的差异化优势,十分强烈地吸引了面试官的注意力。


差异化能天然产生注意力,如果大多数人做的事情和呈现的状态都一样的话,人们会更关注那些拥有更多闪光点的一方。


0?wx_fmt=png


差异化的优势就在于:在有同等实力的情况下,你比别人多那么一点机会。


哪怕为了这一点机会,我们都非常有必要去培养自己的差异化优势。


具体如何做?


刻意培养自己的某项能力,让自己的这项能力显得非常突出,在这个领域你就是公司里排名第一的。这些能力可以是:


  • 文案写得特别好

  • 活动策划得特别有吸引力

  • PPT水平特别高

  • 数据分析能力特别强

    ……


总找到别人不能替代的点,并加以持续刻意练习。


三、及时反馈


在《精益创业》一书中,有个概念叫“MVP”模型,这个概念被广泛应用在创业的过程中。


因为有时候创业者都不知道自己的设想不知道能不能最终达到终点,可能有时候我们做的产品不一定是用户真正想要的。


有些企业半年才推出一款产品,要么风口已经过了,要么竞争对手已经把市场占领完了。


所以,有一个办法能尽快提高创业的成功率,我们要用最有效的方法先做出一个功能不那么完善的雏形,然后把产品尽快推到市场里验证效果。


0?wx_fmt=png


你永远不知道用户想要的结果是什么——在汽车推出之前,用户以为自己想要的是一匹马,要求再高点充其量是一匹更快的马,但是但汽车被发明了之后,用户才知道自己原来要的是一辆汽车。


假如将精益创业这个概念应用在制造汽车上,会是个什么样子呢?

当我们要制造一辆汽车的时候,我们首先要找到构成汽车的最核心部件。


  • 第一步:找到2个轮子,找到杆,一辆最最最简单的汽车框架就构成了。

  • 第二步:不够稳,再加点轮子,变成4个轮子。

  • 第三步:加个发动机,让他能动起来。

  • 第四步:最后加个方向盘,让汽车能正常行驶。


看到这里,你可能会问:你不会是在忽悠我吧,汽车制造哪可能这么简单。


0?wx_fmt=png


但这才是一辆汽车,能够在没有技术和认知积累的情况下,被发明出来最快速的路径。


但现在很多人造汽车,他们在心中对汽车有无限的构想,认为汽车应该是这样那样的。


在还没开始制作就已经把细节描绘得非常细,脑补用户一定需要这些功能,等汽车生产出来后发现用户要的根本不是这些功能,销量也可想而知非常惨淡了。


所以我们要快速做最简化的版本,然后快速获得反馈,看用户喜不喜欢,如果用户说好,我们就继续造,不好我们就改进。


「MVP模型」不仅仅可以用于精益创业中,还可以应用在我们的工作上。


假想这样一种情况:领导交给你一个做PPT的的任务,你做完后交上去才发现做的方向不对,然后上司说“算了算了,还是我来吧”。


你不仅耽误了这件事的进度,还会让领导对你很失望。


然而这个过程中,其实你也是很用心和努力,只是你理解的方向和领导想的有偏差而已。


如何避免这种情况?


在一开始的时候,你可以做个最初的版本,快速“投放”到领导那里获得反馈,如果领导说没问题,那就可以继续做下去,反之就要进行修改。


做出一个大概的框架,以确保做出来的东西方向不会错,或者错的太多。


但新人常常会有这样的一个困惑:假如我经常去找上司核对不会被认为很烦吗?


不会。


因为假如你的工作方向已经偏离了轨道,做出来的东西不是领导想要的,他会付出更多的精力去修补这个错误。


及时反馈看上去是多花了领导的时间,但本质上是节约了领导的时间。


如果没有想明白这个问题的话,团队和个人的效益会非常低,看起来很忙,其实只是做了无用功。


0?wx_fmt=png


所以我们需要在偏离不太久时及时调整方向,以缩短我们完成结果的路径。


通常情况下,职场新人很难直接就做出老板想要的结果,所以提前确认的好处就在于,你会缩短通往最终目的地的路径,越早发现方向不对,所浪费的时间越少。


当你做这件事情做到10%或者30%就可以同步下进度了,不管是口头上,还是邮件进行沟通。


职场新人受限于经验和能力的不足,某些想法会比较幼稚和不成熟,及时反馈也能让上司更好的帮助到自己。


把自己的想法及时反馈给上司,他也许就能理清你的思路,帮助你解决目前所遇到的问题,这对助推个人成长有非常大的帮助。


当然了,及时反馈不是让你遇到任何问题都直接甩给领导,比如那些网上随便一搜就能搜到答案的问题。


而是确定要领导解答前,先给出自己的思考,即使是很浅显的思考,然后真的不懂了再去问领导。


而不是让领导手把手把所有的细节都教给你,如果是这样的话,那还不如他把所有事情都自己做了算了。


四、结果导向


前阵子有个面试者,他做的活动里有一个是花了200万预算,活动的结果是活动h5获得了1万人访问。


0?wx_fmt=png


然后问他,这个活动给公司带来了什么转化成果?


他说这个数据在别的部门,他不知道,而且活动主要是在H5上。

再问:你给这个活动打多少分?


他说80分,说有些细节做得不够好。


然后船长就马上告诉他不太合适,结束了面试。


这个活动对公司业务没什么正向的转化,我给负分。有犯过错误不可怕,可怕的是不知道自己错了。


对了,这个公司不是家拼车业务的公司,而是个查公交信息的App。


这就是一个结果导向不强烈的例子,花了200万却没有什么具体的结果产出。


所以说,缺乏结果导向思维是人在做事情的时候有多么可怕!


你想想,如果你在一条错误的路上越跑越快,那会怎样?


——会离目标越来越远。


方向正确,你离成功越近;方向错误,你离失败越近。


所以,在职场中,为了能让自己更成功,我们做任何事情的时候需要找到正确的方向。


你可能会问,那我怎么样来明确自己的做事方向呢?


先明确自己想要达到的结果。


养成结果导向的思维,目标即是灯塔,能照亮你的前进方向,并且还让你不会被各式各样的因素打扰,从而更好的达成最终目标。


假如没有结果导向的思维,就容易把精力放在花拳绣腿的无关紧要事情上,而忽视了最终的结果,捡了芝麻丢了西瓜。


举个例子,有一天上司让小明去写一篇商品的文案,小明根本没搞清楚这篇文案要达成什么样的目的就直接去写了。


加班加点认真写了几天,但却自嗨得认为把文笔文笔写得非常优美、辞藻非常华丽,就能达成好的效果。


结果这篇文案投放到市场上一点效果都没有,小明的努力和认真完全白费。


为什么?


这是因为这篇文案的目的是其实为了让商品卖得更好,需要的是极具销售力的文案,而不是辞藻华丽的文案。


所以在做一件事情的时候,先要明确做这件事情的目的和意义。


公司最终只看结果,过程虽然也重要,但其实结果比过程重要太多了,就算我们加班加到凌晨3点,但做出来的事情并不能让上司满意,其实就属于无效工作。


职场上,不看苦劳,只看功劳。


假如我们举办一场线下活动,你在汇报工作的时候说自己花了多长时间准备,消耗了多少心血。


但其实这都是没用的,因为公司只看最终用户反馈怎么样,报名人数有多少,这次活动对比上次活动效果有没有更好,公司盈利有没有进一步提高。


谁会关心你花了多长时间?


没有任何人会关心,他们只看你做到了没有。


我见过结果导向很强烈的人,TA来找船长去讲课,虽然我们一次次得拒绝了TA。


但为了达成目标,TA也没有放弃,而是坚持了一次又一次想要说服我们,想出各种解决方法、循循善诱地把利益和格局弄好。


到最后居然也真正办成了这件事情,而且用非常低的成本撬动了这件事情的发展,这就是TA的价值所在。


而正常人面对拒绝的第一想法是什么,就是感觉这件事情做不下去了,然后就放弃,但其实事情还没到完全做不下去的地步。


但很多人在做一件事情的时候之所以会失败,不是因为这件事本身不可能成功,而是很多人等不到成功的那一刻,就已经放弃了。


就像销售一样,假如顾客说不买,如果你就停下来什么都不做,这笔订单可以就真的不会成功了。


你应该去问下TA为什么不买,是原因不买,是有什么顾虑,如果哪些顾虑得到保障,会不会改变自己的选择。


只要不是完全停下来,就还会有成功的可能性。


所以,结果导向的意识不仅对个人、对公司的益处都是非常非常大的。


时刻想着为结
果负责,假如你是结果的负责人,就算老板说不行,你也要问清楚为什么,多问为什么,找到目前的困难和障碍点,扫清你达到最终目的地的所有障碍物。


为了更好的达成目标,我们需要想尽所有方法,找到更优的解决方案。


要善于利用外部的力量去帮助自己解决问题(包括团队的同事),虽然是你在负责,但是可以找团队讨论,头脑风暴一些问题,可能会比你自己写的更好。


做事情、创业、运营本身就是个团队协作的事情,多一个的思考可以帮助你打开更多的思路。


我们只要达到结果,任何方法都可以,职场不是考试,没人会关心你是不是带了小纸条。


五、全局意识


回顾前面的5个意识,之前我们有说到要超越预期,差异化意识,优化意识,其实这些都是建立在拥有全局意识的基础上。


什么是全局意识?


就是在做执行工作的时候可以把层面上升至项目负责人的角度,从项目负责人角度思考项目整体的规划、协调。


不断从整体出发考虑问题,看问题会更加全面,并且增强对这个项目的理解。


0?wx_fmt=png


如果没有全局思维,很多事情其实你根本不知道怎么去做好,比如超越预期,如果你仅仅关注手上的事情,是很难在大的层面上超越上司的预期,也很难让自己进步。


只看眼前的工作,就会出现,你觉得没有事情做,但事实很多事情都还没有做好的情况。


假如不仅仅从执行层面上思考问题,当项目遇到困难和阻碍的时候,你会想到很多不同的解决方法,能力的提升会比只局限于单点的人进步更快。


当我在接到一项任务的时候,我会先把我关于这个项目的想法全部列出来:


  • 拆解工作目标,把维度拆解得足够细致

  • 用流程图画出整个项目的大体流程,再继续细化

  • 从整体流程中各个点能优化的地方提炼出来,逐个优化

  • 依次拆解各个步骤,具体落实到可执行的操作

  • 把项目所有的执行流程用excel表列出来

    …….


0?wx_fmt=jpeg

(我司某实习生推进一个项目时做的全局规划导图)


如果无法培养出这种思维的话,这样的话你其实就只有基本的执行能力,这种情况下,你与螺丝钉没有任何区别。


所以,不要只是觉得把手头上的事情做得很好就行了,而是要提前培养自己,成为未来可能的项目负责人。


培养的方法就是,在接到一项任务,刻意思考这几个问题:


  • 如果我是这个大项目的负责人,我会如何思考和安排现在的项目?

  • 现有大方向所做的事情都已经优化到了吗?

  • 现有大方向还有哪些可以做的事情,可以让目前的结果更好?

  • 团队内部的人力和外部的资源可以怎么去沟通和调用?

    …..


有全局思维的人会主动推动项目的进展,他会自己去找任何有益于项目进展的事情去做。


而没有全局思维的人,一旦把事情做得差不多了,他就觉得没事做了,被动等待别人给他安排任务。


而有全局思维的人,有清晰的导向和意识,有一系列的事情可以做去提升目标,而且会清晰地知道要做事情的优先级。


我们在接到任何一项任务的时候,都需要刻意让自己从项目整体去思考问题,这会是让你受益终身的习惯。


六、结语


上述说的很多意识,都是为了给我们持续进步做积累,这些积累到了一定程度,便会突然爆发。


我们努力让自己变得更好,不是为了去证明什么,而是为了看到,一个更大的世界。

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


———— / END / ————

你真的明白用户需求是什么吗?

博博

你真的明白用户需求是什么吗?

人人都是产品经理 2016-03-14 18:26:26

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

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

文章中的观点是鄙人在各大运营类网站学习总结的知识,加上本人对运营的一点看法,愚昧之见,还望批评指正。

你真的明白用户需求是什么吗?

相信很多在互联网公司工作的朋友们都晓得用户需求挖掘这件让人头疼的事情。产品之所以会被生产出来,其主要目的,就是为了满足使用者的需求。而使用者的需求是什么?如何去挖掘这些需求?这些繁杂的需求中又有哪些是真,哪些是假等等问题,都是每一个产品/运营人员头疼的一件事情。

你真的明白用户需求是什么吗?

产品的存在源于用户的需求。像汽车的出现,是人们对于更高交通效率的需求,电脑的出现,源于人们对办公的需求等等。观察移动互联网时代下的手机应用市场,各类产品出现的原因也正是源于人们越来越多,越复杂的需求。像滴滴打车满足了人们方便叫车的需求,饿了么满足了人们选择订餐的需求等等。上面举的两个例子只是众多需求中最基本的需求。而根据马斯洛需求分析层次理论,人类的需求有五层,在满足生理与安全需求之后,人们还会往上追求尊重需求社会需求和个人实现需求。这些需求成为产品生产源源不断的动力。如果把产品看作是一个孩子,那么用户需求,就可以看作是决定这个孩子形态的DNA。用户需求不仅对产品的诞生有着决定性的影响,而且在未来,在产品发展的过程中,还会不断地影响产品的形态,决定产品最终的样子。 所以产品需求对产品的重要性不言而喻。本文将从用户需求挖掘的方法,用户需求挖掘后的选择,用户需求挖掘中的误区三个方面的问题出发进行讨论。

你真的明白用户需求是什么吗?

1.用户需求挖掘的方法

(1)需求挖掘的渠道

A.产品开发前

1. 市场调研

任何一款产品的出现都是因为这个市场有需求,需求在哪,大旗就得往哪里挥。所以市场调研,毫无疑问是需求挖掘最重要的事情。设计好调研的问卷,利用网络渠道,像QQ群,帖吧,社区,微信群等,在线下,通过深入目标用户的群体进行走访调查,深入了解目标用户的需求。线上线下,深入目标人群,获得足够多的调查结果,并确保获得的需求具有一般性。

2. 产品分析

现在移动市场的商品已经有很多,可以说目前可以被想到的产品已经有人在做了。所以要开发的产品难免会有类似的竞品。这时候就需要我们去分析这些竞品,找到共同点即已经被满足的需求,找到差异点,即未被满足的空白区。比如如果你想要开发一款社交软件,那么就要寻找像微信,YY语音,QQ,陌陌等一系列的社交产品作为竞品进行分析,在这些竞品中找到社交软件应该有的通用的功能,找到这些社交软件中没有的,同时用户又有需求的功能作为你的产品的差异点。

3. 数据分析

随着大数据时代的到来,数据在决策中的作用越来越大。用户的很多潜意识或者有意识的行为,都可以通过大数据体现出来。很多情况下,用户很难清楚地说明他们的实际需求,很多时候他们的判断与实际的需求是不一致的。显性的需求没办法很好的表达出来,更不要说那些用户觉察不到的隐藏的需求。所以数据,这个不会骗人的东西,可以很好地帮助我们去分析需求。通过对用户数据的分析,需求可以较清楚地被表现出来。在产品未开发之前,数据的来源可以有很多方面,各大搜索引擎的关键字排行榜,微博热搜榜,同行的数据报告,或者是一些数据网站的免费或者付费的数据报告,都可以成为我们的数据分析来源。

你真的明白用户需求是什么吗?

B.产品开发后

1. 搜索记录和用户行径

在产品上线后,用户的搜索行为和用户的行径是分析需求的一个重要来源。用户搜索过程提及的关键词,举个简单的例子,比如婚恋产品中,如果搜索词中“35岁以后”“北京户口“的搜索频率很高,那么我们就可以知道用户对对象筛选有需求,就可以考虑加入对象筛选这个功能。另一个是用户行径,哪个功能是重度使用功能,哪个功能使用率不高,哪个功能用户的中途放弃率最高,都是需求分析中的重要数据。

2. 用户日志和用户数据

如果拥有大量的用户日志和用户数据,那么要好好地利用这笔难得的资源。找一个用户IP出来,GREP一下,分分钟就能获得这个用户的完整访问和操作轨迹,分析用户的操作行为,设身处地的理解用户的心情,理解用户的处境,从而理解自己产品和运营中,是不是有一些不合适,不妥当的地方,真正把自己代入到用户的体验中,理解用户的不满,理解用户的挣扎,理解用户在使用中的困惑和障碍。

3. 用户反馈

产品在上线之后,通过各种渠道获取尽可能多的用户反馈或者邀请用户面对面进行产品的评测。通过用户反馈了解产品还没有满足的需求还有产品中的伪需求或者说是冗余的功能是最直接最有效的方式。因为这群用户是你最珍贵的种子用户。

你真的明白用户需求是什么吗?

(2)需求挖掘的思想方法

A.头脑风暴法

在收集产品需求的过程中,最常使用的是头脑风暴法。让参与者敞开思想,集体讨论,相互启发、相互激励、相互弥补知识缺陷,引起创造性设想的连锁反应,产生尽可能多的创意。

B.创意分合法

创意分合法是创意思维训练方法之一,主要是将原不相同亦无关联的元素加以整合,产生新的意念、面貌。分为两种心理运作过程:使熟悉的事物变得新奇(由合而分)、使新奇的事物变得熟悉(由分而合),主要是运用类推(analogies)和譬喻(metaphors)的技术来协助分析问题,并形成相异的观点。

C.属性列举法

属性列举法即特性列举法也称为分布改变法,特别适用于老产品的升级换代。其特点是将一种产品的特点列举出来,制成表格,然后再把改善这些特点的事项列成表。属性列举法是根据设计对象的构造及性能,按名词、动词、形容词等特性提出各种改进属性的思路,从而萌发新设想的一种方法。

D.6W3H问题法

面对庞杂的需求分析工作、不知从何做起时,6W3H分析法不仅有利于较系统和周密的思考问题,使思维具有条理性,也有利于较深入地发掘问题,有针对性地提出更多的可行性设想,帮助产品经理制定有效的目标。

6W3H分别是:

  1. Who(什么人)产品的目标客户是谁?是一类群体还是几类群体?针对产品的用户群进行分析,了解目前用户群的年龄、性别、特征、区域、习惯、兴趣、爱好、收入、消费等情况。
  2. When(什么时间)用户可能会在什么时候使用到产品。产品推介的时,必须选择合适的时机,同时还要考虑用户的停留时间、使用高峰时间、跳出时间。
  3. Where(什么地方)用户可能在那些条件和环境使用产品。针对什么样的环境条件,如,针对不同的操作系统环境、不同的地理位置,要有不同的方案。
  4. Why(为什么)此法主要用于了解设计产品新功能是的目的是什么?是现有产品没有满足用户需求还是为了满足用户的新需求、又或者仅仅是跟风凑热闹。
  5. What(是什么)产品功能分析。用来分析产品基本功能和辅助功能的相互关系如何,用户到底需要什么功能?
  6. Which(哪些)除了我们的产品,市场上还有可替代产品吗?
  7. How do(怎么做)用户怎么使用产品,使用产品的流程是什么?怎么样更省力?符合用户的使用习惯吗?体验怎样?
  8. How much(多少钱)用户使用产品需要付费吗?需要付多少?是否超出了用户的支付能力?
  9. How many(多少次)用户的使用频率是怎样的?经常使用?偶尔使用?还是不定期?

2.用户需求挖掘后的选择

A. 甄别真假需求

用户的需求和用户的痛点 .需要注意的是,用户提出的需求不一定是用户真正的需求。

  • 第一,用户没有很强的产品意识,很多都是模棱两可的感觉。
  • 第二,用户是贪婪的,他们往往会提很多自私的需求。

如果能够躺在床上每天有人送钱送吃的给你洗衣服打扫房间这种需求绝对是强需求,但是可能么?

有些需求可能是低频率的需求甚至是违背商业规则的需求,像春联O2O,一键挑选春联送货上门,新用户还能免单哦~~这种需求用户求之不得,需求可以说是大了去了。但是有企业会做吗?明显不可能!所以不要一味地跟着用户的需求走,不理智的需求分析行为,无疑是一种自杀的行为。

B.从需求中需找真正的痛点

在需求分析中,甄别真伪需求,对需求进行抽丝剥茧的分析,剥开表面浅显的需求,通过逻辑思维分析,代入用户使用的场景,去寻找造成这些需求下面更深层次的痛点。

举个例子:360安全浏览器,看起来是好像用户使用的需求是需要一个安全的浏览器,能够保护他们上网的安全。但是如果给用户一个绝对安全的,但是很卡的浏览器呢?如果我们给用户一个安全系数较低,但是已经能够保证隐私等基本信息安全,同时又能够保证浏览速度和浏览质量的浏览器时,用户会选择哪个呢?

浏览器本质还是网上冲浪的工具,核心问题还是使用过程的流畅度,浏览体验。安全性问题,只是因为现在越来越多的信息泄露,用户担心自己信息安全而产生的一个附带需求罢了。

2007年微软推出vista时,提高了安全性,但是同时也影响了使用效率。很多用户由于没有办法忍受vista糟糕的操作体验而放弃使用它而转用XP系统,即使vista的安全性比xp的要高。所以从这两个例子我们可以看到,很多时候,我们以为理所当然的需求,其实并不是用户核心的需求,又或者说,存在这种需求,但是在需求平衡,他并不是占大头的。所以寻找需求,要求我们抽丝剥茧,发掘最最本质的需求。至于怎么找,这个就要看对产品和所在领域的深挖程度了。

3.用户需求挖掘中的误区

在需求分析中,常见的错误有以下几个方面:

  1. 分析对象出错
  2. 分析方法错误
  3. 永远以为自己比客户更聪明
  4. 不尊重用户的现实选择
  5. 客户和用户没有区别来对待对需求的一厢情愿,理解出错

很多产品人员对于产品的理解,很大程度上是取决于个人的感觉+身边人的感觉。但是这种需求理解方式无疑是错误的,几个人并不能代表大多数人的想法,统计学上有个著名的观点,当数据越来越大时,趋势将会越来越稳定,某些值将会越来越稳定在某个数值范围区间,所以要求我们在分析需求时,不能以偏概全,一厢情愿,必须跳出自己的圈子,去目标客户群那里,跟大量的人接触,跟他们聊产品。让他们来评价产品,这样得到的产品需求,才能够真正的反映绝大部分用户的需求。

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

这些小小的改变,能够让UI动效更上一层楼

蓝蓝设计的小编

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。

css布局——flex布局

seo达人

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

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

图片


容器属性:

flex-direction:(排列方向横向还是纵向)
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。

图片

flex-wrap:(如何换行)
nowrap
(默认):不换行。

wrap
:换行,第一行在上方。

wrap-reverse
:换行,第一行在下方。


flex-flow:(
flex-directionflex-wrap简称,默认值为row nowrap

justify-content:(横向对齐方式)
flex-start(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

图片

align-items:(纵向对齐方式)
flex-start:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: 项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

图片

align-content:(多根轴线的对齐方式)
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值):轴线占满整个交叉轴。

图片

 
box属性:


order:(排列顺序)
数值越小,排列越靠前,默认为0。

flex-grow:(剩余空间分配,box放大比例,默认为0,即如果存在剩余空间,也不放大)

图片

flex-shrink:(box缩小比例,默认为1,即如果空间不足,该项目将缩小)

图片

flex-basis:(box占据的宽度或高度)

图片

align-self:(单个box的对齐方式,与其他box对齐方式)

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

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

博博

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

人人都是产品经理 2016-04-19 11:20:31



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



来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

初尝竞品分析,能力以及对行业理解有限,暂无法从大的架构上完整支撑起整篇文章。希望能通过自己的亲身体验,从产品结构,产品功能,产品核心功能使用流程等角度上对腾讯课堂和网易云课堂两款产品加以梳理。之后根据用户数据调查,定位用户群,建立用户使用场景模型。并且根据KANO模型对用户需求进行归纳。进而站在用户体验的角度上给出对比分析,最后给出自己如果自己是PM的建议。期待读者和前辈拍砖给建议~

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

脑图太大无法完整显示,若脑图不清晰请移步文末网盘链接,文中涉及完整报告也保存在网盘中。

1.产品初体验

1.1 产品简介

腾讯课堂:腾讯课堂是腾讯推出的依托于QQ群的专业在线教育平台,以兴趣、语言类学习内容见长,聚合了优质教育机构和教师的海量课程资源。并于2014年4月1日上线移动端APP,作为免费的开放式的平台,腾讯课堂帮助线下教育机构入驻,不参与机构分成,还为其提供流量和功能支持。

网易云课堂:由陈能干(杭州蓝脑教育科技创始人、CEO,知米英语系列产品创始人)联合丁磊发起,网易成立项目组开发,以偏职业化的学习内容为主。产品于2012年12月上线,以实用技能类内容为主,衔接高等教育和职业应用,打造综合学习服务平台。目前有近6000门课程,覆盖近20个教学领域,百余细致分类,近5万课程视频,超过700万注册用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.2 产品结构

腾讯课堂产品结构:

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂产品结构

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从产品结构图对比来看,两款产品均从推荐,搜索,分类以及已学习课程四个方面设置入口导向课程学习板块,分别对应了不同用户(见下文)在寻求课程途径上的需求差异:第一类专业类用户可能搜索比较多,第三类兴趣类会关注推荐排行更多,第二类职业类用户可能更会比较全面使用;同时与豆瓣、知乎等流行的相关产品使用户养成的习惯一致。

腾讯课堂醒目的位置设置了学团入口,并且为机构开设单独的介绍界面,体现了作为免费的开放式平台,吸引用户互动和机构入驻的发展策略。

网易云课堂在首页设置消息提示,因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

1.3 产品功能

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.4 使用流程

腾讯课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从使用流程上看,两款产品允许在非登陆条件下进行试用,直到用户找到目标课程,准备学习/付费或者有意使用个人设置时再提醒用户进行登陆,降低使用门槛,提升了用户体验。

在登陆方式上,腾讯课堂仅支持自家qq及微信登陆,一方面利用自身通讯平台,方便以消息推送等方式进行推广宣传;另一方面保证了用户与平台(产品、客服、老师机构)间获的即时通讯。而网易云课堂采除用自家邮箱外还包括腾讯系列,微博,手机等多种身份验证方式,满足习惯不同平台用户的需求。

2.竞品分析

2.1 用户分析

根据企鹅智库发布的《在线教育市场深度报告》,我们可以获得一系列接受在线教育用户的核心信息。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从上图信息中我们可以分析得出:

  1. 用户学习学习内容主要为以英语为主的外语学习和其他留学相关学习,其次为兴趣类内容学习,以及职业证书、职业技能在内的职业提升类学习。
  2. 用户学习时间集中在晚上8:00-10:00这一绝大多数个人支配时间段,其次为晚上6:00-8:00这一通常为下班(学)通勤时间段;
  3. 用户主要集中在北上广江浙等一二线大城市,身份主要是学生和白领;
  1. 以外企职员和准备出国深造色学生为主进行语言方面学习的群体;
  2. 以都市白领为主的职业从事者,为了提升职业技能或者改变职业方向而学习的群体;
  3. 以都市白领为主为了充实生活进行兴趣类学习的群体;

之后建立用户使用场景模型:

1. 一位准备出国/语言考试的学生/外企职员,在结束一天学习/工作之后,利用晚上8:00-10:00这段个人支配时间,打开经过仔细筛选的语言课程,系统地持续学习1-2小时。在此期间认真做好笔记,提醒自己有哪些疑问点和老师布置的作业。

该类用户学习意愿较强,自控能力较好,有较强的付费意识。该类用户的学习内容比较固定,因此需要有优质的学习资源,同时由于语言学习的特点,需要有充足的互动指导。

2. 一位期望提升职业技能/改变职业方向的职场人员,查找和了解与自己期望提升职场能力相关的课程,在大致规划好课程范围后,开始在相关平台寻找是否有相关配套的课程套餐。在失望的发现没有完全契合自己规划内容后,开始按每门课独立学习的方式学习。

该类用户多是迫于找工作和升职的压力而去学习,需要提升职业技能、明确职业发展,付费意识强,也是学习意愿和自控能力最强的。该类用户时间有限,工作压力较大,因此需要学习内容有相当的实用性,能够快速学习并进行实操。

3. 一位职场人员/学生在晚上18:00下班/放学后,乘坐地铁/公交回家,途中打开手机/平板中的在线教育app,选择感兴趣的/正在学习的/随机推荐的/提前下载完成的课程进行学习。学习15-30分钟后,由于疲劳/到家结束此段学习。到家忙碌完吃饭、家务、洗澡等事情后开始学习,直到晚上22:00休息。

兴趣类学习用户多是基于某种业余爱好,利用工作之余进行学习,学习时间短、内容广泛、学习意愿并不强烈,付费意识弱。该类用户并不追求学习内容的深入,但是需要多样化,且更贴近生活和实际。

2.2 用户需求分析

根据《在线教育市场深度报告》,我们从不使用在线学习产品原因、在线学习受关注问题、在线学习产品功能需求、在线产品付费意愿等方面了解用户需求,并结合KANO法则进行分析。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

我们不妨把不使用在线学习产品原因在线学习受关注问题所包含的因素看作会使户满意度降低因素;把在线学习产品功能需求看作会使使户满意度增加因素;把在线产品付费意愿所包含因素看作使用户满意度大幅增加因素。由此,根据KANO法则,我们可以列出以下类型功能需求:

期望因素(一维因素):

  • 展示教学质量和课程内容是否优秀、价格是否合理。除了加强筛选课程质量本身外,为了让学习者快速了解课程质量和内容,相对应功能可以为:提供课程咨询、提供与学习该课程的学员交流机会、课程讲义大纲预览、付费课程试用、提供明确收退款流程等等。
  • 互动交流。相对应功能可以为:直播课堂随堂提问、录播课堂有相应交流平台、有问答答疑平台、与老师有明确联系方式等等。

必备因素

核心学习功能是否完整,使用流程是否清晰流畅,交互界面是否明确友好。相对应功能可以为:推荐、搜索、筛选、收藏分享、学习界面等基础功能。

魅力因素:

学习相关方向的内容丰富程度。相对应功能可以为:提供配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎入口等等。

2.3 功能对比分析

2.3.1 期望因素(一维因素)

2.3.1.1 了解课程:

该功能主要促使用户快速得到一些列自己关心的课程信息,进而判断课程是否适合自己,决策是否值得花费时间金钱学习,打消负面判断,最终实现课程学习。对于满足第一类对课程内容十分在意,有较强付费意识的用户格外重要。

腾讯课堂:

优点:与老师直接通过qq交谈了解课程,能够得到及时的回复,交流效率高。用户处于主动地位,因为消息接收不及时而被冷漠的概率降低,能够帮助用户顺利获得必要的信息,做出行动决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.课程介绍的内容过于笼统,不能满足用户通过查看介绍来判断课程是否值得去学的需求,没能实现将初步的兴趣转化为实际使用的过渡。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.评论区不能互动,无法通过回复评论或者私信的方式与已学过课程学员交流,新学员不能在与老学员的互动中得到期望的更适合自己的信息,这与用户在贴吧、知乎等社区形成的使用习惯相违背,新用户从老用户获得针对性信息的需求没有被实现。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。尤其对于第三类用户,进一步减少其付费积极性。

4.付费课程缺少体验学习部分,用户不确定课程质量,会认为盲目付费有一定风险性,提高了付费课程的使用门槛。

网易云课堂:

优点:课程简介内容相对充实,对适合人群有一定划分,能够帮助用户对自身进行定位,用户能够快速进行决策判断是否应该学习该课程。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.通过站内信与开课老师或机构咨询,与qq等IM工具相比,沟通效率低,用户在交流中处于被动等待的地位,容易因为回复不及时被冷漠,而丧失或者转移付费意愿。并且仅有付费课程和少数免费课程有咨询功能,但是付费和开始学习之后咨询功能消失,无法持续与老师交流。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。

2.3.1.2 互动交流:

该功能目的在于使用户与老师及其他学院通过在线交流,实现学习过程中答疑和互动的环节,更有效地达到在线学习的效果。对于第二类用户更期望主要通过网课取得一定学习效果的用户会更加在意。

腾讯课堂:

优点:

1.能够与老师直接通过qq交谈进行答疑,与现实学习习惯和行为相匹配,促使用户能够在思考和问 题得到解决的过程中获得知识,满足在对学习质量需要。

2.学团功能,提供问答式UGC互动平台,意在利用已有的老师和用户资源满足用户的针问答需求。目前在一 些专业性不是很强的板块已经取得了一定的使用量。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.无论是学习功能还是学团功能,用户之间无法进行直接交流。这作为现实学习中重要的一环,已成为日常的行为和习惯。用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,与学习期望不符,使在线学习的体验和效果变差。

2.学团功能在运营上有一定欠缺,在某些板块中提出问题久久不能得到回应,同时缺少优质的推送内容。用户的对于个性化问答以及相关内容的推送的期望得不到实现,久而久之用户将会放弃对该功能的进一步使用,造成恶性循环,UGC社区将面临崩盘。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从图中可以看出,作为本应较为热门的雅思学习学团,并没有多少参与度,仅有一些平台推送的相关消息。多少可以反映出该板块运营不足,缺少优质用户和资源的问题。

虽然提供了私信功能,但是仅能收到课程推荐和客服(咨询)消息。不能实现与老师和学员进行互动交流。虽然网易云课堂强调课程内容,但是相互交流作为现实学习中重要的一环,用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,使在线学习的体验和效果变差。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2 必备因素:

2.3.2.1 搜索:

作为定向指向用户需求的功能,应为用户提供准确内容范围,减少无关选择量。

1.显示热门搜索和历史搜索,帮助用户更快捷得进行搜索,尤其是第一类用户,需要在不同时间对相同内容进行重复性搜索时,有历史搜索功能明显提供便利。

2.在搜索结果界面提供排筛选序功能,用户能进一步缩小搜索范围,能更快捷找到自己的目标课程。

缺点:

在搜索结果界面提供分类功能,与搜索功能本身向矛盾,会误导用户使其认为能够在搜索之后继续进行分类筛查,但使用结果是跳转到分类界面,徒增麻烦。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.搜索界面未显示搜索历史,对于需要在不同时间对相同内容进行重复性搜索的用户会产生繁琐之感。

2.搜索结果界面没有筛选排序功能,用户在搜索之后需要进行大量的查看比较工作,使找到合适课程的门槛增加,体验非常不友好。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.2 分类:

使用户在内容层面上全面了解产品提供的资源,并且根据预设步骤,引导用户细化、明确自己目标课程的类别,最终实现目标课程与产品资源的契合。

采用三级分类,最大化地引导用户定位和细化目标课程,排除无关课程。起到了分类功能节省用户时间和精力用来寻找到目标课程的作用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

入口放在首页,与推荐板块结合在一起不明显。在同一个标签页中内容标题上有重复,用户不能第一时间区分掌握理解内容框架,易产生混淆之感。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

单独作为一个界面,用户能第一时间掌握理解完整内容和框架,不会产生混淆。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 仅有二级分类,没有做到最大化地帮助用户一步步定位和细化目标课程。

2. 用户在使用分类功能之后依然需要花费相当精力把无关课程排除掉,找到合适课程的门槛增加,体验非常不友好。

3. 筛选排序:把课程按照与用户需求点相符程度排列呈现给用户,为其进一步决策提供优先级。

关键词条目多,满足了用户对于价格,时新度,人气等多方面的筛选需要,有综合排序,高低排序等更加适应需求多样化的排序方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

不能进行并列排序,用户每次仅能选择一个关心的方面进行排列,手段比较单一,与用户使用最多的购物排序习惯不一致。

能够进行并列排序,可以就用户所关心的价格、时新度等同时排列,与用户习惯的网购筛选排序功能相似,满足多样的排序需求,所呈现结果让用户更容易做出决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 关键词条目单一,价格上仅能选择收费免费,排列所得结果仍然不够清晰,用户仍需要付出一定精力时间自己筛选。

2.3.2.3 推荐:

把自身优质内容呈现给用户,减少决策成本,吸引用户产生学习行动。因为三类用户所敏感内容不同可能采取不同推送策略。

推荐板块为一级课程分类+二级课程分类+课程,有学习目的用户可以轻易地理解所推荐内容大致包含信息,进而快速做出决策来判断是否有必要进一步仔细了解关注。意在吸引第一类第二类对内容质量比较敏感的用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.此环节显得与分类环节有重复之感,相同内容重复出现并占用过多空间,使用户产生疲劳感。

2.仅仅是内容的分类填充,缺少吸引用户的点,没有起到推荐的作用。

采用用户关注点作为大标题+推荐课程。相比之下,作为推荐环节网易云课堂更能吸引用户眼球,抓住用户需求点,符合推荐板块应起到的创造用户需求,吸引用户产生学习行动的作用。更多的是吸引第二类和第三类,对职场和兴趣十分关注的用户进行使用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.4 学习界面:

观看课程界面中的基础功能应该扎实完整,让用户在整个学习流程核心部分获得良好的体验。

基本功能不完整,缺少主流移动端播放器共有的手势调节等功能;对于在线学习必备的倍速播放也不支持,比较严重地影响用户的使用效果。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

而网易云课堂

优点:

1.有手势调节音量亮度、清晰度,选择线路等主流移动端播放器所具备的功能,顺应用户的使用习惯。

2.添加调整播放速度,退出全屏,一键设为已学等功能,更加迎合移动用户快节奏、使用环境多样的在线学习需求。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

亮度调节功能,手势仅能调节音量,不能调节亮度,与用户习惯相违背,没有考虑到夜间使用的情况。

2.3.2.5 收藏:

腾讯课堂提供添加课程到收藏的功能,可以在我的课程页面找到已收藏课程。而网易云课堂却缺少这一基本功能。

优点:

满足用户找到期望课程,但暂时不想报名的使用情景。比如一些有时效的付费课程,但是暂时没有足够的时间学习,用户可以通过添加到收藏来避免遗忘。

缺点:

仅能收藏课程不能收藏机构。当比较关注某一机构的课程时,需要反复搜索或者进入已学习该机构的课程,在详情界面查看该机构,比较繁琐。

2.3.3 魅力因素:

  • 在相关系列课程方面,两款产品均没有此功能。但是网页版网易云课堂推出微专业板块,提供某一领域的系列课程并颁发证书,相信之后移动端也会普及此功能。
  • 在相关资料方面,两款产品也均未提供相关功能。在网页版网易云课堂在计算机、四六级等四个方面提供相关试题,但是这些服务在向移动端的转移中可能仍需时间。不过据传腾讯课堂将在下一个版本中加入在线测试题目功能,测试版本已经发出。

2.3 流程及界面分析:

(1)整体界面

腾讯课堂:

采用上方4个Tab标签导航,分别对应发现(首页)、学团、学习计划、我的四个主要功能板块。可能因为认为用户查看已报名课程是高频行为,所以将收纳用户报名课程的学习计划放到醒目的Tab标签中。学团功能反应了腾讯课堂作为免费的开放式的平台,建立UGC、PGC社区的发展定位。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.虽然Tab标签放在上方起到显而易见效果,但是与主流app使用户养成的下Tab标签习惯相冲突,同时因为上方蓝色区域过大造成视觉上的不协调。

2.界面显得粗糙,配图与课程名称不相符,图标大而丑,占据用户过多视线,在一个屏面里提供给用户信息较少,用户需要花费更多时间和耐心去翻屏,影响用户使用的情绪。

3.因为要给学团和学习计划两个功能让出空间,分类板块被放在首页(推荐)里,而且内容上与推荐的内容有重复,在使用时会对整体框架产生不清晰的感觉。

4.推荐板块全部采用固定格式,没有滚动窗口,导致推送内容单一,更新频率低(开学后将近两个月仍然显示开学前后推送的内容)。

网易云课堂:

采用底部三个Tab标签导航,将首页(内容)、全部课程、学习中心三个主要功能包含进来,体现了网易云课堂以内容为主,所有功能围绕着将用户和课程内容更好连接而建立。

因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

优点:

1.底部三个Tab标签导航与主流应用设置一致,使用起来比较顺手,不需要让用户重新适应操作方式。

2.相比之下网易云课堂界面简洁美观得多,图标控制在合适的大小,所配图片也与主题相符,能够在一个页面获得更多信息,用户体验感好。

3.分类板块完全归纳在全部课程标签中,推荐界面完全是推荐内容。用户使用起来一目了然,整体框架结构十分清晰。

(2)使用流程

1.点击一门课程,转到课程介绍界面,包含目录、详情、评论三个界面。打开目录后无法直接进入课程,需点击下方查看任务后,再次得到任务界面的目录后才能进入课程。

没有任何意义地多添加了一个步骤,让使用过程变得繁琐,与用户的在目录中直接进入学习的习惯相违背。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.在详情界面,提供的目录摘要和学员评论两个模块没有实质内容,反而徒增用户阅读量;在点击“查看全部”后,又返回目录和评论环节。

这种设计不仅与上方标签栏重复,又增加用户阅读无意义信息的数量,掩盖了本应出现在该环节对课程进行介绍的内容。流程设计上对必要信息和无用信息筛选不当,缺少逻辑感。

网易云课堂:

相比之下网易云课堂在目录界面随点随学,虽然只减少一个环节,但是不会因为显而易见的不必要的繁琐,使用户在使用时产生抵触情绪。同时简介、目录、评价三个板块间没有相互掺杂,表现出来的无论是内容还是逻辑都更为清晰。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3期望&改进

3.1假如我是腾讯课堂PM:

3.1.1.在期望因素方面:

提供学生私信功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

按照相应分类,在课程相关页面上提供学团功能的入口,以促进用户了解并使用学团功能。同时加强对学团的运营,首先通过奖赏机制(如根据在学团上提供优质内容情况,为相应老师或者机构增加曝光度)建立优质的知识内容(比如在魅力因素中提到的相关内容),留住一批优质用户,进而进行推广,成为真正的UGC答疑平台。

提供付费课程试用,课程大纲讲义预览,在付费课程支付界面提供退款相关规则和流程等。使用户放心地花费时间或者金钱,避免因为信息缺失让用户在比较和犹豫过程中流失。

3.1.2 在必备因素方面:

解决首页的推荐和分类两个模块的重复性,去掉相对丑陋的大图标,将分类放在下拉菜单中,点击相应内容会进行跳转,在“腾讯课堂”logo处用小三角箭头作为标识。相比之前在最上面放一堆图标,然后需要不断下拉才能看完整推荐,用户的使用逻辑会更加清楚:点击腾讯课堂,用户将快速得到并掌握该产品所包含内容,点击感兴趣的内容跳转到相应推荐,之后可以继续进一步查看所有下一级分类进行了解。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

完善观看课程界面的基础功能,添加手势调控,倍速播放等一系列视频必备功能。

解决课程详情界面混乱,观看课程步骤繁琐的问题:在目录中提供进入学习界面的入口,去掉”查看任务“改为“立即学习”;在任务详情界面去掉”目录摘要“和”学员评论“两个模块。

3.1.3 在魅力因素方面:

充分利用学团平台,改变推送内容。对如配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎精华内容入口等等进行整理,作为优质内容进行推送。使用户除了学习课程内容,愿意花更多时间浏览学团提供的相关领域内容,更大化增加用户粘性。

3.2 假如我是网易云课堂PM

3.2.1 在期望因素方面:

  • 强化学员与授课老师的联系,尤其是长期、付费的课程。在详情页面老师头像出建立联系老师的入口,采用站内信或者最好能与即时通讯工具以及邮箱账号相关联。避免付费/报名后就无法联系老师的情况。
  • 提供用户间站内信联系功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。
  • 可以允许通过开课老师或者机构申请,为课程提供专属网易云协作群,在课程介绍界面提供加入入口,并且在学习中心界面中设立群列表。

3.2.2 在必备因素方面:

  • 不得不说网易云课堂界面的整体视觉效果基本没有什么可以挑剔的,只是在基础功能上还有一些值得优化的地方:首先在搜索结果界面应当加上筛选功能,其次筛选功能应当增加筛选的项目和顺序(如价格高低排序) ,同时分类功能需要增加分类层级(如编程语言需要细分成C,PHP等等),最后在课程列表界面去除无意义并且占据大量空间的分类板块,或者收纳入下拉菜单。
腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3.2.3 在魅力因素方面:

将微专业功能向移动端转移,利用中国大学mooc网的优势资源,根据用户的搜索报名情况,给用户提供更多优质并且满足其需求的教育资源,迎合用户对更多相关信息,更多专业知识的需要。比如在首页推荐中,增加推荐mooc课程板块,并且优先推荐用户关注方向相关课程。

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

日历

链接

个人资料

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

存档