首页

js 获取当前元素的父元素的父元素的id

前端达人

情景一:用onclick触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. function getDetail(obj){
  12. alert(obj.parentNode.parentNode.id); //1
  13. }
  14. </script>

运行结果:

情景二:直接用click触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. $(".info_detail").click(function(){
  12. id=$(this).parent().parent().attr('id');
  13. })
  14. </script>

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

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


文章来源:csdn   作者:

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

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

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





jquery 延迟执行方法

前端达人

setTimeout方法使用时需注意: 

复制代码
//以下两种方式都行: setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
function test(){
 alert("aaaa");
} //以下是错误示例 setTimeout(test(),2000); //会马上执行,没有延迟效果
复制代码

 




jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

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

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


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

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

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


APP设计:小易移动端 | B端销售平台移动化

seo达人



2020年的湖北疫情对公司的业务造成了一定的影响,为了避免不可控情况下的业务损失,复工后公司启动了智能销售平台移动化项目(即小易APP)。经过近一年的试运行,在广州发生疫情的时候,小易APP已经能支持业务基础需求。

备注:
为避免不必要的误会(xiemi),所有的客户、销售顾问、部门、套餐的名称都是虚拟命名。所有数据均为虚构,请勿过度解读。
love&peace

收藏

原文地址:站酷

作者:牙线y2x

转载请注明:学UI网》APP设计:小易移动端 | B端销售平台移动化

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


一招让你的作品集脱颖而出!

seo达人


转眼2021已经过半了,不知道大家今年都有哪些进步呢?设计作为需要随时补充新鲜养分的行业就要求设计师们随时走在最前端,时刻防止被时代抛下!年中我回顾了这半年一堆国内外设计师的作品,总结了一招可以让你的作品集在千篇一律的作品集中脱颖而出的方法 —— 2D转3D

图片

看到这你会不会觉得:就这?先别急。现在大家都知道为自己充电,大多会在作品集放一些C4D作品,这已经不是什么新鲜事了。然而怎么样才能凸显你的不同呢?如果单单放几张作品图可能还不够,你可以考虑把它结合在其它作品当中,这样不仅可以展现你的能力,还能凸显你的运用整合能力,整体的作品集质感立马提升一个档次!具体怎么结合?一起来看!

 

01.APP页面

首先你可以在APP页面当中穿插C4D的配图,如果实际项目当中不好结合就可以多做些概念稿。如果页面当中你实在结合不好,还可以在页面包装展示上面下功夫,巧妙地建一个手拿手机的模型,你的展示就会比别人的更加分。总之想尽办法提升含金量吧!

图片

图片

图片

图片

图片

图片

图片

图片

q

02.网页

为了展示全能型,很多设计师也会在作品集当中加入一些网页设计。之前流行的大多都是网页和插画的结合形式,然而现在大多设计师已经开始和C4D作品结合起来!

图片

图片

图片

图片

图片

图片

图片

 

03.插画

之前很流行的办公系列插画,现在国内外大神已经升级到3D系列了,整体风格没有太大变化,整体质感却提升了很多!

图片

图片

图片

图片

 

04.图标

图标作品展示也是作品集当中常见的一部分内容,除了常规的图标展示外,你还可以做一些3D图标。

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UIw网》一招让你的作品集脱颖而出!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


5个技巧,让你的做图效率翻10倍!

seo达人



相信很多设计师都会觉得每天时间不够用,没有效率,没有收获,那么今天分享5个时间管理的方法,帮助你提升效率的同时,个人也能得到成长。请看今天的分享,enjoy it。

 

如何做好时间管理?

图片

网上流传一张王健林的行程单,可以看得出时间分配相当满,于是我就特别好奇,专门问了一些我们公司的高P,他们每天那么多工作,是如何去平衡生活和工作的,其中有一个很重要的点就是做好时间管理且自律

比如今天晚上8点要和孩子去看一个音乐会,就会在8点之前把所有的工作全部搞定,然后去陪孩子!是呀,厉害的人,能在某一个点把事情全部搞定,本身就是超强的能力,那么作为职场人,我们该怎么合理管理时间呢,今天分享6个小方法给大家。

 

方法一:番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器,所以叫番茄工作法。

图片

 

