首页

iframe子页面调用父页面js函数

前端达人

1、iframe子页面调用父页面js函数



子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数,就写成:

复制代码 代码如下:

window.parent.a();



子页面取父页面中的标签中的值,比如该标签的id为“test”,则:

复制代码 代码如下:

window.parent.document.getElementById("test").value;

jQuery方法为:

$(window.parent.document).contents().find("test").val();



但是我在chrome浏览器下却发现此方法无效了!查了半天才了解,在chrome 5+中,window.parent无法在file://协议中运行,但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。



2、iframe父页面调用子页面js函数

复制代码 代码如下:

这个就稍微复杂一些,下面的方法支持ie和firefox浏览器:

document.getElementById('ifrtest').contentWindow.b();

子页面取父页面中的标签中的值,比如该标签的id为“test”,则:

document.getElementById("test").value;







注:ifrtest是iframe框架的id,b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象,IE下可以省略。




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

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



文章来源:csdn

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

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


关于JS中作用域的销毁和不销毁的情况总结

前端达人

window全局作用域->页面关掉才销毁
函数执行会形成私有的作用域

1)作用域的销毁
一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间

2)作用域的不立即销毁
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先执行fn,有一个私有的变量i=10,返回一个堆内存地址 xxxfff111,我们发现这个地址还用到了一次,那么当前的这个fn形成私有作用域(A)就不能立即销毁了,xxxfff111(15)->输出25,A中的i变为11;当xxxfff111执行完了,发现这个地址没用了,浏览器就把A、xxxfff111都释放了

fn()(20);//->在执行fn的时候一切都从新开始了,和上面的步骤是一样的->输出30

3)作用域的不销毁:形成一个私有作用域,里面的内容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn执行形成一个私有的作用域A,A中有一个私有的变量i=10,A中返回一个地址xxxfff11,被外面的f占用了,那么当前的A就不能销毁了
f(15);//->输出25,让A中的i=11
f(20);//->输出31,让A中的i=12
...
当我们知道f用完的时候,为了优化性能,我们让f=null,这样的话A中的xxxfff111没人占用了,浏览器会把A和xxxfff111都释放了


几种不销毁常用到的形式:
1)函数执行,返回一个引用数据类型的值,并且在函数的外面被别人接收了,那么当前函数形成的私有作用域就不在销毁了-->例如上面的案例

2)在函数执行的时候,里面的一个小函数的地址赋值给了我们的外面元素的点击事件,那么当前小函数也相当于被外面占用了,大函数执行形成的私有的作用域也不销毁了
//每一次循环都执行自执行函数形成一个私有的作用域(循环三次就有三个作用域,每一个作用域中都有一个i,第一个存储的是0,第二个存数的是1..),在每一个私有的作用域中都把里面的函数绑定给了外面元素的点击事件,这样的话每一次形成的作用域都不销毁了(三个不销毁的作用域)
var oLis=document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}

3)在使用setTimeout实现轮询动画的时候,我们如果move需要传递参数值,那么像下面这样的写法会行成很多的不销毁的作用域,非常的耗性能
function move(tar){
<js code>

//window.setTimeout(move,10); ->第二次执行move的时候我们没有给它传值(这样写不行)
window.setTimeout(function(){
move(tar);
},10);//->这样写实现了,但是每一次执行定时器都会形成一个私有的所用域(匿名函数形成的)A,在A中使用了上级作用域中的tar的值,而且执行了move又形成了一个小的作用域(而在小的作用域中会使用tar的值),这样每一次定时器形成的A都不能销毁了
}
move(100);//->第一次这样执行传递100

//解决办法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次这样执行传递100


JS中内存空间释放的问题(堆内存、栈内存)
[谷歌浏览器]
我们开辟一个内存,可能或有一些其他的变量等占用了这个内存,谷歌浏览器都会间隔一段时间看这个内存还有没有被占用,如果发现有没有被占用的内存了,就自己帮我们回收了(内存释放)

[火狐和IE]
我们开个内存,当我们引用了它,就在内存中记录一个数,增加一个引用浏览器就把这个数+1,减少一个引用,浏览器就把这个数-1...当减到零的时候浏览器就把这个内存释放了;但是有些情况下(尤其是IE)记着记着就弄乱了,内存就不能释放了-->浏览器的内存泄露

