幾何

卡片設計是我們在UI中經常會碰到帶組件,本篇文章主要以電商活動的卡片式設計展開的思考,主要探討卡片層級和設計原則上的運用,希望通過本篇文章能給大家帶來一些啟發!

 

一、背景

活動設計中,我們經常會碰到復用性超高的組件。在物料的表象之下,存在一系列的基礎原則。在這次女神節活動中,我們重點針對活動中的【卡片式設計原則】進行了深入思考,希望通過簡化卡片層級,讓活動頁面更簡潔。

 

二、活動中的卡片設計

卡片式設計最早來源于Google Material Design??ㄆ皆O計的優點很多,它可以較好的對內容進行區域劃分,解決了內容與內容的區塊分隔,讓用戶在長屏幕滑動中,依舊可以很好的識別每一塊內容。在電商活動中,我們通常將卡片看作一個容器,用于承載一類或者一組相關度較高元素。

由于電商活動會場內容較多,一個樓層可能包含單品、會場、品牌,關鍵詞等內容。為了讓內容更具整體性,且與主題氛圍呼應,我們在設計中引入了卡片式設計。

 

三、問題聚焦:卡片層級過多

在實際設計執行中,我們發現,不同設計同學對卡片的理解不太一樣,下面選取了幾個比較典型的例子進行了說明。

典型案例一:設計同學對卡片倒角理解不對稱

圖1:某個會場的單品樓層

在上圖的模塊中,因為對卡片層級的理解不同,導致單品模塊中倒角過多,比較復雜。

部分同學認為圓角屬于風格化,是視覺元素的一種,一個頁面里的視覺元素應該整體統一,圓角的使用可以讓圖片展示更為柔和,所以在白底圖邊角增加了倒角。

還有部分同學認為,增加倒角的做法加強了白底圖的獨立性;而單品整體作為1個卡片信息,不建議在內部增加不必要的層級,卡片內部信息層級應當盡量簡單。

在多次溝通中,大家對卡片的理解無法統一,溝通成本很高,最終方案也無法達成一致。

 

典型案例二:缺少卡片式設計指導原則

圖2:某個會場的事業部樓層

上圖所示的活動中,內容層級較復雜,分層較多。因為缺少卡片式設計的指導原則,在頁面輸出時,出現了層層嵌套的模塊。

通過以上的兩個場景,我們找到了共性的問題:

1.不同的設計師對卡片理解不同,導致卡片運用較混亂,不統一;

2.多條項目線都存在卡片式設計準則不明確的問題,導致溝通成本非常高。

為了解決這兩個問題,我們進行了以下思考。

 

四、活動卡片式設計的場景

卡片式設計在活動設計中出現的場景十分頻繁,一般可以歸為以下3類:

場景一:【單一內容卡片】

【單一內容卡片】一般由單個獨立模塊組成。在此類場景下,不會存在特別復雜的層級關系。例如我們看到的1個單品、1個店鋪、1張優惠券,都屬于此類場景。

下圖以瀑布流單品中穿插的店鋪、榜單入口為例進行了說明。

圖3:【單一內容卡片】示例

在瀑布流單品中,我們通常將1個單品、1個活動、1個榜單等作為一個獨立的卡片模塊,通過瀑布流的方式依次羅列。

 

場景二:【組合內容卡片】

【組合內容卡片】內容比【單一內容卡片】更復雜,通常是由多個獨立模塊組成,因為這些獨立模塊間內容具有一定的相關性,共同構成了一個整體,設計時需要傳達這些內容的整體感,所以引入了卡片式設計。

下圖以事業部樓層為例進行了說明。

圖4:【組合內容卡片】示例

事業部樓層通常以業務維度劃分,將相關內容組合起來。圖中的時尚就是一個事業部樓層,其中存在會場、品牌、單品等元素,這些元素共同構成了一個事業部模塊。在這樣的場景下,我們通常將這些模塊打包在1個卡片容器里,保證一個事業部相關信息的【簡潔性】與【獨立性】。

 

場景三:【單一內容卡片】與【組合內容卡片】互相嵌套

嵌套場景中,內容層級較為復雜,一般都會存在多個小卡片和1個大卡片。這也是大促中最為常見的一種,如果處理不好,就很容易出現“多層嵌套,層級復雜”的情況。