如何使用?

选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在短暂休息一会(5分钟就行),每4个番茄时段多休息一会儿。

这个方法为什么好用呢?我相信很多设计师和我一样,每次工作几分钟后就会玩玩手机,看看微信,一边听歌,刷着网站,同时做着几件事情。

这个就是明显的一心多用,不够聚焦,番茄时钟好处就是督促你在这个25分钟内,专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事,然后休息5分钟,再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间,我将番茄时间的25分钟改成了45分钟,这样有助于我更好的聚焦。比如我有一个需求时,我会花45分钟看完交互流程,45分钟去和开发还原开发细节,45分钟去收集设计灵感,45分钟去把页面框架搭建好,或者设计好一个局部等等,然后休息5分钟,让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务,设计师的需求有大有小,大的比如一个首页改版,一个设计语言的建立,小的有一个弹窗设计,一个图标绘制等等,那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解,才能用多个番茄时间段来覆盖整个项目,比如需要做一个首页改版,那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点,需求讨论,设计风格探索,视觉设计,交付开发,然后每个大的模块下再细分小的任务,然后进行番茄时钟的评估,比如色彩收集我可能需要2个45分钟,那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务!明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时,闹钟响了,停下手上工作,短暂的休息调整下,切忌继续一直工作下去,因为只有适当休息,我们才能更加高效,高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时,喜欢戴着耳机听着音乐,但是在使用番茄时钟时,我不太建议这样做,原因在于音乐会干扰我们思考,有时候音乐还会影响你的情绪,所以这个时候建议大家听听舒缓的白噪音,比如海浪声音、风声、雨声,我个人比较喜欢听海浪拍打的声音,能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具,叫番茄钟,里面除了设置番茄钟外,还自带很多白噪音,非常好用!

图片

 

方法二:四象限时间法 

美国的管理学家科维提出的一个时间管理的理论,把工作按照重要和紧急两个不同的程度进行了划分,基本上可以分为四个“象限”:

1.既紧急又重要:

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急:

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要:

如取快递、部门会议等

4.既不紧急也不重要:

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务,按处理顺序划分:先是既紧急又重要的,接着是重要但不紧急的,再到紧急但不重要的,最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景:比如项目上线前的设计更改,明天和主管汇报的PPT,需求设计评审,这是我们每天工作的核心,大多数设计师在公司中日常任务就是产品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

因为整个产品是赶时间点的,比如双11那天必须上线,那么无论如何都要按时保质量的完成,所以这时候是考验我们经验、判断力的时刻,如果没有做好,很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情,并用工具软件记录下来!

图片

 

重要但不紧急

这里主要是和你个人成长发展有关,比如学习英语、提升动效技能、掌握C4D、理财等等,这些很重要,但是很多时候我们每天都在处理重要又紧急的事情,特别是互联网公司,每天都在做需求,对于自己的个人规划,根本没有时间处理,就会导致你个人的提升这些事情完全没有时间做,多把精力放在这个领域去提升自己,必须主动去做,这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作,那么你就要列出来大厂设计师的技能有哪些,比如科学设计方法、设计思维、动效、数据能力,然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升,慢慢才能达到目标,否则就一直成为流水线设计,或者项目里面一个资源方,个人成长永远没有!

图片

 

紧急但不重要

比如PM找你聊需求,当然正常需求该聊还是聊,但是工作中经常有的聊,真的只是陪聊,很多时候真的在没有必要,没有结果的开会,聊需求真的是浪费时间,表面看似第一象限紧急事情里,因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转,其实不过是在满足别人的期望与标准。

设计师经常遇见的,改文案啊,产品会议,开发排期这种会议在我看来,出来关键节点有结果的需要参加,更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新闻,当然人都是需要一些无聊消遣的,但不值得花很多时间在这个象限。刚开始时也许有滋有味,到后来你就会发现其实是很空虚的。

我经常给大家说,你怎么比别人进步更快,就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计,学各种课程,而你在做些无聊事情,一年下去差别就出来了,不是说我们不应该去娱乐,而是需要注意时间分配。

总之,关于时间的4象限,需要大家多多的关注,多把精力放在重要又紧急,然后允许情况下,多提升重要不紧急事情的投入,长期坚持下去,你会有巨大的改变。

 

