誰家的APP,有這么性感撩人的Feed流?

1 評論 20110 瀏覽 80 收藏 19 分鐘

最近一直沉浸在研究Feed流的樂趣里。作為APP最常見的信息展示方式,Feed流的產品設計其實有很多門道可以探討,并不是抄來抄去那么簡單。今天的話題是:如何設計出一個性感撩人的信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.

嚴謹地從定義出發(fā),我們可以關注如下三點:

  1. Feed本身是一種數據格式;
  2. 內容提供方為用戶提供Feed的訂閱功能并更新;
  3. 雖然形式上是提供方推送內容給用戶,但實際上是用戶主動發(fā)起訂閱。

然而在實際使用中,我們發(fā)現有些Feed流并不是主動選擇多個訂閱源,可能是基于搜索或推薦而形成的Feed流,如果搜索是用戶主動發(fā)起內容檢索,而推薦是基于用戶特性實現的個性化推薦,那么也可算作一種廣義的Feed流,也包含在本文的討論范圍之中。畢竟本文的關注點是Feed流的產品設計,概念上只做科普。

2 性感

接下來我們討論下性感。

拋開“什么樣的產品設計可以叫性感“這種話題,我們回歸現實世界,你覺得什么樣的女神算性感?

(以下多圖高能預警,請注意鼻血,注意觀賞環(huán)境←←)

36591-af4837023065c07e

宇宙的蒼老師

36591-6a2b6706265ed091

名模杜鵑拍攝的一組舊上海題材的時尚大片

36591-63f6d579336e8786

Candice Swanepoel,維密天使

36591-e10285f360367374

Miranda Kerr,前維密天使(我的女神T^T)

拿我上面選的這幾個例子來說,宇宙的蒼老師自然是宅男最愛,胸器一出全場制霸;一馬平川的杜鵑則有東方女性的性感風骨,眼角加紅唇的必殺技簡直是戳中心臟;而同樣是維密天使,有Candice的火辣,也有Kerr的撩人……至于說哪個最性感,真的是見仁見智。

性感在新華字典的定義是“富有性的誘惑力”,關鍵在于“誘惑”。所以無論什么樣的性感,其實際效應無非是以下三個效果:第一,一定是針對目標受眾的喜好,在第一時間吸引人的眼球;第二,凸顯這種類型性感的特質,夠觸動目標受眾的興奮點;第三,性感是一種氣場的交互,不光能吸引目標受眾,還能讓目標受眾被誘惑,引發(fā)遐想。從這個角度看,無論是以上哪種風情,都足夠稱得上“性感撩人”。

3 性感+Feed流

那么回歸到Feed流本身,什么樣的Feed流能夠稱得上性感?

像美女一樣,一個性感的Feed流應當滿足如下特征:

3.1 塑造第一印象——在第一時間抓住你

性感的Feed流在顏值上自然有一定的要求,雖然不同用戶群在審美會有差異,但硬要從王寶強身上說性感還是有些勉強(寶寶躺槍……)。尤其是現在主流市場幾乎被瓜分完畢的環(huán)境下,想要瞄準細分市場,滿足細分市場用戶的更多要求,Feed流在視覺設計上要花些巧思。

3.2 刺激目標用戶的核心需求——觸動興奮點

比第一印象更重要的是,性感的Feed流應當直擊用戶的核心需求。使用Feed流的APP很多,APP之間相互借鑒屢見不鮮,然而不同類別、不同目標群體的APP之間若只是對Feed流的設計生搬硬套,就有些盲目了。想要設計一款適合自家APP的性感的Feed流,思路應當是圍繞自家目標用戶的核心訴求去外延、擴散。以購物類APP為例,這個需求拆解應當是:

  1. 用戶核心需求是?——找到想要購買的商品并成功購物;
  2. 什么是想要購買的商品?——圖片清晰(認清商品本身)、價格清晰(認清價格)、活動清晰(進一步促進下單)、交易保障(無后患之憂,也是為了促進下單)、發(fā)貨地、送達方式……
  3. 如何展示?——這時候就要考慮到基于用戶群不同,這些信息展示的優(yōu)先級也不同。對于價格比較敏感的用戶,應當突出價格和優(yōu)惠;對于商品質量比較敏感的用戶,則應當突出商品細節(jié)和售后保障;對于收獲速度比較敏感的用戶,則應當適當強調和物流相關的信息……

通過以上拆解,就可以初步確認Feed上應當呈現的信息及這些信息的優(yōu)先級,從根本上刺激用戶的興奮點,保證Feed流足夠性感。之后再從排版、視覺上進行包裝,提升性感的個性和質感就容易多了。

3.3 優(yōu)化交互,保持可運營性和可拓展性——引發(fā)遐想

