一个人在线观看的免费视频,欧美日韩精品一区二区三区不卡

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

C端列表頁如何設(shè)計？

K_roy

2020-11-10

0 評論 14319 瀏覽 59 收藏

13 分鐘

編輯導(dǎo)讀：在C端產(chǎn)品設(shè)計中，數(shù)據(jù)列表頁是非常常見的頁面，它一般用來展示多條信息條目。雖然看起來十分簡單，但也是不可或缺非常重要的頁面。本文作者從產(chǎn)品使用場景出發(fā)，對列表頁設(shè)計的設(shè)計重點和步驟展開了梳理分析，供大家一同參考和學(xué)習(xí)。

一、場景描述

作為產(chǎn)品的設(shè)計者，我們想象以下幾個常見的場景：

一款電商產(chǎn)品，在搜索框中輸入手機，系統(tǒng)會反饋回來很多個手機相關(guān)的內(nèi)容，且每個內(nèi)容的信息較多，如何將這些內(nèi)容“同時”展示給用戶？
一個外賣平臺，入駐了很多不同的餐廳提供不同的菜品，當(dāng)用戶打開軟件定食物時，如何將合適的餐廳“同時”展示給用戶？
策劃一個特賣活動，對很多個商品進行打折促銷，策劃者希望活動頁面能夠讓用戶盡可能多的看到商品有哪些，如何將這些商品“同時”展示給用戶？

上述場景在產(chǎn)品中經(jīng)常發(fā)生：產(chǎn)品中存在很多內(nèi)容，在一些場景下需要“同時”反饋給用戶，供用戶瀏覽，但頁面空間是及其有限的，而每一條內(nèi)容的信息量通常又較大，“沒辦法”在同一個頁面展示每一個內(nèi)容的全部信息。

二、解決方法

為了解決這個問題，我們引入一個頁面。在這個頁面，通過減少每一個內(nèi)容所展示的信息量，來增加展示的內(nèi)容數(shù)量，用戶對某條內(nèi)容產(chǎn)生興趣后，再點擊查看該內(nèi)容的全部詳情。這樣，就在同一個頁面空間中將多條內(nèi)容展示在了用戶面前。通常我們把這個中間頁面稱為列表頁。

如圖，圖一的列表頁面中，展示了多個文章，但對每個文章，只展示了標(biāo)題，如果用戶對某一個文章感興趣，可點擊查看文章詳情。

列表頁在產(chǎn)品中十分常見，基本存在于產(chǎn)品的各個功能版塊，是連接用戶與內(nèi)容詳情的關(guān)鍵頁面，對于列表頁面的設(shè)計不可掉以輕心。

三、如何設(shè)計列表頁面？

產(chǎn)品將內(nèi)容展示給用戶，是希望用戶會根據(jù)內(nèi)容進行一些對產(chǎn)品有價值的操作，如購買、關(guān)注等，通常，用戶對內(nèi)容了解的越多，越可能產(chǎn)生這些行為。

但由于列表頁的特性，使得每一條內(nèi)容只展示很少部分信息，因此，如何能夠盡可能的讓用戶產(chǎn)生點擊查看詳情的沖動是設(shè)計列表頁面要考慮的重點?？梢詮膬煞矫婵紤]：

展示哪些信息以及如何展示
列表頁面采用哪種風(fēng)格

1. 展示哪些信息以及如何展示

用戶是否會對內(nèi)容產(chǎn)生興趣進而查看詳情，取決于內(nèi)容在列表頁所展示的信息，因為，這是用戶在列表頁唯一可以了解內(nèi)容的途徑。可以通過以下3個步驟來確定展示的信息：

（1）結(jié)合產(chǎn)品定位和內(nèi)容類型選出用戶更關(guān)注的信息

不同的產(chǎn)品，有不同的定位，影響著用戶對于產(chǎn)品的認(rèn)知，也因為產(chǎn)生的認(rèn)知，吸引著目標(biāo)用戶群體。通過向用戶傳遞出產(chǎn)品的定位，可以更好的吸引用戶，留住用戶。

對于已經(jīng)到達(dá)產(chǎn)品中的用戶，通過將能夠傳達(dá)出產(chǎn)品定位的信息融入到用戶的使用路徑中，不斷的觸達(dá)用戶，強化用戶的印象。

用來強化產(chǎn)品定位的信息，需要能夠讓用戶快速且“正確”的理解。用戶在瀏覽時，不會停下來，調(diào)動大腦深度思考，需要讓用戶第一反應(yīng)就能理解；而正確，則是指：這個信息表達(dá)的含義是產(chǎn)品想要傳達(dá)給用戶，不能產(chǎn)生歧義或者無法理解。比如：

