運(yùn)營(yíng)類活動(dòng)定義

運(yùn)營(yíng)類活動(dòng)是在某一段時(shí)間內(nèi)進(jìn)行的，有明確業(yè)務(wù)目標(biāo)（業(yè)務(wù)轉(zhuǎn)化、品牌傳播）及營(yíng)銷群體，依賴游戲化手段帶來(lái)優(yōu)秀用戶體驗(yàn)，從而獲得成功的一類活動(dòng)。

特征

1. 生命周期短

運(yùn)營(yíng)類活動(dòng)生命周期較短，常在某一段時(shí)間（可能是周期性的），一般跟隨時(shí)節(jié)熱點(diǎn)或者運(yùn)營(yíng)節(jié)奏來(lái)進(jìn)行。較短的生命周期給設(shè)計(jì)、開(kāi)發(fā)、數(shù)據(jù)等帶來(lái)較大挑戰(zhàn)，設(shè)計(jì)程式化提供基本設(shè)計(jì)思路，組件化降低設(shè)計(jì)成本。

2. 業(yè)務(wù)目標(biāo)明確

運(yùn)營(yíng)類活動(dòng)一般以產(chǎn)品營(yíng)銷、品牌運(yùn)營(yíng)為目標(biāo)，發(fā)放各類優(yōu)惠券大眾目標(biāo)用戶，從而帶來(lái)業(yè)務(wù)轉(zhuǎn)化，或者營(yíng)銷企業(yè)品牌，比如常見(jiàn)的年底 h5。

3. 有一定故事場(chǎng)景及氛圍

運(yùn)營(yíng)類活動(dòng)需要較強(qiáng)的故事場(chǎng)景。良好的場(chǎng)景設(shè)計(jì)、氛圍營(yíng)造可以帶來(lái)沉浸式的用戶體驗(yàn)，與用戶建立情感共鳴。從而提升用戶參與度、帶來(lái)好的業(yè)務(wù)轉(zhuǎn)化。

故事場(chǎng)景結(jié)合時(shí)節(jié)熱點(diǎn)，同時(shí)考慮活動(dòng)需要營(yíng)造的體感氛圍。

4. 人群細(xì)分

運(yùn)營(yíng)類活動(dòng)的特征在發(fā)起之初就有特殊的運(yùn)營(yíng)目的和特定特征的用戶群體。為實(shí)現(xiàn)最優(yōu)的業(yè)務(wù)轉(zhuǎn)化，需要在設(shè)計(jì)之初明確活動(dòng)覆蓋的用戶人群。同時(shí)在各個(gè)環(huán)節(jié)都能考慮到特定用戶群體的不同需求，尤其是在業(yè)務(wù)轉(zhuǎn)化的過(guò)程中，好的人群細(xì)分往往帶來(lái)事半功倍的效果。

5. 游戲化

引入游戲機(jī)制及游戲元素。

為什么有效

1. 場(chǎng)景化設(shè)計(jì)帶來(lái)沉浸體驗(yàn)

運(yùn)營(yíng)類活動(dòng)結(jié)合時(shí)節(jié)熱點(diǎn)，通過(guò)富有故事性的視覺(jué)傳達(dá)（插圖、動(dòng)效、聲音等設(shè)計(jì)元素）帶給用戶沉浸式的體驗(yàn)，與用戶建立情感共鳴，從而有效的鼓勵(lì)用戶行為。

沉浸體驗(yàn)的營(yíng)造對(duì)設(shè)計(jì)師提出了更高要求，可以從活動(dòng)設(shè)計(jì)的故事感、用戶代入感、產(chǎn)品互動(dòng)感、主體差異感幾個(gè)方面來(lái)思考入手。

2. 游戲化機(jī)制及元素

運(yùn)營(yíng)類活動(dòng)中廣泛應(yīng)用了游戲化機(jī)制和元素，它們是活動(dòng)成功的有效保障。設(shè)計(jì)時(shí)綜合考慮業(yè)務(wù)及用戶需求，從用戶動(dòng)機(jī)激勵(lì)、行為引導(dǎo)的角度出發(fā)，將運(yùn)營(yíng)活動(dòng)游戲化?？梢栽诨顒?dòng)參與深度的各個(gè)階段引導(dǎo)用戶操作，從而達(dá)成活動(dòng)目標(biāo)。以下列舉了運(yùn)營(yíng)活動(dòng)中常見(jiàn)的用戶動(dòng)機(jī)，后續(xù)我會(huì)從用戶參與路徑出發(fā)，盡可能詳細(xì)的描述在用戶參與的每一個(gè)階段起作用的為動(dòng)機(jī)，以及實(shí)現(xiàn)的手段。

大獎(jiǎng)帶來(lái)的誘因效應(yīng)

動(dòng)輒百萬(wàn)的大獎(jiǎng)獎(jiǎng)勵(lì)幾乎已經(jīng)成為運(yùn)營(yíng)活動(dòng)的標(biāo)配，在動(dòng)機(jī)理論中，用戶行為的產(chǎn)生來(lái)源于需要，需要導(dǎo)致內(nèi)驅(qū)力，引發(fā)行為，從而推動(dòng)用戶實(shí)現(xiàn)特定的目標(biāo)。當(dāng)目標(biāo)的誘惑力很大時(shí)，即使沒(méi)有內(nèi)部驅(qū)動(dòng)也能激發(fā)行為。這也是眾多運(yùn)營(yíng)類活動(dòng)大獎(jiǎng)存在的理由。

占便宜的心理

愛(ài)占便宜是人的本性，從心理學(xué)角度講，占便宜就像是額外得到的驚喜和獎(jiǎng)賞，可以讓人產(chǎn)生滿足感！用戶在這種心理作用下，會(huì)為了小利益去做出設(shè)計(jì)預(yù)設(shè)的行為，將業(yè)務(wù)需求設(shè)置在‘占便宜’的路徑中可有效提高參與、轉(zhuǎn)化率。比如在設(shè)計(jì)中用中獎(jiǎng)動(dòng)態(tài)彈幕來(lái)強(qiáng)化用戶參與的動(dòng)機(jī)，提高參與率。

有趣和好奇心

人天生具有好奇心，它幫助我們適應(yīng)不斷變化的環(huán)境、發(fā)現(xiàn)新的資源，是一種「無(wú)法抗拒」的行為動(dòng)機(jī)。在運(yùn)營(yíng)活動(dòng)中，用戶會(huì)被有趣的活動(dòng)頁(yè)面，未知的規(guī)則設(shè)計(jì)所吸引，從而開(kāi)始主動(dòng)「探索」。這也是用戶參與的動(dòng)機(jī)之一，設(shè)計(jì)中精致的 UI、有效的頁(yè)面信息傳達(dá)保證了用戶好奇的有效性。

即時(shí)反饋及階段性成就

「即時(shí)反饋」是沉迷現(xiàn)象發(fā)生的原因。學(xué)習(xí)之所以痛苦正是因?yàn)槠浞答佹溌诽L(zhǎng)，你只有在考試或者應(yīng)用到所學(xué)知識(shí)時(shí)才能獲得反饋，還有可能是負(fù)面的。在活動(dòng)設(shè)計(jì)中，每一次用戶操作都會(huì)有及時(shí)、細(xì)膩的反應(yīng)，可以給用戶帶來(lái)精神愉悅，同時(shí)設(shè)計(jì)的階段性成就又給用戶帶來(lái)成就感，用戶會(huì)不知不覺(jué)中在活動(dòng)中越走越遠(yuǎn)。

隨機(jī)獎(jiǎng)勵(lì)的多巴胺效應(yīng)

人類的本能熱衷于冒險(xiǎn)，隨機(jī)的、不確定的獎(jiǎng)勵(lì)能夠刺激大腦分泌多巴胺，帶來(lái)愉悅感，從而刺激用戶行為的重復(fù)。在活動(dòng)設(shè)計(jì)中，常用到這一理論，比如抽獎(jiǎng)機(jī)制。

所有權(quán)與擁有感

當(dāng)用戶感到他們擁有或控制某樣?xùn)|西時(shí)，會(huì)自然而然的強(qiáng)化它的屬性、發(fā)揮其價(jià)值。尤其是通過(guò)適當(dāng)?shù)母冻龊妥陨砼Γ脩暨€可能不合理的高估其價(jià)值。在活動(dòng)設(shè)計(jì)中，常使用戶通過(guò)易實(shí)現(xiàn)的行為獲得權(quán)益，通過(guò)「幸苦操作」強(qiáng)化了擁有感，提升其心理價(jià)值，從而促進(jìn)用戶對(duì)權(quán)益的使用。

稀缺性與用戶渴望

稀缺性的心理學(xué)原理在于人們想要獲得某樣?xùn)|西的原因僅僅是它太罕見(jiàn)，或者無(wú)法立刻獲得。它破滅了人們對(duì)情況的控制感，人們會(huì)為了重獲控制而采取行動(dòng)。設(shè)計(jì)時(shí)，可以利用這種心理鼓勵(lì)用戶做出期望的行為。常見(jiàn)的有時(shí)間限制、權(quán)利限制等。

使命感/社交影響/損失規(guī)避……

3. 數(shù)據(jù)與策略思維

運(yùn)營(yíng)類活動(dòng)中數(shù)據(jù)和策略思維是保證活動(dòng)效果最大化的有效手段?；顒?dòng)需求提出時(shí)，即考慮可能的參與用戶細(xì)分；活動(dòng)開(kāi)始時(shí)，考慮引流途徑和引流方式、物料的差異化；活動(dòng)進(jìn)行時(shí)，根據(jù)用戶細(xì)分策略化任務(wù)推送，根據(jù)埋點(diǎn)數(shù)據(jù)監(jiān)測(cè)積極調(diào)整相關(guān)設(shè)計(jì)元素。事無(wú)巨細(xì)才能確?；顒?dòng)成功。

文章來(lái)源：優(yōu)設(shè)

JavaScript基礎(chǔ)知識(shí)——JS預(yù)解析

js代碼是由瀏覽器中的JavaScript解析器來(lái)執(zhí)行的。JavaScript解析器在運(yùn)行JavaScript代碼時(shí)分為兩步：1預(yù)解析、2代碼執(zhí)行。



預(yù)解析

預(yù)解析是指js引擎會(huì)把js里面所有的var與function提升到當(dāng)前作用域的最前面。（這里的當(dāng)前作用域包括：全局作用域與局部作用域）。

預(yù)解析可分為：變量預(yù)解析和函數(shù)預(yù)解析

變量預(yù)解析：就是把所有的變量聲明提升到當(dāng)前的作用域的最前面但是不提升賦值操作。如下例所示：



<script>

console.log(num);  //結(jié)果為undefined

var num = 10;

</script>

//其實(shí)際執(zhí)行過(guò)程為

var num;

console.log(num);

num=10;



函數(shù)預(yù)解析：就是把所有的函數(shù)聲明提升到當(dāng)期作用域的最前面 但是不包括調(diào)用函數(shù)。如下例所示：



var num = 10

fun();

function fun() {   //結(jié)果是undefined

console.log(num);

var num = 20;

}

//其實(shí)際執(zhí)行過(guò)程為

var num;

funtion fun() {

var num;

console.log(num);

num=20;

}

num = 10;

fun();

在idea中使用jdbc往數(shù)據(jù)庫(kù)里儲(chǔ)存中文亂碼問(wèn)題

這里使用的數(shù)據(jù)庫(kù)是mysql。

ide為idea.

有時(shí)做一些web項(xiàng)目時(shí)需要往數(shù)據(jù)庫(kù)里面儲(chǔ)存中文，就是需要用到j(luò)dbc往數(shù)據(jù)庫(kù)里面儲(chǔ)存數(shù)據(jù)時(shí)，參數(shù)改為中文。可是儲(chǔ)存完之后，打開(kāi)sqlyog查詢又是???這樣子的亂碼



上網(wǎng)找了很多方法，數(shù)據(jù)庫(kù)的編碼問(wèn)題都改了，而且統(tǒng)一成utf-8了，但還是儲(chǔ)存時(shí)為亂碼。

后面檢查時(shí)在sqlyog里改中文又可以正常顯示。

這就說(shuō)明數(shù)據(jù)庫(kù)上是沒(méi)有問(wèn)題的，應(yīng)該是連接這塊，于是在連接的url上加入了參數(shù)就可以正常顯示了characterEncoding=UTF-8



這里使用的是c3p0的連接池，不同的連接池可以去對(duì)應(yīng)的配置文件中加上參數(shù)

在Vue中，用watch來(lái)響應(yīng)數(shù)據(jù)的變化，示例代碼如下，



第一種方式

<input type="text" v-model="userName"/>  

//監(jiān)聽(tīng)當(dāng)userName值發(fā)生變化時(shí)觸發(fā)

watch: {

userName (newName, oldName) {

console.log(newName)

}

}



第一種方式有一個(gè)缺點(diǎn)： 就是當(dāng)值第一次綁定的時(shí)候 不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有當(dāng)值改變的時(shí)候才會(huì)執(zhí)行。



如果我們想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽(tīng)函數(shù)，則需要設(shè)置immediate為true。比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來(lái)的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate設(shè)為true。



第二種方式

watch: {

userName: {

handler (newName, oldName) {

console.log(newName)

},

immediate: true

}

}



immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。



當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽(tīng)到變化，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。



第三種方式

<input type="text" v-model="cityName.name" />

data (){

return {

cityName: 

{

name:'北京',

location: '中國(guó)'

}

}

},

watch: {

cityName: {

handler(newName, oldName) {

console.log(newName)

},

immediate: true,

deep: true

}

}



注：監(jiān)測(cè)為對(duì)象的時(shí)候，newVal == oldVal



此時(shí)會(huì)給cityName的所有屬性都加上監(jiān)聽(tīng)函數(shù)，如果屬性較多時(shí)，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。如果只需要監(jiān)聽(tīng)對(duì)象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽(tīng)對(duì)象屬性：



watch: {

'cityName.name': {

handler(newName, oldName) {

console.log(newName)

},

immediate: true,

deep: true

}

}



數(shù)組的變化不需要深度監(jiān)聽(tīng);

在watch中不要使用箭頭函數(shù)，因?yàn)榧^函數(shù)中的this是指向當(dāng)前作用域.

首先讓我們了解一下前端路由：路由router全部配置在前端，根據(jù)用戶權(quán)限判斷可以進(jìn)入哪些頁(yè)面

缺點(diǎn)：



vue初始化的時(shí)候需要掛載全部路由，對(duì)性能有影響

安全性低，用戶可以在地址欄跳轉(zhuǎn)到無(wú)權(quán)訪問(wèn)的頁(yè)面（可優(yōu)化）

動(dòng)態(tài)路由則是根據(jù)用戶信息獲取權(quán)限，簡(jiǎn)單來(lái)說(shuō)就是根據(jù)用戶信息獲取其對(duì)應(yīng)的權(quán)限，生成對(duì)應(yīng)的路由掛載，然后動(dòng)態(tài)渲染有權(quán)限的菜單于側(cè)邊欄



實(shí)現(xiàn)

定義靜態(tài)路由（登錄或者公用頁(yè)面）、動(dòng)態(tài)路由，vue初始化時(shí)只掛載靜態(tài)路由

用戶登錄后，拿到用戶token，調(diào)接口拿到動(dòng)態(tài)路由權(quán)限D(zhuǎn)ynamicRoutes，將DynamicRoutes和定義的動(dòng)態(tài)路由比較，篩選出相應(yīng)的用戶可訪問(wèn)路由表