var obj={};
我们养成一个好的习惯,当我们obj这个对象使用完成了,我们手动的obj=null (null空对象指针),浏览器会自己把刚才的堆内存释放掉

标签: javascript




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

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



文章来源:博客园

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

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


没想到学会这套方法论,定义视觉风格能这么快

seo达人



江湖上一直流传着这样一套理论,视觉设计语言五维度即“形、色、字、构、质”,说人话就是图形、色彩、字体、结构、质感。这套理论的来源我寻了很久也没找到,但是这套理论却经常出现在各种方法论里面。下面我来逐一分享一下我对这几个要素的理解。

 

图片

 

1、形 

形就是指图形,界面中的图形就包括图标、卡片、图片,因此,icon的风格、卡片圆角的大小、图片圆角的大小,都会影响界面的风格,所以要进行规范。图片 

2、色

色即是色彩,在界面中色彩不是单一的色调,它是整个色彩规范,什么时候应该用主色,什么时候应该用辅色,主色和辅色的比例,颜色在图标、文字、装饰上的应用,这些会影响人的整体感受,吸引视觉注意力,规范的配色搭配会让界面的视觉更加舒适。

图片

 

3、字

字即是字体,字体的形式、字号大小、文字的间距都影响着界面的信息传递,选择符合产品特性的字体、合适的字号、舒适的间距都能让界面看起来更加精致。

图片

 

4、构

构即是结构,也就是界面的内容布局,排列的方式、分割的方式、留白的多少,都是属于界面结构的范围,结构的定义非常重要,决定着界面是否具有呼吸感、通透感、舒适感。

图片

 

5、质

质就是质感,也就是整体页面的感觉,通过圆角的大小、留白的多少、排版的疏密、投影的大小来决定整个质感是扁平的还是拟物的、高冷的还是活泼的。

图片

知道了这五个维度之后该如何应用呢?我们可以应用在竞品的视觉分析里,项目的视觉改版里,项目初期的定风格阶段里,反正就是应用在一切需要整理汇报的地方,提升你设计的专业度和可信度,如果在你的述职报告或者作品集里面搞一下,档次一下子就上去了。

最近因为季度汇报,我发现有些领导可太爱听这一套大道理了,加了这些方法论之后,他就会觉得这个人有思考、能力强、有自己的方法论,不过是好是坏那就各自评说吧。

 

原文地址:LEO设研所(公众号)

作者:设研_仓仓君

转载请注明:学UI网》没想到学会这套方法论,定义视觉风格能这么快

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

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


文章来源:csdn

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

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

用案例和方法,带你剖析「情感化设计」

seo达人



最近在产品体验中,发现了不少有意思的情感化设计案例,有些让人眼前一亮,有些很好的满足了用户情感需求,所以今天就汇总一下分享给大家。
文章主要内容包括:
1、如何理解情感化设计
2、结合案例分析情感化设计
3、3个情感化设计方向
              

一、情感化设计

什么是产品的“情感化设计”呢?先说2个小故事。
           
故事1
我儿子今年5岁了,周末带他去游乐园,他拿着我的手机看导航。突然说了一句“你的导航真厉害啊,还显示天气呢~”。这些成年人眼中习以为常的内容,却成了孩子惊喜的认知。
            
故事2
某天傍晚,南京地区的微信朋友圈忽然掀起了夕阳美景“摄影大赛”,成为了迅速传播的话题,大家都在晒照片,惊叹转瞬即逝的美景。这里面可能有很多因素,诸如参与感、分享的欲望、跟风等,但是美景才是打动用户的真正原因。
图片
通过这2个小故事,我们可以总结下情感化设计的要点:
  • 对不同用户,情感化设计的感知是有所差异的,需要设计师拥有不同的价值视角,甚至是对一切事物抱有好奇感的童心。
  • 情感化设计需要带给用户美好的感受,也是符合大多数人共同的认知体验。无论是会心一笑,还是形成深刻记忆,都必须能够激发出用户情感。
  • 情感化设计一般只能引起用户短暂的情感变化,当用户形成了认知之后,可能就失去了最初的魅力。

 

