編輯導(dǎo)語：頁面轉(zhuǎn)化率低？用戶留存少？如何快速傳達(dá)，通過塑造視覺焦點(diǎn)、前置思考、米勒定律三個(gè)小技巧，教你輕松提高設(shè)計(jì)轉(zhuǎn)化率，對(duì)用戶體驗(yàn)設(shè)計(jì)感興趣的看過來，看完你就明白為什么了。

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

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

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

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

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

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

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

?二、如何快速傳達(dá)

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

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

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

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

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

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

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

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

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

58到家活動(dòng)

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

2. 前置思考過程

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

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

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

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

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

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

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

3. 米勒定律[2]

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

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

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

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

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

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

58到家電商首頁展示

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

三、寫在最后

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

注釋：

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

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

作者：環(huán)鐵藝術(shù)家；微信公眾號(hào)：58UXD

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心

題圖來自Unsplash，基于CC0協(xié)議