執(zhí)行router.addRoutes(DynamicRoutes)添加動(dòng)態(tài)路由

使用vuex存儲(chǔ)路由表，根據(jù)vuex中可訪問(wèn)的路由渲染側(cè)邊欄sidebar

// beforeEach中

if (getToken() && getToken() !== 'undefined') {

  // 權(quán)限判斷

  if (!store.state.app.menuPermissions) {

    / 獲取后臺(tái)給的權(quán)限數(shù)組 /

    return new Promise((resolve, reject) => {

      getPermissionList().then(response => {

        if (response.data.stat === 1) {

          const userRouter = response.data.data

          // 檢查并生成新的路由表

          const DynamicRoutes = ChecAndSetPermissionRouter(userRouter)

          // 默認(rèn)使/重定向到第一個(gè)有效的路由

          for (let i = 0, leni = DynamicRoutes.length; i < leni; i++) {

            if (DynamicRoutes[i].children.length > 0) {

              DynamicRoutes[i].path = '/'

              DynamicRoutes[i].redirect = DynamicRoutes[i].children[0].path

              break

            }

          }

          DynamicRoutes.push({ path: '', redirect: '/404', hidden: true }) // 全局404

          / 生成左側(cè)導(dǎo)航菜單 /

          store.dispatch('SetMenuPermissions', DynamicRoutes)



          /  動(dòng)態(tài)添加路由 /

          router.addRoutes(DynamicRoutes)



          // / 完整的路由表 /

          store.dispatch('SetRouterPemissions', [...constantRouterMap, ...DynamicRoutes])

          next(to)

        }

      }).catch(error => {

        router.push('/404')

        // / 生成左側(cè)導(dǎo)航菜單 */

        store.dispatch('SetMenuPermissions', [])

        next()

        reject(error)

      })

    })

  }

  if (to.path === '/login') {

    next({ path: '/' })

  } else {

    next()

  }

} else {

  if (whiteList.indexOf(to.path) !== -1) {

    next()

  } else {

    next(/login?redirect=${to.path}) // 否則全部重定向到登錄頁(yè)

  }

}



踩坑來(lái)了





Q：為什么404 頁(yè)面一定要最后加載，放置在靜態(tài)路由中會(huì)怎么樣？

放在靜態(tài)路由里，后面的所以頁(yè)面都會(huì)被攔截到404，所以應(yīng)該獲取動(dòng)態(tài)路由權(quán)限之后push

Q：權(quán)限獲取成功，不跳轉(zhuǎn)新生成的動(dòng)態(tài)路由，跳404？

beforeEach中router.addRoutes之后的next()可能會(huì)失效，因?yàn)榭赡躰ext()的時(shí)候路由并沒(méi)有完全add完成，可替換成next(to)，重新進(jìn)入router.beforeEach這個(gè)鉤子，這時(shí)候再通過(guò)next()來(lái)釋放鉤子，就能確保所有的路由都已經(jīng)掛在完成了。

Q：$router.addRoutes()動(dòng)態(tài)添加的路由怎么刪除掉？

在開(kāi)發(fā)中，有新增編輯刪除菜單并要求左側(cè)邊欄菜單及時(shí)更新的需求，如果直接addRoutes，warn如下：



解決：addRoutes之前要清除掉上次addRoutes的路由，所以操作菜單調(diào)取權(quán)限后重新初始化router，進(jìn)行matcher賦值



// DynamicRoutes是權(quán)限路由

const createRouter = () => new Router({

  mode: 'hash',

  routes: []

})

const newRouter = createRouter()

// resetRouter()

this.$router.matcher = newRouter.matcher

this.$router.addRoutes(DynamicRoutes)



Q：莫名其妙的無(wú)限循環(huán)

vue-admin-template，遇到二級(jí)菜單children為空的權(quán)限，報(bào)錯(cuò)如下：

解決：按照github-issues上方法，在SidebarItem.vue里改一下data就好了（沒(méi)想通為啥）



// 更改后如下，return {}

data() {

    this.onlyOneChild = null

    return {}

}



附：ChecAndSetPermissionRouter



import { dynamicRouterMap } from '@/router'



export function ChecAndSetPermissionRouter(permissionDatas) {

  // 獲取到權(quán)限hashmap

  var permissionHashMap = null

  permissionHashMap = GetPermissionHashMap(permissionDatas)

  // 標(biāo)記路由表

  var newDynamicRouterMap = []

  newDynamicRouterMap = objDeepCopy(dynamicRouterMap)

  newDynamicRouterMap.forEach(item => {

    MarkRouter(null, item, permissionHashMap)

  })

  // 重設(shè)路由表

  for (let i = 0; i < newDynamicRouterMap.length; i++) {

    if (ResetRouter(newDynamicRouterMap, newDynamicRouterMap[i])) {

      i-- // 注意：防止移除后索引錯(cuò)位

    }

  }

  return newDynamicRouterMap

}

function GetPermissionHashMap(permissionDatas) {

  var permissionHashMap = {}

  permissionDatas.forEach(item => {

    SetKeyValueOfNodes(null, item, permissionHashMap)

  })

  return Object.assign({}, permissionHashMap)

}



// 深拷貝，遞歸重新設(shè)置前端路由表，避免數(shù)據(jù)復(fù)用

function objDeepCopy(source) {

  var sourceCopy = source instanceof Array ? [] : {}

  for (var item in source) {

    sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]

  }

  return sourceCopy

}



// 為權(quán)限hashmap的屬性賦值,新增屬性tempKey/tempKey2

function SetKeyValueOfNodes(p, c, permissionHashMap) {

  // 需要匹配的組合類型

  var tempKey = (p ? p.name : 0) + '' + c.name

  var tempKey2 = c.name + '' + c.name

  // 賦值

  permissionHashMap[tempKey] = 1

  permissionHashMap[tempKey2] = 1

  // 遞歸遍歷子節(jié)點(diǎn)賦值

  if (c.children != null && c.children.length > 0) {

    c.children.forEach(item => {

      SetKeyValueOfNodes(c, item, permissionHashMap)

    })

  }

}



// 標(biāo)記路由表

function MarkRouter(p, c, permissionHashMap) {

  var key = (p ? p.meta.title : 0) + '_' + c.meta.title

  // 使用拼接的key作為參考標(biāo)記去匹配有權(quán)限的路由表

  if (HasPermission(key, permissionHashMap)) {

    if (p != null) {

      p.keep = true // 保留當(dāng)前節(jié)點(diǎn)

    }

    if (c != null) {

      c.keep = true

    }

  }

  if (c.children && c.children.length > 0) {

    c.children.forEach(item => {

      MarkRouter(c, item, permissionHashMap)

    })

  }

}



// 校驗(yàn)后端接口是否存在當(dāng)前節(jié)點(diǎn)

function HasPermission(key, permissionHashMap) {

  return permissionHashMap[key] === 1

}



// 重置路由表

function ResetRouter(p, c) {

  if (c == null) {

    return false

  }

  if (p.children && !c.keep) {

    p.children.splice(p.children.indexOf(c), 1)

    return true

  } else if (!c.keep) {

    p.splice(p.indexOf(c), 1)

    return true

  }

  if (c.children && c.children.length > 0) {

    for (let i = 0; i < c.children.length; i++) {

      if (ResetRouter(c, c.children[i])) {

        i-- // 注意：防止移除后索引錯(cuò)位

      }

    }

  }

  return false

}

最近在工作時(shí)發(fā)現(xiàn)了一件很有意思的事情，不知從何開(kāi)始，國(guó)內(nèi)外的設(shè)計(jì)需求分化非常明顯。國(guó)內(nèi)的公司在選擇產(chǎn)品平臺(tái)時(shí)，從幾年前的 PC 端網(wǎng)站，到如今已有大半的客戶考慮從小程序做起了。然而國(guó)外的創(chuàng)業(yè)者仍然以網(wǎng)頁(yè)為主，要說(shuō)變化，大抵是在需求中多要求了響應(yīng)式設(shè)計(jì)，以更好地適應(yīng)桌面與移動(dòng)雙端。

所以，今天我們無(wú)論坐在這里怎樣討論小程序的優(yōu)劣得失，都不可否認(rèn)的是，小程序確實(shí)給國(guó)內(nèi)市場(chǎng)帶來(lái)了顯著的影響，而且人們已經(jīng)逐漸接受，在產(chǎn)品初期，小程序是一個(gè)值得考慮的平臺(tái)。

但是到底小程序的市場(chǎng)是一片大好，還是只是一場(chǎng)危機(jī)四伏的狂歡？我將在本文中盡量以客觀的角度闡述，希望能夠給到各位設(shè)計(jì)師一些思考的方向。

同時(shí)，這幾個(gè)月來(lái)我參考了近 100 款小程序的設(shè)計(jì)模式，保留了500 張截圖和超過(guò) 10 分鐘的錄屏作為分析素材，來(lái)幫助那些想要邁入職場(chǎng)的設(shè)計(jì)師們，更好的上手小程序設(shè)計(jì)，不為信息和技術(shù)所桎梏。

小程序和App的區(qū)別

1. 開(kāi)發(fā)成本、開(kāi)發(fā)周期不一致

那么我們作為設(shè)計(jì)師，第一步需要了解的就是，究竟小程序和 App 之間有什么區(qū)別？作為設(shè)計(jì)師，應(yīng)該注意哪些問(wèn)題，這將是本篇文章前半部分的主要內(nèi)容。

從開(kāi)發(fā)成本看，小程序和 APP 有較大的區(qū)別。APP 開(kāi)發(fā)需要兩個(gè)版本來(lái)適應(yīng)不同操作系統(tǒng)的手機(jī)，產(chǎn)品開(kāi)發(fā)周期長(zhǎng)，開(kāi)發(fā)人力投入多，因此開(kāi)發(fā)成本高。而小程序只需要根據(jù)騰訊提供的開(kāi)發(fā)平臺(tái)就能進(jìn)行開(kāi)發(fā)，無(wú)需考慮手機(jī)操作系統(tǒng)的區(qū)別，一次開(kāi)發(fā)就能適配所有的機(jī)型，開(kāi)發(fā)周期短，開(kāi)發(fā)人力投入少，因此開(kāi)發(fā)成本低。

一款 App 從提出需求到上線，通常的開(kāi)發(fā)周期是 321 原則，即開(kāi)發(fā) 3 個(gè)月，測(cè)試調(diào)整 2 個(gè)月，試運(yùn)行 1 個(gè)月。而小程序開(kāi)發(fā)周期在2 周左右，甚至功能簡(jiǎn)單的 10 天內(nèi)即可上線使用，所以是一種相對(duì)快速的模式。

小程序由于依附于微信，所以我們其實(shí)只需要制作一稿設(shè)計(jì)便可適配絕大多數(shù)的手機(jī)，而不像 App 那樣，需要針對(duì)不同的手機(jī)進(jìn)行不同的適配。

事實(shí)上這是小程序相對(duì)于 App 的一個(gè)巨大的優(yōu)勢(shì)。在開(kāi)發(fā) App 時(shí)，很多企業(yè)在初創(chuàng)期，由于成本問(wèn)題不得不選擇到底是放棄Android 用戶還是 IOS 用戶。然而小程序只需要設(shè)計(jì)+開(kāi)發(fā)一次的成本，在理論上就獲得了全部微信用戶接觸到產(chǎn)品的機(jī)會(huì)。所以從這個(gè)角度考慮，小程序是非常節(jié)省成本的一種模式。

2. App需要設(shè)置大量的數(shù)據(jù)埋點(diǎn)，而小程序則不需要

微信第三方后臺(tái)已經(jīng)集合了諸多的數(shù)據(jù)供小程序方查看，在初級(jí)階段，這些數(shù)據(jù)已經(jīng)足夠產(chǎn)品作為更迭的基礎(chǔ)了。

沒(méi)有做過(guò)小程序的朋友可能不太了解，微信提供的不僅僅是數(shù)量全面的埋點(diǎn)，而是可以自定義埋點(diǎn)位置以及爬取數(shù)據(jù)類型的系統(tǒng)。甚至還自帶一些簡(jiǎn)單的分析系統(tǒng)，幫助運(yùn)營(yíng)人員更好的掌握小程序的總體運(yùn)營(yíng)情況。

除了已經(jīng)封裝好的數(shù)據(jù)監(jiān)控點(diǎn)，運(yùn)營(yíng)人員還可以自定義分析事件，這幾乎是一個(gè)可以達(dá)到「營(yíng)銷平臺(tái)」級(jí)別的分析系統(tǒng)了。

同時(shí)，簡(jiǎn)單明了的看版系統(tǒng)，也非常節(jié)省業(yè)務(wù)人員的數(shù)據(jù)清洗成本，的避免了開(kāi)發(fā)人員由于機(jī)械重復(fù)性的埋點(diǎn)工作而導(dǎo)致的主觀漏采與錯(cuò)采現(xiàn)象，這也是小程序的優(yōu)勢(shì)所在。

3. 小程序有依附于微信的信息共享機(jī)制

小程序與微信形成的信息共享，可以非常方便的達(dá)到獲客目的。例如注冊(cè)登錄機(jī)制，我們幾乎不需要自己手動(dòng)在小程序上進(jìn)行注冊(cè)登錄。直接通過(guò) Union ID 授權(quán)的方式，即可讓用戶用統(tǒng)一的注冊(cè)賬戶用遍所有的小程序。據(jù)測(cè)，用戶進(jìn)入小程序時(shí)，同意微信手機(jī)號(hào)碼授權(quán)的轉(zhuǎn)化率大致在 35%，相對(duì)來(lái)說(shuō)是一個(gè)非?？捎^的轉(zhuǎn)化率了。

除此之外，微信給小程序廠商提供了諸多接口，不僅僅是方便了小程序廠商，信息風(fēng)向更多的是能夠讓用戶更加快速便捷的在小程序中解決問(wèn)題。這一塊內(nèi)容會(huì)在之后章節(jié)中詳解。

什么樣的產(chǎn)品適合小程序

1. 具有社交裂變屬性

這類具有社交因子的小程序天生適合生存在微信的土壤中，通過(guò)微信龐大的社交流量助力優(yōu)質(zhì)社交小程序成為市場(chǎng)的爆品。比如拼多多、蘑菇街利用拼團(tuán)實(shí)現(xiàn)社交電商的突圍。比如小年糕+通過(guò)社交場(chǎng)景實(shí)現(xiàn)低成本快速獲客，從而獲得很好的傳播效果，實(shí)現(xiàn)短時(shí)間的大量用戶增長(zhǎng) 。

2. 垂直領(lǐng)域頭部

針對(duì)細(xì)分市場(chǎng)的小程序也容易受到傳播，比如汽車類小程序有多個(gè)排名靠前，用戶已經(jīng)把小程序當(dāng)做選車、購(gòu)車、用車的重要入口，因?yàn)閷儆诘皖l應(yīng)用，沒(méi)有必要下載一個(gè) app，如果切入的早，小程序場(chǎng)景的便利性就容易使其升到頭部。

3. 高頻場(chǎng)景喚醒產(chǎn)品

這些場(chǎng)景本身高頻發(fā)生且原有的體驗(yàn)流程存在資源損耗，小程序優(yōu)化解決了很多商家和用戶的痛點(diǎn)。 比如 KFC 小程序解決等位排隊(duì)、點(diǎn)餐、買單付費(fèi)、發(fā)放優(yōu)惠券、客戶消費(fèi)分析、基于 LBS 的信息推送等問(wèn)題，比如視頻、直播、K 歌等娛樂(lè)小程序因?yàn)檩p應(yīng)用的特點(diǎn)給了用戶娛樂(lè)多樣化的選擇,并且用戶可以直接將有趣的視頻、 直播等通過(guò)微信快速分享給好友，實(shí)現(xiàn)比 App 更好的傳播效果。

