視覺層面的思考:6個為新手用戶設(shè)計的策略

0 評論 21899 瀏覽 405 收藏 10 分鐘

之前的文章里探討過界面的易操作性,提到的主要是視覺層面的思考,今天這篇想總結(jié)一下對于新手用戶,可以通過哪些設(shè)計策略來幫助他們進(jìn)行操作。

引導(dǎo)頁

引導(dǎo)頁的使用在PC端常見于安裝軟件的過程中,在安裝時,可以在進(jìn)度條的上方看見滾動播放的產(chǎn)品介紹,每一頁都會針對某一個產(chǎn)品的特性進(jìn)行宣傳,讓用戶在使用產(chǎn)品前,對產(chǎn)品的功能有一個大致的了解。

如今移動端的設(shè)計,同樣運(yùn)用了這個方式,但作用不僅限于產(chǎn)品的介紹,同時還涉及了品牌文化的宣傳、烘托氛圍以及鼓勵用戶打開相關(guān)配置的作用。比如產(chǎn)品的介紹, 設(shè)計這種引導(dǎo)頁時,因為導(dǎo)覽頁面的數(shù)量不能太多,挑選的特性應(yīng)該是這個產(chǎn)品的核心特點(diǎn)。能使用圖片說明的情況下,優(yōu)先使用圖片,因為圖片能夠涵蓋的信息量是要比文字大很多的。

曾看過一位設(shè)計師總結(jié)這類引導(dǎo)頁的設(shè)計方法,方法還算通用,稱為3X3法,就是用三個頁面解釋三個問題:what、why以及how。

  • What?—?你的產(chǎn)品是干什么的?
  • Why?—?你的產(chǎn)品能帶給用戶什么?
  • How?—?是怎么來達(dá)到這個目標(biāo)的?

4walkthrough案例

上圖中的例子就來自于這位設(shè)計師文中列舉的案例。

而烘托氛圍的比如airbnb的這個例子,讓用戶體會到溫馨的感覺,對于這個產(chǎn)品有了更多感性的認(rèn)識。

4氣氛2

最后一點(diǎn)鼓勵用戶打開相關(guān)配置的作用,這個在工具類產(chǎn)品中使用比較多,因為對于很多工具類產(chǎn)品,是否獲得通知提醒或則定位的權(quán)限對于這個產(chǎn)品的體驗有非常大的影響。比如之前看過一篇hopper設(shè)計師寫的思考,hopper是一款實時分析機(jī)票價格、告訴用戶何時購票最為劃算的軟件。所以通知對于觀望功能極其重要,如果用戶不允許Hopper發(fā)送通知,他們就無法在價格達(dá)到低價區(qū)間時收到購票建議信息,觀望功能就會失去使用價值。因此設(shè)計師將引導(dǎo)頁設(shè)計成了如下的樣式,用戶打開通知功能的幾率大大增加。

4通知設(shè)置

如果想要查找更多關(guān)于引導(dǎo)頁的設(shè)計,可以在dribble或則pinterest上搜索walkthrough。

覆蓋層和提示窗口

覆蓋層式的設(shè)計是專門針對于移動端而產(chǎn)生的,如下圖

4覆蓋層

移動端的屏幕空間十分寶貴,所以采用覆蓋層的方式可以節(jié)約空間,在用戶第一次使用某個界面時,通過覆蓋層展示關(guān)鍵的幾個工具的使用說明,幫助用戶快速的上手使用。

這種方式需要注意解釋的功能數(shù)量不能過多,以免用戶因為信息過載而導(dǎo)致事半功倍。同時給予用戶隨時跳出的權(quán)利,一般的做法是點(diǎn)擊任意位置即可跳出。