同樣是做服飾電商的產(chǎn)品，前者主打折扣吸引用戶，折扣的信息是及其重要的，越快讓用戶感知到越好，因此，在列表頁面，會著重突出折扣相關(guān)的信息；而后者，主打高端，雖也有商品會打折，但卻不會像前者這樣著重突出。

產(chǎn)品的定位更多的是從整個產(chǎn)品或者業(yè)務(wù)線的維度思考，而不同的產(chǎn)品或者業(yè)務(wù)線，會有不同類型的內(nèi)容。不同的內(nèi)容類型，用戶對于內(nèi)容的關(guān)注點也會有所不同，能吸引用戶的信息自然也不同。例如：

對于外賣餐廳，用戶在選擇的時候，會關(guān)心口味、配送的時間、優(yōu)惠力度，因此，展示如商家的評分，人均消費，滿減折扣、配送方式、距離等信息，可以更好的幫用戶作出判斷；
而對于視頻內(nèi)容，用戶會關(guān)注內(nèi)容的看點，因此，可以展示如劇情類型，或者劇中明星等來吸引用戶。

在思考列表頁內(nèi)容展示哪些信息時，根據(jù)產(chǎn)品定位明確對目標(biāo)用戶的吸引點，進而篩選出對用戶有吸引力的信息；根據(jù)內(nèi)容類型，可以明確不同的內(nèi)容用戶會關(guān)注的信息有哪些。這樣，我們可以初步選出一批需要展示的信息。

（2）根據(jù)列表的使用場景，選出該場景下重要的信息

不同的展示場景，用戶所關(guān)注的信息會有所不同，所展示的信息自然也需要不同。

如圖，是同一個電商產(chǎn)品的商品列表，但在限時秒殺的商品列表頁和搜索結(jié)果頁所展示的信息卻不同。

對用戶來講，看到限時秒殺進入頁面，除了查看秒殺的商品有哪些，還會關(guān)注秒殺的商品價格是否足夠的合適，而產(chǎn)品運營者則希望能夠通過價格信息和剩余時間來刺激用戶，快速下單，因此，在秒殺列表頁面，著重突出了商品近期的最低價格以及剩余數(shù)量。而搜索列表則對這些信息沒有過多展示。

在考慮場景的時候，可以考慮用戶進入列表的前置動作，在該場景下的心理期望，會關(guān)注的點有哪些，同時也考慮在這個場景下，產(chǎn)品的目標(biāo)是什么，如何能夠引導(dǎo)用戶朝著產(chǎn)品期望的目標(biāo)操作。根據(jù)這兩方面的考慮，來選出該場景下，哪些信息對促進用戶進入詳情頁有幫助。

（3）對選出的信息進行優(yōu)先級排序，明確信息的級別關(guān)系

通過上面兩步驟，選出了一批需要展示的信息，但不同信息對用戶的吸引度是不同的，還需對篩選出的信息進行優(yōu)先級的排列。

優(yōu)先級排列，可以依據(jù)每個信息對于用戶的吸引力度進行打分，最好的方法是進行用戶調(diào)研，了解真實用戶對每個信息的關(guān)注度；如果沒有條件進行調(diào)研，可以根據(jù)過往經(jīng)驗或?qū)Ρ认嚓P(guān)競品。

對信息進行優(yōu)先級排序有兩個用途：

判斷選出的信息哪些可以刪減。通過上邊的兩步驟，我們可能會選出較多的想要在列表頁面展示的信息，但列表頁的空間是寶貴的，這時，通過信息的優(yōu)先級排序，可以對選出的信息再次刪減，以達(dá)到節(jié)省空間的目的。
對信息進行視覺權(quán)重的設(shè)計。不同級別的信息，在進行視覺設(shè)計時，是有不同的權(quán)重的。

例如，在設(shè)計課程列表頁時，對課程選出了一批通用類信息：課程標(biāo)題、課程時間、課程老師、課程價格、購課人數(shù)。

課程標(biāo)題，通過這個信息，用戶能大概理解內(nèi)容，判斷出這個課程是否適合，定為最重要的信息；其次是老師、價格。老師是對學(xué)生很有吸引力的信息，尤其是行業(yè)內(nèi)的名師，而價格也是學(xué)生在選擇課程時會考慮的主要因素；課程時間和購課人數(shù)，這兩個信息是輔助功能，相對的關(guān)注度沒有前幾者這么高。

由此，對于這些信息，大致分為3個層級：課程標(biāo)題為第一層級；課程老師、售價為第二層級；課程時間、購課人數(shù)為第三層級。隨著層級的降低，信息在列表頁的視覺權(quán)重也隨之低。