品牌設(shè)計(jì)
Hi,are you ready?

準(zhǔn)備好開(kāi)始了嗎?
那就與我們?nèi)〉寐?lián)系吧

有一個(gè)品牌項(xiàng)目想和我們談?wù)剢?您可以填寫(xiě)右邊的表格,讓我們了解您的項(xiàng)目需求,這是一個(gè)良好的開(kāi)始,我們將會(huì)盡快與你取得聯(lián)系。當(dāng)然也歡迎您給我們寫(xiě)信或是打電話,讓我們聽(tīng)到你的聲音!

PID派點(diǎn)互動(dòng)

地 址:廣州市天河區(qū)金慧路88號(hào)11棟138單元(華南農(nóng)業(yè)大學(xué)內(nèi))

電 話:+020- 3855 0205 3855 0745

傳 真:+020-3855 0745

E-mail:925774558@qq.com

填寫(xiě)您的項(xiàng)目信息

captcha

關(guān)于移動(dòng)應(yīng)用的新手引導(dǎo)設(shè)計(jì)

標(biāo)簽:派點(diǎn)互動(dòng)|響應(yīng)式設(shè)計(jì)|網(wǎng)站設(shè)計(jì)|廣州網(wǎng)站設(shè)計(jì)|響應(yīng)式網(wǎng)站設(shè)計(jì)

如今市面上的很多應(yīng)用都會(huì)在初次加載時(shí)提供“教練畫(huà)板”形式的新手引導(dǎo)或教程任務(wù)(畫(huà)著各種使用說(shuō)明的半透明浮層)。此類引導(dǎo)有時(shí)確實(shí)可以幫助用戶以正確的方式使用產(chǎn)品,不過(guò)很多時(shí)候也真是沒(méi)有必要。如果你決定在自己的應(yīng)用里增加這樣的新手引導(dǎo),那么不妨參考本文提供的一些設(shè)計(jì)原則,以打造出更有用的引導(dǎo),而不是讓用戶只想趕快跳過(guò)的障礙。

 派點(diǎn)互動(dòng) 品牌網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)制作 建站公司 設(shè)計(jì)公司 廣州網(wǎng)站建設(shè) 網(wǎng)站制作 高端設(shè)計(jì)  

簡(jiǎn)短,聚焦

無(wú)論何時(shí)都不能期望用戶在使用應(yīng)用之前樂(lè)于閱讀說(shuō)明性質(zhì)的內(nèi)容。人們打開(kāi)應(yīng)用不是為了花時(shí)間學(xué)習(xí)怎樣使用UI,而是為了在最短的時(shí)間內(nèi)以最小的成本解決他們手頭的問(wèn)題。其實(shí)這也是個(gè)悖論,因?yàn)橐坏W(xué)會(huì)更有效率的使用UI,用戶倒是可以為自己節(jié)省更多的時(shí)間。我們都知道,Web用戶不愿閱讀文字的習(xí)慣是出了名的,而移動(dòng)用戶在這方面則有過(guò)之而無(wú)不及,因?yàn)樵谝苿?dòng)情境中,人機(jī)會(huì)話時(shí)間更加有限,注意力更容易分散。

即便你的用戶愿意去閱讀那些說(shuō)明,一下子看到太多內(nèi)容也會(huì)加重其認(rèn)知負(fù)荷。由于用戶無(wú)法在閱讀浮層上的說(shuō)明內(nèi)容的同時(shí)進(jìn)行實(shí)際操作,所以他們必須首先將說(shuō)明內(nèi)容記憶下來(lái),然后再投入實(shí)用。而人類的短期記憶難以保存太多的內(nèi)容,信息在20秒左右的時(shí)間內(nèi)就會(huì)開(kāi)始被遺忘。因此,相比于在一個(gè)浮層上一次性展示UI當(dāng)中每個(gè)地方的說(shuō)明,不如一次聚焦在一兩個(gè)上面。

8.png

Morningstar的iPad應(yīng)用:一個(gè)浮層上展示了太多的UI說(shuō)明。其實(shí)這里的一些UI元素是具有不錯(cuò)的自解釋性的(例如點(diǎn)擊文章標(biāo)題閱讀全文),完全沒(méi)必要一股腦都塞給用戶。

減少說(shuō)明的焦點(diǎn)可以使用戶將注意力放在最重要的說(shuō)明上。一次展示的說(shuō)明越少,用戶越有可能去閱讀并記憶下來(lái)。另外,這種方式也更具有引導(dǎo)作用,人們會(huì)更加樂(lè)于模仿說(shuō)明中的指示來(lái)嘗試著進(jìn)行操作,以確保自己的理解是正確的。

8.png

Youtube的安卓應(yīng)用:只會(huì)在使用過(guò)程中的相關(guān)環(huán)節(jié)向用戶展示對(duì)應(yīng)的引導(dǎo)說(shuō)明,而不是一上來(lái)就一股腦的拋出所有,管你用戶記住沒(méi)記住。一次一個(gè)焦點(diǎn),直接引導(dǎo)用戶嘗試操作,使其需要閱讀和記憶的信息量盡可能的少。

尋找正確的時(shí)機(jī),為用戶提供最重要的引導(dǎo)提示,一次一個(gè),使他們更容易理解和掌握。

避免一連串的提示