方法三:先思考再动手 

图片

在接到需求时候,多问自己几个为什么,这个页面为什么要改版?改版是为了提升用户留存,还是活跃度?还是提升页面转化?还是优化了什么?了解清楚,梳理清楚逻辑、流程关系以后再动手,这才是一个正确的做事方式,同时也需要思考,你在这中间做了哪些有价值的事!

这个道理很简单,但是很多人都没有做到,我也有很多时候,做着做着掉进一个坑里,所以做之前想清楚,想好了再做会更好!

 

方法四:避免重复造轮子 

图片

 

避免重复,经常总结积累

做一件事情,学会举一反三,学会从点到面,在很多公司面试晋升过程中,比如阿里,P6资深设计师和P7专家设计师,很重要的一个技能点就是,如何从点做到面。

我们在做很多需求时候,需要思考,这次做的这个需求后续如果遇见类似的,能不能快速解决,而不至于浪费时间和精力投入进去没有成长!比如说按钮设计,我们随便抓一个市场上的按钮,你会发现按钮的样式、大小颜色就是各种不统一,浪费开发资源和设计资源!如果你每天的工作都是做这种浪费精力没有存在感的事情,对于个人是很不利的,平时做项目多留心下,比如我做一个专题页面是不是可以去思考下,这个页面做完哪些控件我可以沉淀下来,复用到其他的场景中,赋能给其他设计师呢,这个是很重要的!

同样的,比如我们最近在研究一个弹窗,那么是不是我做这次弹窗,我就把弹窗彻底研究透彻,弹窗尺寸大小、颜色、按钮、状态都研究彻底,彻底掌握了这个知识点,后面再做弹窗信手拈来,深刻搞定一个任务,避免反复,经常总结和积累,也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话,人的成长体现在同样的事情上,万事开头难,但后面会越来越顺手,因为在这个过程中你已经掌握了方法,我们需要做的就是不要半途而废,要学就学透学完整,后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子,一个代表AE,一个是C4D,一个是UI,一个是插画,很多东西都想掌握,于是每天学习一次就往这个杯子浇水一点,但是坚持10天就坚持不下去了,要么学别的,要么没有动力了,然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了,学彻底了再去学下一件事情,你学AE就彻底把AE掌握了,再去学下一个,这样避免反复,彻底掌握不仅能加速你的成长,更能让你专业更深!

 

方法五:放下手机,定时间点 

最后这个方法对我来说很有效,学会放下手机,放下干扰,中国口香糖的营业额持续下降,大家知道为什么吗?口香糖一般都会摆在收银台的旁边,因为用户在超市收银台排队的时候,都在玩手机,没有人去看前面的货台!可见手机对我们影响有多大,所以当你准备学习时候,或者去完成一个任务时候,最有效就是手机放起来,至少一个番茄时间不要去看,这样保证你的效率变高。

另外一个方法就是定时间点,定结束时间点很重要,人对于时间点都是有天然遵守的,比如地铁错过末班车就回不了家,火车飞机晚点你也回不去,所以我们做事情时候可以立一个最晚完成时间,然后去做,比如我写作,定的时间就是每周末必须写完,所以我周末再忙,都会去抽空写完。

 

最后 

今天分享的这些经验,都是我实践过并有效的方法,希望可以帮助到大家一同实践起来,照着做下去,你会发现能压缩至少1/3的时间出来,让我们都把时间花在正确的事情,和正确的人身上,快乐工作,快乐成长,快乐生活!

 

原文地址:我们的设计日记(公众号)
作者:sky

转载请注明:学UI网》5个技巧,让你的做图效率翻10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


设计沉思录 | 直播带岗的新体验之路

seo达人


2020年互联网行业最火热的关键词就是“直播”了,据中国网络视听节目服务协会发布的《2020中国网络视听发展研究报告》显示,截止2020年6月我国网络直播用户规模达5.62亿。每天观看直播已经成为了越来越多人的习惯。

a

01.变化与契机

2020年互联网行业最火热的关键词就是“直播”了,据中国网络视听节目服务协会发布的《2020中国网络视听发展研究报告》显示,截止2020年6月我国网络直播用户规模达5.62亿。每天观看直播已经成为了越来越多人的习惯。

