一、組建介紹

說起店鋪卡片，大家的第一反應(yīng)肯定是"那不是和商品卡片差不多嗎？"

是的，你們的印象沒有錯，店鋪?zhàn)鳛樯唐吩诔橄笊系木酆?，它的組件表現(xiàn)形式和商品卡片沒有本質(zhì)的區(qū)別，不過商品卡片的字段內(nèi)容往往比商品卡片更多，甚至向下包括商品卡片本身，所以這個組件的設(shè)計難點(diǎn)全部在于如何合理地安排信息上。

信息的歸納總結(jié)和排版，這是 UI 設(shè)計必備的能力之一，愈是碰到信息繁多的組件，這種能力就愈發(fā)顯得重要。

但在很長一段時間的觀察下，我發(fā)現(xiàn)新手對于多信息排版的掌控能力是有所欠缺的，大家都會更關(guān)注「視覺」，而在某些方面忽略了「信息」的重要性。具體表現(xiàn)就是，要加的字段一多就手忙腳亂，亂排一通。

二、使用場景

店鋪卡片多用在有多商戶入駐的平臺型 App 內(nèi)，業(yè)務(wù)類型可以包含外賣、餐飲、旅宿、理發(fā)、健身等等等等。

但在日常使用的 App 中，商品卡片出現(xiàn)的最多的不是淘寶京東這種超大型綜合電商 App，反而是餓了么美團(tuán)大眾點(diǎn)評，因為這倆者的業(yè)務(wù)流程有很大區(qū)別。

淘寶京東的瀏覽動線為從具體商品再到店鋪 (這里指主要的流程)，而美團(tuán)餓了么大眾點(diǎn)評則剛好相反，先挑選店鋪再挑選具體的餐品。這倆者的區(qū)別就好似于超市與商場，你在超市挑選商品首先在意的是商品具體是什么，其次才在意其品牌；但在商場不一樣，首先在意門店和品牌，其次才是在這家店買什么。

所以淘寶京東對商品卡片的需求遠(yuǎn)遠(yuǎn)高于店鋪卡片，而美團(tuán)餓了么卻是后者權(quán)重更高，內(nèi)在邏輯便來源于此。

故而，店鋪卡片主要應(yīng)用的場景便是類似上述后一種商場模式的 App。

三、設(shè)計要點(diǎn)

1. 布局

最常見的店鋪卡片采用列表視圖，跟產(chǎn)品卡片的列表視圖布局上幾乎一致，但因為店鋪卡片的信息通常比較多，所以不會出現(xiàn)信息不夠的問題，大多數(shù)情況下信息多到足以超過圖片的底部范圍，最少可能也得撐滿整個縱向空間。

2. 店鋪卡片內(nèi)容

店鋪卡片的內(nèi)容各種業(yè)務(wù)也有自己的特色字段，總結(jié)下來大概有以下這些：

1. 圖片：店鋪 logo
2. 標(biāo)題：店鋪標(biāo)簽+店鋪名稱
3. 評分信息：店鋪評分+評分人數(shù)
4. 價格相關(guān)：人均價格/起售價格/起送價格
5. 店鋪位置：大致位置+當(dāng)前距離 / 交通信息 (多見于酒店)
6. 店鋪標(biāo)簽：服務(wù)類型 (各個行業(yè)的店鋪有自己特有的子服務(wù)類型，例如餐廳有菜系，旅店有鐘點(diǎn)房/酒店這類子類型)
7. 用戶評價：摘選出的簡短的用戶評價
8. 排行標(biāo)簽：區(qū)域排名/總排名
9. 優(yōu)惠信息：優(yōu)惠券、活動
10. 具體商品：店鋪具體出售的商品和其簡要信息