二、情感化设计案例分析

诺曼的《情感化设计》指出,人的3个认知层次:“本能层、行为层、反思层“,构成了用户认知事物的过程,每个层次都会产生不同的用户情感。
图片
             
01/本能层
视觉信息激发情感
所谓“爱美之心,人皆有之”,人们对美好事物的追求是一种本能反应。因此可以利用色彩、质感、图形建立场景氛围,激发用户情感。
                           
1、品质感渲染氛围
最近支付宝818理财节界面设计,利用金色很好的营造了节日氛围。而品质感极强的金色卡片,增强了用户的获得感,更好的激励用户参与活动。
图片
                      
2、真实场景再现
在虚拟的互联网中,建立符合真实生活场景的认知体系,是体验设计的一个重要方向。
在正常比例下,高德地图采用蓝色表示水域,例如河流、湖泊等。当地图比例放大到一定程度时,水域会有水纹波动的效果。通过场景仿真再现,带给用户“近大远小”的真实体验。
图片
               
3、关怀体验
相比界面设计传递出的偏主观的感性理解,文字可以带给用户直接而明确的情感体验。
                           
1)语言文字中的情感表达
用户在被邀请加入微信群时,下方信息会提示群中有哪些好友,从而帮助用户做出入群判断。另外提示信息还告知入群后可能产生信息干扰,在一味强调利益点,引导用户行为的商业化设计中,这样的提醒给了用户更多的人文关怀。
图片
                 
因偶感风寒,朋友下单买了感冒灵颗粒,美团外卖小哥在送药时,说了一句“早日康复”,让她对美团的服务惊叹不已,甚至有一丝感动。虽然不确定这是不是美团的标准化服务流程,却提升了她对美团服务体验的满意度。
图片
                         
2)安全感彰显用户关怀
iOS多任务管理页中,支付宝、银行等金融类应用会增加遮罩效果,保护用户隐私,通过差异化的展现形式,增强了用户的信任感。
而用户在支付宝“付款/收钱“界面截屏时,系统会主动给出安全提示,让用户感受到来自支付宝的关怀。
图片
                                     
3)满足用户的内心渴望
粉丝数是公众号运营的重要指标,特别是新的玩家,涨粉的渴望是不言而喻的。
前几天,我突然发现公众号粉丝从1.0K变成了1.1K。当时内心一阵狂喜,立即查看了具体粉丝数,结果并没有超过1.1K。原来粉丝数的显示规则是四舍五入,也就是说当粉丝超过了1050后,都会显示为1.1K。
这比我们常见的1.0K+的形式,数据上做了适当的夸大,但是并会对用户判断产生大的偏差,反而满足了用户的虚荣心。即使看到具体数据时,内心会有小失落,但也不会造成用户反感。
图片
当然本能层的情感设计,通常只能带来的用户情绪上的微小变化,或者短暂的刺激,无法强烈的改变用户对产品的认知,或者触发更多的用户行为。
                     
02/行为层
行为过程强化情感
用户的参与可以带来更强的的情感反馈和认知,并且更容易形成持久的用户记忆,甚至会培养新的用户行为习惯,从而增强产品粘性。
                          
1、动效设计融入情感表达
TIM 聊天列表页面,用户可以拖拽消息数量角标,快速消除未读提示,同时带有灰飞烟灭的动效。
相比较常见的点击消除,或者向左滑动后标记已读,这种交互方式既提高了用户操作效率,又增加了消除提示的畅快感,仿佛帮助用户甩掉了各种烦恼和压力。
图片
                      
即刻APP在用户头像中增加了拖拽反弹动效,除了视觉上爱心碰撞带来的爽感,过程中还增加了震动效果,传递给用户力度回馈。碰撞之后顶部出现的嘴角上扬的笑容,又带给用户无尽的想象空间。
图片
                                
2、创新玩法赋予产品情感体验
最近微信推出的“拍一拍”功能,创造了新的用户沟通方式和使用场景,简单的玩法激活了用户猎奇心理和表达欲望。所以功能刚上线时,借助社交关系迅速传播,并衍生出了各种趣味玩法。
传统广告主要是通过视频播放吸引用户点击,用户更多的是被动接受。而微信朋友圈广告则是播放广告片段,激起用户的好奇心,并结合手势玩法提升了趣味性,吸引用户主动参与其中,从而形成更强的用户认知和记忆。
图片
                                 
