首頁

何為第一

藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

藍(lán)藍(lán)寫

在班級(jí)考試的時(shí)候,在同行競(jìng)標(biāo)時(shí),在工作業(yè)績?cè)u(píng)定時(shí),大家都想贏,爭第一才有機(jī)會(huì)。很多時(shí)候,大家在為爭這個(gè)第一而煩惱??偸潜3值谝缓茈y,得到后又怕失去,心情易受此情緒化。享受贏的感覺很好,但如果第一才是贏,那輸?shù)娜素M不是很多?

得第一一旦養(yǎng)成習(xí)慣,做起事來會(huì)追求完美,不怕苦不怕累,但是一旦有場(chǎng)合一定要輸,使不想?yún)⑴c,覺得不公平。人生不可能每次都是考試第一,每場(chǎng)投標(biāo)都中,每次比稿都只自己的最好,成敗是常見的事情,直面輸贏,是對(duì)心智的磨練。

爸爸對(duì)我說,不要每次考試都讓我女兒考第一,這樣是不對(duì)的,要把身體鍛煉好,身體好了,成績自然就好。

期中考試考前我激勵(lì)女兒:要好好學(xué)習(xí),這次還能不能再有進(jìn)步?期末考試是很重要的。女兒說:不就是期末考試嗎?有什么重要的?也不可能永遠(yuǎn)都進(jìn)步。

我覺得他們說的話都有道理,以前每次投標(biāo)我基本上是晚12點(diǎn)睡早五點(diǎn)起,睡中朦朧也會(huì)思考怎么做的更好,投完標(biāo)基本上都會(huì)病一場(chǎng),追求完美給自己壓力太大,影響健康。

所以這次考試中只問女兒:今天身體怎么樣?累不累?熱不熱?放松去考,考砸了,下次再努力,女兒很高興,放松,覺得得到理解和關(guān)心。

何為第一?今日讀到一段定義:所有的人都需要你的時(shí)候,你能夠給他們帶來所需要的,你就是第一。任何事情都有它的順序,講因緣,時(shí)節(jié),果報(bào),要一步一步來,時(shí)間未到,你想也沒有,時(shí)間一到,你不想它也有。

德和得分別代表了內(nèi)在和外在,它也代表了同一種東西的兩個(gè)狀態(tài):能量和質(zhì)量。

當(dāng)內(nèi)在大于外在時(shí),能量就會(huì)轉(zhuǎn)化為物質(zhì),于是財(cái)富會(huì)自動(dòng)存在;當(dāng)外在大于內(nèi)在,也就是能量不夠的時(shí)候,物質(zhì)會(huì)自動(dòng)消失,對(duì)應(yīng)到生活當(dāng)中就是出現(xiàn)健康、財(cái)富等外在的損失甚至災(zāi)難。

由此就能更好地理解我們常說的“厚德載物”是什么意思,物質(zhì)就是錢、地位、房子、子孫、家庭、名利。

厚德=后得。

厚德厚物,薄德薄物,缺德缺物,無德無物。因?yàn)槟芰亢唾|(zhì)量永遠(yuǎn)要追求一種平衡。WechatIMG90.jpeg

遵守職業(yè)道德,做人的品德是基礎(chǔ),否則水里來火里去存不住物質(zhì)財(cái)富,贏得第一意味著名利,意味著才華和能力能夠給帶來機(jī)會(huì)和財(cái)富,但是品德修養(yǎng)是更為重要的根本,決定財(cái)富持有的時(shí)間和量級(jí)。

去掉攀比的好勝心,把視角轉(zhuǎn)向?qū)?nèi)的反省和探索,目標(biāo)不再定為得第一,而定為不斷地完善自我,完善工作品質(zhì)。甘當(dāng)無私的綠葉,在別人需要時(shí)幫助別人,減少狹隘的利益判斷,更寬胸懷的幫助別的公司建立設(shè)計(jì)驅(qū)動(dòng)的價(jià)值。

有德的人,不為自己求安樂,但為眾生得離苦,眾生是一個(gè)很大的團(tuán)隊(duì),如果由己及人,把團(tuán)隊(duì)擴(kuò)大到同事,社區(qū),同行,胸懷越來越大,人也就會(huì)變得越來越包容,平和。追求亦也不再是自己的第一,而是帶領(lǐng)更多的人走向卓越,完善自我的修行之路。

WechatIMG91.jpg


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



ES6新特性Promise異步調(diào)用

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

Promise 的含義

Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件--更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn),ES6將其寫進(jìn)了語言標(biāo)準(zhǔn),統(tǒng)一了語法,原生提供了Promise

所謂Promise ,簡單說就是一個(gè)容器,里面保存著某個(gè)未來才回結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語法上說,Promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息。 
Promise 對(duì)象的狀態(tài)不受外界影響

三種狀態(tài):

  • pending:進(jìn)行中
  • fulfilled :已經(jīng)成功
  • rejected 已經(jīng)失敗

狀態(tài)改變: 
Promise對(duì)象的狀態(tài)改變,只有兩種可能:

  • 從pending變?yōu)閒ulfilled
  • 從pending變?yōu)閞ejected。

這兩種情況只要發(fā)生,狀態(tài)就凝固了,不會(huì)再變了,這時(shí)就稱為resolved(已定型

基本用法

ES6規(guī)定,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來生成Promise實(shí)例


    
  1. const promist = new Promise(function(resolve,reject){
  2. if(/*異步操作成功*/){
  3. resolve(value);
  4. }else{
  5. reject(error);
  6. }
  7. })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

resolve函數(shù)的作用是,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?nbsp;pending 變?yōu)?nbsp;resolved),在異步操作成功時(shí)調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去; 
reject函數(shù)的作用是,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?nbsp;pending 變?yōu)?nbsp;rejected),在異步操作失敗時(shí)調(diào)用,并將異步操作報(bào)出的錯(cuò)誤,作為參數(shù)傳遞出去。

Promise的源碼分析:

1.回調(diào)地獄

曾幾何時(shí),我們的代碼是這樣的,為了拿到回調(diào)的結(jié)果,不得不callback hell,這種環(huán)環(huán)相扣的代碼可以說是相當(dāng)惡心了


            
  1. let fs = require('fs')
  2. fs.readFile('./a.txt','utf8',function(err,data){
  3. fs.readFile(data,'utf8',function(err,data){
  4. fs.readFile(data,'utf8',function(err,data){
  5. console.log(data)
  6. })
  7. })
  8. })

終于,我們的蓋世英雄出現(xiàn)了,他身披金甲圣衣、駕著七彩祥云。好吧打岔兒了,沒錯(cuò)他就是我們的Promise,那讓我們來看看用了Promise之后,上面的代碼會(huì)變成什么樣吧


            
  1. let fs = require('fs')
  2. function read(url){
  3. return new Promise((resolve,reject)=>{
  4. fs.readFile(url,'utf8',function(error,data){
  5. error && reject(error)
  6. resolve(data)
  7. })
  8. })
  9. }
  10. read('./a.txt').then(data=>{
  11. return read(data)
  12. }).then(data=>{
  13. return read(data)
  14. }).then(data=>{
  15. console.log(data)
  16. })

2.重點(diǎn)開始,小眼睛都看過來

2.1 Promise/A+

首先我們要知道自己手寫一個(gè)Promise,應(yīng)該怎么去寫,誰來告訴我們?cè)趺磳懀枰裱裁礃拥囊?guī)則。當(dāng)然這些你都不用擔(dān)心,其實(shí)業(yè)界都是通過一個(gè)規(guī)則指標(biāo)來生產(chǎn)Promise的。讓我們來看看是什么東西。傳送門?Promise/A+

2.2 constructor

