卡片式設計的優點很多，它可以較好的對內容進行區域劃分，解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中，依舊可以很好的識別每一塊內容。
一、背景
活動設計中，我們經常會碰到復用性超高的組件。在物料的表象之下，存在一系列的基礎原則。在這次女神節活動中，我們重點針對活動中的【卡片式設計原則】進行了深入思考，希望通過簡化卡片層級，讓活動頁面更簡潔。
二、活動中的卡片設計
卡片式設計最早來源於Google Material Design。卡片式設計的優點很多，它可以較好的對內容進行區域劃分，解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中，依舊可以很好的識別每一塊內容。在電商活動中，我們通常將卡片看作一個容器，用於承載一類或者一組相關度較高元素。
由於電商活動會場內容較多，一個樓層可能包含單品、會場、品牌，關鍵詞等內容。為了讓內容更具整體性，且與主題氛圍呼應，我們在設計中引入了卡片式設計。
三、問題聚焦：卡片層級過多
在實際設計執行中，我們發現，不同設計同學對卡片的理解不太一樣，下麵選取了幾個比較典型的例子進行了說明。
典型案例一：設計同學對卡片倒角理解不對稱
圖1：某個會場的單品樓層
在上圖的模塊中，因為對卡片層級的理解不同，導致單品模塊中倒角過多，比較複雜。
部分同學認為圓角屬於風格化，是視覺元素的一種，一個頁面里的視覺元素應該整體統一，圓角的使用可以讓圖片展示更為柔和，所以在白底圖邊角增加了倒角。
還有部分同學認為，增加倒角的做法加強了白底圖的獨立性；而單品整體作為1個卡片信息，不建議在內部增加不必要的層級，卡片內部信息層級應當儘量簡單。
在多次溝通中，大家對卡片的理解無法統一，溝通成本很高，最終方案也無法達成一致。
典型案例二：缺少卡片式設計指導原則
圖2：某個會場的事業部樓層
上圖所示的活動中，內容層級較複雜，分層較多。因為缺少卡片式設計的指導原則，在頁面輸出時，出現了層層嵌套的模塊。
通過以上的兩個場景，我們找到了共性的問題：
- 不同的設計師對卡片理解不同，導致卡片運用較混亂，不統一；
- 多條項目線都存在卡片式設計準則不明確的問題，導致溝通成本非常高。
為瞭解決這兩個問題，我們進行了以下思考。
四、活動卡片式設計的場景
卡片式設計在活動設計中出現的場景十分頻繁，一般可以歸為以下3類：
場景一：【單一內容卡片】
【單一內容卡片】一般由單個獨立模塊組成。在此類場景下，不會存在特別複雜的層級關係。例如我們看到的1個單品、1個店鋪、1張優惠券，都屬於此類場景。
下圖以瀑布流單品中穿插的店鋪、榜單入口為例進行了說明。
圖3：【單一內容卡片】示例
在瀑布流單品中，我們通常將1個單品、1個活動、1個榜單等作為一個獨立的卡片模塊，通過瀑布流的方式依次羅列。
場景二：【組合內容卡片】
【組合內容卡片】內容比【單一內容卡片】更複雜，通常是由多個獨立模塊組成，因為這些獨立模塊間內容具有一定的相關性，共同構成了一個整體，設計時需要傳達這些內容的整體感，所以引入了卡片式設計。
下圖以事業部樓層為例進行了說明：
圖4：【組合內容卡片】示例
事業部樓層通常以業務維度劃分，將相關內容組合起來。圖中的時尚就是一個事業部樓層，其中存在會場、品牌、單品等元素，這些元素共同構成了一個事業部模塊。在這樣的場景下，我們通常將這些模塊打包在1個卡片容器里，保證一個事業部相關信息的【簡潔性】與【獨立性】。
場景三：【單一內容卡片】與【組合內容卡片】互相嵌套
嵌套場景中，內容層級較為複雜，一般都會存在多個小卡片和1個大卡片。這也是大促中最為常見的一種，如果處理不好，就很容易出現“多層嵌套，層級複雜”的情況。
下圖以曾經輸出的秒殺樓層為例進行了說明。
（該例子信息層級較複雜，卡片元素較多，並不是最佳範例；優化思路我們將在下文中介紹）
圖5：【單一內容卡片】與【組合內容卡片】互相嵌套示例
其中，每個秒殺商品作為【單一內容卡片】存在，當所有的秒殺商品組合起來，並且增加tab的時候，還需要有更大的容器將單品和tab都包裹起來，這就是【組合內容卡片】。
五、活動卡片基礎設計原則
基於活動常見的卡片式設計應用場景，我們歸納了設計中需要遵循的原則。
內容層面：保持簡潔，減少嵌套
在【單一內容卡片】或者【組合內容卡片】場景下，信息一般都不會過於複雜，保持信息簡潔並不是很困難。但是碰到【單一內容卡片】與【組合內容卡片】嵌套時，往往問題較多。這也是我們在之前的項目中，出現問題最多的一類場景。我們建議嵌套層級一定要盡可能少，否則整個頁面將會非常複雜。
下麵以上文的秒殺樓層為例，說明如何進行簡化。
圖6：【秒殺樓層】層級簡化後
在上圖中，秒殺中的單品作為【單一內容卡片】存在，而整個樓層作為【組合內容卡片】存在。通過“保留必要的【整體容器大卡片】+【獨立內容小卡片】，去掉其他層級卡片”的方式，保證最多2級的嵌套關係，減少卡片倒角的使用，最後達到簡化層級的目的。
視覺層面：元素統一，減少裝飾
視覺在卡片式設計中，會用到許多的裝飾和元素，例如卡片的內容形態、卡片內容的顏色、投影效果等，這些內容共同組成了卡片最終的展示樣式。卡片的圓角、卡片內字體的粗細與字號、卡片里的間距等作為基礎的參考值，對整體頁面的風格都具有不小的影響。
我們最終期望的是卡片與卡內的元素形成合理的比例規則，併在整個頁面中保持統一。有了這個目標，就可以更好的指導之後的工作了。圓角的大小差異化呈現出不同的視覺感受和風格差異，在實際運用過程中，也會出現各種大小的模塊。在設計時，需要考慮產品風格或氣質是適合大圓角還是小圓角。在間距方面，更多的採用大模塊里的分隔線方式來替代一個個的小模塊，以達到減少層級的目的。
圖7：採用分隔線簡化層級
視覺在執行時，往往喜歡加很多裝飾性的元素。比如卡片的投影，通過前後顏色的設定，讓內容與背景之間產生視覺空間感。但在大促活動中，最重要的就是保證卡片內容的清晰。活動信息本身已經非常豐富了，如果增加卡片的空間感，會導致整個頁面視覺非常臃腫，於是我們統一做了減法，去掉了不必要的裝飾內容。
圖8：簡化不必要的裝飾元素
六、項目效果
在本次女神節項目中，我們上文的卡片式設計原則進行了落地，實際指導女神節項目的輸出，效果十分明顯。下圖選取了榜單樓層為例，大家可以感受下調整前後的樓層對比。
圖9：女神節事業部樓層簡化前後對比
七、總結與思考
活動中的卡片式設計運用只是一個很小的縮影。在設計中，我們經常會碰到各方立場觀點不一致的問題，可能某位同學覺得A方式比較好，但是另一位同學覺得B方式更好。
分歧總是在所難免，如果試圖從感覺層面進行溝通，判斷過程會非常主觀，缺乏衡量標準，最後得出的結論也會缺少支撐。
我們建議，如果碰到設計分歧，盡可能以設計準則作為依托，建立雙方能夠達成一致的判斷標準，從根本上解決問題。這樣既能保證設計決策有理有據，也能減少同類問題的溝通成本，提高輸出質量和協作效率。
這也是基於卡片式設計的一些思考，希望可以給大家一些啟發。
參考文獻：
https://www.uisdc.com/tencent-card-design-tips
https://material.io/design/shape/shape-hierarchy.html#developing-hierarchy
https://www.uisdc.com/interface-layout-style-analysis
https://www.uisdc.com/best-practices-designing-cards
https://www.uisdc.com/best-practices-for-cards
作者：於婷，吳丹楓；公眾號：京東設計中心JDC（ID：JDCdesign）
來源：https://mp.weixin.qq.com/s/o00E8haH26OrBPa_KFETdQ
本文由 @京東設計中心JDC 授權發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議