03/反思层
价值影响情感认知
前几天很多朋友发现蚂蚁庄园养的小鸡不见了,只留下了一封鸡毛信。
图片
当用户都在猜测支付宝是不是要出现新玩法的时候,支付宝公众号给出了答案。

“我鸡呢???我一把屎一把尿的把它养大,怎么就剩根鸡毛了?” 
“嘿嘿,上支付宝搜「找小鸡」,你就知道了。” 
“都是同事你装鸡毛啊!直接说。”  
“三年来有4.5亿网友在蚂蚁庄园捐出240亿颗“爱心蛋”,90%以上的公益项目都与孩子相关,小鸡去看看这些孩子们。” 
“中午回来吃饭吗?“ 
“12点前就都回来了,能赶上吃饭。” 
“行叭,我刚给它换的衣服,别玩脏了。”、
                                    ——来自支付宝公众号

 

支付宝的创新玩法,引发了用户的猜想,增强了活动的话题性,精彩的文案对白,既宣传了支付宝的公益行为,又收获了用户对品牌认知 。

 

三、情感化设计的方法

情感化设计在用户体验圈早已不再是新鲜话题了,但是如何做出符合用户情感需求的设计呢?我觉得可以从3个方面入手。

 

1、天时——关键时刻激励
抓住用户关键的时间节点,通过设计手法增强用户的情感效应。例如微信设定了生日、春节等关键词触发飘落动效,让苍白的文字信息更加富有场景化情感;
根据用户生命周期,电商平台会推出相应的礼包,促进用户转化的同时,让用户产生被关注的情感体验。
图片

 

2、地利——用户场景引导
根据用户行为流程,在关键的行为节点中增加情感化设计。
花小猪在成功约车后,满屏飘落的花瓣动效,烘托了场景气氛,有利于缓解用户等待焦虑。
特殊天气状况下,高德地图会显示天气情况,为用户出行提供参考。
图片

 

3、人和——挖掘用户内心诉求
利用用户自身的情感诉求,满足用户内心的渴望。
拼多多“多多梦工厂”游戏中,用户在加油之后,快递车会有明显的加速效果,很好的满足了用户急切收到商品的情感诉求,也更好的激励了用户持续加油。
图片

 

写在最后

情感化设计更多的是带给用户瞬间感动,很难形成长期的用户激励。因此情感化设计主要目的是通过情感累加,提升产品品牌形象。
不过情感化设计在落地时,会面临一些困难。
  • 一方面互联网已经发展了这么多年,大家对一些小的趣味细节,很容易视而不见,或者只能会产生一点点情感波动就结束了。
  • 另一方面商业化的设计,更加注重投入产出比和眼前收益,当情感化设计无法确定可以带来直接的经济效益时,很容易被pass掉或者无限延期。
所以设计师也需要不断的去总结和反思,如何坚守心中的那点儿设计情怀~
今天先说到这儿吧,下期再见~
                   
原文地址:子牧UXD(公众号)
作者:子牧先生
 转载请注明:学UI网》用案例和方法,带你剖析「情感化设计」

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

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


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

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

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

干货|如何通过设计传递「信任感」?

seo达人



众所周知,一个可以让用户充分信任的产品,才能可能与用户建立起良好的关系,在用户信息获取、产品目标实现上成为可能。对金融类、社交类产品而言,安全可信的需求更是用户最核心的诉求。

 

信任感维度梳理

客观技术 + 主观体验

信任感包括两个维度:客观信任感和主观信任感。

客观信任感通常体现在技术层面,依赖于交互设备和网络环境等;

主观信任感则体现在交互体验层面,通过交互流程和视觉效果对用户进行引导。

 

1 、客观|技术系统

通过技术安全和策略,传递给用户稳定的产品功能和策略,主要体现在以下两点:

图片

(1)稳定性

  • 不易出系统问题和 bug
  • 在各种应用设备上可以保证顺利切换
  • 在各种应用环境中可以保证流畅使用

 

