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