第三點比較容易被人忽略:一個性感的Feed流應當能和用戶產生互動。這個互動可以從狹義上理解為操作上的交互,也可以從廣義上理解為通過某種手段給用戶不同以往的刺激,讓用戶保持有新鮮感和好奇心。

這就要求在產品設計時就考慮到Feed流的互動性,而這個互動性同樣要從兩方面進行落實:一方面,產品經理在進行產品設計時要考慮到用戶的交互方式,給用戶以流暢的使用體驗,通過與Feed流的互動提高用戶的沉浸度;另一方面,則是要求Feed流保持一定的可運營性和可拓展性,尤其是內容、社交、電商類的APP,經常會依賴于運營手段實現目標,那么Feed流這樣的基本產品形態(tài)在設計是就要預留給運營一定的可操作能力,以后的話,也需要有能力在不影響基本產品架構的前提下拓展更多的運營需求。

4 案例

性感這件事見仁見智,有的APP喜歡花大力氣改版,有的則是小細節(jié)撩人。為了說得更明白,這里舉兩個顆撩到我的栗子來闡釋下如何表達產品設計中的性感。

(下文中涉及到的APP都是iOS版)

第一顆栗子:Instagram

36591-50b88f70fb8490e0

Instagram 2016最新Feed流設計,右側是Feed交替時的效果

先來一顆無人不知無人不曉的栗子Instagram,國內社區(qū)類APP的Feed流多效仿此款。話說Ins新改版的icon被罵死了,然而今年Feed流的改版真是愛死了?。。。?/p>

第一印象:

這次Feed流的大改版雖然與舊版本藍色調相比,Feed布局并沒有太大的變化,然而換上黑白色的視覺設計,并將元素之間的空隙拉大(也就是布局更松散了),時尚度立刻翻了100倍!比起原來的藍色+橙色的主色調,沒有性格的黑白色系更容易與各種色調的圖片搭配,板式設計微調后也減少了信息的壓迫感,更與潮流審美接軌,在用戶打開APP的第一時間就帶來視覺沖擊。

36591-6bd57fcbfdc869fb

Nice的Feed流,右側是Feed交替時的效果

刺激核心需求:

圖片社交的用戶核心需求一是瀏覽圖片,二是互動(包括與別人互動和被別人互動)。想要判斷Feed設計的成功度,如何優(yōu)化瀏覽圖片的體驗和刺激用戶參與互動就成了關鍵。單獨分析Ins的Feed可能不夠直觀,我們通過和Nice的對比來分析下怎樣能更好地實現對核心訴求的刺激。上圖是對標Ins的Nice的Feed流,我們可以看到整體設計基本一致,但細節(jié)上的區(qū)別則很多。簡單分析幾個:

第一,為了凸顯用戶發(fā)布的圖片,提升瀏覽圖片的流暢度,Ins對發(fā)布人信息的強調方式采用了上滑時將發(fā)布人信息cell置頂的方式,當整個Feed滑出屏幕,由下一個發(fā)布人信息cell替換。這樣做的好處是,弱化頭像在屏幕中的比重,通過昵稱突出發(fā)布人信息,而黑色文字對主要圖片的沖擊遠低于圖片;而Nice對發(fā)布人信息的強調方式則是采用方形的頭像并增加身份標識,雖然從UGC的層面能一定程度上起到刺激用戶的作用,但卻分散了用戶的視覺焦點。

第二,Ins對用戶互動功能的處理是使用大圖標(且比Ins原來版本的圖標更大更清晰)并排放置在圖片下方,緊隨其后的是被點贊數,之后才是圖片本身的配文,最下方是評論。這樣的優(yōu)先級處理,已經把互動功能放在了非常高的位置,而且用戶 看到圖片——觸發(fā)互動欲望——點擊互動功能,這樣的操作非常順暢。同時,這也說明在實際應用中,引發(fā)用戶產生互動欲望的還是圖片本身,文字僅僅是個輔助。

Nice則是將圖片的說明文字放置在了圖片下方,其次是點贊功能、點贊用戶、分享、評論、評論發(fā)布框,這些信息和功能之間的優(yōu)先級并不清晰,有可能帶來的問題就是互動功能不突出。比如,點贊的功能采用灰色,且和點贊用戶、分享平級排列,顯然其中最突出的是點贊用戶的一排彩色頭像,而點贊功能占據的空間也小、顏色也采用灰色,容易讓人誤會成不可點擊。另外,評論框雖然直接顯示在Feed中,看似直觀引導用戶參與,然而評論框放置在最末端,容易讓用戶困擾當地是評論圖片還是回復他人的評論?然而實際上,有價值的用戶評論是非常少的。

