最潮的APP布局利器:卡片

2021-02-24 APP設計學堂

目前,已經越發成熟的卡片化設計,在手機界面上發揮著不可小覷的設計魅力。無論是BAT大廠的APP產品,還是創業公司裡面的正在發芽的項目。都會優先考慮採用卡片化設計。

我們先來看看當下最潮的一些APP界面設計作品吧~

 高級灰的電商app設計欣賞

設計師為什麼這麼喜歡用卡片來布局呢?

那最明顯的卡片優勢是:

承載著不同元素的卡片有著千變萬化的玩法,適合用來展示尺寸不同,屬性不同的各種元素。

比如,當你的UI中有大量不同類型的元素,諸如圖片、文本、列表、CTA按鈕等,你需要藉助卡片來整合。

所承載的元素展示的長度可變,

用戶不用考慮各種元素之間的尺寸差別,

需要承載某些交互,比如輸入框、按鈕和連結等。

1、響應性:

卡片移動端屏幕當中顯示效果頗為精美,移動端需要流暢而靈活的布局,這一點卡片非常合適。卡片使得布局更為靈活,三個卡片在桌面上可以顯示為並排的3列,在移動端上可以縱向拍成1列,這兩種布局都能貼合用戶的閱讀習慣。

2、組織性:

卡片可以將不同類型的元素有效地組織到一起,無論是圖片、視頻、文本還是CTA按鈕,由於卡片本身的靈活性,設計師可以靈活地、有針對性地調整每一個元素而不用擔心影響其他的的元素。卡片構建出統一的用戶模式,使得用戶可以更好地、快速地完成任務。

卡片,其實比較像一個容器,你可以把不同維度的內容放入不同的卡片中,使其在內容區分的同時,還能保持界面的統一性。

舉例說明:比如淘寶會員中心頁面採用卡片處理信息的層級。

第一個卡片承載著:個人信息及偏好;

第二個卡片:購買操作後的所有關鍵流程;

第三個卡片:一些淘寶內使用率不高的功能聚合;

第四個卡片,是對支付寶和理財產品的一種推廣。


3、極簡性:

極簡主義的設計是目前主流,也是流行的設計風格。極簡主義風格下用戶更容易理解內容,外觀上也更為優雅。卡片式設計在精神上和極簡主義相通。

每個卡片承載一種元素,執行一個任務。各種不同的元素通常不應該混雜在一起,不同的卡片將它們分散開來,讓它們互補幹擾。

設計師一定要善用卡片的層次結構,突出關鍵內容和信息。

比如最近追波網最火最好看的APP 卡片布局設計作品:

其實,卡片本身是交互式元素,卡片上的連結和按鈕可以指向更為詳細的信息,卡片內自然也可以承載更為多樣的微交互。比如上圖當中的卡片橫向滑動與動效等。

最後,大家都喜歡用卡片來進行UI界面的布局,最重要的原因還是卡片可以提供更多富有想像力的交互操作和趣味玩法。

如下圖所示:

有設計師說:卡片是一種模擬物理世界的設計形式,擁有可操作隱喻,可以被覆蓋、堆疊、移動、划去。

支付寶卡包:


模仿物理世界真實的銀行卡設計,利用用戶已有的銀行卡查看習慣,讓用戶快速理解和查看已綁定的銀行卡

ZUO:

「ZUO」是一款小眾的,有趣新鮮創意的內容分享產品。主打追尋更美好的可能,產品設計別具特色。左滑卡片可以切換內容的設計,讓產品體驗更加靈動有趣。

探探:

一款陌生人社交軟體,廣告主打:左滑不喜歡,右滑喜歡的體驗,凸顯自己在同類型軟體中的體驗差異化,用戶的感受更加新鮮有趣。



最後,希望各位可以從上面這些優秀的卡片化設計案例當中,如果你也喜歡簡潔UI布局設計,可以結合自己的實際需求獲取一些布局上的靈感。

圖片來源:dribbble.com