我們先聲明一個(gè)類,叫做Promise,里面是構(gòu)造函數(shù)。如果es6還有問題的可以去阮大大的博客上學(xué)習(xí)一下(傳送門?es6


            
  1. class Promise{
  2. constructor(executor){
  3. //控制狀態(tài),使用了一次之后,接下來的都不被使用
  4. this.status = 'pendding'
  5. this.value = undefined
  6. this.reason = undefined
  7. //定義resolve函數(shù)
  8. let resolve = (data)=>{
  9. //這里pendding,主要是為了防止executor中調(diào)用了兩次resovle或reject方法,而我們只調(diào)用一次
  10. if(this.status==='pendding'){
  11. this.status = 'resolve'
  12. this.value = data
  13. }
  14. }
  15. //定義reject函數(shù)
  16. let reject = (data)=>{
  17. if(this.status==='pendding'){
  18. this.status = 'reject'
  19. this.reason = data
  20. }
  21. }
  22. //executor方法可能會(huì)拋出異常,需要捕獲
  23. try{
  24. //將resolve和reject函數(shù)給使用者
  25. executor(resolve,reject)
  26. }catch(e){
  27. //如果在函數(shù)中拋出異常則將它注入reject中
  28. reject(e)
  29. }
  30. }
  31. }

那么接下來我會(huì)分析上面代碼的作用,原理

  • executor:這是實(shí)例Promise對(duì)象時(shí)在構(gòu)造器中傳入的參數(shù),一般是一個(gè)function(resolve,reject){}
  • status:``Promise的狀態(tài),一開始是默認(rèn)的pendding狀態(tài),每當(dāng)調(diào)用道resolve和reject方法時(shí),就會(huì)改變其值,在后面的then方法中會(huì)用到
  • value:resolve回調(diào)成功后,調(diào)用resolve方法里面的參數(shù)值
  • reason:reject回調(diào)成功后,調(diào)用reject方法里面的參數(shù)值
  • resolve:聲明resolve方法在構(gòu)造器內(nèi),通過傳入的executor方法傳入其中,用以給使用者回調(diào)
  • reject:聲明reject方法在構(gòu)造器內(nèi),通過傳入的executor方法傳入其中,用以給使用者回調(diào)

2.3 then

then方法是Promise中最為重要的方法,他的用法大家都應(yīng)該已經(jīng)知道,就是將Promise中的resolve或者reject的結(jié)果拿到,那么我們就能知道這里的then方法需要兩個(gè)參數(shù),成功回調(diào)和失敗回調(diào),上代碼!


            
  1. then(onFufilled,onRejected){
  2. if(this.status === 'resolve'){
  3. onFufilled(this.value)
  4. }
  5. if(this.status === 'reject'){
  6. onRejected(this.reason)
  7. }
  8. }

這里主要做了將構(gòu)造器中resolve和reject的結(jié)果傳入onFufilledonRejected中,注意這兩個(gè)是使用者傳入的參數(shù),是個(gè)方法。所以你以為這么簡單就完了?要想更Swag的應(yīng)對(duì)各種場(chǎng)景,我們必須得再完善。繼續(xù)往下走!

3.異步的Promise

之前我們只是處理了同步情況下的Promise,簡而言之所有操作都沒有異步的成分在內(nèi)。那么如果是異步該怎么辦?

3.1 callback?。。。?

最早處理異步的方法就是callback,就相當(dāng)于我讓你幫我掃地,我會(huì)在給你發(fā)起任務(wù)時(shí)給你一個(gè)手機(jī),之后我做自己的事情去,不用等你,等你掃完地就會(huì)打手機(jī)給我,誒,我就知道了地掃完了。這個(gè)手機(jī)就是callback,回調(diào)函數(shù)。

首先我們需要改一下構(gòu)造器里的代碼,分別添加兩個(gè)回調(diào)函數(shù)的數(shù)組,分別對(duì)應(yīng)成功回調(diào)和失敗回調(diào)。他們的作用是當(dāng)成功執(zhí)行resolve或reject時(shí),執(zhí)行callback。


            
  1. //存放成功回調(diào)的函數(shù)
  2. this.onResolvedCallbacks = []
  3. //存放失敗回調(diào)的函數(shù)
  4. this.onRejectedCallbacks = []
  5. let resolve = (data)=>{
  6. if(this.status==='pendding'){
  7. this.status = 'resolve'
  8. this.value = data
  9. //監(jiān)聽回調(diào)函數(shù)
  10. this.onResolvedCallbacks.forEach(fn=>fn())
  11. }
  12. }
  13. let reject = (data)=>{
  14. if(this.status==='pendding'){
  15. this.status = 'reject'
  16. this.reason = data
  17. this.onRejectedCallbacks.forEach(fn=>fn())
  18. }
  19. }

然后是then需要多加一個(gè)狀態(tài)判斷,當(dāng)Promise中是異步操作時(shí),需要在我們之前定義的回調(diào)函數(shù)數(shù)組中添加一個(gè)回調(diào)函數(shù)。


            
  1. if(this.status === 'pendding'){
  2. this.onResolvedCallbacks.push(()=>{
  3. // to do....
  4. let x = onFufilled(this.value)
  5. resolvePromise(promise2,x,resolve,reject)
  6. })
  7. this.onRejectedCallbacks.push(()=>{
  8. let x = onRejected(this.reason)
  9. resolvePromise(promise2,x,resolve,reject)
  10. })
  11. }

ok!大功告成,異步已經(jīng)解決了

3.2 resolvePromise

這也是Promise中的重頭戲,我來介紹一下,我們?cè)谟肞romise的時(shí)候可能會(huì)發(fā)現(xiàn),當(dāng)then函數(shù)中return了一個(gè)值,我們可以繼續(xù)then下去,不過是什么值,都能在下一個(gè)then中獲取,還有,當(dāng)我們不在then中放入?yún)?shù),例:promise.then().then(),那么其后面的then依舊可以得到之前then返回的值,可能你現(xiàn)在想很迷惑。讓我來解開你心中的憂愁,follow me。


            
  1. then(onFufilled,onRejected){
  2. //解決onFufilled,onRejected沒有傳值的問題
  3. onFufilled = typeof onFufilled === 'function'?onFufilled:y=>y
  4. //因?yàn)殄e(cuò)誤的值要讓后面訪問到,所以這里也要跑出個(gè)錯(cuò)誤,不然會(huì)在之后then的resolve中捕獲
  5. onRejected = typeof onRejected === 'function'?onRejected:err=>{ throw err ;}
  6. //聲明一個(gè)promise對(duì)象
  7. let promise2
  8. if(this.status === 'resolve'){
  9. //因?yàn)樵?then之后又是一個(gè)promise對(duì)象,所以這里肯定要返回一個(gè)promise對(duì)象
  10. promise2 = new Promise((resolve,reject)=>{
  11. setTimeout(()=>{
  12. //因?yàn)榇┩钢档木壒剩谀J(rèn)的跑出一個(gè)error后,不能再用下一個(gè)的reject來接受,只能通過try,catch
  13. try{
  14. //因?yàn)橛械臅r(shí)候需要判斷then中的方法是否返回一個(gè)promise對(duì)象,所以需要判斷
  15. //如果返回值為promise對(duì)象,則需要取出結(jié)果當(dāng)作promise2的resolve結(jié)果
  16. //如果不是,直接作為promise2的resolve結(jié)果
  17. let x = onFufilled(this.value)
  18. //抽離出一個(gè)公共方法來判斷他們是否為promise對(duì)象
  19. resolvePromise(promise2,x,resolve,reject)
  20. }catch(e){
  21. reject(e)
  22. }
  23. },0)
  24. })
  25. }
  26. if(this.status === 'reject'){
  27. promise2 = new Promise((resolve,reject)=>{
  28. setTimeout(()=>{
  29. try{
  30. let x = onRejected(this.reason)
  31. resolvePromise(promise2,x,resolve,reject)
  32. }catch(e){
  33. reject(e)
  34. }
  35. },0)
  36. })
  37. }
  38. if(this.status === 'pendding'){
  39. promise2 = new Promise((resolve,reject)=>{
  40. this.onResolvedCallbacks.push(()=>{
  41. // to do....
  42. setTimeout(()=>{
  43. try{
  44. let x = onFufilled(this.value)
  45. resolvePromise(promise2,x,resolve,reject)
  46. }catch(e){
  47. reject(e)
  48. }
  49. },0)
  50. })
  51. this.onRejectedCallbacks.push(()=>{
  52. setTimeout(()=>{
  53. try{
  54. let x = onRejected(this.reason)
  55. resolvePromise(promise2,x,resolve,reject)
  56. }catch(e){
  57. reject(e)
  58. }
  59. })
  60. })
  61. })
  62. }
  63. return promise2
  64. }

一下子多了很多方法,不用怕,我會(huì)一一解釋

  1. 返回Promise?:首先我們要注意的一點(diǎn)是,then有返回值,then了之后還能在then,那就說明之前的then返回的必然是個(gè)Promise
  2. 為什么外面要包一層setTimeout?:因?yàn)镻romise本身是一個(gè)異步方法,屬于微任務(wù)一列,必須得在執(zhí)行棧執(zhí)行完了在去取他的值,所以所有的返回值都得包一層異步setTimeout。
  3. 為什么開頭有兩個(gè)判斷?:這就是之前想要解決的如果then函數(shù)中的參數(shù)不是函數(shù),那么我們需要做處理。如果onFufilled不是函數(shù),就需要自定義個(gè)函數(shù)用來返回之前resolve的值,如果onRejected不是函數(shù),自定義個(gè)函數(shù)拋出異常。這里會(huì)有個(gè)小坑,如果這里不拋出異常,會(huì)在下一個(gè)then的onFufilled中拿到值。又因?yàn)檫@里拋出了異常所以所有的onFufilled或者onRejected都需要try/catch,這也是Promise/A+的規(guī)范。當(dāng)然本人覺得成功的回調(diào)不需要拋出異常也可以,大家可以仔細(xì)想想。
  4. resolvePromise是什么?:這其實(shí)是官方Promise/A+的需求。因?yàn)槟愕膖hen可以返回任何職,當(dāng)然包括Promise對(duì)象,而如果是Promise對(duì)象,我們就需要將他拆解,直到它不是一個(gè)Promise對(duì)象,取其中的值。

那就讓我們來看看這個(gè)resolvePromise到底長啥樣。


            
  1. function resolvePromise(promise2,x,resolve,reject){
  2. //判斷x和promise2之間的關(guān)系
  3. //因?yàn)閜romise2是上一個(gè)promise.then后的返回結(jié)果,所以如果相同,會(huì)導(dǎo)致下面的.then會(huì)是同一個(gè)promise2,一直都是,沒有盡頭
  4. if(x === promise2){//相當(dāng)于promise.then之后return了自己,因?yàn)閠hen會(huì)等待return后的promise,導(dǎo)致自己等待自己,一直處于等待
  5. return reject(new TypeError('循環(huán)引用'))
  6. }
  7. //如果x不是null,是對(duì)象或者方法
  8. if(x !== null && (typeof x === 'object' || typeof x === 'function')){
  9. //為了判斷resolve過的就不用再reject了,(比如有reject和resolve的時(shí)候)
  10. let called
  11. try{//防止then出現(xiàn)異常,Object.defineProperty
  12. let then = x.then//取x的then方法可能會(huì)取到{then:{}},并沒有執(zhí)行
  13. if(typeof then === 'function'){
  14. //我們就認(rèn)為他是promise,call他,因?yàn)閠hen方法中的this來自自己的promise對(duì)象
  15. then.call(x,y=>{//第一個(gè)參數(shù)是將x這個(gè)promise方法作為this指向,后兩個(gè)參數(shù)分別為成功失敗回調(diào)
  16. if(called) return;
  17. called = true
  18. //因?yàn)榭赡躳romise中還有promise,所以需要遞歸
  19. resolvePromise(promise2,y,resolve,reject)
  20. },err=>{
  21. if(called) return;
  22. called = true
  23. //一次錯(cuò)誤就直接返回
  24. reject(err)
  25. })
  26. }else{
  27. //如果是個(gè)普通對(duì)象就直接返回resolve作為結(jié)果
  28. resolve(x)
  29. }
  30. }catch(e){
  31. if(called) return;
  32. called = true
  33. reject(e)
  34. }
  35. }else{
  36. //這里返回的是非函數(shù),非對(duì)象的值,就直接放在promise2的resolve中作為結(jié)果
  37. resolve(x)
  38. }
  39. }