随着用户习惯的变化,我们也洞察到用户对求职场景也在发生着变化,为此,58招聘也为用户开启“直播待岗”的新招聘场景。同传统招聘相比,直播招聘有许多明显的优势:

1、传统招聘都是单一枯燥文字展示,信息有限且缺乏引导及号召力。而直播招聘是主播生动详尽讲解职位及企业信息,多维度展示的基础上激发引导求职者兴趣并触发投递行为。

2、传统招聘开展面试有门槛,互动机制不健全不及时。直播招聘可便捷进入直播间参与即时互动沟通,高效便捷无门槛。

s

02.洞察问题

我们用最短的时间上线了第一期的版本,主要内容在于基础框架及功能的搭建,设计上借鉴其他业务的经验及规范,快速跑通整个流程。一期上线后,数据情况还是比较一般,我们和产品交互同学一起对数据进行了分析,并且对用户路径进行了体验走查,梳理出了造成用户流失的几个主要原因:

 

1、找不到合适的职位,当用户进入直播广场后,筛选直播间成本非常高,无法从卡片片现有信息的呈现上分辨出有什么职位,导致用户直接流失。

2、整体氛围冷清,情绪上较低落,无法激发用户的投递热情,也不想和主播互动导致主播情绪也低落,形成了一个恶性循环,从而不能达成连接

3、互动形式单一,只能留言、点赞和投递,对一部分有输入障碍的用户有影响

图片

w

03.设计策略

基于此,我们针对各个环节中用户流失的原因,总结了提升直播连接转化的3个方向,在信息传递上,重点突出直播间的职位信息,让用户可以第一时间获取到最想看的内容;在氛围的营造上给用户营造一种热闹、很多人投递的感觉,打破用户的心理防备,激发用户的投递欲望;在互动方式上增加一些新的便捷互动形式和互动反馈来降低用户参与的难度。

 

1、帮助用户更好的获取直播内容

用户对于直播信息的甄选,主要来自直播广场。因此,在2.0中在直播广场增加了列表的标签筛选功能,让用户能够进行快速的初步筛选。

图片

并且统一了直播中、预约、回放3种卡片的结构,降低用户的认知成本,提高的用户的操作效率,让用户在此场景中保持足够的专注,快速找到想看的直播间。

图片

在技术上也有了进一步的能力,直播间可以实现实时透传,为用户的决策提供了又一个依据。

图片

 

2、氛围营造

热闹

初期的直播间整体上还比较冷清,在色彩的运用上比较保守,在改版中,我们增加的更多饱和度较高颜色,提高整体的氛围感。例如在“谁进入直播”,由单一的文字弹幕变身为动态的彩色弹幕,并配上可爱的表情符号,营造了出超级热闹的景象。

 

大家都在投

直播间临时将各种不同的用户聚集在一起,形成了一个小集体。有集体,就有从众效应。我们对他人投递简历的情况也反应在弹幕上,给用户形成一种心理暗示,促进用户简历的投递。

 

游戏

直播是一件比较花时间事情,为了让用户能够停留在直播间的时间长一些,在直播间增加红包的游戏运营能力,让用户愿意花时间来兑换一些事情。

图片

 

3、互动方式

在互动形式上,除了已有的点赞、留言、投递简历外,增加了快捷提问的功能,方便用户的提问,提升互动效率。当用户投递了简历后给用户一个动画效果的强反馈,给用户一种受到重视的感受。 

通过以上优化的推进上线,整体数据达到预期,我们将持续关注数据变化找到用户的卡点,解决用户的问题;持续优化功能,给用户更好的服务和体验。

s

04.写在最后

通过直播的形式将企业信息、职位信息介绍给求职者,一方面加强求职者对企业的关注度,另一方面增加求职者对职位的信任度从而促进求职者进行简历投递或马上微聊企业。新颖的直播形式不仅可以帮助企业解决招聘问题,还可以助力企业的品牌推广,树立雇主品牌形象。
“直播带岗”作为招聘新场景的一个尝试,一切才刚刚开始,随着产品的逐步完善和成熟,未来的招聘直播定会带给用户更好的体验和更高的效率。

图片

