如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
全局组件和局部组件
* 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
筛选是资源聚合类APP中不可缺少的功能，可帮用户快速、精准地找到需要内容信息，根据资源分类形式的不同有多种筛选类型，并且不同的筛选类型还可以进行自由组合，让复杂的内容信息更容易被筛选出来。
1. 横向tab式筛选
2. 标签筛选
3. 下拉筛选
4. 底部筛选
5. 抽屉式筛选
这是最常见的筛选样式，属于一级筛选。通常出现在导航栏或者是导航栏目的下方，根据分类层级的多少有4种展现形式。
一个层级
分类2~5个：所有类目都可以直接在tab栏目上展示出来，用户可快速地在各个分类之间进行切换；
分类大于5个：所有类目以相同的间距进行横向排布，引入横滑操作，方便用户浏览被隐藏的分类信息；有些产品也会在栏目右侧增加下拉操作，点击后下拉展示所有的分类，用户可对所有分类进行直观的浏览；
两个层级分类
Tab 栏目上只展示推荐分类或者用户自己选择的分类
当内容分类有两个层级且分类比较多的时候，产品会根据用户的喜好推荐几种分类在tab上进行展示；右侧有筛选操作，点击后在一个页面里展示所有的分类。用户可以在这个页面自主选择增减展示在tab上的分类，并且可以调整展示的顺序。
交互细节
用户在不同的类目间进行切换的时候，筛选内容在当前页面刷新展示；
不同的tab分类可以通过横滑进行切换；
位于内容信息的上方，对下方的列表内容进行控制；
当触发筛选条件时，筛选栏目直接定位到导航栏下方。
是一种辅助筛选样式，通常位于某一分类标题下方，或者跟tab筛选和下拉筛选搭配使用，有4种表现形式
① 内容分类标签，充当内容入口。产品设定的内容分类，分类层级较高，且内容之间无交集，当触发操作的时候，会跳转页面进行内容展示。
② 大分类下的子筛选条件，分类层级比较低，当用户触发操作时，内容在当前页面进行展示。
③ 筛选页面，多维度的筛选条件以列表的形式进行排布，标签是单一维度下的多种分类，可横滑操作，这种方式可以帮助用户快速进行多维度的内容筛选。筛选的结果直接展示在筛选条件下方，最常出现在视频类APP内做电影、电视筛选；马蜂窝游记中也使用了这种分类形式。
通常是在一个大的分类下做具体选择的时候使用，这种筛选样式可以承载1~3级分类层级。
单一层级
分类以列表的形式展示在页面中，当分类字段少且分类较多的时候也可以排2~3列进行展示。
两个层级
有三种排布方式
①直接以栏目标题加列表内容的形式排列。适用于两个层级分类都较少，或需要用户进行操作（比较输入框、滑块）的场景使用。
②左侧为一级分类信息展示区，右侧为二级分类信息展示区，可以通过左侧的一级分类控制右侧的二级分类。适用于两个层级分类都比较多的情况使用。
③上面为tab式的一级分类，下面是二级分类内容的展示。适用于一级分类较少，二级分类较多的场景使用。
三个层级
一级分类为tab形式展示在最上面，二三级为左右排布形式。
交互细节
放在内容信息的上面，对下方内容进行控制；
当触发筛选条件时，筛选栏目直接定位在导航栏下方；
有2~3种信息层级的筛选，结果通常取得是不同信息之间的交集，所以需要在筛选中向用户展示筛选结果数量，帮助用户判断是否调整筛选条件 ；如图左
我们也可以选择在筛选结果页展示筛选标签，用户可以在当前页面删除部分标签，以查看更多的内容信息；如下图
备注：下拉筛选通常是多维度组合在一个栏目上展示，通常应用在电商、外卖等内容分类层级比较多，且层级内的分类也比较多的场景里
某一具体内容需要通过多个筛选维度辅助筛选时使用，比如XX-XX的火车票展示列表、马蜂窝的地图酒店筛选。这种筛选通常能承载1~2级的筛选层级，每种层级下的分类目都不能过多，是一种比较简单轻便的筛选过程
单一筛选层级
① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容
两个筛选层级
① 直接以栏目标题加列表内容的形式排列。
② 左侧为一级分类信息展示区，右侧为二级分类信息展示区
交互细节
处于页面的底部导航栏的位置
当用户出发操作的时候，内容从下往上弹出展示。
电商平台应用较多的分类形式，通常是有两个分类层级，一、二级的分类类目都比较多，默认情况下，如果分类特别多时可以只展示第一层级信息，用展开收起辅助用户浏览二级类目信息。
交互细节
因为筛选的分类比较多，且通过展开收起会将已选择的内容遮挡上，所以我们需要以一种方式将已筛选的条件展示出来，方便用户及时调整。eg.马蜂窝将所有用户选择的内容都放置在最前面，而京东选择在栏目上方展示出来。
显示有多少个符合筛选条件的内容，帮助用户决策筛选条件是否合理。
本文主要讲述了5种内容筛选种类：tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选，选择何种筛选类型跟内容分类层级和分类数量相关，所以设计之前要先了解产品的分类及数量，有助于选择更适合用户使用的筛选样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
程峰，滴滴出行高级设计总监，具备互联网和广告行业工作双重经验，同时拥有用户体验思维跟创意思维的他，对互联网设计和创意设计都有着自己的独到见解。
如今互联网设计圈，方法论大行其道，很多设计师为了走捷径过分依赖方法论，但他一直保持着初心，不骄不躁，他认为：方法可以被总结创造，但设计功夫与思维是更可贵的东西，功夫+思维>方法论。
本次访谈，程峰分享了自己的观点，包括设计师如何融合创意和用户体验，在遭遇灵感枯竭的时候如何理性的找灵感等干货内容。不仅如此，他还偷偷告诉湖湖他在招聘设计人才时最看重的特质。
△ 程峰，滴滴出行高级设计总监
滴滴出行高级设计总监；曾就职于搜狐、百度、Ogilvyone、Cheil鹏泰等知名互联网公司及 Digital Agency；资深创意人、设计师，获奖众多，对创意、设计有深入的了解。
蓝湖：
介绍一下你自己，另外，可以跟大家详细讲讲您的工作成长经历吗？
程峰：
Hello，大家好，我是程峰。
我毕业后的第一份工作在是一家正版音乐公司担任 GUI设计师，当时正版音乐行业的市场土壤还没有形成，所以公司没能发展下去，一年后，公司成为了行业「先烈」，我也只能选择离开，那是我第一次接触 UI设计。
在05年的时候，产品用户体验设计在国内开始萌芽，我出于对这个行业的喜欢和好奇，加入搜狐从事体验设计的工作，07年的时候，加入百度做交互/UI，在这个阶段，体验设计思维方式深深扎根在我的脑海。
后来，因为当时国内的用户体验设计还不够成熟，同时出于对广告视觉表达有极大的兴趣，在互联网用户体验行业呆了几年之后，我投身广告行业，将本土、4A Digital、媒介型公司都体验了一把，我在这个阶段形成了创意思维思考方式。
体验设计思维跟创意思维，对我来说都有非常大的价值，可以让我更灵活面对不同的任务。这两种思维方式的区别在于：一个是解决产品体验问题；一个是解决沟通问题。我认为现在的设计师/创意者需要同时具备这两种思维。
几年之后，我又回到了互联网，来到了滴滴。
总体上我的经历跟大部分设计师朋友一样，其中不同的可能是我接触过的领域比较多，在音乐、游戏、搜索引擎、交通、广告等行业都有过职业经历，我个人也比较喜欢跨界。
蓝湖：
您同时拥有互联网公司（甲方）及广告公司（乙方）的工作背景，甲乙方最大的区别是什么？这种经历对您在工作中分析、解决问题会有什么帮助和优势？关于这种交叉背景带来的优势，您可否深入和我们分享一下？
程峰：
设计师在一般的互联网公司工作跟乙方公司工作相比还是有区别的。
在乙方，由于接触到的行业领域比较多，所以适合产出跨领域的通用方法论，思考方式更加横向，更重视规律，从而能够解决不同行业的共性化、模块化问题，但也有可能因信息不够及时对等，跟进不够持续，可能导致对问题的理解片面，无法深入。
而在互联网公司，设计是服务于单一企业产品和业务的，比较单一，但更专注，会对具体行业的具体问题理解更加深入，具备持续性，更重视对变化的即时响应，但同时也容易陷入视角局限，导致脱离规律，无法全局思考。
对我个人来说，甲乙方的双重经历使我更加灵活，看待问题具备了更多视角，更容易保持客观，可以快速切入找到符合规律的问题本质，同时还可以深入并持续性地解决。
蓝湖：
创意&设计是服务于品牌和产品的，您是否可以举一个实例来详细讲讲，好的创意&设计是如何服务于产品和品牌的？
程峰：
以滴滴为例，首先，滴滴CDX 很重视不同专业之间的打通与整合，聚沙成塔、汇点成线，这对于创意&设计产生好的效果尤为重要。
2017年，我们曾经在 CDX 内部构建了一个需求关联池，把产品、品牌、运营三块设计需求主动整合，并关联思考，跨专业团队协作，输出了司机端App 5.0升级+司机故事+司机教育等相关项目设计，提升了司机师傅们对平台的认同感，最终达成了1+1+1>3的效果。
设计师要具备敏锐的全局观和主动性，任何一个体系组织都不可能做到彻底扁平化，信息只要在流通，多少会出现一定程度的不对等和信息失真，各职能都不可能对所有信息细节彻底掌握到位，大多数时候需要主动接触，主动思考，以建立项目间的共性联系，而不是坐等被告知，不能过度理想主义。
△ 滴滴「司机故事」创意设计
△ 滴滴「司机故事」创意设计
△ 滴滴「司机端」5.0配色标准
△ 滴滴「司机端」5.0启动页面
△ 滴滴「司机端」5.0导航设计
△ 滴滴「司机端」测试环节
蓝湖：
创意和用户体验是设计师必须思考深入的两个点，要更好地融合创意和用户体验，设计师应该怎么做？举一个例子？
程峰：
这两种思维方式虽然一个偏产品，一个偏传播，但最终都会回归到一个点上，也就是以用户为中心，站在用户的角度思考，基于这个点衍生出来，站在产品层面叫做痛点，站在创意层面叫做洞察。
举个通俗的例子：一个人早上很难起床，需要借助外力才能被叫醒，这是痛点；一个人早上很难起床，但如果第二天早上有重要的事情要赶飞机，他按时起床的可能性就会变大，这是洞察。
再举个例子：小朋友容易把衣服弄脏，妈妈洗起来很累。用某品牌洗衣液，针对小朋友衣服常见污渍进行洗涤，省时省力，这是基于用户妈妈的痛点想出的产品解决方案。小朋友容易把衣服弄脏，但妈妈总是会在第一时间，像变魔术般把干净如初的衣服放在他的床边，这是基于妈妈勤劳，母爱的洞察表达。
痛点与洞察交融在一起，可以使设计师在思考的时候更周全，在进行产品体验设计思考的时候更具备情感引导性，在进行创意思考的时候不至于忽略功能性。
蓝湖：
设计类工作需要创造力的支撑，您是否可以跟我们分享一下，如何科学、系统地提高自己的创造力？
程峰：
不得不说，创造力很大程度上是天生的，可以理解为直觉。但洞察力是创造力的前提，是创造力被激发的基础，洞察力是可以被后天锻炼的。我个人并没有总结过科学系统的方法，但我相信一话：「观察和经验和谐地应用到生活上就是智慧。」
如果一定要说方法的话，就是把自我提升需求转换为习惯，养成针对性定期阅读并定期总结的习惯。这里的关键词是：定期、针对性。说得再直白点，就是多看多想并持续下去，任何事情的通用诀窍都是持之以恒。
提到这点，想多说几句，近几年看到了太多设计师过度重视方法，期望通过方法论找到解决问题的捷径，我认为这是浮躁的。对于创意&设计，我个人并不否定方法论的价值，但设计本质上还是功夫活，思维的跨越也是从量变到质变积累的过程。在这个阶段，我更想跟大家说的是：功夫+思维>方法论。
尤其是希望很多年轻设计师，多下点苦功，多思考，不要把希望都寄托在方法论上。方法可以被总结创造，但设计功夫与思维是更可贵的东西，是设计师真正的能力壁垒。
蓝湖：
在滴滴拥有众多产品，设计师持续提出服务于产品和品牌的好创意和设计似乎并不容易，在设计师们遇到瓶颈时，您会给他们什么建议？在灵感枯竭的情况下，您有什么快速找灵感的好方法吗？
程峰：
滴滴虽然产品众多，但好在都是在解决出行问题，所以很多产品之间是具备共性的。
作为设计师，不该局限于自己的产品，应该横向多看，找到不同产品之间的关联，多加以借鉴，找到可持续的复用性的解决方案，这是避免陷入到困境的好办法。
在灵感枯竭的瓶颈期，设计师应该明确一点：任何灵感都来源于对事物、信息的重新组合，当把不同的元素组合应用在不同场景中的时候，会有意想不到的收获。
脑洞是不能随意大开的，我认为，找灵感、开脑洞需要两个前提：第一是持续关注，日常积累，只有一定量的持续积累才能让大脑里的数据库足够大，才能确保可以在需要的时候，第一时间任意调取信息并进行重组。第二是逻辑性的结构化思考，可以确保将信息进行有条理、有效、有价值的组合。
蓝湖：
面试的时候，您会比较关注候选人的哪些特质？是否具备优秀的创造力，可以通过面试得出结论吗？您有什么能在短暂的面试时间内找到更适合的人选的秘诀吗？
程峰：
坦白讲，我认为在面试的有限时间空间环境下，很难做到全方位的考察，我个人也无法做到，这也是为什么会有多次面试的原因。
但是关于面试设计师，我还是有一些心得的。首先，设计师的专业能力是根本，除此之外，最重要的是心理成熟度的考察。就设计师的发展来看，很多时候遇到的问题都不是技术问题，大多是心理问题。创造力也同样重要，虽然个人是否具备创造力可以在沟通中发现一些，但最好的办法还是设置笔试题来考察。
除此之外，恒心、雄心、好奇心，分别体现了一个人达成目标的能力，自我提升的可能性，以及对专业探索的热情，优秀的设计师，这三个特质缺一不可。
蓝湖：
在提拔设计人员成为设计管理者时，您会重点考察候选人的哪些方面？
程峰：
如果将设计团队比喻成一支球队的话，我对团队内设计管理者的要求是从明星球员变成主教练。
最简单的考察标准：
蓝湖：
滴滴CDX 内部是如何分工协作的？设计有时会是一个比较主观的，容易出现分歧的工作内容，如果团队内部的意见出现分歧，您是如何做决策的？
程峰：
CDX 专业分为两侧：体验设计+创意设计。既解决产品的体验设计问题，同时也关注业务运营效率及品牌创意设计问题。
我想目前的分工是阶段性的，未来的趋势应该是设计师职能更加融合，最终合并成只有「设计」这个职能。
在面对专业分歧的时候，最的解决办法依然是沟通。事实上大部分的分歧都是因为目标不一致导致的，所以在遇到分歧时，要保持让产品、品牌更好的端正、开放的心态，就会被更有道理的观点说服。
△ 滴滴「CDX」部门成员合照
蓝湖：
您作为设计管理者，对于提升产品设计效率，有什么经验分享给大家吗？
程峰：
首先，推进设计师成为更「复合」型的人才，设计细分专业之间的融合，能够降低理解成本。
其次，要继续推进产品组件化的建设和组件使用率。
最后，针对性使用设计工具，比如使用蓝湖完成自动标注和切图，通过工具规范标准化流程，避免无效沟通和重复劳动。
这些都是提升设计效率的办法。
蓝湖：
对于相对年轻的设计师，您有怎样的职业发展建议？
程峰：
保持初心，永远记得你为什么踏上设计这一行，并且时刻具备长远规划。
坚信设计的价值，任何职能都不可能解决全世界的问题，专注设计能解决的领域，设计自然更有价值。
保持思考，不仅是对专业的思考，更是对业务的思考，甚至生活和世界的思考。
我也是这样要求自己的，希望对各位也有帮助。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
