對(duì)癥下藥！如何設(shè)計(jì)受歡迎的引導(dǎo)頁(yè)？（二）

編者按：今天微博的@Jason-yangsong?同學(xué)分享了他的處女作，雖然是第一次總結(jié)，但文章很有看點(diǎn)，以常用的引導(dǎo)頁(yè)作為切入點(diǎn)，結(jié)合引導(dǎo)頁(yè)目的與設(shè)計(jì)原則，幫設(shè)計(jì)師深入到用戶體驗(yàn)層面思考引導(dǎo)頁(yè)的設(shè)計(jì)，實(shí)例與理論兼?zhèn)洌貏e值得借鑒喲。

之前有同學(xué)從目的與表現(xiàn)方式的角度切入談引導(dǎo)頁(yè)設(shè)計(jì)，一同學(xué)起來(lái)！>>> 《對(duì)癥下藥！如何設(shè)計(jì)受歡迎的引導(dǎo)頁(yè)？》

一、用戶引導(dǎo)的作用

移動(dòng)應(yīng)用在新用戶注冊(cè)以及新版本發(fā)布的時(shí)候都會(huì)使用用戶引導(dǎo)，那用戶引導(dǎo)的作用是什么呢？

可以從兩方面來(lái)進(jìn)行探討：一方面從產(chǎn)品的角度出發(fā)，產(chǎn)品需要通過(guò)用戶引導(dǎo)來(lái)突出產(chǎn)品的新功能和特性，說(shuō)明功能結(jié)構(gòu)變化，避免產(chǎn)品的陌生感，滿足產(chǎn)品的需求。例如花瓣，通過(guò)圖中的用戶引導(dǎo)說(shuō)明產(chǎn)品各模塊的功能，并鼓勵(lì)用戶去探索，建立產(chǎn)品與用戶間的互動(dòng)，拉近了用戶與產(chǎn)品間的距離。

另一方面從用戶的角度出發(fā)，用戶需要通過(guò)用戶引導(dǎo)了解產(chǎn)品的功能以及如何操作，迅速上手這個(gè)產(chǎn)品，降低學(xué)習(xí)成本，滿足用戶的需求。例如paper，通過(guò)圖中的用戶引導(dǎo)形式告訴用戶可以通過(guò)手勢(shì)進(jìn)行操作，從而實(shí)現(xiàn)與產(chǎn)品的交互，建立用戶的使用認(rèn)知，讓用戶知道如何去操作，用戶很快上手這個(gè)產(chǎn)品。

二、用戶引導(dǎo)的設(shè)計(jì)原則

1. 保證用戶引導(dǎo)的有效性

保證用戶引導(dǎo)發(fā)揮自身的作用，突出產(chǎn)品的功能，幫助用戶更好的使用產(chǎn)品。這是用戶引導(dǎo)設(shè)計(jì)的第一原則，用戶引導(dǎo)是對(duì)產(chǎn)品內(nèi)容以及形式的輔助說(shuō)明，如果不能保證用戶引導(dǎo)發(fā)揮作用，那用戶引導(dǎo)不但失去了意義，反而會(huì)影響了用戶體驗(yàn)。

2.?根據(jù)使用場(chǎng)景觸發(fā)相應(yīng)的用戶引導(dǎo)

用戶在使用產(chǎn)品的時(shí)候都是有一定的使用場(chǎng)景的，根據(jù)用戶的使用場(chǎng)景觸發(fā)相應(yīng)的用戶引導(dǎo)，保證在用戶需要的時(shí)候彈出引導(dǎo)是最符合用戶體驗(yàn)的，也是用戶最愿意接受的時(shí)候。這樣引導(dǎo)既不會(huì)特別突兀，弄的用戶不知所措，又能在相應(yīng)的場(chǎng)景下幫助用戶。例如Facebook開(kāi)啟定位的引導(dǎo)，但用戶需要發(fā)送當(dāng)前位置的時(shí)候，應(yīng)用會(huì)彈出圖中的引導(dǎo)形式，告訴用戶開(kāi)啟定位的作用，用戶在這種使用場(chǎng)景下會(huì)很樂(lè)意開(kāi)啟定位，從而提高了開(kāi)啟定位的轉(zhuǎn)換率，又不會(huì)覺(jué)得這個(gè)引導(dǎo)影響了自己的體驗(yàn)。

3. 減少對(duì)用戶體驗(yàn)的干擾，盡可能去提升用戶體驗(yàn)

