卡片式設計 | 掌握這些技法,快速提升界面效果!
卡片式設計是產品常用的頁面設計手段之一,它自帶的分割屬性讓頁面布局更加清晰,也是頁面布局的利器。但是,分割也可能會影響用戶沉浸式的瀏覽體驗等問題。如何用好卡片式設計?本文作者對此進行了分析,與你分享。
近幾年,卡片式設計可以說是移動端產品中極為常見的設計形式了,甚至有很多互聯網大廠將卡片式設計納入設計語言,在各大APP中得到廣泛運用。
卡片式設計自帶分割屬性、讓界面更有層次感,能給人一種視覺上的享受,也因此讓其成為了頁面布局的利器,但它并非萬能,因分割的原因可能會影響用戶沉浸式的瀏覽體驗、造成橫向/縱向空間浪費等問題,需要根據實際場景和內容形式來確定,不要專門為了“卡片式”而設計。
很多設計師對卡片設計習以為常,但對于使用卡片的原因、視覺表現方式、優/缺點等并不是很了解。那么卡片到底該如何設計?需要注意哪些細節?筆者根據經驗并結合平時的一些思考,跟大家一起聊聊在設計中極易忽略的細則,希望能幫助大家提升卡片設計的精致感。
一、卡片式設計的定義
1. 什么是卡片?
早在互聯網時代之前,卡片就出現在了我們生活中的方方面面,如名片、不干膠標簽、便利貼、會員卡…等,不管是何種類型的卡片,它都將代表著我們現實生活中的某個特定信息。
卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨立的個體,以至于后續被引用到線上界面中,同樣具有非常不錯的信息歸納效果。
2. 互聯網中的卡片式設計
卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中,個性化和美感兼備的卡片式設計具有很強的易用性,它是一個UI設計組件,將標題、文本內容、圖形/圖片進行整合并模塊化,讓信息的表達更加直觀、操作也更便捷。
卡片式設計之所以能成為當今比較流行的趨勢,是因為它能讓界面信息更有層次感,從設計、交互、視覺以及用戶體驗等各方面來看,都有不錯的優點。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對來說,學習成本也是極低的。
二、卡片式設計價值
1. 結構清晰
卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現,使界面結構更加清晰。相比純粹的留白或分割線,卡片不僅對信息作出了分割,其本身還是一個獨立的容器,讓歸納組合后的信息能快速突出重點,將復雜內容簡單化處理。
卡片式布局整齊簡練,清晰的信息結構有助于用戶瀏覽,方便快速找到自己感興趣的內容,避免用戶產生一種費時或感覺內容超長的恐懼感,還能節省更多的時間成本。最常見的就是信息列表、圖文混排等,不僅做到了視覺上的美觀,也達到了平衡文字及圖片強弱的效果。
2. 場景拓展
卡片式設計有利于場景拓展,他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體,在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。
3. 空間擴展
卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局,在空間有限的移動端設備中,還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分(若隱若現才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴展,在展示更多內容的情況下依然能保持模塊的整體性。
4. 突出重點
卡片式設計能很好的通過邊界襯托出內容的整體性,特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致,即便在卡片數量較多的情況下,用戶依然能清晰的感知到內容的歸屬層級以及重要信息。
5. 兼容多端
卡片作為一個容器,它可以自由無限的等比縮放,非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下,通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計,讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。
6. 易于操作
卡片給人最直觀的感覺就是可以操作,它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒,節省了一定的頁面空間,還有著更大的操作熱區,無需做到精準點擊??ㄆ皆O計很容易融入各種交出手勢,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更多便捷的操作。
7. 跳轉流暢
卡片可通過縮放的形式充分利用動畫進行頁面跳轉,例如App Store“Today”頻道,點擊卡片后直接等比放大至全屏,給用戶一種還停留在當前頁面的錯覺,避免了傳統的跳轉頁面而造成的信息割裂感,流暢絲滑的過渡,給用戶更自然的交互體驗。
三、常見的卡片式設計樣式
1. 四周留白
這種類型的卡片在UI設計中最為常見,柔和的圓角、邊緣陰影以及四周很自然的留白,讓內容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。
2. 懸浮內容之上
懸浮型卡片并非模態彈窗,與其相比,懸浮卡片不需要主動操作觸發,可作為臨時控件或長期固定顯示,并且比模態彈窗能承載更多信息內容,可通過伸縮來定義卡片中的信息數量,或多、或少、或展示、或隱藏,在頁面中非常靈活。
例如高德地圖首頁,搜索框及右側的功能入口長期懸浮在地圖之上,而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量,非常實用。
3. 通欄類型
通欄類型的卡片具有更強的視覺阻斷,對區分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背景色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。
四、卡片適用場景介紹
1. 瀑布流
瀑布流主要正針對圖片較多、或以圖片為主的內容設計,它最大的優點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
卡片式設計的瀑布流對信息的組合、包容性更強,不僅能在單屏區域內顯示更多內容,同時又將每組信息組合作出了明確的劃分,在不破壞頁面整體性的基礎上也做到了相對獨立,如花瓣、Pinterest就是最好的例子。
2. 信息流
信息流的展現方式主要以文字、圖片或視頻內容為主,是一種較長內容的媒介,不管哪種展現方式,其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。
卡片式設計將信息進行分塊處理,通過阻隔的方式快速告知用戶每個卡片的核心內容,便于用戶在長時間的滑動過程中也能快速識別重要信息。
3. 左/右滑動
卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛,因內容本身就圖片居多,也更適合卡片式設計,相比平鋪具有更強的層次感,對用戶的吸引力較強,尤其最右側漏出的一小部分內容營造出神秘的感覺,用戶會不由自主的想去滑動以求獲取更多信息。
4. 優惠卡/券
卡/券設計實際是把生活中的實物映射到了UI設計中,通過模擬實物造型設計成卡片樣式,有效降低用戶的理解成本,并對其有了更直觀的感知,真實感尤為強烈。
5. 突發事件/臨時提醒
對于用戶主動觸發或系統臨時發起的非固定性內容,利用卡片式設計會讓信息布局更靈活、視覺更突出,在不影響用戶使用的前提下,可出現在任何位置。
6. 部分頁面頭圖
卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括,并在頭部位置進行重點突出,不僅讓原本單個的內容形成整體,還能營造出沉浸式的氛圍。
五、卡片式設計原則及小技巧
1. 一致性原則
為了保持界面設計的一致性,需要將卡片樣式納入設計規范,例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等,大部分情況下都需要遵循設計規范。
2. 功能定位決定卡片形式
在同一產品中,雖然要遵循設計規范以確保一致性的視覺效果,但并非所有頁面都適合卡片式設計。
那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式,很浪費縱向空間、甚至會顯得很“雞肋”,用分隔線或間距留白來區分信息組顯然更合適;但對于電商類型的產品,利用卡片將不同的商品分隔后又進行歸納,會更容易識別,信息的可讀性也會更強。
3. 避免過多卡片嵌套
卡片式設計本身就包含了容器與背景的層級表現,為了保持內容的正常展示與用戶瀏覽體驗,避免在卡片中嵌套多層卡片,以免信息層級雜/亂而增加用戶的視覺負擔。
如果再同一卡片中需要再次區分多個信息組,可利用間距留白、分割線或淺色背景等元素屬性來區分,依然能達到想要的效果。
4. 合理利用橫向空間
因為卡片內、外的雙向間距留白,在空間有限的移動端設備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當利用左右滑動來擴充橫向隱性空間。
例如淘票票首頁,在1.5屏的范圍內,幾乎每個模塊都能橫向滑動查看更多內容,從用戶體驗角度出發,這是縱向空間無法比擬的。
5. 降低縱向空間的浪費
卡片式設計不是目的,其主要是用來更好的區分信息層級、提升用戶瀏覽體驗,因為卡片要作為獨立空間的存在,必定會增加上下間距而導致頁面拉長,因此,如無必要,不必盲目采用卡片式設計。
例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式,而「消息」頁則采用分割線進行信息分組,試想一下,如果為了統一規范而使用卡片,不僅造成很強的割裂感、還會極大的浪費縱向空間。
6. 長文表達不適合卡片
這點不用多說,新聞資訊類產品的內容詳情頁就是最好的證明,不管其他頁面是否采用卡片形式,但詳情頁并不會跟隨形式,一方面可以讓同屏展示更多內容、增加空間利用率,另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。
7. 突出一個核心內容
很多時候,我們總會聽到PM說這個很重要、那個也很重要,都需要突出一點,殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中,組始終牢記這個準則:一次只突出一個核心信息,以便于用戶快速、精準捕捉,切記不可貪多。
六、結語
卡片式設計之所有能快速流行起來且經久不衰, 其主要得益于自身的靈活性,尤其是在跨設備、跨屏幕上有著純天然的優勢,能忽略設備的差異給用戶提供更好的服務。卡片并不是簡單的樣式設計,它是一種自由布局的設計語言,通過多種方式的信息組合、結合豐富的交互操作,給用戶創造出極致的使用體驗。
信息的呈現方式雖有不同,但最終的目的都是為了服務于內容,卡片式設計只是其中的一種形式而已,在設計過程中,我們需要根據內容結合實際情況作出合理的判斷,切勿拘泥于形式而忽略內容本身的重要性。
任何設計風格及展現形式都有可能成為歷史,卡片式設計也不會例外,但絕對不是這么快就結束,它依然值得我們去深究,力求打造更好的信息布局、更舒適的用戶體驗。
專欄作家
大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
看大佬的文章,我勝讀十年書
一邊看文、一邊看書,豈不美哉
一直在關注你,希望來篇B端列表的文章吧~
抱歉,B端涉及的比較少,怕誤導友友們啊
歸納的很好,謝謝分享
感謝支持
牛,希望多更點
感謝支持
太干了 受益匪淺??
喝口水吧