4. 不適合作為小程序的產(chǎn)品-工具類產(chǎn)品

相反，我們所推崇的工具類產(chǎn)品，在企業(yè)的角度來(lái)說(shuō)，卻是最不適合做成小程序的產(chǎn)品。張小龍所賦予小程序的意義就是：「有用，不會(huì)給用戶造成打擾」，所以其實(shí)說(shuō)實(shí)話，基于微信生態(tài)圈工具類的小程序比 App 更容易爆發(fā)。

但是這只是用戶增量提高，工具類 App 短暫的爆發(fā)卻很難維持存量。做工具類小程序和工具類 App 一樣，變現(xiàn)周期會(huì)非常長(zhǎng)。從用戶體驗(yàn)的角度來(lái)說(shuō)，微信小程序里面的工具比起 App 的用戶體驗(yàn)會(huì)好很多。

• 沒(méi)有廣告和外部鏈接，使得工具類小程序非常專注與。
• 工具的理念和小程序的理念非常一致，都是即用即走，沒(méi)有任何冗余的操作路徑，也不占用大量的內(nèi)存。
• 但是從產(chǎn)品的角度而言，過(guò)于簡(jiǎn)單與就意味著更加難以變現(xiàn)。所以企業(yè)應(yīng)該把核心功能放置在小程序，附件功能依舊放置在 App 中，從而實(shí)現(xiàn)從小程序向 App 端倒流，小程序也有效彌補(bǔ)了工具類 App 的社交屬性不足的缺陷。

應(yīng)該如何設(shè)計(jì)小程序

其實(shí)在張小龍的嘴里，我們已經(jīng)得到了答案。他對(duì)于小程序的幾項(xiàng)基本原則已經(jīng)足以說(shuō)明問(wèn)題，比如其中的一項(xiàng)就是「用完即走」，其實(shí)這不僅僅是張小龍給到的小程序的定義，而是小程序本身?yè)碛械膶傩?。在現(xiàn)代這個(gè)時(shí)代，用戶的注意力被越來(lái)越分散，我們很多的設(shè)計(jì)其實(shí)都是為了緩解用戶焦慮。

在小程序的官方文檔中也提到了相關(guān)的元素，在現(xiàn)代社會(huì)，大家拿到一款新的產(chǎn)品之后都喜歡自己研究而非去研讀說(shuō)明書。但是實(shí)際上，小程序的官方文檔是非常值得閱讀的內(nèi)容，里面的規(guī)范內(nèi)容目的不僅僅是為了讓小程序整體顯得整齊劃一，更多的內(nèi)容是為了保證小程序能夠有良好的用戶體驗(yàn)。從而增加用戶的留存率。

所以，本篇文章的主要內(nèi)容是在「小程序官方文檔」的基礎(chǔ)之上，來(lái)探索更多的小程序設(shè)計(jì)的規(guī)律，建議大家在閱讀之前，可以先自行閱讀小程序官方文檔，再來(lái)看本文，才會(huì)有更多收獲。

1. 小程序的用戶路徑必須單一

App 的功能點(diǎn)可以很多，但是小程序的用戶路徑必須單一。

當(dāng)然，這句話只符合想要入局的中小型企業(yè)，在建立小程序的初期，沒(méi)有額外的流量渠道，那么最好的留存用戶的方式就是讓用戶能夠的解決問(wèn)題，對(duì)應(yīng)到小程序的框架設(shè)計(jì)，即是簡(jiǎn)短的用戶路徑。

不止中小企業(yè)如此，也有很多大型企業(yè)，開(kāi)始從「復(fù)合型小程序」轉(zhuǎn)向小程序矩陣，目的就是為了給用戶提供專一的體驗(yàn)路徑。因?yàn)閺?PC 到 APP，再到小程序，用戶場(chǎng)景和時(shí)間在被不斷切碎，產(chǎn)品功能也要不斷簡(jiǎn)化，更專注，才更能吸引用戶進(jìn)行完整的體驗(yàn)用戶流程。

2. 良好的一次性使用機(jī)制

設(shè)計(jì)一次性引導(dǎo)機(jī)制。

在用戶第一次使用小程序時(shí)，一些必要的提示是提升用戶體驗(yàn)的關(guān)鍵因素。

減少特殊的交互模式的設(shè)計(jì)，必要時(shí)要進(jìn)行足夠的引導(dǎo)。

運(yùn)用用戶更熟悉的交互模式，更能讓用戶擁有良好的體驗(yàn)，更快速的完成整個(gè)路徑與流程。

3. 減少動(dòng)態(tài)設(shè)計(jì)和裝飾性元素

同樣這個(gè)原理只適用于剛剛布局小程序的企業(yè)，而不適用于大廠的小程序設(shè)計(jì)。但其實(shí)在 App 中，為了凸顯品牌調(diào)性，動(dòng)態(tài)元素和裝飾性元素是一定會(huì)出現(xiàn)的。品牌調(diào)性幾乎是 App 設(shè)計(jì)的一個(gè)非常重要的環(huán)節(jié)。

這并不意味著小程序中的品牌調(diào)性不重要，而是說(shuō)在某些環(huán)節(jié)中，良好的交互體驗(yàn)比品牌調(diào)性重要的多。

4. 頁(yè)面扁平化

即減少頁(yè)面跳轉(zhuǎn)，能不跳轉(zhuǎn)就減少跳轉(zhuǎn)，跳轉(zhuǎn)新頁(yè)面會(huì)增加用戶適應(yīng)新頁(yè)面元素的成本，同時(shí)小程序的頁(yè)面層級(jí)過(guò)多，會(huì)讓用戶感覺(jué)到繁瑣焦慮。這個(gè)方法可以縮短用戶觸達(dá)產(chǎn)品的路徑，也是小程序用來(lái)減少用戶干擾的重要手段。

這樣做的好處就是讓用戶對(duì)小程序的架構(gòu)有更全面的理解。用戶在較少的跳轉(zhuǎn)路徑中，始終清晰的知道自己處在小程序中的位置。這也是增加用戶對(duì)于產(chǎn)品安全感的一種方式。

5. 用選項(xiàng)和自動(dòng)填充代替輸入和表單

在小程序初期，還未擁有懸浮窗功能。這個(gè)時(shí)候的表單輸入對(duì)于用戶和產(chǎn)品來(lái)說(shuō)簡(jiǎn)直是噩夢(mèng)。比如用戶需要輸入一個(gè)信息，而這個(gè)信息儲(chǔ)存在手機(jī)中，那么用戶就需要中斷當(dāng)前操作去查看信息。再通過(guò)其他的方式回到目前的操作填寫信息。在此過(guò)程中，很有可能由于操作過(guò)于繁瑣而喪失客戶。

即使增加了懸浮窗功能，用戶輸入信息的操作干擾也還是存在，所以能夠盡量避免信息輸入就要避免，以點(diǎn)選、拖動(dòng)等手勢(shì)操作代替文字輸入。將熱門的、常用的、歷史信息前置，減少用戶的重復(fù)勞動(dòng)。

在其他的小程序?qū)Ρ戎?，我們一樣可以發(fā)現(xiàn)類似的在用戶體驗(yàn)上的差別。

有一次一個(gè)朋友來(lái)向我咨詢關(guān)于他司電商小程序轉(zhuǎn)化率如何提高的問(wèn)題，我便運(yùn)用了這個(gè)理論，去給他們的產(chǎn)品做了一個(gè)梳理，最后切實(shí)的獲得了數(shù)據(jù)上可觀的提高。

6. 減少等待，反饋及時(shí)

小程序官方文檔里花了大量的篇幅去闡述給予用戶「加載狀態(tài)」與「完成狀態(tài)」反饋的重要性，而反饋設(shè)計(jì)的好壞，對(duì)留存率存在著至關(guān)重要的影響。除了「微信官方文檔」中提到的「啟動(dòng)頁(yè)加載」「頁(yè)面下拉刷新加載」「頁(yè)面內(nèi)加載」「模態(tài)加載」「局部加載」「全局加載」外。

另外一種加載狀態(tài)同樣至關(guān)重要，即「預(yù)加載狀態(tài)」。預(yù)加載是一個(gè)老生常談的話題，如果一款產(chǎn)品沒(méi)有設(shè)計(jì)預(yù)加載，會(huì)給用戶心理造成很強(qiáng)的不安全感，這點(diǎn)在小程序尤為明顯，所以設(shè)計(jì)預(yù)加載場(chǎng)景是提高用戶體驗(yàn)至關(guān)重要的因素，尤其針對(duì)一些網(wǎng)絡(luò)狀況不好的用戶。

其中以百度云盤的尤為出色，他的預(yù)加載模式是動(dòng)畫效果呈現(xiàn)的，可以讓用戶清晰的了解數(shù)據(jù)正在加載。

如果沒(méi)有設(shè)計(jì)預(yù)加載，可以自行設(shè)計(jì)加載模塊，或者用微信提供的通用加載模塊，也是一個(gè)退而求其次的選擇。

而最壞的做法，就是完全不設(shè)計(jì)任何用于提醒的內(nèi)容，這種極差的用戶體驗(yàn)幾乎會(huì)全盤勸退用戶。

小程序設(shè)計(jì)的實(shí)戰(zhàn)經(jīng)驗(yàn)

想必大家在看完了上述內(nèi)容后，已經(jīng)對(duì)小程序有了一個(gè)初步的概念，上述內(nèi)容主要是一些理論層面對(duì)于小程序設(shè)計(jì)的分析，那么這個(gè)章節(jié)主要就是通過(guò)大量的線上案例和截圖來(lái)講述一些小程序設(shè)計(jì)的規(guī)律。

1. 引導(dǎo)收藏小程序機(jī)制

小程序的「即用即走」的機(jī)制，同時(shí)也促成了各個(gè)小程序的形成了一套應(yīng)對(duì)機(jī)制，其中之一就是引導(dǎo)收藏小程序機(jī)制，目前這個(gè)機(jī)制幾乎成為了商業(yè)小程序的標(biāo)配，大體分為三種類型：

• 從效用角度出發(fā)：引導(dǎo)型 > 彈窗型 > 占位型。
• 從對(duì)用戶的體驗(yàn)出發(fā)：占位型由于不遮擋任何信息，對(duì)用戶的影響最?。粡棿靶驼趽跻徊糠中畔?，所以次之；而引導(dǎo)型由于直接阻擋了用戶的操作區(qū)域，所以對(duì)用戶體驗(yàn)的影響是最大的。不過(guò)即使是彈窗型和占位型的引導(dǎo)，也是在過(guò) 3-5 秒后會(huì)消失，避免進(jìn)一步干擾用戶體驗(yàn)。

2. 導(dǎo)流公眾號(hào)/App機(jī)制

我們?cè)谠O(shè)計(jì)小程序時(shí)可以酌情參考這三種形式，簡(jiǎn)單來(lái)說(shuō)，用戶粘性高，用戶群體年齡偏高可以采用引導(dǎo)型，反之可以嘗試彈窗型和占位型兩種形式。

類似于「引導(dǎo)收藏小程序」，「導(dǎo)流公眾號(hào)/App」也是只有小程序中存在的一種模式。不同于「引導(dǎo)收藏小程序」，「導(dǎo)流公眾號(hào)/App」的方法可謂是百花齊放，不過(guò)渠道卻只有一個(gè)，就是客服會(huì)話系統(tǒng)。

在客服會(huì)話中回復(fù)「1」。

在客服會(huì)話中，回復(fù)「小程序」。

客服會(huì)話中的拇指圖設(shè)計(jì)非常有講究，一般的拇指圖設(shè)計(jì)都分為兩段文本，字號(hào)較大的文本用來(lái)在上述步驟二中提醒用戶點(diǎn)擊，而字號(hào)較小的文本則是用來(lái)在步驟三中提醒用戶點(diǎn)擊鏈接/掃碼來(lái)下載 App。

一些小程序會(huì)有彈窗提醒我們關(guān)注公眾號(hào)，但為什么我們不能通過(guò)這種簡(jiǎn)單的方式讓用戶關(guān)注公眾號(hào)，而要用跳轉(zhuǎn)客服這么麻煩的方法。很簡(jiǎn)單，仔細(xì)觀察就可以發(fā)現(xiàn)這是微信的廣告投放（看彈窗的左上角的標(biāo)簽）。小程序即使接了廣告，也只能給別的公眾號(hào)導(dǎo)流。

雖然說(shuō)小程序有辦法將用戶引導(dǎo)到 App 中，但是小程序和 App 的聯(lián)動(dòng)非常有限，基本上局限于通過(guò)小程序引導(dǎo)用戶去下載/打開(kāi)App，用戶無(wú)法在小程序和 App 切換時(shí)仍然保持完整的用戶體驗(yàn)流程。

但是我同時(shí)也發(fā)現(xiàn)了一些產(chǎn)品運(yùn)用巧妙的方式使得用戶體驗(yàn)流程可以延續(xù)的產(chǎn)品。在愛(ài)奇藝小程序中，當(dāng)用戶需要觀看一些 App 才能觀看的內(nèi)容時(shí)，用戶可以通過(guò)復(fù)制一段口令從而在打開(kāi) App 時(shí)自動(dòng)跳轉(zhuǎn)到相應(yīng)視頻，使得用戶流程不中斷。

同樣一段內(nèi)容，如果我想看高清版，或者想要給視頻評(píng)論，我需要自行在 bilibili 的 App 中搜索相關(guān)視頻，這種繁瑣的方式幾乎讓我放棄評(píng)論的興趣。

3. 分享機(jī)制

除了引導(dǎo)收藏和導(dǎo)流機(jī)制之外，在小程序里第二個(gè)重要的機(jī)制就是分享機(jī)制。如何做好分享機(jī)制是提高增量的一個(gè)必須要思考的問(wèn)題。 正常的小程序分享分為兩種渠道，分享給好友和群聊，以及分享到朋友圈中。

分享給好友，一般就是以小程序鏈接的形式分享。因?yàn)樾〕绦虻膬?yōu)勢(shì)就在于依附于微信，其社交屬性被大大增強(qiáng)，所以分享按鈕往往要設(shè)計(jì)的引人注目。常見(jiàn)的設(shè)計(jì)方式有以下幾種。

在分享時(shí)，會(huì)有彈窗狀態(tài)讓用戶選擇分享的渠道，事實(shí)證明，這個(gè)彈窗也是可以被設(shè)計(jì)的。而其中被大部分小程序所選擇的設(shè)計(jì)感和實(shí)用性兼具的這種樣式。

小程序以圖片形式保存后的樣式，由于就是我們常見(jiàn)的 H5 設(shè)計(jì)，所以在此不做贅述，如果有感興趣的朋友，可以站酷私信的方式或者評(píng)論區(qū)聯(lián)系進(jìn)行討論。

分享在聊天窗口的小程序，也是可以被設(shè)計(jì)的內(nèi)容。這種小程序鏈接一般分為兩個(gè)模塊：標(biāo)題文字 + 配圖。標(biāo)題文字可以自定義 22個(gè)字，起一個(gè)有吸引力的文案可以有效增加轉(zhuǎn)化率。

一般配圖的設(shè)計(jì)有以下幾種分類：

4. 技術(shù)上限