(2)安全性

  • 身份验证
  • 隐私保护
  • 账户、密码安全
  • 功能使用过程安全
  • 其他

 

2、主观|交互体验

通过产品的设计和交互流程,传达给用户可靠的产品感受和体验,主要体现在以下四点:

图片

(1)可掌控

  • 给用户更多的操控权限:饿了么的推荐卡片设计,右上角的“…”,点击后会显示“不喜欢”,以此让用户感觉自己有更多的选择和操控权。

图片

 

  • 任务定制化,匹配用户能力:大众点评对于不同等级的用户安排的赚取积分的任务也不同,给初级用户降低难度,好上手;给中、高级用户提升挑战,有效促活。

图片

 

(2)可理解

  • 给用户尽可能提供全面、完整的信息:链家 App 在看房的时候,不仅有 VR 全景功能,还增加了“设计效果”方案。当用户点开“设计效果”后会看到分屏对比的效果,给用户对于房子空间的全面体验。

图片

 

  • 信息条理清晰,有章可循:支付宝相互宝的 “大病医疗” 需要阅读的信息很多,产品设计了目录作为引导,并将重要信息采用不同的背景颜色标记出来。

图片

 

(3)可依赖

  • 帮助用户轻松完成任务:产品了解用户的操作行为,缩短用户路径,例如京东等 App 在收货地址的填写时可以粘贴整段文字(地址,收件人,电话),然后“智能识别”到对应的文字选项中,优化了用户填写资料的体验,让用户完成任务毫不费力。

图片

 

  • 给出有利于用户决策的提示:下雨天美团外卖针对用户所在区域,提前推送天气变化,提醒用户提前下单。

图片

 

  • 给出的信息详实,以用户利益为出发点:使用支付宝理财在买基金时,产品会评估基金的风险和用户的承受能力是否匹配,并给予相应的提示。

图片

 

(4)可挽回

  • 非正常信息、错误内容及时同步:高德打车企业版如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道,尤其是对于对线路不熟的用户。

图片

 

  • 从根源防止用户出错:天猫购买产品添加购物车时,没有货的标签会变成禁用状态,避免用户下单。

图片

技术安全是可信性的保障,但并不是有了技术安全就足够了,还需要通过交互层面引导和优化使用户产生对产品的信任感。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|如何通过设计传递「信任感」?

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

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


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

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

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


UI动效设计之设计原则

seo达人



小编:动效已经成为UI行业里流行的趋势了,特别是游戏APP、短视频分享和直播类的APP或多或少都会有动效这样的元素。本文将来分享一些作者过往在动效设计过程中的基础知识沉淀,主要集中于探讨动效设计原则和运用的内容。

 

前言

前人已经总结了让动画生动的技巧,早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则,该法则也是受用至今。法则虽是针对传统动画而制定,但对于我们日常需求中所接触的动效/动画需求也同样受用。

 

目录

 

这次分享分为三个内容,第一个是介绍一下动画设计的“十二大原则”是什么?;第二部分是结合几个案例说明如何将这些原则运用到具体的项目中去的。最后就是动效设计流程的一个总结。

 

【1】动画设计技巧

如上图;动画的十二大原则又可以拆分为两类,动画设计技巧和动画表现技巧。

第一部分设计技巧是增添动画细节的方法,可以用这些原则让动画更有细节更生动。

第二部分表现技巧是提升整个动画在画面中全局表现力的,这个主要是多用在动画里。

在产品动效设计中还是常用到设计技巧,所以这次着重分享设计技巧这一部分。

 

 01 挤压和拉伸

【挤压和拉伸】是动效设计中最常用到的设计技巧。使用挤压和拉伸来强调物体的质感、重量、速度。我们可以根据物体的质感去决定挤压伸展的具体幅度。可以很好的表达出不同物体的不同质感。这里需要注意的是,物体挤压拉伸的面积尽可能保持视觉统一。以免动画前后造成不协调。

 

02 预期动作

