首页

图片切换简易版

seo达人

css:

*{margin:0;padding:0;}

tu{margin: 50px auto;padding: 10px;width: 500px;

background: rgb(201, 230, 128);text-align: center;}



html:



<body>

    <div id="tu">

        <P id="info"></P>

        <img src="jiao.jpg" alt="冰棒">

        <input type="button" id="yi" value="第一张">

        <input type="button" id="er" value="第二张">

    </div>

</body>



javascript:

window.onload = function(){

var yi = document.getElementById(“yi”);

var er = document.getElementById(“er”);

var img = document.getElementsByTagName(“img”)[0];

var imgArr = [ “jiao.jpg”,“san.jpg”,“bao.jpg”,“hua.jpg”,“pei.jpg”,“tu.jpg”,“xin.jpg”,“niu.jpg”]

var index = 0 ;

var info = document.getElementById(“info”);



    info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    yi.onclick = function(){

        index--;

        if(index < 0){

            index = imgArr.length - 1; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }



    er.onclick = function(){

        index++;

         if(index > imgArr.length - 1){               

            index = 0; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }

}


破熵而行-驱动产品增长

鹤鹤

本文是基于我对《破茧成蝶2》读后的观点和反思,自己的项目经历跟作者相似,也是为了更好的总结这两年对产品、对设计的心得。

本文篇幅较长,请耐心阅读。主要是总结一个完善的体系,便于大家理清自己的设计思路和自我定位。


阅读本文你可以获得什么?

一、前言——拥抱变化,破熵而行

二、产品设计师的思维转变

三、对设计师的能力模型

四、设计师该关注的数据

五、产品周期影响设计策略

六、设计师顺势而为,自我定位 



一、前言——拥抱变化,破熵而行

在人口红利、流量红利、资本红利逐渐消退的互联网下半场,从“买流量、买用户”为代表的粗放式发展进入了稳扎稳打的精细化时代,需要考虑在有限的资源及能力的基础上精打细算、量入为出,让产品可持续地发展下去。


互联网产品正在从标准化、大众化转向个性化。针对垂直领域或细分用户群体的产品越来越有市场。战略层也需要抽丝剥茧,抛去形式注重产品的本质。比如一些下沉型电商业务,红包和会员都只是一种形式,其实本质还是用户追求“性价比”有利可图,所以一旦用户的“便宜需求”难以达到,还是会引发数据的下降,这就需要大量可持续资本投入维持。见利期的变长,传统电商行业的锋芒也被新零售掩盖,投资人也不断转移更创新可收的项目。所以真正的留存是可持续发展的,且需要根据企业自己的实际情况,在战略上和运营上,有一个人无我有的本质上的创新点(核心竞争力),而非形式上的创新。

Image title


在日新月异,变化百态的互联网下半场,创业者和产品设计工作者都需要改变自己的想法,拥抱变化破熵而行,保持自己战斗力,用更科学客观的方法来提升产品价值。



二、产品设计师的思维转变

产品设计师的重要标志是“以产品为中心”的思维及觉悟,即能打破本位主义,站在产品的角度,从整个项目闭环上协同解决问题,提升产品价值。设计师的角度理解,就是打开自身格局,扩展上下游的知识,通过自己的综合能力助力于业务。在此过程中职能会有跨界,比如我会提出验证数据的方法,比如ABtest,从业务角度推设计可以通过哪些数据进行提升,然后做出不同方案进行评审,推动项目实施落地。


产品设计者可以由产品经理,UX,UI担当或转变,我更倾向是全栈的UX,通过思想认知的转变,职能界线的打破来扮演这个角色。自己也是这样努力的在转型。得益于公司的开放包容,这两年我还是能承担起这样的角色,建立组织,带领团队,通过设计来提升产品价值。对于产品设计师,第一个需要改变的就是产品设计思维。



2.1从“问题驱动”到“价值驱动”

Image title


2.2 始终贯彻精益思维


互联网寒冬,连阿里都要把钱花在刀刃上。阿里8月15日发布的财报上,虽然新零售收入水平同步增速高达134%,高于上一季度132%,成阿里本季营收增长引擎,但是阿里本财季对盒马新零售业务投入仍然十分谨慎。最近两个季度盒马开始由原先的大门店业态转向更多元、成本更低的小业态的转型期,本财季内净增门店仅为15家。所以需要我们始终贯穿精益思维去做产品。


精益思想(Lean Thinking)源于20世纪80年代日本丰田发明的精益生产(Lean Production)方式,精益生产方式造成日本汽车的质量与成本优势,曾经压得美国汽车抬不起头。世界汽车工业重心已向日本倾斜。精益思想的核心就是(消除浪费)以越来越少的投入——较少的人力、较少的设备、较短的时间和较小的场地创造出尽可能多的价值;同时也越来越接近用户,提供他们确实要的东西。


那么要做到产品上的精益思维,一方面要贯彻“以提升产品价值为目标”并用数据验证;另一方面建议先用较小成本在小渠道验证,然后在扩大投入。

Image title



整个产品团队,不管是产品负责人、产品经理、设计、运营、开发都需要紧密联合在一起,为提升产品价值而努力。为什么这么说,其实本质上大家都是为了业务好,但是每个人却扛着不一样的KPI,产品经理有业务指标,运营有运营指标,设计师也有自己的设计价值观。如果大家都只为了自己,产品和运营会唯业务指标做导向,典型的就是引入大量无法留存的流量,耗费资源,最终对整个产品长期发展并没有太多价值。对设计师来说,我见过很多设计都很有偏向性,要么就是一味追求好看,感觉业务挡了自己发挥才能,要么一味分析竞品和交互,却给不出有效、有价值的解决方案。其实都不是站在产品价值上看问题,更希望是自己能交出一份满意的答卷。我自己也在一个电商摸索期犯过类似错误,无法忍受一个没有细节的产品,过多追求设计质量,而其实产品初期,负责人只想着能快速迭代,找到活下去的出路。



2.3以始为终打造数据闭环 


数据闭环就是从你的产品价值目标来拆分你的量化目标,通过设计上线等验证数据,形成闭环,然后循环优化的这个过程。需要从传统的“问题驱动”转变成“价值驱动”,因为解决问题是难以被价值量化的,整个业务发展过程中也会出现很多产品问题需要被优化,我们把“提升产品价值”作为目标就形成了“以终为始”的数据闭环。其实现在大部分企业都是以目标驱动业务的,拆分目标,变成颗粒度目标数据再进行逐步达成,这个过程不是说不去“发现问题-解决问题”,而是需要知道工作要务,“重要紧急”的先做,“重要不紧急”的长期计划实行,至于用户体验上的东西也是要有节奏的去优化。

Image title




三、对设计师的能力模型


对设计师的能力模型一直在提出不同的更高要求,无论是哪个大咖提出来的理论似乎都是非常的正确和所需要的,导致很多设计师的恐慌,我是不是要被淘汰了。

Image title

Image title


其实还是要抓住本质,因人而异看待。设计的能力分布模型,大概分为 “I”型 、“一”型、“T”型。


“I”型为单一型,传统对设计师的定义就是单一的,领域分的比较细。单一型主要看深度,深度达到一定程度可以成为专家,但是如果浅薄又单一很容易被淘汰。


“一”型为广博型,广博型最忌讳的就是成为什么都会却什么都不精的“万金油”,看似什么都懂,结果做起来什么都废。


新型模式“T”型,“T”型既有较深的专业知识,又有广博的知识面,这类是集深与博于一身的人才,也是市面上最有市场的一类。


综合性人才都是需要一个长期由深度到广度,再由广度到深度循环提升的过程,在此过程中也很容易迷失,跟“I”型对比,无法通过有限的时间都提升上去,那么需要掌握一定的方法,认识自我逐步提高。

Image title



3.1、强大扎实的专业能力——知行合一 广而不范


为什么强调专业能力,《破2》里面提到,思维是1,技能是0,话是没有错,但是80%以上的设计师还是靠技能在吃饭。有的东西你想得再好无法落地,也是无济于事。所以一个专业合格的设计师必须有强大扎实的专业能力,当然思维是内驱力,如果你的专业很出色,估计内核也不会差。


首先要有一个专业优势判断,然后强化自己的优势,再根据横向模型去扩展对自己工作最优帮助的继续加强,做到广而不范。比如你是一个ui设计师,你要保证自己的视觉能力,然后去扩展交互能力,其次再去强化动效,体验等等。再比如你是一个交互设计要保证自己对交互的精通,然后提高用研、数分能力,再去扩展其他能力。还有要做到知行合一,其实大部分我们都在通过不同的学习提升自己的能力,但是要把理论性,缥缈性的知识概念落实到自己的工作中去,努力去实践,再复盘总结不断提升自己的实操能力。比如你学了插画,你的项目上能不能用上;你竞品分析了更好的体验,能不要也变相用到自己的项目里;你新学了一些分析原理,能不能用同样的思维来分析自己的项目等等。



3.2、保障基础软实力 —— 一颗强大正能量的心


心力、脑力、体力,都要保障,尤其是互联网年轻化后,体力也非常重要,京东就直接把不能加班的员工全开了,多么痛的领悟。那么对于产品设计师其实更关键的是心力和脑力,越是高阶设计师,思维能力、洞察能力越是重要。无论是ui、ue、还是产品设计师我觉得都需要有强大的自我驱动能力,打破本位主义,不断扩展自己的专业素质,才能更好的融合于业务。阿里提出:人才是聪明的,的确很多人忽略了先天的差距,事实上同样的努力,不一样的天分,总还是有区别的,有的人适合做小兵,有的人适合做将军,但是你可以保证的是心态,心态里我总结了两个我觉得非常重要的点,一个就是皮实、一个就是积极,就是有一颗强大而正能量的心!



3.3、先让自己变得足够优秀再考虑做管理


对于走技能线还是走管理岗,很多人会想的很多。其实先让自己变得足够优秀,不断提升,一切自然水到渠成。领导者或许需要天分,管理者是每个人都可以成为的,且有一些理论和工具可以支撑的,所以很多团队会内部提拔,因为培养起来并不难。只要你足够优秀,还是很有希望做管理,相反过早做管理,自己的基石没打好,管理起来也会比较艰难。有兴趣的人可以去听一下喜马拉雅上的《可复制的领导力》。如果你励志要走向管理层,也可以根据阿里的纵向能力模型对号入座,不断提升,不过很多时候机遇也很重要。



四、设计师该关心的常规数据


想要驱动产品增长必须要对数据有所了解,来帮助我们产出更贴近用户行为的设计,同时需要了解数据产生的过程和基础工具。最基础的就是产品提出数据,让开发进行埋点,此过程中设计也可以提出自己想要关心的数据点。公司有后台可以直接观测数据,现在也像GrowingIO数据分析产品无需在网站或app中埋点,即可获取并分析全面、实时的用户行为数据,需要观察数据可以直接去后台关注,也可以让产品经理或者数据分析师给你拉数据。


页面浏览量(PV)

用户每1次对网站中的每个网页访问(成功访问/进入)均被记录1次。用户对同一页面的多次访问,访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。理论上PV与来访者数量成正比,但是它不能精准决定页面的真实访问数,比如同一个IP地址通过不断的刷新页面,也可以制造出非常高的PV。


独立访客人数(UV)

访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。使用独立用户作为统计量,可以更加精准的了解一个时间段内,实际上有多少个访问者来到了相应的页面。


用户访问次数(VV)

当用户完成浏览并退出所有页面就算完成了一次访问,再次打开浏览时,VV数+1。VV同时也是视频播放次数(Video View)的简称。


跳出率(BR)

表示用户来到网站后,没有进行操作就直接离开的比例,代表着陆页面(访客进入网站的第一个页面)是否对用户有吸引力,常用的计算方式是落地页面的访问量除以总访量。


退出率(GA )

针对网站内某一个特定的页面而言,退出率是衡量从这个页面退出网站的比例,通过一个页面的退出次数除以访问次数。退出率反映了网站对用户的吸引力,如果退出百分比很高,说明用户仅浏览了少量的页面便离开了,因此需要改善网站的内容来吸引用户,解决用户的内容诉求。


平均访问时长(AAT )

指在特定统计时间段内,浏览网站的一个页面或整个网站时,用户所停留的总时间除以该页面或整个网站的访问次数的比例。该数据是分析用户粘性的重要指标之一,也可以侧面反映出网站的用户体验。平均访问时长越短,说明网站对用户的吸引力越差。


转化率(CR )

在一个统计周期内,完成转化行为的次数占推广信息总点击次数的比率。常用的是登录注册的新流量转化率和产生实际支付的转化率。转化率是产品盈利的重要指标之一,它直接反映了产品的盈利能力。提升转化是提升产品价值的重要性指标,一般用A/Btest去检验更优方案来提升转化率。


回购率(RR)

指用户对商品或者服务的重复购买次数(回头客),是针对有购买功能的产品,回购率越高,用户粘性越高。


新增用户

既安装应用后,首次成功启动产品的用户,按照统计跨度不同分为日新增(DNU)、周新增(WNU)、月新增(MNU)。新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度。如果某产品新用户占比过高,那说明该产品的活跃是靠推广得来,这种情况非常有必要关注,尤其是新增用户的留存率情况,这种情况留存率低对产品来说也非常危险,视为不可持续发展的流量。


活跃用户

既在特定的统计周期内,成功启动过产品的用户。除此之外,我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户(按照设备去重统计)。

活跃用户是衡量产品用户规模的重要指标,和新增用户相辅相成。


DAU(日活):某个自然日内成功启动过应用的用户,该日内同一个设备多次启动只记一个活跃用户;

WAU(周活):某个自然周内成功启动过应用的用户,该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;

MAU(月活):某个自然月内成功启动过应用的用户,该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。


留存率

留存率是验证用户粘性的关键指标,既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例(留存率=留存用户/新增用户*100%)。统计留存用户的颗粒度有:
自然日:包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
自然周:包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
自然月:包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
自然日的留存中主要关注(次日留存、7日留存、30日留存并观察留存率的衰减程度。一般来说,留存率低于20%会是一个比较危险的信号。)

日留存率:快速判断App粘性
日留存率:可以很快的帮助我们判断 App 的粘性到底强不强。我们可以通过日留存率的数值来判断一个 App 的质量,通常这个数字如果达到了 40% 就表示产品非常优秀了。我们可以结合产品的新手引导设计和新用户转化路径来分析用户的流失原因,通过不断的修改和调整来降低用户流失,提升次日留存率。

周留存率:判断App用户忠诚度
周留存率:我们可以通过周留存率来判断一个用户的忠诚度,在一周的时间段里,用户通常会经历一个完整的使用和体验周期,如果在这个阶段用户能够留下来,就有可能成为忠诚度较高的用户。

月留存率:了解App版本迭代效果
月留存率:通常移动 App 的迭代周期为 2 - 4 周一个版本,所以月留存率是能够反映出一个版本的用户留存情况,一个版本的更新,总是会或多或少的影响用户的体验,所以通过比较月留存率能够判断出每个版本更新是否对用户有影响。


流失率

指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联,流失率高既留存率低,但活跃度不一定高,因此需要综合分析。也是重点关注次日、7日、30日的流失率。对于流失用户的界定依照产品服务的不同而标准不同。社交类产品用户几乎每天登录查看,可能用户未登录超过1个月,我们就可以认为已经流失了。而电商类产品用户可能3个月未登录或者半年内没有任何购买行为可以被认定是流失了,所以不是每个产品都有固定的流失期限,而是根据产品属性而判断。


一次性用户

既新增日后再也没有启动过应用的用户。一次性用户是关键的营销指标,和判断无效用户的标准,从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。


使用时长

既统计时间段内,某个设备从启动应用到结束使用的总计时长。一般按照人均使用时长、次均使用时长、单次使用时长进行分析,衡量用户产品着陆的粘性,也是衡量活跃度,产品质量的参考依据。


启动次数

既统计时间段内,用户打开应用的次数。重点关注人均启动次数,结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s,再返回或打开应用时,则统计为两次启动,启动次数主要看待频数分布情况。


使用间隔

既用户上次使用应用的时间与再次使用时间的时间差。使用频数分布,观察应用对于用户的粘性,以及运营内容的深度。虽然是使用间隔,但是通过计算同一设备,先后两次启动的时间差,来完成使用间隔统计,充分考虑应用周期性和碎片化使用的特征。


常规数据基本就这些,值得思考的是不同类型的产品,定义每个数据的具体量是不同的,而且产品周期中的不同阶段关注的主要数据指标也会有不同侧重点。



五、产品周期影响设计策略 


产品阶段就是产品生命周期,可分为探索期、成长期、成熟期、衰退期,每个阶段的设计策略和工作权重都有所不同。虽然每个阶段侧重点不同,凡是还是需要辩证看待结合实践,比如大厂的产品初期起点较高,有大流量的引流和背后大数据支撑,所以各种方式都没有太大的限制,根据业务,资源不同来根据产品用方法。

Image title


5.1探索期(产品初创期)


目标:掌控产品方向(活下去)

关注:用户价值

用户:假设用户

策略:最小成本验证产品方向

方法:假设的用户画像、产品故事地图、设计冲刺法、访谈、用户研究(定性分析)

关注数据指标:推荐意愿/新增用户数/满意度

品牌:不急于建立

Image title



5.1.1、通过访谈、调研,初步建立用户画像,抽象假象用户,提炼关键点。


用户画像是在大数据时代背景下,用户信息充斥在网络中,将用户的每个具体信息抽象成标签,利用这些标签将用户形象具体化,从而为用户提供有针对性的服务。


产品摸索期我所定义的目标用户其实并不准确,而是假象用户,此阶段的概念用户一直随着产品方向的改变而改变,所以无法确立明确针对性的用户画像信息,但是我们应该先确定一个大概的目标用户定性的去分析,区分用户角色,挖掘不同角色的痛点,然后找到解决问题的切入点。

Image title


5.1.2、利用用户诊断法建立产品假设,并进行价值评估,明确产品方向。

Image title


5.1.3、利用用户故事地图筛选核心任务及对应功能


用户故事地图可以用小会议的形式展开,就是让所有参与者一起用便签,一张一个动作,从左至右按照时间线,描绘用户在产品使用场景下所发生的所有用户行为。同一时间发生的,就写在同一位置的下方;出现同一场景不同可能的动作时,可能会形成不同的分支动作;直到重回主线或者结束支线。最后关键还是总结用户痛点和产品核心的功能点。

Image title

Image title



5.1.4、贯穿最小成本原则,最小成本试错——MVP和设计冲刺法


最小可行产品(MVP)是指可以产生预期成果的最小产品发布,对于迭代产品来说,又可以讲最小可行方案:最小可行方案是指可以产生预期成果的最小发布方案。


设计冲刺法的本质理念跟MVP还是一致的,只不过所用成本更小。设计冲刺法特点:参与人员较少且有最终决策权;闭关冲刺使用白板随时记录;适用于风险高、时间紧、起步难的情况。


MVP是最小可行方案进行发布验证,而设计冲刺是更短时间产生一个头脑风暴的真实原型,进行真人测试,这个过程并没有真正设计一款产品,而是通过设计方式做了一次早起用户调研,并获得相对有验证性的结果,避免真实上线效果不好对用户造成的负面影响。


其实市面上大部分还是用的MVP,因为实际上用设计冲刺,一个是对设计人员的要求较高,二是验证的结果由于测试范围的限制不一定与市场反应一致。与做一个小产品来说,现在更流行保险的办法可以做一个小程序,或者几个小程序进行方案对比,大流量下好乘凉,小程序的开发成本,用户引入成本更低。



5.1.5、定性为主,不断试错中掌控产品方向


船小才好调头,对于产品来说如果本身战略层出现问题,后续投入越多的资本越难收场,用户量不上不下,用户粘性不高,结果资金不够了,用之鸡肋弃之可惜,再转方向还是比较困难。尤其是用户对产品建立一定认知后,重新调整大方向,基本等于刷新用户流。



5.2成长期(产品高速增长期)


目标:巩固差异化的产品定位(活得好)

关注:产品核心竞争力

用户:目标用户

策略:大胆创新巩固差异化的产品定位

方法:提炼用户画像不断校验、用户体验地图、设计接力法(定性+定量)

关注数据指标:新增用户数/留存率/复购率/活跃度

品牌:建立有创意且能落地的品牌,加深用户认知,占领用户心智

Image title


5.2.1、用户校验,确立产品定位


产品成长期用户大量涌尽,掌握一定数据和掌控产品方向后可以通过数据分析或用户调研,来看实际用户特征和之前假设的用户人群特征是否符合。集中精力服务好最重要的用户群体,定性挖掘、定量验证的思路去完成用户画像。


可针对目标用户进行调研和深度访谈,从用户选择产品最关键因素提炼产品目前的核心吸引点。用户的关心点也要跟产品本身的当前定位做对比,看用户接受到的点是否是产品让他们感受到的点,感受不到又是什么原因,不断提炼核心竞争点的优势。

Image title


成长期需要确认产品的定位,就是差异化的产品方向,即差异化的目标用户群体(价值排序)、差异化的产品及服务(竞争优势)、差异化的产品价值(核心优势)。


价值排序:通过了解用户特征,明确用户分类及相关利益群体,然后明确把谁放在第一位。在实际产品设计过程中,我们也可以用价值排序,来设计产品功能和交互体验,比如平台收费是针对买方还是卖方。


竞争策略:避实就虚地找到竞争对手的盲区或自己的优势所在,为用户提供差异化服务。竞争策略主要依赖高层的洞见和判断,如果你出产品和竞争对手没有本质差异,那就考虑是否可以服务与不同种类的人群或者能提供不一样的价值。比如同样是做电商,你的质量、价格、物流、种类是不是有优势。



5.2.2、确立增长指标


增长指标是对应于产品差异化定位的可量化指标。增长指标要符合:可成长性,客观性,有方向性。避免主观,虚荣的指标,最常见的就是过分关注获客拉新指标,留存不足,及前后导向不一致的情况。至于用户满意度、任务完成度等主观的体验指标可以作为参考,但是不能作为最终的增长指标。核心关注点是转化、留存、复购、活跃度等指标,既侧面体现了良好的用户体验,增加了用户与产品粘性,让产品长期可持续发展。



5.2.3、利用用户体验地图(E-Experience Map),同理心地图,结合增长指标大胆提出假设,排优先级,并根据开发成本等因素通过四象限原则,选择最小成本提升指标   


用户故事地图、用户体验地图、同理心地图的区别:用户故事地图强调用户使用产品/服务的任务流程,用它来筛选当前最重要的任务及对应功能,以完成最小可行产品设计;用户体验地图不仅包括任务流程,还包括与之对应的体验问题,更关注用户的体验情绪,从而找到提升体验的机会点;同理心地图帮助我们在每个不同场景下与用户换位思考、打开思路,挖掘用户选择决定的深层动机。在实际使用场合没有严格界线,可根据实际情况使用核心点进行分析。

Image title

Image title



5.2.4、体验升级——逐步发布验证(设计接力)

大版本迭代的优点就是一旦成功,可以大幅度拉开和竞争对手的差距,但是一旦失败,会影响业务的发展得不偿失。所以为了预防风险,大多数公司会在上线前先进行可用性测试,进行必要的线上验证再发布。通过不断分析增长指标,找选设计方向,进行模块拆分,接力发布,循环验证,提升产品价值。


先验证后发布方法:


a、A/BTest

制作两个(A/B)或多个(A/B/n)版本,在同一时间维度,分别让组成成分相同(相似)的访客群组(目标人群)随机的访问这些版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用(消除UX、bug带来的影响数据),并不断迭代进入一下个A/BTest。产品成长期,中小型企业可以用局部变量测试,大型成熟产品可以重叠实验(更多、更好、更快)。

要求:1、随机抽样;2、足够的样本量。

优点:可以在同时段观测效果,受到环境影响因素一致,容易客观验证方案

缺点:需要占用开发资源,完整的一次测验需要花费时间较多


b、灰度测试

先进行一个小范围的尝试工作,然后再慢慢放量,直到这个全新的功能覆盖到所有的系统用户。比如Facebook先发布1%,慢慢推广到全部,现在普遍大厂也会用到这个方法,减少大版本试错带来的损失。灰度测试的同时可以A/Btest,在灰度测试过程中选出最佳方案,然后全部发布。

合适:用户群体较大,否则会因为流量小而导致结果不准确。


c、分时段测试

可以通过不同时段测试,对比数据。为减少对用户过多干扰和负面影响,可以先用夜间或用户量较小时段切换到新版本。

缺点:得到的是环比数据,不像ABtest对比结果明显有参考意义。而且在没有确定方向的摸索阶段,用分段测试,数据指向不明确,通常会存在数据一直不好的情况,频繁换方案, 自乱阵脚。


d、分渠道测试

渠道推广对业务支出也是占比较大,优秀的商业设计也能让渠道转化提高,从而减小获客单价。所以渠道上的设计都会做n版,优化总结,提升最终的数据。


e、新旧版本切换

新版本上线后留出”返回旧版“的入口,这样一旦用户不喜欢新版可以切换到老版本。这样可以很大程度降低风险,还可以监测不同版本数据,还给用户一个缓冲时间让用户逐渐接受新版本。

缺点:如果新版本运行效果不佳,决策者会进退两难,一般在较有把握,或者想教育用户新的体验会局部用这个方法。



5.2.5、寻求差异,扩大竞争优势


A、疯狂联想法

a、横向联想

结合产品定位,先得出核心关键词,再在核心关键词的基础上继续发散。比如一个男士护肤品电商网站,核心关键词是:垂直、B2C、男用户多、护肤品等,可以根据这些关键词找到合适的参考。值得注意的是关键词的选择也可以根据你需要的提升的核心价值点去联想。

Image title


b、纵向联想

纵向联想是从一个关键词出发,纵向不断延展出新的关键词,并找到对应竞品。比如保健品有一个重要的特征就是注重功效,我们可以想到具有同种特征的护肤品。

关于联想,在头脑风暴中并没有特备严格的步骤方法规定,可以根据自己的认知由近至远拓展。思维跟横向纵向也是类似,可以先参考最典型接近的,再利用共同关键特征来扩散,也可以利用不同组合的关键词重新找到相应的竞品。最后根据四象限原则,把相关度高,体验好的,更有参考价值的竞品拿来精细分析。

Image title


B、竞品对比分析法

通过联想发我们也能联想出不同维度的竞品,这师我们需要考虑竞品哪些部分类似可以参考的,哪些部分不同需要注意的,但同时也可以考虑借鉴不同部分的优势转化成自己的优势。比如最早弹幕只出现在视频上,抓住弹幕可以活跃气氛,满足观众发表评论和观看时时评论达到的心里共鸣,增加用户之间的互动性,从而提高用户粘性的核心点后,弹幕也出现在直播、音频、新闻,甚至是炒股软件上。

Image title



5.2.6、做有创意且能落地的品牌设计


品牌的核心点就是让人“记住”,最好能找到目标用户心智中空缺的领域,在这个垂直领域占领优势位置,所以品牌强调差异化。比如一想到打车就想到滴滴,一想到购物就想到万能的淘宝,一遇到问题就上百度。


传统的方法:了解业务——发散关键词——情绪版——视觉方案

精益方法:内外调研——语言钉——个性关键词——视觉锤(快速落地)


成长期的品牌建设更需要突出创新性,让人眼前一亮,记忆犹新。这里展示展示了御膳房网站的品牌三元法示例,御膳房的风格的确做到了主题感强烈,让人眼前一亮,不过个人认为作为科技网站,还是略显了花哨,安全感不足。品牌三元法是也是通过对产品的了解,分别从理性业务层和感性业务层出发,延伸个性创造层,记录关键词展开设计,其本质还是围绕业务拓展价值。成熟的品牌设计者,不仅要从业务出发,更要考虑不同场景的品牌应用,打造统一有个性的全方位品牌。

Image title


5.3成熟期(产品稳定期)


目标:提升产品价值(赚的多)

关注:商业变现

用户:活跃用户

策略:科学严谨提升商业价值

方法:用户体验地图、设计跨栏法(定量为主)

关注数据指标:活跃度/流失率/营收/成本率/现金流

品牌:扩大品牌影响力和品牌价值

Image title


5.3.1、用户分层,寻找核心价值用户


a、核心价值用户是留存用户中最活跃的部分

b、找到核心价值的用户特征


通过RFM模型来筛选核心价值用户

R=Recency最近一次消费

F=Frequency消费频率

M=Monetary消费金额

(RFM,1代表高,0代表低)

(111)重要价值客户:最近消费时间较近、消费频次和消费金额都高,典型的核心价值用户,高留存、高活跃度

(011)重要保持客户:最近消费时间较远,但是消费频次和金额都很高,说明这是一段时间没来的忠实客户,需要与他保持联系,召回

(101)重要发展客户:最近消费时间近、消费金额高,但是频次不高,忠诚度不高,很有潜力的用户,必须重点发展

(001)重要挽留客户:最近消费时间较远、消费频次不高,但消费金额高的,可能是将要流失或者已经流失的用户,应当采用措施挽留


一般公司都会有利用RFM来观测核心用户,针对不同类型来做不同的措施,但是所有数据的利用率都跟产品客观成长度有挂钩,成长期可能还不是那么细分,成熟期就会更精细的分析。最简单粗暴的就是看看最近一次消费,超过多少天就短信消息召回给个优惠券之类的。


c、总结核心规律,改进产品,调整运营策略

找到核心价值的用户特征后,需要探测他们的行为模式与贡献的规律,从而激励更多用户贡献更多价值。比如喜马拉雅,找到订阅节目的用户明显留存度更高,用户活跃度也高于随便听听的用户的规律后,在产品设计时会把订阅放在显眼的位置,并且在首页把用户感兴趣的模块放在优先的位置来提升订阅度。

Image title



5.3.2、商业价值提升


a、以科学创新为代表的产品核心竞争力:数据和技术驱动一切,科技提升效率。

b、用户价值:用户价值是商业变现的基础,没有人会在没有用户转化的平台上投入资金。

c、商业变现:用户付费,广告收入,与用户体验合理价值平衡。


在商业变现阶段,除了要着眼于如何更的赚到钱,也需要平衡用户体验,且不断提高产品本身的价值。百度在成为巨头后,百度贴吧过多不相关的推送导致用户粘性急剧下降,魏则西事件等负面消息,再到陆奇离职,目前市值缩水至365.38亿,被拼多多赶超。而微信和抖音这方面做的较为出色。微信是迫不得已不愿打扰用户,所以广告频率一直不高,广告质量也有所保障,会根据用户的喜好推荐广告。抖音是沉浸式的广告体验,一不留神就进入了广告的坑,而且广告的形式与抖音原生用户的不谋而合,有些有创意的网红视频用户的接受度也很高,从而会极大的提高转化,对用户体验的影响也较少。



5.3.3、增值假设——围绕目标增长(量化设计师的价值)


设计策略:稳定、规范、统一、科学严谨


a、拆分变量科学测试

到了成熟期,设计师在修改设计方案的时候不是改的越多越好,有的时候一个模块的重构,一个按钮的颜色变化都能影响数据转化,所以需要通过科学的方式,调整到合适的颗粒度去测试。  

Image title


b、把AB测试作为一项基本制度

如果想要验证设计效果,那么可以在保持功能不变的情况下,只看设计方案的区别,这样就可以有效的量化设计。


2018 年,中国移动互联网用户增长放缓,上半年仅增长 2 千万。但是头条系却异军突起,超过百度系、阿里系稳居总使用时长第 2 名。头条系的崛起有许多的原因,强大的数据监控系统,成熟的增长引擎,上百组同时进行的AB测试等等都在帮助产品经理和运营们找到最优的方案。


c、用户增长地图

用户增长地图是借用AARRR概念作为骨架的展开的,通过AARRR模型针对没一步提出增值假设,以提升总体价值指标。

Image title


5.3.4、提高整体效率:通过DPL(Design Pattern Library)组件库批量优化;科技力量-人工智能


a、根据长期积累下来的AB测试结果,沉淀规范后,把这些规范内容快速复制到若干条产品线上。从产品周期来说,摸索期需要建立一定的视觉规范,但不合适做细致化的组件,等业务慢慢稳定下来,不会有大方向的改变后,需要慢慢建立细致的组件库,以方便团队合作。每个业务也有其特殊性,to B的业务一般建立组件库会比较早,模式化的东西较多,针对不同的B端也会有定制化的内容,DPL可以大大提高整个业务的效率。

Image title



b、通过智能科技的力量来提升整体的效率。比如阿里的千人千面,通过消费者偏好进行个性化投放,鲁班系统对banner进行简单的合成,大大提高大促期间海报生成的效率。



5.3.5、打造统一的全业务线品牌设计


a、形成统一且独特的品牌印记

成熟期面对繁多支线,先对内树立统一的品牌形象;主品牌与产品调性统一;线上线下风格的统一。


b、品牌印记提取与深化

品牌趋势都是化繁为简,比如苹果、奔驰的logo就越来越简单,利于大众记忆,也利于线下拓展。

提取出logo基因去强调品牌作为拓展延伸,比如天猫和考拉的吉祥物头部图形的简化应用,都比较简约,易记,易拓展


C、成熟期的品牌也不是一成不变的

成熟期,产品在市场中已经有了稳固位置,品牌不宜过度设计,而需要采取保守、稳重、扩展性强的风格。品牌的更新升级,一方面顺应企业的战略方向的改变,一方面顺应整个设计前瞻潮流。比如美团变黄的品牌升级,是为了更好的从外卖这个触点深入用户心智,而OPPO ,vivo等品牌升级感觉更美有特色,其实也是顺应国际化的设计趋势,更有文字辨识度,更国际化。

Image title



5.4衰退期

每个产品都有一个生命周期,这是受市场因素导致的,此时用户会逐渐流失,既被其它新产品的体验模式所吸引,所以这时应该更关注用户流失后使用的产品,分析竞品的商业模式和功能,同时监测流失速度,需尽快拓展产品边界,寻找新的切入点。不过好的产品都是在不断优化,迎合新时代的需求,不断扩大自己的影响力和产品价值。之前文章我也写过关于微信的未雨绸缪,不断优化。微信的用户粘性强大,谁也不好说他能再打几年,像抖音这种迅速崛起的产品是否是现象级的昙花一现,也要看它是否能与时俱进。



六、设计师顺势而为,自我定位

一般来说小公司的大部分项目处于探索期和成长期,而大公司的项目很多处于成熟期,也有一些孵化探索的项目。处于探索期的项目,需要大胆创新同时,有可能变化极快,无法冷静下来根据数据用不同设计方式达成增长目标,我就经历过一个首页一星期全新大改版n次的惨痛经历。反观大公司很多流程复杂,验证方式系统完善,有些设计师感觉没有用武之地,不能施展才华。


根据不同阶段采取适合自己的设计方法,驱动产品提高设计价值,切勿漫无目标、抱怨环境,浪费时间。


如果你思维极其颠覆爱挑战可以选择从0到1的新行业;如果你喜欢创新可以选择成长型的行业及公司,或是成熟公司里的成长型项目;如果你追求科学、严谨、,那么可以选择成熟型的公司、项目。

转自-UI中国

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

详解交易型电商/内容型电商中的消费者行为差异

涛涛

本文列举了交易型电商与内容型电商的对比,以及他们的消费者交易行为的四大区别。

No1  :单独评估vs联合评估

消费者看到一个产品的时候,有两种典型场景:

在内容电商(比如看到新媒体文章推荐)时,用户一般处于单独评估状态。

比如顾爷发过一个软文卖“电表箱挂画”——家里电表箱很丑、不美观,用一副画把它遮住,显得家里美观又有逼格。

当看到这个商品推荐广告的时候,你就进入了“单独评估”状态,只比较眼前的画以及你的现状(没有电表画)。

这个时候你在意的是产品本身好不好,带给你的感觉怎么样,以及价格能不能接受。

很可能的结果是,你看到这幅画200多块钱,也不太贵,所以就买了。

而如果你不是在阅读顾爷公众号的时候看到商品,而是进入淘宝、京东这种交易型电商,心理就不一样了。

在交易型电商中,用户一般处于“联合评估”状态。

比如淘宝搜“电表箱挂画”,你看到的页面是这样的:

这个时候,你进入了“联合评估”状态,你主要的比较点不再是“电表箱挂画”和你的现状(没有电表画),而是众多的电表箱挂画中哪个最好。

如果你仔细盯着上面的淘宝图看,我想你此时的消费者心理已经发生了这些变化:想要看看不同价位的画之间到底有什么区别。

材质?大小?印染工艺?谁画的?急于寻找一些让自己感觉到熟悉的信息。

比如扫一眼看看哪个品牌是你听过的(即使是华为牌的画,此时都更能抓你的眼球)。

赶紧比较哪个店销量大、好评多(咦?刚刚看到顾爷的,怎么不这么关心销量信息?)

开始在意价格,并且重新思考买这个画到底值不值。

然后,你可能不会买电表箱挂画了,甚至会觉得买一幅这样的画很多余,还不如买一箱牛奶补补身体。

表面上看,一样的产品,你仅仅切换了评估方式(单独评估VS联合评估),你选择产品的标准却产生了巨大的变化。

而就像我们前面说的,为了“在竞争中存活”,你不得不了解,“决定用户选择”的因素,到底产生了什么改变:

NO2:感性线索vs理性线索

联合评估环境下,消费者更加注重容易对比的理性线索,比如材质、大小、印染工艺等,这是因为联合评估的时候,我们看的是选择项之间的不同,而不是选择项和现状之间的不同。

而在单独评估的时候,消费者会更加容易受到感性线索的影响,大脑进入的不是“计算模式”而是“感觉模式”,会更容易感觉到增加一个画带来的生活改变、这幅画整体的设计感、流露出的艺术气息等。

所以,如果你是在参数上占优的产品,比如小米或乐视的手机,进入联合评估会非常有利,因为用户非常在意跑分。

如果你是在参数以外的体验上占优的产品,比如设计精美和有情怀的手机,进入单独评估会比较有利,因为你的优势无法被直接计算,难以在联合评估中占优。

有研究发现,假设有两款同等价格的冰激凌,一款是满满地装在小杯子里,总共50毫升;另一款是在200毫升的杯子里装了半满,相当于100毫升。

看到两款冰激凌,消费者却又会选择半满但是量多的冰激凌——废话,大家又不傻,看数据明显这个给的多。

再比如,找工作的时候,如果只看到一个职业选择,大部分人会对那种工作内容激动人心、公司名让人仰慕、发展前景好的工作更满意(而不是单纯的薪水)。

而在联合评估的时候(同时拿到很多offer),大家比较来比较去,最终更容易选择薪酬更高但自己实际上并不喜欢的工作。

因为联合评估的时候,我们更容易忽略主观感受,选择那些“数据”和“参数”上更牛的选项。

所以在淘宝上,你可以直接根据材质、大小等性价比选择一个画,即使这个画买回去后你并没有像买顾爷的画那样惊喜。

这也意味着,在交易型电商环境下,拼参数、拼数据的产品容易获胜,而在设计感、原创性上占优的产品,难以赢得顾客选择。

而在内容型电商中,我们是单独评估,这时候设计师原创设计带来的冲击感,可能直接让我们选择去购买。

这同样意味着,在交易型电商中,我们更容易受到销量领先、知名品牌等信息的影响,因为这也容易比较。

而在内容型电商中,我们则直接感觉对这个产品喜欢不喜欢。

NO3:高端vs低端

  • 联合评估状态下,我们会进入“计算模式”,更加注重价格信息(因为容易比较),所以低价品的销售会非常好。
  • 单独评估状态下,我们会更加注重主观感受,更有可能忽略成本,放纵一下买个自己喜欢的,所以高价品、享乐品的销售会非常好。

之前我遇到一个自媒体卖产品的客户,同样的产品(高端有设计感的杯子)推送给同样的粉丝,一个用淘宝平台,一个直接用微信嵌入的电商平台,结果后者转化率高了十几倍。

其实一个很重要的原因就是:淘宝本质上属于交易型电商,会强迫所有消费者自动进入联合评估的状态。

在这种状态下,用户会更加在意成本信息,价格敏感性增强,从而导致更少人选择高端产品、享乐产品。

所以高端品牌(比如LV)在线下一定是用专卖店,而不会进入卖场,因为后者是联合评估。

总结

在内容电商环境下,更多人会在单独评估状态下购物,出现这些变化:

  • 性价比的作用性降低,而感性因素的影响会升高(比如设计感、悠久历史、情怀、故事等)。
  • 低端产品的销售会降低,原来很难卖出去的高端产品、享乐型产品会更容易卖。

NO4: 主动搜索vs被动搜索

如果在淘宝、京东购物,此时你的心理状态经常是:我要买东西。

你处于“购物”(shopping)心态中,大脑中经常装着某个潜在的任务——比如要看看有没有好看的衣服或者想买一箱牛奶存放到冰箱。

这个时候,我们就说你处于“主动搜寻”的心理,你会对将来可能会购买的产品信息更加敏感,而对无关信息不那么敏感。

而在内容电商环境中,你本身正在专心看网红的直播或者某个自媒体的内容,这个时候突然看到有个产品信息(比如讲健康的播主,推荐了新型智能牙刷),此时,我们说你处于“被动接受”的心理。

这有什么区别呢?

研究发现,在主动搜寻的心理中,我们会更加关心直接与任务相关的信息,而对与任务无关的信息减少关心。

比如你想挑一款面霜,会在大量的面霜相关的商品中进行比较,对面霜相关的信息非常敏感。

而如果此时偶尔看到有个叫做“面部喷剂”的新型产品,你可能压根不会关心(因为你正在找面霜),即使它也可以帮助你改善和保养皮肤。

(ps:这个产品是我编的,用来制造未知感,实际上不存在这个产品)

所以在交易型电商中,各种新奇、未知的产品,其实并不好卖。

有个知名的“看不见的大猩猩”心理实验证明了这一点。

心理学家召集一些志愿者,给他们布置任务:数一下在接下来的视频中,球员一共传了多少次球。

然后在视频一半的时候,有个人穿着大猩猩的衣服进场并且做了欢呼的动作。

实验结束,心理学家问志愿者:球员一共传了多少次球?大部分人答案都对了。

但是接着问:你们有看到一个大猩猩吗?结果超过半数的人声称没有看到大猩猩。

这是因为看视频的时候,大部分人聚焦于“数传球”这个任务中,从而自动忽略了与任务无关的信息(大猩猩)。

这也导致了用户在京东选购面霜的时候,可能更容易关注面霜本身,而不是主动好奇地去寻找除了面霜还有什么新型产品可以替代。

而如果是在内容型电商,用户事先没有觉得要买面霜,而是在看一档教你如何保养面部的节目,就更容易接受一种新型的护理面部的方式(比如XX面部喷剂)。

总结

内容型电商,比交易型电商更适合销售新奇产品。

文章来源:人人都是产品经理

试图颠覆在线文档协作的微软 Fluid Framework,到底有什么独特之处?

涛涛

一次会议的演示文稿,通常是一个 .pptx 格式的文档,而日常来往的邮件附件里的文档则多是 .docx 和 .pdf 格式的文档。当然,设计师更熟悉的可能是在 Adobe Photoshop 中可以打开的 .psd 格式的源文件。

我们熟悉了这种各司其职的格式体系。

而网络正在改变这种格式体系。各种服务和功能大都「在线化」,大家都熟悉在线看视频,已经不会去分它是 .mp4 还是 .flv,在线音乐是 .mp3 还是 .flac 已经无人在意。而更为重要的文档和效率类的服务也是如此,且不说微软的 Office 365 和相对更加轻量的 Google Doc,国内的 腾讯文档和石墨文档等在线文档工具,让我们越来越少地接触带有.docx 后缀的本地文档。当然,这并不是意味着本地文档就此消亡,但是这种去本地化的趋势非常明显。

如果文件的格式已经不再清晰可见了,那么概念的界限自然也会逐渐淡化。一个记录文本的文档和记录表单的文档为什么不干脆融合到一起,并且适应用来展示的需求?当然可以。

今年年中在 Microsoft Build 大会上微软展示的 Fluid Framework 就做的更加彻底。

打破格式界限的一体化文档服务

无论是源自 Word 里面的富文本还是 Excel 当中的表格,它们甚至不用以单一完整的文件而存在,它们在网络上传递的时候,将会是一段简短的链接。但是在 Fluid Framework 的支持之下,呈现出来的,则是一段可交互的、具备编辑功能的、带有内容的模块。

说起来,并不难理解。在有 Fluid Framework 支持之下,任何网络环境都会是一个简单纯净的画布,一个可以承载不同类型文档和功能的空间。整个 Office 庞杂功能体系,你都可以按需取用,提取出来拉到 Fluid Framework 中使用。

「我们确实需要在关键领域,针对核心技术进行创新,」 Microsoft 365 负责人Jared Spataro在接受The Verge采访时说道:「 Fluid Framework 是我们既是协作创新的新方式,也是未来承载各色内容的文档的新载体。」这种新的文档框架让用户能够拆解不同类型的内容,并在不同的应用场景和不同文档中轻松地取用。

Spataro 还说道:「Fluid Framework 沿用了一部分以往文档的概念,但是将这些格式和文件彻底拆碎、打散,然后用云端的网址链接将它们逐一代替代。不同的链接承载放置不同的内容和组件,因此从文字到表格,再到图形化的可视化内容,所有这些都可以随意地整合,轻松集结在一个地方。然后,Fluid Framework 让你实时访问所有这些内容,因此它是动态的,可交互的,是完全可协作的,并且可以便捷共享的」。

面向下一个时代的交互模式

作为一个尚且处于早期阶段的服务,目前Fluid Framework 还只是打通了 Office 自家的文档体系。但是即便如此,这意味着你可以将任何一个文档当中带有相应功能的内容,无缝地与人在 诸如笔记工具 OneNote 随时随地嵌入 Excel 的模块和丰富的表单、即时通讯工具 Teams 中加入演示文稿,并且和同事一起修改其中的样式,替换图片,增删动画而无需离开,你甚至可以直接在你网页的 Outlook 邮箱里面,直接编辑当月网站数据所生成的表单和相应的柱状图。

当然,这还不止。人工智能功能的加入,让 Fluid Framework 可以做到更多事情,比如发布会现场所演示的,实时发布信息,然后 AI 协助将信息实时翻译成不同的语言,分发给不同国家的同事。

 

这种全新的功能,让内容协作中间大量复杂的概念和环节都被移除了,这种程度的变化是惊人的,它意味着交互的模式,从最底层的概念到呈现的方式,都发生了改变,而这种改变还会随着产品迭代和时间推移,而进化得更加智能、无缝、微妙。

Spataro 总结道:「不同格式的文档,一直是人们思考如何制作内容的思维框架。但是 Fluid 往后退了一步,重新审视了一下这个既有的体系,然后展现了一个新的可能:我们不再需要这些主导一切的文档格式和不同类型的文件。我们不用在处理表格的时候就必须联想到 Excel,写文本的时候也不必去限定工具必须为 Word,而可视化内容的展示也不再拘泥于 PowerPoint,你可以在任何地方用任何类型的内容,我要说的是,我们不再有文档了,我们拥有一个无所不能的画布。」

而这个全新的东西,最近刚刚开始对外开放了申请入口:

Fluid Framework Developer Preview

从3G时代就开始的探索

当然,如今看起来颇为具有想象力的 Fluid Framework ,它的核心思路其实并不是什么新鲜东西。

在线协作的概念由来已久,《连线》杂志前主编凯文凯利在他1994年出版的《失控》当中早已提及相关的概念和想法,但是在如今实际上要打通新的领域,纳入一个新的格式,加入一个新的功能,都需要足够的基础才行。

Google Wave 是这个领域的先行者。在一个画布之下,进行多格式、多样式、多人在线协作,几乎完全无界的在线协作模式是令人炫目也让人无所适从的,这一产品最终失败了,但是它在技术和架构上的遗产足以反哺出 Google Doc、Google Drive 这种级别的产品。

Google Wave 的想法在当时确实略有一点天马行空,实际应用场景和需求并没有跟上,对于网络带宽的要求在当时也相当苛刻。而如今上线的 Fluid Framework ,应该也是从这些失败的前辈身上汲取了不少经验。

立足于微软最扎实的 Office 365 这一云端服务来进行铺设和测试功能,在服务群体上,则选择了需求更加清晰具体的企业用户(尤其是协作服务),来作为初始的切入点。这样的限制,足以说明微软的审慎和重视,他们甚至准备好了以年为单位来进行迭代。

微软对 Fluid Framework 充满了期待,他们相信这个东西能够重塑行业,甚至重塑网络本身,也许到明年5月的开发者大会上,能够看到一个截然不同的 Fluid Framework。

文章来源:优设

为什么要进行竞品分析以及关键准则

涛涛

竞品分析是UX设计师的标准工具之一, 且用户体验设计师的主要交付品之一就是竞品分析报告。在设计一个新的方案之前,我们往往会查看其他类似的产品,了解其他人做的相关工作,希望从中找到任何弱点或者优点,并期望在此基础上进行改进,这将利于你的设计。事实上,竞品分析已经不再局限于一种工具方法,更是一种思维模式,如何对比分析,如何批判性的进行比较以及从差异中获取价值。


UX设计项目会遇到哪些类型的竞争对手?

这个问题可以理解为,我们要分析哪些竞争对手?一般来讲,所有UX项目都面临两种竞争,一种是直接竞争对手,即业务有直接冲突,涉及到具体的利益冲突,商业冲突。例如滴滴和uber,淘宝和京东。另一种则是“间接竞争对手”,往往针对某些相似的产品模块,这里的竞争并没有准确的定义,只是为了比较而给与的一个名称。 例如你在进行自家产品登录注册模块的设计,此时你不仅仅可以研究一些直接竞品,也可以研究其他拥有此功能模块的产品。而该产品与你的产品并没有构成竞争的关系,只是提供了一个参考方向。


为什么要进行比较?

关于这个问题有两个答案,首先,调研竞品发掘哪些功能或服务是他们不能做或者没有实现的,这就是我们的产品可以利用的机会点,以提供新颖的或者说更强大的功能,从而提高产品竞争力。例如顺丰快递首先开创了机器填写快递信息的功能,从而大大提高用户填写订单的效率、准确度和满意度,进一步提高品牌竞争力和服务水平。


其次,检查其他设计师对相同需求的解决方案必然会对你有所启发,有利于你从中获取灵感来优化自家产品。例如信息架构的优化、或者简单地操作流程的优化。参考竞品意味着你可以不断从中学习,把竞品的每个模块、步骤拆解开来,分析其背后的设计原因及它们如何发挥作用,这将有利于你的产品设计。


参考竞品首先意味着你能够达到和竞品同一水平的用户体验,因为有了参照标准相当于指路明灯,竞品的优秀体验也会督促你不断优化自己的产品。但竞品虽然为你创造了一个标准,同时也会限制你的思路和想法,使你可能错过一些更优秀的解决方案,参考竞品能让你追赶别人,但无法让你完全超越他人。因此仅仅复制是不够的,必须融入自己的见解且时刻保持创新意识。


对直接竞争对手进行分析

通常,竞品分析发生在项目的早期,你或许会寻找市面上是否会有竞争对手,然后尝试着从竞品中寻找优点和弱点,以推动自己的产品。如果没有竞争对手时,往往可以从目标用户入手,因为用户实际上拥有自己的解决方案或者说策略,例如在滴滴流行起来之前,对应的用户群往往使用出租车来代替出行方式。目标用户在这之前是如何解决他们的需求的?你应该可以获得一些间接可比的方案,收集用户的相关想法有利于推动你的产品设计。


在产品上线后的运行阶段,仍然需要做竞品分析,此时或许存在一些新兴的的竞品,虽然是后来者,但往往会在交互、体验或者运营策略等方面碰撞出一些新的创意。根据竞品的功能策略,你需要进行一定的调整,不断对产品迭代优化。除此之外,产品有时需要做一些追随趋势的更新,例如视觉风格、新的交互设计语言等。


如何从间接竞争对手那里获得灵感

间接竞争对手也会给你一定的启发,作为一个用户体验各种产品时,留心那些优秀的设计,可能是视觉方面也可能是交互方面,总之这些优雅的设计将会成为你的灵感之源。然而所有的设计都有其适用场景及背后的设计原理支撑,在海外设计经验中一再强调的 context(上下文)就是这个意思。


优秀的设计都是最适合自己的产品和策略的设计,而不是最美观或最的。因为设计不仅仅包涵体验更是要兼顾业务。同一个设计在一个地方发挥作用并不意味着移植到其他地方仍然有效。


例如一个简单的登录模块的设计,按照常规经验,以目前微信的受众数量做参考,可以无脑选择微信快捷登录,这无疑是最便捷的方案,但为什么很多产品仍然采用手机登录?因为一个注册的手机号码能为公司的未来带来极大的增值,每个号码背后都是一个用户,且通过手机号可以对这个用户进行持续的推广营销,如拼多多的短信推广,移动联通的电话推广。


所以,一切的设计都应以设计背景,业务诉求为基本原则来进行,盲目的追寻极限的视觉和效率,盲目的信奉设计潮流趋势都是不可取的。好的设计和时尚的设计不同,好的设计有持久的价值,是美学和体验的结合,并以基于心理学社会学的用户研究为后盾。这样的设计符合用户的需求同时能为企业带来收益。而时尚的设计则会随着时间流逝而销声匿迹。


一味追寻潮流的应用程序设计,公然违背基本的可用性惯例,违背交互设计的基本原理,很有可能在市场中失败。——Prototyper.io UX首席负责人Miklos Philips



竞品分析时谨记五个原则

为了保证你所进行的竞品分析的有效性,需要谨记以下五个原则。 


1.理解背后的需求

分析任何设计之前都需要理解设计背后的核心需求,这并不是简单的查看表面内容,除了交互体验上的思考,更要深入产品本身,去更多的理解业务层商业策略等方面的内因。每个设计都有对应的场景、上下文甚至各种限制条件。只有理解这些你才清楚这个设计是否适合你的产品,或者是否有一定的参考意义。


比如观察淘宝的搜索功能你会发现首页的搜索和店铺的搜索有很大差异,即首页的搜索比重要远远大于店铺的搜索。店铺中的搜索按钮仅仅展示一个双指面积的btn,而首页则是展示一个接近通栏的搜索条。那么分析下来,店铺的搜索btn小巧精致,简易美观是否应该借鉴,答案是看情况。淘宝首页入口提供的是一级搜索,涵盖了淘宝百亿级别的商品,因此搜索功能的优先级极高。而店铺商品有限,用户浏览商品往往按照分类,很少使用搜索功能,这种情况下搜索的优先级很低。 

因此,理解设计背后的理念,解决的问题、如此设计的原因才是竞品分析重点关注的方向。切记浮于表面。


2.确定真正的竞争者

认清自己的竞争者,他们往往并不仅仅是表面的直接对手。事实上应用程序只是一种帮助用户达成目标的技术手段从用户角度,有很多可选方向,而你的产品想要获得成功,你就要做那个体验最好,满意度最高的选项。回想一下,便利贴的功能应用程序是否能实现?答案是肯定的,但现在为止并没有任何应用程序能够撼动便利贴的霸主地位。因此,滴滴的竞品真的只是其他网约车公司吗,事实上滴滴最大的竞品是出租车。通常,你最强大的对手并一定不是和你一样的科技产品。


3.通过标准来判断,而不是个人臆测

每次进行比较都意味着根据某个标准来进行判断,如何决定两者的功能孰优孰劣,最好的方法是引入标准或者用数据说话。例如竞品某个模块转化率高,那必然有其内因。另外,我们可以根据业界的标准来评判产品的可用性体验,如尼尔森的启发式评估原则(后面会详细讲到)。


4.盲目模仿是导致失败的罪魁祸首

在特定环境中行之有效的方法在另一环境中可能根本行不通。每个设计解决方案不仅是针对眼前的问题,而且还针对目标受众。请记住,良好的设计是仔细的分析研究产生的,需要付出大量的努力来与用理解用户,定义问题,并 根据上下文构思,最终产出最终设计和评估解决方案。


你可能会说,别人已经验证了的功能,我们没必要花费时间去重复测试,但他人的功能是针对特定的场景特定的业务目标,或许并不适用你的产品。所以,在模仿之前,请仔细考虑您的问题与原始设计师的方案匹配程度。


5.用户测试无可替代

在竞品研究中我们需要时刻保持怀疑的态度,在将竞品的设计应用于自己的产品之前,需要评估设计背后的需求、场景,以判断会否适合自家产品。这个过程可以没有用户参与,例如选择专家进行的可用性评估。但最终,在你决定将设计投入自己的产品时,你需要意识到只有真实场景下的用户测试,才能判断该设计是否成功。 


无处不在的“汉堡菜单”按钮。最初是Facebook率先取得成功的设计,现在有大量证据表明该设计带来了很大的可用性问题。通过将图标与其他导航方式(例如ios的菜单导航)进行比较的A / B测试,发现了这些问题。


时刻留意竞争对手的产品设计有利于你不断更新和迭代,从而保持竞争优势,但你必须知道,研究竞品只能让你和它处于一个水平,他不会教给你如何开辟新的想法,如何解决未解决的问题。并且能从竞品分析中收获的有效信息完全取决于你的个人能力和经验。因此保持质疑,持续思考,以创新意识探索更可能是UX设计师长远的目标。 


NNG的十项UI界面启发评估的原则

前面提到我们应该通过标准来衡量产品的设计,而不是个人的主观臆测。尼尔森的启发式评估原则就是这样一套可实践的评估标准,共有十项,主要涉及到用户体验、可用性的评估。使用这是个标准能够评估出大部分的可用性问题。


1系统状态的可见性

任何情况下都应该显示易于理解的界面信息和系统状态,以保证用户正确执行操作。


这其中其实不仅仅要求“可见”,也要求“隐藏”。因为系统界面的展示目的是使用户易于理解其中的信息,因此要清晰展示有效信息,同时隐藏无效信息和干扰项。概括来说这一项原则的关键在于视觉传达的效率,如CTA按钮高亮来聚焦注意力,文字链按钮添加下划线或箭头来传达可点击的状态等。

2.系统与用户习惯的匹配

设计师应根据目标用户的经验习惯进行界面设计,如使用符合用户认知的语言、概念、预测用户的常规行为方式如单手操作,减轻认知负担,并使系统更易于使用。


在电脑屏幕右键弹出的菜单窗口恰好在鼠标附近,因为用户当时视觉聚焦于此。移动端阅读类产品的目录按钮总在右下角,因为大部分人使用右手单手操作,而在IPAD端的阅读产品,目录置于左下角,因为用户一般需要双手持设备,此时左手点击目录更符合用户习惯。


当然,不仅仅要考虑用户操作习惯,更要考虑用户的心理预期。这就要用到隐喻,例如按钮按下后模拟出下沉的视觉效果,再如最早的阅读类产品模拟真实书架,还原用户习惯的书架浏览查找书籍然后阅读的体验。



3.用户控制和自由

产品应该允许用户自由控制自己的操作行为,例如可以撤销重做,或在不同内容间自由跳转。



4.一致性

界面设计人员应确保在相似的平台之间维护图形元素和术语的统一。例如,代表一个类别或概念的图标在不同的设备上使用时不应代表不同的概念。垃圾桶应当代表删除、回收等操作,而不是其他的语义。


5.防错

提前预测可能发生的错误,尝试尽量避免它们,将潜在的错误保持在水平。用户不乐意处理错误同时不擅长处理错误,为了减少用户遇到错误的,试着消除问题部分。例如验证码部分只允许填写数字,且自动唤起数字键盘无法切换字母键盘,这样就防止用户输入错误信息格式的可能。


6.降低用户认知负荷

人类注意力是有限的,不要尝试一次行给用户灌输过多信息,试着一次只展示一个核心功能或内容,每个步骤只用来做一件主要的事情。目前主流的注册流程都遵循这个原则,一次只进行一个步骤,输入手机号、发送验证码、填写验证码、登录成功。


7.灵活性和效率

使用更少的交互,让用户更便捷的完成目标,例如使用缩写、语音输入、自动填充等技巧。目前有些产品通过自动填充手机号码来提高登录注册效率,或自动填充短信验证码来提高验证效率,这就是一种优化交互来提高产品使用效率的方式。(但这种方式对权限要求较高)


8.美学原则与极简设计

减少混乱和多余的元素,不要争夺用户注意力,提供清晰可见的导航。根据海外的调研,有三到四成用户离开一个网站的原因是导航混乱不易理解。


9.帮助用户识别、诊断错误并恢复

采用通俗的语言解释错误的情况并提供解决方案或说明情况。


10.帮助文档

我们期望不需要说明文档(类似说明书)也能让用户正常使用和产品和解决遇到的问题。但我们仍然需要一定的说明文档,来解释特殊情况或常见问题,以保证用户在需要时能轻易找到解决方案。

文章来源:UI中国

组件化设计:弹窗的使用逻辑

鹤鹤

弹窗其实是一个很泛的概念,几乎所有在页面中有弹出的行为的操作都能称之为弹窗,其实是有点混乱,本文旨在梳理它们之间的关系


转自:站酷-备哥


递推和递归的区别

seo达人

1,从程序上看,递归表现为自己调用自己,递推则没有这样的形式。



2,递归是从问题的最终目标出发,逐渐将复杂问题化为简单问题,最终求得问题



是逆向的。递推是从简单问题出发,一步步的向前发展,最终求得问题。是正向的。



3,递归中,问题的n要求是计算之前就知道的,而递推可以在计算中确定,不要求计算前就知道n。



4,一般来说,递推的效率高于递归(当然是递推可以计算的情况下)



最容易理解就是结合一个经典的例子:斐波那契数列



递归求解





int fib(n){

    return n < 2 ? 1 : fib(n-1)+f(n-2);

}



递推求解



int fib(int n){

    int fn   = 1;

    int fn_1 = 0;

    for(int i=0; i<n; i++) {

       int t = fn

       fn    = fn + fn_1;

       fn_1  = t;

    }

    return fn;

}



递推 Inductive 是从1 往 n推(未知)



递归Recursive是从n(未知)往1推, 再层层返回


HTML第一课

seo达人

HTML基本概况





HTML文档基本格式

样式如下:



注意:文章以下出现的“《》”书名号仅代表大于号“>”和小于号“<”。

主要包括:<!DOCTYPE>文档类型声明、《html》根标记、《head》头部标记、《bady》主题标记。

1.<!DOCTYPE>标记

标记位于文档的最前面,用于向浏览器说明 当前文档使用哪种 HTML 或 XHTML 标准规范。

2.《html》标记

《html》标记位于<!DOCTYPE>标记之后,也称根标记。用于告知浏览器其本身是一个HTML文档。《html》标记标志着HTML文档的开始,《/html》标记标志着HTML文档的结束,在他们之间的是文档的头部和主体内容。

3.《head》标记

《head》标记用于定义HTML文档的头部信息,也称头部信息。紧跟在《html》标记之后,主要用来封存其他位于文档头部的标记,一个HTML文档只能有一对《head》标记。

4.《body》标记

《body》标记用于定义HTML文档所要显示的内容,也称主体标记。浏览器中所要显示的所有文本、图像、音频、和视频等信息都必须位于《body》标记内。一个HTML文档只能有一对《body》标记。



HTML标记

所谓标记就是放在”<>"标记中表示 某个功能的编码命令,也称为HTML标签或HTML元素。

1.单标记和双标记

双标记:也称体标记,是指由开始和结束两个标记符组成的标记。基本语法格式如下:

<标记名>内容</标记名>

单标记:也称空标记,是指用一个标记符号即可完整的描述某个功能的标记。基本语法格式如下:

<标记名/>

2.注释标记



注意:注释标记中不能嵌套注释标记



标记属性

《h1 align = center》标题文本《h1》其中align为属性名,center位属性值,表示“标题文本”居中对齐,对于标题标记还可以设置文本左对齐、右对齐,对应的属性值是left和right。

在镶嵌结构中,HTML 元素总是遵循“就近原则”。



HTML文档头部相关标记

1.设置页面标题标记

《title》标记用于定义HTML页面的标题,必须位于《head》标记之内。一个HTML文档只能有一对《title》《/title》标记,《title》《/title》之间的内容将显示在浏览器窗口的标题栏中,基本语法格式如下:

《title》网页标题名称《/title》

2.定义页面元信息标记《meta/》

《meta/》标记用于定义页面的元信息,可重复在《head》头部标记中,在HTML中是一个单标记。

基本语法格式:

1.1《meta name=“名称” content="值“/》

(1)设置网页关键字

《meta name=“keywords” content="…"》

content属性的值用于定义关键字的具体内容,多个关键字内容之间可以用“,”分隔。

(2)设置网页描述

《meta name=“description” content=“…"》

content属性的值是用于定义描述的具体内容。需要注意的是网页描述的文字不必过多。

(3)设置网页作者

《meta name=“auther” content=“…”》

content属性的值是用于定义具体的作者信息。

2.1《meta http-equiv=“名称“ content=”值“

(1)设置字符集

《meta http-equiv=“Content-Type” content=“text/html;charset=utf-8“/》

(2)设置页面自动刷新与跳转

《meta http-equiv=“refresh” content=“10;url=http;//www.itcast.cn“/》



HTML文本控制标记

1.标题和段落标记

(1)标题标记

HTML提供了6个等级的标题,即《h1》《h2》《h3》《h4》《h5》《h6》.基本语法格式如下:

《hn align=“对齐方式“》标题文本《/hn》

(2)段落标记

段落的标记就是《/p》基本语法格式如下:

《p align=“对齐方式”》段落文本《/p》

(3)水平线标记《hr/》



含义 属性值

属性名:align,设置水平线的对齐方式 可选择left、right、center三种值,默认为center,居中对齐

属性名:size,设置水平线的粗细 以像素为单位,默认为2像素

属性名:color,设置水平线的颜色 可用颜色名称、十六进制#RGB、right(r,g,b)

属性名:width,设置水平线的宽度 可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100%

(4)换行标记《br/》

使用Enter键换行的段落在浏览器中实际上并没有换行,只是多出来了一个字符的空格,而使用换行标记的段落却实现了强制换行的效果。

2.文本样式标记

文本样式标记《font》,用来控制网页中的字体、字号和颜色。基本语法格式如下:

《font 属性=“属性值”》文本内容《/font》



属性名 含义

face 设置文字的字体,例如微软雅黑、黑体、宋体等

size 设置文字的大小,可以取1~7之间的整数值

color 设置文字的颜色

注意:XHTML中不赞同使用《font》标记,可使用CSS样式代替《font》来定义文本的字体、大小和颜色。

3.文本格式化标记



标记 显示效果

《i》《/b》 字体以粗体方式显示

《i》《/i》 字体以斜体方式显示

《s》《/s》 字体以加删除线方式显示

《u》《/u》 字体以加下划线方式显示

4.特殊字符标记






关于 XSS攻击

seo达人

XSS攻击是什么

简介

攻击原理

例子

防御方法

简介

XSS(Cross Site Scripting, 跨站脚本攻击)又称是 CSS, 在 Web攻击中比较常见的方式, 通过此攻击可以控制用户终端做一系列的恶意操作, 如 可以盗取, 篡改, 添加用户的数据或诱导到钓鱼网站等

攻击原理

比较常见的方式是利用未做好过滤的参数传入一些脚本语言代码块通常是 JavaScript, PHP, Java, ASP, Flash, ActiveX等等, 直接传入到页面或直接存入数据库通过用户浏览器阅读此数据时可以修改当前页面的一些信息或窃取会话和 Cookie等, 这样完成一次 XSS攻击

例子

http://example.com/list?memo=&lt;script&gt;alert(“Javascript代码块”)&lt;/script&gt;

http://example.com/list?memo=&lt;strong οnclick=‘alert(“惊喜不断”)’>诱惑点击语句</strong>

http://example.com/list?memo=&lt;img src=’./logo.jpg’ οnclick=‘location.href=“https://blog.csdn.net/qcl108”;’/&gt;

以上例子只是大概描述了方式, 在实际攻击时代码不会如此简单

防御方法

防止 XSS安全漏洞主要依靠程序员较高的编程能力和安全意识

去掉任何对远程内容的引用 如 样式或 JavaScript等

Cookie内不要存重要信息为了避免 Cookie被盗, 最好 Cookie设置 HttpOnly属性防止 JavaScript脚本读取 Cookie信息

不要信任用户的输入, 必须对每一个参数值做好过滤或转译: (& 转译后 &amp;), (< 转译后 &lt;), (> 转译后 &gt;), (" 转译后 &quot;), (\ 转译后 &#x27;), (/ 转译后 &#x2F;), (;)等


一文读懂2020年最全设计趋势

鹤鹤

写在前面

过去几年中,我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化,但到2020年,我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势,以及它们的发展趋势,以及它们如何影响设计领域。 


总体趋势

2020年的主要趋势动作设计与动画, 对于2020年,我们认为运动设计是主要趋势,因为我们在所有设计领域都遇到动画,从小的交互到徽标和UI,一切都在变化。动画内容正在进入现代世界,在现代世界中,书面内容没有以前那么吸引人。 动作设计正确实施后,可使广告系列的信息更快,更正确地传达给受众。

undefined

01. theQoos品牌插图由  闵庆  02  军团赛季 3由  尼克Scarcella   03.  溶剂-使大麻银行公开赛由  BluBlu工作室  04  云服务(动画图标)由  亚历山大Baleev  05.  病毒性肝炎由  昂布尔集体 ,  蒂博ZELLER ,  乔纳森Plesel  06 。  UXC_Design2020_Project研究通过  Donerzozo


目录

1. UI / UX

2.插图

3.动态图形

4.平面设计

5.基于技术的趋势 

6.包装

7.版式

8.趋势工具


1. UI / UX

1.1暗模式(Android Q和iOS 13)

暗模式是2020年的新趋势,Android引入了两种类型的暗模式,分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌,但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。

有了介绍此更新的大公司,许多设计师将选择在他们的应用程序或站点中使用暗模式,因此希望在来年看到越来越多的暗模式。

undefined


1.2粗体颜色

在过去的两年(到2020年)中,强烈的色彩已成为重要的趋势。大胆的色彩丰富,明亮,甚至极富活力。它们可以是主要或次要颜色。 


undefined

01.  EMART UX / UI可再生的通过  加X,  李宝蓝 ,  Sabum卞 ,  熙荣,  尤金全度妍 ,  원 지 혜,  Bongho彩  02  NSH通过  索菲娅费多托娃   03.   埃尔多拉多赌场-移动Web UI,应用程序ü用  的Loredana PAPP-Dinea ,  Mihai Baldean ,  Milo主题  04.  mmcité+网站由  工作室9  兹林,帕维尔Valek  05.  自动哈克系列#21-25由  安德烈福  06.  Flipd应用程序通过  ESTUDIO PUM


1.3 UI中的插图

多年来,插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释,可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外,它们还可以更快地传达信息。

undefined

01.  海妖重新设计,以  西尔Theyssens ,  安东尼科拉德  02  浮雕-医疗项目由  马丁Pankiewicz  葛尔若,  米沃什Pożarkowski  03.  abuk:图书封面设计有声书商店到  谢尔盖Valiukh,  Tubik工作室  04.我llustration系统GOL到  ESTUDIO PUM  05 。  智能家居的应用程序- IOS到  玛丽亚Osadcha  06.斯基林贸易(skilling.com) -   Loredana酒店PAPP-Dinea ,  米哈伊Baldean 


1.4讲故事

设计中的讲故事是关于帮助用户在平台上的旅程,从而使他的体验尽可能轻松和流畅(在UX设计中)。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事,我们可以使用一个特别创建的角色,将这个角色赋予他个性,我们创建一个故事和一个冲突,最终由我们的产品(UI设计)解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用,并且基于相同的原理,但实现方式有所不同。

undefined01.  余吴-旅行计划应用由  朱莉张庭  02.  UX / UI | 食品外卖应用由  康斯坦丁Seredkin  03.  COOC通过  cuneyt仙


1.5动画图形和微交互

正如我们所说,动态图形是今年的趋势,它在UI设计中也有很强的表现,它为插图增添了力量,使创意更易于吸收并保留在用户的记忆中。 

微交互在2018年成为第一流,但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势,这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。 

如果您是UI设计师,但尚未在工作中使用微交互,建议您这样做,因为到2020年,没有UI的任何UI设计都将是非常基本的。 


undefined

01.  UI / UX | 智能药房应用的   阿纳斯塔西娅中号,  谢尔盖Nikonenko UX   02.  气候与动物:灭绝危机网站UI / UX  由  丹尼尔·谭,  达芙妮龙  03  飞素食者由  帕特里夏赖纳斯  04.  UKRPOSHTA。乌克兰国家邮政局的移动应用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聋人报警应用程序


1.6用户界面中的视频

到2020年,信息必须非常快地到达用户手中,最好通过视频内容来完成。您选择通过动画或经典电影来解释产品,视频内容对于任何网站或应用程序都是必不可少的。


1.7功能

UI设计中的一个重要部分是功能,即,根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择,但是在新技术的帮助下,这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意,其功能使体验变得更轻松。它使用户可以更快地找到信息。

undefined01.斯基林贸易(skilling.com) -   Loredana酒店帕普用餐 ,  迈克尔Baldean 


1.8注意细节

在UI设计中,对细节的更多关注非常重要。从按钮,图标,加载到导航到细微的细节,都可以打造出非凡的设计。随着新技术的出现,我们在UI中必须注意的细节始终在变化。

在明年,我们将看到越来越少的按钮,以及更多基于手势的导航。例如,后退按钮(Android的导航常用)在Android 10中正式消失。

undefined

01.  FLYR的视觉形象和营销网站的  Ramotion 

02.  闹钟应用聋人通过  Tagir Tikeev


1.8渐变

几年来,我们一直在谈论设计中的渐变,这种趋势在2020年将继续保持强劲,因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮,图标,插图,甚至用于排版。

undefined

01.  Wavecut - IOS应用程序通过  Eleken局  02.  抗忧郁症的应用程序-产品设计(UX / UI)由  安娜Arutiunian 

03.  保罗回肠-电影音乐作曲家,制作人,DJ,Perfomer  通过  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主题  04.  ITEXIA通过  下一页局 ,  亚历克斯海鸥 ,  Jegor Walowski


2.插图


2.1角色设计

角色设计包括定义一个支持整个概念的角色。最重要的是,通过绘图,设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。

undefined

01.  新微小的事情•儿童图画书由  Vuon插图 ,  荣阮 ,  荣范  02  的Adobe X Createfulness由  迈特弗兰基,  马蒂厄Tarwane  03。 3D人物V2由  安东尼奥·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


2.2纹理

插图和纹理很好地结合在一起,可以创造出令人难忘的构图。从粒状纹理到预制的笔触,您可以找到许多想法来为插图添加纹理,也可以手动创建它们。浏览网络时,您可以找到许多可以在插图中使用的纹理,预制笔刷和工具。 

undefined

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀


2.3平面插图

在过去的几年中,我们到处都可以看到平面插图。它们仍然处于趋势中,但现在有了一个新的组成部分:对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触,但也可以将其上色,使其阴影比所涉及的对象暗。

undefined

01. BILLY KENNY -刚刚为音乐通过  桑戈BANG  02 Babelia - Lecturas对维拉诺由  米格尔·安赫尔Camprubí  03.  拳击猫-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解释器VIDEO  由  哈立德abdelazi ž


2.4等轴测图

是的,等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加,这种趋势似乎已经生效,但是在2019年它已经发展了,现在我们在其他业务领域中发现了这一趋势。

undefined

01.  庞克市由  温祚_  02  FastCompany -等距号由  阿图尔Tenczynski  03和05.  抗体亚型由  马里奥·德•梅耶尔  04.  松弛插图由  京张 


2.5 3D

随着效率越来越高的软件和工具的出现,3d渲染已逐渐发生变化。3D插图非常受欢迎,因为与2D插图不同,它提供了更逼真的图像。

undefined

01. 游戏巴伊亚之家由  Miagui  02  天平 由  卡韦萨Patata工作室  03.  城堡毁灭者由  穆罕默德Chahin  04.  Eyoo家庭3D插图由  Baianat  05.  个人插图第1卷由  巴勃罗·马林 06.  一个人旅行通过  乱伊莱恩


2.6超大胆的色彩

大胆的颜色非常适合插图。它们营造出欢乐的氛围,使角色脱颖而出,并在图像背后展现故事。

undefined

01.  玛莎·希肖娃(Masha Shishova)摄于莫斯科的  STRTFD咖啡壁画  02. 作家- 利奥·夏目(  Leo Natsume)的移动互联网思想  03.  可口可乐圆罐插图由塔尼亚·雅库诺娃(  Tania Yakunova) 


3.动态图形


3.1 3D视频 

在2020年,无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门,在这个世界中,只有想象力是极限。我们可以在广告,电影,游戏,广告活动等中找到3d。

undefined

01.  庞克市由  温祚_ ,  视觉设计艺术的影响  


3.2视频+动画插图(混合媒体)

拍摄的视频,动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频,从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。

undefined

undefined

01.  Coppel /回到学校通过  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


3.3 2D动画-说明性视频

2D动画专注于创建故事和角色,并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时,2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中,说明性视频对于任何网站都是必不可少的。

undefined

01.  Freelive  由  工作室Infografika ,  谢尔盖·萨多斯基 ,  阿纳斯塔西娅Alterka ,  Arsentiy Lesnik宾馆 ,  尤里·阿姆斯特朗 ,  阿林好,  乔治VALD ,马克西姆Tleubaev  


3.4动画徽标

您已经了解到动画是2020年的“必备”,为了保持竞争力,我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理,以引起人们的注意。这也是徽标设计的主要趋势。

undefined


01.  杯茶由  维多利亚伍  02 - 07.  运动野兽✕Logomachine。动画标志的  运动设计学院,  维克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亚历山大·库兹涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·马尔琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安东·福明,  埃米尔Khafizov ,  胆碱哈达           


3.5混合动画2D和3D集成

这一趋势不是一个新趋势,但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。 

undefined


4.平面设计


4.1平面设计中的3D 

尽管2d垄断了设计的这一分支,但3d可以为最终概念添加额外的内容。3d渲染可以采用插图,动画或字体的形式。

undefined

01.  画像由  费尔南多·多明格斯Cózar  02.  NASA | 太空时代的  工作室-JQΔ   03.  美国宇航局X BBC | 不自然世界的  工作室,JQΔ


4.2双色

精益求精的概念可以完美描述这一趋势,设计师在其中创造出大胆的元素,并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择,因为某些打印技术如果颜色更多,则价格会更高。

undefined

01.  冬季公开赛'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物馆由  de_form工作室,  诺拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐尔·塞拉


4.3光学感知艺术

欧普艺术作品是抽象的,有许多知名的黑白作品。通常,它们给观看者留下动感,隐藏的图像,闪烁和振动的图案或肿胀或翘曲的印象。(来源:wikipedia.org)。

这种趋势给人以动静的印象,但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法,这是最合适的方法。

undefined

01 02  东京电影节共混物由  梅赛德斯巴桑 ,  的Adobe住  03.  海报-第一卷由  Xtian米勒


4.4平面设计中的插图

插图在设计的所有领域都非常重要,因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年,并且即使在2020年,也将继续成为设计师的最爱。 

undefined

01.  GOOSE赫尔-海报由  Ewelina鹅  02  CAT酒吧和舞厅/ 2019至  kissmiklos,  Eszter萨拉 


4.5动画海报

动画无处不在,我们在设计的各个领域都可以找到它们,当然它们也存在于数字海报中。动画可以将2D与3D混合在一起,效果令人着迷。

undefined

01  节地铁地铁由  Bzoing,  维吉尼贝达德  02.  失败的Windows由  皮埃尔Kleinhouse,  辖Zivony 


4.6复古合成波

复古合成波是一种在80年代出现的趋势,但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功,这一潮流再次开始流行。

undefinedundefined

01.  鸡尾酒和梦想通过  Gjorgji Despodov  02.  CINEMAX由  杰森巴尔巴  03.奇怪的事情(Netflix.com)


4.7瑞士设计,达达主义,包豪斯

20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提,因为它们始终是的,遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说,这些运动强调版式,无衬线字体(Helvetica于1957年在包豪斯舞台上创建),几何形状,简单的线条,体积和颜色。

undefined


01.  瑞士海报01(版式方面)由  Mehman Mammedov  02.  黄视VOL.3通过  维奥莱纳齐名


4.8大的不间断彩色空间 

大型,不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用,可以在图形设计,产品设计以及ui中找到。

undefined

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌内容由  约翰Vernizzi  03.  Kekkilä-BVB的  Kurppa Hosk


4.9超极简主义

极简主义的设计仅使用必需品,非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素,使所有设计项目都有目的。要创建超极简主义的设计,您需要使用尽可能多的白色/负空间,简单的配色方案和一些基本的几何形状。

undefined

01.  Heim杂志,第3页,  Sasha Yaguza撰写  02.  Andrei Gheorghe- DADA-通过  moodley品牌标识发布


5.基于技术的趋势

技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响设计师的思维方式和创作方式。


5.1增强现实的移动应用

随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore,很明显,整个世界将面向增强现实技术。 

许多大品牌已经在其应用程序中采用了这项技术,而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。


有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一


是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。 

有关更具体的AI规则,请阅读Apple指南,以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式,引人入胜的体验”。

undefined


5.2 AI,ML,聊天机器人和虚拟助手

聊天机器人是一种 通过听觉或文本方法 进行  对话的  软件。[1]  此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为,尽管截至2019年,它们仍远远不能通过  图灵测试。[2]  资料来源:维基百科


人们还不习惯与AI对话,因此设计师(和开发人员)的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。


使用AIML(人工智能标记语言)设计和编写脚本聊天机器人,是出色的UX设计人员的魔力可以发挥作用的地方。

大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌:Spotify,星巴克,万事达卡,丝芙兰,Lyft,必胜客。

undefined


5.3 VR

大多数人将VR与游戏行业联系在一起是有充分理由的,但是随着所有大型科技公司开发VR套件和应用程序,我们可以肯定地说,我们将发现使用和享受这项技术的新方法。VR已经用于教育,医疗保健,旅游,房地产或建筑。 

undefined


5.4语音用户界面(VUI)

语音用户界面(VUI)使用语音识别  来理解语音命令和问题,通常是文本到语音以播放答复,从而  使语音与计算机的人机交互成为可能  。语音命令设备(VCD)是受语音用户界面控制的设备。资料来源:维基百科 

去年,使用互联网连接的设备的人中有40%每月至少使用一次语音助手,与去年相比,这一数字增加了10%。


6.产品设计


6.1包装中的图案

在过饱和的包装市场中,很难创造出可以脱颖而出的新产品,因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何,花卉,浪漫或单色图案是任何产品包装的大胆选择。

undefined




01.  飞行山羊咖啡由  妮可LaFave    02.  VITA SPA皮肤  由  DWYW   03.  巧克力包装设计由  算术   04.  100手绘无缝的图案和形状   的  Arseny Samolevsky


6.2包装插图

插图一直是包装设计中的重要元素。通过他们,我们可以讲述一个故事,使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年,并且很可能会一直处于流行趋势。

undefined





01. 布里格斯原件由  熙宰金  02  天鹅绒咖啡杯  由  安东Malishev,  呵呵卡罗拉  03.  废物不包括厨房-品牌打造的  尝试和真正的DESIG ň04  家,甜蜜的寿司儿童  通过  精明的机构,  马里亚纳星火  05.  Cerveza塔Maleante通过  Antonay 


6.3留白

极简主义是设计的基本原则,而今天它又是新事物。它放弃了设计中不需要的所有内容,并用负空间代替了它。这种趋势将功能带到了最前沿,并专注于简洁的设计,使版式脱颖而出。

undefined

01.  香味精油 由Y u型简林,  黄恶嗯-祥  ,  智泰莲 02.  重塑品牌理念,为BodriPincészet由  克里斯托夫Gáthi


6.4单色和两种颜色

首先,在调色板中仅使用1或2个色调似乎有些限制,但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色,就可以保持简约的外观,放弃所有多余的东西。结果是精美,高雅的产品令人赏心悦目。

undefined

01. Zerbet冰糕由  才林贾尔斯  02.  贝利啤酒  由  埃德大厅 悉尼,  叶卡捷琳娜Leontyeva ,  波阿斯孙


6.5大胆的颜色

大胆的颜色和渐变仍然是非常强烈的趋势,这种趋势将在2020年持续。使用这些颜色,您可以创建令人难忘的产品。

undefined

01.  极简主义和享乐主义:Fabula Branding 重新设计了  千年品牌

02  纹身商城  通过  Openmint工作室,  叶卡捷琳娜Teterkino ,  烟,  叶戈尔Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃尔· 沙茨曼

04.  VIZOU -老花眼镜  的  工作室开头语,  阿克塞尔杜马克 

05.  包装的调味开心果由  米拉Katagarova


6.6注意细节(受新艺术风格启发)

注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。 

undefined

01.  HYWILDE由  查德·迈克尔·工作室  02  AMSTEL KARGO IPA通过  卡帕罗设计船员

03.  大岛咖啡烘焙-咖啡咬伤的  农场设计


6.7包装中的讲故事

到2020年,品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事,以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。

undefined

01.  喙接通过  骨干品牌推广   02.  Colorea用t  骨干品牌


7.版式


7.1粗体印刷

粗体印刷术是设计中的重要趋势,它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

undefined

01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrström);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

03.  UCCA当代艺术中心北京由  布鲁斯·莫设计(BMD)  ,耶勒马雷夏尔 


7.2小写

越来越多的应用程序使用完全小写的文本,非常易于阅读,并且完美地融入了简约和现代的设计中。在明年,我们绝对必须关注这一趋势。

undefined

01.  Autea品牌和网页设计由  米哈尔Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


7.3自定义字体 

尽管自定义字体没有什么新意,但我们将看到这种趋势越来越多地出现在设计中,尤其是在徽标和海报中。这种做法在大品牌中更常见,因为生产专用字体可能会非常昂贵,但是设计人员可以对现有字体进行少量调整,结果可能会非常独特。 

undefined

01.  Think8全球研究院通过  勃洛克设计  02  ZINEZŐ//设计周期由  芭芭拉·卡托纳 ,  媒体与设计系埃格尔  03.  式设计'19通过  TRÜF创意  04.  Cako字体由  维奥莱纳齐名


7.4动力学排版

就像我们说的那样,动画在设计中无处不在,因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品,该产品保留在查看器的内存中。

undefined

undefined

01和02.  Grafika  ,  Gimmick Studio设计  。03&04.  增强现实与动作排版,作者:  Alex Slobzheninov


7.5堆叠字体 

堆叠文本可能是一种现代化的解决方案,可以吸引您注意基本信息。我们可以在网页设计,应用程序设计和图形设计中看到这种趋势。

undefined




01.  L'嗡通过  Atipus巴塞罗那  02  期刊由  杰玛马奥尼  03.  海报收藏| VOL.8由  罗马发表  04. SMLXL由  梅丽莎Baillache,  垫新郎,  杰森·利特尔


8.趋势工具


8.1 Adobe Spark

Adobe Spark是Adobe Systems  开发的  用于移动和Web的媒体创建应用程序的集成套件  。[1]  它包含三个独立的设计应用程序:  Spark Page,  Spark Post和  Spark Video。(来源:WIkipedia) 


他的免费Adobe Spark Web应用程序可与Spark Page,Spark Post和Spark Video  iOS移动应用程序同步  ,从而使用户可以从任何设备创建,编辑和共享其视觉故事。


[3]  这三个设计应用程序允许用户创建和设计可用于企业,教育,社交媒体营销人员等的视觉内容。[4]  Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时,用户可以导入图片或搜索图片。

undefined


8.2繁殖

 Procreate是 由Savage Interactive针对iOS开发和发布的   用于  数字绘画的  光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计  ,并且适合从初学者到专业人士的艺术家。


 它提供130多种逼真的画笔,多层,  混合模式,  蒙版,   过程视频的4K分辨率导出  ,  自动保存以及许多其他经典和原始的  数字艺术  工具。除光栅图形外,该软件的编辑和渲染文本和矢量图形能力有限  。(来源:Wikipedia)Procreate是2018年App Store上最畅销的应用程序。

undefined


8.3 Adobe XD

Adobe XD是  由Adobe Inc开发和发布的   用于  Web应用程序  和  移动应用程序的基于矢量的 用户体验设计工具。它适用于  macOS  和  Windows,尽管有适用于iOS  和  Android的版本   可帮助直接在移动设备上预览工作结果。XD支持  网站线框图,并创建简单的交互式点击型原型。(来源:维基百科)

undefined


作者授权


总结

每一年每一个时间段都会有新的趋势,学会的辩证的眼光去看待便是最大的智慧。世界一直都在变,趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应,念念不忘,必有回响。共勉!

转自:站酷-木七木七 

日历

链接

个人资料

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

存档