它的作用是用來將onFufilled的返回值進(jìn)行判斷取值處理,把最后獲得的值放入最外面那層的Promise的resolve函數(shù)中。

  1. 參數(shù)promise2(then函數(shù)返回的Promise對(duì)象),x(onFufilled函數(shù)的返回值),resolve、reject(最外層的Promise上的resolve和reject)。
  2. 為什么要在一開始判斷promise2x?:首先在Promise/A+中寫了需要判斷這兩者如果相等,需要拋出異常,我就來解釋一下為什么,如果這兩者相等,我們可以看下下面的例子,第一次p2是p1.then出來的結(jié)果是個(gè)Promise對(duì)象,這個(gè)Promise對(duì)象在被創(chuàng)建的時(shí)候調(diào)用了resolvePromise(promise2,x,resolve,reject)函數(shù),又因?yàn)閤等于其本身,是個(gè)Promise,就需要then方法遞歸它,直到他不是Promise對(duì)象,但是x(p2)的結(jié)果還在等待,他卻想執(zhí)行自己的then方法,就會(huì)導(dǎo)致等待。

            
  1. let p1 = new Promise((resolve,reject)=>{
  2. resolve()
  3. })
  4. let p2 = p1.then(d=>{
  5. return p2
  6. })
  1. called是用來干嘛的?:called變量主要是用來判斷如果resolvePromise函數(shù)已經(jīng)resolve或者reject了,那就不需要在執(zhí)行下面的resolce或者reject。
  2. 為什么取then這個(gè)屬性?:因?yàn)槲覀冃枰ヅ袛鄕是否為Promise,then屬性如果為普通值,就直接resolve掉,如果是個(gè)function,就是Promise對(duì)象,之后我們就需要將這個(gè)x的then方法進(jìn)行執(zhí)行,用call的原因是因?yàn)閠hen方法里面this指向的問題。
  3. 為什么要遞歸去調(diào)用resolvePromise函數(shù)?:相信細(xì)心的人已經(jīng)發(fā)現(xiàn)了,我這里使用了遞歸調(diào)用法,首先這是Promise/A+中要求的,其次是業(yè)務(wù)場(chǎng)景的需求,當(dāng)我們碰到那種Promise的resolve里的Promise的resolve里又包了一個(gè)Promise的話,就需要遞歸取值,直到x不是Promise對(duì)象。

4.完善Promise

我們現(xiàn)在已經(jīng)基本完成了Promise的then方法,那么現(xiàn)在我們需要看看他的其他方法。

4.1 catch

相信大家都知道catch這個(gè)方法是用來捕獲Promise中的reject的值,也就是相當(dāng)于then方法中的onRejected回調(diào)函數(shù),那么問題就解決了。我們來看代碼。


            
  1. //catch方法
  2. catch(onRejected){
  3. return this.then(null,onRejected)
  4. }

該方法是掛在Promise原型上的方法。當(dāng)我們調(diào)用catch傳callback的時(shí)候,就相當(dāng)于是調(diào)用了then方法。

4.2 resolve/reject

大家一定都看到過Promise.resolve()、Promise.reject()這兩種用法,它們的作用其實(shí)就是返回一個(gè)Promise對(duì)象,我們來實(shí)現(xiàn)一下。


            
  1. //resolve方法
  2. Promise.resolve = function(val){
  3. return new Promise((resolve,reject)=>{
  4. resolve(val)
  5. })
  6. }
  7. //reject方法
  8. Promise.reject = function(val){
  9. return new Promise((resolve,reject)=>{
  10. reject(val)
  11. })
  12. }

這兩個(gè)方法是直接可以通過class調(diào)用的,原理就是返回一個(gè)內(nèi)部是resolve或reject的Promise對(duì)象。

4.3 all

all方法可以說是Promise中很常用的方法了,它的作用就是將一個(gè)數(shù)組的Promise對(duì)象放在其中,當(dāng)全部resolve的時(shí)候就會(huì)執(zhí)行then方法,當(dāng)有一個(gè)reject的時(shí)候就會(huì)執(zhí)行catch,并且他們的結(jié)果也是按著數(shù)組中的順序來排放的,那么我們來實(shí)現(xiàn)一下。


            
  1. //all方法(獲取所有的promise,都執(zhí)行then,把結(jié)果放到數(shù)組,一起返回)
  2. Promise.all = function(promises){
  3. let arr = []
  4. let i = 0
  5. function processData(index,data){
  6. arr[index] = data
  7. i++
  8. if(i == promises.length){
  9. resolve(arr)
  10. }
  11. }
  12. return new Promise((resolve,reject)=>{
  13. for(let i=0;i<promises.length;i++){
  14. promises[i].then(data=>{
  15. processData(i,data)
  16. },reject)
  17. }
  18. })
  19. }

其原理就是將參數(shù)中的數(shù)組取出遍歷,每當(dāng)執(zhí)行成功都會(huì)執(zhí)行processData方法,processData方法就是用來記錄每個(gè)Promise的值和它對(duì)應(yīng)的下標(biāo),當(dāng)執(zhí)行的次數(shù)等于數(shù)組長度時(shí)就會(huì)執(zhí)行resolve,把a(bǔ)rr的值給then。這里會(huì)有一個(gè)坑,如果你是通過arr數(shù)組的長度來判斷他是否應(yīng)該resolve的話就會(huì)出錯(cuò),為什么呢?因?yàn)閖s數(shù)組的特性,導(dǎo)致如果先出來的是1位置上的值進(jìn)arr,那么0位置上也會(huì)多一個(gè)空的值,所以不合理。

4.4 race

race方法雖然不常用,但是在Promise方法中也是一個(gè)能用得上的方法,它的作用是將一個(gè)Promise數(shù)組放入race中,哪個(gè)先執(zhí)行完,race就直接執(zhí)行完,并從then中取值。我們來實(shí)現(xiàn)一下吧。


            
  1. //race方法
  2. Promise.race = function(promises){
  3. return new Promise((resolve,reject)=>{
  4. for(let i=0;i<promises.length;i++){
  5. promises[i].then(resolve,reject)
  6. }
  7. })
  8. }

原理大家應(yīng)該看懂了,很簡單,就是遍歷數(shù)組執(zhí)行Promise,如果有一個(gè)Promise執(zhí)行成功就resolve。

Promise語法糖 deferred

語法糖這三個(gè)字大家一定很熟悉,作為一個(gè)很Swag的前端工程師,對(duì)async/await這對(duì)兄弟肯定很熟悉,沒錯(cuò)他們就是generator的語法糖。而我們這里要講的語法糖是Promise的。


            
  1. //promise語法糖 也用來測(cè)試
  2. Promise.deferred = Promise.defer = function(){
  3. let dfd = {}
  4. dfd.promise = new Promise((resolve,reject)=>{
  5. dfd.resolve = resolve
  6. dfd.reject = reject
  7. })
  8. return dfd
  9. }

什么作用呢?看下面代碼你就知道了


            
  1. let fs = require('fs')
  2. let Promise = require('./promises')
  3. //Promise上的語法糖,為了防止嵌套,方便調(diào)用
  4. //壞處 錯(cuò)誤處理不方便
  5. function read(){
  6. let defer = Promise.defer()
  7. fs.readFile('./1.txt','utf8',(err,data)=>{
  8. if(err)defer.reject(err)
  9. defer.resolve(data)
  10. })
  11. return defer.Promise
  12. }

沒錯(cuò),我們可以方便的去調(diào)用他語法糖defer中的Promise對(duì)象。那么它還有沒有另外的方法呢?答案是有的。我們需要在全局上安裝promises-aplus-tests插件npm i promises-aplus-tests -g,再輸入promises-aplus-tests [js文件名] 即可驗(yàn)證你的Promise的規(guī)范。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


我用這個(gè)極限推敲法,有效推進(jìn)視覺設(shè)計(jì)

資深UI設(shè)計(jì)者

每當(dāng)提到設(shè)計(jì)方法論時(shí),總難免會(huì)給人一種比較虛空偏理論,或者說比較難應(yīng)用到設(shè)計(jì)實(shí)戰(zhàn)中的感覺;但是這一次,經(jīng)過了自己的實(shí)踐之后,我覺得確實(shí)有一個(gè)比較靠譜的視覺推進(jìn)方法可以分享給大家,所以才有了這篇總結(jié)。

先直接概括一下這個(gè)方法,極限推敲法:遇到難題時(shí),先把問題拆解成一個(gè)或者幾個(gè)維度,選取某個(gè)維度,往兩個(gè)極端進(jìn)行嘗試,隨后逐漸中和極端方案,逐步找到自己想要的預(yù)期點(diǎn),明確該維度的方向。

一、使用方法

  • 第一步,提煉一個(gè)或者幾個(gè)關(guān)鍵維度,作為嘗試的方向;
  • 第二步,優(yōu)先嘗試兩端極限的方案;
  • 第三步,進(jìn)一步在其間琢磨并嘗試方案,直到找到符合預(yù)期的方案;
  • 第四步,若一直沒有滿意的方案,則可以繼續(xù)以某個(gè)方案為基準(zhǔn),精細(xì)微調(diào)方案進(jìn)行探索;
  • 第五步,得出最終方向,并最終調(diào)整形成終稿。

二、案例

例一:雄獅的logo設(shè)計(jì)

期望比較簡潔的同時(shí),又不能丟了獅子的辨識(shí)度,比較糾結(jié)的是,這個(gè)度該如何把握?

按照極限推敲法來,我們先確立「極簡」和「寫實(shí)」作為關(guān)鍵維度,然后優(yōu)先嘗試兩端比較極限的方案;了解清楚兩種極限的可能性之后,繼續(xù)嘗試,加減細(xì)節(jié),尋找一個(gè)符合預(yù)期的圖形狀態(tài);最后的定稿,既保持了鮮明的特征和辨識(shí)度,同時(shí)也不失簡潔。

(推進(jìn)過程中出方案的順序在圖中用數(shù)字標(biāo)出,「1」即為第一次嘗試,以此類推;具體推敲過程不在此贅述。)

例二:網(wǎng)易郵箱大師Tab icon改版設(shè)計(jì)

在網(wǎng)易郵箱大師5.0改版中,常駐底部的 Tab icon 是單獨(dú)進(jìn)行推敲優(yōu)化的。在之前的版本中,圖標(biāo)的樣式相對(duì)比較的刻板,偏向純表意,表現(xiàn)力不強(qiáng);在5.0視覺改版的策略中,我們是以「優(yōu)雅」作為一個(gè)關(guān)鍵方向進(jìn)行優(yōu)化的,所以軸的兩端就定為「刻板」和「優(yōu)雅」,雖然并不是完全對(duì)立的兩個(gè)方向,同時(shí)也包含了一些「表意」等其他層面的因素,但是其中有部分感受是存在對(duì)立面的,我們就以此作為關(guān)鍵點(diǎn)進(jìn)行推敲。

可以從圖中看出,在不影響表意的前提下,各方案間的圖標(biāo)改動(dòng)非常微小,在有限的空間內(nèi)去做一些變化;幾經(jīng)嘗試之后,還是選擇了更常規(guī)更偏表意優(yōu)先,但是也適當(dāng)加入曲線因素體現(xiàn)「優(yōu)雅」的方案作為最終方向。

