中國著名哲學(xué)家老子說過：“千里之行始于足下”。這個簡單而強(qiáng)大的道理同樣適用于眾多數(shù)字產(chǎn)品的設(shè)計：與app或網(wǎng)站的關(guān)系建立于第一印象，由通過嘗試某種操作的實際交互流程所決定。這個過程通常需要花費一些時間，但對建立用戶與產(chǎn)品之間的粘性卻起著至關(guān)重要的作用。那么我們從介紹應(yīng)用的流行手法——新手引導(dǎo)開始，來看一下如何做引導(dǎo)流程。

為什么需要引導(dǎo)流程？

首先，來看看基本術(shù)語。Onboarding這個概念起源于人力資源領(lǐng)域，意為“新人的入職培訓(xùn)”，是企業(yè)制定的一系列用于幫助新員工迅速適應(yīng)新環(huán)境的步驟和方法，并卓有成效。對大多數(shù)人來說，嘗試新事物需要付出各種努力和考慮，讓人倍感壓力。所以哪怕是看起來很微小的幫助也可能讓決策更容易、更和諧。特殊的策略可以糾正可能產(chǎn)生的問題，讓新人在新地方更有信心，更高效的投入工作并與同事快速熟悉起來，更快為公司產(chǎn)生價值。

數(shù)字產(chǎn)品作為日常生活中不可或缺的一部分，一開始就吸納了onboarding這個概念，是指在用戶首次使用產(chǎn)品時取悅用戶并介紹產(chǎn)品的一系列交互。

設(shè)計新手引導(dǎo)時，最重要的一件事便是理出清晰的優(yōu)先級。用戶的時間是有限的，他們想要在實際上手操作之前，充分了解這個產(chǎn)品。此外，人的操作記憶和對優(yōu)先級的認(rèn)知是有限的，所以產(chǎn)品的創(chuàng)造者應(yīng)明確在不同階段分別提供不同的信息，而不是一次性給出大量數(shù)據(jù)，讓用戶感到困惑和尷尬。在Adobe Creative Cloud Blog最近的一篇文章中，UX研究員、認(rèn)知心理學(xué)家，Youtube的UX部門負(fù)責(zé)人Rob Youmans說，“在設(shè)計中，首次啟動時需要顯示重要度和新近度。當(dāng)用戶開始了解一個新產(chǎn)品時通常會有教程、向?qū)?、說明或其他內(nèi)容。設(shè)計師在這方面花功夫是極為明智的，重要的信息放最前或者最后，畢竟你希望人們稍后使用產(chǎn)品時記住它們。”

什么是新手引導(dǎo)？

新手引導(dǎo)是在用戶第一次與產(chǎn)品交互時展示的一組畫面。在絕大多數(shù)情況下，設(shè)計師會用3-4屏頁面去向新用戶介紹產(chǎn)品的相關(guān)信息。App 新手引導(dǎo)是尊重用戶的標(biāo)志: 通過它用戶可以快速了解這個app所能解決的問題、有什么用以及能夠幫用戶解決什么問題。當(dāng)然，如果信息足夠清晰，這是一個很好的、提升可用性的手段。

為什么你的app需要新手引導(dǎo)？

新手引導(dǎo)有三個基本功能：

打招呼

App新手引導(dǎo)是用戶與產(chǎn)品建立的第一次聯(lián)系。這是一種介紹行為，在大多數(shù)情況下，模仿真實交往場景，從打個招呼開始，尤其是當(dāng)應(yīng)用程序擁有吉祥物或性格角色時，它們可以成為與用戶交流的直接主體。打招呼需謹(jǐn)慎使用，問候語盡量短小精干，否則會轉(zhuǎn)移用戶對于核心信息的注意力。

信息傳達(dá)

這可能是新手引導(dǎo)任務(wù)中最有價值的部分。首先，新手引導(dǎo)是用戶入門的第一步，因此應(yīng)該告訴用戶為什么要使用本產(chǎn)品或者本產(chǎn)品有哪些基本功能。用戶研究和產(chǎn)品的USP（營銷理論，指商品獨特的銷售主張）有助于設(shè)計師和文案快速找到向用戶提供關(guān)鍵信息的方法。

參與

另外，新手引導(dǎo)為產(chǎn)品抓住用戶奠定了堅實基礎(chǔ)，它可以快速向用戶展示產(chǎn)品最有價值的地方，刺激用戶去嘗試，并容忍探索未知時可能會遇到的困難。此外，符合目標(biāo)受眾喜好的設(shè)計風(fēng)格，更能激發(fā)用戶想要了解更多的興趣。多數(shù)情況下，用戶是視覺驅(qū)動的生物：我們通常會對符合我們審美的設(shè)計或視覺表達(dá)出的特定情緒感興趣。而新手引導(dǎo)則是要從第一秒開始就充分利用這個法則。