原文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计沉思录 | 直播带岗的新体验之路

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


没想到用这个方法,原来小白也可以做动效!

seo达人


本文会给大家分享直播pk状态的小动效制作感悟了,细节磨了很久,希望能给大家一点启发。今天会从过程稿和最终稿的效果展示、主体动画、修饰元素动画等方面进行分享。

下图是直播pk的状态设计效果:

图片

 

如果只是静态的,我认为还不够有亮点,如果能加上一点动效设计,就比较好了。

实不相瞒,这是一次需求方没有提需求,设计侧主动反推的逆向需求。

今天的分享大纲如下:

1. 几个过程稿和最终稿的效果展示

先来展示几个过程稿,了解以下整体动效细节的调整。

第一稿效果如下:

图片

稍微有点生硬,氛围感不够强烈,于是第二版加了一些氛围元素,加长了主体位移的距离,效果如下:

图片

比之前好一点,但是有同事反馈说稍微有点快,然后效果不够霸气干脆,于是我又咔咔一顿调整,让主体出来之后稍微停顿一小会,然后垂直落下:

图片

这样就会干脆很多,而且加了一个闪光和高光的效果,让整体更加有氛围一些。

大概的三个版本优化过程是这样的,其他小的微调优化就不展示了,接下来我们拆分来剖析下这个动效。

 

2. 先完成主体动画

我们先来看下主体的动画效果:

图片

可以分成2个属性来看:

位移:

主体物先从下到上,然后再往下位移一小段!

 

缩放:

缩放很简单,就是从小到大的一个简单缩放,但这里有个层次的细节,边缘的外圈和小皇冠是等主体缩放完成之后再依次出来的,这样会让整体层次感更佳。

 

3. 翅膀的小动画

小翅膀的动画算是一个小亮点吧,我加了一个拖影的效果,其实从制作层面也很简单,固定一个锚点:

图片

然后依次进行旋转即可。这里注意下,因为三个翅膀是拖影效果,所以依次是原来越大,然后透明度依次降低。

动画效果如下:

图片

翅膀做一个合成(类似智能对象),然后复制对称就可以了,这样改翅膀的动画改一个就可以。

 

4. 加上修饰元素动画

整个主体翅膀的动画已完成,就可以想办法加点修饰元素了,我这里一共加了三个触点:

第一个:放射线条

图片

让整体有一种放射光芒的感觉

 

第二个:星星光圈

因为星星的设定是有一点反射材质的,所以最后让星星再次产生一个光圈扩散:

图片

 

第三个:反射高光

最后动画结束,再加一个简单的高光位移:

图片

很简单,就是白色矩形加上透明度和位移即可。

 

总结

好了,以上就是这个小动效的制作感悟了,细节磨了很久,希望能给大家一点启发。

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》没想到用这个方法,原来小白也可以做动效!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


没想到过程稿这么丑,结果用了两招就把效果改好了!

seo达人



上次我们分享了左面的等级相关的,今天我们接着来分享第二张任务相关的。本文会从引导页的3个方面讲解:一个好的创意非常重要、元素一定要有细节、搞一些灵动的小亮点,做好这3点能给作品加不少分。

最近做的引导页,效果如下:

图片

 

1.一个好的创意非常重要

很多时候,一个好的创意非常关键,可以让设计产生亮点,等级这个页面,我个人还蛮喜欢这个创意的。

因为这个页面讲的是每周任务,我从“周”这个字眼想到了时间又想到了日历,所以我想用一个大的日历作为整体外轮廓,然后日历里面的结构是一些相关的礼物元素。

但是最开始的效果并不理想:

图片

看不太出来是日历,那怎么样才能一眼就看出来是日历呢?

那就是有一种翻页的感觉,比如下面这种:

图片

这样就可以看出来是日历了。

除了日历,刚才也说了,还要有一些相关元素,礼物呀、升级的火箭呀、直播的小电视呀等等:

图片

这样有大的框架,再加上修饰的元素,整体的创意就差不多了。

 

2.元素一定要有细节

每一个元素都会影响画面精致度,比如之前说的那个礼盒,之前没倒角,倒角之后,和整个更搭一些:

图片

再比如,我之前画的电视有点太简单粗暴了:

图片