例三:內(nèi)容信息流列表設(shè)計(jì)

期望內(nèi)容列表的展示能給人以精品的感覺,但又不失去過多的閱讀效率。

首先確立以信息量的多少作為關(guān)鍵維度,在形成了初步的樣式之后,繼續(xù)調(diào)整在一屏內(nèi)條目的疏密以及排版來感知信息量的多少;在嘗試之后,最終討論決定,在初期內(nèi)容源還不夠「精」的情況下,還是最右側(cè)方案的信息呈現(xiàn)更為合適,并以此做了最終調(diào)整。

三、方法原理

很多時(shí)候,極端情況是很難想象或者預(yù)判出來的,只有嘗試之后,才能更清楚的了解到實(shí)際會(huì)出來什么效果,達(dá)到怎樣的預(yù)期;在多次推敲之后,就能更好的了解期望的狀態(tài)到底應(yīng)該在哪個(gè)「位置」,讓模糊的概念逐漸變得清晰;該方法最大的好處在于,讓嘗試變的更有目標(biāo),而不是胡亂嘗試,讓每一次嘗試都更有意義。

這個(gè)方法也算是視覺標(biāo)準(zhǔn)可量化的一次探索,我稱之為「?jìng)瘟炕?,因?yàn)樽詈蟮臎Q策仍然是依靠感官去衡量判斷的;把錯(cuò)綜復(fù)雜的感官拆解成一些更具體單一的關(guān)鍵維度也是非常關(guān)鍵的一個(gè)步驟,是開始「?jìng)瘟炕沟那疤帷?

四、適用場(chǎng)景

在以上所舉的例子中,有 logo設(shè)計(jì),icon設(shè)計(jì)和界面設(shè)計(jì)(所用到的例子都是實(shí)戰(zhàn),均為過往項(xiàng)目);其實(shí)對(duì)象可以是各種各樣的設(shè)計(jì),只要存在某種程度把握上的糾結(jié),無法預(yù)判或者不明確方向的情況,都可以通過這個(gè)方法有效的推進(jìn)并找到當(dāng)下的最優(yōu)解。在實(shí)戰(zhàn)中,假如沒有那么多的時(shí)間和精力去細(xì)化,可以僅選取關(guān)鍵維度,然后在關(guān)鍵維度內(nèi)嘗試方向探索性的方案(粗略的嘗試),只要能感受到差異,即是有效的方案;當(dāng)然如果有充足的時(shí)間,那完全可以精細(xì)化出方案,這樣方案所傳達(dá)的感受也會(huì)更加精準(zhǔn)細(xì)致。

五、誤區(qū)

要注意的是,這個(gè)方法并不是一種妥協(xié)的方式,也不是一種擇中方案;我們所要尋找的是在一個(gè)維度中感受符合預(yù)期的位置,如果適合,也可以是非常激進(jìn)的方案。

六、注意事項(xiàng)

這個(gè)方法只是提供了一種思路,如何更有效的嘗試方案來推進(jìn)視覺產(chǎn)出的思路;其中最主要的環(huán)節(jié)還是靠自己去摸索出方案的實(shí)踐部分,去實(shí)打?qū)嵉膰L試;在這其中投入精力的多少,也受其他客觀因素的影響,例如項(xiàng)目截止時(shí)間等等;不過我認(rèn)為個(gè)人的主觀能動(dòng)性才是主導(dǎo),一定不能懶,要作圖,要?jiǎng)悠饋?,僅靠憑空想象方案在腦中「出圖」,一來說服不了別人,二來自己也底氣不足。只要圖形圖像語言一直存在,那么我覺得對(duì)視覺設(shè)計(jì)師來說有一句話就是永遠(yuǎn)的真理:沒圖說個(gè)XX。

智能汽車UI與手機(jī)UI的設(shè)計(jì)區(qū)別

藍(lán)藍(lán)設(shè)計(jì)的小編

隨著特斯拉智能電動(dòng)汽車憑借其全新的電動(dòng)能源和智能化的大屏操作系統(tǒng)在全球的走紅。在中國也引起了強(qiáng)烈的蝴蝶效應(yīng),小鵬汽車,蔚來汽車和威馬汽車等主打互聯(lián)網(wǎng)智能的汽車應(yīng)運(yùn)而生。在新的一年汽車UI可能會(huì)成為下一個(gè)設(shè)計(jì)熱點(diǎn)。

么去控制瀏覽器對(duì)資源文件的處理行為

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

通常當(dāng)用戶打開一個(gè)資源的url,如果瀏覽器支持這個(gè)格式的文件的情況下,瀏覽器會(huì)嘗試去再頁面里展示它而不是直接下載。例如一張圖片(jpg, png, gif等),幾乎所有瀏覽器都會(huì)去將圖片在瀏覽器里面展示。


對(duì)于壓縮格式的文件(zip, tar, gzip等)瀏覽器總是會(huì)直接去下載它們,另外一些格式的文件,根據(jù)瀏覽器的不同也會(huì)有差異的處理方法,例如Microsoft Word文件(doc, docx)在ie瀏覽器下通常會(huì)在瀏覽器中展示,但是其他瀏覽器幾乎都會(huì)直接下載它,同樣的對(duì)于PDF文件chrome有自己的pdf 轉(zhuǎn)換器它會(huì)嘗試去在瀏覽器上展示該文件。

強(qiáng)制下載文件

對(duì)于瀏覽器這種行為,一般情況下是可以接受的,因?yàn)橛脩艨梢栽跒g覽器顯示文件后將文件保存到電腦中,但是一些情況下用戶可能希望文件直接被下載而不是在瀏覽器中被打開,比如有時(shí)候用戶想去下載一個(gè)歌曲,但是瀏覽器可能回去播放該音頻。那么怎么讓瀏覽器強(qiáng)制去下載文件要怎么做呢

a標(biāo)簽的download屬性

html5中 a 標(biāo)簽新增了 download 屬性,該屬性指示瀏覽器下載url的內(nèi)容而不是導(dǎo)航到url,因此如果配置了此屬性用戶會(huì)直接下載url的內(nèi)容。作為開發(fā)如果想直接觸發(fā)該事件我們可以直接用代碼模擬a標(biāo)簽和點(diǎn)擊事件


    
  1. const link = document.createElement('a');
  2. link.addEventListener('click', function() {
  3. link.download = xxx;
  4. link.href = xxx;
  5. });
  6. const e = document.createEvent('MouseEvents');
  7. e.initEvent('click', false, false);
  8. link.dispatchEvent(e);
  • download屬性只在同域時(shí)候有效,當(dāng)跨域請(qǐng)求時(shí)候該屬性將會(huì)被忽略。
  • 當(dāng)前并非所以瀏覽器都支持該屬性,需要瀏覽器考慮兼容性。

改變資源格式

瀏覽器會(huì)根據(jù)資源類型去判斷是否支持,如果支持時(shí)會(huì)嘗試去在頁面上展示該資源。瀏覽器判斷資源類型是根據(jù)返回頭Content-Type的值,因此一方面我們?cè)诜?wù)端可以設(shè)置返回頭字段為文件流'Content-Type': 'application/octet-stream',或者根據(jù)一些具體資源直接壓縮后傳輸,瀏覽器不能分析zip之類的壓縮文件所以會(huì)直接去下載它們。

配置Content-Disposition

在HTTP場(chǎng)景中,Content-Disposition 消息頭指示回復(fù)的內(nèi)容該以何種形式展示,是以內(nèi)聯(lián)的形式(即網(wǎng)頁或者頁面的一部分),還是以附件的形式下載并保存到本地。

  • inline 默認(rèn)參數(shù)表示消息體會(huì)以頁面的一部分或者整個(gè)頁面的形式展示。
  • attachment 消息體應(yīng)該被下載到本地,將參數(shù)filename的值預(yù)填為下載后的文件名

因此當(dāng)我們希望該資源被直接下載時(shí)候,我們可以設(shè)置返回頭Content-Disposition的值為attachment


    
  1. //example
  2. Content-Disposition: attachment; filename="fname.ext"

這里設(shè)置名稱時(shí)候,要注意下filename的編碼格式。

用戶自己在瀏覽器設(shè)置

瀏覽器既然定義了該行為,根據(jù)瀏覽器的不同用戶可能在設(shè)置頁面去配置某些格式的文件是否希望瀏覽器去展示該文件。一些有爭議的情況下,你也可以提示用戶自己根據(jù)需求去設(shè)置這些參數(shù)。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


設(shè)計(jì)師如何洞察需求本質(zhì),做出一稿過的設(shè)計(jì)?

資深UI設(shè)計(jì)者

本文主要從需求類型、表現(xiàn)形式、如何做正確設(shè)計(jì)來分析,設(shè)計(jì)師應(yīng)如何洞察需求本質(zhì)?如何做正確的設(shè)計(jì)?

前言:設(shè)計(jì)師的痛

有這樣兩種情況在設(shè)計(jì)師工作中經(jīng)常會(huì)遇到:業(yè)務(wù)方改來改去,經(jīng)過幾十遍的修改最終選了第一稿;一群非專業(yè)的人或領(lǐng)導(dǎo)在設(shè)計(jì)師身邊指來指去,出發(fā)點(diǎn)都是「我覺得」主觀感受,沒一個(gè)能提出有點(diǎn)含金量的意見。

  • 客戶或業(yè)務(wù)反復(fù)改
  • 眾人指點(diǎn)江山

實(shí)際工作里我們經(jīng)常遇到業(yè)務(wù)方一直在針對(duì)幾個(gè)問題要求設(shè)計(jì)師在不停修改 :顏色、大小、氛圍等。但是卻很少看到設(shè)計(jì)師跟業(yè)務(wù)方溝通設(shè)計(jì)結(jié)果出現(xiàn)的場(chǎng)景?是為了達(dá)到什么目標(biāo)?導(dǎo)致設(shè)計(jì)師一直處于不?!父母母摹沟目啾茽顟B(tài)。

本篇文章內(nèi)容為:設(shè)計(jì)師如何洞察需求本質(zhì)?如何做正確的設(shè)計(jì)?

一、設(shè)計(jì)對(duì)接的需求來源類型

設(shè)計(jì)師在工作中接觸到的需求一般分為三類:業(yè)務(wù)需求、用戶需求、產(chǎn)品功能需求。

1. 業(yè)務(wù)需求