【预期动作】可让用户感知到该物体即将发生运动,以及具体运动的方式和方向。让用户对动画效果有一个提前的预判不会太突兀。也可以根据预期动作去引导用户的视线。比如起跳时双腿先要弯曲,踢球向前射门时腿要向后摆动。所以在动效设计中我们运用好预期动作会让用户做好心理准备,让这个动画更加真实。

 

03 跟随与重叠动作

【跟随与重叠动作】这个技巧也是表达运动速度和物体质感的重要技巧之一。

跟随简单说举个例子就是挥棒球棒,棒球棒是手带动棒球棒转动,当手停止发力时,棒球棒不会立刻停止,会随着发力的方向摆动减幅,直到完全停止。摆动的幅度和持续时间会根据不同的力量及速度进行相应的调整。

重叠动作就是想象棒球棒如果是橡胶材质的,那么挥舞棒球的时候就会有一定程度的弯曲,所以速度越快,材质越软,弯曲程度也会越大。

 

04 缓动速度曲线

【缓动速度曲线】动效设计中最离不开的参数。不同的速度曲线也会给人不一样的感受,运动曲线较陡会感觉元素的质量更重冲击感更强,比如适用于我们竞争向的场景中。反之较平缓的曲线元素运动则较为轻盈。更适用于我们关系向的场景。

 

05 控制时间偏差

【控制时间偏差】运动物体的主要运动和附属运动不会同时发生,用时间偏差,会让动画更加真实自然。也可避免动效过程出现空档期,或者一次性出现过多的元素,增加认知负荷。信息离场时则需要快速高效,不需要人为的制造信息偏差。

 

06 弧形运动轨迹

【弧形运动轨迹】当自然运动的物体运动时都会受到引力的影响,简单解释就是速度越快弧线越平滑,移动距离越远。速度越慢弧线越弯曲,移动距离也越近。

 

【2】结合案例应用

下面就举几个案例,这些原则在具体工作中的应用。

 

01福袋:短触区引导动画 

 

这个是直播间福袋倒计时五秒开奖时播放的动画,目标是为了告诉用户福袋即将开奖,同时在这五秒内拉升福袋的价值感,提高福袋的参与率。

 

确定好动效的目标后,就要围绕这个目标对动画进行拆解。

  • 【第一步】是预备动作,在进行主要的动画之前需要有一个较强的视觉引导,让用户提前注意到福袋接下来会会有动作发生,这里采用的方式是抖动。
  • 【第二步】是体现价值感,这里采用的是金色粒子加发光的效果。
  • 【第三步】倒计时结束福袋准备离场。

 

动画步骤拆解完后就分析每一步动画需要用到的动画原则。比如第一步的抖动引起用户注意的同时下一步就需要喷出粒子,所以在抖动的这一步就要增加一个预期动作。在这里设计了两个预期动作:一个是粒子向右上角喷出,所以预期动作设计成向左下角提前移动收起,同时给下一步的粒子动画留出足够的空间出现。第二个是收紧口袋,为下一步的打开做准备。

然后福袋的绳子也会跟着福袋运动,这里用到了“跟随与重叠动作”“附属运动”,因为绳子材质比较软,所以抖动频率和幅度设计的时候都会相应的增加一些。

第二步动画当福袋打开时有一个“挤压和拉伸”的效果,一个是为了表现福袋的材质,再一个是为了体现福袋突然打开的速度感。

最后一步就是喷完粒子后的消失动画,这里加了一个位置移动的‘预期动作。然后在配合速率较快的缓动曲线最后完成  消失。

可以看一下运用动画原则之前和之后的对比,这个没有用动画原则的案例会有明显的顿挫感,整体动画不够自然,就会显得动画呆呆的。嗯。那这个用了动画原则之后整体动画会显得比较流畅,中间也没有空档期。这里说一下,基本上每个动画都会用到前面说的时间偏差控制来调整节奏,所以就没有在案例里单独列出来。

 

02. 盲盒:盲盒游戏引导入口动画

 

先拆解动画,再分析需要运用到的动画原则。这里主要说下不同点,第二步中用到了“弧形运动”的原则。‘盲盒喷出的彩带和星星会有‘不同的’速度,速度快的元素运动的路径会比速度慢的更平滑一些。

 

03. 拼图:拼图游戏引导入口动画

 

由于拼图本身造型比较单一,材质也相对偏硬。所以不好在拼图本身上去做动画。然后这里处理的方式是利用光感带出一个缩放的效果来进行视觉上的引导。这里同样控制了时间的偏差。先通过光感带动拼图礼物放大提供一个拍下去的预期动作。然后拍下去的同时扫光到边缘处立刻释放粒子,达到视觉上的同步。

 

04. 段位勋章 降段动画

 

这个案例是段位勋章的降段动画,前几个例子中动画的元素材质都偏软。所以这个案例主要是想对比一下材质比较硬的表现样式。

 

最后就简单总结一下动效设计的方法。一共拆解为四步,首先确定好需求方的目标和预期。然后再进行具体的脚本步骤的拆分,然后再聚焦到每一步需要用的的动画原则。最后再开始动效设计。设计前对需求进行充分的思考,让动效在助理业务发展的同时也能够做到有理有据。

 

原文地址:站酷 

作者:HEBBEN轩 

 

转载请注明:学UI网》UI动效设计之设计原则

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

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


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

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

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


jquery ui 中 datepicker的汉化

前端达人

首先上 html代码


  1. <!--为防止一个页面出现多个id 我们改用class
  2. 为防止手工填写格式出错 我们设置属性为 readonly
  3. 只能选 ,不能填 ok
  4. -->
  5. <input type="text" class="datepicker" readonly="readonly"/>



然后是jquery ui 初始化部分代码


  1. //日期格式改变
  2. $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
  3. //星期格式汉化
  4. $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
  5. //月份格式汉化
  6. $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );



注:jquery ui 的设置有两种,一种是在初始化的时候就填入参数

另一种是在初始化之后,在设置参数。这里为了说明参数选项,我们选择的第二种方式来讲解。



效果图: 



官方说明地址: http://api.jqueryui.com/datepicker/#option-altFormat

下载地址:http://download.jqueryui.com/download


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

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



文章来源:csdn

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

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

datatable 拖动列宽 鼠标拖动列宽

前端达人


本篇博客所用到的技术也是从别的博客学习到的,但目前找不到那篇博客的链接了。

1.普通表格实现拖动列宽

var tabSize = tabSize || {}; tabSize.init = function (id) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 调用 // 鼠标拖动列宽 setTimeout(function () { // 1.html代码里就是一个普通的table元素 // 2.传入table元素的id tabSize.init('documentList'); }, 600); 
  • 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
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.datatable实现鼠标拖动列宽

  1. 项目中用到datatable插件的地方,都是需要上下滚动的;而datatable插件实现上下滚动,是生成了两个div各包含了一个table,一个表格里只包含thead并且固定住(类:dataTables_scrollHead),另一个实现table内容滚动(类:dataTables_scrollBody) 。
  2. 那么,若要实现鼠标拖动列宽的话,则需要:表头绑定鼠标事件→事件触发时两个表格的对应列的宽度都要改变
  3. 若这个datatable表格原本没有滚动条的话,在鼠标拖动列宽的时候,会出现滚动条,其中,datatable定义时,“scrollX”: true在这里插入图片描述
    在这里插入图片描述
var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); // 获取固定头部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 获取表格头部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠标拖动列宽 setTimeout(function () { // 参数:1.table元素的id, // 2.datatable插件生成的最外层div的id,F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 
  • 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
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

在这里插入图片描述
在这里插入图片描述

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

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


文章来源:csdn 作者:阿晏

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

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

jquery对复选框(checkbox)的操作汇总

前端达人

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

?
1
$( "input:checkbox:checked" ).val()

或者

?
1
$( "input:[type='checkbox']:checked" ).val();

或者

?
1
$( "input:[name='ck']:checked" ).val();

2、 获取多个checkbox选中项

?
1
2
3
4
5
$( 'input:checkbox' ).each( function () {
if  ($( this ).attr( 'checked' ) == true ) {
alert($( this ).val());
}
});

3、设置第一个checkbox 为选中值

?
1
$( 'input:checkbox:first' ).attr( "checked" , 'checked' );

或者

?
1
$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );

4、设置最后一个checkbox为选中值

?
1
$( 'input:radio:last' ).attr( 'checked' 'checked' );