很多同學(xué)會(huì)有一種擔(dān)心，覺(jué)得小程序既然如此輕便，會(huì)不會(huì)在技術(shù)上也會(huì)受到很多限制，很多特殊的功能無(wú)法在小程序當(dāng)中實(shí)現(xiàn)。

這種擔(dān)心有依據(jù)，但不全對(duì)。事實(shí)證明，小程序在動(dòng)效方面，確實(shí)被舍棄了很多，很多情況下甚至動(dòng)效與跳轉(zhuǎn)邏輯無(wú)法匹配，會(huì)讓用戶體會(huì)到不安的感覺(jué)。但是在功能方面，很多已經(jīng)存在的小程序已經(jīng)證明，幾乎可以在 App 里實(shí)現(xiàn)的功能，小程序均可以實(shí)現(xiàn)。

VR看房

貝殼找房和同程藝龍的小程序都可以實(shí)現(xiàn) VR 實(shí)景看房，而且在用戶體驗(yàn)上是可以讓我感受到其真實(shí)用途，而不是我一開(kāi)始認(rèn)為的噱頭所在。這是我覺(jué)得在小程序上最令我吃驚的功能了。

可以發(fā)現(xiàn)的是，兩個(gè) VR 看房的功能都是一家叫「如視」的公司提供的技術(shù)支持，其實(shí)這是一種小程序的發(fā)展趨勢(shì)，越來(lái)越多的功能模塊被第三方機(jī)構(gòu)所替代，而小程序的持有者只需專注于服務(wù)與流程設(shè)計(jì)。那么小程序的門檻將會(huì)越來(lái)越低，小程序的運(yùn)營(yíng)團(tuán)隊(duì)也會(huì)越來(lái)越精簡(jiǎn)，推動(dòng)著整個(gè)生態(tài)向良性發(fā)展。

地圖導(dǎo)航

另一個(gè)技術(shù)就是騰訊自家的「騰訊地圖」，可以在小程序端實(shí)現(xiàn)實(shí)時(shí)導(dǎo)航。這也能證明小程序在功能方面的強(qiáng)大屬性。

5. 精美的設(shè)計(jì)

其實(shí)小程序也能做到很精美，下面我將帶大家看一些優(yōu)秀的小程序設(shè)計(jì)案例：

京東良研通過(guò)良好的視覺(jué)設(shè)計(jì)、動(dòng)效設(shè)計(jì)和信息展示方式，使得簡(jiǎn)單的投票功能變得生動(dòng)有趣，簡(jiǎn)約明了。

在旅游行業(yè)，如何將繁冗復(fù)雜的信息排布的清晰易懂是非?？简?yàn)設(shè)計(jì)師能力的。

同程藝龍就在不增加頁(yè)面跳轉(zhuǎn)的情況下，同時(shí)將信息以良好的視覺(jué)展示了出來(lái)。而在同樣領(lǐng)域的馬蜂窩的設(shè)計(jì)卻在對(duì)比下顯得混亂，除了設(shè)計(jì)方面的問(wèn)題，BUG 頻發(fā)，諸多的彈窗與廣告也是影響用戶體驗(yàn)的因素之一。

6. 其他有趣的小功能

設(shè)置更新用戶數(shù)據(jù)功能。

有些小程序一次登陸后，就會(huì)永久將用戶數(shù)據(jù)定格在此，所以當(dāng)用戶許久后重新打開(kāi)小程序，陳舊的數(shù)據(jù)會(huì)讓用戶對(duì)小程序產(chǎn)生類似的許久不更新的感覺(jué)，所以一個(gè)更新數(shù)據(jù)的按鍵是必要的。

誘人點(diǎn)擊的文案。

有時(shí)，我們可以通過(guò)一些有趣的方式讓用戶完成流程，「JZ多媒體解決方案」的用戶登錄就是其中之一，不像普通的設(shè)計(jì)，它選用「點(diǎn)擊顯示微信頭像」這樣一個(gè)有趣的文案來(lái)吸引用戶點(diǎn)擊，從而完成登錄。

外部顯示名稱和小程序本體名稱可以不一致。

同樣的，名稱為「JZ多媒體解決方案」的小程序，外部顯示名稱為「除了干貨其他什么都沒(méi)有」。這給我們提供了一種新思路，在初期推廣時(shí)，不如把我們的 Slogan 當(dāng)作名稱寫在外部，是一種推廣的更好方式。

小程序的頂部狀態(tài)欄。

我們都知道小程序的頂部狀態(tài)欄，右半部分是不可編輯的，那么怎樣可以既適應(yīng)這個(gè)規(guī)則，又可以保持小程序的設(shè)計(jì)感呢？我在諸多小程序中發(fā)現(xiàn)了這樣兩種特殊的設(shè)計(jì)方法。

將 LOGO 放置在頂部狀態(tài)欄中。KeepLand 將 LOGO 放置在狀態(tài)欄中，既與其他小程序做到了區(qū)分，宣傳了品牌，同時(shí)又保持了整體的設(shè)計(jì)美感。

搜索欄不必要非放置在下方。放置在頂部導(dǎo)航欄的左端同樣可以實(shí)現(xiàn)空間利用的最大化，同時(shí)保持整體的設(shè)計(jì)美感。

將彈窗設(shè)計(jì)成系統(tǒng)樣式。

將彈窗設(shè)計(jì)成系統(tǒng)樣式，可以有效增強(qiáng)小程序的正規(guī)感和用戶對(duì)于品牌的印象，微信讀書就是用這樣的方法，使得用戶在使用小程序時(shí)，同樣體會(huì)到與 App 同樣的品牌與視覺(jué)感受。

為什么我比看好小程序

結(jié)束了上半部分的理論分析，那么我們來(lái)聊一聊到底我是怎么看待小程序這個(gè)平臺(tái)以及這個(gè)生態(tài)的。

其實(shí)不只是企業(yè)家需要考慮這個(gè)問(wèn)題，設(shè)計(jì)師同樣也需要考慮這個(gè)問(wèn)題。前一陣子我一個(gè)朋友就來(lái)找我訴苦，說(shuō)他不想在現(xiàn)在這個(gè)公司做下去了。原因就是，公司布局了五六個(gè)小程序，就是沒(méi)有一款 App 的項(xiàng)目提上日程，他以后不想走小程序設(shè)計(jì)這條路，所以不得已跳槽到一家有 App 產(chǎn)品的公司。其實(shí)這個(gè)問(wèn)題轉(zhuǎn)化出來(lái)也很簡(jiǎn)單，就是小程序到底有發(fā)展前景嗎？小程序是否會(huì)成為一個(gè)和蘋果搭建起來(lái)的 AppStore 一樣的平臺(tái)？

事先聲明一點(diǎn)，我不針對(duì)個(gè)人、企業(yè)或者某家資本，對(duì)這些將要提及的名字也沒(méi)有惡意，還是老規(guī)矩，對(duì)于商業(yè)，我們不談道德，只看決策。

1. 工具無(wú)界限，產(chǎn)品有派系

曾幾何時(shí)，我們?cè)诮怄i共享單車時(shí)，第一個(gè)打開(kāi)的就是微信；現(xiàn)如今微信這樣一個(gè)培養(yǎng)了我們使用二維碼習(xí)慣的產(chǎn)品，卻無(wú)法成為人們解鎖單車的首選。

北京市面上存在的單車總共有 7 種：美團(tuán)單車，摩拜單車，ofo，青桔單車，小藍(lán)單車，哈啰單車，永安行。但是目前只有舊版的摩拜單車，青桔單車能用微信小程序掃碼解鎖。（小藍(lán)單車小程序已經(jīng)停止運(yùn)營(yíng)，ofo 雖然沒(méi)有停止運(yùn)營(yíng)，但是在小程序中已經(jīng)無(wú)法搜索到單車服務(wù)了）而同樣，摩拜單車和美團(tuán)單車可以通過(guò)美團(tuán) App 解鎖，小藍(lán)單車和青桔單車可以通過(guò)滴滴 App 解鎖。

可以發(fā)現(xiàn)，微信對(duì)于共享單車界的統(tǒng)治力早已不復(fù)存在，現(xiàn)在無(wú)論用哪款單車，微信都不是人們首先能想到的入口了。

雖然技術(shù)水平上小程序完全可以承載市面上大部分的工具，但是產(chǎn)品之間的派系分別，導(dǎo)致我們可能永遠(yuǎn)不可能在微信一款軟件上一勞永逸的體驗(yàn)到所有服務(wù)。就像我們永遠(yuǎn)無(wú)法在微信小程序中發(fā)現(xiàn)「淘寶」小程序一樣。其實(shí)小程序在這一步上，已經(jīng)不可能像App Store 一樣打造一個(gè)完整的生態(tài)了。阿里一家的存在，就已經(jīng)讓微信失去了電商行業(yè)的半壁江山。

甚至更有趣的是，在小程序熱度排行榜中，位居前十的小程序中有 5 個(gè)是騰訊投資的企業(yè)下屬產(chǎn)品，還有 1 個(gè)是騰訊自身的產(chǎn)品。

但這本身無(wú)可厚非，因?yàn)檫@就是正常的商業(yè)競(jìng)爭(zhēng)策略，只是選擇了這種策略生長(zhǎng)的小程序，優(yōu)勢(shì)就是可以將流量最大化的向自己的生態(tài)中轉(zhuǎn)化，缺點(diǎn)就是會(huì)有很多產(chǎn)品因此無(wú)法融入其中，小程序的生態(tài)，終究不會(huì)是一個(gè)全面而完整的生態(tài)。

2. 很多小程序都是完整產(chǎn)品的試用版

很多人曾在小程序風(fēng)靡時(shí)預(yù)言，將來(lái)很多的產(chǎn)品都會(huì)入駐小程序，閹割掉次要功能，只保留核心功能在小程序中，這樣才可以既遵循小程序的輕量化原則，又可以讓用戶體驗(yàn)到產(chǎn)品的優(yōu)勢(shì)，形成轉(zhuǎn)化。但有趣的是，市場(chǎng)卻形成了另一套完全相反的機(jī)制。

Bilibili 小程序可以便捷的讓用戶隨時(shí)隨地觀看視頻，但是卻機(jī)智的閹割掉了畫質(zhì)選項(xiàng)。這個(gè)小程序確實(shí)解決了一部分用戶對(duì)于觀看視頻的便捷性、分享視頻的傳播性的需求，但在這個(gè)手機(jī)流量多到可以鋪張浪費(fèi)的年代，「高糊畫質(zhì)」無(wú)異于加重了用戶被「望梅止渴」欺騙的想法，而更多的轉(zhuǎn)向了下載 App 只為了更高清的畫質(zhì)與更多的操作自由。

微博小程序與 bilibili 小程序的做法如出一轍，雖然微博小程序的功能也很全面，看起來(lái)幾乎和微博 App 所具有的功能幾乎一致，但是一旦我們妄圖用微博小程序代替 App 來(lái)使用時(shí)就會(huì)發(fā)現(xiàn)，微博小程序竟然不能發(fā)帶圖片和視頻的微博。

知乎小程序亦是如此，他幾乎閹割掉了所有用戶和社區(qū)互動(dòng)的渠道，用戶在小程序中只能接受知乎的信息，而無(wú)法發(fā)布回答與評(píng)論（只能點(diǎn)贊或者反對(duì)）。

甚至從名稱我們就可以看出微博和知乎想要突出的重點(diǎn)（熱門微博與知乎精選），在于讓用戶瀏覽微博和知乎中已經(jīng)存在的信息，而當(dāng)用戶想真正參與進(jìn)整個(gè)社區(qū)時(shí)，發(fā)現(xiàn)幾乎所有的入口都被封死。在知乎中甚至連互動(dòng)中的評(píng)論功能都被閹割掉了，完全給用戶一種隔著玻璃罩看珍藏品般的感覺(jué)。

所以各個(gè)互聯(lián)網(wǎng)產(chǎn)品不約而同的選擇了同一種方法來(lái)運(yùn)營(yíng)小程序，即小程序永遠(yuǎn)是正規(guī) App 的試玩版。因?yàn)槲⑿诺闹攸c(diǎn)在于社交，而用戶在社交過(guò)程中能使用「嗶哩嗶哩」「微博」與「知乎」的場(chǎng)景只有分享社區(qū)中的內(nèi)容這一種場(chǎng)景了。所以所有的互聯(lián)網(wǎng)產(chǎn)品都將社區(qū)中的主要內(nèi)容呈現(xiàn)在了小程序中，而所有與分享無(wú)關(guān)的功能，即使?jié)M足「即用即走」的特性，也并沒(méi)有在小程序中保留下來(lái)。（比如發(fā)帶圖片的微博，這應(yīng)該非常符合即用即走的特性了，但并沒(méi)有被小程序保留下來(lái)）

3. 流量與格局

張小龍對(duì)于小程序有很多設(shè)想，其中一個(gè)就是打造一個(gè)屬于微信的生態(tài)系統(tǒng)，有人曾問(wèn)我微信小程序生態(tài)系統(tǒng)會(huì)不會(huì)最終能成長(zhǎng)為和 IOS 抗衡的力量？

我覺(jué)得很難。

2017 年 5 月 18 日開(kāi)始刷屏，第二天即 5 月 19 日便被微信叫停服務(wù)，微信方面給出的理由是，小程序匿名聊聊「涉嫌誘導(dǎo)分享」。這是第一款被騰訊官方明確封殺掉的微信小程序。之后匿名聊聊換殼上線，改名「走心聊聊」。但可惜的是，走心聊聊依然沒(méi)有逃過(guò)被封殺的悲慘結(jié)局，上線沒(méi)過(guò)多久，走心聊聊便因違反《即時(shí)通信工具公眾信息服務(wù)發(fā)展管理暫行規(guī)定》，再次被暫停服務(wù)。

如果說(shuō)「匿名聊聊」觸碰的是微信社交的這塊蛋糕，被封殺是情有可原的。那抖音被微信封殺的過(guò)程簡(jiǎn)直是讓很多互聯(lián)網(wǎng)企業(yè)都大失所望。

在第一次封殺 H5 時(shí)，微信方給出了明確的回應(yīng)。該 H5 在最后一頁(yè)存在誘導(dǎo)分享行為，違反《微信外部鏈接內(nèi)容管理規(guī)范》，因此平臺(tái)對(duì)其進(jìn)行了處理，分享到朋友圈僅自己可見(jiàn)。 但是在微信全面封殺抖音外部鏈接以及切斷使用微信賬號(hào)登陸抖音的功能時(shí)，微信方卻完全沒(méi)有給出任何官方解釋。

如果說(shuō)封殺抖音是因?yàn)轭^條系產(chǎn)品（包括今日頭條與抖音）有運(yùn)用 cookie 機(jī)制挖掘用戶在騰訊體系內(nèi)更多好友關(guān)系的嫌疑。但是接下來(lái)微信的做法無(wú)疑是令眾多互聯(lián)網(wǎng)中小企業(yè)看到了自己依附微信生存的結(jié)局。

據(jù)不完全統(tǒng)計(jì)，在短視頻盛行時(shí)期，微信已經(jīng)將 20 多款短視頻類 App 的分享鏈接封殺。

但是此時(shí)微信卻力推騰訊系的短視頻 App – 微視，甚至為了微視打破了自己既定的規(guī)則 —— 開(kāi)放了在朋友圈上傳 30 秒視頻的權(quán)限。

所以其實(shí)根本就沒(méi)有什么「誘導(dǎo)分享」這樣的說(shuō)法，網(wǎng)絡(luò)上流傳著一句話「微信封殺是中國(guó)互聯(lián)網(wǎng)公司躲不過(guò)的一道坎兒」。