業(yè)務(wù)需求是指產(chǎn)品和公司為了實(shí)現(xiàn)商業(yè)目標(biāo)產(chǎn)生的需求。不以結(jié)婚為目的的談戀愛就是耍流氓,不以賺錢為目的的產(chǎn)品也是耍流氓,說來說去最終目的都是為了實(shí)現(xiàn)商業(yè)價(jià)值。

業(yè)務(wù)需求多數(shù)來源老板、公司戰(zhàn)略、運(yùn)營策略等,一般圍繞如何提升公司銷售額度、如何提升用戶量、如何提升利潤、如何提升用戶轉(zhuǎn)化、如何推廣運(yùn)營等等。

2. 用戶需求

用戶需求是指通過調(diào)研或客服投訴搜集到的用戶反饋,一般來源于用戶在使用產(chǎn)品過程中的需求。在 kano模型中對(duì)用戶需求一般分為:基本需求、期望需求、魅力需求、無差異需求、逆向需求。針對(duì)這些需求公司都會(huì)結(jié)合發(fā)展戰(zhàn)略與優(yōu)先級(jí)去分析,可分為必做、應(yīng)做、可做、不做。

3. 產(chǎn)品功能需求

基于業(yè)務(wù)和用戶價(jià)值進(jìn)行需求分析的結(jié)果,為滿足業(yè)務(wù)和用戶提出的一組產(chǎn)品功能列表,功能需求構(gòu)成了一個(gè)完整的產(chǎn)品抽象模型,是團(tuán)隊(duì)之間進(jìn)行產(chǎn)品設(shè)計(jì)研發(fā)的基礎(chǔ)。

二、三類需求常見的表現(xiàn)形式

1. 業(yè)務(wù)需求常見形式

這有個(gè)萬能的公式:銷售額=流量x客單價(jià)x轉(zhuǎn)化率

拿某某購物中心舉個(gè)例子:銷售額就是我們聽到的某某購物中心在五一期間賣了xxx億的額度,流量就是五一期間有多少顧客進(jìn)來了這個(gè)購物中心,客單價(jià)就是額度除以購買人數(shù),轉(zhuǎn)化率是訂單除以訪客。在同等訪客量的情況下訂單越低,轉(zhuǎn)化率越低。

這個(gè)公式換到互聯(lián)網(wǎng)產(chǎn)品中也一樣,多少用戶進(jìn)入 app,有多少人產(chǎn)生購買行為,以及每個(gè)人購買的單價(jià),這些因素都是決定這個(gè)產(chǎn)品最終的銷售額。

業(yè)務(wù)需求是流量增長

在產(chǎn)品發(fā)展初期,面臨的第一個(gè)問題就是訪問量,也就是產(chǎn)品的曝光率,用戶到達(dá)率。我們?cè)谏钪袝?huì)經(jīng)常看到一些公司請(qǐng)一些自帶流量的網(wǎng)紅、明星來做宣傳為公司帶來一些流量。在互聯(lián)網(wǎng)產(chǎn)品中常見的一些流量增長的策劃為拉新獎(jiǎng)勵(lì)、高流量為低流量導(dǎo)流、免費(fèi)效應(yīng)等。

拉新獎(jiǎng)勵(lì):推薦有獎(jiǎng)、注冊(cè)有獎(jiǎng)。

導(dǎo)流:高流量為低流量導(dǎo)流。

免費(fèi):0元購、秒殺等。

業(yè)務(wù)需求是活躍度

產(chǎn)品活躍度是指用戶每天開啟 app 的頻次,每天停留的時(shí)間。不同屬性的產(chǎn)品活躍度的規(guī)律也不一定,比如:新聞?lì)悺⒗碡?cái)類、工具類的產(chǎn)品,針對(duì)不同用戶、不同屬性的產(chǎn)品提升活躍度的方式不一樣。

比較常見的提升活躍度的策略是:獎(jiǎng)勵(lì)刺激、有價(jià)值的內(nèi)容吸引、通過成長等級(jí)來引起用戶參與。

獎(jiǎng)勵(lì):補(bǔ)貼、答題獎(jiǎng)勵(lì)、分享得積分、返現(xiàn)金、簽到、打卡獎(jiǎng)勵(lì)。

內(nèi)容:推送激活、話題討論、焦點(diǎn)&熱點(diǎn)內(nèi)容。

榮譽(yù)感:排行榜、等級(jí)。

業(yè)務(wù)需求是用戶留存

經(jīng)過運(yùn)營渠道推廣流量提升后,倒入一些新用戶,用戶經(jīng)過一段時(shí)間體驗(yàn)后是否留存關(guān)鍵在于:用戶需求被滿足、以及體驗(yàn)流程流暢決定的。當(dāng)用戶發(fā)現(xiàn)產(chǎn)品對(duì)自己沒有價(jià)值、體驗(yàn)沒有好感就會(huì)選擇離開。

比較常見的留存策略是:翻倍獎(jiǎng)勵(lì)、產(chǎn)品體驗(yàn)迭代優(yōu)化、評(píng)分、用戶成長體系等。

業(yè)務(wù)需求是品牌感知

用戶對(duì)同類產(chǎn)品的選擇很大程度取決于產(chǎn)品品牌的影響力,業(yè)務(wù)方在推廣中也會(huì)有針對(duì)品牌提升感知力。

比較常見的有:h5的情感推廣、公益活動(dòng)等。

網(wǎng)易的h5活動(dòng)在2017年經(jīng)常刷爆全屏,他們主打的是情感系列,深入人心,不僅提升主品牌影響,也提升了用戶對(duì)網(wǎng)易噠噠的產(chǎn)品感知。

小結(jié):業(yè)務(wù)需求設(shè)計(jì)要點(diǎn)

  • 用戶感知:在設(shè)計(jì)中對(duì)設(shè)計(jì)表現(xiàn)要處理好文案層級(jí)關(guān)系/視覺氛圍吸引度/提升用戶注意力。
  • 效果目標(biāo):要考慮業(yè)務(wù)需求的目標(biāo)是什么,通過什么形式(創(chuàng)意/用戶記憶/內(nèi)容價(jià)值)達(dá)到拉新、留存、流量的目的。
  • 數(shù)據(jù)推導(dǎo):通過數(shù)據(jù)可以讓我們理性分析出用戶關(guān)注點(diǎn)是什么?
2. 用戶需求常見形式

對(duì)于用戶提出的一些功能的需求,設(shè)計(jì)師不能盲目聽從,需要真正去識(shí)別有用的用戶、有價(jià)值的需求。我們可以通過一些調(diào)研、觀察,分析用戶的特征、習(xí)慣、場(chǎng)景和行為,以及期望得到什么效果,挖掘用戶的內(nèi)在動(dòng)機(jī)和原因,只有搞明白了用戶需求的本質(zhì),才有可能做出用戶滿意的產(chǎn)品。

KANO模型定義了五類需求,我主要針對(duì)下面3類經(jīng)常遇見的說下,也可以分為3個(gè)步驟去做:基本需求 — 期望需求 — 魅力需求。

用戶基本需求

指用戶認(rèn)為產(chǎn)品必須要有的屬性或者功能,比如:購買流程的完整體驗(yàn)、完整注冊(cè)流程,這些基本需求一般來源產(chǎn)品初期迭代中的優(yōu)化完善。

用戶期望需求

用戶在主流程體驗(yàn)過程中增加一些利于自己快捷、便利的需求,這些功能并不影響主流程體驗(yàn),比如:購買過程中對(duì)收藏、歷史價(jià)格對(duì)比、搜索等,這些期望需求可以轉(zhuǎn)化成一些潛在的競(jìng)爭優(yōu)勢(shì)。

例如:下圖用戶需求搜集中用戶集中在對(duì)歷史價(jià)位走勢(shì)、提醒等功能的一些期望需求上。

△ 根據(jù)用戶期望需求調(diào)整的設(shè)計(jì)構(gòu)思

用戶興奮魅力需求

魅力需求是每一個(gè)產(chǎn)品追尋的方向,給用戶帶來一些超越他們預(yù)期的體驗(yàn)??梢岳斫鉃樵跐M足用戶的基本需求、期望需求的基礎(chǔ)上給用戶創(chuàng)造附加價(jià)值體驗(yàn),屬于創(chuàng)新設(shè)計(jì)思維范圍,可以提升好感及忠誠度。比如:京東推出vr口紅試妝體驗(yàn),天貓推出試裝直播等。

小結(jié):對(duì)用戶需求設(shè)計(jì)要點(diǎn)

  • 用戶集體共性體驗(yàn):在主流程上識(shí)別有價(jià)值用戶群體,角色化的用戶的共同特征,符合用戶基本功能流暢、無障礙體驗(yàn)。
  • 體驗(yàn)體驗(yàn)場(chǎng)景維度設(shè)計(jì):對(duì)用戶使用的場(chǎng)景考慮,設(shè)計(jì)符合用戶的習(xí)慣的操作。比如:課堂播放,用戶使用場(chǎng)景是碎片時(shí)間:通勤、吃飯、健身等場(chǎng)景下,用戶對(duì)產(chǎn)品期望是儲(chǔ)存、收聽便捷的期望體驗(yàn)。
  • 用戶情感維度設(shè)計(jì):超越用戶預(yù)期,帶來驚喜、共情。
3. 產(chǎn)品功能需求

注冊(cè)流程簡化

大量注冊(cè)資料讓用戶失去耐心,流程簡化提升新用戶流量。

漏斗數(shù)據(jù)下的流程轉(zhuǎn)化

在公司xx流程里,我們看到每個(gè)頁面的流失漏斗,發(fā)現(xiàn)用戶在購買決策「結(jié)果分析」那一步流失特別多,決定砍掉了介紹步驟,把之前5步改成三步?jīng)Q策。

這是一個(gè)非常妙的設(shè)計(jì):對(duì)用戶來說,直接觸達(dá)決策前的結(jié)果分析,用戶對(duì)結(jié)果的強(qiáng)感知轉(zhuǎn)化下一步操作,從數(shù)據(jù)來看這一步轉(zhuǎn)化率提高不少。

△ 公司實(shí)際創(chuàng)新項(xiàng)目不做露出具體頁面

留存

新用戶進(jìn)入 app 后,一般分為3個(gè)時(shí)期:振蕩期間、選擇期、穩(wěn)定期。震蕩期用戶流失較多,經(jīng)過一些市場(chǎng)對(duì)比后選擇留下的用戶會(huì)進(jìn)入一個(gè)穩(wěn)定期。一個(gè)用戶在產(chǎn)品內(nèi)留存越久,帶來的商業(yè)價(jià)值越高。

