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

一、組件介紹

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

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

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

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

二、使用場(chǎng)景

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

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

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

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

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

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

1. 布局

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

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

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

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

當(dāng)然肯定不止上述這些，不同行業(yè)的店鋪、不同業(yè)務(wù)的平臺(tái)還會(huì)賦予店鋪不同的信息類型，比如外賣平臺(tái)還會(huì)給出騎士專送等特有的服務(wù)類型；餐飲平臺(tái)還會(huì)給出店鋪的營(yíng)業(yè)時(shí)間；酒店平臺(tái)還會(huì)標(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é)們?cè)谠O(shè)計(jì)這類卡片時(shí)候最大的攔路虎，因?yàn)榱闼榈男畔⑻啵芏嗤瑢W(xué)難免進(jìn)入無(wú)從下手的迷茫狀態(tài)。我在這里給出進(jìn)行信息排版的原則，大家可以按照這個(gè)原則進(jìn)行排版，也可以將之作為參考。

第一：按行排版

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 比較特別的店鋪卡片

1）去哪兒

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

2）帶商品的店鋪卡片

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

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

四、樣式拓展

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

結(jié)尾

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