誰家的APP,有這么性感撩人的Feed流?
最近一直沉浸在研究Feed流的樂趣里。作為APP最常見的信息展示方式,F(xiàn)eed流的產(chǎn)品設(shè)計(jì)其實(shí)有很多門道可以探討,并不是抄來抄去那么簡單。今天的話題是:如何設(shè)計(jì)出一個(gè)性感撩人的信Feed流?
1 Feed流
首先還是追概念。我們先來看什么是Feed:
A web feed (or news feed) is a?data format?used for providing users with?frequently updated content. Content distributors?syndicate?a web feed, thereby allowing users to?subscribe?to it.
嚴(yán)謹(jǐn)?shù)貜亩x出發(fā),我們可以關(guān)注如下三點(diǎn):
- Feed本身是一種數(shù)據(jù)格式;
- 內(nèi)容提供方為用戶提供Feed的訂閱功能并更新;
- 雖然形式上是提供方推送內(nèi)容給用戶,但實(shí)際上是用戶主動(dòng)發(fā)起訂閱。
然而在實(shí)際使用中,我們發(fā)現(xiàn)有些Feed流并不是主動(dòng)選擇多個(gè)訂閱源,可能是基于搜索或推薦而形成的Feed流,如果搜索是用戶主動(dòng)發(fā)起內(nèi)容檢索,而推薦是基于用戶特性實(shí)現(xiàn)的個(gè)性化推薦,那么也可算作一種廣義的Feed流,也包含在本文的討論范圍之中。畢竟本文的關(guān)注點(diǎn)是Feed流的產(chǎn)品設(shè)計(jì),概念上只做科普。
2 性感
接下來我們討論下性感。
拋開“什么樣的產(chǎn)品設(shè)計(jì)可以叫性感“這種話題,我們回歸現(xiàn)實(shí)世界,你覺得什么樣的女神算性感?
(以下多圖高能預(yù)警,請(qǐng)注意鼻血,注意觀賞環(huán)境←←)
宇宙的蒼老師
名模杜鵑拍攝的一組舊上海題材的時(shí)尚大片
Candice Swanepoel,維密天使
Miranda Kerr,前維密天使(我的女神T^T)
拿我上面選的這幾個(gè)例子來說,宇宙的蒼老師自然是宅男最愛,胸器一出全場制霸;一馬平川的杜鵑則有東方女性的性感風(fēng)骨,眼角加紅唇的必殺技簡直是戳中心臟;而同樣是維密天使,有Candice的火辣,也有Kerr的撩人……至于說哪個(gè)最性感,真的是見仁見智。
性感在新華字典的定義是“富有性的誘惑力”,關(guān)鍵在于“誘惑”。所以無論什么樣的性感,其實(shí)際效應(yīng)無非是以下三個(gè)效果:第一,一定是針對(duì)目標(biāo)受眾的喜好,在第一時(shí)間吸引人的眼球;第二,凸顯這種類型性感的特質(zhì),夠觸動(dòng)目標(biāo)受眾的興奮點(diǎn);第三,性感是一種氣場的交互,不光能吸引目標(biāo)受眾,還能讓目標(biāo)受眾被誘惑,引發(fā)遐想。從這個(gè)角度看,無論是以上哪種風(fēng)情,都足夠稱得上“性感撩人”。
3 性感+Feed流
那么回歸到Feed流本身,什么樣的Feed流能夠稱得上性感?
像美女一樣,一個(gè)性感的Feed流應(yīng)當(dāng)滿足如下特征:
3.1 塑造第一印象——在第一時(shí)間抓住你
性感的Feed流在顏值上自然有一定的要求,雖然不同用戶群在審美會(huì)有差異,但硬要從王寶強(qiáng)身上說性感還是有些勉強(qiáng)(寶寶躺槍……)。尤其是現(xiàn)在主流市場幾乎被瓜分完畢的環(huán)境下,想要瞄準(zhǔn)細(xì)分市場,滿足細(xì)分市場用戶的更多要求,F(xiàn)eed流在視覺設(shè)計(jì)上要花些巧思。
3.2 刺激目標(biāo)用戶的核心需求——觸動(dòng)興奮點(diǎn)
比第一印象更重要的是,性感的Feed流應(yīng)當(dāng)直擊用戶的核心需求。使用Feed流的APP很多,APP之間相互借鑒屢見不鮮,然而不同類別、不同目標(biāo)群體的APP之間若只是對(duì)Feed流的設(shè)計(jì)生搬硬套,就有些盲目了。想要設(shè)計(jì)一款適合自家APP的性感的Feed流,思路應(yīng)當(dāng)是圍繞自家目標(biāo)用戶的核心訴求去外延、擴(kuò)散。以購物類APP為例,這個(gè)需求拆解應(yīng)當(dāng)是:
- 用戶核心需求是?——找到想要購買的商品并成功購物;
- 什么是想要購買的商品?——圖片清晰(認(rèn)清商品本身)、價(jià)格清晰(認(rèn)清價(jià)格)、活動(dòng)清晰(進(jìn)一步促進(jìn)下單)、交易保障(無后患之憂,也是為了促進(jìn)下單)、發(fā)貨地、送達(dá)方式……
- 如何展示?——這時(shí)候就要考慮到基于用戶群不同,這些信息展示的優(yōu)先級(jí)也不同。對(duì)于價(jià)格比較敏感的用戶,應(yīng)當(dāng)突出價(jià)格和優(yōu)惠;對(duì)于商品質(zhì)量比較敏感的用戶,則應(yīng)當(dāng)突出商品細(xì)節(jié)和售后保障;對(duì)于收獲速度比較敏感的用戶,則應(yīng)當(dāng)適當(dāng)強(qiáng)調(diào)和物流相關(guān)的信息……
通過以上拆解,就可以初步確認(rèn)Feed上應(yīng)當(dāng)呈現(xiàn)的信息及這些信息的優(yōu)先級(jí),從根本上刺激用戶的興奮點(diǎn),保證Feed流足夠性感。之后再從排版、視覺上進(jìn)行包裝,提升性感的個(gè)性和質(zhì)感就容易多了。
3.3 優(yōu)化交互,保持可運(yùn)營性和可拓展性——引發(fā)遐想
第三點(diǎn)比較容易被人忽略:一個(gè)性感的Feed流應(yīng)當(dāng)能和用戶產(chǎn)生互動(dòng)。這個(gè)互動(dòng)可以從狹義上理解為操作上的交互,也可以從廣義上理解為通過某種手段給用戶不同以往的刺激,讓用戶保持有新鮮感和好奇心。
這就要求在產(chǎn)品設(shè)計(jì)時(shí)就考慮到Feed流的互動(dòng)性,而這個(gè)互動(dòng)性同樣要從兩方面進(jìn)行落實(shí):一方面,產(chǎn)品經(jīng)理在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)要考慮到用戶的交互方式,給用戶以流暢的使用體驗(yàn),通過與Feed流的互動(dòng)提高用戶的沉浸度;另一方面,則是要求Feed流保持一定的可運(yùn)營性和可拓展性,尤其是內(nèi)容、社交、電商類的APP,經(jīng)常會(huì)依賴于運(yùn)營手段實(shí)現(xiàn)目標(biāo),那么Feed流這樣的基本產(chǎn)品形態(tài)在設(shè)計(jì)是就要預(yù)留給運(yùn)營一定的可操作能力,以后的話,也需要有能力在不影響基本產(chǎn)品架構(gòu)的前提下拓展更多的運(yùn)營需求。
4 案例
性感這件事見仁見智,有的APP喜歡花大力氣改版,有的則是小細(xì)節(jié)撩人。為了說得更明白,這里舉兩個(gè)顆撩到我的栗子來闡釋下如何表達(dá)產(chǎn)品設(shè)計(jì)中的性感。
(下文中涉及到的APP都是iOS版)
第一顆栗子:Instagram
Instagram 2016最新Feed流設(shè)計(jì),右側(cè)是Feed交替時(shí)的效果
先來一顆無人不知無人不曉的栗子Instagram,國內(nèi)社區(qū)類APP的Feed流多效仿此款。話說Ins新改版的icon被罵死了,然而今年Feed流的改版真是愛死了!?。?!
第一印象:
這次Feed流的大改版雖然與舊版本藍(lán)色調(diào)相比,F(xiàn)eed布局并沒有太大的變化,然而換上黑白色的視覺設(shè)計(jì),并將元素之間的空隙拉大(也就是布局更松散了),時(shí)尚度立刻翻了100倍!比起原來的藍(lán)色+橙色的主色調(diào),沒有性格的黑白色系更容易與各種色調(diào)的圖片搭配,板式設(shè)計(jì)微調(diào)后也減少了信息的壓迫感,更與潮流審美接軌,在用戶打開APP的第一時(shí)間就帶來視覺沖擊。
Nice的Feed流,右側(cè)是Feed交替時(shí)的效果
刺激核心需求:
圖片社交的用戶核心需求一是瀏覽圖片,二是互動(dòng)(包括與別人互動(dòng)和被別人互動(dòng))。想要判斷Feed設(shè)計(jì)的成功度,如何優(yōu)化瀏覽圖片的體驗(yàn)和刺激用戶參與互動(dòng)就成了關(guān)鍵。單獨(dú)分析Ins的Feed可能不夠直觀,我們通過和Nice的對(duì)比來分析下怎樣能更好地實(shí)現(xiàn)對(duì)核心訴求的刺激。上圖是對(duì)標(biāo)Ins的Nice的Feed流,我們可以看到整體設(shè)計(jì)基本一致,但細(xì)節(jié)上的區(qū)別則很多。簡單分析幾個(gè):
第一,為了凸顯用戶發(fā)布的圖片,提升瀏覽圖片的流暢度,Ins對(duì)發(fā)布人信息的強(qiáng)調(diào)方式采用了上滑時(shí)將發(fā)布人信息cell置頂?shù)姆绞?,?dāng)整個(gè)Feed滑出屏幕,由下一個(gè)發(fā)布人信息cell替換。這樣做的好處是,弱化頭像在屏幕中的比重,通過昵稱突出發(fā)布人信息,而黑色文字對(duì)主要圖片的沖擊遠(yuǎn)低于圖片;而Nice對(duì)發(fā)布人信息的強(qiáng)調(diào)方式則是采用方形的頭像并增加身份標(biāo)識(shí),雖然從UGC的層面能一定程度上起到刺激用戶的作用,但卻分散了用戶的視覺焦點(diǎn)。
第二,Ins對(duì)用戶互動(dòng)功能的處理是使用大圖標(biāo)(且比Ins原來版本的圖標(biāo)更大更清晰)并排放置在圖片下方,緊隨其后的是被點(diǎn)贊數(shù),之后才是圖片本身的配文,最下方是評(píng)論。這樣的優(yōu)先級(jí)處理,已經(jīng)把互動(dòng)功能放在了非常高的位置,而且用戶 看到圖片——觸發(fā)互動(dòng)欲望——點(diǎn)擊互動(dòng)功能,這樣的操作非常順暢。同時(shí),這也說明在實(shí)際應(yīng)用中,引發(fā)用戶產(chǎn)生互動(dòng)欲望的還是圖片本身,文字僅僅是個(gè)輔助。
Nice則是將圖片的說明文字放置在了圖片下方,其次是點(diǎn)贊功能、點(diǎn)贊用戶、分享、評(píng)論、評(píng)論發(fā)布框,這些信息和功能之間的優(yōu)先級(jí)并不清晰,有可能帶來的問題就是互動(dòng)功能不突出。比如,點(diǎn)贊的功能采用灰色,且和點(diǎn)贊用戶、分享平級(jí)排列,顯然其中最突出的是點(diǎn)贊用戶的一排彩色頭像,而點(diǎn)贊功能占據(jù)的空間也小、顏色也采用灰色,容易讓人誤會(huì)成不可點(diǎn)擊。另外,評(píng)論框雖然直接顯示在Feed中,看似直觀引導(dǎo)用戶參與,然而評(píng)論框放置在最末端,容易讓用戶困擾當(dāng)?shù)厥窃u(píng)論圖片還是回復(fù)他人的評(píng)論?然而實(shí)際上,有價(jià)值的用戶評(píng)論是非常少的。
其他還有一些細(xì)節(jié),比如兩個(gè)Feed之間的分割方式,發(fā)布時(shí)間的展示,評(píng)論的展示,都可以認(rèn)真比較下。Ins的Feed流,所營造出的是一種簡約、潮流、沉浸的性感,讓人欲罷不能;而相對(duì)于Ins,感覺Nice更希望凸顯用戶、營造社交氛圍,然而對(duì)于一個(gè)圖片社交的APP,如果在強(qiáng)調(diào)圖片(內(nèi)容)和強(qiáng)調(diào)用戶(關(guān)系)之間難以區(qū)分優(yōu)先級(jí),就容易讓產(chǎn)品設(shè)計(jì)臃腫雜亂,失去性感的味道。
交互與運(yùn)營:
Ins的圖片在Feed上是1:1無邊縫展示,不設(shè)置點(diǎn)擊查看大圖的功能,所以利用點(diǎn)擊實(shí)現(xiàn)了另外兩種功能:單擊顯示圖片標(biāo)簽,雙擊即可點(diǎn)贊(并且在圖片正中間會(huì)出現(xiàn)一個(gè)大大的心形)。這樣就可以讓用戶在快速瀏覽多張圖片時(shí),用最簡單的方式實(shí)現(xiàn)與圖片的互動(dòng)。而像評(píng)論這樣參與門檻比較高的交互功能,則引導(dǎo)到了二級(jí)頁面,直接調(diào)起評(píng)論欄。這樣做的好處是不干擾Feed流中主要信息的凸顯,保持其調(diào)性,同時(shí)對(duì)于希望參與評(píng)論的用戶,能在二級(jí)頁面獲取更多評(píng)論信息,也沒有增加任何操作步驟(同樣是點(diǎn)擊評(píng)論——輸入文字——發(fā)送)。至于運(yùn)營層面,排序和推薦這種基本的運(yùn)營干預(yù)就不說了(反正也拿不到人家的策略- -),最直觀的就是Feed流廣告了。
第二顆栗子:MANGO
左:首屏;右:Feed流
第二顆栗子有點(diǎn)小眾。許多人知道MANGO的門店、天貓店,可能并沒有關(guān)注MANGO其實(shí)有自己的全球購物APP。創(chuàng)立于1984年的西班牙快時(shí)尚品牌MANGO堅(jiān)持全球門店風(fēng)格一致,而這種風(fēng)格也延續(xù)到了MANGO自家的購物APP里。依舊從三個(gè)方面看MANGO家的Feed流:
第一印象:
MANGO的設(shè)計(jì)風(fēng)格一直強(qiáng)調(diào)時(shí)尚、流行與大都會(huì)感,服裝和門店的設(shè)計(jì)風(fēng)格一直維持著簡約且具有品質(zhì)的品牌形象。APP中的Feed流設(shè)計(jì)也不例外,除了商品相關(guān)的信息,沒有增加任何設(shè)計(jì)元素,用簡潔的黑白灰作為設(shè)計(jì)基調(diào),體現(xiàn)頁面質(zhì)感的同時(shí),也突出了核心信息——服裝本身。
刺激核心需求:
雖然與其他購物APP看上去布局一致,然而在Feed流的細(xì)節(jié)上卻增加了許多巧思,促進(jìn)核心信息的展示。
首先,商品圖片素材被統(tǒng)一為長方形,在Feed流中的展示也是等比縮小的長方形,比起1:1的圖片比例,能夠最大化利用空間展示服裝細(xì)節(jié);
第二,商品名僅展示到分類,并沒有在Feed流里展示具體的商品名。我們可以回一下,購買一件衣服的時(shí)候誰會(huì)注意到這件衣服叫什么?無論是線下還是線上購物,商品名和編號(hào)幾乎都會(huì)被消費(fèi)者忽略,這兩個(gè)字段本身在絕大部分場景下都是對(duì)商家具有意義。MANGO的Feed信息中大膽地把商品名去除,起到了簡化頁面的作用,同時(shí)也讓人更加聚焦到商品圖片本身;
最后,很明顯可以看到在為數(shù)不多的信息里,原價(jià)和售價(jià)被放在了一個(gè)非常突出的位置,且原價(jià)的字號(hào)是和售價(jià)一樣的。很顯然,MANGO作為一個(gè)快時(shí)尚品牌,面向的消費(fèi)者對(duì)價(jià)格非常敏感,想要促進(jìn)消費(fèi)者下單,價(jià)格信息自然需要凸顯。
MANGO商品詳情頁
交互:
MANGO的Feed流本身的交互中規(guī)中矩,然而點(diǎn)擊圖片進(jìn)入商品詳情頁的交互則非常讓人驚喜:除了用大圖填滿屏幕,還采用海報(bào)式上下翻頁的交互查詢多張圖片,用左上角色塊切換同款其他顏色繼續(xù)查詢更多圖片。右下角添加到購物車的設(shè)計(jì),點(diǎn)擊會(huì)出現(xiàn)透明浮層展示可購尺碼。幾乎所有的信息和交互都停留在同一個(gè)畫面里,不讓用戶跳出,自然就增加了沉浸感。
看完這兩顆栗子,覺得我對(duì)性感的審美其實(shí)還挺一致的……
5 一句話總結(jié)
無論是波濤洶涌怒放如歌,還是精雕細(xì)琢風(fēng)情萬種,圍繞目標(biāo)用戶的興奮點(diǎn)去釋放產(chǎn)品本身的性感讓用戶真正享受這份性感,才是正途。
(……感覺這個(gè)產(chǎn)品設(shè)計(jì)思路在找對(duì)象上也適用?。。。?/p>
#專欄作家#
莔莔有神,微信公眾號(hào):破殼(ID:Pokeclub),人人都是產(chǎn)品經(jīng)理專欄作家。量化精進(jìn)法實(shí)踐者,最接地氣的互聯(lián)網(wǎng)求職培訓(xùn)師。文章專注于互聯(lián)網(wǎng)求職、產(chǎn)品設(shè)計(jì)和自我管理。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
對(duì)Feed流有了一個(gè)新的認(rèn)識(shí),ins和nice的對(duì)比對(duì)我很有啟示,十分感謝 ??