頁(yè)面轉(zhuǎn)化率低？用戶留存少？看完你就明白為什么了！

前言

影響 APP 轉(zhuǎn)化率的因素有很多，設(shè)計(jì)也是其中重要組成部分，那設(shè)計(jì)師需要如何應(yīng)對(duì)，才能助力用戶轉(zhuǎn)化呢？從用戶角度來(lái)看，助力轉(zhuǎn)化就是掃清理解障礙，提升瀏覽意愿與順暢度。

想要以設(shè)計(jì)語(yǔ)言達(dá)成以上目的，快速傳達(dá)有效信息是十分重要的一環(huán)，接下來(lái)，我們結(jié)合案例，聊聊快速傳達(dá)重要信息是如何通過(guò)節(jié)省用戶時(shí)間來(lái)助力轉(zhuǎn)化的。

為什么要快速傳達(dá)

研究表明，人類在面對(duì)非自身興趣的事物時(shí)，注意力只能高度集中 10 分鐘左右，短暫休息后再次集中注意力的時(shí)間則為 7-10 分鐘[1]。

·

當(dāng)用戶使用服務(wù)類 APP 的時(shí)間超過(guò)這個(gè)閾值后，就會(huì)因?yàn)檫t遲沒(méi)有達(dá)到目的而產(chǎn)生焦躁情緒，隨之而來(lái)的負(fù)面影響要么是跳出到其他 APP，亦或者對(duì)軟件產(chǎn)生厭煩感，而無(wú)論哪一種都不是我們想要看到的結(jié)果。這也就意味著，我們每次只有 20 分鐘的時(shí)間讓用戶完成從篩選到下單的時(shí)間。

因此，在用戶有限的時(shí)間與精力中，迅速的傳達(dá)有效信息，不僅可以縮短用戶從挑選到下單的流程，站在用戶角度來(lái)說(shuō)，因?yàn)榭梢钥焖俚恼业阶约合胍男畔?，也可以讓用戶切?shí)的感覺(jué)到這是“好用”的軟件。

因此我們需要快速傳達(dá)的理論依據(jù)就此成立：

·

如何快速傳達(dá)

那么如何快速傳達(dá)有效信息呢？方法有很多，今天我們重點(diǎn)闡述以下三個(gè)技巧：

·

接下來(lái)我們結(jié)合實(shí)際案例看看如何運(yùn)用以上手段以達(dá)到快速傳達(dá)的目的。

1. 塑造視覺(jué)焦點(diǎn)

什么是視覺(jué)焦點(diǎn)呢？就是畫面中讓我們能多停留幾秒的視覺(jué)元素，可以是一個(gè)點(diǎn)，一條線，一個(gè)面，通俗來(lái)講，就是頁(yè)面中最引人注意的地方，視線上交匯集中的地方，這個(gè)位置就叫做視覺(jué)焦點(diǎn)，而焦點(diǎn)可以通過(guò)構(gòu)圖，色彩運(yùn)用，比例等手段進(jìn)行塑造。

·

接下來(lái)我們結(jié)合十一活動(dòng)的實(shí)際案例說(shuō)說(shuō)如何進(jìn)行焦點(diǎn)塑造，我們需要先構(gòu)建合理的視覺(jué)層次結(jié)構(gòu)，好的層級(jí)能使觀者快速瀏覽信息，位于層級(jí)頂層的信息也可以在最短的時(shí)間內(nèi)讓人注意到。

·

根據(jù)人眼對(duì)畫面的閱讀習(xí)慣，位于頂部和正中這兩個(gè)位置的信息會(huì)最先被注意到，我們應(yīng)優(yōu)先將重要信息放在此處，符合了閱讀習(xí)慣之后，通過(guò)運(yùn)用色彩對(duì)比，字號(hào)大小等差異化手段，可以將信息的層級(jí)提高。

·

·

大字號(hào)更容易讓人一眼看到信息，因此就算是同處高層級(jí)的信息，通過(guò)內(nèi)部字號(hào)大小的對(duì)比，可以進(jìn)一步細(xì)分層級(jí)，讓視覺(jué)焦點(diǎn)更加具體

·

飽和度與對(duì)比色的運(yùn)用同樣重要，我們將彩色的圖片去掉顏色之后可以發(fā)現(xiàn)，色彩關(guān)系對(duì)畫面層次的影響，通過(guò)對(duì)灰度，明暗和色相的使用，可以使焦點(diǎn)位信息產(chǎn)生視覺(jué)前推感。

視覺(jué)焦點(diǎn)在具體案例中的應(yīng)用展示：

·

58 到家活動(dòng)

小結(jié)：通過(guò)構(gòu)建畫面層級(jí)之后，運(yùn)用字號(hào)大小和顏色對(duì)比等手段做出差異化設(shè)計(jì)，可以快速將用戶注意力吸引至焦點(diǎn)區(qū)域，并被引導(dǎo)著跳過(guò)次要區(qū)域，視線按從上到下，從左到右的順序，在各個(gè)焦點(diǎn)位中跳躍，從而達(dá)成我們優(yōu)先傳遞重要信息的目的。

2. 前置思考過(guò)程

我們平時(shí)在想要達(dá)成某種目的時(shí)，需要先獲取大量信息，在腦內(nèi)羅列整理，然后歸納出有用信息后，再進(jìn)行處理。

