起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識面對繁雜信息，店鋪卡片設計應該怎么做？
店鋪卡片的組件表現形式在某種程度上和商品卡片有些相似，但二者在信息安排組合維度上仍存在差異，那么面對繁多的信息，設計人員要如何做好信息的歸納總結與排版？本篇文章里，作者便結合經驗做了分享總結，一起來看。
一、組件介紹
說起店鋪卡片，大家的第一反應肯定是“那不是和商品卡片差不多嗎？”
是的，你們的印象沒有錯，店鋪作為商品在抽象上的聚合，它的組件表現形式和商品卡片沒有本質的區別，不過商品卡片的字段內容往往比商品卡片更多，甚至向下包括商品卡片本身，所以這個組件的設計難點全部在于如何合理地安排信息上。
信息的歸納總結和排版，這是UI設計必備的能力之一，愈是碰到信息繁多的組件，這種能力就愈發顯得重要。
但在很長一段時間的觀察下，我發現新手對于多信息排版的掌控能力是有所欠缺的，大家都會更關注「視覺」，而在某些方面忽略了「信息」的重要性。具體表現就是，要加的字段一多就手忙腳亂，亂排一通。
二、使用場景
店鋪卡片多用在有多商戶入駐的平臺型App內，業務類型可以包含外賣、餐飲、旅宿、理發、健身等等等等。
但在日常使用的App中，商品卡片出現的最多的不是淘寶京東這種超大型綜合電商App，反而是餓了么美團大眾點評，因為這倆者的業務流程有很大區別。
淘寶京東的瀏覽動線為從具體商品再到店鋪 (這里指主要的流程)，而美團餓了么大眾點評則剛好相反，先挑選店鋪再挑選具體的餐品。這倆者的區別就好似于超市與商場，你在超市挑選商品首先在意的是商品具體是什么，其次才在意其品牌；但在商場不一樣，首先在意門店和品牌，其次才是在這家店買什么。
所以淘寶京東對商品卡片的需求遠遠高于店鋪卡片，而美團餓了么卻是后者權重更高，內在邏輯便來源于此。
故而，店鋪卡片主要應用的場景便是類似上述后一種商場模式的App。
三、設計要點
1. 布局
最常見的店鋪卡片采用列表視圖，跟產品卡片的列表視圖布局上幾乎一致，但因為店鋪卡片的信息通常比較多，所以不會出現信息不夠的問題，大多數情況下信息多到足以超過圖片的底部范圍，最少可能也得撐滿整個縱向空間。
2. 店鋪卡片內容
店鋪卡片的內容各種業務也有自己的特色字段，總結下來大概有以下這些：
- 圖片：店鋪logo
- 標題：店鋪標簽+店鋪名稱
- 評分信息：店鋪評分+評分人數
- 價格相關：人均價格/起售價格/起送價格
- 店鋪位置：大致位置+當前距離 / 交通信息 (多見于酒店)
- 店鋪標簽：服務類型 (各個行業的店鋪有自己特有的子服務類型，例如餐廳有菜系，旅店有鐘點房/酒店這類子類型)
- 用戶評價：摘選出的簡短的用戶評價
- 排行標簽：區域排名/總排名
- 優惠信息：優惠券、活動
- 具體商品：店鋪具體出售的商品和其簡要信息
當然肯定不止上述這些，不同行業的店鋪、不同業務的平臺還會賦予店鋪不同的信息類型，比如外賣平臺還會給出騎士專送等特有的服務類型；餐飲平臺還會給出店鋪的營業時間；酒店平臺還會標出酒店的配套設施、房型等等，在實際的設計任務中字段類型多是由產品經理給出，具體的選擇則是根據產品實際的業務類型進行篩選。
3. 內容排版
有了內容，那么如何把這么多內容排在一起，成為了同學們在設計這類卡片時候最大的攔路虎，因為零碎的信息太多，很多同學難免進入無從下手的迷茫狀態。我在這里給出進行信息排版的原則，大家可以按照這個原則進行排版，也可以將之作為參考。
第一：按行排版
沒錯，按照行來排版是店鋪卡片最基本的原則，在復雜的店鋪卡片中，除了圖片之外，文字部分可以分成三類行：標題行、多個副字段行、商品行 (如果有)，行與行之間盡量保持間距一致。
第二：將字段放在這些行內
這才是整個步驟中最難的部分，因為這些字段幾乎都很重要，對用戶來說都是重要信息，所以在排布的時候幾乎無法弱化每一類信息。這也是這類組件看起來亂糟糟的原因，但這是有必要的，因為用戶真的會看每一條信息。
但是，不管如何「我全要」，在排版中總歸還是會因為各種客觀上的心理學效應，導致有些內容更容易獲得關注。例如：
- 因為系列位置效應，一行字段的開頭和結尾總是更容易被關注；
- 因為馮·雷斯托夫效應，在一群類似的元素中，與眾不同的那個會格外突出；
- 因為雅各布定律，用戶會對在哪里能找到類似的信息有心理預期，所以不能與別的應用中信息排布差距過大。
了解這些可以幫助我們更有目的性地安排信息的位置。例如：
① 標題下方的一行往往可以第一眼注意到。所以我們會在這一行排布評分、人均價格這些能直觀幫助用戶做出決策的信息。
② 最后一行（除商品展示之外）也能方便引起用戶注意，所以把優惠活動信息放在這里。
③ 重要的標簽應該與其它標簽做出區別。
④ 右對齊的信息，因為其對齊方式與其它信息不同，往往也可以突出出來。大部分App會在這個位置放距離，與店鋪位置做在同一行。
按照這種思想，我們可以把信息安排進之前所劃定的那些行內。
第三：設計具體的樣式
視覺設計方面，主要集中在標簽設計上，各種不同的視覺化標簽可以有效地吸引用戶視線，但標簽的設計沒有什么技巧，就是顏色+圖標，我在下方列出一些案例，可供你們參考：
4. 比較特別的店鋪卡片
1）去哪兒
你們可以注意到，去哪兒的酒店搜索結果頁中間有一張卡片比較特別，在卡片下方做了一個特別顯眼的的「甄選酒店」的通欄標簽，這可能是給某些特殊的店鋪特別設計的樣式，總而言之，不一樣的它能在列表中非常突出。
2）帶商品的店鋪卡片
在App 里一些場景的店鋪卡片還會帶上商品，它大多數出現在搜索結果頁。
具體設計方面，它們也會因App需求不同而不同，但總體來說，可以根據實際場景刪改前面所講的那些字段，并在在下方貼上一排簡易的商品卡片。
四、樣式拓展
這里收集了一些商品卡片的線上案例，也可以作為設計時的參考：
結尾
店鋪卡片的組件，今天就介紹到這里了。
作者：酸梅干超人；公眾號：超人的電話亭（ID：Superman_Call）
本文由 @超人的電話亭 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