下圖以曾經輸出的秒殺樓層為例進行了說明。

(該例子信息層級較復雜,卡片元素較多,并不是最佳范例;優化思路我們將在下文中介紹)

圖5:【單一內容卡片】與【組合內容卡片】互相嵌套示例

其中,每個秒殺商品作為【單一內容卡片】存在。當所有的秒殺商品組合起來,并且增加tab的時候,還需要有更大的容器將單品和tab都包裹起來,這就是【組合內容卡片】。

 

五、活動卡片基礎設計原則

基于活動常見的卡片式設計應用場景,我們歸納了設計中需要遵循的原則。

內容層面:保持簡潔,減少嵌套

在【單一內容卡片】或者【組合內容卡片】場景下,信息一般都不會過于復雜,保持信息簡潔并不是很困難。但是碰到【單一內容卡片】與【組合內容卡片】嵌套時,往往問題較多。這也是我們在之前的項目中,出現問題最多的一類場景。我們建議嵌套層級一定要盡可能少,否則整個頁面將會非常復雜。

下面以上文的秒殺樓層為例,說明如何進行簡化。

圖6:【秒殺樓層】層級簡化后

在上圖中,秒殺中的單品作為【單一內容卡片】存在,而整個樓層作為【組合內容卡片】存在。通過“保留必要的【整體容器大卡片】+【獨立內容小卡片】,去掉其他層級卡片”的方式,保證最多2級的嵌套關系,減少卡片倒角的使用,最后達到簡化層級的目的。

 

視覺層面:元素統一,減少裝飾

視覺在卡片式設計中,會用到許多的裝飾和元素,例如卡片的內容形態、卡片內容的顏色、投影效果等,這些內容共同組成了卡片最終的展示樣式??ㄆ膱A角、卡片內字體的粗細與字號、卡片里的間距等作為基礎的參考值,對整體頁面的風格都具有不小的影響。

我們最終期望的是卡片與卡內的元素形成合理的比例規則,并在整個頁面中保持統一。有了這個目標,就可以更好的指導之后的工作了。圓角的大小差異化呈現出不同的視覺感受和風格差異,在實際運用過程中,也會出現各種大小的模塊。在設計時,需要考慮產品風格或氣質是適合大圓角還是小圓角。在間距方面,更多的采用大模塊里的分隔線方式來替代一個個的小模塊,以達到減少層級的目的。

圖7:采用分隔線簡化層級

視覺在執行時,往往喜歡加很多裝飾性的元素。比如卡片的投影,通過前后顏色的設定,讓內容與背景之間產生視覺空間感。但在大促活動中,最重要的就是保證卡片內容的清晰?;顒有畔⒈旧硪呀浄浅XS富了,如果增加卡片的空間感,會導致整個頁面視覺非常臃腫,于是我們統一做了減法,去掉了不必要的裝飾內容。

圖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

作者:于婷/吳丹楓

 

轉載請注明:學UI網 » 電商活動卡片式設計思考

登錄收藏
 
你可能喜歡的:
設計沉思錄 | 如何構建用戶決策模型推動頁面結構型改版設計沉思錄 | 如何構建用戶決策模型推動頁面結構型改版
如何把按鈕設計做到最好?看完這一篇就夠了!如何把按鈕設計做到最好?看完這一篇就夠了!
圖標這樣去做,更受歡迎圖標這樣去做,更受歡迎
騰訊為村新冠肺炎“抗疫”專題復盤騰訊為村新冠肺炎“抗疫”專題復盤
視覺設計在產品中的價值視覺設計在產品中的價值
用戶增長思維做好體驗設計和數據洞察用戶增長思維做好體驗設計和數據洞察
組件化思維-提高設計效率等組件化思維-提高設計效率等
UI模塊-移動端應用級的6種導航選擇方法UI模塊-移動端應用級的6種導航選擇方法
文字列表的信息設計文字列表的信息設計
這個方法,搞定了我大部分產品體驗分析這個方法,搞定了我大部分產品體驗分析
?
网球比分雷速 贵州11选五5下载 四川金7开奖今天 广东11选5 山东11选5前三直跨度 2019低价潜力股 贵州十一选五测试 重庆幸运农场预测网 澳洲幸运10直播视频结果 飞艇pk10一天稳赚5000 宁夏十一选五走势图爱乐彩