在產(chǎn)品體驗(yàn)流程中根據(jù)不同需求,策略也有不同。舉一個(gè) ofo 退押金例子:ofo 在不久前遭遇了資金問題,我在退押金這一流程體驗(yàn)中誤操作了多次,最主要問題就是信息引導(dǎo)。

△ 主流程中對(duì)用戶再三挽留

△ 主流程操作中弱化強(qiáng)需求信息

小結(jié):對(duì)功能需求設(shè)計(jì)要點(diǎn)

  • 統(tǒng)一、體驗(yàn):減少用戶頁面跳轉(zhuǎn),能1步完成不要放到3、4步完成。
  • 信息明確:在主流程中給用戶傳達(dá)正確信息關(guān)系,減少誤操作。
  • 數(shù)據(jù)驗(yàn)證可用性價(jià)值:通過數(shù)據(jù)觀察用戶行為,驗(yàn)證需求產(chǎn)生的價(jià)值。

四、如何從需求達(dá)到設(shè)計(jì)目標(biāo)

1. 需求到設(shè)計(jì)目標(biāo)的過程

在需求發(fā)起到設(shè)計(jì)目標(biāo)會(huì)經(jīng)過這樣幾個(gè)過程:羅列與信息搜集?深入挖掘?聚焦核心?創(chuàng)新發(fā)散?實(shí)現(xiàn)與落地。

這五步的節(jié)奏是:先發(fā)散 – 聚攏 – 再發(fā)散 – 聚攏。

羅列與信息搜集

  • 需求羅列:根據(jù)佐藤可士和整理術(shù),把需求按照類別、優(yōu)先級(jí)進(jìn)行。
  • 用戶調(diào)研:定性于定量調(diào)研結(jié)果得到用戶真正的訴求點(diǎn)。
  • 數(shù)據(jù)結(jié)果:通過數(shù)據(jù)結(jié)果能觀察用戶的行為特征。

深入挖掘

5w:what、when、wher、who、why這五步定位法,是讓設(shè)計(jì)師清楚需求的本質(zhì)與動(dòng)機(jī)。

聚焦核心:濾 — 煉 — 導(dǎo)

結(jié)合用研結(jié)果、數(shù)據(jù)結(jié)果、定位結(jié)果去除不重要、不必要的信息、提煉有價(jià)值的信息、導(dǎo)出核心關(guān)鍵。

創(chuàng)新發(fā)散

我們發(fā)現(xiàn)前三步是基于一些基礎(chǔ)方法論,讓設(shè)計(jì)師具備一些觀察用戶、分析用戶行為、洞悉本質(zhì)、同理心的訓(xùn)練,目的是讓我們把思維聚焦在核心的關(guān)鍵點(diǎn)上,而真正超越預(yù)期體驗(yàn)的來源于第4步創(chuàng)新設(shè)計(jì)思維。

  • 創(chuàng)新設(shè)計(jì)思維:通過發(fā)散尋找針對(duì)聚焦點(diǎn)不一樣的方案的突破口,很多創(chuàng)新思維來源于多人思維火花的碰撞。
  • 移情設(shè)計(jì):在發(fā)散后結(jié)合用戶情感的體驗(yàn),打造深入人心、愉悅的體驗(yàn)感受。
  • 技術(shù)可行性。

實(shí)現(xiàn)與落地

  • 草圖溝通;
  • 開發(fā)—測(cè)試;
  • 上線—迭代—優(yōu)化。

總結(jié):設(shè)計(jì)的道與術(shù)

  • 道:設(shè)計(jì)創(chuàng)新、價(jià)值觀、愿景。
  • 術(shù):思維方式、工作流程、洞察力、觀察、分析。

對(duì)于設(shè)計(jì)師,解決問題能力遠(yuǎn)高于單純作圖能力,而了解需求本質(zhì)是解決問題的前提條件,在沒有明確需求的動(dòng)機(jī)和目的,設(shè)計(jì)方向是迷茫的。洞察、分析是設(shè)計(jì)師的基本能力,勤于思考分析,做正確有價(jià)值的設(shè)計(jì)。

互聯(lián)網(wǎng)行業(yè)幾點(diǎn)意見

藍(lán)藍(lán)設(shè)計(jì)的小編

在這個(gè)國家領(lǐng)導(dǎo)人都在強(qiáng)調(diào)打造一個(gè)網(wǎng)絡(luò)強(qiáng)國的時(shí)代,互聯(lián)網(wǎng)行業(yè)無疑是大學(xué)畢業(yè)生入職最好的選擇?;ヂ?lián)網(wǎng)很大,很多傳統(tǒng)行業(yè)都在向互聯(lián)網(wǎng)轉(zhuǎn)型,如果抓住這個(gè)機(jī)遇,學(xué)習(xí)一技之能,那么你就將擁有撬動(dòng)地球的杠桿。

Javascrpit之打字機(jī)效果

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

今天來看看怎么實(shí)現(xiàn)炫酷的打字機(jī)效果。即把一段話一個(gè)字一個(gè)字的顯示出來。

效果圖:

實(shí)現(xiàn)思路:

首先規(guī)定好顯示字?jǐn)?shù)的速度即settimeout執(zhí)行間隔用來控制每個(gè)字之間輸出速度。再把判斷段落的總字?jǐn)?shù),循環(huán)段落總字?jǐn)?shù)來實(shí)現(xiàn)一個(gè)字一個(gè)字的輸出。

js代碼:


    
  1. var theNewsNum;
  2. var theAddNum;
  3. var totalNum;
  4. var CurrentPosion=0;
  5. var theCurrentNews;
  6. var theCurrentLength;
  7. var theNewsText;
  8. var theTargetLink;
  9. var theCharacterTimeout;
  10. var theNewsTimeout;
  11. var theBrowserVersion;
  12. var theWidgetOne;
  13. var theWidgetTwo;
  14. var theSpaceFiller;
  15. var theLeadString;
  16. var theNewsState;
  17. function startTicker(){
  18. // ------ 設(shè)置初始數(shù)值
  19. theCharacterTimeout = 50;//字符間隔時(shí)間
  20. theNewsTimeout = 2000;//新聞間隔時(shí)間
  21. theWidgetOne = "_";//新聞前面下標(biāo)符1
  22. theWidgetTwo = "-";//新聞前面下標(biāo)符
  23. theNewsState = 1;
  24. theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新聞總條數(shù)
  25. theAddNum = document.getElementById("incoming").children.AddNews.children.length;//補(bǔ)充條數(shù)
  26. totalNum =theNewsNum+theAddNum;
  27. theCurrentNews = 0;
  28. theCurrentLength = 0;
  29. theLeadString = " ";
  30. theSpaceFiller = " ";
  31. runTheTicker();
  32. }
  33. // --- 基礎(chǔ)函數(shù)
  34. function runTheTicker(){
  35. if(theNewsState == 1){
  36. if(CurrentPosion<theNewsNum){
  37. setupNextNews();
  38. }
  39. else{
  40. setupAddNews();
  41. }
  42. CurrentPosion++;
  43. if(CurrentPosion>=totalNum||CurrentPosion>=1){
  44. CurrentPosion=0;//最多條數(shù)不超過num_gun條
  45. }
  46. }
  47. if(theCurrentLength != theNewsText.length){
  48. drawNews();
  49. }
  50. else{
  51. closeOutNews();
  52. }
  53. }
  54. // --- 跳轉(zhuǎn)下一條新聞
  55. function setupNextNews(){
  56. theNewsState = 0;
  57. theCurrentNews = theCurrentNews % theNewsNum;
  58. theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
  59. theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
  60. theCurrentLength = 0;
  61. document.all.hottext.href = theTargetLink;
  62. theCurrentNews++;
  63. }
  64. function setupAddNews() {
  65. theNewsState = 0;
  66. theCurrentNews = theCurrentNews % theAddNum;
  67. theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
  68. theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
  69. theCurrentLength = 0;
  70. document.all.hottext.href = theTargetLink;
  71. theCurrentNews++;
  72. }
  73. // --- 滾動(dòng)新聞
  74. function drawNews(){
  75. var myWidget;
  76. if((theCurrentLength % 2) == 1){
  77. myWidget = theWidgetOne;
  78. }
  79. else{
  80. myWidget = theWidgetTwo;
  81. }
  82. document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
  83. theCurrentLength++;
  84. setTimeout("runTheTicker()", theCharacterTimeout);
  85. }
  86. // --- 結(jié)束新聞循環(huán)
  87. function closeOutNews(){
  88. document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
  89. theNewsState = 1;
  90. setTimeout("runTheTicker()", theNewsTimeout);
  91. }
  92. window.onload=startTicker;
藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

這7種廣泛存在的認(rèn)知偏差,影響了我們太多的決策

資深UI設(shè)計(jì)者

如今心理學(xué)和行為學(xué)已經(jīng)是UX和產(chǎn)品設(shè)計(jì)領(lǐng)域當(dāng)中諸多理論的來源和實(shí)踐的依據(jù),它們是UI/UX設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師的必修課。

系統(tǒng)的心理學(xué)和行為學(xué)的知識(shí),對(duì)于設(shè)計(jì)工作其實(shí)有著極為深刻的影響。用戶體驗(yàn)設(shè)計(jì)很大程度上是在心理學(xué)和行為學(xué)的研究基礎(chǔ)上逐漸進(jìn)化和發(fā)展起來的,對(duì)于想要深耕這一領(lǐng)域的設(shè)計(jì)而言,心理學(xué)和行為學(xué)是繞不開的必修課。

心理學(xué)和行為學(xué)早已并非是單獨(dú)存在的學(xué)科,它們和許多不同領(lǐng)域的知識(shí)交匯融合,圍繞著人性進(jìn)行多維度全方位的探討。如今我們所熟知的許多優(yōu)秀的產(chǎn)品,也大多從這些領(lǐng)域技汲取營養(yǎng),不少四兩撥千斤借力逆襲的成功案例,也往往借助的是這些深深植根于人性的杠桿。

這兩個(gè)宏大的命題并非簡單幾段話說得清楚,但是這當(dāng)中有許多有意思的現(xiàn)象,非常具有啟發(fā)性。許多植根于人性本能中的非理性心理和行為,在日常生活中主導(dǎo)著我們作出決策,有的是一些不易覺察的心理效應(yīng),有的僅僅是不算太顯著的認(rèn)知偏差,但是在設(shè)計(jì)和實(shí)際產(chǎn)品當(dāng)中運(yùn)用,則常常呈現(xiàn)出極為驚艷的效果。

