首页

Vue中动画的实现 从基本动画,到炫酷动画。看这一篇就够了

前端达人

Vue中的基本动画实现

直接一点,基本动画的步骤

  1. 在需要加动画的地方,加入transition
<transition> <P v-if="isNum">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

在style中写vue已定义好的类名

 进入前和结束后的状态
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这样就已经完成了基本动画了,上完整代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">显示/隐藏</button> <transition> <P v-if="isNum">我是一只小小鸟</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

动画类名的重定义

只需要在transition标签上添加一个name属性,然后把类名中v改成你定义的类名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3
 进入前和结束后的状态
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

使用第三方的动画库

第三方的动画库有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样

  1. 在使用第三方库之前,需要在,你要做动画的标签上加个基本类
    animated,这个基本类是根据每个库不一样而定的,
    我们要用Animated,所以需要加
<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

接着就是引入第三方库,你们可以下载。
我比较懒,我就直接npm下载了。

npm install animate.css --save  
  • 1

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  
  • 1

写上类名,就行了,,提示,千万别下错文件,不然动画也无法实现

 <!-- 进入用lightSpeedIn    离开用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面设计公司</a>,为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面设计服务</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

Vue中select的使用

前端达人

效果:

HTML:

 
  1. <div class="sel01">
  2. <select v-model="selectClassEnd" @change="selectClass($event)">
  3. <option value="NONE">未选择</option>
  4. <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
  5. {{options.title}}
  6. </option>
  7. </select>
  8. </div>

CSS:

 
  1. .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
  2. .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
  3. border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
  4. .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
  5. .sel01 select:focus{outline:none;}