微信封殺你不需要理由，畢竟微信的違規(guī)內(nèi)容中有一條明確地寫道：通過(guò)明示或者暗示的方式誘導(dǎo)點(diǎn)擊。但是回過(guò)頭一想，廣告的文案不就兩種，明示或者暗示都被微信說(shuō)了，你放個(gè)廣告就不能有文字，既然有了文字，你不是明示就是暗示。

在微信規(guī)則范圍內(nèi)，其對(duì)于誘導(dǎo)分享的懲戒存在很大的自由裁量權(quán)。所以懲罰你與否，歸根結(jié)底就是看你是否觸動(dòng)了微信的利益，一旦觸動(dòng)，你就會(huì)變成微信重點(diǎn)關(guān)照的對(duì)象。

事實(shí)上，微信這樣的做法也不是一兩天了。在三英（聊天寶、多閃、馬桶 MT）戰(zhàn)微信時(shí)，三款產(chǎn)品都被微信封殺了分享渠道。我們其實(shí)深知他們很難動(dòng)搖微信的地位，但是還是很快遭到了封殺，甚至不惜動(dòng)用其他渠道的力量，阻斷馬桶 MT 的傳播。這種寧可錯(cuò)殺一千不可放過(guò)一個(gè)的行為，使得微信再也無(wú)法樹(shù)立起與蘋果/微軟等平臺(tái)公司齊平的公正性。

事實(shí)上不僅僅是騰訊如此，中國(guó)目前的互聯(lián)網(wǎng)環(huán)境都清晰的告訴我們，企業(yè)之間很難構(gòu)建真正的信任。我一個(gè)美團(tuán)的高管朋友告訴我，美團(tuán)在進(jìn)行設(shè)計(jì)與開(kāi)發(fā)協(xié)作時(shí)，并不會(huì)使用藍(lán)湖，因?yàn)樗麄儾恍湃螄?guó)內(nèi)企業(yè)。然而在國(guó)內(nèi)使用 invision 又會(huì)受限于網(wǎng)速的影響，所以美團(tuán)干脆開(kāi)發(fā)了一款自己內(nèi)部的切圖與協(xié)作的軟件：印跡，只為協(xié)調(diào)實(shí)用性與保密性。

有朋友可能對(duì)這款軟件比較感興趣，我也同樣如此，就問(wèn)他美團(tuán)之后會(huì)不會(huì)讓這款軟件開(kāi)發(fā)注冊(cè)，走商業(yè)化道路。他說(shuō)一開(kāi)始在研發(fā)時(shí)他們也有這樣的想法，但是由于要提率，所以這款軟件越來(lái)越針對(duì)美團(tuán)業(yè)務(wù)邏輯的方向制作優(yōu)化，所以即使公開(kāi)，也會(huì)很難為他人所用了。

入駐小程序，有時(shí)候也意味著需要將自己的數(shù)據(jù)交給他人管理，在小程序中，所有基于地理位置為用戶提供服務(wù)的小程序，幾乎全部都接入了騰訊地圖。

我雖然不了解其中的運(yùn)作機(jī)制，但是不難看出，很多企業(yè)應(yīng)該跟我抱有類似的想法。當(dāng)所有數(shù)據(jù)集于騰訊一家時(shí)，自己是否還有立足于市場(chǎng)的根基呢？

4. 那些已經(jīng)成為平臺(tái)的企業(yè)是如何看待小程序

在 2018 年 11 月 7 日中國(guó)烏鎮(zhèn)的互聯(lián)網(wǎng)大會(huì)上馬化騰說(shuō)，微信現(xiàn)在有超過(guò) 100 萬(wàn)個(gè)小程序，而在同年 4 月份，Appstore 才收錄了210 萬(wàn)個(gè)應(yīng)用。也就是說(shuō)從 2008 年到 2018 年，蘋果用 10 年的時(shí)間打造的一個(gè)龐大的應(yīng)用公園，被小程序不到 2 年的時(shí)間就從數(shù)量上追上了一半。這無(wú)疑會(huì)讓蘋果與 Google 重新審視小程序這款產(chǎn)品。

事實(shí)上，平臺(tái)與平臺(tái)之間的博弈從來(lái)沒(méi)有停息過(guò)。頭號(hào)玩家需要借助平臺(tái)來(lái)壯大自己，平臺(tái)需要頭號(hào)玩家來(lái)壯大自己的生態(tài)系統(tǒng)，但是也會(huì)忌憚這些頭號(hào)玩家有一天會(huì)強(qiáng)大到自己無(wú)法掌控，甚至反噬自己。

我們?cè)趪?guó)內(nèi)一直看到的微信在自己的平臺(tái)上打壓其他的產(chǎn)品，但是反過(guò)來(lái)在國(guó)際市場(chǎng)上，微信何嘗不是架構(gòu)在別人的平臺(tái)上？所以其實(shí)我們遍歷微信對(duì)待其他產(chǎn)品的策略，反過(guò)來(lái)，都會(huì)成為蘋果制約微信的策略。

還記得在 2017 年 4 月時(shí)，蘋果就根據(jù)自己的《開(kāi)發(fā)者協(xié)議條款》第 3.1.1 項(xiàng)，對(duì)蘋果端微信內(nèi)所有的贊賞內(nèi)容強(qiáng)行征收 30% 的費(fèi)用，雖然最終微信和蘋果雙方都做出了不同程度的妥協(xié)，但是微信還是做出了「斷臂」一般的抉擇，裁掉了微信公眾號(hào)的打賞功能。

雖然表面上看是蘋果對(duì)于開(kāi)發(fā)者協(xié)議條款的嚴(yán)格把控，將公眾號(hào)打賞行為歸結(jié)為 APP 內(nèi)購(gòu)功能，因此要求微信改用蘋果的 IAP（in-AppPurchase 應(yīng)用內(nèi)付費(fèi)），但實(shí)際上從時(shí)間節(jié)點(diǎn)上看，我們很容易發(fā)現(xiàn)，蘋果這次的發(fā)難明顯是針對(duì)小程序以及微信的「鏈接一切」的戰(zhàn)略的，一旦微信將「微信公眾號(hào)、朋友圈、微信支付、小程序」這幾個(gè)核心功能打通，勢(shì)必會(huì)對(duì)蘋果的生態(tài)系統(tǒng)產(chǎn)生較大的影響，蘋果不可能坐視不管。

為什么小程序值得入局

雖然這件事結(jié)束后，蘋果和微信再?zèng)]有大的爭(zhēng)端，但是外媒卻風(fēng)評(píng)不斷，他們雖然不認(rèn)為小程序會(huì)最終成為制衡 AppStore 的力量，但是卻會(huì)搶占中國(guó)市場(chǎng)大部分的 App 開(kāi)發(fā)人員的資源，使其向小程序設(shè)計(jì)與開(kāi)發(fā)傾斜，一旦這種現(xiàn)象嚴(yán)重起來(lái)，蘋果勢(shì)必不能坐視不管。

興許下一次大戰(zhàn)就是微信與小程序進(jìn)軍國(guó)際的那一步。我無(wú)法預(yù)測(cè)這場(chǎng)戰(zhàn)爭(zhēng)的結(jié)果，畢竟騰訊做了那么多年的生態(tài)，深諳自己是如何通過(guò)平臺(tái)一步一步贏到現(xiàn)在，現(xiàn)如今他也站在了劣勢(shì)方的一邊，勢(shì)必也會(huì)做好充足準(zhǔn)備，但是這對(duì)于騰訊也一定是一個(gè)傷敵一千自損八百的戰(zhàn)役，而對(duì)于我們更重要的是，小程序到時(shí)還能不能是我們可持續(xù)發(fā)展的一個(gè)平臺(tái)，恐怕誰(shuí)都不敢保證。

雖然小程序的限制與克制如此之多，但是我并不認(rèn)為這代表著小程序不適合我們?nèi)刖郑喾次矣X(jué)得微信的克制是一種純粹的理想，只能存在市場(chǎng)的初期，隨著行業(yè)的發(fā)展，越來(lái)越多的變量已經(jīng)不在微信的掌控范圍內(nèi)。小程序已經(jīng)不再是微信能夠全權(quán)把控發(fā)展節(jié)奏的產(chǎn)品了，而需要主動(dòng)去迎合時(shí)代做出改變。就像現(xiàn)如今的微信一樣，我們無(wú)數(shù)次在公開(kāi)場(chǎng)合聽(tīng)到張小龍說(shuō)，他不希望用戶在微信上浪費(fèi)過(guò)多的時(shí)間，但是微信已不可避免的成為一款超級(jí) App，集合了越來(lái)越多的使用場(chǎng)景，甚至有時(shí)，手機(jī)里只有一個(gè)微信就夠了。

1. 頭部復(fù)合型小程序出現(xiàn)，使小程序無(wú)法保持初心

小程序發(fā)展到這一步幾乎是小程序團(tuán)隊(duì)和張小龍沒(méi)想到的，本來(lái)小程序的屬性是「用完即走」，但是由于微信本身的流量龐大，所以在微信內(nèi)部不可避免的會(huì)出現(xiàn)超級(jí)個(gè)體（即流量巨頭），這種復(fù)合型小程序（也可以稱之為「超級(jí)小程序」）幾乎可以不用遵守小程序的規(guī)范一樣可以獲得流量，那么越來(lái)越臃腫，幾乎是這類小程序不可避免的現(xiàn)象。

比如說(shuō)在小程序領(lǐng)域耳熟能詳?shù)摹该榔?，美篇從微信朋友圈只能發(fā)布 9 張圖片的痛點(diǎn)出發(fā)，以圖文創(chuàng)作工具切入，成為了當(dāng)時(shí)首屈一指的小而美的工具類產(chǎn)品。但隨著流量逐步增大，美篇開(kāi)始尋求商業(yè)化變現(xiàn)的道路，從工具類產(chǎn)品向社交類產(chǎn)品轉(zhuǎn)型，最后形成了編輯、分享、閱讀、社交 四大功能的復(fù)合型小程序。

而基于圖文內(nèi)容，以興趣聚合的交流社區(qū)，圍繞老師的家長(zhǎng)社群，圍繞公務(wù)員的同事社群，圍繞攝影旅行的興趣社群，這些都是普通工具類小程序不具備的，但是卻是小程序發(fā)展的一個(gè)必經(jīng)之路，同時(shí)也是轉(zhuǎn)型的一個(gè)典范。

所以同樣的道理，這就是為什么我不推薦大家在學(xué)習(xí)如何制作小程序時(shí)，去參考頭部的那些復(fù)合型小程序。體量大不意味著正規(guī)，不意味著遵守規(guī)范。

很多復(fù)合型小程序的設(shè)計(jì)其實(shí)是和小程序的初衷以及適用場(chǎng)景背道而馳的。這對(duì)產(chǎn)品本身并不會(huì)有什么過(guò)大的影響，因?yàn)樵谒麄兊目剂糠懂犂?，有比遵守?guī)范優(yōu)先級(jí)更高的事情。但是我們?nèi)绻つ拷梃b，以為這就是小程序的規(guī)范，那么最終得不償失。

所以同類型的小而美的小程序，往往更應(yīng)該成為我們的借鑒對(duì)象。

2. 友商的步步緊逼

雖然從數(shù)據(jù)上看，微信首發(fā)優(yōu)勢(shì)明顯，但是其他平臺(tái)也不容小覷。從 2019 年上半年開(kāi)始，各大應(yīng)用廠商開(kāi)始逐步布局小程序。小程序平臺(tái)從一開(kāi)始的 2 家到現(xiàn)在已經(jīng)覆蓋了 8 個(gè)平臺(tái)。這些平臺(tái)也都在積極的擴(kuò)張小程序：阿里將支付寶小程序擴(kuò)展到整個(gè)阿里系；百度創(chuàng)立了開(kāi)源聯(lián)盟；騰訊旗下的第二大 App-QQ 也正式上線了小程序。

并且在數(shù)據(jù)上雖然有很大的差距，但是還沒(méi)有到達(dá)不可逾越的地步。并且除了微信外，幾乎所有的小程序走的都是中心化流量分發(fā)的模式。這時(shí)由于微信的克制與去中心化，反而讓其他的廠商逐步縮短了差距。

所以，隨著其他平臺(tái)的小程序步步緊逼，微信小程序急需一條出路打破目前的困局。某種程度上說(shuō)，小程序?qū)ξ⑿艁?lái)說(shuō)，是一場(chǎng)只能進(jìn)不能退的戰(zhàn)爭(zhēng)，最終也會(huì)迫使微信妥協(xié)很多本來(lái)視為底線的規(guī)則。

張小龍?jiān)诠_(kāi)場(chǎng)合多次提到，他希望小程序廠商能夠?qū)Ｗ⒂趦?nèi)容本身，而不要去思考流量紅利和不符合規(guī)定的裂變玩法。但是如果說(shuō)市面上只有一款「微信小程序」，那么廠商可能還會(huì)更愿意去沉淀自己的內(nèi)容。但是現(xiàn)實(shí)是面對(duì)這么多家平臺(tái)都開(kāi)放小程序，那么熟悉平臺(tái)規(guī)則與政策，研究對(duì)應(yīng)的策略與玩法，幾乎是必然會(huì)發(fā)生的事情。這基本就意味著，隨著各大平臺(tái)紛紛入駐小程序生態(tài)，微信對(duì)于小程序的底線遵守恐怕是越來(lái)越難。

3. 小程序已經(jīng)成為一種任何平臺(tái)都可以復(fù)制的商業(yè)模式

小程序已經(jīng)不止代表著「微信小程序」，而是一種任何平臺(tái)都可以復(fù)制的商業(yè)模式，那么去研究小程序的規(guī)則和玩法自然是值得的，因?yàn)樗哂型ㄓ眯?。就像，如果我們一般人都?huì)去學(xué)英語(yǔ)而不會(huì)去學(xué)習(xí)都可以法語(yǔ)一樣，因?yàn)橛⒄Z(yǔ)在全世界都可以通用，但是法語(yǔ)基本只能在法國(guó)應(yīng)用。

事實(shí)上，已經(jīng)有小程序廠商開(kāi)始在跨平臺(tái)之間進(jìn)行積極的布局和嘗試了。汽車之家就是其中典型的例子。通過(guò)多平臺(tái)布局的方式，大大降低了小程序的開(kāi)發(fā)與學(xué)習(xí)成本，實(shí)現(xiàn)一舉多得。這也是我覺(jué)得小程序值得研究和入駐的原因。

4. 微信仍然是目前的一個(gè)流量巨頭

據(jù)市場(chǎng)研究公司 comScore 稱，智能手機(jī)用戶用在設(shè)備上的所有時(shí)間幾乎都被放在他們使用率最高的 5 款應(yīng)用上，而且?guī)缀跻话氲臅r(shí)間都被用到了使用率最高的那款應(yīng)用上。

所以在中國(guó)，這就意味著大部分用戶的時(shí)間都被微信占據(jù)，而剩下的 App 則搶占用戶剩余的時(shí)間。所以入局微信對(duì)中小型企業(yè)來(lái)說(shuō)是一個(gè)巨大的蛋糕，很少有人會(huì)不為此觸動(dòng)。

總結(jié)

大家可以發(fā)現(xiàn)，其實(shí)我所說(shuō)的不看好小程序的未來(lái)，只是不看好微信小程序的未來(lái)，但是小程序這種生態(tài)模式，絕對(duì)是未來(lái)的一個(gè)趨勢(shì)所在，因?yàn)樗鼡碛刑囟ǖ膽?yīng)用場(chǎng)景，符合人們對(duì)于碎片化，場(chǎng)景化的功能與服務(wù)的期待。