于是找了几个电视的参考:

图片

加了一些细节和优化,优化后效果如下:

图片

这样就比之前精致一些。

当每一个单体做到位了,组合起来就不会差太多,否则就会影响整体质量。

 

3.搞一些灵动的小亮点

其实让画面变灵动的方法有很多种,我个人特别喜欢使用一些可爱的表情、或者小形象。

比如之前在做任务头图的时候,字体上加了一个小微笑的表情:

图片

再比如这次,在日历外面加了一个黑子,偷偷看里面礼物的细节:

图片

让用户感觉里面确实有很多好东西。

再比如日历里面的星星也加入了表情:

图片

让其更加有生命力。

这些都是我喜欢使用的小技巧。

 

总结

今天就先分享这么多啦,每次做引导页都是比较开心的,因为可发挥空间会比较大一点,也可以使用自己比较喜欢的3D手法,希望过程中的小感悟可以给大家来点灵感!

下期见,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》没想到过程稿这么丑,结果用了两招就把效果改好了!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


情感化层面解读微信“拍一拍”的价值

seo达人



2020年6月17日,微信发布了新版本,上线了“拍一拍”功能。从上线之初火遍每个社群,到现在迅速沉寂下来,这种变化应该也在很多人的意料之中。那“拍一拍”的价值点到底在哪里呢?我也来给大家说道说道。

文章的主要内容包括:
01、“拍一拍”功能定位
02、功能拆解
03、体验设计分析
04、“拍一拍”价值分析

 

01功能定位

张小龙朋友圈:“微信史上仅需一行代码的有趣功能终于来了。拍一拍,像蚂蚁一样打招呼。”
图片
从张小龙的描述中,拍一拍功能定位是一种打招呼方式,而且希望带给用户更加有趣的体验。

 

02功能拆解

社交本质上是人与人之间的信息传递,这其中包括两大节点,信息的输出和接收。所以我们就从这两个维度去分析下“拍一拍”功能。

 

1-信息输出
操作方式:用户只要双击对方的头像就可以完成拍一拍行为。

 

操作反馈:
1)对方头像晃动,伴随着手机震动,同时聊天界面中会出现提示文案,“你拍了拍xx”。

 

2)如果对方不再是用户好友时,“拍一拍”在显示文案信息基础上,还增加了朋友验证的提示信息。
图片

 

3)当用户退出对话框时,拍一拍的对话栏会根据信息时间重新排序,类似于消息排序的逻辑。
图片

 

2-信息接收
信息接收主要包括以下3个场景:聊天列表、对话框、信息刷屏状态。

 

1)聊天列表

当别人拍了拍我们,或者别人拍了拍别人,我们都不会收到任何提醒。为了让用户有所感知,同样会根据更新时间顺序将对话栏显示在聊天列表中,同时列表会展示拍一拍文案信息。

图片

 

2)对话框
当用户打开对话框时,头像会晃动两下,并伴随着手机震动。让用户明显地感知拍一拍信息。

 

3)历史消息
当聊天界面内容较多,“拍一拍”的信息被刷屏了,那该怎么办呢?
不用担心,微信考虑的很周全,当用户上翻聊天信息时,内容显示到“拍一拍”文案时,手机也会发出震动反馈,保证用户无需仔细阅读信息内容,即可快速、准确地感知到“拍一拍”信息。
此外在用户行为方面,“拍一拍”玩法没有做出限制,用户可以自拍,别人互拍及自拍,并且文案信息都会呈现在对话框中。最大限度的激发用户互拍的欲望。

 

03体验分析

1)简单
微信作为重要的社交工具,一直在孜孜不倦的追求简单的玩法。所以“拍一拍“操作简单,只需要双击用户头像即可实现,这也是能够掀起全民互拍狂欢的基础条件。

 

2)轻量
拍一拍作为弱提醒方式,其实是对现有信息提醒方式的补充,强调点到为止。尽可能减少社交信息给用户带来的心理压力。

 

3)感知
为了激活用户交流,需要保证用户对信息的感知。因此在对话栏排序上参照文字消息的逻辑。而打开对话框时、微信群消息等场景中增加了震动反馈。

 