而提示窗口的使用其實和覆蓋層類似,當(dāng)用戶第一次打開了某個頁面或則某個功能時,彈出提示窗口,告訴用戶當(dāng)前頁面的使用方法。比如enlight,這是一款非常強(qiáng)大的照片處理軟件,提供的功能很多,所以提供適當(dāng)?shù)膸椭鞘种匾摹H缦聢D所示,enlight在用戶第一次使用某個功能時會彈出提示窗口,通過gif圖片的形式告知用戶這個功能可以達(dá)成怎樣的效果。

4enlight

模板

模板就好比服裝店里的塑膠模特們,店員們將精心搭配好的服裝穿在模特身上,展示給購物者看,不知道如何搭配的購物者,可以通過這些搭配的模板來選購。當(dāng)然對于早已有著自己的搭配風(fēng)格的購物者而言,這些模板是可以忽略的,這就好比高級用戶,他們早已知道如何使用你的產(chǎn)品,并且還能將產(chǎn)品的功能利用到很多不常見的地方。

模板的案例比如我們經(jīng)常使用的word,新建一個文檔時,word會提供很多模板。

4word

還有像clear這類效率類軟件,為了讓用戶更快的了解到產(chǎn)品可以做些什么,在剛使用的時候也提供了很多例子,如下圖所示。

4clear

輸入或操作區(qū)域提示

除了上面說的各種一次性的幫助方式以外,這一條的特點(diǎn)是具有持續(xù)性,伴隨著各種輸入和操作過程中。在PC端中,有一種形式十分常見,就是當(dāng)鼠標(biāo)移動到相應(yīng)的控件上時,懸停后會出現(xiàn)相關(guān)的解釋性文字,但在移動端由于交互方式的限制這種方式無法實現(xiàn)。所以采用的是靜止的文字提示,提示用戶操作當(dāng)前區(qū)域需要注意的地方。比如下面的例子中的搜索框以及評價框中的提示性文字,當(dāng)輸入了文字以后,提示性文字就消失。

4輸入

操作區(qū)域的提示,典型的例子比如ios中的系統(tǒng)設(shè)置,如下圖,在每一個操作區(qū)域旁邊都用提示性文字解釋了這項操作將會導(dǎo)致什么樣的結(jié)果,給不熟悉的用戶可以預(yù)知操作的后果。

4IOS

向?qū)?/h2>

向?qū)В╳izard)是微軟發(fā)明的一個習(xí)慣用法,在PC端就十分的常見,通過一系列的對話框逐步引導(dǎo)用戶了解產(chǎn)品。移植到移動端,向?qū)У氖褂米兊酶佑嗅槍π?,比如社交產(chǎn)品中,為了用戶與用戶之間更好的了解,引導(dǎo)用戶填寫完整個人信息,如下圖。

4向?qū)? width=

而像有的內(nèi)容類產(chǎn)品中,為了針對于不同用戶的個性化需求,在第一次使用產(chǎn)品時會引導(dǎo)用戶關(guān)注不同類型的人物或則標(biāo)簽。讓用戶可以更快的融入到產(chǎn)品中,發(fā)現(xiàn)更多好玩有趣的東西,而不會因為初次進(jìn)入因為沒有內(nèi)容源而失望離去。

4向?qū)缃? width=

幫助與反饋

幫助與反饋在PC端的軟件中,往往都會提供一個幫助手冊,里面詳細(xì)的介紹了相關(guān)的問題和解決方法,當(dāng)然也可以通過搜索的方式找到合適的解決辦法。而移動端的產(chǎn)品通常沒有PC端的那么復(fù)雜,一般不會提供詳細(xì)的幫助手冊,但會提供一個反饋的通道,用戶可以通過反饋通道快速的反映相關(guān)的問題。比如知乎就做的比較深入,不僅提供文字反饋,而且可以通過搖一搖的方式,截屏發(fā)送反饋,方便開發(fā)團(tuán)隊更好的改進(jìn)產(chǎn)品。如下圖。

4知乎

 

本文由 @Thor(微信公眾號:thor_datou) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理 ,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!