當(dāng)然肯定不止上述這些，不同行業(yè)的店鋪、不同業(yè)務(wù)的平臺還會賦予店鋪不同的信息類型，比如外賣平臺還會給出騎士專送等特有的服務(wù)類型；餐飲平臺還會給出店鋪的營業(yè)時間；酒店平臺還會標(biāo)出酒店的配套設(shè)施、房型等等，在實際的設(shè)計任務(wù)中字段類型多是由產(chǎn)品經(jīng)理給出，具體的選擇則是根據(jù)產(chǎn)品實際的業(yè)務(wù)類型進(jìn)行篩選。

3. 內(nèi)容排版

有了內(nèi)容，那么如何把這么多內(nèi)容排在一起，成為了同學(xué)們在設(shè)計這類卡片時候最大的攔路虎，因為零碎的信息太多，很多同學(xué)難免進(jìn)入無從下手的迷茫狀態(tài)。我在這里給出進(jìn)行信息排版的原則，大家可以按照這個原則進(jìn)行排版，也可以將之作為參考。

第一：按行排版

沒錯，按照行來排版是店鋪卡片最基本的原則，在復(fù)雜的店鋪卡片中，除了圖片之外，文字部分可以分成三類行：標(biāo)題行、多個副字段行、商品行 (如果有)，行與行之間盡量保持間距一致。

第二：將字段放在這些行內(nèi)

這才是整個步驟中最難的部分，因為這些字段幾乎都很重要，對用戶來說都是重要信息，所以在排布的時候幾乎無法弱化每一類信息。這也是這類組件看起來亂糟糟的原因，但這是有必要的，因為用戶真的會看每一條信息。

但是，不管如何「我全要」，在排版中總歸還是會因為各種客觀上的心理學(xué)效應(yīng)，導(dǎo)致有些內(nèi)容更容易獲得關(guān)注。例如：

1. 因為系列位置效應(yīng)，一行字段的開頭和結(jié)尾總是更容易被關(guān)注；
2. 因為馮·雷斯托夫效應(yīng)，在一群類似的元素中，與眾不同的那個會格外突出；
3. 因為雅各布定律，用戶會對在哪里能找到類似的信息有心理預(yù)期，所以不能與別的應(yīng)用中信息排布差距過大。

了解這些可以幫助我們更有目的性地安排信息的位置。例如：

①標(biāo)題下方的一行往往可以第一眼注意到。所以我們會在這一行排布評分、人均價格這些能直觀幫助用戶做出決策的信息。

②最后一行（除商品展示之外）也能方便引起用戶注意，所以把優(yōu)惠活動信息放在這里。

③重要的標(biāo)簽應(yīng)該與其它標(biāo)簽做出區(qū)別。

④右對齊的信息，因為其對齊方式與其它信息不同，往往也可以突出出來。大部分 App 會在這個位置放距離，與店鋪位置做在同一行。

按照這種思想，我們可以把信息安排進(jìn)之前所劃定的那些行內(nèi)。

第三：設(shè)計具體的樣式

視覺設(shè)計方面，主要集中在標(biāo)簽設(shè)計上，各種不同的視覺化標(biāo)簽可以有效地吸引用戶視線，但標(biāo)簽的設(shè)計沒有什么技巧，就是顏色+圖標(biāo)，我在下方列出一些案例，可供你們參考：

4. 比較特別的店鋪卡片

去哪兒

你們可以注意到，去哪兒的酒店搜索結(jié)果頁中間有一張卡片比較特別，在卡片下方做了一個特別顯眼的的「甄選酒店」的通欄標(biāo)簽，這可能是給某些特殊的店鋪特別設(shè)計的樣式，總而言之，不一樣的它能在列表中非常突出。

帶商品的店鋪卡片

在 App 里一些場景的店鋪卡片還會帶上商品，它大多數(shù)出現(xiàn)在搜索結(jié)果頁。

具體設(shè)計方面，它們也會因 App 需求不同而不同，但總體來說，可以根據(jù)實際場景刪改前面所講的那些字段，并在在下方貼上一排簡易的商品卡片。

四、樣式拓展

這里收集了一些商品卡片的線上案例，也可以作為設(shè)計時的參考：

結(jié)尾

店鋪卡片的組件，今天就介紹到這里了。

作者：超人的電話亭