4)有趣
“拍一拍”丰富了微信的沟通方式,在文字、图片、语音等信息形式基础上,增加了现实生活中的行为方式,形成了更强的行为映射。所以引发了一波“拍一拍”浪潮,也被广大网友玩出了新的高度。
图片
(图片来源于网络)

 

04价值分析

1-用户侧价值
张小龙说,“微信的梦想是什么?从个人角度成为人最好的一个工具朋友。从平台角度,建立一个市场,让创造者体现价值。”
那请允许我推测一下“拍一拍”对用户的价值。

 

1)新的社交礼仪
现在的微信消息提醒方式包括对话栏角标、群内@,强提醒等形式,这些形式都让用户都无法忽视。特别是一对一沟通时,红色的角标如果一直存在,可能会逼死强迫症患者。但是一旦打开消息界面,你又无法忽略信息的内容。因此之前就有人提出增加一个信息置底功能。
而“拍一拍”作为一种轻量级的打招呼方式,或许可以成为微信社交中新的选择。例如在微信群中,如需非紧急必要的事情,可以在信息之后,拍一拍对方,表示这条信息是专门发给他的,让他能够接收到就可以了。而不需
要采用@的方式,减少对用户带来的信息轰炸和心理压力。

 

2)快速回复
未来“拍一拍”可能会成为一种快速回复方式。
当前交互方式中,文本信息方式用户成本最高;图片、表情方式可能无法准确的表达回复内容;语音、通话过于沉重,对环境要求也较高。因此微信需要创造一种更加快捷的方式满足简单回复的需求。
而拍一拍,可以轻松的实现这一点,拍一拍对方即可表示消息反馈,又减少了用户交互成本。

 

3)情感化表达
现实生活中,拍一拍包含了各种情感信息。
例如当我们需要与别人打招呼或者沟通时,可以通过“拍一拍”、“戳一戳”等接触方式,引起别人更强烈的注意。
又比如当我们跟别人沟通结束时,可以拍一拍对方,给予鼓励。或者说一句“没事的,以后肯定会更好“、顺手拍一下对方,表示理解或感同身受。
同样作为现实生活的映射,在微信聊天过程中,我们可以借用“拍一拍”,更加充分的表达情绪,而震动反馈或许能够让对方更加真切的感受到我们的关爱。

 

2-产品侧价值
1)促进版本升级
“拍一拍”需要升级微信版本才能使用,当全民都在拍一拍时,你是无法视而不见的。因此可以更好的促使用户主动升级版本。

 

2)激活微信群
“拍一拍”上线后,很多沉寂已久的微信群开始“复活”了。大家都在主动的尝试新的功能,而且网友们还玩出了各种花样。而这仅仅只需一行代码的投入就做到了,可以说价值巨大。
 

总结

我们都知道,微信是极具克制理念的产品,微信每天都拒绝着大量的看似合理的用户需求,张小龙有着自己的设计理念。此次“拍一拍”功能对用户的行为也做到最轻量级的影响。
或许“拍一拍”只是一次新的尝试,最终会随着新鲜感的丧失,成为用户眼中的“鸡肋”功能。但是这其中带给我们的启示,是值得我们深入思考的。

 

原文地址:子牧UXD(公众号)
作者:子牧先生

转载请注明:学UI网》情感化层面解读微信“拍一拍”的价值

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


设计师的项目管理意识

seo达人


项目协同与执行的过程中总感觉节奏乱?对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错,但项目中的角色话语权不高?多个项目并行不知如何管理操作,有无标准方法,怎么从中创造更大的价值?本文结合日常项目管理当中的一些思考与方法,带大家了解设计师需要有的项目管理意识。

 

如今设计师不再仅仅作为一个需求的接收方与执行方,职能更加的全面,在整个产品设计研发流程中也需要我们有更强的参与度。最近工作中得到一些设计同学的咨询并参与围绕着一些项目中的问题进行讨论,比如:项目协同与执行的过程中总感觉节奏乱?对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错,但项目中的角色话语权不高?多个项目并行不知如何管理操作,有无标准方法,怎么从中创造更大的价值?本文结合日常项目管理当中的一些思考与方法,带大家了解设计师需要有的项目管理意识。

图片

a

01.好的设计能不能管理出来?能收获什么?