用戶引導(dǎo)在用戶使用產(chǎn)品過(guò)程中的彈出是用戶意想不到的，很有可能就打擾了用戶使用產(chǎn)品的流暢性，破壞了用戶體驗(yàn)。因?yàn)檫@是用戶沒(méi)有預(yù)期突然出現(xiàn)的東西，在一定程度上會(huì)有一定的驚慌失措感，但是好的用戶引導(dǎo)出現(xiàn)在用戶需要的時(shí)候，反而會(huì)起到雪中送炭，提升用戶體驗(yàn)的作用。就好比用戶在無(wú)助的時(shí)候，旁人對(duì)用戶一句有益的提醒，反而感動(dòng)了用戶。比如Google搜索中，在用戶進(jìn)行拖動(dòng)操作的時(shí)候，頂部的狀態(tài)欄變成了一句溫馨的提示，非但不打擾用戶，反而有一定幫助，用戶會(huì)覺(jué)得很貼心。

三、用戶引導(dǎo)規(guī)范的制定

每個(gè)移動(dòng)應(yīng)用都有一套自己的用戶引導(dǎo)規(guī)范，在制定用戶引導(dǎo)規(guī)范的時(shí)候，不要一味的鉆到用戶引導(dǎo)的設(shè)計(jì)里面。研究各種競(jìng)品，借鑒各種用戶引導(dǎo)樣式，這本身無(wú)可厚非，但注意用戶引導(dǎo)的樣式要適合自己的產(chǎn)品。都說(shuō)paper的引導(dǎo)做的好，是因?yàn)閜aper主要的交互形式是手勢(shì)操作，所以這種用戶引導(dǎo)形式很適合paper，但移植到別的產(chǎn)品上就不一定合適了。

用戶引導(dǎo)規(guī)范的指定可以按照不同的形式進(jìn)行指定，一種是從用戶引導(dǎo)的樣式角度出發(fā)，把產(chǎn)品涉及到的各種用戶引導(dǎo)樣式一一羅列出來(lái)，并說(shuō)明每種引導(dǎo)樣式的適用范圍、觸發(fā)機(jī)制以及消除機(jī)制等。這種形式的優(yōu)點(diǎn)是各種引導(dǎo)樣式結(jié)構(gòu)清晰，一目了然。

另一種形式是從產(chǎn)品功能的角度出發(fā)，由于產(chǎn)品每個(gè)功能的重要程度和優(yōu)先級(jí)不同，對(duì)應(yīng)的需要突出強(qiáng)調(diào)的程度也不一樣，所以將用戶引導(dǎo)樣式分為強(qiáng)中弱三大類，對(duì)于產(chǎn)品主要功能，優(yōu)先級(jí)很高的采用強(qiáng)引導(dǎo)樣式，對(duì)于次要功能，優(yōu)先級(jí)稍差的采用適中的引導(dǎo)樣式，對(duì)于輔助功能，優(yōu)先級(jí)最低的采用弱的引導(dǎo)樣式。同時(shí)強(qiáng)中弱三大類里面又分別包括幾種引導(dǎo)樣式。這種形式的優(yōu)點(diǎn)是從產(chǎn)品角度出發(fā)，根據(jù)功能的重要程度的優(yōu)先級(jí)選擇對(duì)應(yīng)的引導(dǎo)樣式，方便快捷。

四、總結(jié)

移動(dòng)應(yīng)用的用戶引導(dǎo)設(shè)計(jì)要保證引導(dǎo)的有效性，根據(jù)使用場(chǎng)景進(jìn)行設(shè)計(jì)，減少引導(dǎo)對(duì)用戶的干擾。切記用戶引導(dǎo)的作用，選擇最合適自身產(chǎn)品的引導(dǎo)形式，讓用戶引導(dǎo)更好的拉近產(chǎn)品與用戶間的距離。

本文作者楊松，有不同觀點(diǎn)希望能互相溝通，請(qǐng)關(guān)注新浪微博@Jason-yangsong

超實(shí)用的指南好文合集！

色彩知識(shí)大科普！再也不做“色盲”啦！
《設(shè)計(jì)師配色寶典！教你從零開(kāi)始學(xué)配色（一）》

幫你全面搞定摳圖的那些事兒！
《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》

閱讀量過(guò)10萬(wàn)的超人氣自學(xué)指南！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

投稿者：@Jason-yangsong

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量89萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege