中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

卡片式設(shè)計(jì)的優(yōu)點(diǎn)很多，它可以較好的對(duì)內(nèi)容進(jìn)行區(qū)域劃分，解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長屏幕滑動(dòng)中，依舊可以很好的識(shí)別每一塊內(nèi)容。

一、背景

活動(dòng)設(shè)計(jì)中，我們經(jīng)常會(huì)碰到復(fù)用性超高的組件。在物料的表象之下，存在一系列的基礎(chǔ)原則。在這次女神節(jié)活動(dòng)中，我們重點(diǎn)針對(duì)活動(dòng)中的【卡片式設(shè)計(jì)原則】進(jìn)行了深入思考，希望通過簡化卡片層級(jí)，讓活動(dòng)頁面更簡潔。

二、活動(dòng)中的卡片設(shè)計(jì)

卡片式設(shè)計(jì)最早來源于Google Material Design?？ㄆ皆O(shè)計(jì)的優(yōu)點(diǎn)很多，它可以較好的對(duì)內(nèi)容進(jìn)行區(qū)域劃分，解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長屏幕滑動(dòng)中，依舊可以很好的識(shí)別每一塊內(nèi)容。在電商活動(dòng)中，我們通常將卡片看作一個(gè)容器，用于承載一類或者一組相關(guān)度較高元素。

由于電商活動(dòng)會(huì)場內(nèi)容較多，一個(gè)樓層可能包含單品、會(huì)場、品牌，關(guān)鍵詞等內(nèi)容。為了讓內(nèi)容更具整體性，且與主題氛圍呼應(yīng)，我們?cè)谠O(shè)計(jì)中引入了卡片式設(shè)計(jì)。

三、問題聚焦：卡片層級(jí)過多

在實(shí)際設(shè)計(jì)執(zhí)行中，我們發(fā)現(xiàn)，不同設(shè)計(jì)同學(xué)對(duì)卡片的理解不太一樣，下面選取了幾個(gè)比較典型的例子進(jìn)行了說明。

典型案例一：設(shè)計(jì)同學(xué)對(duì)卡片倒角理解不對(duì)稱

????圖1：某個(gè)會(huì)場的單品樓層

在上圖的模塊中，因?yàn)閷?duì)卡片層級(jí)的理解不同，導(dǎo)致單品模塊中倒角過多，比較復(fù)雜。

部分同學(xué)認(rèn)為圓角屬于風(fēng)格化，是視覺元素的一種，一個(gè)頁面里的視覺元素應(yīng)該整體統(tǒng)一，圓角的使用可以讓圖片展示更為柔和，所以在白底圖邊角增加了倒角。

還有部分同學(xué)認(rèn)為，增加倒角的做法加強(qiáng)了白底圖的獨(dú)立性；而單品整體作為1個(gè)卡片信息，不建議在內(nèi)部增加不必要的層級(jí)，卡片內(nèi)部信息層級(jí)應(yīng)當(dāng)盡量簡單。

在多次溝通中，大家對(duì)卡片的理解無法統(tǒng)一，溝通成本很高，最終方案也無法達(dá)成一致。

典型案例二：缺少卡片式設(shè)計(jì)指導(dǎo)原則

圖2：某個(gè)會(huì)場的事業(yè)部樓層

上圖所示的活動(dòng)中，內(nèi)容層級(jí)較復(fù)雜，分層較多。因?yàn)槿鄙倏ㄆ皆O(shè)計(jì)的指導(dǎo)原則，在頁面輸出時(shí)，出現(xiàn)了層層嵌套的模塊。

通過以上的兩個(gè)場景，我們找到了共性的問題：

1. 不同的設(shè)計(jì)師對(duì)卡片理解不同，導(dǎo)致卡片運(yùn)用較混亂，不統(tǒng)一；
2. 多條項(xiàng)目線都存在卡片式設(shè)計(jì)準(zhǔn)則不明確的問題，導(dǎo)致溝通成本非常高。