首先,我们思考一下,管理是什么?其实简单来说更像是很多标准化、流程化、格式化的方式方法组合,辅助我们更好的达成目标,并为整个设计团队构建一个基础的工作体系。项目中稳定与高效输出都来自于更加科学的管理。设计师链接上下游部门,也需要通过管理来解决诸多设计以外但与设计有联系的事务。对于我们的收获部分可以大致分成以下三点:

图片

· 目标达成层面

引导促成整个产品/项目的目标高质高效达成,使之利益最大化。

· 视角变化层面

能够让我们视角产生改变,能够更全局看待问题,让自己有大局观的同时更加拥有结构化的思维。

· 影响力与服务能力的提升层面

在项目中角色话语权提升,在团队内外有更高的影响力

a

02.项目管理我要管什么?

设计师运用项目管理的方法,个人认为最基本的就是要合理的规划与控制,管人管事,且贯穿在整个项目流程当中,以下几点其实我们可以重点关注。

图片

我们工作当中实际参与的流程,基本可以归纳为启动阶段、计划阶段、执行监控阶段、收尾阶段。

 

· 启动阶段

在这个阶段经常会使用到6W2H方法,它有助于我们思路的条理化,杜绝盲目性,所以此方法能够快速帮助我们确定目标、里程碑、项目成员以及合作模式,例如在此前的二手车大类页改版等大型改版项目中都有所使用。

图片

 

· 规划阶段

需求的梳理、排期、以及任务拆分、资源协调。我们可以尝试使用STAR模型来操作。而这部分在车业务的内部设计需求中也是在iWiki常态化留档的,以SITUATION(背景),TASK(任务),ACTION(行动),RESULT(结果)几个维度构成表的基本结构。

图片
图片

需求规划完毕需要考虑的就是内部资源协调,在专职项目、动态项目、创新项目中协调的原则上可以是:擅长人做擅长事,挑战与执行并存,提效最大化,成长最大化。

 

· 执行监控阶段

在此阶段,我们可能会遇到以下一些问题,产出效率不高、质量不高、反复修改或项目推进缓慢影响业务目标。这些情况或风险在很多项目当中都存在,风险并不一定是坏事,而风险大多数都是可以预测和管理的,我们可以多使用WWH模型和STAR模型结合的方式快速的辅助我们思考、记录、评估、计划、调整。在落实的时候我们会使用到iWork工具进行需求的变更、说明、同步,包括后续的进度跟踪与回溯,在项目的管理上非常直观易用。

图片

图片

 

· 收尾阶段

对于该阶段质量控制方面,我们引入了更规范的走查文档、共建集成体验环节、以及全职能自查环节。常规的设计走查介入方式如下:

图片

改变走查方式之后,增加集成体验环节与每个节点中的输入输出内容,保障每次项目的最终落地质量。

图片

在收尾阶段从项目管理的角度来说另外一个希望提及的是,除了事前有规划、执行有控制、更要注重事后收尾有总结。虽然每一次的项目可能过程会有一些不同、结果目标不同,但是我们在总结复盘的过程中一定要做到以下几点:

1.拒绝形式化,避免假大空反思

2.具备借鉴意义

4.对应解决方案,具体落实到人、功能范围、时间等

w

03.聊聊其它

其实我们可以发现既然是要去管理项目,在每个节点里沟通是非常重要的,可能很多设计师都会遇到一些沟通方面的问题:效率低、无结果、惧怕沟通。其实多数就是在信息通过传输渠道、媒介的时候,发送者与接受者在各阶段所暴露出的不同问题,如下图:

图片

 

· 我们可以怎么做呢?大家可以多从以下几点去思考

1.沟通前的思路整理以及相关案例或设计理论的支持

2.对齐沟通方的关注点与信息交集

3.灵活正确的处理意见与分歧,开放心态、开放式话术、气氛控制、善用询问等

4.总结与使用流程管理进行规划

5.建立设计师个人品牌可信度

以上为对日常设计项目管理工作的一些个人理解,大家可在实际的项目当中灵活应用,如对项目管理方面非常感兴趣的同学也可以去看看PMP相关知识,也欢迎入群多多交流。

图片

 

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计师的项目管理意识

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


日历

链接

个人资料

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

存档