如何設計一個素材列表

6 評論 8202 瀏覽 36 收藏 5 分鐘

最近在設計一個新的拍攝玩法,用戶點擊拍攝后,首先會進入一個素材列表頁,選擇對應的素材后進入拍攝頁面開始拍攝。經過一個版本上線后收到的定性和定量的用戶數據反饋都顯示,在素材列表頁的選擇階段,用戶的流失率較高,用戶對于素材選擇行為的目的性明顯不足。

原設計稿如下圖所示:

根據用戶的訪談反饋,主要是對于素材列表頁的樣式認知出現了偏差,而問題根源來源于兩方面:

  1. 樣式:當前的素材列表頁樣式采用的是類似宮格樣式,1:1的方圖更像是一個視頻內容;封面圖片為明星內容,而不是一般意義上的貼紙或、文字等素材樣式;加之素材名稱往往以內容來命名,用戶對于『這是一個素材』的認知被削弱了。
  2. 用戶習慣與記憶:這是一個隱藏的,但是與用戶體驗深度相關的疏漏。新的玩法是作為視頻App的一個新的拍攝互動玩法,用戶對于視頻的認知和記憶根深蒂固,而且封面圖都是明星,用戶對于明星的直觀指向就是視頻內容,這就導致用戶一看到這種宮格樣式的頁面,第一反應就是這是一個視頻列表頁,而不是素材列表頁。

在收到用研同學的反饋后,設計師有研究了一些競品的素材列表的設計樣式,發現了一些通用的設計樣式:

1. 宮格樣式-小影

小影蘇素材列表樣式多樣,其中的宮格樣式同樣選取1:1的方圖,但是其標題文案描述、標簽內容與素材內容較為一致;方圖畫面風格選擇和樣式上都具有很強的一致性,因此并不會產生過多的認知偏差;

2. 列表樣式-小影,抖音,小咖秀,音樂app

列表樣式的素材,弱化了圖片內容,增加了素材的文案描述和說明內容,同時增加符合場景的下載、收藏、拍攝icon,能夠強化用戶對于『素材』的認知,便于用戶理解;

3. 瀑布流樣式-小影

小影的這種瀑布流樣式素材列表頁面不太常見,但是由于畫面效果更加突出,標題描述、下載icon的存在,給用戶傳達的信息同樣比較明確。

由此可見,對于素材列表頁的重新設計,需要從以下幾點展開:

  1. 避免與當前APP內的視頻樣式沖突,選取差異化的樣式;
  2. 增加標題文案描述,同時可給出對應的玩法引導;
  3. 增加對應的拍攝icon,提升引導效果。

概念方案

總結

從素材列表頁面衍生到其他APP內頁面,除了要與用戶的心理預期和認知一致,避免產生偏差影響轉化率;同時也要考慮用戶對于APP的使用習慣和固有記憶。尤其針對新的內容或者互動玩法,要盡量避APP內已有的設計樣式,防止給用戶帶來認知混淆。

 

作者:蝦米&胖喵,百度交互設計師

本文由 @蝦米&胖喵 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很厲害啊,值得學習 :mrgreen:

    來自廣東 回復
  2. 有個小疑問:為什么點擊拍攝之后要先選擇素材?而不是直接開始拍,在畫面中給一個入口,用戶需要再進行素材選擇? 如果用戶在5S內沒有看到滿意的素材,是否會大大削弱拍攝的意愿?

    來自北京 回復
    1. 打個比方,如果是視頻濾鏡素材,最好在拍攝前選擇好,節省效果實驗所需的時間和內存。另一個,相同的光線下,攝影師一般會調教好以后連續拍攝??傊@種前置的方法我覺得還是挺好的。

      來自北京 回復
    2. 首先,拍攝之前的選擇通常無法看到實際的效果,因為用戶只能看見一個系統給予的效果圖,除非用戶是個資深玩家,否則誤選的可能性很大,誤選之后怎么辦呢,再退回去重選嗎?有沒有更方便的交互方式?其次,用戶在拍攝的時候需要實際檢驗不同濾鏡的效果,試試不同的濾鏡,這個需求如何滿足?
      我對這類產品不是很熟悉,目前錄視頻的app一般都是先選濾鏡再拍攝嗎?

      來自北京 回復
    3. 從場景上考慮,拍攝是需要用戶來生產內容的,而畫面中切換濾鏡等操作其實更適合在前置歐哲后期編輯階段使用,拍攝過程中盡量不干擾用戶的拍攝過程;素材列表頁設計在前面和產品的定位相關,但是一種在特定素材下讓用戶去發揮創意,而不是普通的ugc玩法哈

      來自北京 回復
    4. 我用過美拍之類的,視頻后期編輯和切換不同的濾鏡查看效果,等待的時間真的很漫長。我不知道作者提供的濾鏡是否能直接讓屏幕當前拍攝畫面(也就是鏡頭畫面)顯示出被濾鏡加工后的畫面,如果是的話,那豈不是完美。

      來自北京 回復