如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
说一下vue的声明周期：
vue 的生命周期11个钩子函数是按照以下的顺序来的 ：（不可逆转哦,第11个除外）
如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的
.
二. vue启动前后
这两个的意思就是，
当
可以获取
.
三. 组件更新前后
这个就不用我多说了吧？当子组件里面的
再点一次
四. 组件销毁前后(一般配合
给这个子组件用
所以
五. 组件激活时，未激活时
这两个钩子函数呢一般配合
这时候我们就可以用
说一下
六. 当捕获一个来自子孙组件的错误时被调用
当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数，
具体第11个没深入研究，喜欢的可以去看下官网的 errorCaptured。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一. 组件创建前后
1.beforeCreate
2.created
data（）{ return { a:1 },
beforeCreate(){
console.log(this.a)//undefined },
created(){
console.log(this.a)//1 }
}
.
3.beforeMount 4.mounted
vue在beforeMount时，还不管事，也就是说，还没有渲染数据到<div id="app"><div/>里面，此时的这个组件还是空的
mounted时，才会往<div id="app"><div/> 添加东西，也就是vue正式
接管<div id="app"><div/>
#app的innerHTML查看差异；
beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的内容 }
.
5.beforeUpdate 6.updated
视图改变 的时候触发。
如，做一个按钮，让data里面的a++，假如 一开始a是1
beforeUpdate返回1
updated返回2
beforeUpdate(){
console.log(document.getElementById('a').innerHTML)//1 },
updated(){
console.log(document.getElementById('a').innerHTML)//2 }
beforeUpdate返回2
updated返回3。。。
.
.
v-if使用)
7.beforeDestroy
8.destroyed
v-if来控制它的销毁和创建，注意以下：v-show不行。
子组件销毁前触发beforeDestroy
子组件销毁后触发destroyed
第一次会触发7.8.
创建子组件后会触发以上的第1.2.3.4.钩子函数。
有一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？
答案是会的
所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。
这两个钩子函数一般用于做性能的优化。
.
.
9.activated
10.deactivated
<keep-alive><keep-alive/>来使用。
通过看 四。这个例子，你肯定知道了一个组件怎么被销毁和创建。
但是我们知道通常一个组件是很大的，如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理，而且很浪费性能。。。
<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。
<keep-alive><keep-alive/>，它就相当于把你的组件给缓存下来了，目的呢就是不让组件重复的渲染，然后我们通过v-if触发，子组件就不会再触发7 和 8 了，而是只会频繁的触发9 和 10
这样性能会比7 和 8 好的多。
.
.
11.errorCaptured
第一个参数是 错误对象
第二个参数是 报错的子孙组件
第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一个产品最后出来的样子，是各种妥协的结果。
互联网产品和平面类型的设计工作最大的区别，可能是在于工种的细分上。之前做平面相关的工作（品牌，视觉，电商），自己一个人可能就充当了基本上除了印刷以外的所有主要工作，既要和客户沟通，了解用户需求和想法以及存在的问题，又要思考和制定设计方案，向客户展示设计提案，又要执行获得认可的设计提案，保证设计成果符合客户预期并落地，如果是最后要交付印刷品，可能还要跟进印刷的过程，保证印刷物料的质量。好像一个人把所有的活都要干了。
但是互联网产品不太一样，首先最大的问题是如何让方案落地的过程，这个工作一般来说没有办法一个人干（除非是牛到精通前端后端和客户端的各种开发语言的全栈设计师），因为会涉及到程序开发，有一些设计师，就算你厉害了，你能把产品交互和 UI 都搞定，然后你还会（web端）前端开发语言或者客户端开发语言，但是你还是需要一个能写后台的工程师，所以，正常情况下，互联网产品的开发，是环环相扣的，至少都需要两到三个人来配合工作。这还是比较小型的产品，如果是复杂的产品，那每个环节都必须细分出来，而且可能每个环节都不止一个人，产品，交互，UI，前端，客户端，后台，因为每个环节的工作量都太大了！
△ 图源：Nick Taylor
既然有这么多的分工，那必然会导致不同的工作岗位看问题的点都是不一样的。举个例子：经常会听到开发说，明明用 A 就可以，为什么非要用 B？一开始的时候，其实我真的不太理解，但是后来慢慢熟悉了开发的工作之后（尤其是自己开始学习一些代码知识之后）慢慢理解了，其实开发在实现我们的设计的时候，最关注的是功能的实现，而功能就是各种交互的集合，一个页面上，如果交互不变，功能不变，只是改一些视觉上的样式，这是相对来说简单的，如果牵扯到交互的调整和修改，那个工作量可能就成倍增加，所谓牵一发而动全身。所以我们在设计的时候，更要注意模块和组件的一致性和可复用性，这样不仅可以提高我们的设计质量，也可以有效的减少开发的工作量，提高开发的效率。
同时，开发在实现的第一个版本的产品中一般很多时候视觉上会有各种各样的问题，开发人员在开发过程中，为了提率，不太在意还原 UI 的细节，比如这个间距是多少，那个间隔是几个像素，所以最后产品上线前都会有 UI走查的环节，在这个过程中就是要一点一点地改进产品UI 实现中不符合设计稿的地方，这个时候才是我们设计师关注所谓的每一个像素的时候，在那之前，还是先关注功能和流程的实现吧。
其实不仅仅是因为每个岗位的职能不同会导致很多不同的意见，有时候也可能是因为每个人的审美或者是性格的问题，也会产生不少的摩擦，所以，学会妥协，在妥协中坚持是团队合作中的一门大学问。
以攻为守，让自己从更全面的视角去思考 UI 的工作。
△ 图源：Nick Taylor
一个 UI设计师的未来在哪里？有时候我会思考这样的问题，有可能是因为我已经30了。这一两年，危机感很重，每次看到非科班群里各种90后、95后的年轻设计师，心生羡慕的同时也充满了莫名的压力。
这半年多因为自己团队中没有专门的交互设计师，所以我就同时肩负了大部分交互设计的工作。一开始做交互设计的东西，其实自己的认识还是很浅薄的，虽然平时自己也看很多用户体验，设计心理学、交互设计等等的书籍，但是真的上手干活，还是会经常一头雾水，因为交互设计太需要缜密的逻辑思维了。市场上常见的 app 的标准化的交互设计因为都有竞品参考，还是相对来说简单的，在我看来比较难的是工具型的产品和 CMS（内容管理系统后台），尤其是 CMS 的交互设计，如果设计不好，分分钟让用的人感觉要崩溃。交互设计是一门很深的学问，也是 UI设计师必须去了解和熟知的，它绝不是简单的页面之间的跳转，也不仅是酷炫的动效，它是能让产品的使用体验得到质的飞跃的关键。
如果把一个产品比作一个人，那产品本身的方向是这个人的灵魂和思想，交互是这个人的举止和修养，而 UI 是一个人外形和穿衣品味以及整体气质，优秀的人，三者缺一不可，三者是共生的关系。
在我看来。成为一个产品设计师，了解产品思维，熟悉交互设计，精通视觉设计，这样的设计师觉得才是以后互联网设计师的标配。高配是什么？我觉得至少是全栈设计师吧。这就像平面设计领域，不懂印刷各种工艺和材质的，都称不上好的平面设计师。好的建筑设计师，也得懂很多建筑学和建筑材料的知识。
我在这半年的实际工作中，虽然第一个产品的概念定义和原型我没有参加讨论（我去的时候已经定下来了），但是我还是尝试去思考这个产品到底意义在哪里，目标用户是哪些人，解决了目标用户的什么需求，他们的使用场景有哪些。我一直都认为互联网产品的设计工作始终更是贯穿着设计思维，只是每个具体的分工的侧重点不同，你可以不精于产品需求的整理和筛选，但你是得明白你你所设计的是为了满足什么需求，有目标和方向才能做出更好的设计，你连问题都不知道，怎么去解决问题。设计的工作，终究都是为了解决问题，不了解问题的来龙去脉，便不能梳理出问题的本质，更无法做出好的设计去解决问题。
把自己定位为产品设计师，稍微多花点心思去思考产品，去学习交互，别让自己的眼界停留在只画几个好看界面，画几套特别的图标，不然你早晚要被这个行业淘汰，不对，是被其他更优秀的设计师淘汰。
很多公司并不真的在意所谓的 UCD。
△ 图源：Nick Taylor
我相信大部分的设计师还是在中小型的企业里工作，这样的企业的设计工作有一个很明显的特征，就是以主管或者老板的喜好为第一满足目标，所有的设计方案都会以老板的喜好为基准参考，只有老板说 ok 才算是 ok。当然，我们公司也是，毕竟我们也是一个小型公司，而且老板的个人风格特别强烈。所以在做第一款 app 时，仅仅是首屏的视觉方案，都出了不止七八个版本。在进入更加深入的其他页面的设计环节时，我们也没有去做什么用户场景分析或者用户需求分析之类的工作，都是依照着老板的一些想法去一步一步的实现，当然，这并不是一定是错的，只是大部分公司的设计工作的现状，这样也可能会有好的产品，只是可能性更低而已。很多公司没有很专业的设计团队，也没有很专业的产品经理，更没有很专业的产品设计师，做很多设计决策的时候基本上都是靠拍脑袋，或者依靠个人的生活或者设计经验，在不知不觉中，就把 UCD 的设计方法忘在脑后了，UI设计师只是负责机械式美化下每一个元素，做一下视觉风格的统一，变成了一个不折不扣的界面美化师。
但我们 UI设计师不能只是美化一下界面，虽然我们可以没有专业的设计团队，没有很厉害的产品经理或者交互设计师，但是我们也要在设计过程中不断地提醒自己，要以用户体验为中心，用户在这个界面需要的是什么，什么信息对他来说是最重要的，怎么样设计可以减少用户的浏览负担，提高用户的使用效率，虽然可能我们思考的方向和结果的不一定对，但是只要去想，才能不断强化我们自己的这个设计思维，避免自己产出千篇一律的设计方案，提高自己的设计能力。如果能把每一项工作都尽百分之120的努力去完成，那就算你现在是在一个微不足道的小公司，你也一定能成长为一个设计大牛。
现在作品不好，没问题，如果一直都不好，那就是你自己真的出了问题。
△ 图源：Nick Taylor
我以前很羡慕那种设计师，年纪轻轻就进大公司，或者20岁不到作品就让人感觉眼前一亮。对于我这种非科班的，大学毕业7年了，认真静下心来干设计才3年多，似乎还没开始跑，就已经被人甩开一大截了。
看起来似乎很糟糕，但其实真不是，你所经历的一切艰难，如果挺过去了，那就是你人生宝贵的财富。那应该怎么做呢？只能不断努力地去缩小和别人的差距，不对，不是和别人的差距，是和自己对自己期望值的差距。
那么提高审美和眼界就是最基本要做的事情，同时我也认为这是作为一个设计师需要持续不断提高的最基本的能力。审美和眼界的提高是需要日积月累的，软件操作和技法可以短时间内突击学习，也可以临时偷师，但是如果你审美不行，你永远都不可能做出好的设计，因为在你的眼里的高级和在高水平设计师眼里的高级，可能是天差地别。审美和眼界就像是一种设计师的隐藏属性，会在你日常的设计当中不自然的流露出来，你不需要去调动它，它自然而然的就会在你的工作中不断地帮助你。
但是往往很多设计师不把这个当一回事。其实你只要每天坚持不停地看优秀的作品，坚持几个月或者半年一年的，你的审美肯定都会有质的飞跃。以前你觉得设计很棒的作品，可能你以后看起来就会嗤之以鼻了。
看作品这件事其实很简单，你只要每天打开 behance，打开首页推荐的十个作品，花个十几二十分钟细细看下来，觉得好的就分类收藏一下，以备以后可以用来做设计的参考。
但是，关键是坚持。
别总看国内的设计网站了，外面的世界更精彩。
为什么要重新学习英语？（我就是想万一以后牛X了，可以混到国际舞台上，嗯，这个可以有）
一开始决定重拾英语的契机，这还要感谢砂姐组织的翻译小组。我也只是想试试看，能不能把英语重新捡起来。于是从17年2月份开始我给自己定了个目标，每个月翻一篇英语的设计类文章，很庆幸自己坚持下来了。同时在工作中遇到的不少问题，会逼着我去看一些外文的资料，让我觉得我必须得更努力地把英语捡起来，于是最近几个月同时也开始背单词，每天坚持读英语的设计文章，跟一开始比，感觉还是很有收获的，看文章的速度越来越快，阅读时的语感也越来越好（这个越来越好是相对于自己很糟糕时候的状态）。
慢慢地，我感觉，学好英语，对于一个设计师的长远发展是很有帮助的。
如果你想去了解世界上更多优秀设计师的想法，学习他们的经验，那么就得亲自去获取第一手的信息，而不是等着其他人的翻译，而且很多各种设计领域的优秀的教材和资料都只有英文版本，如果不把英语学好，自己学到的不仅仅是很多残缺不全的二手资料，甚至连学习的机会都没有。把英语学好，是给自己打开通往更广阔领域的钥匙。你的眼界，决定了你成就的上限。
学习从来都不是件轻松愉快的事情。
做界面的同学有没有遇到过这样的情况：我明明是设计成这样的，为什么开发出来之后就变成那样了？
这就是我下定决心想学习代码的导火索。我就想，为什么我不能自己学习代码自己实现自己的设计么？这不是很厉害么？加上我之前也断断续续地对前端技术有过学习的念头，于是一鼓作气下定决心就开始学了。
出于想给自己开发个人网站的初衷，我就选择了前端的开发语言作为我的学习内容。我目前主要学习的是 Javascript（html 和 css 已经学了个大概）。
一开始学习的时候真的是痛苦不堪，但是在度过了一两个月的痛苦的煎熬之后，已经慢慢地发现学习代码的乐趣，但同时，发现这个坑是越来越大，感觉要学的东西是自己预想的要多太多了。虽然过程很纠结也很痛苦（我估计这种痛苦的感觉还会持续好长时间），学习代码的过程对于提高设计师的逻辑思维确实很有帮助，因为编程思维和设计工作的思维相比，更注重逻辑性（设计工作也很注重逻辑性）。同时，多了解一些编程的知识（编程开发的语言很多，但是思维方式是类似的）对于理解开发人员的工作内容和工作方式，也会有很大的帮助。互联网的设计师，我觉得在学有余力的情况下，都应该多多少少学习一些代码的知识，因为这毕竟也是产品开发的其中的一个重要环节，你不需要擅长，但懂一些，可以让你更好地和开发人员进行有效的沟通，知己知彼，减少撕逼。但是不建议设计工作经验较少的同学学习代码，毕竟这需要很多的时间去学习，不要把自己变成什么都是半桶水，在不影响设计工作之余可以抽出时间的话让自己尝试一下，说不定你也会喜欢上编程这件事。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
生命周期函数是指在某一个周期自动执行的函数。
以下是React中的常用的生命周期函数，按个部分中按照自动执行顺序列出，这几个过程可能存在同时进行
consructor()里面初始化Props和State属性。
componentWillMount()：在组件即将被挂载到页面的时刻自动执行。
render()：将组件挂载到页面。
componentDidMount()：组件被挂载到页面之后立即执行。
componentWillReceiveProps()：一个组件要从父组件接收参数， 只要父组件的render()函数非首次（如果这个组件第一次存在与父组件中不会执行，如果已经存在于父组件中才会执行）执行了，子组件的这个生命周期函数就会被执行。如果组件没有Props属性则直接跳过
shouldComponentUpdate()：组件更行之前检查是否需要更新，注意这个函数要有一个布尔类型返回值，如果返回false，这一部分的生周期 函数将不会继续执行，即无论如何组件都不会更新。利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能
componentWillUpdate()：组件更新之前。自动执行。但要在shouldComponentUpdate()执行并返回true之后执行。
render()：将组件更新到页面。
componentDidUpdate():组件更新完成之后立即执行。
componentWillMount()：当组件即将被页面剔除时执行。
render()也是生命周期函数，而constructor()并不是生命周期函数。
render()函数，其他的所有生命周期函数都可以不写，也不会报错，但是如果缺少render()函数程序就会报错，因为所有的生命周期函数除了render()函数都是继承自React中内置的。
componentDidMount()里面。
本文重点梳理以下七大问题：一、令人眼花缭乱的专业术语；二、交互和视觉如何分工；三、工作的流程；四、视觉类UI的自学；五、交互设计需要掌握的知识；六、今天设计什么；七、设计师的薪资
经常有人问我新手如何自学交互设计，我之前也录过一个视频给大家，没想到放到网上后点击率很高，看来对新人是的确有帮助的。所以今天再次针对这个问题做阐述，修正了第一版的一些内容，也更具有针对性。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本组件基于element-ui 的图标库（星星图标）
第一步：
vue + webpack + element-ui 框架
第二步：
创建Rate.vue文件，实现双向绑定分数
第三部：
使用组件
在app.vue中引入组件
组件
说明
代码
<Rate v-model='value' size="32px">
<span>{{value}} 分</span>
</Rate>
import Rate from './components/Rate'
<template>
<div class="Rating" :value='value'>
<ul class="Rating-list">
<li v-for="s in 5" @click="changeRate(s)">
<i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
</li>
</ul>
<slot></slot> <!--显示用户自定义内容-->
</div>
</template>
props: {
size: { //父组件传值设置字体大小
type: String,
default: '16px'
},
value: { //绑定value，与$emit实现双向绑定
type:Number,
default:0
}
},
data() {
return {
star: this.value, // 初始化
style: {
fontSize: this.size //通过prop传值设置星星字体大小
}
}
},
methods: {
changeRate(s) {
this.star = s //更新当前星星数量
this.$emit('input', s); //将当前星星数量s与v-model绑定
}
}
demo演示
随着时间的发展，现在基本上人手一部手机的低头族。做为前端开发的程序猿，在开发移动端web应用的时候，对面一堆各色尺寸不一样的屏幕，就有点淡淡的忧伤。
以上是2018年二月份的友盟数据，可在这里查看详情
很明显我们所要实现的就是在上述如此之多的屏幕,都能实现UI大大出的视觉图上的效果。而要实现这样的效果主要有两个难点
各屏幕适配各屏幕的适配，有两种方案，flexible + rem 与 vw。这三个单词是什么意思，看着很眼熟，但是这两个方案居然是什么呢,请允许我细细道来。
flexible + rem显而易见,该方案是由rem 以及 flexible组成的。rem （font size of the root element）相对于根元素(即html元素)font-size计算值的倍数,flexible 即 flexible.js, 手淘团队提供的一个为该方案屏幕适配而写的一个库,主要实现的功能就是，根据屏幕的宽度给 html 元素设置一个合适的 font-size 值。
怎么样看的不是很懂是吧。让我来用一个页面场景再复述一遍。
正常情况下，我们的UI大大会以iphone6的尺寸为标准，做一套视觉效果图，并在上面进行标注，给到我们的标注图，如下所示
拿到这个图 我们该如何下手呢
到这里为止是不是就结束了呢 ? 很遗憾的告诉你并不是。为什么 html 元素的 font-size 要设置为 37.5px呢？现在这个界面在iphone6上能完美显示了，在iphone5s,iphone6p能完美显示吗？（iphone6, iphone6s, iphone7. iphone8屏幕没有发生变化，本文直接用iphone6代替了。）上面的两个问题 我们还有没解决，这个时候就轮到flexible登场了。只需要像如下引入就可实现用js来自动根据屏幕宽度设置 html元素的font-size的值。
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>引申一下在上述过程中，你会发现，UI给到我们的一般是px标注的图，我们将其转化为rem，这个过程其实会花费很大的计算时间。做为一个合格的程序员，我们应该把这种机械性无脑的操作交给计算机来实现。我使用的是PostCss的插件 postcss-px2rem,这个插件能让我们在写代码时候直接写px，在构建的时候自动将我们所写的px转换为rem，大大提升了我们的开发效率。
vw这个vw的方案，相当而言还比较新。vw 即（viewport width）可视窗口的宽度。之所以把这个方案放在后面来说，是因为viewport在去年（2017年）的时候存在不少的兼容性问题，各个浏览器的支持并不是很好。但是来到了2018年这个时间点，viewport单位意见得到了众多浏览器的支持（80.45%）。
可以在这里查看。
接下来就让我们来正式了解下这个方案吧。vw既然是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。举个例子，再次以iphone6手机为例，100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到这里为止是不是就结束了呢? 是的就是这么简单。
引申一下跟之前一样的痛点，我们仍然需要花费大量不必要的计算时间去把标注图中的px转换为vw，有没有类似于postcss-px2rem的工具呢？很荣幸能再次站在巨人的肩膀上，已经有大神写了了类似的PostCss插件 postcss-px-to-viewport
1px问题移动端的屏幕不仅仅分辨率有差异，其实还有Retina屏的问题。正常情况下，我们代码里的1px在屏幕上就应该显示一个像素点，但是在Retina屏下则不仅仅是一个像素点。再次拿iphone6为例，其dpr(device pixel ratio)设备像素比为2，css中一个1x1的点，其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px，在iPhone6 Plus下甚至会显示成3px。
这样的话，我们就会发现在有些手机上1px明显跟另外的一些手机的1px粗细不一样。其实大多数的小公司不会扣这样的一个细节，比如说我们公司不会。(^__^) 嘻嘻……
但是作为一个有追求的前端工程师，我们应该尽量的把事情做的完美一点，（ps.像大公司看齐，在大公司这个细节问题其实是不容忽视的，为了自己以后的发展前途，我们有必要把这个细节完善掉的。）
这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}编译出来就是
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;}其他小程序中的屏幕适配最近在写小程序，在小程序里，使用的是小程序的那套，跟平时用的vue全家桶以及react全家桶不一样，并没有配置webpack，在这种情况下我们使用postcss其实很困难（反正我是搞不出来/(ㄒoㄒ)/~~）
那该怎么办呢，小程序提供了一个自己的单位, rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备
iPhone5
iPhone6
iPhone6p
我们直接用拿到iphone6的标注图，直接写rpx就好。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想一个问题吧，如果有人给你发了一条微信，你没有回复 ta，原因是什么？
原因会有很多种，但是几乎每一种原因都可以对应到更深的层次。比如给你发消息的人对你而言不重要，是因为缺乏了回复的动机；没时间回复是因为缺乏了回复的能力；关闭了提醒是缺乏了回复的触发因素……
动机，能力，触发三大要素，是让用户产生行为必不可少的三大条件，在行为模型里也十分重要。
最早在 Norman 的《设计心理学》了解到关于行动的几个步骤，他将行动拆分为目标，执行，评估三大阶段，每一阶段又分为几个步骤，简单画了逻辑图 ：
但是很多时候会发现，用户不一定会按我们所设想的方式去使用我们的产品，特别是注册，购买等能提升转化率的行为……我在查询了一些关于心理学方面的内容后，发现了用户不进行这些行为，其实都是有可以解释的依据的，并且我们还可以利用这些依据来改善我们的产品。
从前面微信的例子，我们可以得知，要想让用户产生行为（Behavior），必须具备三个要素：充分的动机（Motive），完成这一行为的能力（Ability），促使人们付诸行动的触发（Trigger），这三者缺一不可。
于是我们可以得出一个行为模型：B=MAT，我们可以从数学的角度类比出人们产生行为的「临界点」，可以称为「行动边界线」（当然这是我自己瞎取的名字，方便理解），只有用户跨越了「行动边界线」，才能实施或者产生某种行为。
所谓触发，就是促使用户做出某种举动的诱因，引发用户去使用你的产品。
比如通过在其他平台广告推广等付费方式吸引新用户，这个可以称为「付费型触发」；
还有一些公关、媒体新闻的正面报道 ，app store 里面排行榜，AppSo 推荐好用应用等不需要付费，但是能够吸引用户使用你的产品，这个可以称为「回馈型触发」；
还有熟人之间的相互推荐，亲朋好友的口碑相传，这种方式十分常见，也是能够让产品大规模获取用户的一种方式，我们可以称为「人际型触发」。
但是这种方式经常会被恶意利用，比如我们经常看到的：分享XX到几个群即可领取XXX优惠，最后却发现是骗人的方式，利用这种方式也许可以获取大批用户，但是一旦用户发现被欺骗后就会立即停止使用你的产品，你也会失去用户的信任。
还有一种是以驱动用户重复某种行为的方式，用户主动与产品保持联系，比如用户注册了某个平台的账户，订阅了它们的内容更新，开启了消息推送，那么每一次更新推送就很有可能触发用户使用你的产品，这种方式可以称为「自主型触发」。
以上四种触发方式，都是来源于外部环境，那么我们可以将其称为「外部触发」。
昨晚在 PM CIRCLE 里面看到大家在谈论关于痛点、痒点、爽点的问题，也出了系列文章，后来在知乎上也搜了相关大佬的回复。
小小的总结一下：
为什么我会提到「痛点」、「痒点」、「爽点」？是因为我觉得这三者是从内部来触发用户采取下一步行动。
Nir Eyal 将情绪触发分为两种，一种为负面情绪，一种为正面情绪，两种情绪皆可触发用户采取行动，但是我觉得如果利用「痛点」、「痒点」、「爽点」来分析内部触发的话会更好，这三点通过深入挖掘用户内在的情感体验，设计出满足用户需求的产品，利用这三点也可以触发用户使用你的产品。
可以思考一下，人们为什么要发朋友圈，发微博？为什么要拍照？为什么要刷抖音？为什么朋友圈更新出现小红点后我就要去点击看？用户借助这些产品实现了怎样的目的？消除了什么样的烦恼？使用完这些产品后用户感受如何？等等问题。
可以把能力解释为完成该行为的难易程度
Hauptly，Denis J 有一个观点就是：当你使用某个产品时所需花费的步骤能被缩减或者是优化时，用户使用它的频率就会增加。他在《Something Really New》一书中，归纳了产品创新的三个步骤，简单画了下步骤图：
结合今天的科技变化，我们可以知道，将行为简单化可以推动产品创新，也只有将行为简单化，用户才会具备完成这一行为的能力。
福格总结了简洁性包含的6个元素，也就是影响任务难易程度的6个要素，简单总结下：
福格建议，为了增加用户实施某个行为的可能性，设计人员在设计产品时，应该关注用户最缺乏什么。
也就是说，要弄清楚是什么原因 阻碍了用户完成这一活动：是时间不够吗？还是缺乏资金？还是完成这一活动太耗体力了？或者是用户不想动脑筋？或者是这个产品与他们所处的社会环境格格不入？甚至是它太逾越常规，以至让人难以接受？
我记得我第一份实习，做的一款新闻app，那个时候还不懂交互也不懂产品，我记得在首页查看新的新闻内容的时候 ，因为数据加载量的原因，每次只能加载一定数量的新闻，所以当时设计的是一个「查看更多」的列表条，用户每次需要加载更多新闻内容的时候，都需要点击一次「查看更多」加载大约6条新的新闻，其实现在想想，为什么我们不设计一个自动加载呢？每次用户上拉的时候，自动加载一部分，这样能够让操作更加便捷，节约时间。
触发是提醒用户采取行动，而动机决定用户是否愿意采取行动，也就是用户行动时拥有的热情。在心理学里面，福格博士归纳了驱使用户采取行动的三大类核心动机：
能够成为某些人行为动机的东西，未必适用于另外一些人，所以，我们需要知道自己的目标用户到底需要什么。
举个例子：比如抖音的一些视频封面，是一些漂亮的女生封面，而对于大都数男生来说，为了追求快乐，就有了点击进去看的动机，而这种动机对于另外一些女性用户就不一定适用。
前几天在听 UCDCHINA 上海 大众点评 DPUX 专场《战略导向下的设计价值拓展》线下分享会的时候，其中也讲到了关于用户的7大基本心理特征——七宗罪：愤怒，淫欲，贪婪，懒惰，嫉妒，暴食，骄傲。
我觉得这也是能够让用户产生动机的七大因素 ，比如经常被广告商拿来利用的俗称「性卖点」的广告设计元素 ，利用人性的窥探欲，吸引用户付诸行动……
当我们知道了用户采取行动的几类核心动机后，我们可以通过一些心理学的方法来刺激用户的这些动机。
我在 Nir Eyal 的书中了解到一些关于启发法等认知偏差对人类行为的影响，比如稀缺效应，首因效应，环境效应，投射效应，近因效应，锚定效应，赠券效应，目标渐进效应等 。
比如很多电商平台商家会故意将商品库存降低，当产品数量由多变少的时候，它在用户心中的价值就会提高，那么用户购买的动机就会增强，这就是利用了稀缺效应 ；
再比如目标渐进效应，大意是讲当用户认为自己距离目标越来越近时，完成任务的动机会更加强烈。
目标渐进效应让我突然想到长沙的网红奶茶——茶颜悦色的集点卡，大概就是积满6点可以送一杯奶茶，我在第一次买第一杯的时候，他们给了我一张集点卡，上面已集了1个点，意思就是说我再集5个点就可以兑换一杯奶茶了，但是如果换一种方式，它把规则改成集5点可以兑换一杯奶茶，但是我买第一杯的时候，他们给我的卡上是空白的，没有点，那么你们觉得这两种方式，哪种方式更能让用户产生集点的动机呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想一个问题吧，如果有人给你发了一条微信，你没有回复 ta，原因是什么？
原因会有很多种，但是几乎每一种原因都可以对应到更深的层次。比如给你发消息的人对你而言不重要，是因为缺乏了回复的动机；没时间回复是因为缺乏了回复的能力；关闭了提醒是缺乏了回复的触发因素……
动机，能力，触发三大要素，是让用户产生行为必不可少的三大条件，在行为模型里也十分重要。
最早在 Norman 的《设计心理学》了解到关于行动的几个步骤，他将行动拆分为目标，执行，评估三大阶段，每一阶段又分为几个步骤，简单画了逻辑图 ：
但是很多时候会发现，用户不一定会按我们所设想的方式去使用我们的产品，特别是注册，购买等能提升转化率的行为……我在查询了一些关于心理学方面的内容后，发现了用户不进行这些行为，其实都是有可以解释的依据的，并且我们还可以利用这些依据来改善我们的产品。
从前面微信的例子，我们可以得知，要想让用户产生行为（Behavior），必须具备三个要素：充分的动机（Motive），完成这一行为的能力（Ability），促使人们付诸行动的触发（Trigger），这三者缺一不可。
于是我们可以得出一个行为模型：B=MAT，我们可以从数学的角度类比出人们产生行为的「临界点」，可以称为「行动边界线」（当然这是我自己瞎取的名字，方便理解），只有用户跨越了「行动边界线」，才能实施或者产生某种行为。
所谓触发，就是促使用户做出某种举动的诱因，引发用户去使用你的产品。
比如通过在其他平台广告推广等付费方式吸引新用户，这个可以称为「付费型触发」；
还有一些公关、媒体新闻的正面报道 ，app store 里面排行榜，AppSo 推荐好用应用等不需要付费，但是能够吸引用户使用你的产品，这个可以称为「回馈型触发」；
还有熟人之间的相互推荐，亲朋好友的口碑相传，这种方式十分常见，也是能够让产品大规模获取用户的一种方式，我们可以称为「人际型触发」。
但是这种方式经常会被恶意利用，比如我们经常看到的：分享XX到几个群即可领取XXX优惠，最后却发现是骗人的方式，利用这种方式也许可以获取大批用户，但是一旦用户发现被欺骗后就会立即停止使用你的产品，你也会失去用户的信任。
还有一种是以驱动用户重复某种行为的方式，用户主动与产品保持联系，比如用户注册了某个平台的账户，订阅了它们的内容更新，开启了消息推送，那么每一次更新推送就很有可能触发用户使用你的产品，这种方式可以称为「自主型触发」。
以上四种触发方式，都是来源于外部环境，那么我们可以将其称为「外部触发」。
昨晚在 PM CIRCLE 里面看到大家在谈论关于痛点、痒点、爽点的问题，也出了系列文章，后来在知乎上也搜了相关大佬的回复。
小小的总结一下：
为什么我会提到「痛点」、「痒点」、「爽点」？是因为我觉得这三者是从内部来触发用户采取下一步行动。
Nir Eyal 将情绪触发分为两种，一种为负面情绪，一种为正面情绪，两种情绪皆可触发用户采取行动，但是我觉得如果利用「痛点」、「痒点」、「爽点」来分析内部触发的话会更好，这三点通过深入挖掘用户内在的情感体验，设计出满足用户需求的产品，利用这三点也可以触发用户使用你的产品。
可以思考一下，人们为什么要发朋友圈，发微博？为什么要拍照？为什么要刷抖音？为什么朋友圈更新出现小红点后我就要去点击看？用户借助这些产品实现了怎样的目的？消除了什么样的烦恼？使用完这些产品后用户感受如何？等等问题。
可以把能力解释为完成该行为的难易程度
Hauptly，Denis J 有一个观点就是：当你使用某个产品时所需花费的步骤能被缩减或者是优化时，用户使用它的频率就会增加。他在《Something Really New》一书中，归纳了产品创新的三个步骤，简单画了下步骤图：
结合今天的科技变化，我们可以知道，将行为简单化可以推动产品创新，也只有将行为简单化，用户才会具备完成这一行为的能力。
福格总结了简洁性包含的6个元素，也就是影响任务难易程度的6个要素，简单总结下：
福格建议，为了增加用户实施某个行为的可能性，设计人员在设计产品时，应该关注用户最缺乏什么。
也就是说，要弄清楚是什么原因 阻碍了用户完成这一活动：是时间不够吗？还是缺乏资金？还是完成这一活动太耗体力了？或者是用户不想动脑筋？或者是这个产品与他们所处的社会环境格格不入？甚至是它太逾越常规，以至让人难以接受？
我记得我第一份实习，做的一款新闻app，那个时候还不懂交互也不懂产品，我记得在首页查看新的新闻内容的时候 ，因为数据加载量的原因，每次只能加载一定数量的新闻，所以当时设计的是一个「查看更多」的列表条，用户每次需要加载更多新闻内容的时候，都需要点击一次「查看更多」加载大约6条新的新闻，其实现在想想，为什么我们不设计一个自动加载呢？每次用户上拉的时候，自动加载一部分，这样能够让操作更加便捷，节约时间。
触发是提醒用户采取行动，而动机决定用户是否愿意采取行动，也就是用户行动时拥有的热情。在心理学里面，福格博士归纳了驱使用户采取行动的三大类核心动机：
能够成为某些人行为动机的东西，未必适用于另外一些人，所以，我们需要知道自己的目标用户到底需要什么。
举个例子：比如抖音的一些视频封面，是一些漂亮的女生封面，而对于大都数男生来说，为了追求快乐，就有了点击进去看的动机，而这种动机对于另外一些女性用户就不一定适用。
前几天在听 UCDCHINA 上海 大众点评 DPUX 专场《战略导向下的设计价值拓展》线下分享会的时候，其中也讲到了关于用户的7大基本心理特征——七宗罪：愤怒，淫欲，贪婪，懒惰，嫉妒，暴食，骄傲。
我觉得这也是能够让用户产生动机的七大因素 ，比如经常被广告商拿来利用的俗称「性卖点」的广告设计元素 ，利用人性的窥探欲，吸引用户付诸行动……
当我们知道了用户采取行动的几类核心动机后，我们可以通过一些心理学的方法来刺激用户的这些动机。
我在 Nir Eyal 的书中了解到一些关于启发法等认知偏差对人类行为的影响，比如稀缺效应，首因效应，环境效应，投射效应，近因效应，锚定效应，赠券效应，目标渐进效应等 。
比如很多电商平台商家会故意将商品库存降低，当产品数量由多变少的时候，它在用户心中的价值就会提高，那么用户购买的动机就会增强，这就是利用了稀缺效应 ；
再比如目标渐进效应，大意是讲当用户认为自己距离目标越来越近时，完成任务的动机会更加强烈。
目标渐进效应让我突然想到长沙的网红奶茶——茶颜悦色的集点卡，大概就是积满6点可以送一杯奶茶，我在第一次买第一杯的时候，他们给了我一张集点卡，上面已集了1个点，意思就是说我再集5个点就可以兑换一杯奶茶了，但是如果换一种方式，它把规则改成集5点可以兑换一杯奶茶，但是我买第一杯的时候，他们给我的卡上是空白的，没有点，那么你们觉得这两种方式，哪种方式更能让用户产生集点的动机呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