相關焦點

  • 這幾種APP導航布局,你用過哪幾種,留言選擇!
    那麼在我們常見的APP中我們可以看到的框架設計有以下幾種 列表列表(list),常見於功能比較單一的應用場景,是app中最常用的一種方式。列表內容常見形式有:文字列表、圖標和文字的混合列表、標籤和控制項(複選框、按鈕)列表、圖片和視頻縮略圖與文字組合列表。
  • 利器周報|安卓也有 Assistive Touch,但比 iPhone 的更強
    如果你也想分享你的利器,來填問卷加入利器微信群吧:D①除了優衣庫▍名稱:Massimo Dutti▍推薦人:陳晨|畫廊&甜品店提問:萬能的利器群啊,求推薦男士襯衣牌子,除了優衣庫和 GAP。預算單件 300 元以內。
  • 世界上最難的不是送禮,是寫卡片
    這是一個男生寫的4張求饒卡片,哄老婆開心野獸派實體店鋪有一個特別服務,可以幫您代寫卡片。但也有不少有心人,會特別到店裡親筆書寫。有的人提早打好草稿,有的人躲在角落裡偷偷書寫。。。最後交代我們千萬別忘了。線上同事讓我提醒大家,在野獸派app購買也可以選擇語音卡片、代寫卡片或者空白卡片自己親筆。
  • 卡片式設計在圖片流、卡片流中的應用
    不管是在移動端還是在web端,現在隨處可見卡片式設計。卡片式設計利於信息的分層和整合,能夠使頁面信息更加清晰,易於用戶理解;視覺上也更加整潔美觀。在頁面中突出卡片的形態,主要是依據卡片的圓角、投影、以及顏色對比。但是這三點並非一定要同時具備。卡片設計應用的場景實際上有很多,本篇著重分析的是在圖片流和卡片流中的應用。
  • 最潮手遊:世界第一密室逃脫
    娛樂最前沿,手遊最前線!騰訊遊戲頻道特別推出《最潮手遊》欄目,讓娛樂達人追潮遊戲兩不誤。今天我們推薦的是世界第一密室逃脫遊戲《Cube Escape》系列!【最潮手遊】Cube Escape: Seasons【遊戲價格】免費2015年4月發行,《Cube Escape》開山之作,為了達成一個幾乎不可能完成的任務,陰魂不散的黑影主角藉助神秘方塊的力量跨越四季
  • 乾貨 | 2017年,你最應該收藏的30+款手機攝影APP
    Snapseed     功能齊全的後期app很多,但是布局合理、操作簡便的不多,而Snapseed就是其中的佼佼者。光是濾鏡的優秀就足以讓它在各大攝影app排行中常年屹立不倒。如果只能往手機裝一個後期app我一定會選Pixlr。
  • 授利器,穩布局,強支持 晨兮盟校3天2856單的背後
    (原標題:授利器,穩布局,強支持 晨兮盟校3天2856單的背後)
  • 到底哪個音樂APP最好使?丨蘑菇APP親測安利
    歌詞的翻譯給一個中肯的評價,不錯,而且最近加入了B格滿滿的歌詞海報,表白、朋友圈配圖利器,做出來的效果真的不錯。界面方面,很穩定(好評)但不出彩,音樂館的推薦頁面不太符合用戶需求。此外歌曲評論的方面居然加入了彈出式彈幕的設計,這真是異常的腦洞= =,基本不開。
  • 卡片式設計用戶界面
    良好的內容組織卡片在佔用較少屏幕空間的情況下將信息有組織的劃分到不同的區域中。用戶喜歡信息分塊,因為它有助於快速瀏覽:它可以讓用戶避免閱讀讓他們覺得恐懼和費時的超長段落,讓用戶更快地抓住其感興趣的部分。類似於文本段落是對語句的組織結果,卡片聚集多樣的信息形成一個連貫的內容體。卡片上的信息布局整齊簡練。
  • 【Mac好軟推薦】第四期 影音娛樂(內含視頻下載利器)
    閱讀本文後,你將獲得:最好用的視頻下載軟體——Downie 4強大到爆炸的播放器——IINA看美劇——人人影視視頻格式轉換——HandBrakeMac上最好用的新浪微博客戶端——Maipo全網音樂聚合app——uTools插件免費藍光無廣告——騰訊視頻Downie
  • 打開一名「故事家」的工具箱|利器*Odding
    前者是 3 年前好朋友送的,現在比較慢了;後者是來日本後公司發的,現在主要日常拍照都用它,只是內存 16G 有些不夠用,即使我每隔幾天就會把照片都轉存進電腦裡。iPod Touch 5 32G 紅色款。3 年前買的,如果從所有工具裡只選一個我的創作利器,那就是它了。我這兩年的動畫片和音樂 demo 都是用它來完成的。
  • 別光抄了,信息卡片應該這樣做!
    5【 按鈕 】按鈕是卡片上最重要的元素之一(部分卡片也可能沒有),作為一個行動點,Ta的作用在於吸引用戶點擊。按鈕在表現形式上和標籤一致,我們最常見的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字(有彩色描邊或有彩色字)。
  • 月度利器|思考的時候喜歡虐待它
    最後,在北京胡同裡做竹子自行車的小羅分享了他的修車利器與對理想工作環境的觀點。這些創造者用什麼工具完成工作?生活中會用什麼呢?我們列出了大家最感興趣的 3 件工作利器與生活利器,也特別選出了一些沒被關注但質量不錯的工具。數據來自利器網站(liqi.io)外鏈點擊統計。
  • 這款拼圖 App,如果用好了應該是個神器
    然而無論是微博還是微信,九張圖的限制顯然讓拍了滿滿一個出遊相冊的人面臨選擇難題,因而作為圖片領域的剛需,拼圖相關的 app 也一直層出不窮,甚至 Instagram 自己也出了官方的拼圖 app 以鼓勵用戶一次傳遞更多的圖片信息。不過今天說的這款拼圖軟體「Plotboard」可能會讓你眼前一亮。
  • 小企鵝樂園app全新升級 打造一站式成長空間
    來源標題:小企鵝樂園app全新升級 打造一站式成長空間 從識字卡片,到手機、Pad,移動網際網路環境下新一代低幼兒童及其家庭的親子教育和家庭娛樂活動已發生了巨大的變遷,更加便攜易使用的行動裝置,成為孩子們有意識起認識世界的工具,
  • 卡片設計最佳方案
    卡片設計師由Pinterest和Facebook引進的,如今廣泛應用在多個領域。正確使用卡片能夠提升應用的用戶體驗。本文,我會講述5個卡片設計的技巧,同時給出一些有用的例子。1、遵循「一個卡片一個概念」的原則卡片裡所有的內容應該只與一個概念相關。
  • 【英雄卡片】嘉莉~(全新版本卡片~)
    【英雄卡片    [3.21更新]基礎搭配寶石及神器新增對應pve及pvp的搭配;    [3.25更新]基礎搭配賦能新增pve及pvp推薦,賦能三屬性補充;    [6.18更新]新增英雄賦能5屬性、英雄六邊形評分圖;    [8.10更新]新版本卡片,修改布局    [8.29更新]修改基礎搭配中的寶石+神器搭配
  • 利器訪談|Link,電影調光師、VUE 色彩顧問
    我的工作就是配合導演、攝影師去完成這個畫面調整的過程,讓電影以最完美的狀態呈現在觀眾眼前。最近大家會看到我作為調光師完成的馮小剛導演的電影《我不是潘金蓮》,它終於上映了。想了 10 多年色彩的問題,對色彩在各種場景中的應用也有很多的積累,終於在今年和好朋友們一起做了 VUE 這個 app,一個十分簡單,就可以把生活拍出電影般質感的 app。
  • APP大江湖
    別人家的孩子在收集乾脆麵裡的卡片的時候,他在忙著收集乾脆麵的調料包,最後含淚吃了三口被自己放了一百零八袋調料的泡麵,美其名曰水滸英魂皆在其中。別人家的孩子在玩四驅車溜溜球的時候,他在忙著學習仙俠小說中的修真一脈,最後被他媽哭著送醫院搶救,醒了第一句話是媽,我現在是辟穀境界了。