有些時(shí)候,一個(gè)界面里會(huì)有多個(gè)功能點(diǎn)需要被講解。然而通過(guò)一次一個(gè)的方式接二連三的蹦出浮層進(jìn)行說(shuō)明,則會(huì)使用戶更加不耐煩的關(guān)掉這些說(shuō)明,而不管它們是不是真的有用。你可以想象每個(gè)用戶都有一個(gè)小容器用來(lái)盛放引導(dǎo)提示內(nèi)容——那一定是喝威士忌的小杯,而不是一扎一扎喝啤酒的大杯——你不能給用戶灌的太多,也不能灌的太快。

接連不斷的展示引導(dǎo)信息不僅會(huì)產(chǎn)生短期記憶方面的問(wèn)題,而且會(huì)讓新用戶覺(jué)得你的應(yīng)用過(guò)于復(fù)雜,望而生畏。記住,在實(shí)際當(dāng)中,這樣的初體驗(yàn)足以使他們關(guān)掉你的應(yīng)用,然后去尋找其他的替換方案。

8.png

iPad上的Makr應(yīng)用:用戶每到一個(gè)新區(qū)域,都會(huì)收到一系列的引導(dǎo)提示。提示內(nèi)容太過(guò)文字化,而且在用戶實(shí)際使用之前就講到了太多關(guān)于多步驟流程的操作方法。用戶無(wú)法邊學(xué)邊做,在與實(shí)際UI進(jìn)行交互之前只能強(qiáng)行記憶那些操作步驟。而且沒(méi)有任何標(biāo)識(shí)能夠讓用戶知道接下來(lái)還有多少提示需要看;整個(gè)學(xué)習(xí)過(guò)程令人非常反感,如果這也能叫做學(xué)習(xí)。

Makr帶來(lái)了一連串的提示,而且由于內(nèi)容太過(guò)文字化,如果用戶快速的略過(guò),便真的無(wú)法得到任何有用的信息,然后在面對(duì)實(shí)際工作界面時(shí)將完全無(wú)所適從。此外,雖然每條提示都是氣泡的形式,且有明確的箭頭指向?qū)?yīng)的說(shuō)明對(duì)象,但在說(shuō)明內(nèi)容當(dāng)中卻會(huì)提到其他的UI元素,非常焦慮。

盡量使用圖形元素

使用圖文并茂的形式,而不只是干巴巴的文字,這將能使用戶在最短的時(shí)間里對(duì)信息產(chǎn)生大致的了解。

對(duì)于前面提到的多步驟說(shuō)明,可以嘗試將每一步內(nèi)容濃縮為“恰當(dāng)?shù)膱D形元素+簡(jiǎn)短的文字”,并整合到一個(gè)展示層面上;這種方式即有利于用戶閱讀,也可以使多步驟的流程更直觀、易懂、易記憶。

下面是我們做的Makr重設(shè)計(jì)建議方案。三步的操作流程被放在一起,通過(guò)圖文并茂的形式展示出來(lái)。通過(guò)統(tǒng)一的標(biāo)題“定制化你的模板”,用戶立刻就可以了解這個(gè)會(huì)話是關(guān)于什么的,而下面的三個(gè)步驟說(shuō)明讓他們可以很快了解到怎樣完成這件事情。

8.png

當(dāng)然,這并非完美的重設(shè)計(jì)方案,因?yàn)橛脩羧匀恍枰趯?shí)際上手之前將這些內(nèi)容記下來(lái)先,但相比于之前的版本,它至少是更易讀易理解的。當(dāng)你覺(jué)得有必要通過(guò)一系列提示來(lái)告訴用戶怎樣完成某種復(fù)雜的多步驟操作時(shí),不妨考慮這類替代方案。

不要和實(shí)際界面混淆

必須使引導(dǎo)提示在外觀上與實(shí)際界面元素有著明確的區(qū)分,否則引導(dǎo)提示就是在干擾實(shí)際界面,用戶也會(huì)迷茫,甚至?xí)呀虒W(xué)內(nèi)容當(dāng)做功能界面,試著與其交互。

在我們最近做的關(guān)于平板設(shè)備可用性的研究當(dāng)中,我們發(fā)現(xiàn),用戶在使用Wimbledon應(yīng)用的時(shí)候總是在試著點(diǎn)擊教學(xué)內(nèi)容當(dāng)中那些地標(biāo)圖標(biāo)。他們的引導(dǎo)提示做的太精細(xì)、太像周圍的實(shí)際UI了,人們根本沒(méi)意識(shí)到這里是不可交互的教學(xué)內(nèi)容。

4ceed6765ff9d12a8e1af8f5c6dc13ef.jpg

要使提示內(nèi)容與普通的界面元素區(qū)分開(kāi)來(lái),最簡(jiǎn)單的方式是使用不同的字體。我們通??梢砸?jiàn)到很多手寫(xiě)字體風(fēng)格的提示,確實(shí)可以與實(shí)際UI當(dāng)中的文字產(chǎn)生鮮明的對(duì)比。

來(lái)看個(gè)反例。在Ness的iPhone應(yīng)用中,引導(dǎo)提示和某動(dòng)作菜單都使用了相同的字體風(fēng)格,這很容易給用戶帶來(lái)迷茫,難以判斷那些是幫助文字,哪些是可交互的元素。

8.png

返回列表
在線溝通

Are you interested in ?

感興趣嗎?

有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系

135 7039 2915 李先生

與我們合作

與派點(diǎn)合作,您將會(huì)得到更成熟的網(wǎng)站建設(shè)服務(wù)。我們以客戶至上,同時(shí)也相互挑戰(zhàn),力求呈現(xiàn)最好的網(wǎng)站建設(shè)成果。

品牌顧問(wèn)熱線(李生):

+135 7039 2915

TOP

QQ客服

免費(fèi)電話