所以我認(rèn)為，小程序的設(shè)計(jì)模式是設(shè)計(jì)師一定要去學(xué)習(xí)的，而企業(yè)也一定要研究自己的產(chǎn)品是否在小程序下有應(yīng)用場(chǎng)景，因?yàn)檎l(shuí)都不能保證，小程序是否也會(huì)有像 App 一樣，發(fā)生流量井噴的一天，到那時(shí)候如果再上車，真的就為時(shí)已晚了。

很多朋友問(wèn)我為什么挑選這個(gè)時(shí)間來(lái)寫小程序？為什么不趕小程序大火的時(shí)候?qū)?？或者為什么不寫一些別的流行趨勢(shì)上的話題？

• 第一，寫文章不是為了追趕流行趨勢(shì)，而是寫我想寫的內(nèi)容。
• 第二，只有市場(chǎng)冷靜下來(lái)，我們才能更清晰的分析一件事情，包括我在內(nèi)也是。只引入我思考的過(guò)程，而不帶有主觀的偏見(jiàn)，是我寫文章的原則。

希望我能一直帶著這樣的態(tài)度給大家?guī)?lái)更多有益的內(nèi)容。

另外，由于文章的篇幅有限，很多的內(nèi)容其實(shí)經(jīng)歷過(guò)了很多次篩選，才最終呈現(xiàn)給大家，希望能幫助到正在研究小程序的你。

文章來(lái)源：優(yōu)設(shè)

您最近填寫過(guò)在線表單了嗎？

答案應(yīng)該是肯定的。根據(jù)最近的研究，84% 的人每周至少會(huì)填寫一份線上表單。

雖然你可能沒(méi)有感受到，但在線填表單已經(jīng)成為我們生活中不可或缺的一部分了。

其實(shí)，幾乎每個(gè)把用戶由 A 帶向 B 的線上交互都是一個(gè)網(wǎng)絡(luò)表單：與某個(gè)公司聯(lián)系、訂火車票、購(gòu)物、訂一晚酒店等等。

網(wǎng)絡(luò)表單最早在 1994 年開(kāi)始用于在線銷售，第一個(gè)拖拽式表單 2006 年在屏幕上出現(xiàn)。從那時(shí)起，表單已經(jīng)成為線上交互的關(guān)鍵。

企業(yè)和客戶之間需要通過(guò)網(wǎng)站進(jìn)行聯(lián)系，小到縣城的官網(wǎng)，大到國(guó)家政府網(wǎng)站，現(xiàn)在很難想像一個(gè)沒(méi)有網(wǎng)絡(luò)的世界。

但為什么線上表單一直備受詬??？

當(dāng)然，確實(shí)沒(méi)幾個(gè)人喜歡填表，但大多數(shù)人絕對(duì)不會(huì)介意填寫那些清晰、簡(jiǎn)潔、設(shè)計(jì)優(yōu)秀的表單。

其實(shí)這也就是癥結(jié)所在。太多的在線表單冗長(zhǎng)、令人迷惑或讓人感到有所冒犯（有時(shí)甚至三者同時(shí)出現(xiàn)）。

當(dāng)表單產(chǎn)生讓人迷惑，或提出的要求超出必要范圍時(shí)，用戶的放棄幾率就會(huì)大大增加。 有些用戶可能會(huì)放棄填寫，甚至退訂整個(gè)業(yè)務(wù)。無(wú)論是以上哪種情況，您都不會(huì)再有第二次機(jī)會(huì)。

在設(shè)計(jì)一個(gè)表單的時(shí)候，我們?cè)趺幢ＷC用戶能填到最后一步？

「創(chuàng)建一個(gè)表單很簡(jiǎn)單，難的是讓人填完它?！?

在幫助 420 萬(wàn)用戶創(chuàng)建線上表單后，我們?cè)?JotForm 發(fā)現(xiàn)了一件重要的事情，就是一些小小的改變會(huì)讓整個(gè)事情大有改觀。通常，這些改變都是從那些被放棄的表單中獲得的靈感。

例子：

• HubSpot 發(fā)現(xiàn)，當(dāng)一份 14 頁(yè)的潛在用戶登記表，被放在一個(gè)單獨(dú)的登錄頁(yè)上時(shí)，用戶填完的可能性要高出 17%。
• Marketo 發(fā)現(xiàn)，一些非關(guān)鍵的填寫區(qū)域，反而讓每位潛在客戶的線索成本上漲了 25%。

表單設(shè)計(jì)成什么樣呢？應(yīng)該直觀、簡(jiǎn)單以及體驗(yàn)友好。以下是一些推薦的參考方法。

第一部分：表單的主要元素

1. 歡迎填表者：標(biāo)題與介紹

無(wú)論是誰(shuí)，歡迎朋友的時(shí)候難道不會(huì)說(shuō)「你好嗎？」我們都知道禮貌的重要性，但是在線上卻往往忽略了這一點(diǎn)。

歡迎頁(yè)和標(biāo)題讓您有機(jī)會(huì)以一種清晰而友好的方式介紹表單和自己，而且還會(huì)留下一個(gè)良好的第一印象。

看看 BettingExpert 的數(shù)據(jù)吧：通過(guò)修改表單標(biāo)題來(lái)強(qiáng)調(diào)「注冊(cè)理由」以后，他們的注冊(cè)率提高了31.54%。

標(biāo)題是對(duì)下文最短最精的概括。用戶一般都會(huì)跳過(guò)表單內(nèi)容，而且?guī)缀醵疾粫?huì)仔細(xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說(shuō)清楚一個(gè)表單的目的尤其重要。

標(biāo)題可以簡(jiǎn)單理解為描述被調(diào)查者對(duì)表格的期望。盡可能保持中立：要確保應(yīng)答者誠(chéng)實(shí)回答，而不是去滿足出題者的設(shè)想。甚至像陳述一個(gè)目標(biāo)這樣簡(jiǎn)單的事情，也可能會(huì)不知不覺(jué)地誘使應(yīng)答者試圖迎合。

而且現(xiàn)在也需要一份清單，說(shuō)明應(yīng)答者應(yīng)該事先準(zhǔn)備的外部文件，沒(méi)人想中途去滿屋子找納稅證明或者護(hù)照。

如果填表需要很長(zhǎng)的時(shí)間去完成，一定要提前告知用戶。不過(guò)如果是又快又簡(jiǎn)單的？讓用戶感到驚喜吧(但不要冒險(xiǎn)侮辱任何人的智力，以防萬(wàn)一)。畢竟，他們能夠通過(guò)查看進(jìn)度條或字段數(shù)量來(lái)推斷出這一點(diǎn)。

2. 放置相關(guān)的標(biāo)題和副標(biāo)題

一個(gè)有趣的事實(shí)：人類會(huì)在 50 毫秒內(nèi)形成第一印象。重點(diǎn)：由于時(shí)間不夠長(zhǎng)，他們無(wú)法仔細(xì)閱讀你的作品。

表單用戶很可能就是快速瀏覽一小部分內(nèi)容，忽略大部分內(nèi)容。而且有很大可能是他們正在忙著其他事情，無(wú)法集中注意力或者幾乎就沒(méi)有什么耐心，只想要快點(diǎn)結(jié)束。

顯然，我們無(wú)法阻止用戶，所以只能通過(guò)簡(jiǎn)潔明了的標(biāo)題來(lái)引導(dǎo)他們。標(biāo)題絕對(duì)是個(gè)得力助手：可以將文本結(jié)構(gòu)化、清晰化、保持用戶的參與度。

用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做，而不是非得把剩下的全部看完。

測(cè)試這一點(diǎn)的最好方法是單獨(dú)閱讀標(biāo)題，是否能讓人看懂呢？

3. 問(wèn)題之間要有分隔符

分隔符很重要。就傳統(tǒng)表單來(lái)說(shuō)，在視覺(jué)上把問(wèn)題隔開(kāi)以達(dá)到減少干擾的最好方法，就是使用分隔符。并不需要在視覺(jué)上做出很大的區(qū)別，區(qū)別太大反而容易分散用戶注意力。

4. 多頁(yè)面表單或單頁(yè)表單？

這主要取決于表單有幾個(gè)議題。

如果只有1，2個(gè)議題，單頁(yè)表單肯定是最佳選擇。但是如果一個(gè)表單有很多議題，那么就需要多頁(yè)表單來(lái)呈現(xiàn)。想象一下：用戶在面對(duì)一個(gè)似乎有成千上百議題的表單時(shí)，得有多心煩。

5. 強(qiáng)調(diào)「行動(dòng)召喚」（CTAs，Calls-to-Actions）

成功的「行動(dòng)召喚」強(qiáng)調(diào)的是「行動(dòng)」部分：?jiǎn)螕暨@個(gè)按鈕，用戶要執(zhí)行什么操作？類似「發(fā)送」，「注冊(cè)」或者「過(guò)程」之類的通用標(biāo)簽并不會(huì)削弱召喚機(jī)制。描述越多越好。

為了消除不確定性，試著從用戶的角度回答一下這個(gè)問(wèn)題「我想干什么？」舉個(gè)例子，如果是某項(xiàng)服務(wù)的調(diào)查表單，那就應(yīng)該是「我需要免費(fèi)咨詢」。

還需要更多證據(jù)嗎？在這類研究中，Unbounce 發(fā)現(xiàn)只是把「開(kāi)始你的試用」換成「開(kāi)始我的試用」，就提高了90% 的點(diǎn)擊率。

6. 標(biāo)明表單中的區(qū)域

這并不是說(shuō)要弄得花里胡哨的……

單選框、挑選區(qū)域和復(fù)選框之所以有效，是因?yàn)樗鼈兗群?jiǎn)單又常見(jiàn)。表單元素的標(biāo)準(zhǔn)格式等同于更好的可用性。

單選框適用于有很多選項(xiàng)而只有一個(gè)可選的情況。復(fù)選框用在多項(xiàng)選擇的情況下最好。

為了更短的認(rèn)知適應(yīng)過(guò)程，要盡可能地使用多選框或者單選框而不是下拉菜單。就像 Luke Wroblewski 說(shuō)的：「下拉菜單應(yīng)該是 UI中的最后選擇?！?

7. 別忘了「感謝」頁(yè)面

記住用戶是花時(shí)間的。所以千萬(wàn)不要唐突結(jié)束，要記得說(shuō)謝謝。

第二部分：怎么寫用戶才愿意看

以下是一些關(guān)于表單書寫藝術(shù)的小建議。

1. 言簡(jiǎn)意賅

從形式上來(lái)說(shuō)，我們都更喜歡簡(jiǎn)單的語(yǔ)言，尤其是那些學(xué)者，天才和專家。那為什么還有那么多線上對(duì)話像是復(fù)讀機(jī)一樣？

「請(qǐng)接受來(lái)自我們最誠(chéng)摯的道歉。即便如此，我們還是希望能知道您的建議。除此之外……」

像一個(gè)老學(xué)院派那樣說(shuō)話只會(huì)疏遠(yuǎn)用戶，讓他們瞠目結(jié)舌。

簡(jiǎn)單不意味愚蠢，而是等于可讀性。這意味著最清晰的平白直述。每個(gè)詞語(yǔ)都應(yīng)該是最短，最直接的版本，能用「不過(guò)」就別用「盡管如此」。不用行話，不寫復(fù)雜句。

你可以通過(guò)大聲朗讀來(lái)檢查連貫性。耳朵能夠聽(tīng)到眼睛看不到的東西，特別是在描述那些冗長(zhǎng)復(fù)雜概念的時(shí)候。

2. 擬人化

一份表單應(yīng)該就像是你和填表者之間的對(duì)話。通過(guò)用「我」，「你」，「你的」這些代詞來(lái)擬人化。

3. 減少被動(dòng)句

主動(dòng)語(yǔ)態(tài)的表達(dá)（比如：約翰寫了一封投訴信）比被動(dòng)語(yǔ)態(tài)（比如：一封投訴信由約翰寫出）更加有力。

被動(dòng)語(yǔ)態(tài)會(huì)更冗長(zhǎng)，不夠集中。

（譯者注：以下文章中帶橫線的內(nèi)容適用于英語(yǔ)語(yǔ)法，不感興趣的讀者可自行跳過(guò)。）

一個(gè)被動(dòng)語(yǔ)態(tài)句子究竟有多糟？這是兩點(diǎn)教訓(xùn)：

• 動(dòng)作的執(zhí)行者不夠清晰（一封信被寫錯(cuò)了）
• 這個(gè)句子的 Be 動(dòng)詞（to be ,has been,was）后面跟著一個(gè)過(guò)去分詞。

還是不確定？你可以去查一下微軟 Word 可讀性標(biāo)準(zhǔn)，或者普渡大學(xué)語(yǔ)句方法。

4. 盡可能地刪減詞語(yǔ)

許多作者都會(huì)陷入這樣的思維誤區(qū)：用的詞越多，就顯得他們?cè)铰斆?。其?shí)不是這樣的。在表單編寫方面，或者說(shuō)各種寫作中，刪減詞語(yǔ)都要比添加詞語(yǔ)更加有益。

「你刪掉的每一個(gè)詞，都會(huì)為你多增加一個(gè)讀者。」

在仔細(xì)檢查不必要的詞語(yǔ)后，文章會(huì)更篤實(shí)，更連貫，更吸引人。

刪減重點(diǎn)：

• 副詞（以ly結(jié)尾）。
• 無(wú)意義的量詞（很多，大量）。
• 空洞的程度形容（副）詞（非常，特別，尤其）。
• 「that」這個(gè)詞。
• 非必要信息。
• 模糊詞（東西，少量，大量）。

5. 盡可能使用縮寫

比起完整形態(tài)（比如 cannot，is not），語(yǔ)句的縮寫形式（比如 can’t，isn’t）能夠讓文章看起來(lái)更簡(jiǎn)潔，友好和易讀。

另外，還能節(jié)省文字篇幅。一份優(yōu)秀的表單閱讀性都不錯(cuò)。

What’s 優(yōu)于 What is。很簡(jiǎn)單。

6. 長(zhǎng)句變短句

冗長(zhǎng)曲折的句子容易讓人難以理解。密密麻麻的文字堆也是如此。

對(duì)于大多數(shù)讀者來(lái)說(shuō)，每個(gè)句子最多 20 個(gè)單詞，每個(gè)段落最多 3 個(gè)句子，是最合適的。把每個(gè)長(zhǎng)句都擴(kuò)成兩個(gè)短句。短句實(shí)際上并不遜色。

使用空格，項(xiàng)目符號(hào)，表格以及打破繁瑣說(shuō)明的任何其他元素，都會(huì)使您的讀者松一口氣。

7. 檢查文字

在我寫博客的過(guò)程中，我（艱難地）認(rèn)識(shí)到，優(yōu)秀的文章是 30％ 的寫作加上 70％ 的編輯。

當(dāng)你完善了問(wèn)題，精簡(jiǎn)了文字和內(nèi)容后，把表格存儲(chǔ)好。隔幾天再回過(guò)頭來(lái)看，你會(huì)發(fā)現(xiàn)有些之前沒(méi)有發(fā)現(xiàn)的地方還可以再改進(jìn)。

第三部分：表單心理學(xué)

大多數(shù)用戶體驗(yàn)的心理學(xué)原理其實(shí)都在人們的潛意識(shí)中，所以難以讓人注意到。

