寫這篇文章的目的就是總結(jié)一下自己的設(shè)計(jì)方法和工作中遇到的問(wèn)題，今天我們來(lái)聊一聊卡片式設(shè)計(jì)，如果有和我不同的意見(jiàn)以及文章中沒(méi)有提到的點(diǎn)，歡迎大家積極交流，廢話不多說(shuō)，讓我們正式開(kāi)始。以下是目錄。
三、卡片式設(shè)計(jì)的設(shè)計(jì)價(jià)值
四、設(shè)計(jì)原則和注意點(diǎn)
先從我們身邊的能聯(lián)想到的卡片說(shuō)起，例如賀卡、明信片、名片等都是卡片。在14年發(fā)布的Material Design中，類似卡片式設(shè)計(jì)的理念就已經(jīng)被提及了，其理念也是基于傳統(tǒng)的紙張媒介。
“與真正的紙張不同，我們的數(shù)字材質(zhì)可以智能地?cái)U(kuò)大和變形。材質(zhì)具有實(shí)體的表面和邊緣。接縫和陰影表明組件的含義。”
互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)是一種將信息和功能封裝在獨(dú)立、矩形容器中的用戶界面設(shè)計(jì)方法。這些容器通常具有清晰的邊界，類似前文提到身邊中的名片。每張卡片通常包含一組相關(guān)的信息或功能，從而形成一個(gè)獨(dú)立的內(nèi)容單元，就像我們收到的名片和賀卡。
通過(guò)觀察使用的APP對(duì)卡片進(jìn)行分類，列表卡片是其中一種，基礎(chǔ)的列表卡片可以由標(biāo)題、正文、輔助文案、按鈕和圖片等組成。我們平常使用的大部分APP的卡片組件都是由這些基礎(chǔ)控件組成的，大致上可以分為橫向和縱向排布內(nèi)容。
這種簡(jiǎn)單排布的設(shè)計(jì)可以在一些排行榜單，熱搜模塊中看到。還可以通過(guò)橫向與縱向組合排列提供更多的交互，例如網(wǎng)易云的音樂(lè)推薦和米游社中的同人榜單。
平常接觸到的瀑布流以及信息流，將其元素拆解開(kāi)來(lái)，本質(zhì)也是多個(gè)有序的列表卡片組合在一起的。瀑布流主要正針對(duì)圖片較多、或以以圖片內(nèi)容為主設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度，可以很好的還原圖片全貌，也符合我們雙眼的瀏覽動(dòng)線。例如小紅書。
而信息流更需要按行來(lái)閱讀，加以圖片輔助，符合大多數(shù)用戶的閱讀習(xí)慣，同時(shí)可以加入更多的交互元素，例如轉(zhuǎn)贊評(píng)。在運(yùn)營(yíng)層面，信息流便于插入新的樣式的內(nèi)容或廣告，不會(huì)打亂整體布局。比較常用的例如微博。
而非列表式卡片比較突出的一個(gè)特點(diǎn)，在內(nèi)容上排列不像列表卡片那么有序，往往會(huì)有更多元素參與進(jìn)來(lái)，它在有限空間內(nèi)能展示更多樣化的信息，允許更自由的排列和組合，可以打破傳統(tǒng)網(wǎng)格的限制。在設(shè)計(jì)上會(huì)更加重視視覺(jué)層面的塑造，更多會(huì)出現(xiàn)在運(yùn)營(yíng)設(shè)計(jì)中，例如活動(dòng)、推廣、彈窗提醒。通常會(huì)包含更大的按鈕、圖標(biāo)、富有吸引力圖片等。
從視覺(jué)層面來(lái)講，在卡片式的設(shè)計(jì)中，卡片往往會(huì)附帶圓角。原因一是趨于移動(dòng)設(shè)備外觀方向的圓角，這樣做可以使用戶在使用APP的過(guò)程中更有沉浸感。二是同時(shí)可以將信息分割成易于理解的小塊。三是在同樣大小數(shù)量的模塊中，你會(huì)發(fā)現(xiàn)一眼看過(guò)去，帶圓角的可以更容易數(shù)清楚有多少個(gè)數(shù)量，確定性會(huì)更強(qiáng)。同時(shí)，你的視線也會(huì)更加傾向于聚焦某個(gè)卡片模塊內(nèi)的內(nèi)容。
帶圓角更容易數(shù)清數(shù)量，也更容易聚焦單個(gè)內(nèi)容
從業(yè)務(wù)層面講，我們?cè)诮拥揭粋€(gè)需求時(shí)，大致都會(huì)按
要實(shí)現(xiàn)什么功能→需要哪些字段→元素排列與交互設(shè)計(jì)→最終輸出
這個(gè)路徑來(lái)的。你會(huì)發(fā)現(xiàn)在排列組合的階段，所做的自然而然就形成一個(gè)功能模塊了，而將這個(gè)模塊與其他模塊區(qū)分的一個(gè)非常好用的手段就是卡片式。不同的卡片組合起來(lái)可以實(shí)現(xiàn)非常豐富的頁(yè)面。
卡片式設(shè)計(jì)還可以輕松添加、移除或重新排序內(nèi)容，而不影響整體布局，廣告可以自然地融入內(nèi)容卡片中，不影響用戶體驗(yàn)。每個(gè)卡片還可以作為獨(dú)立單元進(jìn)行數(shù)據(jù)追蹤，精確分析用戶行為，用來(lái)優(yōu)化內(nèi)容策略。
保持卡片的視覺(jué)風(fēng)格、交互方式和信息結(jié)構(gòu)的一致性。不要用奇奇怪怪的圓角，使用太大的圓角只會(huì)讓你的設(shè)計(jì)看起來(lái)像飛機(jī)稿，同時(shí)也會(huì)加重用戶的視覺(jué)疲勞。同一個(gè)頁(yè)面內(nèi)的圓角、描邊、陰影和間距大部分情況下要遵循設(shè)計(jì)規(guī)范。
適合卡片式設(shè)計(jì)的內(nèi)容：獨(dú)立的、自成一體的信息單元、圖文混合的內(nèi)容、需要快速比較或選擇的項(xiàng)目。比如儀表盤、瀑布流等；
不適合卡片式設(shè)計(jì)的內(nèi)容：長(zhǎng)文本閱讀、需要連續(xù)性或上下文的信息、高度結(jié)構(gòu)化的數(shù)據(jù)，例如表格、會(huì)話列表、新聞資訊等。
還有一點(diǎn)就是遵循行業(yè)共通的規(guī)則，比如社交軟件的聯(lián)系人和會(huì)話頁(yè)，幾乎都是用的列表式設(shè)計(jì)，不要設(shè)計(jì)成卡片，這樣只會(huì)增加用戶理解成本，造成勸退。
卡片式設(shè)計(jì)不可避免地會(huì)占用一些空間，因此我們可以合理利用橫向空間進(jìn)行拓展，豐富交互內(nèi)容的同時(shí)使空間利用率更高，例如拼多多首頁(yè)的金剛區(qū)和微信讀書的首頁(yè)推薦區(qū)域，都可以通過(guò)向右滑動(dòng)來(lái)獲取更多的信息。
一般來(lái)說(shuō)判斷一個(gè)卡片內(nèi)的內(nèi)容是否可以再用嵌套卡片的方法是：1.彼此之間的大小占比是否一致；2.各部分內(nèi)容具有相似的重要性；3.信息結(jié)構(gòu)相對(duì)平級(jí)；
如果內(nèi)容占比大小不一樣，結(jié)構(gòu)相對(duì)來(lái)說(shuō)有一些差異，就不太適合設(shè)計(jì)成嵌套卡片了。不當(dāng)使用嵌套卡片可能會(huì)導(dǎo)致層級(jí)過(guò)多，信息密度過(guò)高，導(dǎo)致用戶感到壓力，難以快速理解內(nèi)容，從而降低內(nèi)容的可讀性。
選擇是否使用卡片式設(shè)計(jì)應(yīng)該是一個(gè)深思熟慮的決定，基于對(duì)需求、功能、用戶和產(chǎn)品特性的全面分析?？ㄆ皆O(shè)計(jì)不是萬(wàn)能的解決方案，而是眾多設(shè)計(jì)選項(xiàng)中的一種。在某些情況下，它可能是最佳選擇；在其他情況下，可能需要不同的方法或混合策略。
最重要的是，設(shè)計(jì)應(yīng)該服務(wù)于內(nèi)容和用戶需求，而不是相反。好的設(shè)計(jì)應(yīng)該是幾乎不被注意的，它應(yīng)該讓用戶能夠輕松、直觀地完成他們的任務(wù)，而不會(huì)感到困惑或受阻。因此，在決定是否采用卡片式設(shè)計(jì)時(shí)，始終將用戶體驗(yàn)放在首位，并準(zhǔn)備根據(jù)反饋和數(shù)據(jù)進(jìn)行調(diào)整和優(yōu)化。
以上就是今天要分享的內(nèi)容~下篇再見(jiàn)~最后附上搜集的一些卡片素材~