其他還有一些細節(jié),比如兩個Feed之間的分割方式,發(fā)布時間的展示,評論的展示,都可以認真比較下。Ins的Feed流,所營造出的是一種簡約、潮流、沉浸的性感,讓人欲罷不能;而相對于Ins,感覺Nice更希望凸顯用戶、營造社交氛圍,然而對于一個圖片社交的APP,如果在強調圖片(內容)和強調用戶(關系)之間難以區(qū)分優(yōu)先級,就容易讓產品設計臃腫雜亂,失去性感的味道。

交互與運營:

Ins的圖片在Feed上是1:1無邊縫展示,不設置點擊查看大圖的功能,所以利用點擊實現了另外兩種功能:單擊顯示圖片標簽,雙擊即可點贊(并且在圖片正中間會出現一個大大的心形)。這樣就可以讓用戶在快速瀏覽多張圖片時,用最簡單的方式實現與圖片的互動。而像評論這樣參與門檻比較高的交互功能,則引導到了二級頁面,直接調起評論欄。這樣做的好處是不干擾Feed流中主要信息的凸顯,保持其調性,同時對于希望參與評論的用戶,能在二級頁面獲取更多評論信息,也沒有增加任何操作步驟(同樣是點擊評論——輸入文字——發(fā)送)。至于運營層面,排序和推薦這種基本的運營干預就不說了(反正也拿不到人家的策略- -),最直觀的就是Feed流廣告了。

第二顆栗子:MANGO

36591-ce4bcd913f4ec2f5

左:首屏;右:Feed流

第二顆栗子有點小眾。許多人知道MANGO的門店、天貓店,可能并沒有關注MANGO其實有自己的全球購物APP。創(chuàng)立于1984年的西班牙快時尚品牌MANGO堅持全球門店風格一致,而這種風格也延續(xù)到了MANGO自家的購物APP里。依舊從三個方面看MANGO家的Feed流:

第一印象:

MANGO的設計風格一直強調時尚、流行與大都會感,服裝和門店的設計風格一直維持著簡約且具有品質的品牌形象。APP中的Feed流設計也不例外,除了商品相關的信息,沒有增加任何設計元素,用簡潔的黑白灰作為設計基調,體現頁面質感的同時,也突出了核心信息——服裝本身。

刺激核心需求:

雖然與其他購物APP看上去布局一致,然而在Feed流的細節(jié)上卻增加了許多巧思,促進核心信息的展示。

首先,商品圖片素材被統(tǒng)一為長方形,在Feed流中的展示也是等比縮小的長方形,比起1:1的圖片比例,能夠最大化利用空間展示服裝細節(jié);

第二,商品名僅展示到分類,并沒有在Feed流里展示具體的商品名。我們可以回一下,購買一件衣服的時候誰會注意到這件衣服叫什么?無論是線下還是線上購物,商品名和編號幾乎都會被消費者忽略,這兩個字段本身在絕大部分場景下都是對商家具有意義。MANGO的Feed信息中大膽地把商品名去除,起到了簡化頁面的作用,同時也讓人更加聚焦到商品圖片本身;

最后,很明顯可以看到在為數不多的信息里,原價和售價被放在了一個非常突出的位置,且原價的字號是和售價一樣的。很顯然,MANGO作為一個快時尚品牌,面向的消費者對價格非常敏感,想要促進消費者下單,價格信息自然需要凸顯。

36591-4aa9b8d098f3da6b

MANGO商品詳情頁

交互:

MANGO的Feed流本身的交互中規(guī)中矩,然而點擊圖片進入商品詳情頁的交互則非常讓人驚喜:除了用大圖填滿屏幕,還采用海報式上下翻頁的交互查詢多張圖片,用左上角色塊切換同款其他顏色繼續(xù)查詢更多圖片。右下角添加到購物車的設計,點擊會出現透明浮層展示可購尺碼。幾乎所有的信息和交互都停留在同一個畫面里,不讓用戶跳出,自然就增加了沉浸感。

看完這兩顆栗子,覺得我對性感的審美其實還挺一致的……

5 一句話總結

無論是波濤洶涌怒放如歌,還是精雕細琢風情萬種,圍繞目標用戶的興奮點去釋放產品本身的性感讓用戶真正享受這份性感,才是正途。

(……感覺這個產品設計思路在找對象上也適用!?。。?/p>

#專欄作家#

莔莔有神,微信公眾號:破殼(ID:Pokeclub),人人都是產品經理專欄作家。量化精進法實踐者,最接地氣的互聯網求職培訓師。文章專注于互聯網求職、產品設計和自我管理。

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 對Feed流有了一個新的認識,ins和nice的對比對我很有啟示,十分感謝 ??

    來自北京 回復