但是每種顏色，字體，線條和按鈕都有其用途。

日常的小規(guī)模設(shè)計(jì)可能不如十億美元的營(yíng)銷活動(dòng)那么引人注目。但小設(shè)計(jì)也需要花心思。而且，研究令人愉悅的設(shè)計(jì)背后的心理學(xué)機(jī)制很有意思，成本也不高。

以下是一些關(guān)鍵的心理原則，這些原則構(gòu)成了設(shè)計(jì)優(yōu)良的表格的堅(jiān)實(shí)基礎(chǔ)。

1. 比較成本和收益

我們做出的每一個(gè)決定，從倒垃圾到訂婚，都要經(jīng)過(guò)我們頭腦中的自動(dòng)成本收益分析。一項(xiàng)任務(wù)的成本是否值得完成后的收益？

設(shè)計(jì)師的工作是確保用戶在感知上收益是大于成本的。

當(dāng)然，成本與收益是主觀的，填表通常源于義務(wù)，而不是受訪者希望從中獲益的行為。除非給受訪者獎(jiǎng)勵(lì)，否則無(wú)法確保收益。但是我們可以把成本降到。

降低受訪者成本的一些關(guān)鍵策略:

2. 使用文本塊

+1-919-555-2743 vs 19195552743.

哪個(gè)電話號(hào)碼會(huì)留在你的腦海里？當(dāng)然是第一個(gè)。那是因?yàn)樗环謮K了。

組塊是一種方便的記憶技術(shù)：我們把它用于銀行個(gè)人識(shí)別碼、社會(huì)安全號(hào)碼和儲(chǔ)物柜代碼。它指的是將信息排列成「塊」的過(guò)程，使內(nèi)容更容易保留、處理和回憶。

研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。所以盡可能使用它：針對(duì)段落，列表，關(guān)鍵步驟等等。

3. 定義格式要求

如果可能，避免任意格式化規(guī)則。但如果是必要的規(guī)則，用紅色記號(hào)筆拼寫出來(lái)。填表單時(shí)，沒(méi)人愿意猜。密碼要求、語(yǔ)法規(guī)則、編號(hào)間距等等，如果一個(gè)字段需要特定的輸入，告訴用戶。

席克定律

如果我要舉辦一個(gè)晚宴，我總是選擇從當(dāng)?shù)匾患倚‰s貨店購(gòu)買我的配料，而不是從一個(gè)雜亂無(wú)章的超市購(gòu)買。那是因?yàn)橛刑嗟倪x擇往往會(huì)讓人感到麻木。這就是席克定律：它指出，隨著選項(xiàng)增加，做出決定的時(shí)間也在增加。

應(yīng)用到用戶體驗(yàn)領(lǐng)域，席克定律簡(jiǎn)直就是去繁求簡(jiǎn)的一劑良方：限制導(dǎo)航選擇，給用戶明確但受限的選項(xiàng)。因?yàn)殡S著設(shè)計(jì)靈活性的增加，它的可用性會(huì)降低。少即是多。

4. 下定決心（再次）刪除

這個(gè)鏈接有什么用？還是右上角的按鈕？如果并沒(méi)有增效，那就是減效。每一個(gè)字，每一張圖片，鈴鐺圖標(biāo)或者口哨圖標(biāo)都不是100% 必需的，這些都會(huì)降低你表單的轉(zhuǎn)換率。

尼爾·帕特爾稱只需刪除一個(gè)字段，他的聯(lián)系人表單提交率就可以提高 26%。

正如杜魯門·卡波特曾經(jīng)說(shuō)過(guò)的，「我更相信剪刀，而不是鉛筆?！?

5. 減少打字需求

打字是在線表單中最耗時(shí)、最密集的部分，而且經(jīng)常會(huì)導(dǎo)致錯(cuò)誤——尤其是在手機(jī)上。用按鈕、滑塊替換文本框并使用自動(dòng)完成功能，將減少工作量并提高轉(zhuǎn)化率。

6. 用條件邏輯縮短表格

根據(jù) Marketing Insider Group 的調(diào)查，有 78％ 的互聯(lián)網(wǎng)用戶表示來(lái)自品牌的個(gè)人相關(guān)內(nèi)容會(huì)增加他們的購(gòu)買意愿。而當(dāng)體驗(yàn)與用戶無(wú)關(guān)時(shí)，營(yíng)銷活動(dòng)的效果將降低 83％。

因此，感謝條件邏輯！

條件邏輯（或「分支邏輯」）通過(guò)允許基于特定響應(yīng)的附加指令——類似：「如果這樣，那么」，簡(jiǎn)化了復(fù)雜的流程。

使用條件邏輯將不會(huì)顯示與用戶無(wú)關(guān)的問(wèn)題，從而減少完成表單的時(shí)間，從而使他們不太可能放棄前面的任務(wù)。

是的，這聽(tīng)起來(lái)像是常識(shí)，但是大多數(shù)表單都會(huì)向每個(gè)用戶（無(wú)論他們是誰(shuí)）提出相同的問(wèn)題。使用條件邏輯是雙贏的，因?yàn)橥ㄟ^(guò)明確定義用戶細(xì)分，可以捕獲更干凈，更有用的數(shù)據(jù)。

雙重編碼理論

我說(shuō)樹(shù)時(shí)。您就會(huì)想到樹(shù)干、綠葉、樹(shù)枝。

我們的大腦就像這樣聰明：它把圖像和文字聯(lián)系在一起。

這是雙重編碼理論背后的關(guān)鍵原則，該理論指出記憶有兩個(gè)不同但相互關(guān)聯(lián)的系統(tǒng)，一個(gè)用于文字信息(「樹(shù)」)，另一個(gè)用于視覺(jué)信息(「樹(shù)干、綠葉、樹(shù)枝」)。

當(dāng)某樣?xùn)|西以兩種方式(圖像和文字)被「編碼」時(shí)，它被理解和記住的幾率比僅僅以一種方式(圖像或文字)被編碼的幾率要高。

換句話說(shuō)，將單詞和圖像配對(duì)會(huì)使它們更容易記憶。兒童書籍充分利用了這一點(diǎn)。在設(shè)計(jì)表單時(shí)，有兩種方法可以將雙重編碼理論付諸實(shí)踐。

7. 信息可視化

我們的大腦處理圖像比處理文本快得多。使用圖標(biāo)、照片、形狀等線索——無(wú)論什么有助于說(shuō)明你的觀點(diǎn)——都會(huì)讓用戶體驗(yàn)更加直觀。

表單設(shè)計(jì)應(yīng)該是一致的，但這并不是說(shuō)就不能加入一些小驚喜。通過(guò)使用非標(biāo)準(zhǔn)的界面元素——如可點(diǎn)擊的圖像和切換的滑塊——可以使表單填寫更加愉快和直觀。

8. 顏色

你知道嗎：用戶最初對(duì)產(chǎn)品的判斷有 90% 僅僅基于顏色？

實(shí)際上，根據(jù)營(yíng)銷大師尼爾·帕特爾（Neil Patel）的說(shuō)法，色彩是「購(gòu)買特定產(chǎn)品的原因的 85％?！拐_的組合可以使讀者人數(shù)提高 40％，理解力提高 73％，學(xué)習(xí)能力提高 78％。

你不需要成為一名設(shè)計(jì)師來(lái)找出哪種配色方案和對(duì)比效果最好。像 Adobe Color CC  和 Paletton 這樣方便的程序可以幫助你選擇一個(gè)能反映你公司形象的調(diào)色板。

9. 讓表單更漂亮

我們是膚淺的生物，習(xí)慣于相信有吸引力的設(shè)計(jì)在其他方面也更好：更快、更智能、更易用。這被稱為「審美可用性效應(yīng)」，漂亮的界面增加了我們的耐心和忠誠(chéng)度，甚至讓我們更有同理心。

如果內(nèi)容或布局不吸引人，38% 的人會(huì)停止使用頁(yè)面。換句話說(shuō)，如果線上表單看起來(lái)不漂亮(也不容易填寫)，那就是浪費(fèi)時(shí)間。

當(dāng)然，一百個(gè)人心里有一百個(gè)漢姆雷特。但是一個(gè)簡(jiǎn)單的界面、干凈的字體和時(shí)尚的造型絕對(duì)會(huì)贏得用戶歡心。

進(jìn)度條效應(yīng)

如果我們知道我們已經(jīng)取得的進(jìn)展，我們就更有動(dòng)力去完成一項(xiàng)任務(wù)。特別是已經(jīng)領(lǐng)先進(jìn)度的時(shí)候，感知上的工作量會(huì)相應(yīng)減少，最終達(dá)到超預(yù)期效果。美國(guó)教授約瑟夫·努內(nèi)斯和澤維爾·德雷澤將這種現(xiàn)象總結(jié)為「進(jìn)度條效應(yīng)」——「當(dāng)人們能看到已付出的努力時(shí)，會(huì)更有動(dòng)力完成任務(wù)?！?

10. 以下是一些適用于表單的進(jìn)度條效應(yīng)的應(yīng)用方式：

問(wèn)題排列從易到難

如果表單里的問(wèn)題按照從簡(jiǎn)單到困難的順序排列(而且保持邏輯順序)，用戶將快速完成表單的初始階段。這反過(guò)來(lái)會(huì)觸發(fā)連勝效應(yīng)：快速進(jìn)步和動(dòng)力感帶來(lái)的滿足感，讓用戶不愿意打破連勝。這意味著，當(dāng)表單變得更加苛刻時(shí)，用戶會(huì)繼續(xù)堅(jiān)持下去。

畫出進(jìn)度條

隨時(shí)反映用戶的進(jìn)度。用戶越接近目標(biāo)，就越有可能完成。如果表單是多頁(yè)的，請(qǐng)指出還有多少頁(yè)要完成。

一份來(lái)自 Clutch 的研究表明 90% 的用戶希望在線表單能有進(jìn)度條來(lái)管控他們的花費(fèi)時(shí)間。

第四部分：?jiǎn)栴}、回答和分組

1. 用頭腦風(fēng)暴討論題目

所有的表單的關(guān)鍵都是題目。特別是在頭腦風(fēng)暴討論題目的時(shí)候，最好的就是從目標(biāo)出發(fā)，倒推回來(lái)。

所以你的第一個(gè)問(wèn)題就是：你的表單的目的是什么？入職表？反饋意見(jiàn)？研究表單？

盡可能地記下你希望從表格中獲得的信息。把它表達(dá)為題目(以問(wèn)號(hào)結(jié)尾)，而不是靈光一閃。一定留足時(shí)間反復(fù)推敲。

然后，寫下一些可能的答案，這些答案可能會(huì)給你一些靈感。

最后，頭腦風(fēng)暴討論這些題目，這些題目就會(huì)解答剛才提到的第一個(gè)問(wèn)題。

作為調(diào)查后的回顧，寫下每個(gè)問(wèn)題的回答百分比。將這些猜測(cè)與你的實(shí)際結(jié)果進(jìn)行比較，會(huì)發(fā)現(xiàn)下一輪要注意的盲點(diǎn)。

這種回顧過(guò)程還有助于您的設(shè)計(jì)并節(jié)省您的時(shí)間。

關(guān)于板塊的科學(xué)

根據(jù)表單轉(zhuǎn)換率報(bào)告，表單類型直接影響表單的板塊數(shù)量。仔細(xì)考慮每一個(gè)板塊的每個(gè)問(wèn)題。

現(xiàn)在，問(wèn)問(wèn)自己：你真的、確定、必須要問(wèn)哪些問(wèn)題？

多數(shù)情況下都不是必要的。但是，即便我們明白少即是多原則，但是真的有機(jī)會(huì)去用戶的腦子里一探究竟的時(shí)候，我們還是希望問(wèn)題越多越好。

當(dāng)然，這些問(wèn)題的答案是很重要。但真的重要到失去用戶都在所不惜么？

你需要用戶的配合。但是每加一個(gè)板塊，他們的耐心就會(huì)失去一點(diǎn)。所以，在你把所有的題目和答案全列出來(lái)以后，能刪盡量刪掉?？紤]收集數(shù)據(jù)的其他方法，并考慮這個(gè)題目是否可以推導(dǎo)出來(lái)，或者以后再說(shuō)甚至完全排除。

盡量避免可選問(wèn)題。如果必須，請(qǐng)?jiān)诒韱巫詈罅谐鰜?lái)。

2. 正確地分組題目

將線上表單結(jié)構(gòu)化是成功的關(guān)鍵。

在你經(jīng)過(guò)頭腦風(fēng)暴討論，修剪精煉得出了最終的問(wèn)題清單后，就該組織他們了。用一個(gè)「主題」標(biāo)題將它們組織成組和子組，比如說(shuō)聯(lián)系方式，工作經(jīng)驗(yàn)等。

這樣一來(lái)，用戶不用去讀具體的問(wèn)題就大概知道自己接下來(lái)要做什么。

3. 定義問(wèn)題的邏輯序列

現(xiàn)在要考慮問(wèn)題的順序了。按照經(jīng)驗(yàn)來(lái)看，主題相似的問(wèn)題，就應(yīng)該放在一起。

每一個(gè)問(wèn)題，每一個(gè)板塊，都應(yīng)該激勵(lì)用戶到下一步。大跨步似的前進(jìn)會(huì)讓用戶困惑，所以要用一種一步一步引導(dǎo)用戶往前的模式。

用戶會(huì)通過(guò)調(diào)節(jié)對(duì)信息的流動(dòng)有一種預(yù)判。比如說(shuō)，「你叫什么名字？」應(yīng)該在「你住在哪兒？」之前，而「介紹一下你的工作經(jīng)驗(yàn)？」應(yīng)該再往后。

4. 決定「必填 vs 選填 vs 友好」

最好的做法是把你的表單只限于必填的問(wèn)題。選填問(wèn)題將毫無(wú)必要地延長(zhǎng)表單并激怒用戶：「你從哪里聽(tīng)說(shuō)我們的？」 「你想收到營(yíng)銷郵件嗎？」

不過(guò)對(duì)那些非強(qiáng)制性的但是友好的問(wèn)題，將它們放在表單的末尾，作為可選的后續(xù)內(nèi)容。這樣，他們會(huì)感覺(jué)不那么有侵略性，也不會(huì)影響你的轉(zhuǎn)化率。

5. 一次只問(wèn)一件事

雙管齊下的題目會(huì)讓用戶覺(jué)得模棱兩可。而且——你已經(jīng)猜到了——模糊的答案無(wú)法量化。

看看題目中有沒(méi)有用「和」，「或」。找到了嗎？如果有，把這個(gè)題目改成兩個(gè)。

題目越清楚，答案就越清楚。答案越清楚，數(shù)據(jù)就越清晰。

6. 提供便利

優(yōu)秀的表單描繪了一條清晰的路線，通過(guò)線索、提示等引導(dǎo)用戶完成表單。路線越短，用戶完成的可能性就越大，所以盡可能地給用戶提供便利。

以下是比較有用的便利方法：

郵編索引

要求用戶填寫地址的時(shí)候，最好的方式是只讓他們填寫門牌號(hào)和郵編，然后使用郵編索引服務(wù)完成地址信息的其他內(nèi)容。（譯者注：此條比較適用于國(guó)外。）

默認(rèn)提示

默認(rèn)文本提示是出現(xiàn)在表單字段中描述其預(yù)期值的淺色文本。只有在存在潛在歧義的情況下，才應(yīng)該使用它。

字段標(biāo)簽