為了解決這兩個(gè)問題，我們進(jìn)行了以下思考。

四、活動(dòng)卡片式設(shè)計(jì)的場景

卡片式設(shè)計(jì)在活動(dòng)設(shè)計(jì)中出現(xiàn)的場景十分頻繁，一般可以歸為以下3類：

場景一：【單一內(nèi)容卡片】

【單一內(nèi)容卡片】一般由單個(gè)獨(dú)立模塊組成。在此類場景下，不會(huì)存在特別復(fù)雜的層級(jí)關(guān)系。例如我們看到的1個(gè)單品、1個(gè)店鋪、1張優(yōu)惠券，都屬于此類場景。

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

圖3：【單一內(nèi)容卡片】示例

在瀑布流單品中，我們通常將1個(gè)單品、1個(gè)活動(dòng)、1個(gè)榜單等作為一個(gè)獨(dú)立的卡片模塊，通過瀑布流的方式依次羅列。

場景二：【組合內(nèi)容卡片】

【組合內(nèi)容卡片】內(nèi)容比【單一內(nèi)容卡片】更復(fù)雜，通常是由多個(gè)獨(dú)立模塊組成，因?yàn)檫@些獨(dú)立模塊間內(nèi)容具有一定的相關(guān)性，共同構(gòu)成了一個(gè)整體，設(shè)計(jì)時(shí)需要傳達(dá)這些內(nèi)容的整體感，所以引入了卡片式設(shè)計(jì)。

下圖以事業(yè)部樓層為例進(jìn)行了說明：

圖4：【組合內(nèi)容卡片】示例

事業(yè)部樓層通常以業(yè)務(wù)維度劃分，將相關(guān)內(nèi)容組合起來。圖中的時(shí)尚就是一個(gè)事業(yè)部樓層，其中存在會(huì)場、品牌、單品等元素，這些元素共同構(gòu)成了一個(gè)事業(yè)部模塊。在這樣的場景下，我們通常將這些模塊打包在1個(gè)卡片容器里，保證一個(gè)事業(yè)部相關(guān)信息的【簡潔性】與【獨(dú)立性】。

場景三：【單一內(nèi)容卡片】與【組合內(nèi)容卡片】互相嵌套

嵌套場景中，內(nèi)容層級(jí)較為復(fù)雜，一般都會(huì)存在多個(gè)小卡片和1個(gè)大卡片。這也是大促中最為常見的一種，如果處理不好，就很容易出現(xiàn)“多層嵌套，層級(jí)復(fù)雜”的情況。

下圖以曾經(jīng)輸出的秒殺樓層為例進(jìn)行了說明。

（該例子信息層級(jí)較復(fù)雜，卡片元素較多，并不是最佳范例；優(yōu)化思路我們將在下文中介紹）

圖5：【單一內(nèi)容卡片】與【組合內(nèi)容卡片】互相嵌套示例

其中，每個(gè)秒殺商品作為【單一內(nèi)容卡片】存在，當(dāng)所有的秒殺商品組合起來，并且增加tab的時(shí)候，還需要有更大的容器將單品和tab都包裹起來，這就是【組合內(nèi)容卡片】。

五、活動(dòng)卡片基礎(chǔ)設(shè)計(jì)原則

基于活動(dòng)常見的卡片式設(shè)計(jì)應(yīng)用場景，我們歸納了設(shè)計(jì)中需要遵循的原則。

內(nèi)容層面：保持簡潔，減少嵌套

在【單一內(nèi)容卡片】或者【組合內(nèi)容卡片】場景下，信息一般都不會(huì)過于復(fù)雜，保持信息簡潔并不是很困難。但是碰到【單一內(nèi)容卡片】與【組合內(nèi)容卡片】嵌套時(shí)，往往問題較多。這也是我們?cè)谥暗捻?xiàng)目中，出現(xiàn)問題最多的一類場景。我們建議嵌套層級(jí)一定要盡可能少，否則整個(gè)頁面將會(huì)非常復(fù)雜。

