目前,已經越發成熟的卡片化設計,在手機界面上發揮著不可小覷的設計魅力。無論是BAT大廠的APP產品,還是創業公司裡面的正在發芽的項目。都會優先考慮採用卡片化設計。
我們先來看看當下最潮的一些APP界面設計作品吧~
高級灰的電商app設計欣賞
設計師為什麼這麼喜歡用卡片來布局呢?
那最明顯的卡片優勢是:
承載著不同元素的卡片有著千變萬化的玩法,適合用來展示尺寸不同,屬性不同的各種元素。
比如,當你的UI中有大量不同類型的元素,諸如圖片、文本、列表、CTA按鈕等,你需要藉助卡片來整合。
所承載的元素展示的長度可變,
用戶不用考慮各種元素之間的尺寸差別,
需要承載某些交互,比如輸入框、按鈕和連結等。
1、響應性:
卡片移動端屏幕當中顯示效果頗為精美,移動端需要流暢而靈活的布局,這一點卡片非常合適。卡片使得布局更為靈活,三個卡片在桌面上可以顯示為並排的3列,在移動端上可以縱向拍成1列,這兩種布局都能貼合用戶的閱讀習慣。
2、組織性:
卡片可以將不同類型的元素有效地組織到一起,無論是圖片、視頻、文本還是CTA按鈕,由於卡片本身的靈活性,設計師可以靈活地、有針對性地調整每一個元素而不用擔心影響其他的的元素。卡片構建出統一的用戶模式,使得用戶可以更好地、快速地完成任務。
卡片,其實比較像一個容器,你可以把不同維度的內容放入不同的卡片中,使其在內容區分的同時,還能保持界面的統一性。
舉例說明:比如淘寶會員中心頁面採用卡片處理信息的層級。
第一個卡片承載著:個人信息及偏好;
第二個卡片:購買操作後的所有關鍵流程;
第三個卡片:一些淘寶內使用率不高的功能聚合;
第四個卡片,是對支付寶和理財產品的一種推廣。
3、極簡性:
極簡主義的設計是目前主流,也是流行的設計風格。極簡主義風格下用戶更容易理解內容,外觀上也更為優雅。卡片式設計在精神上和極簡主義相通。
每個卡片承載一種元素,執行一個任務。各種不同的元素通常不應該混雜在一起,不同的卡片將它們分散開來,讓它們互補幹擾。
設計師一定要善用卡片的層次結構,突出關鍵內容和信息。
比如最近追波網最火最好看的APP 卡片布局設計作品:
其實,卡片本身是交互式元素,卡片上的連結和按鈕可以指向更為詳細的信息,卡片內自然也可以承載更為多樣的微交互。比如上圖當中的卡片橫向滑動與動效等。
最後,大家都喜歡用卡片來進行UI界面的布局,最重要的原因還是卡片可以提供更多富有想像力的交互操作和趣味玩法。
如下圖所示:
有設計師說:卡片是一種模擬物理世界的設計形式,擁有可操作隱喻,可以被覆蓋、堆疊、移動、划去。
支付寶卡包:
模仿物理世界真實的銀行卡設計,利用用戶已有的銀行卡查看習慣,讓用戶快速理解和查看已綁定的銀行卡
ZUO:
「ZUO」是一款小眾的,有趣新鮮創意的內容分享產品。主打追尋更美好的可能,產品設計別具特色。左滑卡片可以切換內容的設計,讓產品體驗更加靈動有趣。
探探:
一款陌生人社交軟體,廣告主打:左滑不喜歡,右滑喜歡的體驗,凸顯自己在同類型軟體中的體驗差異化,用戶的感受更加新鮮有趣。
最後,希望各位可以從上面這些優秀的卡片化設計案例當中,如果你也喜歡簡潔UI布局設計,可以結合自己的實際需求獲取一些布局上的靈感。
圖片來源:dribbble.com