杭州UI設(shè)計學習|卡片式的設(shè)計優(yōu)勢
1.結(jié)構(gòu)清晰
卡片可以對不同大小和類型的信息進行邏輯分組和呈現(xiàn),同時占用更少的屏幕空間,使界面結(jié)構(gòu)更加清晰。與單純的留白或分割線相比,卡片不僅對信息進行了分割,更是一個獨立的容器,使歸納組合的信息能夠快速突出重點,簡化復雜內(nèi)容的處理。
卡片式布局簡潔明了,清晰的信息結(jié)構(gòu)有助于用戶瀏覽和快速找到自己感興趣的內(nèi)容,避免用戶擔心耗時或覺得內(nèi)容太長,節(jié)省更多的時間成本。最常見的是信息列表、圖文混合等,既達到了視覺美感,又達到了文字和圖片力度平衡的效果
2.場景擴展
卡片式設(shè)計有利于場景擴展。在信息不斷增加/減少的情況下,頁面仍能形成連貫的整體,沒有視覺上的違和感。比如支付寶在頭部插入廣告吸引流量,淘寶節(jié)假日加個二樓……等等。
3、空間拓展
卡片式的設(shè)計一度打破了移動端多為垂直操作的傳統(tǒng)列表式布局。在空間有限的移動設(shè)備中,也能很好地利用橫向空間。在橫向滑動區(qū)域漏出一小部分最后一張卡片,不僅給了用戶更多的選擇和期待,也極大地擴展了空間利用率,在顯示更多內(nèi)容時仍能保持模塊的完整性。

4.突出重點
卡片式的設(shè)計可以很好的通過邊框襯托出內(nèi)容的完整性,尤其是在電商產(chǎn)品的首頁頁眉、磁貼區(qū)、營銷引流區(qū)。即使在卡片數(shù)量較多的情況下,用戶仍然可以清晰感知內(nèi)容的歸屬級別和重要信息。
5.兼容多種終端
卡片作為容器,可以自由無限縮放,非常適合響應(yīng)式設(shè)計。對于屏幕尺寸復雜的手機、iPad、電腦等,采用響應(yīng)式斷點設(shè)計,通過縮放或增減垂直排列的數(shù)量,可以輕松在不同設(shè)備之間顯示相同的界面。創(chuàng)造一致的視覺體驗。
6.操作簡單
卡片最直觀的感受就是可以操作。不使用箭頭、按鈕或超鏈接等引導性視覺元素進行提醒,節(jié)省了一定的頁面空間,操作積極性更高。區(qū)域,無需精確點擊??ㄆ皆O(shè)計易于融入各種手勢操作,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更便捷的操作。
7.流暢的跳躍
卡片可以充分利用動畫,通過縮放來跳轉(zhuǎn)頁面,比如AppStore的“今日”頻道。身處當前頁面的錯覺避免了傳統(tǒng)跳頁帶來的信息碎片感,流暢絲滑的過渡給用戶更自然的交互體驗。