如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
2019草莓音乐节的主题是“循环世界Circular World”。
摩登天空联合世界自然基金会(WWF)发起今年的音乐节主题“循环世界”，以环保为核心理念，携手海内外环保机构对草莓音乐节进行多方位环保实践，并聚合知乎、摩拜等多平台力量影响年轻人，让环保成为青年生活方式的一部分。
今年的主视觉海元素是被三个箭头环绕的草莓星球，表达了“循环世界”的主题。风格延续了去年的样式，色彩略有调整，并加入了太空元素。
今年的主视觉当然仍由摩登天空的当家工作室——MVM design label_工作室操刀。
这张是今年的主视觉海报。今年，MVM特地为各城市举办的2019草莓音乐节单独设计了专门的海报，一样的版式，不一样的内容，既统一又包含新意。
2019草莓音乐节武汉站
2019草莓音乐节成都站
2019草莓音乐节西安站
2019草莓音乐节上海站
2019草莓音乐节长沙站
在今年3月30日的“地球一小时”公益活动中，草莓音乐节把自己的参与定义为“草莓星球一小时”。
而武汉OYO酒店与摩登天空联合主办的活动中，一张以“音乐满房”为主题的插画也分外有趣——原来大家为了迎接音乐节，都关上门在房间里引吭高歌呀…
音乐节配套周边产品的销售，推广视觉设计也很有意思。
即使不是音乐迷，设计师对这样的设计也无法抗拒吧！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天分享一款运维相关的B端产品，主要阐述自身的设计思路及产品的优化过程。B端产品功能聚焦、讲究效能，对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角，以体验及效率为先，我们需要协调全局一致性，遵循产品链路，在视觉上减少对于用户的负担和干扰，避免打断用户的使用流程，确保流畅、优质的用户体验。
在产品优化上，我们在每个版本迭代后，会对用户进行访谈及收集意见反馈，建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处，这样的好处是可以让用户帮助你优化产品。
在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式，对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
全局组件和局部组件
* 1.先定义组件 Vue.component('组件名', { 组件模板对象 })
* 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
* 例如: 组件-->mtText 使用时--> <my-text></my-text>
* 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素
* 3.在视图层里调用 ,用双标签
* 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等
* 注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
全局组件案例
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局组件
Vue.component('myComponent',{
//1.组件的内容/模板
template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
data(){
return {
msg:'hello,组件'
}
},
methods:{
fn(){
console.log(this.msg);
}
}
})
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
})
</script>
</body>
局部组件案例
<body>
<div id="app">
<my-component></my-component>
<my-test></my-test>
</div>
<template id="box1">
<h1>haha</h1>
</template>
<template id="box2">
<div>
<ul>
<li v-for="item in arr">
{{ item }}
</li>
</ul>
</div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
}
},
"myTest":{
template:"#box2",
data(){
return {
arr:[1,2,3,4]
}
}
}
}
})
</script>
</body>
组件切换：法一
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: false
},
methods:{
},
})
</script>
</body>
组件切换：法二
<style>
.red{
color:red;
}
.v-enter{
opacity:0;
transform: translateX(150px);
}
.v-leave-to{
opacity:0;
transform: translateX(-150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
<a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
<!-- vue提供了一个标签 component标签(理解为一个占位符), 用来展示对应名称的组件 :is属性设置指定的组件名 -->
<transition>
<component :is="flag"></component>
</transition>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: "login"
},
methods:{
},
})
</script>
</body>
父组件向子组件传值
<body>
<div id="app">
<my-component :fromfather="father"></my-component>
</div>
<template id="box1">
<h1 @click="change">
{{ fromfather }}
子组件的数据
</h1>
</template>
<template id="grandSon">
<h1>孙子组件的数据</h1>
</template>
<!--1.子组件不能访问父组件的数据
2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
② 在子组件配置项里添加 props: ['传递过来的数据']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~这是父组件的数据'
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子组件配置项里添加 props: ['传递过来的数据']
//注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子组件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在手机淘宝中，大至链路的衔接，小至一个按钮的点击响应，动效是体验无处不在的润滑剂，为用户每一步的操作提供了合理的预期与过渡。而通过动效衔接不同界面或不同响应状态，无论对流畅直观地表达流程意图，还是精雕细琢让体验更丝滑的微动效，动效设计都是淘宝设计师日常工作中非常重要的一环。
动效是体验链路散点间的“领路人”
针对项目不同阶段、不同使用需要，针对性地选用的工具，辅以便于理解的交付方式，是设计和落地环节沟通提效的关键。
相比提及动效首先都会想到的巨无霸AE而言，Flinto、Principle、Kite、Adobe XD等许多专门为体验设计量身打造的轻量级工具，更聚焦在互联网产品设计的高频功能上，多数工具都能快速输出视频或GIF，以及在移动端上进行实际的交互体验。
为体验设计量身打造的轻量级工具
这些工具在原型和动效快速表达方面独特的敏捷、的优势，让它们逐渐成为迭代频繁的国内互联网行业许多设计团队的新宠。
上述工具的核心功能都比较接近，各有千秋，差异多在于时间与属性之间关联的展现形式上，这里不做过多展开，也不做任何孰优孰劣的判断。毕竟工具只是兵器，提起趁手的兵器快刀斩乱麻，才是设计功力的体现。
本文将结合手机淘宝的动效设计实际案例，介绍淘宝设计师们在项目过程中进行动效设计、并与开发沟通的经验。
淘宝这样的大型应用中，任意提及一个细分链路都颇具复杂度，每个场景或大或小的版本迭代背后，都是设计师从交互流程设计、具体界面的视觉设计，再到最终交付落地，经历层层评审和修改完善的过程。
产品设计的2大不同阶段
那么在不同阶段，选用怎样的工具更符合我们对“”的追求？下面将按阶段拆分问题，分别进行分析：
产品流程、交互行为的设计与串联，无论是作为可以实际体验的可交互原型，还是纯用作展示，实际上也是一种最基础的广义动效。
曾几何时，交互流程的设计输出物是用流程箭头清晰标注每个控件交互行为的交互稿。
但在淘宝内各子产品“小步快跑”的版本迭代极度频繁，每天提案、评审这类快速碰撞不断的情况下，即使经过了合理的流程拆解、耦合度不是非常高的交互稿，对设计师而言改动返工量依然巨大。
更何况无论业务方还是设计内部评审时，其实没有人有时间仔细阅读你精心撰写的交互说明。
只适合在交付开发阶段采用的静态交互文档
（鞋类测码功能为例）
因此，这类交互稿如今最大的用途只在交付开发的环节。在快速碰撞方案的阶段，通过轻量级的动效工具迅速产出可交互原型是目前团队内更同行的做法。在评审中直接演示，可以帮助团队成员更好地对方案实际效果有一个更直观的体验。
在流程设计阶段，Flinto是一个非常好用的工具。同为体验设计专属的轻量级设计软件，Flinto和Principle有很多共通之处，也经常被一起比较，但底层思路都是通过定义元素的各项属性变化来实现过渡。不过，两者在定义方式上却有比较大的不同，简单概括来说，Flinto是通过元素的附加事件，而Principle则是通过不同画板间的属性差。
Flinto更擅长流程级表达
这点上的不同，决定了Flinto优势在于流程级表达，而Principle更擅长界面级（或很短的流程级）交互细节表达。
以分享宝贝、邀请好友出主意的“帮我选”功能中的新建清单流程为例：
「帮我选」新建清单流程Demo
流程对应的Flinto实现方式如下：
「帮我选」新建清单流程对应的Flinto工程文件
产出流程Demo时，只需要表达基本的页面结构与跳转关系即可。转场无需表达得很准确，以不引起误解为原则即可，时间有限的情况下，最简单的处理方式就是统一用渐隐渐现。
各种与页面滚动位置有关的动效也暂时不用表达，例如下滑时顶栏的状态过渡。同样，也完全没有必要让每个元素都可点击，这些交互细节以及分支用例，都更建议在交付开发阶段通过交互说明表达，寥寥数语可能就足够准确传达了。
与页面滚动位置联动的动效，可以在界面级设计中细化
当产品流程确定后，进入界面级设计阶段，就轮到对局部微动效逐一进行细化。
对不涉及位置联动的交互动效而言，在Flinto和Principle中的制作成本相差无几。例如纯粹由点击触发的事件：
不涉及位置联动的动效
但对于涉及位置联动的动效，Principle就比Flinto的表现优秀很多了。
Principle更擅长界面级动效表达
Principle中，时间轴和位置联动的设置比Flinto自由度更高，可以快速进行精细的设计和调整。例如在页面上滑过程中，导航栏跟随手指上滑动作而上移隐藏的动效：
导航栏随手指上滑动作而上移隐藏
下面是一些来自淘宝近年已上线项目有趣的动效示例：
案例一：手机淘宝导购产品“有好货”的商品列表中，会穿插视频及知识内容，在这些特殊内容滑动到用户视线中时会动态扩展，将内容自身特点完全呈现。注意，这些动效只能应用在特殊内容数量少、质量高的场景，否则会过于干扰。
视频形态扩展动效
知识形态扩展动效
案例二：用户在手淘中关注某个频道后，手淘首页会提供进入该频道的快捷入口，这个逻辑通过文案很难清晰的表达，因而采用了直观的动效呈现。
关注频道后的提示
上文分别介绍了流程级和界面级动效的设计建议，那么在实际项目设计中，我们需要有什么样的产出呢？
依据设计稿所起的作用，大致分为3种：
3个阶段的不同产出物
1、用于实操的demo：根据自己所希望表达的侧重点（流程还是细节？）选用一种工具完成全部设计；
2、用于演示的视频：可以同时使用两种工具完成不同部分的设计，分别录制视频再合并；
3、用于开发的方案：对需要动态呈现的部分单独提供动效设计稿及说明等产出物，然后再将所有设计以Keynote等载体整合起来。
手淘在动效设计过程中，也摸索出了一套便于与开发同学沟通、最优最快实现设计效果的设计产出方法。产出物包括2部分：
1、效果演示demo和视频：使开发同学快速了解设计效果；以宝贝详情主图的扩容与评价联动气泡为例：
效果演示和视频
2、动效参数文档：将自己在设计动效时所设置的全部参数，翻译为开发可以轻松读懂的图形表达方式。对于比较复杂的动效，虽在撰写文档时会多花一些功夫，但能够让开发一次性还原出理想的设计效果，免去后期反复沟通修改的麻烦。
下面以手机淘宝首页的2018年双11主会场入口为例，说明动效设计的输出方式。
我们选用Principle制作了所有动效，整体效果如下：
手机淘宝首页的2018年双11主会场入口
可以看出，动效包含以下几个部分：
1、主会场入口背景图旋转
2、主会场商品图及按钮出现
3、“立即抢购”按钮文案切换
我们要分别输出以上3部分的视频示意以及具体的动效参数。以其中相对复杂的第2部分“主会场商品图的出现和切换”为例，提供给开发的视频如下。注意在这个案例中，因为开发是针对图形元素的容器来编写动效，所以我们需要将图形抽象为容器。
经抽象为图形元素容器的交付版本
同时需要提供给开发的是动效参数。下图是我们使用的参数图形化表达方式，纵向为各个元素，横向为动效时间轴。
动效参数产出物
实际上，各位同学也可以根据自己的实际情况来绘制，原则是清晰明确即可。
从合理的工具选型，到严谨清晰的文档交付，技法层面的干货就写到这里。文章的最后，笔者想谈的是互联网产品中动效初心。
动效并非炫技的手段，而是实实在在用于衔接用户在各个体验散点之间的润滑剂，符合用户心理预期、不打扰用户，甚至让用户几乎无所察觉的动效，才是真正优秀的动效。
许多创意网站上初见确实惊艳的动效，如果在用户实际使用中过度使用，轻则有拖沓之感，重则引起焦躁。这一原则对于旨在让用户“买买买”更的淘宝而言，尤为重要。
动效技法只是基本功，在“不打扰”中体现同理心和精巧的构思，是动效设计更重要的导向。重剑无锋，大巧不工，与所有Motion designers共勉。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
互联网让全世界都无线互联，大家可以无视距离随时浏览世界另外一头的设计师所上传的设计作品。无论是 Dribbble、Behance、Pinterest 还是国内的各大社交媒体，想浏览别人作品获取灵感，几乎是0成本的事情。那么这样做对于做设计、激发灵感进行创造，真的有好处吗？它所引发的抄袭的问题，其实是最现实可见的，对此，昨天所发布的文章《如何界定借鉴和抄袭？看这7位设计大咖怎么说！》里，7位来自世界各地的设计师，已经对此发表了看法，而今天的文章里，99U 邀请了三位顶尖的创意人，阐述他们如何看待这种设计师中的「时代病」。不断上网浏览别人的作品这种「灵感时代病」对于做设计激发创意而言，到底有哪些利弊？在的设计辩论中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 对无休止的灵感素材的视觉进行了权衡分析。
过于关注在线设计灵感类素材，会让设计思路趋于千篇一律，扼杀创意。这就是为什么我们必须明智地管理我们的个人信息流。——插画师 Nadine Kolodziey
我们每时每刻都在上网，这意味着我们将会不断地接触到各种各样的视觉刺激。
如果你总是在公交车上或休息时关注别人的设计作品，那么你就会不自觉地把它融入到自己的作品中。很快你就会意识到：「糟了，我刚刚做了一些看起来和其他人完全一样的东西。」你会发现，你在不断地复制和重复别人的东西，尽管可能一开始是下意识的，但最终你会成为潮流的一部分。你忽略了你个人独特的视角，别人的作品开始影响你的判断和直觉。
而属于你自己的那部分最独特的东西，才是最有力道的。
我完全理解为什么人们想成为潮流的一部分。客户可能想要一些入时的东西——在特定的圈子里以特定的方式行事，这样做是有所帮助的。但最终这种做法所带来的同质化，对双方的发展都会有所制约。插画师在他们的作品中没有个性，所有的客户都在购买类似的风格——这意味着他们的品牌缺乏独特性。
如果你想获得灵感，看其他的创意作品并不是最好的选择。
看看其他的设计作品固然重要，这可以让你紧跟行业发展步伐，但是要适度。如果你想获得灵感，看其他的创意作品并不是最好的选择。当我在网上关注其他插画家的作品时，我个人很难受到启发。我已经使用 Instagram 两年半了。起初我总是看其他插画家的作品，这是我的本职工作，我热爱插画。但后来我发现，这阻碍了我的创作潜力。
我开始注意到我的配色方案与其他人的相似。我注意到，看其他的作品降低了自己尝试新事物所需的勇气。当我看到另一位插画家的作品时，我不可能洞悉他的创作潜力。当我在模仿他人的时候，我不可能有属于自己的独特创造力。
但是这个问题并非是无解的。解决之道就在于有选择地关注。看同事的作品和看一般的图片是有区别的。我对线上的灵感素材很感兴趣，但是我更多地将这些素材视作为一个个「小贴士」，因此我注重于管理我的社交媒体所关注的账号。我不再关注 Instagram 上的其他插画家，而是关注那些在审美上吸引人的内容。例如，我将关注那些收集不同寻常的石头的人，或者为摆放得精美的和风食物拍照的人。
我特别喜欢「I’m Google」这个账号，它不是按主题而是按视觉来排列图片。当我看到这样的图片时，尤其是当我开始着手准备新项目的时候，它们会立即在我的脑海中激发出新的概念和全新的思路。这些资源成为我的灵感来源：当我滚动鼠标时，我将看到来自外太空的岩石图像，它的形状将启发我如何安排构图。
线上灵感素材固然可以鼓励国际交流和对话，但问题出现在这些图像在传播的时候脱离了相关语境。——Thomas Kronbichler Mut工作室的创始人 创意总监
在 Mut 工作室，我们是当之无愧的互联网拥簇，我们从不害怕灵感素材过载这种问题。我们是阿尔卑斯山脉中部一个叫做海蒂·兰德小镇上的一个小工作室，互联网不仅为我们提供了来自世界各地令人叹服的灵感，而且提供了一个展示自己作品的平台，这在10年前是不可想象的。
正是因为图片可以在网上广泛地传播，我们才能让欧洲和美国的用户看到我们的作品。由于有了在线订阅和社交媒体，平面设计社区现才有了如今繁荣的模样。当然，这也有负面影响，很多人说如今平面设计在审美上变得太相似了。但积极的一面是，现在有更多的平面设计作品涌现出来。任何地方的人都可以进入这个行业而不再受到地域的限制，平面设计行业变得更具包容性。例如，欧洲各地的小镇上都会有人在尝试更疯狂的创作，我们能透过网络在不同的地方跟进观察，支持彼此。丰富的网络灵感图片的流通，最终有利于平面设计作为一种艺术形式而广泛存在。
我并不是受到某张特定的图片启发，而是在听设计师讲述设计思路的过程中获益良多。
问题是对此互联网并没有过多关注。一些博客和自媒体上并没有关于图片来源的解释。为朋友设计的项目和为大公司做的项目都在同一个空间中流通，这很有趣，但同时也弱化了应有的差异化和环境。
作品背后的故事，以及设计过程中各种问题的解决过程，才是真正重要的内容。我并不会受到某张特定图片的启发，而是在听设计师讲述设计思路的过程中获益良多。了解设计师的独特理念，则更有可能启发我，我对设计师处理客户关系的部分也很感兴趣。当然，这一切是不能用一张简单的图像来进行概括的。
我已经不再浏览 Tumblr 和 Pinterest，因为我最感兴趣的点，是了解一个问题是如何解决的。最终，我在设计师会议上发言的视频实录中获得了最多的灵感。听设计师们讲述作品诞生的过程是最令人振奋的。我从一个人如何构建一个项目，以及如何实现它的过程中学到了很多。我喜欢听他们谈论客户关系，讲述他们遇到的困难以及如何克服它们。确切地说，更能鼓舞人心的是设计态度和思维方式。
在阿尔卑斯山的工作室中足不出户，我就可以看 Michael 所有的视频。
例如，就在上周，我狂看了所有 Michael Bierut 在线演讲的视频。我喜欢他展示作品的方式，喜欢他大方地和别人分享成果，我钦佩的是他的工作态度。在阿尔卑斯山的工作室中足不出户，我就可以看遍迈克尔所有的演讲视频，这简直太棒了。
对正在发生的事情有所知觉是非常重要的，而上网获取灵感会简化这个过程。——Polina Joffe，艺术总监和平面设计师
如果你知道别人在做什么，你可以选择参与其中，也可以选择拒绝。而形成自己的观点并做出明智决策的前提是你足够了解。
我一直在关注其他人在网上会做什么，我也会在博客和社交媒体上上传一些实用的干货。当涉及到具体的项目时，我会做具体的项目研究。我们会从互联网上获得大量的灵感，这使得研究阶段变得非常简单和。我经常会想起设计师们以前在社交媒体上使用过的概念和想法，然后我会把这些想法和我自己的想法进行重新转化，组合并且更新，这样它们就可以运用在我的设计大纲中了。
浏览在线灵感素材，然后它们会形成属于我自己的一个巨大的视觉词典，里面有我脑海中所有的概念和方法，每当我开始一项新的任务时，我都可以沉浸其中。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。
我最近为泰特伦敦美术馆的教育团队做了一个项目。这个项目是针对年轻人的。首先，如果你的目标受众是年轻人，了解年轻人都在做什么是很重要的事情了，因为这些信息很有参考价值。你需要运用观众能够理解的视觉语言。在项目的研究阶段，我看了其他设计师是如何处理和学习这些属于年轻人的理念的。最初我想用笔记本和活页夹做点什么。然后我想起了我在网上看到的那些用活页夹或记事本纸做的项目，然后我回去重新又看了一遍，看了其他人如何处理类似的主题，由此激发了我的新想法。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。我认为创造力通常是学习前人如何混搭各种想法，然后自己进行特定的调整组合，二次创造。
诚然，视觉交流的发展是一部复制、更新、转移的历史。但重复别人已经做了太多遍的东西，并使用类似的元素来直接窃取它们是有危险的。当你在做研究获取灵感时，你必须通过多种方式参考海量的资源。如果我们能妥善地使用现有的大量图像，就能鼓励创新，跟上时代发展的步伐。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一般知道，js脚步语言的执行环境是单线程的，就是它会等一个任务完成，才会进行第二个任务，然后一直向下进行，这样的执行环境简单，但是处理不了复杂的运用，当一个请求需要非常旧的时间的时候，下一个流程就会被搁浅，如果长时间得不到反馈，进程就这样的奔溃了。
为了解决这个硬性需求，Javascript语言提出了二种语言模式： 同步（Synchronous）和 异步 （Asynchronous）。
回调函数
订阅和发布模式
Promise
generator
async/await
通过把一个函数(callback)作为参数传入另一个函数，当满足一定条件的时候，就执行callback函数。
用法：
通过回调函数的方式处理异步，是在异步早期的情况，其中jquery中的很多都是通过callback来实现回调的。但是这种模式代码编写比较耦合，不利于代码维护。
发布订阅模式
pub/sub模式是js设计模式中的一种，本身是借鉴于java的模式，但是在处理异步处理的时候非常有作用。通过一个信息中心EventCenter 来处理的监听(on)和触发(triggle)。
通过pub/sub模式，我们可以在信息中心清楚的看到有多少信号来源，方便的集中管理，更加方便于模块化的管理，但是如果整个项目都使用pub/sub模式的话，流程就变得不太清晰了，数据的得到和数据的处理分开，对于后期的维护也是一个很大的问题。
Promise构造函数成为承诺，它分为三种状态resolve, reject, pending ,一旦状态从pending改为其它2个状态之后，就不能修改了，就一个承诺一样。
Promise接收2个参数resolve , reject，分别表示成功后执行和失败后执行，可以通过实例的then()方法传递对于的函数。
这里看了之后，你可能会说，这个和异步处理有什么联系吗？你思考一下，当一个异步操作后，我们可以不去管它什么时候结束，什么时候出错，就像一个人承诺了，我只需要按照他的承诺去当这个事情已经被处理好了，是不是方便很多，下面直接上手一个例子。
我完全不用担心它里面怎么实现了，反正它已经承诺了会给我结果，我只需要通过then()方法去接受，我需要得到的值就可以了。
单个值
一个promsie实例
一个thenable对象
Promise.resolve(value).then((value) => {})
如果一个请求的结果是下一个请求的参数，如果我们使用原始的请求方法，就是出现一个像右的箭头的回调地狱。
一层层嵌套，非常的恐怖，不利于维护。那么通过prmise怎么处理回调地狱呢？
上面处理回调地狱是不是看着方便很多，代码也简单命令，依赖性也很强，后面我们会继续通过async/await继续简化。
Promise.all(arr) 接受一个promise实例的数组，可以并发多个请求给服务器，但是并不能保证接受到的先后顺序，这个取决于服务器的处理速度。
处理多个请求并发，并且需要保证返回数据的顺序（运用场景比较少）
上面一个方法并不会保证请求返回的结果，按照你发送的顺序返回，如果我想把完整的响应的结果按照我
希望的顺序返回给我，那应该怎么办呢？
这样，会等待每一个请求完成后，并把得到的数据push到totalData中，就可以按照顺序得到我们想要的值了。当然使用async/await会更加的方便。之后我们会讲解。
generator是一个构造器，generator函数执行并不会执行函数体内部部分，而是返回一个构造器对象，通过构造器对象的next()方法调用函数主体，并且每当遇到yield都会暂停执行，并返回一个对象。
注意yield本身是不会反悔内容的，只是给构造器对象返回了内容，如果想yield表达式也返回内容，可以通过给下一个next()传递参数。
通过next()传递参数，我们可以做到值向内部传递，对于后面的异步处理很有帮助。
generator异步运用
利用构造器的暂停和继续的功能，我们可以很好的处理异步请求，得到数据后再进行其他内容。主要是运用yield表达式返回一个promise对象的原理。
这样我们就得到了接口请求的数据，相比于之前的promise函数的书写是不是要简单很多。和同步是一样的操作。
如果我们想内部对得到的数据进行进一步的处理呢？
简单的co模块处理generator多个函数请求
从上面我的调用方法就可以看出，利用Promise + generator的异步处理不断地通过then()方法处理数据。有没有一个方式是我可以直接运行一个函数，然后就可以得到我想要的值。 例如：
网上已经封装了很多的方法，例如常见的run库，co函数就是来处理这样的处理方式。但是当我们发送多个请求的时候，可能你会这样写：
这样写是会发送请求，但是并不是并发多个请求，而是等第一个请求p1之后，再进行第二个请求p2，在性能优化方面是不利的，也不符合我们的要求，怎么做到2个请求是独立的，并且我们还可以通过得到2个请求的结果后，进行其他请求。或许我们可以这样：
这样写是不是和我们之前写的Promise.all()很像？所以还可以改成这样的：
async/await异步处理
ES7出现了async/await进行异步的处理，使得异步操作就像同步代码一样简单，方便了使用，由于async/await内部封装了generator的 处理，所有就很少有人用generator来处理异步了，但是在异步的推动中generator起到了很大的作用。
await： 后面接受一个promise实例
**async: 返回一个promise对象 **
一个简单的异步请求
上面的例子是不是和generator中的异步请求很像？可以像同步一样的编写代码，但是相比generator，await后面加上promise后直接返回相应的数据，不像yield还需要从外部传入。
处理多个请求并发的情况（不需要管服务器的返回顺序）
用async/await处理多个请求并发，由于await后面需要添加Promise实例，是不是脑袋里面一下子就想到了一个Promise.all()
你可能会很好奇，为什么不需要像generator那样通过额外的函数来调用，因为async已经帮你想好了，内部已经调用了，是不是很爽？
处理多个请求并发，并且需要保证返回数据的顺序（运用场景比较少）
如果数据中没有相互的联系，但是又想一个个发送，可以这样
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
好的UI设计师应该是理论结合实践，好的理论是指导实践，所以今天我带来了这一篇文章。讲讲什么是黄金ux七大定律以及它们如何在UI中的运用。
费兹定律（fitts’law) 是心理学家 paul fitts 所提出的人机界面设计法则，主页定义了游标移动到目标之间的距离，目标的大小和所花费的时间之间的关系。
定律内容是从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小
用数学公式表示为 时间T=a+blog2(D/W+1)
用这张图来说明，当d(起始点到目标之间的距离）越长，使用者所花费的时间越多；而当w（目标物平行于运动轨迹的长度）越长，则花费的时间越少，使用的效能也比较好。
我们来看新浪微博的转发功能，因为随着功能的复杂性，转发功能包含了下一层级三个子功能，分别为快转，转发，分享。这个转发icon一触发，在很近的距离，3个点击目标也设计的很大这样容易很快的操作，利用费兹定律，提升了用户的效能。
当你走近一家餐厅，你看着琳琅满目的菜品是不是无从下手。在生活日常中你会对各种各样的选择而困扰，其实有时候不是你的问题，而是对方给予你的选择太多。
Hick’s Law (席克定律)中说道：“一个人面临的选择（n）越多，所花费做出决定的时间（T)就越长。
用数学公式表达为 RT=a+b log2(N)
划重点
当选择增加时，我们做决定的时间就会相应增加
如果在你的服务，产品中“时间就是关键”，应该将做决定的选项减少到最少，以减少所需反应的时间，降低犯错的概率。也可以对选项进行同类分类和多层次分布，提高用户的使用效果。
奥卡姆剃刀原则也被称为：“简单有效原理“，由14世纪哲学家，圣方济修士奥卡姆.威廉（William ofOccam)提出。这个原理告诫人们“不要浪费较多东西去做用较少东西也可以做好的事情。”笔者认为和后来包豪斯密斯.凡德罗提出的：“少就是多”有异曲同工之妙。
一个简洁的网站能让用户快速找到他们所找到的东西，当你在销售产品时候尤为关键。如果你的网站充斥着很多无关紧要的东西。比如小弹窗，无用链接。用户会因为不能快速找到自己想要的东西而关闭网站。
合理的使用奥卡姆剃刀原则，能更好的传达你想要表达的内容，更容易吸引广告投放者，给访客带来更好的用户体验。
泰思勒定律又被称为：“复杂不灭定律”
中心思想是：“每一个程序都有必然有其与生俱来，无法缩减的复杂度，唯一的问题，就是谁来处理它。”
泰思勒定律定律认为每个过程都有其固有的复杂性，存在一个临界点，超过这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
从手机的演变过程来看，智能手机简化了物理操作按键，通过技术手段降低了手机操作的复杂度，尤其是复杂的交互手势操作，杂度的降低是通过大量的技术和资金投入解决，体现了复杂守恒定律。
1956年乔治米勒对短时间记忆能力进行了定量研究，他发现人类大脑最好的状态能记忆含有7（±2）项信息块，在记忆里5-9项信息后人的大脑后开始出错。
防错原则是通过设计来将过失降低到最小化。该原则及时地告诉用户哪里操作错了。比如在填写表单时，系统给出及时地报错提示；重要、谨慎的操作，系统通常会有二次确认；为用户提供撤销的机会；为用户提供纠错的机会
接近法则是格式塔理论中我们最熟悉的，也最常运用的一项法则。当对象离的太近时候，意识会觉得它们是相关的
我们来看看利用接近法则在移动端的案例，相同的模块这两款app都用空间间隙来做出了区分，让人在移动的场景更能快速的寻找想要的信息。
在UI设计中，不仅仅是为了美观的界面，更要有有理有据，在设计时应该学会运用这些法则，不仅可以让你的界面更专业，同时也更有说服力。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
质感是什么？如何让画面拥有更高端的质感？本文由质感的原理出发，深入分析质感表现所需要的要素，并通过实例来讲解如何在作品中表现高端质感。很多同学在设计完成后，总是会发现页面很单薄，导致整体看起来很粗糙、不耐看。究其原因，大多数是因为页面缺乏质感。
质感，对于设计作品来说，是一个非常重要的视觉元素。它能够提升作品的层次，让整个作品更高端、更有品质。
质感，基本释义为所表现的物体呈现出的物质真实感和细腻的品质感。这是一种视觉的综合感受，会触动你的某种本能的综合感官，让你感觉非常舒服、非常爽。
我找了几张比较富有质感的图片，大家可以感受一下这种感觉。
观察完这些图片后，你发现有什么共同点了吗？我们可以试着来分析一下。
首先，物体本身的型是好看舒服的，并且细节足够精致。
其次，在光的影响下，物体的表面呈现出细腻的光泽变化，以及通透而舒服的阴影，展现了丰富的层级关系。正是光的作用，让这些视觉元素得以表达，让我们没有触摸便能感知到这种质感。
我们再来看一些优秀的拟物作品。大家对照一下，是否都遵循相同的要素。
观察这些优秀的拟物作品，为什么会觉得有质感呢？首先图标很精致，它的形具有一定的美感。但是这不足以让它富有质感，关键是它也符合了上面所说的几个质感要素。
最后，我们可以总结一下，质感产生的要素：
所以除了作品本身足够精美以外，整个作品的光感需要和谐统一。每个元素表现的色彩变化规律（渐变色）、投影大小和投影间的相互影响，都需要与光感严谨的统一。
这就要求你在绘制所有元素时，需要去假定一个统一的光源，这样才能让物体拥有更真实的质感。
我们已经了解了质感产生的原理，下面就开始实际案例。每一个步骤我都会讲解思考的过程和原因，方便大家理解。
1. 整体背景和主体框架绘制
建立画布（1200 x 900）。用矩形工具绘制背景和主体框架（1100 x 700），图层样式为渐变叠加，光线方向统一。
渐变是为了模拟背景的质感和在光线下的变化，两层光线方向需要统一。背景颜色稍浅且饱和度低，符合远近的视觉规律。
2. 绘制投影和主体背景
复制矩形作为投影层，颜色调整为黑色，转为智能对象后，加入高斯模糊效果。调整矩形图层的模糊度和透明度，移到适当位置。具体参数对照图中。投影的位置根据假定光源位置而定，使其符合视觉原理（详见光线分析图）。
绘制主体深色背景（1070 x 670），添加渐变叠加模式，渐变方向与前面保持一致。渐变的颜色对于质感非常重要，恰当且高级的渐变色，能够在本质上提升画面质感。而渐变方向则需要根据假定光源进行判定。
为什么要这么绘制渐变与投影的位置呢？我绘制了一张光线分析图，大家可以从图中看出假定光源的位置，以此来确定渐变的方向以及投影的位置。
只有整体光感的统一，整个画面才能表现出强烈的质感。大家在绘制这一步时，需要用心体会假定光感的这个过程。
3. 将人物融入背景，提升发丝层次和质感
放入人物图片，图层模式改为正片叠底。调整图层透明度，添加蒙版使人物下半部分渐隐，与背景融合。
复制人物层，取消图层模式和透明度。用选择颜色命令提取发丝高光，添加蒙版抹去不需要的高光，图层模式改为变亮模式，调整透明度使其融合进人物。
为什么要做这一步呢？单纯的人物在画面中显得太平了，所以需要丰富细节、增加层次。
4. 主体字体和投影绘制
输入主体文字，图层模式调整为渐变叠加，根据光源调整颜色渐变。案例中的英文字体为「Monotype Corsiva Regular」。这一步需要反复的尝试，大家可以换一些字体尝试一下。
复制一层作为投影，文本颜色改为黑色，图层样式设置为正片叠底，转智能对象后模糊对象，调整图层的透明度和大小，放在字体后面。字体的立体感依靠的仍然是统一的光源，需要想象字体在假定光源下的阴影关系。
投影能够模拟真实感，需要若有若无的感觉，让文字悬浮在图层上面，丰富画面层次。
5. 主体文字细节刻画
根据字体的结构，用形状工具绘制出字体的立体关系。每一个形状图层绘制后需要两层蒙版，一层为了限制字体范围，一层为渐变蒙版。让充满立体感的文字悬浮于画面中央，提升视觉中心的细节品质。
6. 穿插细文与投影绘制
输入细文，并复制一层作为阴影。不过因为字体较小，距离拉远后投影肯定是看不清细节的，所以已经模糊的若有若无，但还是需要有的。
表现文字穿插关系，让「is an」悬浮于「L」上，并留下近距离投影。让「attitude」穿过「e」字，遮挡部分文字。丰富的穿插和相互投影，进一步增加主体文字的细节和层次，让画面细节丰富且更加耐看。
7. 绘制辅助图形，增强画面流动感
为了丰富画面细节，增强画面流动感，可以适当加一些飘零的辅助元素。
绘制时需要注意的是，你需要明确整体视觉中心与运动的方向。辅助图形沿着整体画面，水平中心向右运动，你可以想象图形散开后的画面，并反复调整元素的合理位置。
如果没有一定的规律，所有图形就不像一个整体，就会看起来很乱。大家可以根据这点来判断辅助元素是否需要进一步调整。
8. 收尾工作，大功告成
最后，根据页面需要，搭配上合适的元素，让画面更完整。
需要注意的一个细节是，由于所处的位置不同，这些元素在光照中呈现的颜色也会出现深浅变化，所以左边的元素较浅，而右边的元素会深一些。
怎么样，是不是看起来并不难？
希望大家可以抽空认真地跟着教程去尝试一遍。只要你能够理解每个步骤的目的，耐心地绘制每一个细节，相信你也能够做出这种非常高端的质感。
如果你能在制作时，用心思考和体会整个过程。就能在以后的作品中举一反三，让这个技能成为你自己的技能了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
首先就是要把视频加载出来，然后使用canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图，需要不同时间的video视频图，设置video的currentTime（单位秒），然后videoElement这个对象信息会实时更新。
如果是视频是在阿里云OSS上就更方便了，poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”
如果是要获取上传本地视频预览图，可采用下面的方法，但有兼容性问题，目前测试移动端安卓机只有Chrome浏览器支持，微信和QQ浏览器都无法响应本地视频的canplay事件。
<div contenteditable="true" id="in-box" style="width:1000px;margin: 20px auto;"></div>
<div style="width:1000px;margin: 20px auto;">
<input type="file" name="" accept="video/*" id="upload-ipt">
<div class="review" id="out-box"></div>
</div>
function getVideoImage() {
var obj_file = document.getElementById("upload-ipt");
var file = obj_file.files[0];
var blob = new Blob([file]), // 文件转化成二进制文件
url = URL.createObjectURL(blob); //转化成url
if (file && /video/g.test(file.type)) {
var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
//后面加一个空格div是为了解决在富文本中按Backspace时删除无反应的问题
$('#in-box').html($video);
var videoElement = $("video")[0];
videoElement.addEventListener("canplay", function (_event) {
var canvas = document.createElement("canvas");
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
console.log(videoElement.videoWidth)
canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
$("#out-box").html(img);
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
console.log("loadedmetadata")
});
}else{
alert("请上传一个视频文件！");
obj_file.value = ""
}
};
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
