店鋪卡片的組件表現(xiàn)形式在某種程度上和商品卡片有些相似，但二者在信息安排組合維度上仍存在差異，那么面對繁多的信息，設(shè)計(jì)人員要如何做好信息的歸納總結(jié)與排版？本篇文章里，作者便結(jié)合經(jīng)驗(yàn)做了分享總結(jié)，一起來看。

一、組件介紹

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

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

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

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

二、使用場景

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

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

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

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

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

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

1. 布局

最常見的店鋪卡片采用列表視圖，跟產(chǎn)品卡片的列表視圖布局上幾乎一致，但因?yàn)榈赇伩ㄆ男畔⑼ǔ１容^多，所以不會出現(xiàn)信息不夠的問題，大多數(shù)情況下信息多到足以超過圖片的底部范圍，最少可能也得撐滿整個(gè)縱向空間。

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

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

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

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

3. 內(nèi)容排版

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

第一：按行排版

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

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

這才是整個(gè)步驟中最難的部分，因?yàn)檫@些字段幾乎都很重要，對用戶來說都是重要信息，所以在排布的時(shí)候幾乎無法弱化每一類信息。這也是這類組件看起來亂糟糟的原因，但這是有必要的，因?yàn)橛脩粽娴臅疵恳粭l信息。

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

• 因?yàn)橄盗形恢眯?yīng)，一行字段的開頭和結(jié)尾總是更容易被關(guān)注；
• 因?yàn)轳T·雷斯托夫效應(yīng)，在一群類似的元素中，與眾不同的那個(gè)會格外突出；
• 因?yàn)檠鸥鞑级?，用戶會對在哪里能找到類似的信息有心理預(yù)期，所以不能與別的應(yīng)用中信息排布差距過大。

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

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

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

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

④ 右對齊的信息，因?yàn)槠鋵R方式與其它信息不同，往往也可以突出出來。大部分App會在這個(gè)位置放距離，與店鋪位置做在同一行。

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

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

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

4. 比較特別的店鋪卡片

1）去哪兒

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

2）帶商品的店鋪卡片

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

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

四、樣式拓展

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

結(jié)尾

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