·

用戶在使用 APP 時(shí)也是這樣，比如想點(diǎn)餐時(shí)，要挑餐廳，挑口味，挑菜品，而這一系列的信息整理過(guò)程是十分繁瑣又消耗耐性的，正因此，我們才經(jīng)常面臨：不知道吃啥啊，這樣的難題。

而這個(gè)思考過(guò)程是可以通過(guò)設(shè)計(jì)語(yǔ)言來(lái)簡(jiǎn)化，甚至提前完成的。通過(guò)將頁(yè)面中的信息分類后，將同類信息放置在不同組塊中的相同位置，使用相同的顏色和格式，會(huì)幫助用戶形成閱讀慣性。

·

結(jié)合十一活動(dòng)案例來(lái)看，每個(gè)組件中都會(huì)包含有幾類基本信息：產(chǎn)品名，利益點(diǎn)，和下單跳轉(zhuǎn)按鈕，每個(gè)組件中的信息都在固定的區(qū)域展示.

·

同時(shí)用高飽和度的紅色來(lái)強(qiáng)調(diào)，在這樣的固定排列中，用戶想要取得什么樣的信息時(shí)，可以第一時(shí)間去固定的位置尋找，大大提高了信息獲取的效率。

前置思考在具體案例中的應(yīng)用展示：

·

小結(jié)：通過(guò)將畫面中的信息整理并歸類，我們可以縮短用戶的信息獲取與腦內(nèi)整理歸納的時(shí)間，讓用戶將有限的時(shí)間更多的放在優(yōu)惠對(duì)比與決策中去，這不但有助于提高下單率，易讀的版式也更容易讓用戶產(chǎn)生“好用”的感覺(jué)。

3. 米勒定律[2]

我們先來(lái)看以下兩段數(shù)字

·

是不是后一段更容易記憶，這涉及到一個(gè)叫“組塊”的概念，人腦記憶一組信息的時(shí)候，這組信息內(nèi)的元素?cái)?shù)量小于 7±2 時(shí)最容易記憶，具體數(shù)量因人而異，老年人的記憶數(shù)量會(huì)顯著降低。

因此一長(zhǎng)串?dāng)?shù)字看起來(lái)毫無(wú)規(guī)律難以記憶，而 3 個(gè)數(shù)字一組分成多個(gè)組塊后，則容易記憶很多，同一組塊內(nèi)的信息越少，越容易讓用戶記憶深刻。

這個(gè)定律對(duì)設(shè)計(jì)畫面同樣有著重要的影響，一個(gè)板塊中如果包含了過(guò)多的組塊，不僅會(huì)讓用戶對(duì)這個(gè)板塊的內(nèi)容難以記憶，也會(huì)因?yàn)樾畔⑦^(guò)多且沒(méi)有主次而大大增加篩選成本，用戶將時(shí)間過(guò)多的花費(fèi)在篩選上會(huì)延長(zhǎng)下單之前的流程，也會(huì)提高下單之前的跳出率。

·

結(jié)合我們的頁(yè)面設(shè)計(jì)來(lái)看，每一區(qū)域內(nèi)的組塊分布都不超過(guò) 5 個(gè)，同時(shí)組塊內(nèi)的信息類別也只有圖片、產(chǎn)品名、簡(jiǎn)要介紹與下游鏈接 4 部分組成，通過(guò)做減法，讓重要信息可以迅速被提取，更容易被記憶。無(wú)論對(duì)于新老用戶來(lái)說(shuō)，都可以有效的降低篩選成本，新用戶能更容易理解板塊功能，老用戶則更容易記住自己想找的功能在什么區(qū)域。

米勒定律在具體案例中的應(yīng)用展示：

·

·

58 到家電商首頁(yè)展示

小結(jié)：通過(guò)簡(jiǎn)化板塊中的信息類別，能有效縮短新老用戶尋找服務(wù)的時(shí)間，同時(shí)老用戶也更容易記住想要的板塊在什么位置，下次再使用的時(shí)候，迅速觸達(dá)。

寫在最后

作為設(shè)計(jì)師，兼顧商業(yè)化與用戶體驗(yàn)是我們的必修課，好的設(shè)計(jì)不僅僅是要“好看”，更需要兼?zhèn)溆脩襞c產(chǎn)品兩方面的功能性，將視覺(jué)語(yǔ)言與心理學(xué)、行為學(xué)的結(jié)合運(yùn)用，既可以有效的提升用戶體驗(yàn)，提高粘性，又能縮短下單前的必要流程，提高轉(zhuǎn)化率。

注釋：

[1]出自《教書育人》2016 年 1 期 38 頁(yè)，「運(yùn)用心理學(xué)規(guī)律提高課堂學(xué)習(xí)效率」章節(jié)

[2]米勒(Miller，1956)的分析，人腦處理信息有一個(gè)魔法數(shù)字 7(正負(fù) 2)的限制，也就是說(shuō)，人的大腦最多同時(shí)處理 5 到 9 個(gè)信息(chunks)。原因是短期記憶儲(chǔ)存空間的限制，超過(guò) 9 個(gè)信息團(tuán)，將會(huì)使得大腦出現(xiàn)錯(cuò)誤的概率大大提高。

歡迎關(guān)注「58UXD」的微信公眾號(hào)：

·