JS:

 
  1. export default {
  2. name:"Name",
  3. data(){
  4. return{
  5. selectClassData:[ //类别选择数据或者从后台获取数据
  6. {id:1,title:"科普类"},
  7. {id:2,title:"亲子类"},
  8. {id:3,title:"制作类"},
  9. {id:4,title:"创意类"}
  10. ],
  11. selectClassEnd:"NONE",//类别默认选择
  12. select_class_id:"",//类别id提交报名需要
  13. }
  14. },
  15. methods:{
  16. //类别选中
  17. selectClass(event){
  18. this.select_class_id = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
  19. },
  20. }


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


遇到知乎改版的笔试题,我是这么应对…

seo达人



知乎消息页有什么问题吗?

首先,我自己并不是一个典型用户,虽然只有三万多关注,但也算是个 KOL 了。

所以我们还是先看看对于互动较少的普通用户来说,消息页长什么样。

 

普通用户

图片

页面大部分地方是私信列表,然而很多普通用户唯一的私信也许就是系统消息了,所以这个列表意义并不大。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发,对普通用户来说,数据会有但不会太多。

原本就不多的数据,被分散到四个图标入口的四个页面里,每次查看起来估计挺麻烦的。

 

KOL 用户

图片

上面是我自己知乎账号的消息页截图。

私信我用得不多,而且陌生人发的消息我也不一定有时间回复,所以我觉得这个功能真的没那么重要。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发,经常会显示一个特别大的数字,尤其 99+ 那种看上去没啥意义。

而且我很奇怪为啥赞同和喜欢、评论和转发要合并到一起,这让 99+ 这个数字看起来更没意义了。

我虽然很关心这些互动数据,但是每次得要一个个点开看,就觉得麻烦了。

 

问题总结

  • 太过强调使用率较低的私信功能
  • 将重要的数据放到二级页面展示,查看不便
  • 普通用户:数据不多却要分别点开查看
  • KOL 用户:显示一堆 99+,没有帮助

以上这些问题主要来自我的观察分析,顶多再问了问身边的朋友。

如果是工作中的真实项目,最好是搞些问卷和访谈才能更加细致准确一些。

 

私信和互动哪个更重要?

分析来分析去,我发现上面这个问题才是关键。

知乎目前的消息页是强调私信的,然而我个人认为互动更重要,所以这个方案是有问题的。

观察了一下其它 APP 的消息页,我发现有的是私信>互动,有的是私信=互动,有的是私信<互动。

图片

我发现腾讯视频的结构不错,可以解决掉前面分析出来的知乎消息页面问题:

  • 将互动和私信分成两个 tab
  • 优先展示互动数据
  • 将不同类型的互动数据合并展示,并可以通过 tab 快速切换查看

于是我决定主要以腾讯视频为参考,对知乎消息也进行优化。

 

优化方案

 

图片
图片

 

 

不论是普通用户还是 KOL 用户,都能一眼看到最新数据变化,评论还可以直接点赞回复。

KOL 用户想要单独查看某种类型的数据,也可以很方便地切换二级 tab。

私信虽然不是默认展示的,但有重要消息的时候,还是可以自动定位到那里,避免用户错过重要信息。

其实原版方案里,还有一些其它问题,例如:动态 tab 是否有必要、私信发送图标是否可以藏在消息私信 tab 里等…

不过由于文章篇幅有限,这些边边角角的问题都不在这里过多讨论了。

 


 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》遇到知乎改版的笔试题,我是这么应对…

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

用户体验|我研究的三招,应对用户的回避小心思

seo达人



00.【前言】

图片

现在我们在目标导向流程的第一个部分:研究

我是从0开始、系统讲解用户体验设计方法的CC~

 

01.【为什么会得到错误的反馈】

用户做出错误反馈的原因:

大概会分为这几类情况。

从心理学角度举几个例子来分析一下:

 

举例一:

当别人穿着新买的衣服,兴高采烈的询问你,“你觉得我这身衣服好看吗?”

通常出于作为一个自认为情商还可以的社交人类而言,哪怕这件衣服在自己看来并不是很喜欢,我们依然会表达出赞赏。

不论是出于礼貌,还是为了促进关系良好的发展,我想很少有人会直接坦荡的说,你这件衣服真丑吧。

有些非常的善良的用户,在调研过程当中,也会出于考虑到我们产品开发者的面子而忽视自己真实的想法。

 

举例二:

我们在学生时代,老师提出一个问题,“大家都理解了吗?”有些人明明似懂非懂,但依然会逞强的说出“我理解了”这四个字,也是为了掩饰自己的想法,维护自己的面子工程。

用户也一样,他们有可能为了维护自己的形象或不好意思表达自己的想法,说出违心的结论。

 

举例三:

参加过教师资格证的小伙伴应该都知道,在教师面试的时候,有一个试讲的环节。需要当场对抽到的考题进行备课和试讲。

通常我们在家里准备考题的时候都可以非常流利的进行演练,但到了考试当天,进到考场当中我们又总会紧张到不知道该说什么。

【在陌生环境下,我们经常会觉得不知所措。】

同时面对陌生的人,很多人也很难真实的表达自己的想法。

我们的用户也一样。

 

02.【我们应该怎么做?】

我自己总结了三种应对问题的方法。

 

方法一:关系培养法

善良的用户是最好沟通的。

想象一下,对我们的真心朋友,在他真心想得到我们认真的反馈的时候,我们是否可以说出逆耳的忠言?

尝试把用户当作我们的朋友,以一个向好友真心询问意见的语气和用户交流,整个过程不用很正式,告诉他我们只是单纯的朋友间的闲聊和吐槽,真诚的去访谈。

善良的用户更能说出发自内心的想法。

 

方法二:路人观察法

对于不愿意谈论他们难以理解产品行为的用户,我们不必过分强调访谈的重要性。

通常急切的追问对这类用户而言,更容易产生逆反心理。

我们可以采用路人观察的方法,在公开场合不着痕迹的观察这类用户的具体行为。

有人会疑惑,这说的很轻松,怎么才能不着痕迹的观察呢?

提供一个小的思路,我们可以收集用户页面停留的时间,点击的次数,甚至眼动的频率,又或者观察用户的微表情,来分析用户对于当下产品的理解情况。

当然这是B端产品,如果是适合公共场合使用的产品,可以直接将自己作为一个周边的普通用户,轻松的观察身边其他用户的行为。

 

方法三:情景营造法

选择用户熟悉的场景,最好是每天办公的办公场所,让周围充斥着熟悉的日常用品,在自己把控范围内的环境来进行访谈,更能够让用户有把握感,主动的表达出想法。

就像我们在自己家里接待客人,远比去别人家做客感觉来的轻松。

如果用户工作场地有限制,必须选在陌生的环境,那我们也注意不要选择看起来就很严谨,很正式的实验室场所,容易增加用户的焦虑感。

 

小思考  提一个小思考:【你知道怎么样准确的定位自己的访谈目标吗?】下节我们聊这个。

 

原文地址:达芬奇的火柴盒(公众号)

作者:CC本人

转载请注明:学UI网》用户体验|我研究的三招,应对用户的回避小心思

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



为你解密设计中的节奏感!

资深UI设计者


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:美工美邦

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何做好数据可视化

资深UI设计者

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。

1、选择正确的图表类型

不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

2、根据数据的正负值选择正确的绘图方向

当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

3、始终从0处开始绘制条形图

和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

4、折线图应该清晰呈现Y轴上的趋势变化

对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

5、使用折线图的时候注意时间

折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

6、不要使用平滑的折线图

平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

7、避免让双折线互相交叉

通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

8、限制饼图中的扇形的数量

饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:

不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

9、在饼状图中直接标注对应的数据

没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

10、不要在扇面上做标注

不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

11、控制饼图中扇面的排序让其方便阅读

对于饼状图的切分方式,有2种常见的顺序:

将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

12、避免随机排列

同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

13、不要牺牲信息图的可读性

饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

14、视觉效果不要影响数据的呈现

不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

15、选择和数据属性匹配的配色

配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:

使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

16、使用无障碍的配色

根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

17、关注内容的易读性

在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:

选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

18、使用水平条形图来优化倾斜标签

这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

19、事先选好你的图表库

如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

20 、不只停留在在数据静态呈现上

信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设   作者:Taras Bakusevych

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




vue-cli@3添加sass(vue项目模板封装系列)

前端达人

前言

上一期分享了如何在vue-cli3的框架中,封装mixinsmodule 。本期将分享如何在vue项目中添加sass
在这里插入图片描述

GitHub项目地址:https://github.com/jiangjiaheng/web-template

关于sass

本文默认你对sass有一定的了解,并且阅读过相关的官方文档,因此本文就不在赘述关于sass的基础知识。

在这里插入图片描述
sass官方文档:https://www.sass.hk/

添加方式

1. 创建项目时选择预处理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 
  • 1
  • 2
  • 3
  • 4

移动上下键选择Manually select features:手动选择创建项目的特性。

显示如下:

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-processors

显示如下:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 
  • 1
  • 2
  • 3
  • 4

选择第一个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们安装sass-loader node-sass

2. 手动安装sass-loader

如果在创建项目没有选择CSS预处理器,我们也可以手动安装sass-loader node-sass来集成scss

npm install -D sass-loader node-sass 
  • 1

使用

完成添加后,我们只需要在style指定langscss即可,无须多余操作:

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案

前端达人

错误提示:


  1. ERROR Failed to compile with 1 errors 下午6:51:57
  2. error in ./src/views/Login.vue
  3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
  5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
  6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
  7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
  8. 13:3-17:5 14:22-397
  9. @ ./src/views/Login.vue
  10. @ ./src/router/index.js
  11. @ ./src/main.js
  12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 解决方案:

找到问题所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

这个问题是因为Sass的版本过高导致,所以根据提示将版本改为对应的版本就可以了,我这里是改为4.0.0版本。

下面是怎么改版本:

1.首先在IDE中找的package.json文件:

2. 然后打开该文件找到“sass-loader”,后面跟着的便是你现在的版本,根据提示将其改为对应版本即可 :

3.在Terminal(终端)中输入:cnpm install(注意用cnpm 淘宝的镜像,用npm可能会下载不成功)

 4.运行成功:npm run dev


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

2021-2022设计趋势ISUX报告·社交APP篇

seo达人



互联网社交发展方向

先来看看技术发展和现阶段人口结构的变化对线上社交有什么影响。

技术上:

2G时代的社交实现了跨地域聊天,用户可以在QQ里和天南地北的人聊天,强调在线状态。QQ号是用户社交虚拟身份的id,是用户自我创造的线上人设。2G时代的社交寻求更为方便的沟通方式。

3G进入了移动社交,著名风投公司合伙人约翰·杜尔提出SoLoMo概念(社交化、本地化、移动化)。用户可以基于位置进行交友,比如附近的人;基于行为匹配,比如微信摇一摇。没有在线状态,可以随时随地的联系,随时在朋友圈获取对方线下的生活状态。

4G时代,手机硬件、大数据和AI的发展,大大提升了匹配的效率,高效地建立潜在社交关系。不论是看脸社交还是灵魂匹配,都能在很短时间内找到合适的人聊天。信息传输越来越快,沟通互动的方式不断革新,用户从文字、图片聊天进而习惯于实时语音和视频。

随着5G到来,高带宽互联网、云、AR/VR/MR的高速发展,视频作为主要的信息和沟通载体变得日益普及,疫情让在线沟通和协作越来越方便,更多的线下社交场景转移到线上,线上社交的频次大大增加的同时,副作用也开始呈现,社交隔离让人们感到更孤独,对云社交的需求愈发强烈。

 

人口结构变化:

独生子女群体在80年代出现,但由于父母辈基本是有数量较多的亲兄弟姐妹,因此第一代独生子女的同辈中有较多的表兄弟姐妹或堂兄弟姐妹互为玩伴。而由第一代独生子女繁衍出的第二代独生子女,也就是现在的大部分00后,家庭规模越来越小,亲属同辈越来越少,加上人口流动频繁,少有的亲属同辈也较为疏远。

00后这一阶段的出生率跌至了最低点,平时家庭、学校二点一线的生活,繁重的课业负担,原本在亲属同辈圈的社交就少,在学校的熟人同辈圈的社交也越来越少。

 

 

2018年发布的《00后来袭-腾讯00后研究报告》中说到,“75%的00后渴求有更多的时间跟同伴在一起”。00后在现实生活中缺失的同辈圈社交,更有强烈的诉求去互联网上寻找。他们有着更为复杂的社交需求,通过与同辈圈的互动,建立同辈伙伴关系,从中获得陪伴感、归属感和自我认同,形成自我认知。

回顾这几年社交的变化,技术让社交体验从“线上线下割裂”向“虚拟空间映射真实世界”发展,00后的线上社交需求更加强烈,我们如何解读用户、解读人群,寻找他们的需求痛点。接下来,本文从自我展示、匹配连接、沟通互动的社交体验路径来探讨社交的设计趋势和特点。

 

最初的互联网社交身份是简单的虚拟身份ID:虚拟头像、昵称、个性签名、QQ秀,当时的社交体验线上和线下完全割裂,用户的自我展示强调纯线上人设打造。随着硬件设备和图像技术发展,用户慢慢丰富社交资产,用真实身份交友,高清美颜自拍、沙雕表情包和声音名片,线上的自我展示与线下生活紧密联系。而现在,更多人用虚拟形象代表自己,技术的进步让虚拟形象的展示更完美、更逼真。

 

1-1 真实身份展示从单一趋向于全面

用户在展示自我的时候往往需要填写大量文字信息和传输多张精修过的照片,导致编辑成本高、浏览效率低。视频化的普及让用户随时随地记录自己,在这种沉浸式的自我展示中,身份信息传达更加有效和真实,也进一步放大用户的自我炫耀感。

Feels的个人资料由全屏照片、视频、问答组成,用story的交互方式进行浏览。

 

1-2 从声音名片到声音形象,更加赋予了情感和灵魂

语音的优点在于比文字传输效率高,一篇完整的文字自我介绍用语音三言两语就说完了。而语音的缺点是无法在嘈杂的公共环境中使用,所以老年人最爱用语音,因为他们私人空间较多。疫情让人们大大减少了旅游和外出娱乐,享受个人空间的时间变多了,从而缩小了语音使用环境受限的缺点,放大了传输效率的优点。在今年,出现大量语音房社交,语音从“萝莉音”“正太音”的声音社交名片变成展示个人形象的方式。

Clubhouse带来语音社交热潮,Facebook、Twitter也相继上线语音房hotline和Spaces,用户可以找到一个感兴趣的主题房进行聊天或围观,那些通过短短几分钟发言就吸粉的高质量用户,通过声音赋予了个人的情感和有趣的灵魂。

Reddit Talk 

 

1-3 从“我是谁”到“我们的关系”

展示自我除了从展示者的角度来设计“如何更好的展示社交资产”外,也要从看的人的角度考虑“如何更好地了解他”。

ios15从spotlight输入联系人的名字,对方个人信息会智能拉取你们相关联的信息,包括最近的聊天、共享的位置和照片。

 

Snapchat能根据生日、出生时间、地点生成个人星座运势和个性,还能和好友进行星座合盘。通过个人资料之间的交互,强化双方身份的情谊特点。

 

1-4 虚拟和真实之间,越来越强调“真实”

虚拟形象的概念不新鲜了,2003年QQ秀是虚拟形象的雏形,Y世代网民根据自己的喜好拼出属于自己的QQ秀形象,用于QQ聊天时的自我形象炫耀和情感表达。Z世代逐渐成为互联网的主力军时,他们的个性习惯和独特的表达方式让虚拟形象在社交中的使用需求愈发强烈。《Z世代圈层消费大报告》提出z世代五大典型兴趣圈层为:电竞、国风、二次元、模玩手办、硬核科技。Z世代已经从他们的兴趣中建立了对虚拟形象的情感,兴趣成为他们建立自我人设的重要手段,他们跳出固定人设,在不同兴趣圈层展示多样个性,使用特定冲浪语,以此获得归属感和认同感。

高新技术的发展让虚拟形象变得越来越高质量。苹果的Memoji、Snapchat的Bitmoji和Facebook的avatars让虚拟形象成为自己的化身,用于个人资料展示以及聊天表情包、合照、视频互动等场景。Snapchat最新的资料设计中展示了3DBitmoji。

 

依靠面部捕捉、表情捕捉、动作捕捉的技术,实现了真人与虚拟形象的动态同步,降低了真人化虚拟形象的设置成本。在SXSW2021音乐节上,展示了Facebook新avatar系统推出的VR社交应用Horizon。人与人能通过虚拟形象进行实时互动,除了有自己逼真的形象外,还具备真实的眼神表情和肢体动作,还会根据肢体动作变化不同情绪。

 

大数据和人工智能时代,融合了AI技术的虚拟形象也在近几年层出不穷。与真人虚拟形象不同的是,它不受对方在线的限制,能随时进行实时互动,来满足用户对陪伴和娱乐的需求。麦当劳推出一位唱跳型爱豆的虚拟形象,她可以和小朋友进行沟通互动,一起跳舞,跟小朋友讲故事,增加与消费者之间玩伴、陪伴关系。

 

麦当劳虚拟偶像“开心姐姐”

用户在社交网站分享动态,维系自己的人设,获得群体的存在感和认同感。在未来,这些记录和创作的内容是否会形成自己的虚拟空间?每一个人不同的故事动态与空间产生联系,形成自己独有的虚拟空间社交资产。

 

1-5社交人格从「完美人设」到「透明人设」

随着好友列表数量增多,很多人开始逃离朋友圈,人们在朋友圈的人设经营也越来越谨小慎微,开始疲于“完美”人设的表达,社交产品开始减压。正如越来越多的年轻服装品牌进行的「透明商品运动」,他们在品牌宣传时,将商品从生产到制作的全过程透明化公开给消费者。「透明人设」是反对当今社交信息流充斥着的完美人设,鼓励自我展示更加真实和未经编辑。

Dispo复古相机拍摄后需要24小时才出片,并且没有任何美图的编辑工具。传达现实生活中不完美的时刻也是值得捕捉和分享的。

 

Poparazzi能连续拍照变成GIF进行分享,同样也传达未经过编辑的更真实的自我展示。用户用emoji进行互动,仅展示动态收到的emoji表态数量。

 

你是否会因为动态无人互动而焦虑?是否会因为很久不更新动态而失去展示的动力,慢慢社恐?instagram和Facebook允许用户隐藏帖子的赞数,来减轻用户的压力和焦虑。

 

 

2-1 匹配趋向于多元化

调查发现,现实中两位互不相识的陌生人要花50小时,才可以在路上叫出对方名字,再投入40小时,才能蜕变为真正的友情。互联网帮助用户高效匹配,缩短认识的时间,降低认识的成本。

近几年,用户的喜好正在极速分裂和细化。《00后来袭-腾讯00后研究报告》表明73%的00后会主动地获取资源来发展自己感兴趣的领域。由于现实中同辈社交圈狭窄,他们需要在互联网的社交阵地上寻找更垂类的兴趣伙伴,比如云学习伙伴、游戏玩伴、coscp等,线上社交在不断垂直细分以便更快捷的连接同辈伙伴。

随着传输速度的发展,匹配连接的体验具有更实时的交互和面对面的互动体验。Distance Disco是一款云蹦迪平台,疫情期间,大家在各自房间里通过在线视频就能开启一场线上舞会,结识一起蹦迪的朋友。界面上的视觉元素和色块会随着音乐节奏变化,增强迪斯科的互动氛围。

Honk匹配陌生人聊天的动画,传达了穿越了人山人海,遇见了你的感觉。头像出现时,出现招手动画,像是刚刚见面的人招手打招呼。、

 

 

2-2 匹配提升安全感和隐私保护

现实生活中我们都有意识地保护自己的隐私,而到了互联网,却容易放下戒心将自己的信息分享给他人,线上社交会放大陌生人有趣、友善的一面,却也隐藏了人性的缺点。社交产品的在帮助用户建立社交关系的同时,也要提升用户隐私保护和社交安全的体验。

Instagram帐户注册时,未满16岁的未成年人默认使用私人帐户,仅粉丝才能查看其发布的信息,在平台内容分发和互动上与成年人帐户进行隔离。当用户更改成公共帐户时,会给到提示强调私人帐户的好处。

 

Snapchat推出“好友检查”,用户可以快捷私密地删除不联系的人,确保好友列表里仍是真正的朋友。

 

Tinder的一项调查显示,40%的人在Tinder中发现了前任,24%的人遇到了家人。为了保障用户隐私,用户可以上传他们的联系人名单以选择不想在app中遇到哪些人,屏蔽所选的联系人。

 

在社交产品中,聊天是关键的一环,匹配到合适的用户后,如何加强双方情感连接和信任的纽带让用户为关系而留?从书信到电报到电话到视频通话,都是通过技术的发展获得了更高效真实的沟通体验,线上沟通的用户体验一直不断还原线下的真实体验,疫情加速了多人在线视频通话的发展,既让人在沟通时保持社交距离,又让人感觉对方近在迟尺。

 

3-1 更临场

相较于面对面沟通交流,线上的交流在听觉、视觉、触觉、情绪传递的体验上,决定了用户社交临场感的强弱。

Honk用文字交流时,能看到对方一个字一个字实时的输出,模拟真实的说话方式。

 

2021年Google I/O大会的3D视频聊天设备Project Starline,利用多个高分辨率摄像机和深度传感器在不同角度捕捉用户,以3D的效果进行人物呈现,营造对方真的就在对面的裸眼3D感。

 

2021年F8大会上,Facebook提出用于AR视频通话的MultipeerAPI,更方便创作者制作AR特效,用于多用户、多屏幕的共享AR体验。用户在多人视频通话时,视频中会出现太空或篝火的AR特效,让视频者感受到大家都在同一个共享空间。还支持轻量级游戏,多位玩家屏幕由一根曲线贯穿,玩家用脸引导甜甜圈共同完成接力游戏。

 

2021年IOS15的更新,Facetime使用的空间音频让通话的听感更加自然、逼真,仿佛在同一房间面对面聊天。

 

面对疫情人们在生活中的社交礼仪都以非身体接触式动作替代,线上社交的频次和密度大大增加,视频通话在视、听处理上越来越自然和逼真,在触觉上也向着《头号玩家》的男主角在虚拟空间中感受到的虚拟触觉传递到现实中那样在进化。美国西北大学的研究中,一位妈妈与孩子视频通话时,通过抚摸屏幕,能把来自妈妈的抚摸传递到孩子身上的“AR皮肤”上。未来在虚拟社交中也能获得真实的触碰,加强情感的连接。

 

3-2 更个性

个人展示是单向的,沟通交流是双向的,双方在不断交换彼此之间的状态和感受,从中获得被了解和认可。个性聊天气泡、表情包、自定义聊天背景,帮用户在沟通交流时展现自己独一无二的个性。线上社交的用户语言设计要打造个性化的社交氛围,让用户的个性在沟通中被挖掘和展现。

MUZE在聊天中可以自由摆放文字、贴图、涂鸦,让交流更个性化和自由。

 

Google I/O大会推出的全新设计语言Material You中,系统会基于用户选择的壁纸进行自由取色,并应用到UI中。是否聊天的UI也能随着聊天中的图片,或是聊天发送的表情文字提取心情语义,进行UI的变化,加强情绪的传达。

 

3-3 场景化

人和人的社交通常依附于不同的场景,群聊或好友分组就是将特定的社交关系进行场景设定。比如“火锅突击队”“老废物乐园”“吃瓜小分队”依附社交场景来进行互动,帮助用户带入社交氛围。

咖啡馆社交,通过构建咖啡馆场景,传达和陌生人进行一场闲聊的慢社交体验。

 

Facebook的视频通话,用烟花和礼帽的AR特效来构建派对的社交场景。

 

2021年WWDC大会上,现场用不同的Memoji营造了线上观众参与会议的场景。

 

3-4 感官刺激

2021年Google的一份统计数据表明,用户平均注意力时长从12s下降到9s,而00后的平均注意力仅8s。面对这样的用户,需要让他们在短时间内获得极大的感官刺激来延长注意力,以及在沟通交流时有更极致的情绪表达。

Honk可以同时发送大量的emoji表情。

 

QQ团队运用Lottie技术推出每秒60帧超高帧率、动效更细腻的小黄脸表情包。

 

微信的表情包不仅带来视觉上逼真的3D动画效果,屏幕上其他内容也会随之震动,还有触感上的冲击。

网络表情包 

 

3-5 轻娱乐、游戏社交

《社交媒体趋势报告》提到“和朋友保持联系”一直被列为是使用社交媒体首要原因,但在16-24岁的用户中,主要驱动力变为“寻找搞笑和有趣的内容”。青少年通过线上社交弥补线下社交缺口,获得同辈认同,排解孤独和学习压力。“组队开黑”“一起微光”“找长期固聊固玩”,00后们的社交需求更多放在娱乐、游戏化社交上。社交体验也从物理空间的连接转变到精神空间的连接。

用户在Housparty进行视频聊天时,如果感到无聊,可以玩一场轻松的游戏,游戏过程中可以通过视频看到对方的状态。

 

Snapchat正推出一种叫Connected Lenses的新型增强现实镜头,它可以让不在同一个物理空间的用户一起进行AR游戏,比如共同组建乐高模型。

 

IOS15中Facetime加入Shareplay功能,可以与朋友共享屏幕,一起线上追剧、听音乐、玩游戏。

 

Tinder在今年推出第二季Swipe Night活动,用户通过观看每周一集的互动故事,向左或向右滑为故事中的角色做决定,每一集结束后会匹配到在故事中做出类似选择的用户,并可以继续相关话题的聊天。

 

结尾

科技重塑了我们的生活。线上社交让我们日常沟通更为方便,也让我们轻松维系现实中的社交关系,越来越多的人依靠它构建新的虚拟关系,互联网带来沟通便利的同时,也减少了人与人面对面交流的机会。

美国传播学家艾伯特·梅拉比曾给出一个公式:信息沟通传递=55%视觉+38%声音+7%语义。大意是人们在现实生活中进行面对面沟通交流时,7%是语言上的内容,剩下的是面部表情、肢体动作、目光接触、语速语调等非语言内容的交流。随着技术的进步,社交不断在补充非语言内容交流的缺失。在自我展示中,无论是视频化、声音形象、富有表情和肢体动作的虚拟形象,还是沟通场景中越来越临场的体验和充满感官刺激的表情符号,线上社交的趋势都在不断映射线下社交的体验。

最后,你还想看ISUX什么趋势的文章? 欢迎在评论区留言呀~

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:ISUX

作者:腾讯ISUX

 

转载请注明:学UI网》2021-2022设计趋势ISUX报告·社交APP篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计师必备的Chrome插件,超好用!!!

seo达人



01.Go Full Page

设计师在网上冲浪时,看到一些排版精美、设计优秀的界面总想要保存下来,以便日后寻找灵感。

不知道大家都是怎样保存整个网页的。

我之前的笨办法是这样的:先是一屏一屏地截图,然后再拼接起来,特别是拼连接处时需要小心翼翼地对齐,简直是太麻烦了。

现在的高效方法就是使用Go Full Page,它是整个网页的截图工具,可以轻松松松地保存整个页面。

轻轻动一下手指

图片

便生成了一个长图

图片

 

02.WhatFont

如果我们想查看网页中的字体,这就是神器WhatFont。仅仅通过鼠标停留在字体上就可以查看Web字体,简单又优雅。

图片

 

03.ColorPick EyeDropper

我经常有一种苦恼,比如同样是蓝色,为什么别人家的颜色这么干净清透,令人愉快?这时候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具,能够直接从网页中选取颜色值。

图片

 

04.Window Resizer

当想对各屏幕的尺寸测试设计稿时,可以使用Window Resizer快速调节,了解设计稿在不同屏幕上的兼容性。

图片

 

05.CSS Peeper

如果想更加全面的获得网站上的一些信息,比如图标、svg、图片、字体样式、元素间距等等,CSS Peeper便是一个完美工具。

可以查看字体样式,可以查看元素之间的间距

图片

可以查看网页中使用的颜色

图片

可以查看网页中出现的图片或图标

图片

 

Chrome拓展程序的安装也是超简单,在拓展程序中搜索,然后点击应用就可以啦。

拓展程序地址:https://chrome.google.com/webstore/category/extensions

 

原文地址:栗子设计喵 (公众号)

作者:栗子

转载请注明:学UI网》设计师必备的Chrome插件,超好用!!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档