干貨貼:移動(dòng)產(chǎn)品功能結(jié)構(gòu)設(shè)計(jì)思路

移動(dòng)產(chǎn)品是大家最熟悉的產(chǎn)品形態(tài)了,大家都稱為APP,今天從功能結(jié)構(gòu)的角度來(lái)歸納一下APP產(chǎn)品功能結(jié)構(gòu)設(shè)計(jì)的幾個(gè)方面。
相比PC web產(chǎn)品來(lái)說(shuō),APP產(chǎn)品功能結(jié)構(gòu)相對(duì)比較簡(jiǎn)單,但是每個(gè)部分都很有講究,需要根據(jù)不同的產(chǎn)品定位進(jìn)行選擇。簡(jiǎn)單點(diǎn)來(lái)說(shuō),一個(gè)APP的產(chǎn)品功能結(jié)構(gòu)包括下面幾個(gè)方面:
啟動(dòng)頁(yè)(必需,每次出現(xiàn))
啟動(dòng)頁(yè),就是用戶剛剛打開(kāi)APP時(shí)展示的頁(yè)面,此時(shí),產(chǎn)品的后臺(tái)可能進(jìn)行一些產(chǎn)品初始化和系統(tǒng)檢查的動(dòng)作,這個(gè)過(guò)程為了保證用戶體驗(yàn),需要展示一個(gè)頁(yè)面,時(shí)間一般為1-2秒。國(guó)外的產(chǎn)品或者超級(jí)大牌的產(chǎn)品比較簡(jiǎn)單,一般就是展示一個(gè)logo就完了,例如下面的flickr、sphere、微信和支付寶。
國(guó)內(nèi)的產(chǎn)品大部分都充分使用這個(gè)頁(yè)面來(lái)展示公司的logo、產(chǎn)品的價(jià)值主張(slogan)、產(chǎn)品優(yōu)勢(shì)和品牌情懷,見(jiàn)下圖:
比如說(shuō)最近比較火的共享單車OfO,啟動(dòng)頁(yè)就做得中規(guī)中矩。上半部分是背景圖,作用是把用戶帶入場(chǎng)景,知道這個(gè)產(chǎn)品是做什么用的。這種圖片可以隨著事件、時(shí)間、表達(dá)的情懷不同經(jīng)常更新。下半部分是產(chǎn)品的logo、產(chǎn)品的優(yōu)勢(shì)或者價(jià)值主張,這個(gè)是很少變化的。當(dāng)然做引導(dǎo)頁(yè)的目的是提升用戶的體驗(yàn),把用戶帶入產(chǎn)品使用場(chǎng)景的同時(shí),加強(qiáng)品牌認(rèn)知,提高品牌影響力,具體怎么設(shè)計(jì)不能一概而論。值得一提的是,從這里開(kāi)始,就有一個(gè)截圖分享功能,目前不少產(chǎn)品開(kāi)始使用這種設(shè)計(jì)(比如說(shuō):嚴(yán)選、摩拜單車等),這個(gè)是為了加強(qiáng)病毒營(yíng)銷的一個(gè)手段,讓APP在熟人之間傳播更快,效果見(jiàn)下圖:
廣告頁(yè)(非必需,每次出現(xiàn))
廣告頁(yè)面,不是必需的,這個(gè)根據(jù)產(chǎn)品而定,流量很大的情況下,尋求流量變現(xiàn),是一種不錯(cuò)的方式,但是產(chǎn)品剛出來(lái)還是不要做了,意義不大,用戶體驗(yàn)也不會(huì)好。
廣告頁(yè)的設(shè)計(jì)有幾個(gè)注意事項(xiàng),時(shí)間控制在1-3秒,如果超過(guò)1秒,需要有倒計(jì)時(shí)和跳過(guò)按鈕,否則用戶體驗(yàn)會(huì)很差。比如說(shuō)“網(wǎng)易嚴(yán)選”的廣告頁(yè)面很短,一秒時(shí)間都不到,一晃而過(guò),就不需要倒計(jì)時(shí)和跳過(guò)頁(yè)面了,否則是要做的。至于在廣告頁(yè)下面要不要加品牌logo和價(jià)值主張,根據(jù)產(chǎn)品階段而定,早期為了加深用戶品牌影像,需要做,后續(xù)產(chǎn)品做大了,可有可無(wú)。
引導(dǎo)頁(yè)(必需,并非每次出現(xiàn))
產(chǎn)品的引導(dǎo)頁(yè)主要的功能是引導(dǎo)用戶快速熟悉產(chǎn)品,并暗示用戶按照產(chǎn)品設(shè)計(jì)的任務(wù)流程使用產(chǎn)品。對(duì)于新手引導(dǎo),只有用戶第一次使用產(chǎn)品的時(shí)候才會(huì)出現(xiàn),其他時(shí)候不會(huì)出現(xiàn)。對(duì)于新功能引導(dǎo),每一個(gè)版本出新功能了,特別是如果不告知用戶的情況下,用戶很難知道有這個(gè)功能,一般都會(huì)出現(xiàn)新功能引導(dǎo)。引導(dǎo)頁(yè)的設(shè)計(jì)方式有很多種,基于不同的需要選擇設(shè)計(jì),下面分別講一講各種設(shè)計(jì)方式和使用場(chǎng)景。
幻燈片式引導(dǎo)
這種幻燈片式的引導(dǎo)是最為常見(jiàn)的,通過(guò)手動(dòng)滑動(dòng)輪播圖的方式呈現(xiàn)(可以左右滑動(dòng),也有上下滑動(dòng)的,上下滑動(dòng)的更有上下文的感覺(jué))。類似一個(gè)簡(jiǎn)易的產(chǎn)品說(shuō)明,闡述一下這個(gè)產(chǎn)品干什么用的,大體怎么用。
當(dāng)然,同樣是用戶引導(dǎo),也有高手寫成一個(gè)故事,很有情懷,讓人引起場(chǎng)景共鳴。
上圖是高德地圖2013年圣誕版的新手引導(dǎo)頁(yè),通過(guò)圣誕老人送禮品的小故事,讓人了解這個(gè)產(chǎn)品是干什么用的,有什么新功能,同時(shí)也激發(fā)了使用的欲望。
也有把引導(dǎo)頁(yè)做成一個(gè)短視頻的,很容易抓住用戶的眼球,效果也不錯(cuò),比如說(shuō):螞蜂窩視頻引導(dǎo)頁(yè)。
遮罩引導(dǎo)
遮罩引導(dǎo)大部分是在用戶第一次使用產(chǎn)品的時(shí)候出現(xiàn),而且只出現(xiàn)1次,出現(xiàn)的時(shí)間是用戶第一次進(jìn)入某個(gè)新界面時(shí)候。
在使用遮罩引導(dǎo)的時(shí)候,最好是漸進(jìn)式的,也就是用戶使用到某個(gè)功能的時(shí)候,出現(xiàn)某個(gè)功能的引導(dǎo),避免一下次出現(xiàn)頁(yè)面所有功能的介紹引導(dǎo),用戶就懵逼了,而且會(huì)造成厭煩情緒,看看下面的引導(dǎo),效果就不怎么好。
除此之外,還有一個(gè)注意事項(xiàng),就是遮罩引導(dǎo)要怎么關(guān)閉。以前有不少的APP的做法是,點(diǎn)擊屏幕的任何一個(gè)地方,引導(dǎo)就消失了。這種方式雖然用戶體驗(yàn)好一些,但可能會(huì)由于用戶的誤操作,不小心碰了一下屏幕,引導(dǎo)就不見(jiàn)了,這樣有可能某個(gè)深層次的功能,用戶很久都琢磨不出來(lái)。所以建議重要的功能,或者用戶憑借使用經(jīng)驗(yàn)很難琢磨出來(lái)的功能,要用確認(rèn)式引導(dǎo),一般的做法就是引導(dǎo)上有一個(gè)“叉號(hào)”關(guān)閉按鈕,或者有一個(gè)“我知道了”關(guān)閉按鈕。
浮層引導(dǎo)
浮層引導(dǎo)一般是某個(gè)新功能的提醒性引導(dǎo),在第一次產(chǎn)品使用可能出現(xiàn),產(chǎn)品有新功能,也會(huì)提示,但是也只出現(xiàn)1次。這類引導(dǎo),一般不需要關(guān)閉按鈕或者確認(rèn)按鈕,點(diǎn)擊引導(dǎo)區(qū)域即可消失,并跳轉(zhuǎn)到相應(yīng)功能頁(yè)面。
交互式引導(dǎo)
這類引導(dǎo)一般在用戶使用某個(gè)功能的過(guò)程中出現(xiàn),主要是告訴用戶操作的效果,或者下一步延伸的功能。
智能引導(dǎo)
我沒(méi)有找到相應(yīng)的案例,這種引導(dǎo)比較隱性,很難試出來(lái),不過(guò)我相信一定會(huì)有。就是用戶使用的時(shí)候不會(huì)出現(xiàn)引導(dǎo),只有用戶多次錯(cuò)誤使用功能,才會(huì)出現(xiàn)引導(dǎo)提示。這個(gè)相對(duì)來(lái)說(shuō)要復(fù)雜一些,需要通過(guò)用戶的行為記錄觸發(fā)。
總體來(lái)說(shuō),引導(dǎo)的作用讓用戶盡快的掌握產(chǎn)品功能和引導(dǎo)用戶進(jìn)入預(yù)定的任務(wù)路線,同時(shí)不能降低用戶的使用體驗(yàn)。至于用什么方式,不能生搬硬套,要以目的和體驗(yàn)為導(dǎo)向。
產(chǎn)品主體頁(yè)(每次出現(xiàn))
產(chǎn)品主體頁(yè)是產(chǎn)品的功能核心,是產(chǎn)品體現(xiàn)價(jià)值的精髓所在,其結(jié)構(gòu)設(shè)計(jì)重要性不言而喻。通常來(lái)說(shuō),產(chǎn)品主體頁(yè)有幾種結(jié)構(gòu)模式,標(biāo)簽式、抽屜式和平鋪式,通過(guò)這幾種模式來(lái)組織功能的首屏、一屏、二屏……
標(biāo)簽式
這種模式是最常見(jiàn)的,產(chǎn)品的主體功能體現(xiàn)在界面最下方的Tabbar里面。
標(biāo)簽式設(shè)計(jì)最是常用的,像國(guó)民應(yīng)用微信、淘寶都是這么做的。這種設(shè)計(jì)使用時(shí)需要注意的就是,Tabbar里面最多不能超過(guò)5個(gè)按鈕(3個(gè)、4個(gè)居多)。如果超過(guò)5個(gè),一個(gè)方面是設(shè)計(jì)出來(lái)的按鈕太小,不好操作,另外,產(chǎn)品主體功能過(guò)于復(fù)雜,用戶學(xué)習(xí)成本太高。還有就是這種模式是點(diǎn)擊Tabbar里面的按鈕響應(yīng)的,不能通過(guò)界面左右滑動(dòng)切換Tabbar的功能。
當(dāng)然這種標(biāo)簽式的結(jié)構(gòu)也不全是一個(gè)Tabbar,里面定義好幾個(gè)大小一樣的圖標(biāo),根據(jù)產(chǎn)品需要,也可以優(yōu)化。比如說(shuō)圖片社交或者視頻社交類產(chǎn)品常采用這種設(shè)計(jì),但是首屏不是第一個(gè)標(biāo)簽頁(yè),而是中間的標(biāo)簽頁(yè),而且中間標(biāo)簽頁(yè)的圖標(biāo)非常突出,亮眼,目的就是為了激發(fā)用戶產(chǎn)生內(nèi)容,見(jiàn)下圖的nice和Path產(chǎn)品。還有面包旅行,TabBar很有個(gè)性,為什么這么設(shè)計(jì),難道是個(gè)人中心很重要?我還沒(méi)有研究出所以然來(lái)。
抽屜式
抽屜式大家應(yīng)該也很熟悉了(主要是QQ用),和標(biāo)簽?zāi)J胶芟?,只不過(guò)把使用低頻的功能藏在了抽屜頁(yè)里面,抽屜頁(yè)面可以通過(guò)首屏左上角的按鈕打開(kāi),有的產(chǎn)品也可以在首屏往右滑動(dòng)打開(kāi)。
這種結(jié)構(gòu)設(shè)計(jì)從流暢度上來(lái)說(shuō),也挺好,不過(guò)存在的問(wèn)題就是抽屜里面功能操作路徑有點(diǎn)長(zhǎng),還有就是抽屜頁(yè)和首頁(yè)導(dǎo)航欄滑動(dòng)功能有沖突。QQ的做法是每一屏左上角都有一個(gè)抽屜按鈕,點(diǎn)擊進(jìn)入抽屜,同時(shí)首屏右滑進(jìn)入抽屜頁(yè)。虎嗅的做法是只有首屏左上角有個(gè)抽屜按鈕,點(diǎn)擊進(jìn)入抽屜,而且首頁(yè)也不能通過(guò)右滑進(jìn)入抽屜,只能通過(guò)那個(gè)按鈕。在二屏、三屏都沒(méi)有抽屜按鈕,要進(jìn)入抽屜,先要回到首頁(yè),然后聽(tīng)通過(guò)首頁(yè)左上角的按鈕進(jìn)入抽屜,這就非常不方便。網(wǎng)易云閱讀結(jié)合了兩種方式,每一屏左上角都有抽屜按鈕,可以進(jìn)入抽屜,但是首屏不能通過(guò)右滑動(dòng)進(jìn)入抽屜,原因是首屏里面還有導(dǎo)航欄,導(dǎo)航欄是通過(guò)滑動(dòng)切換的,自然就不能通過(guò)滑動(dòng)切換到抽屜,否則就超級(jí)亂了。
平鋪式
采用平鋪式作為整體功能結(jié)構(gòu)設(shè)計(jì)比較少見(jiàn),但也有少數(shù)APP這么用。大部分情況下,這種組織形式,都是作為局部功能的一種組織方式,具體情況參照下圖:
上圖中,只有美顏相機(jī)采用平鋪式作為整體功能的組織方式,支付寶、微信錢包、春雨醫(yī)生等,都是作為局部功能的組織方式。這種方式在功能少的情況下,一目了然,很清晰。但是功能多的情況下,就有點(diǎn)像應(yīng)用商店了,除了搜索,沒(méi)有任何使用的欲望,眼光查找成本太高。
綜合來(lái)說(shuō),所有的功能組織形式都是為了用戶體驗(yàn)和呈現(xiàn)價(jià)值用的,沒(méi)有好壞之分,只有合適不合適。除此之外,還有一些有個(gè)性的應(yīng)用,更本不采用上面的任何一種形式,而是另辟蹊徑,感覺(jué)很酷,操作體驗(yàn)也很好。比如說(shuō):好奇心日?qǐng)?bào):
該產(chǎn)品連Tabbar都沒(méi)有,只有一個(gè)“Q”按鈕,而且這個(gè)“Q”在往下閱讀的時(shí)候還消失了,只有上滑的時(shí)候才會(huì)出現(xiàn)。導(dǎo)航欄也很簡(jiǎn)單,就是兩個(gè)導(dǎo)航(NEWS和LABS),但是這種功能的組織形式已經(jīng)可以滿足他的產(chǎn)品定位和需要了,那就足夠了,沒(méi)有必要為了形式而形式。
其實(shí)APP功能結(jié)構(gòu)設(shè)計(jì)還涉及到很多其他方面,由于篇幅關(guān)系,先寫到這里,有時(shí)間后續(xù)再總結(jié)。
本文由 @徽州七哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
第一個(gè)導(dǎo)圖是產(chǎn)品功能結(jié)構(gòu)圖?不覺(jué)得像是頁(yè)面說(shuō)明
講的不是設(shè)計(jì)思路,是常見(jiàn)案例
是的,通過(guò)案例來(lái)講思路,案例多一些
不錯(cuò),現(xiàn)在app個(gè)性設(shè)計(jì)越來(lái)越多了,結(jié)合自己產(chǎn)品特點(diǎn)的設(shè)計(jì)就是最好的。(^_^)
謝謝
寫得很好
謝謝鼓勵(lì)