下面以上文的秒殺樓層為例，說明如何進(jìn)行簡化。

圖6：【秒殺樓層】層級(jí)簡化后

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

視覺層面：元素統(tǒng)一，減少裝飾

視覺在卡片式設(shè)計(jì)中，會(huì)用到許多的裝飾和元素，例如卡片的內(nèi)容形態(tài)、卡片內(nèi)容的顏色、投影效果等，這些內(nèi)容共同組成了卡片最終的展示樣式?？ㄆ膱A角、卡片內(nèi)字體的粗細(xì)與字號(hào)、卡片里的間距等作為基礎(chǔ)的參考值，對(duì)整體頁面的風(fēng)格都具有不小的影響。

我們最終期望的是卡片與卡內(nèi)的元素形成合理的比例規(guī)則，并在整個(gè)頁面中保持統(tǒng)一。有了這個(gè)目標(biāo)，就可以更好的指導(dǎo)之后的工作了。圓角的大小差異化呈現(xiàn)出不同的視覺感受和風(fēng)格差異，在實(shí)際運(yùn)用過程中，也會(huì)出現(xiàn)各種大小的模塊。在設(shè)計(jì)時(shí)，需要考慮產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角。在間距方面，更多的采用大模塊里的分隔線方式來替代一個(gè)個(gè)的小模塊，以達(dá)到減少層級(jí)的目的。

圖7：采用分隔線簡化層級(jí)

視覺在執(zhí)行時(shí)，往往喜歡加很多裝飾性的元素。比如卡片的投影，通過前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺空間感。但在大促活動(dòng)中，最重要的就是保證卡片內(nèi)容的清晰?；顒?dòng)信息本身已經(jīng)非常豐富了，如果增加卡片的空間感，會(huì)導(dǎo)致整個(gè)頁面視覺非常臃腫，于是我們統(tǒng)一做了減法，去掉了不必要的裝飾內(nèi)容。

圖8：簡化不必要的裝飾元素

六、項(xiàng)目效果

在本次女神節(jié)項(xiàng)目中，我們上文的卡片式設(shè)計(jì)原則進(jìn)行了落地，實(shí)際指導(dǎo)女神節(jié)項(xiàng)目的輸出，效果十分明顯。下圖選取了榜單樓層為例，大家可以感受下調(diào)整前后的樓層對(duì)比。

圖9：女神節(jié)事業(yè)部樓層簡化前后對(duì)比

七、總結(jié)與思考

活動(dòng)中的卡片式設(shè)計(jì)運(yùn)用只是一個(gè)很小的縮影。在設(shè)計(jì)中，我們經(jīng)常會(huì)碰到各方立場觀點(diǎn)不一致的問題，可能某位同學(xué)覺得A方式比較好，但是另一位同學(xué)覺得B方式更好。

分歧總是在所難免，如果試圖從感覺層面進(jìn)行溝通，判斷過程會(huì)非常主觀，缺乏衡量標(biāo)準(zhǔn)，最后得出的結(jié)論也會(huì)缺少支撐。

我們建議，如果碰到設(shè)計(jì)分歧，盡可能以設(shè)計(jì)準(zhǔn)則作為依托，建立雙方能夠達(dá)成一致的判斷標(biāo)準(zhǔn)，從根本上解決問題。這樣既能保證設(shè)計(jì)決策有理有據(jù)，也能減少同類問題的溝通成本，提高輸出質(zhì)量和協(xié)作效率。

這也是基于卡片式設(shè)計(jì)的一些思考，希望可以給大家一些啟發(fā)。

參考文獻(xiàn)：

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

作者：于婷，吳丹楓；公眾號(hào)：京東設(shè)計(jì)中心JDC（ID：JDCdesign）

來源：https://mp.weixin.qq.com/s/o00E8haH26OrBPa_KFETdQ

本文由 @京東設(shè)計(jì)中心JDC 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議