2013-6-30 藍藍設(shè)計的小編
轉(zhuǎn)載藍藍設(shè)計( 363858.cn )是一家專注而深入的設(shè)計機構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源:http://www.shejidaren.com/
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
在手機產(chǎn)品的設(shè)計過程中,由于手機界面的承載能力有限,產(chǎn)品功能的不斷膨脹,必須要在用戶打開應(yīng)用之后告知他某些新奇的功能,引導(dǎo)他完成某些主要任 務(wù)流程,讓用戶不至于迷失在陌生應(yīng)用中不知所措。幫助用戶快速掌握應(yīng)用的使用方法,體驗到應(yīng)用的樂趣,新手引導(dǎo)成了一個必須考慮的設(shè)計環(huán)節(jié)。
用戶引導(dǎo)的直接目標是幫助用戶更好的使用產(chǎn)品,終極目標是提升用戶滿意度。雖然,大多數(shù)情況下,我們可以通過合理的設(shè)計,盡可能的簡化功能,讓用戶 無需引導(dǎo)和幫助,就可以完成必要的任務(wù)。但是實際上,手機產(chǎn)品的限制和對強大功能的追求,導(dǎo)致這個目標很難達到,因此越來越多的應(yīng)用開始使用用戶引導(dǎo)來幫 助用戶快速熟悉產(chǎn)品。
第一類最簡單的用戶引導(dǎo)方式,就是文字說明類。用文字描述的方式,幫助用戶理解產(chǎn)品的功能和所需要執(zhí)行的操作。文字說明類用戶引導(dǎo)如下圖的幾個例子:
從左到右依次是Memento、Instapaper和Jamie Oliver
Menento是一個日記程序,當你沒有給日記增加tag的時候,這里就會有文字說明,告訴你tag是用來瀏覽和搜索的,可以在創(chuàng)建和編輯日記的時 候創(chuàng)建。告訴你可以把好友加為tag,可以把地理位置加為tag,可以把事件加為tag,可以創(chuàng)建自定義tag;Instapaper是一個閱讀工具,當 你首次打開應(yīng)用,沒有文章的時候,這個頁面會有文字說明,告訴你你可以通過朋友、作者、瀏覽器找到可閱讀的文章。當你通過瀏覽器書簽或者Email發(fā)送的 方式增加文章到Instapaper后,文章會顯示在這里;Jamie Oliver是一個美食工具,如果你沒有創(chuàng)建美食購物清單的時候,這個頁面會文字提醒你改如何增加Shopping list。
適用情況:
聰明如你,肯定已經(jīng)發(fā)現(xiàn)了,這里提到的例子都是出現(xiàn)在無數(shù)據(jù)的時候。無數(shù)據(jù)的時候,是文字說明一個很重要的出現(xiàn)場景。很多設(shè)計師會忽略無數(shù)據(jù)時的界面設(shè)計,產(chǎn)品人員也會忽略無數(shù)據(jù)的時候,該怎樣引導(dǎo)用戶使用產(chǎn)品,導(dǎo)致用戶看到空空的面板,拂塵而去。
其實,文字說明也可以用在超過5s的啟動界面(Splash Screens)上 ,也可以用在某個操作按鈕的下面,也可以用在某段數(shù)據(jù)加載的彈出框中。它可以用在你能想到的任何地方,只要是合情合理的設(shè)計需求。
缺點:
當然,文字說明的劣勢也顯而易見,長篇累牘的贅述功能,很少有人能耐心的看完,何況枯燥的說明書一向是Apple產(chǎn)品所反感的東西,所以文字說明要慎重,不要濫用。
設(shè)計指南:
因為某些功能設(shè)計成ICON不利于識別,某些功能隱藏在手勢操作之后不易察覺,某些功能是產(chǎn)品主打功能需要用戶知曉,在這種情況下,越來越多的應(yīng)用采用功能提醒類的浮層做用戶引導(dǎo),如:
從做到右依次是Tweetbot、QQ通訊錄和Talkbox
Tweet用帶箭頭的小浮層告知用戶,點擊navigation bar可以切換關(guān)注列表;QQ通訊錄用帶用動效的小浮層提醒用戶,向左滑動可以展現(xiàn)右側(cè)隱藏的屏幕內(nèi)容;Talkbox用帶Gif小動畫的浮層告訴用戶,把收集放到耳朵旁可以從耳機收聽。
使用場景:
用來告知重要功能、不易識別的功能圖標、不易察覺的隱藏操作
缺點:
有時候需要提醒的太多了,往往無從下手。如果你的應(yīng)用沒有清晰的重要功能,還是小心設(shè)計,慎用提醒的好。因為你提醒的可能不是用戶需要的,讓新手用 戶無所適從,老手用戶覺得你太過膚淺。不過還好這類提醒不會打斷用戶的操作,也不會強迫用戶一定看完,但是也正是因為這類提醒稍縱即逝,也很容易不小心錯 過,導(dǎo)致之后再也無法查看,所以要謹慎的設(shè)置一個重復(fù)頻率,避免被漏看。
設(shè)計指南:
操作引導(dǎo)類的用戶引導(dǎo)方式被大量應(yīng)用與游戲和SNS產(chǎn)品中,如果是設(shè)置項很多的復(fù)雜產(chǎn)品,也必須有合理的操作引導(dǎo)。操作引導(dǎo)分為強制性的和非強制性 的。強制性的主要是注冊、驗證、激活相關(guān)流程,不滿足條件無法滿足安全性;非強制性的則多是鼓勵填寫完善的資料或者鼓勵完成某個任務(wù)的,這類引導(dǎo)最好給予 一定的激勵,如積分、徽章、等級等等,至少要有一個”恭喜你,成功了”之類的心里滿足暗示。具體案例見下圖:
從左到右依次是Albumphoto、Gowalla和With。
Albumphoto引導(dǎo)新用戶新建一個相冊;Gowalla引導(dǎo)新用戶創(chuàng)建一個簽到信息并分享圖片給好友;With引導(dǎo)用戶綁定Twitter賬號用以分享照片。如果是復(fù)雜的任務(wù)流程,每一步都要給新用戶講清楚,這一步處于哪一個環(huán)節(jié),該怎么操作,有什么作用。
操作引導(dǎo)需要一定的操作激發(fā),在一定的時機出現(xiàn),有一定的重復(fù)頻率,并定義一定的引導(dǎo)樣式。
使用場景:
引導(dǎo)用戶執(zhí)行操作、引導(dǎo)用戶登錄注冊綁定賬號、引導(dǎo)用戶完善資料、引導(dǎo)用戶導(dǎo)入關(guān)系、引導(dǎo)用戶分享應(yīng)用給好友等等
缺點:
有時候有點過于強勢的嫌疑,用戶不一定真的需要這種程度的引導(dǎo),不如只有一個聚光燈聚焦在重要操作上來的直接,否則所有的App都像游戲客戶端發(fā)展了。
設(shè)計指南:
操作示意型新手引導(dǎo),往往是采用一段簡單的動畫,或是把功能顯示出來,然后在平滑的移動到屏幕外邊;或是把可點擊的按鈕做一個點擊后的效果動畫出 來,或是把某些用戶預(yù)期要執(zhí)行的操作提前演示出來。我第一次見到不錯的操作示意型新手引導(dǎo)是在Nokia N900上,Maemo操作系統(tǒng),用一個小亮點模擬手指點擊在一個操作按鈕上的效果。
上圖從左到右依次是Naver、Bump和新浪微博。
Naver的搜索類型切換是下拉搜索框就會出現(xiàn)的,首次啟動的時候,搜索框處于下拉狀態(tài),提醒用戶下拉就可以看到這些功能,然后自動隱藏;Bump 則是在起始界面上,用動畫的形式告知用戶,碰一碰手機就可以傳輸數(shù)據(jù)了;而新浪微博在首次加載數(shù)據(jù)的時候,會給出一個手勢+下拉的引導(dǎo),告知用戶下拉就可 以刷新數(shù)據(jù)了。
這些示意,用輕松淺顯的手法,就傳達給用戶新鮮的功能好趣味的用法,比生硬的文字或者不合時宜的彈層都來得體貼,鼓勵設(shè)計師多多嘗試這種方式。
使用場景:
復(fù)雜或重要操作的動畫告知
劣勢:
設(shè)計實現(xiàn)麻煩,成本略高
設(shè)計指南:
不知道從什么時候開始,說明書式的用戶引導(dǎo)用開始流行起來了,這種貌似比較傳統(tǒng)的手段,能更全面的展示產(chǎn)品的功能和使用方法,尤其是適用于產(chǎn)品的更 新說明,本次版本迭代了哪些功能,進行了哪些改進,讓用戶一進來就知曉,知道自己所耗費流量耗費時間更新應(yīng)用是物有所值的。單頁的說明書類引導(dǎo)案例如下:
從左到右依次是Google客戶端、Pull Time和today
Google會在一頁內(nèi)給出多個問號,點擊問號查看該區(qū)域所承載的操作及執(zhí)行方法;Pull Time用更直觀的方法來表示這款交互出類拔萃的產(chǎn)品到底該怎樣使用;而Today則用一頁圖配文的說明來告知本版本更新了哪些內(nèi)容。
顯而易見,一頁能承載的內(nèi)容有限,重點也不是特別突出,為了更立體的講述產(chǎn)品,出現(xiàn)了一種演示型的新手引導(dǎo),見下面一個案例:
Layar用一系列動畫+文字的方式,即交代了產(chǎn)品能做什么,有交代了使用場景和使用方法。
為了每次更新版本都能對用戶有個更好的交代,很多應(yīng)用開始采用多頁的更新說明或使用介紹,見下面一個案例:
Weico的這次改版所采用的新手引導(dǎo)方式,絕對是稱得上讓人驚艷級別的,用了6頁,詳細的介紹了虛擬形象功能,簡單的提到了微博曬心情、Gif直 接播放、圖片進度提醒等等次級功能。雖然從功能上來講,我并不一定認同虛擬形象,但是從引導(dǎo)上來講,實在是太有愛了,不愧是設(shè)計公司。
使用場景:
產(chǎn)品更新說明、復(fù)雜產(chǎn)品用戶教育
劣勢:
成本略高、具有強迫性
設(shè)計指南:
也許紛繁復(fù)雜的各種引導(dǎo),在幫助新用戶快速熟悉應(yīng)用的同時,也讓老用戶不厭其煩的反復(fù)瞻仰一些已經(jīng)耳熟能詳?shù)墓δ埽绕涫悄承?yīng)用還在應(yīng)用內(nèi)教育用 戶怎樣使用系統(tǒng)級別的功能,就更顯得累贅。曾經(jīng)電腦軟件的幫助文檔也許是一個很好的思路,當你有不明確的地方的時候,點一下幫助,快速查閱遇到障礙的問 題,一切迎刃而解。iPhone里也有預(yù)設(shè)的幫助圖標,可是被利用的情況不是很好。
當然,我更崇尚的,不是以上那些簡單直白的引導(dǎo),而是一種更簡單更直白的引導(dǎo),類似于深澤直人的無意識設(shè)計,讓用戶不知不覺間受到了某種操控,不自覺的產(chǎn)生某些行為。這就需要設(shè)計者懂一些心理學(xué)或營銷學(xué)的東西了。
數(shù)字引導(dǎo)設(shè)計幾乎都是在利用和發(fā)掘用戶的心理影響用戶行為。在很多時候,這種數(shù)字的激勵方式確實對用戶產(chǎn)生好的引導(dǎo),讓用戶按照設(shè)計的軌跡行動。但是數(shù)字引導(dǎo)并不是萬能的,在一些情景下這種引導(dǎo)設(shè)計如果不當?shù)脑挘芸赡軙a(chǎn)生負面效果。
從左到右依次是街旁、淘寶和QQ郵箱Wap版
街旁用幾條未讀消息、幾個好友請求來引導(dǎo)用戶去查看新消息;聚劃算采用了一個非常有緊迫感的倒計時的設(shè)計,旁邊緊跟在一個參團按鈕,同時還刻意把價 格和折扣標紅,顯示出多少人已購買,這些數(shù)字共同營造了一種,時間緊迫、折扣低廉、多掙爭搶的假象,讓用戶快速抉擇去購買一個商品;QQ郵箱用很多紅色氣 泡的設(shè)計,一下子把焦點聚集在你有未讀消息的模塊上。
不知道源頭是哪里,越來越多的應(yīng)用開始增加小秘書、XX客服、XX產(chǎn)品團隊之類的官方賬號用于用戶引導(dǎo)了。這種方式有明顯的好處就是把冷冰冰的機械引導(dǎo)變成了有血有肉的擬人化引導(dǎo)。小秘書會在你開啟應(yīng)用后第一時間告訴你,你可以做一些什么,非常體貼。如下面這些應(yīng)用:
從左到右依次是微信、米聊、TalkBox
這三個應(yīng)用都屬于IM類的,在你的好友里,多出一個系統(tǒng)賬號來,用來跟你溝通,教你使用應(yīng)用。當然都還不夠智能,淪為廣告發(fā)布渠道,而不是真的答疑解惑的小秘書。
內(nèi)容教育的意思是,在用戶使用應(yīng)用之初,應(yīng)用內(nèi)可能沒有數(shù)據(jù)也沒有用戶,用戶不知道應(yīng)用能帶給自己什么好處。這時候,閱讀類的客戶端就會增加基本預(yù) 設(shè)的書籍,比如產(chǎn)品說明書;GTD類的客戶端就會增加幾個待辦事項,用待辦事項的方式告知你可以做什么,怎么做;社交類的就會給你預(yù)設(shè)幾個好友,你看著他 們都做了什么,就知道自己該干什么了;搜索類的可能會給出搜索熱詞,你看到他們怎么去搜索,自己就知道該輸入什么樣的內(nèi)容了。
不要以為這種方式老土或者過時,這種方式是最行之有效的辦法。如果你告訴用戶”好的主廚最愛做的菜”,他就會選擇那個菜;如果你告訴用戶”優(yōu)秀的人 都會管理自己的消費計劃”,他就會給自己制定消費計劃;如果你告訴用戶”優(yōu)秀的相冊至少有10張照片”,那么用戶就會湊夠十張照片上傳,他們渴望被承認, 你如果在他的潛意識里植入這種優(yōu)秀的意識,他會為此買單的。
好的引導(dǎo)是讓用戶自己探索發(fā)現(xiàn),獲得樂趣。樂趣哪里來呢?一方面是用戶發(fā)現(xiàn)了隱藏操作,自我成就感膨脹,一方面可能是,用戶完成了某項任務(wù),系統(tǒng)贈與用戶某些獎勵。如Foursquare當初的積分、市長和徽章。
記得米聊有一個頁面做的特別的好,就是個人名片頁,當你資料填寫不完善的時候,它沒有強硬的引導(dǎo)你去填寫,而是在界面上放了一個進度條”完成度 10%”,并且告訴你,完成度越高,越容易找到更多朋友,于是在那個沮喪的10%面前,我不得不為了讓它好看一點,添加了更多的資料,直到它顯示100% 為止,就像完成了一項偉大的任務(wù)。
針對新手引導(dǎo),先寫這么多,歡迎各路豪杰批評指正……^^
藍藍設(shè)計的小編 http://363858.cn