新手引導(dǎo)設(shè)計需要注意什么？

新手引導(dǎo)的結(jié)構(gòu)與內(nèi)容對于項目來說是相對獨立的。影響設(shè)計解決方案的因素有很多，但都不外乎這三個核心問題：用戶需求/愿景/預(yù)期、產(chǎn)品性質(zhì)和商業(yè)目標(biāo)。作為產(chǎn)品的門面，新手引導(dǎo)是一種利用動態(tài)效果和吸引人的內(nèi)容來展示產(chǎn)品基本信息的方式。

自定義圖像或插畫

大部分人對圖片的解析速度快于文字，邏輯性的圖像可以將信息快速傳達(dá)給用戶。在引導(dǎo)中 使用照片或手繪稿，可以大大提升其解釋力和辨識度。選擇可以是多樣的，簡潔的圖標(biāo)或復(fù)雜精致的藝術(shù)作品都可以。插圖是一種不錯的方式，可以最大限度減少文案在頁面中的使用。在兒童或青少年app中，使用插圖特別有效并顯得更加人性化。

在近年的設(shè)計趨勢中，為特定界面設(shè)計自定義插圖已經(jīng)日益普及。大家都喜歡在app 新手引導(dǎo)嘗試各種設(shè)計風(fēng)格。在很多案例中，自定義插圖成為創(chuàng)作的中心內(nèi)容，用一種容易理解且吸引人的方式表達(dá)出產(chǎn)品的特性和用處。另一種流行的方法是引用吉祥物，模仿與用戶的真實溝通并設(shè)立情感紐帶。

文案與排版

新手引導(dǎo)，文字即是力量。 有力量的文字符合兩個簡單的原則：簡短、有效。毫無疑問， 精煉短小的句子比長句更難寫: 你必須找到有效的方法，避免用戶在閱讀新手引導(dǎo)時浪費寶貴時間。 如果允許，可以請一個文案專家，打造出字字珠璣的引導(dǎo)文案?；蛘?，利用你的閑暇時間去思考一些簡明、抓人眼球且清晰的文案 ，讓這些言語表達(dá)適用于目標(biāo)用戶并契合產(chǎn)品目標(biāo)。和設(shè)計方案一樣， 文案也需要反復(fù)推敲，以找到能打動用戶的最佳方式。

設(shè)計師應(yīng)該牢記的另一個點是：文案也是一個重要的視覺元素。除了圖標(biāo)、字段、按鈕、插圖、控件等，文字也是和其他圖形組件一樣占據(jù)屏幕或網(wǎng)頁的一部分，并影響app和網(wǎng)站的風(fēng)格呈現(xiàn)。此外, 文案成功與否也取決于文字的字體、樣式、背景，以及位置等設(shè)計方案的選擇。這些因素都極大影響了可讀性，所以在設(shè)計不當(dāng)時，文案就會失去本應(yīng)有的價值和意義。

動畫

另一種制作引導(dǎo)的方法不僅易傳達(dá)信息，而且更具吸引力，這就是運用動畫。動效讓交互變得更有活力, 讓界面擁有生命力，博人眼球。更重要的一點，動畫可以突出重要的細(xì)節(jié)。不過，動效會增加加載時所需時間與流量，因此需要與開發(fā)人員就技術(shù)實現(xiàn)進(jìn)行討論。

清晰的頁碼

一般來說，新手引導(dǎo)會有幾個頁面，每一頁對應(yīng)一個產(chǎn)品特性和用處。請記住，從這個一開始的交互開始，用戶就應(yīng)該知道他們在哪，使用路徑有多長，因此通常會使用頁面指示器這種簡單快捷的控件。

可以跳過

另一件需要注意的事情是：跳過引導(dǎo)。并不是所有用戶在第一次使用產(chǎn)品時都需要引導(dǎo)，因此對于某些產(chǎn)品，允許用戶跳過是合理的。是否允許用戶跳過，取決于對目標(biāo)受眾的測試與數(shù)據(jù)分析。

最后，在界面中，細(xì)節(jié)決定成敗。正如古諺語所說：“好禮服是邀請函，好頭腦是推薦信。”當(dāng)然，如果這個產(chǎn)品對用戶來說毫無用處，新手引導(dǎo)設(shè)計的再好，都無濟(jì)于事。然而，如果產(chǎn)品能滿足需求解決問題，并且易用性強(qiáng)，那么新手引導(dǎo)可以讓體驗更流暢、更愉快。好禮服能讓人印象深刻——經(jīng)過深思熟慮設(shè)計的新手引導(dǎo)便是如此。

原文作者：Tubik Studio

原文地址：https://uxplanet.org/design-of-onboarding-tutorial-greet-inform-engage-55c36c9b4999

翻譯：Donkey

譯文來源：微信公眾號“滬江UED”（ID：HJ-UED）

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