對(duì)于這些心理學(xué)效應(yīng)和認(rèn)知偏差,設(shè)計(jì)人員需要在自身進(jìn)行決策時(shí)候盡量回避,避之不及確實(shí)會(huì)面臨車毀人亡的局面;在設(shè)計(jì)過程中,可以巧妙地將這些因素納入到考慮當(dāng)中來,因?yàn)樗鼈兺瑯涌梢杂绊懹脩簦蔀榍藙?dòng)產(chǎn)品打開局面的重要的契機(jī)。

幸存者偏差

幸存者偏差(Survivorship bias)雖然被稱為認(rèn)知偏差,但是實(shí)際上,它更接近于是一種邏輯謬誤下產(chǎn)生的一種錯(cuò)誤認(rèn)知。幸存者偏差指的是人往往會(huì)注意到某種經(jīng)過篩選之后所產(chǎn)生的結(jié)果,同時(shí)忽略了這個(gè)篩選的過程,而被忽略的過程往往包含著關(guān)鍵性的信息。

讀書無用論是一種最常見的幸存者偏差。讀書無用論中最多的說法是XX并沒有好好上學(xué)但是照樣掙大錢了,而XX努力讀書反而混得并不好。

這些個(gè)案并不涉及到具體數(shù)據(jù),從數(shù)據(jù)角度上來說,也不難解釋這種“主觀感受”的成因。根據(jù)第六次全國人口普查,大專及以上學(xué)歷的人口僅占總?cè)丝诘?.7%,高學(xué)歷者落魄更容易受到媒體的關(guān)注,而低學(xué)歷中的成功者也常常能夠吸引普通人的目光,即使低學(xué)歷人口中涌現(xiàn)的成功者的比例遠(yuǎn)低于高學(xué)歷者,由于基數(shù)差異,這個(gè)數(shù)值對(duì)比也是相當(dāng)可觀的。正是因?yàn)楹雎粤藬?shù)據(jù)中沉默的大多數(shù),讀書無用論這種錯(cuò)誤的觀點(diǎn)才“得以成立”。

槍擊案中的幸存者大多傷的是手和腳,那么是否要加強(qiáng)手腳的保護(hù)呢?實(shí)際的情況上,在軀干和頭部中槍的人,大都沒有挺過來,相反更加需要保護(hù)是軀干和頭部。就像能活著回來的戰(zhàn)斗機(jī)中彈的通常都是翅膀和機(jī)身,因?yàn)橐嬷袕椀拇蠖家呀?jīng)犧牲了。這個(gè)案例也許能夠幫你更好地理解幸存者偏差。

對(duì)于事件發(fā)展過程中篩選機(jī)制的忽視,容易讓人產(chǎn)生錯(cuò)誤的結(jié)論,從而導(dǎo)向錯(cuò)誤的方向,在設(shè)計(jì)決策過程中,出現(xiàn)這樣的過程中,極有可能是致命的。

在需求分析和調(diào)研過程中,如果忽視了幸存者偏差,很有可能搜集到的數(shù)據(jù),體現(xiàn)的僅僅知識(shí)少部分用戶的需求和想法,最終將偽需求和小眾需求當(dāng)作主要需求來作為設(shè)計(jì)易于,則可能讓產(chǎn)品從一開始就走向萬劫不復(fù)。

在搜集產(chǎn)品的用戶反饋信息的時(shí)候,也很容易遭遇幸存者偏差。絕大多數(shù)的用戶在正常使用產(chǎn)品的時(shí)候,如果沒有合理的觸發(fā)機(jī)制,或者產(chǎn)品沒有特別突出的特點(diǎn)的情況下,很少會(huì)主動(dòng)“好評(píng)”,相反,遭遇問題的用戶則更傾向于主動(dòng)吐槽并分享糟糕的體驗(yàn)和問題,這也很容易造成“這個(gè)產(chǎn)品哪哪兒都是問題”的錯(cuò)覺。

基本歸因偏差

基本歸因偏差這個(gè)名詞同樣源自于心理學(xué),比較學(xué)術(shù)表述是“對(duì)他人行為進(jìn)行歸因的時(shí)候,往往會(huì)傾向于把別人的行為歸因?yàn)槠鋬?nèi)在因素,而低估了情境因素的影響,而對(duì)于自身的行為歸因的時(shí)候,則傾向于把自己的行為歸因?yàn)橥庠谝蛩?,而忽略自身因素的影響”,基本歸因偏差的含義表述可能有點(diǎn)拗口,但是并不難理解。

基本歸因偏差是一種重要的人類心理防御機(jī)制,是人類進(jìn)化過程中所產(chǎn)生的一種局限性的思維定勢(shì)。和復(fù)雜多樣的環(huán)境因素相比,行為者本身的問題是更容易被發(fā)現(xiàn)的,所以觀察者在觀察行為者的時(shí)候,諸如社會(huì)環(huán)境、社會(huì)角色、情景壓力等外部因素更難以引起注意,將問題更多歸因于行為者本身的行為舉動(dòng)和個(gè)人內(nèi)因。比如,當(dāng)看到某個(gè)人生活拮據(jù)的時(shí)候,會(huì)簡單歸因于他不夠勤奮等等。類似的,在面對(duì)生活中的諸多不順的時(shí)候,直接歸因于“水逆”而很少會(huì)仔細(xì)思考是否有自身的原因。當(dāng)事人和觀察者對(duì)于事件的歸因不同,爭議和問題往往因此而起。

對(duì)于UX設(shè)計(jì)師而言,基本歸因偏差是矛盾和問題的常見的來源,而且這種認(rèn)知偏差存在于用戶也同樣存在于設(shè)計(jì)師本身。無論是面對(duì)設(shè)計(jì)問題,還是做調(diào)研,進(jìn)行測(cè)試,涉及到多方面影響因素的時(shí)候,基本歸因偏差都會(huì)對(duì)設(shè)計(jì)方案、設(shè)計(jì)決策產(chǎn)生影響。

這需要設(shè)計(jì)師能夠清楚地分辨“我的觀點(diǎn)”和“我的行為”,能夠真正將自己從自己所處的立場(chǎng)、角色、職能上抽離出來,復(fù)盤整個(gè)局面,首先接納全部的狀況和現(xiàn)實(shí),包括他人的想法、觀點(diǎn),先不去判斷對(duì)錯(cuò),而是先接納所有的狀況和全部的元素,明白事物的動(dòng)態(tài)變化過程,不再單一地去判斷,任何一個(gè)視角必然會(huì)存在一個(gè)立場(chǎng),它們是當(dāng)前事物諸多層面中的一方面而已。

面對(duì)復(fù)雜多變,但是因果清晰、逐步成長變化的事物,用動(dòng)態(tài)而全面的思維方式來看待,才能真正看清楚事物變化的軌跡,更有針對(duì)性地設(shè)計(jì),作出合理的決策。

后視偏見

后視偏見(Hindsight Bias)則是另外一種常見的認(rèn)知偏差,它指的是人在事情發(fā)生以后覺得自己在事情發(fā)生之前就已經(jīng)預(yù)測(cè)到結(jié)果了,實(shí)際上,他們并不如自己想象的那樣能夠準(zhǔn)確的進(jìn)行預(yù)測(cè)。這種行為在觀察者眼中常常會(huì)被稱為“馬后炮”。

后視偏見在很多人身上都存在,人的主觀性和記憶本身會(huì)造成這種偏差。對(duì)于設(shè)計(jì)工作者而言,厚實(shí)偏差的存在無疑是會(huì)帶來負(fù)面影響的。后視偏見會(huì)讓人沉迷于“我早就預(yù)料到了”這種感受當(dāng)中,相應(yīng)的無法真正從事件中真正汲取到有用的經(jīng)驗(yàn),也難于使用公平的眼光來評(píng)判客觀事物和他人,主觀上也很容易選擇性忽略許多客觀條件和事實(shí)。

后視偏見確實(shí)會(huì)給人帶來快感,相應(yīng)的,會(huì)在工作中影響決策的正確性和公平性,從而帶來潛在風(fēng)險(xiǎn)。糾正后視偏見的方法并不復(fù)雜,在確知事情結(jié)果之前,記錄下自己的想法,事后做驗(yàn)證,并統(tǒng)計(jì)成功與失敗的數(shù)據(jù)。

事件的結(jié)果并非是最好的判斷因素。在調(diào)整好認(rèn)知之后,對(duì)于事件和情況的過程和相關(guān)因素進(jìn)行相對(duì)全面的衡量,盡可能少的摻雜主觀情緒來進(jìn)行分析,這樣的決策的有效性會(huì)更強(qiáng)。

曝光效應(yīng)

曝光效應(yīng)(the exposure effect)也被稱為多看效應(yīng)(和多看這款應(yīng)用并沒有關(guān)系),接觸效應(yīng)。曝光效應(yīng)本身的描述也不復(fù)雜:人會(huì)更加偏好自己熟悉的事物。在社會(huì)心理學(xué)領(lǐng)域,曝光效應(yīng)的另外一個(gè)稱謂是“熟悉定律”,這可能更好理解。

自己總傾向于購買自己熟悉的品牌的產(chǎn)品,談戀愛的時(shí)候總會(huì)有繞不開的老同學(xué)和老朋友,這些都是曝光效應(yīng)之下的人類認(rèn)知偏差。我們常常說的“一旦接受了這個(gè)設(shè)定還挺帶感的”就是對(duì)于這一效應(yīng)的真實(shí)側(cè)寫。

曝光效應(yīng)在廣告行業(yè)、產(chǎn)品營銷和社交媒體有著天然的親和力,對(duì)于營銷人員、運(yùn)營人員、品牌設(shè)計(jì)師和UX設(shè)計(jì)師而言,這一效應(yīng)的活學(xué)活用是非常有必要的。

不過曝光效應(yīng)本身并非是無條件的,相反它和產(chǎn)品屬性、品牌設(shè)計(jì)、企業(yè)形象以及運(yùn)營策略有著極為緊密的關(guān)聯(lián)。