字段標(biāo)簽是出現(xiàn)在字段上面，關(guān)于問(wèn)題性的文本。它經(jīng)常都會(huì)出現(xiàn)，并且不應(yīng)該用占位符提示來(lái)替代。人們常常為使用默認(rèn)提示同時(shí)作為字段標(biāo)簽，但卻引發(fā)了可用性的問(wèn)題。

換句話說(shuō)，你可以使用字段標(biāo)簽，不用默認(rèn)提示；但是不能在沒(méi)有字段標(biāo)簽的情況下只有默認(rèn)提示。

預(yù)設(shè)答案

大家都喜歡做選擇題。它們可以節(jié)省讀者的時(shí)間，并且易于評(píng)估。

你可以通過(guò)回答「是/否」、「單選」或「多選」來(lái)預(yù)定義答案。如果有一個(gè)你無(wú)法預(yù)測(cè)的答案，添加一個(gè)「其他」文本框讓讀者輸入一個(gè)自定義的答案。

搜索預(yù)測(cè)

在要求用戶選擇他們的國(guó)家、職業(yè)或具有大量預(yù)定義選項(xiàng)的其他內(nèi)容時(shí)，搜索預(yù)測(cè)會(huì)減少所需的打字量(和認(rèn)知負(fù)荷)。

第五部分：表單的受眾，目的以及環(huán)境

表單只完成了一般的工作。它是被動(dòng)的，不是主動(dòng)的。表單的效果依賴于填表者。它們需要從一開(kāi)始就嵌入到框架中。

表單是交流的工具。需要兩方來(lái)參與。

因此，在設(shè)計(jì)表單時(shí)，你還需要從用戶的角度考慮……這從他們的目的和環(huán)境開(kāi)始。

為什么要有人填寫你的表格？他們的目的是什么？把它們寫下來(lái)。

目的和環(huán)境息息相關(guān)，所以要讓環(huán)境在你的頭腦中具體化。他們?cè)谀睦镆约叭绾翁顚懕砀瘢吭诩覇?？在筆記本電腦上？在手機(jī)上？在地鐵上？

環(huán)境不僅僅是場(chǎng)景。關(guān)鍵是用戶能明白在他們的幫助下你的表單可以實(shí)現(xiàn)什么目的。

1. 知道你的受眾是誰(shuí)

表單需要吸引目標(biāo)受眾的注意力——那么，這些受眾由誰(shuí)組成？

在泛泛人群中思考是沒(méi)有意義的。要集中你的注意力，集中在一個(gè)人身上——或者說(shuō)，一個(gè)「買家畫像」比任何一個(gè)普通人群給你的信息都多。

試著描繪一個(gè)理想的用戶畫像，有工作、個(gè)性、家庭、希望和夢(mèng)想。集中思考這個(gè)理想用戶群體。他們?cè)谀睦锷詈凸ぷ鳎克麄兊挠^點(diǎn)和價(jià)值觀是什么？他們與你的業(yè)務(wù)有什么關(guān)系？

如果你發(fā)現(xiàn)對(duì)這些理想群體來(lái)說(shuō)什么是有意義的，你就離最終給你帶來(lái)高價(jià)值數(shù)據(jù)的那些問(wèn)題又進(jìn)了一步。

這些人就是你需要反復(fù)思考的人。這些人就是會(huì)給你答案的人。

表單視覺(jué)和結(jié)構(gòu)

填表單肯定不會(huì)像過(guò)生日一樣充滿驚喜。

一致性是保持表單填寫體驗(yàn)順暢的關(guān)鍵。一致就是指顏色要一致、視覺(jué)感受要一致、主題調(diào)性要一致。

你的公司形象是什么？什么短語(yǔ)和單詞能概括這一點(diǎn)？你的價(jià)值觀是什么？在 JotForm，我們注重包容性、友好度和腳踏實(shí)地——我們的語(yǔ)言就在傳達(dá)這些主旨。

當(dāng)你定義了品牌調(diào)性后，在所有的表單中保持住——你的用戶應(yīng)該感覺(jué)到他們每一步都在和同一個(gè)友好的人互動(dòng)。

視覺(jué)一致性同樣重要。在整個(gè)表單中都應(yīng)該用一種視覺(jué)風(fēng)格(以后創(chuàng)建的其他表單同樣如此)。

2. 左上對(duì)齊標(biāo)簽

Google 的 UX 研究人員發(fā)現(xiàn)，將標(biāo)簽左上對(duì)齊會(huì)減少表單完成時(shí)間，因?yàn)樗枰摹敢曈X(jué)注視」更少。

3. 避免將問(wèn)題并排放置。

眼動(dòng)研究表明，簡(jiǎn)單的單列布局比并排放置的多列布局要好。

該規(guī)則的唯一例外是要求輸入日期（日，月，年）或時(shí)間（小時(shí)和分鐘）時(shí)，其中多個(gè)字段應(yīng)在一行上。

4. 嘗試一頁(yè)一事

每頁(yè)一件事是一種心理技巧，定義為：

「將一個(gè)復(fù)雜的過(guò)程分解成多個(gè)小步驟，并將這些小步驟單獨(dú)用一頁(yè)來(lái)呈現(xiàn)?！?

本質(zhì)上，用戶只需要關(guān)注一件事。一條信息、一個(gè)決定、一個(gè)問(wèn)題要回答。

整潔的頁(yè)面鼓勵(lì)用戶繼續(xù)執(zhí)行任務(wù)。

5. 用輸入框長(zhǎng)度提示用戶

把輸入框的長(zhǎng)度控制到正好能夠包含所有的輸入字符的長(zhǎng)度（用戶可以看到填入的完整內(nèi)容）。

輸入框的長(zhǎng)度應(yīng)該反映用戶預(yù)期輸入的文本量。郵政編碼或門牌號(hào)等字段應(yīng)該短于地址行。

貝馬爾德研究所的可用性研究發(fā)現(xiàn)，如果一個(gè)字段太長(zhǎng)或太短，用戶開(kāi)始懷疑他們是否正確理解了標(biāo)簽。這尤其適用于具有異常數(shù)據(jù)或技術(shù)標(biāo)簽的字段，如信用卡背面的 CVV 碼。

表單設(shè)計(jì)中的錯(cuò)誤和完成路徑

就像生活中一樣，填寫表格時(shí)有可能出錯(cuò)就像生活中一樣，關(guān)鍵問(wèn)題是發(fā)出錯(cuò)誤信號(hào)并允許快速糾正。

6. 不要只靠顏色

十分之一的男性有一定程度的色盲。

當(dāng)顯示驗(yàn)證錯(cuò)誤或成功消息時(shí)，不要依賴使用綠色或紅色文本(因?yàn)榧t綠色盲相對(duì)常見(jiàn))。使用文本、圖標(biāo)或其他東西。JotForm Cards 用一個(gè)微動(dòng)畫警告用戶，當(dāng)出現(xiàn)錯(cuò)誤時(shí)，該動(dòng)畫會(huì)說(shuō)「錯(cuò)誤」。

7. 在同一行內(nèi)指出錯(cuò)誤

向用戶顯示錯(cuò)誤發(fā)生的位置，并說(shuō)明原因。
如果您必須使用驗(yàn)證，請(qǐng)確保它是內(nèi)嵌的(在字段的右側(cè))，并提前報(bào)告錯(cuò)誤。不要等到用戶點(diǎn)擊提交來(lái)報(bào)告驗(yàn)證錯(cuò)誤。但是同樣，內(nèi)聯(lián)驗(yàn)證不應(yīng)該是實(shí)時(shí)的，因?yàn)檫@可能會(huì)在用戶完成字段之前報(bào)告錯(cuò)誤。

8. 使用字段驗(yàn)證

你需要一個(gè)電子郵件地址，你會(huì)收到一個(gè)沒(méi)有@符號(hào)的回復(fù)。你要求一個(gè)電話號(hào)碼，而你的回答中有一半位數(shù)不夠。

打字錯(cuò)誤不應(yīng)該成為表單可用性的障礙。

使用「字段驗(yàn)證」來(lái)確保得到您需要的答案，例如，「答案必須包含__」

JotForm Cards 恢復(fù)錯(cuò)誤輸入域名的用戶的電子郵件地址；約翰@ gnail . com 應(yīng)該是 john@gmail.com。

9. 但別太苛刻

如果用戶回答的方式有很大差異(例如，用+12345678912、+44 12345678912、012345678912回答「電話號(hào)碼」)，請(qǐng)將其轉(zhuǎn)換為一致的格式。

第六部分：關(guān)于支付表單

什么是支付表單？

支付表單就是線上的收銀臺(tái)。它授權(quán)在線支付，驗(yàn)證用戶的詳細(xì)信息，檢查資金是否可用，并確保你收到支付。

支付整合有很多優(yōu)勢(shì)。他們幫助你 ：

• 銷售產(chǎn)品或服務(wù)；
• 在結(jié)算過(guò)程中進(jìn)行復(fù)雜計(jì)算，例如增加稅收和運(yùn)輸成本或減去優(yōu)惠券；
• 呈現(xiàn)你的產(chǎn)品描述，如圖片、數(shù)量、顏色和尺寸選項(xiàng)；
• 收集固定金額的捐款和付款，或者通過(guò)訂閱服務(wù)保證周期性付款。

在設(shè)計(jì)支付形式時(shí)，遵循最佳實(shí)踐是至關(guān)重要的。以下是一些關(guān)鍵規(guī)則。

1. 限制付款步驟

Baymard 研究所分析了支付表單，發(fā)現(xiàn)支付過(guò)程太長(zhǎng)或太復(fù)雜是放棄支付的主要原因之一。所以一定要分塊，分得越細(xì)越好。

2. 使用安全視覺(jué)提醒

當(dāng)輸入敏感的細(xì)節(jié)，如信用卡細(xì)節(jié)時(shí)，用戶會(huì)對(duì)任何看起來(lái)可疑的東西保持高度警惕。最近的一項(xiàng)研究顯示，出于安全考慮，17%的購(gòu)物者沒(méi)有付費(fèi)就離開(kāi)了頁(yè)面。

專業(yè)的支付形式讓用戶感到輕松，而任何看起來(lái)「不舒服」的東西都會(huì)讓他們感到緊張。這就是為什么你應(yīng)該從頭開(kāi)始構(gòu)建支付表單時(shí)就保持謹(jǐn)慎——即使是最小的錯(cuò)誤或不一致也會(huì)嚇跑用戶。

它還有助于在表單上啟用 SSL 來(lái)幫助保護(hù)數(shù)據(jù)。用戶知道所有的互動(dòng)都是加密的，因此可以安心。JotForm 是最安全的數(shù)據(jù)傳輸方式:我們符合支付卡行業(yè)數(shù)據(jù)安全標(biāo)準(zhǔn) (PCI DSS) 1級(jí)，并啟用了 SSL。

3. 清楚地解釋你為什么要求敏感信息

人們?cè)絹?lái)越關(guān)注隱私和信息安全。如果你要求必須填寫敏感信息，請(qǐng)確保使用字段下方的注釋文本解釋為什么需要這些信息。

4. 保存數(shù)據(jù)

讓用戶可以選擇保存他們的地址和支付信息，可以使這個(gè)過(guò)程更快、更簡(jiǎn)單——尤其是在手機(jī)這樣的設(shè)備上。這同時(shí)也會(huì)給回頭用戶一種獎(jiǎng)勵(lì)和忠誠(chéng)的感覺(jué)。

5. JotForm添加支付集成的方式

• 第 1 步:添加你的品牌標(biāo)志和定制風(fēng)格。
• 第 2 步:使用鏈接按鈕輸入集成憑據(jù)，或者直接輸入。
• 第 3 步:添加產(chǎn)品圖像、產(chǎn)品細(xì)節(jié)，如數(shù)量、顏色、尺寸。
• 第 4 步:計(jì)算優(yōu)惠券、稅金和運(yùn)費(fèi)。（你可以使用集成采購(gòu)訂單來(lái)檢查通用付款字段創(chuàng)建的詳細(xì)信息和選項(xiàng)(這不需要任何憑證，因?yàn)樗粫?huì)創(chuàng)建真正的交易)。你可以查看 Sofort 集成指南作為示例，了解整個(gè)支付過(guò)程。）
• 第 5 步:寫一封私人感謝信——自動(dòng)回復(fù)郵件。

一切就緒?，F(xiàn)在你可以在網(wǎng)站、博客或社交媒體上輕松銷售你的產(chǎn)品。當(dāng)你完成表單后…萬(wàn)歲！完成了！但是……等一下。你的表單可能已經(jīng)完成，但現(xiàn)在還不是發(fā)出去的時(shí)候…

還有最后一個(gè)步驟。

6. 發(fā)出前，測(cè)試您的表單

我們都有盲點(diǎn)。所以保持謹(jǐn)慎很重要，畢竟數(shù)據(jù)的質(zhì)量決定了表單的成功。因此，需要事前檢查一下調(diào)研題目，確保答案選項(xiàng)的完整可靠，沒(méi)有任何遺漏。

把表單發(fā)送給家人/朋友，并要求他們記錄填寫表單需要多長(zhǎng)時(shí)間，以及對(duì)這一連串的問(wèn)題他們體驗(yàn)如何。這也將有助于你下次評(píng)估表單的設(shè)計(jì)。

文章來(lái)源：優(yōu)設(shè)

畫插畫可以用哪些構(gòu)圖方式？他們的優(yōu)缺點(diǎn)是什么？本文總結(jié)了9種常見(jiàn)的構(gòu)圖方式。

框式構(gòu)圖

對(duì)角線構(gòu)圖

向心式構(gòu)圖

對(duì)分式構(gòu)圖

三角構(gòu)圖

垂直線構(gòu)圖

緊湊式構(gòu)圖

S型構(gòu)圖

三分式構(gòu)圖

近一年多接觸到了插畫 Banner 設(shè)計(jì)，算是自己邊做邊摸索，還在學(xué)習(xí)探索期，目前總結(jié)了一些做稿的思路，分享的目的是為了梳理完善自己的方法論，讓自己繼續(xù)向前進(jìn)一步。

本篇文章分享內(nèi)容：插畫 Banner 的三個(gè)層次。

插畫 Banner 的三個(gè)層次：文案層、畫面元素、背景層。

文案層

• 文案樣式：左對(duì)齊、居中對(duì)齊、右對(duì)齊。
• 文案組合設(shè)計(jì)形式：上下組合、上中下組合、一體組合。

畫面元素層

• 主體元素
• 相關(guān)聯(lián)元素
• 點(diǎn)綴元素

相關(guān)聯(lián)元素和點(diǎn)綴元素可以二選一，也可以同時(shí)使用，具體根據(jù)設(shè)計(jì)畫面而定。

背景層

以下內(nèi)容是我目前總結(jié)的背景層類型。選擇背景時(shí)的注意事項(xiàng)：背景一定要和元素風(fēng)格一致。我經(jīng)常會(huì)出現(xiàn)這樣的問(wèn)題，主體物和背景不融合，導(dǎo)致設(shè)計(jì)看起來(lái)主體元素是貼上去的。

注：以上所用到的圖片素材均來(lái)自于懶設(shè)計(jì)、稿定設(shè)計(jì)

Banner 設(shè)計(jì)畫面千千萬(wàn)，套路來(lái)回就幾樣。希望大家能在框架的基礎(chǔ)上進(jìn)行思維發(fā)散，創(chuàng)作出好的作品。

定量的設(shè)計(jì)套路（不變）+百變的設(shè)計(jì)風(fēng)格（變）=屬于你的千變?nèi)f化的 Banner 作品