或者

?
1
$( 'input:radio:last' ).attr( 'checked' 'true' );

5、根据索引值设置任意一个checkbox为选中值

?
1
$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');

索引值=0,1,2....
或者

?
1
$( 'input:radio' ).slice(1,2).attr( 'checked' 'true' );

6、选中多个checkbox同时选中第1个和第2个的checkbox

?
1
$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );

7、根据Value值设置checkbox为选中值

?
1
$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );

8、删除Value=1的checkbox

?
1
$( "input:checkbox[value='1']" ).remove();

9、删除第几个checkbox

?
1
$( "input:checkbox" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox:

?
1
$( "input:checkbox" ).eq(2).remove();

10、遍历checkbox

?
1
2
3
$( 'input:checkbox' ).each( function  (index, domEle) {
//写入代码
});

11、全部选中

?
1
2
3
$( 'input:checkbox' ).each( function () {
$( this ).attr( 'checked' true );
});

12、全部取消选择

?
1
2
3
$( 'input:checkbox' ).each( function  () {
$( this ).attr( 'checked' , false );
});

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性,通过id选择器选取:

 

?
1
< input  type = "checkbox"  name = "myBox"  id = "chkOne"  value = "1"  checked = "checked"  />

    JQuery:

?
1
$( "#chkOne" ).click( function (){});

   2.给CheckBox设置一个class属性,通过类选择器选取:

?
1
< input  type = "checkbox"  name = "myBox"  class = "chkTwo"  value = "1"  checked = "checked"  />

    JQuery:

?
1
2
$( ".chkTwo" ).click( function (){});

  3.通过标签选择器和属性选择器来选取:

?
1
2
< input  type = "checkbox"  name = "someBox"  value = "1"  checked = "checked"  />
< input  type = "checkbox"  name = "someBox"  value = "2"  />

   JQuery:

?
1
2
$( "input[name='someBox']" ).click( function (){});

二、对CheckBox的操作:
   以这段checkBox代码为例:

?
1
2
3
4
< input  type = "checkbox"  name = "box"  value = "0"  checked = "checked"  />
< input  type = "checkbox"  name = "box"  value = "1"  />
< input  type = "checkbox"  name = "box"  value = "2"  />
< input  type = "checkbox"  name = "box"  value = "3"  />

   1.遍历checkbox用each()方法:

?
1
$( "input[name='box']" ).each( function (){});

   2.设置checkbox被选中用attr();方法:

?
1
2
$( "input[name='box']" ).attr( "checked" , "checked" );

    在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值:

?
1
2
3
4
$( "input[name='box'][checked]" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

     或者:

?
1
2
3
4
$( "input[name='box']:checked" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

   $("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值:

?
1
2
3
4
5
$( "input[name='box']" ).each( function (){
    if  ($( this ).attr( 'checked' ) == false ) {
       alert($( this ).val());
     }
  });

   5.设置checkbox的value属性的值:

?
1
$( this ).attr( "value" ,值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法:

     1.  var array= new Array();

     2. 往数组添加数据:

        array.push($(this).val());

     3.数组以“,”分隔输出:

         alert(array.join(','));




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

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



文章来源:csdn

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

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

html iframe 子页面调用父页面的方法

前端达人

还是附上代码吧。不多说,方便日后查看


父页面代码:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>parents</title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. <script language="javascript" type="text/javascript">
  9. function sayhello() {
  10. alert('Hello World!');
  11. }
  12. var value = 'value';
  13. </script>
  14. <div id="default">div内容</div>
  15. <iframe src="child.html"></iframe>
  16. </body>
  17. </html>

子页面

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>child</title>
  5. <meta charset="UTF-8">
  6. <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(function() {
  9. //在iframe子页面中查找父页面元素
  10. alert($('#default', window.parent.document).html());
  11. //在iframe中调用父页面中定义的变量
  12. alert(parent.value);
  13. //在iframe中调用父页面中定义的方法
  14. parent.sayhello();
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <div>iframe子页面内容</div>
  20. </body>
  21. </html>

注意:

父页面的属性和方法必须在iframe标签之前

1

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

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


文章来源:csdn

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

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

日历

链接

个人资料

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

存档