曝光效應(yīng)在許多不同的社會(huì)實(shí)驗(yàn)當(dāng)中呈現(xiàn)出一種不穩(wěn)定性,可能是因?yàn)橄嚓P(guān)的影響因素多而復(fù)雜。有的研究表明,即使產(chǎn)品和服務(wù)曝光過程中絕大多數(shù)的內(nèi)容是正面的,公司和企業(yè)本身的名氣高低和品牌形象,同樣會(huì)影響曝光效應(yīng)的高低。

曝光效應(yīng)在發(fā)揮的過程中,即使曝光的內(nèi)容全部是正面的,對(duì)于用戶的影響也會(huì)逐步呈現(xiàn)出一種矛盾性,也就是用戶會(huì)對(duì)產(chǎn)品或者服務(wù)產(chǎn)生正面聯(lián)想的同時(shí),還會(huì)產(chǎn)生不利的、負(fù)面的感受。

曝光效應(yīng)發(fā)揮效果最好的時(shí)段,始終是絕大多數(shù)用戶對(duì)于產(chǎn)品認(rèn)知不足的階段,這個(gè)時(shí)候曝光效應(yīng)會(huì)最大化的對(duì)用戶產(chǎn)生影響。

值得特別注意的是,一開始就讓人覺得厭惡和不適的產(chǎn)品是無法產(chǎn)生正面的曝光效應(yīng)的,如果一開始存在沖突,曝光效應(yīng)只會(huì)加深誤會(huì)和沖突。過量的曝光一定會(huì)帶來厭惡,由于復(fù)雜而大量不可控的影響因素,甚至?xí)?dǎo)致失控式的崩盤。

對(duì)于UX設(shè)計(jì)師和產(chǎn)品的策劃和運(yùn)營者而言,在合適時(shí)機(jī)加大產(chǎn)品的正面曝光是有效度最高的策略。深入了解曝光效應(yīng),才會(huì)明白何時(shí)放,而何時(shí)收。

可得性偏差

可得性偏差(Availability Heuristic)也是一種常見的認(rèn)知偏差,它是啟發(fā)式偏差的一種,人們往往會(huì)根據(jù)自己認(rèn)知上的易得性來判斷事情的可能性,甚至于會(huì)根據(jù)自己看到和聽到的只言片語來做決策,而不是根據(jù)統(tǒng)計(jì)學(xué)數(shù)據(jù)和系統(tǒng)化的知識(shí)來做判斷。

可得性偏差同樣是一種廣泛存在的認(rèn)知偏差,用戶認(rèn)為自己熟悉的、更容易獲得的信息在復(fù)雜的系統(tǒng)中發(fā)揮著更大的作用,主觀上忽略其他的部分??傻眯云詈褪煜ざ桑ㄒ簿褪瞧毓庑?yīng))有些許共通的地方。

可得性偏差在金融領(lǐng)域有著巨大的影響,許多準(zhǔn)備上市的企業(yè)會(huì)在上市前夕吸引大量的新聞報(bào)道,讓投資者在信息的狂轟濫炸之下不知不覺地去關(guān)心,無意識(shí)地去了解,并最終購買這支股票拉高股價(jià)。這種策略就是借助投資者的可得性偏差來實(shí)現(xiàn)的。下面是谷歌搜索關(guān)鍵詞阿里巴巴的頻率和阿里巴巴的股價(jià)變化情況,兩者呈現(xiàn)出一種明顯的關(guān)聯(lián)性。

可得性偏差的廣泛存在,使得設(shè)計(jì)師甚至可以在自己的產(chǎn)品中借助有有意識(shí)的設(shè)計(jì),來引導(dǎo)用戶的行為。作為設(shè)計(jì)師本身而言,可得性偏差同樣是會(huì)影響到設(shè)計(jì)決策,因?yàn)榭傻眯云钔瑯訒?huì)影響產(chǎn)品設(shè)計(jì)中的設(shè)計(jì)決策的走向。消除可得性偏差的方法也不難,需要設(shè)計(jì)者不要被已知的信息和容易想起來的信息所左右,而是盡量深入地從多個(gè)角度來考慮問題,跳出固有的思維定勢(shì),多角度看待問題,作出合理的決策。

錨定效應(yīng)

錨定效應(yīng)也被稱為沉錨效應(yīng),它一樣是一個(gè)聽起來高大上但是含義并不復(fù)雜的概念,它指的是人們對(duì)某人某事作出判斷的時(shí)候,容易受到第一印象或者第一信息的影響和支配。這種現(xiàn)象就像船只被錨固定在特定位置而無法移動(dòng),因此而得名。

人們?cè)谧雠袛嗟臅r(shí)候,往往會(huì)受到第一印象和首個(gè)接收到的信息的影響。就像鳥類會(huì)將第一個(gè)看到的生物視之為自己的母親一樣,人們往往會(huì)借助第一印象來作為后續(xù)判斷一個(gè)事物的參考標(biāo)準(zhǔn),甚至在人際交往中都是金科玉律。即使是沒有刻意地去參考第一信息,人們也會(huì)在潛意識(shí)當(dāng)中,重視第一次獲得的數(shù)據(jù)。

錨定效應(yīng)的另外一個(gè)層面是對(duì)比,當(dāng)擁有了錨定的參考之后,用戶在后續(xù)會(huì)以此為基準(zhǔn)進(jìn)行對(duì)比。對(duì)比并不存在絕對(duì)意義上的好壞,但是在不同的基準(zhǔn)之下,或者說參考的基點(diǎn)不同的情況下,發(fā)揮的作用其實(shí)是截然不同的。

舉個(gè)簡單的例子,粥鋪的服務(wù)員問客人“加一個(gè)雞蛋還是加兩個(gè)雞蛋”比“要不要加雞蛋”所產(chǎn)生的銷售額高出不少,因?yàn)榍罢邥?huì)人的心理基點(diǎn)是“要加蛋”,而后一種問法,則讓客人先思考“要不加蛋”,前者的轉(zhuǎn)化率自然更高。

正是因?yàn)橄热霝橹鬟@種心理現(xiàn)象大量影響著用戶的決策,使得市場(chǎng)競(jìng)爭中,許多企業(yè)和產(chǎn)品都不得不去力圖爭個(gè)第一,贏得主導(dǎo)權(quán)。

iPhone X的劉海屏對(duì)于手機(jī)市場(chǎng)有多大影響想必大家有目共睹。而后續(xù)的藍(lán)綠兩廠的升降式攝像頭設(shè)計(jì)和“真·全面屏”也因?yàn)槠渫怀鲂院蛷?qiáng)大的“第一印象”的構(gòu)建,而贏得了無數(shù)贊譽(yù)。

但是靜下心來想想,開機(jī)解鎖還要等待攝像頭升起,好像還是一個(gè)蠻奇怪的事情??墒亲钤绲摹罢妗と嫫痢贝_實(shí)夠驚艷。

免費(fèi)認(rèn)知偏差

優(yōu)惠促銷是各種產(chǎn)品銷售中最常用到的一種策略,而在花樣迭出的促銷手段當(dāng)中,有為數(shù)不多的集中手段,呈現(xiàn)出令人驚艷的效果。

免費(fèi)的贈(zèng)品和滿額減免就是這其中的典型。購買產(chǎn)品A,贈(zèng)送一款B,這種贈(zèng)品策略的玩法可以說是效果極佳,早年間阿芙精油聲名鵲起的階段,其中最令用戶欲罷不能的,就是他們的“贈(zèng)品”。用戶每一次購買精油產(chǎn)品的時(shí)候,阿芙的團(tuán)隊(duì)會(huì)隨之一起發(fā)出精油的入門口袋書以及多達(dá)五六種精心挑選的精油試用裝,這種體貼且讓人覺得“狠賺一筆”的心理感受,使得許多新用戶迅速轉(zhuǎn)為穩(wěn)定客戶。

置于滿多少減多少,則同樣是一種成功的促銷策略。各種電商平臺(tái)和購物節(jié)都會(huì)采用花樣繁多的滿減服務(wù),相應(yīng)的,用戶在這種服務(wù)之下,總?cè)滩蛔 皽悊巍薄F叫亩?,真?shí)的情況是,用戶購買了自己真正需要的商品,以及一系列為了湊單而同時(shí)購買的非必須商品,對(duì)于商家和平臺(tái)而言,這種策略很好的拉高了銷量,也減少了許多商品的庫存,而用戶也感覺自己賺到了,皆大歡喜。

至于“包郵”,我就不贅述了。這個(gè)效果同樣非常突出。

相比之下,打折促銷所產(chǎn)生的效果,好像就沒有那么顯著和“暴力”了。歸根結(jié)底,問題是出在“免費(fèi)”的認(rèn)知偏差之上。對(duì)于用戶而言,無論是贈(zèng)品、滿減還是包郵,本質(zhì)上都會(huì)讓用戶迅速地在大腦中形成一種“免費(fèi)獲得某種東西”的感覺,贈(zèng)品對(duì)應(yīng)的是免費(fèi)的物品,滿減對(duì)應(yīng)的是免費(fèi)的現(xiàn)金回饋,包郵則是免費(fèi)的郵寄服務(wù)。

心理學(xué)家和行為學(xué)家通過大量的實(shí)驗(yàn)驗(yàn)證了免費(fèi)確實(shí)和折扣等其他的促銷策略有著本質(zhì)的差別,它所帶來的非理性行為要明顯太多,免費(fèi)的吸引力無與倫比,說是認(rèn)知偏差毫不為過。

你一定特別想點(diǎn)擊上面的圖片免費(fèi)下載素材。不好意思它只是個(gè)圖片。

人類本能地懼怕?lián)p失,選擇免費(fèi)的贈(zèng)品不會(huì)有損失,而相比之下選額其他則會(huì)讓人在潛意識(shí)中產(chǎn)生風(fēng)險(xiǎn)感,可能會(huì)蒙受損失。這樣一來,免費(fèi)的贈(zèng)品在人心中的價(jià)值就開始高于實(shí)際價(jià)值,隨之而來的就是非理性消費(fèi)。

在設(shè)計(jì)的過程中,想要讓免費(fèi)的認(rèn)知偏差發(fā)揮效果,讓人快速地感知到這種“免費(fèi)獲得”的感受,應(yīng)當(dāng)是明顯的,否則很難快速地觸發(fā)非理性的反饋。

結(jié)語

人類先天的生物性無處不在,我們自詡的理智在現(xiàn)實(shí)生活中發(fā)揮的作用并沒有我們想象中那么多,無處不在的各種認(rèn)知偏差主導(dǎo)了太多的

日歷

鏈接

個(gè)人資料

存檔