由于它們在視覺上具有吸引力，所以卡片界面不僅僅是一種趨勢。

隨著2014年*次移動互聯(lián)網使用超過桌面，網頁設計現在傾向于小屏幕作為響應性設計成為強制性。其結果是:簡單的界面風格，如新的平面設計，極簡主義，尤其是卡片比以往更受歡迎。

卡如何主導設計

來源:以前是的

card UI模式的有用性超出了加載時間和不同屏幕大小的轉換。比特大小的內容與大多數web用戶(尤其是移動設備)的注意廣度相匹配。由Pinterest培育，然后通過Facebook和Twitter等社交媒體網站推廣，現在可以在所有行業(yè)的網站上找到卡片ui。

在本文中，我們將探討card UI模式的興起:為什么它們是有用的，它們如何適應響應性和材料設計，以及在未來對它們的期望。

Container-style設計是什么?

要理解這種模式，您必須首先理解卡片本身。

卡片基本上是每個信息的小容器，每張卡片代表它自己獨特的思想。一張卡片可以容納所有類型的內容——視覺、文字、鏈接等等——但都屬于一個統(tǒng)一的主題。



用這種獨立的容器填充屏幕是《衛(wèi)報》所稱的“容器模型”。這提供了一個更干凈、更容易理解的界面，可以快速瀏覽，這樣用戶就可以直接訪問他們想要的東西。(*重要的是，這種方法適合于手勢控制，下面我們將對此進行解釋。)

有用和吸引:卡用戶界面模式的好處是兩倍。

Trello

圖片來源:Trello

Trello允許用戶創(chuàng)建他們想要的任何卡片。任何人都可以創(chuàng)建“待辦事項”卡片，并根據需要對它們進行分類。

這不僅說明了卡的靈活性，還展示了它的組織能力。Trello成功了，因為他們的卡片格式比傳統(tǒng)的list風格的任務管理器簡單。

用戶界面卡在移動和響應設計。

正如上面所提到的，卡提供了良好的兼容性與響應性框架，導致了一些像Des Traynor的對講機稱之為“網絡的未來”。這一模式在移動設備上有多種原因，我們現在就來解釋。

邊緣

來源:邊緣

首先，在擴展和收縮的框架中，卡片網格可以調整自己以適應任何斷點或屏幕大小。設計人員可以非常靈活地使用卡片的縱橫比(以及如何將一組卡片組合在一起)。例如，您可以設置一個具有可變高度的固定寬度，在卡片之間使用一致的間距。

將上面的截圖與下面的移動視窗相比較:

邊緣

來源:邊緣(移動)

注意顏色的文字、圖像和風格是如何保持不變的?？ㄆ试S在不同設備之間有一致的體驗。

您可以在UXPin提供的免費設計庫中看到這一優(yōu)勢。請注意從移動到全尺寸視口的布局是多么的干凈利落。

移動視窗:

移動窗口

來源:UXPin

全尺寸的窗口:

全尺寸的窗口

來源:UXPin

另一個優(yōu)點是卡的樣式適合于手勢控制。在觸摸屏上，卡片作為按鈕，無需任何額外的努力。這個想法很簡單:點擊卡片與內容交互。

當Fitts的法律適用于網頁設計時，按鈕的可點擊區(qū)域越大，就越容易與之交互。有多少次我們都在移動設備上點擊小文本鏈接?

卡和材料設計

材料設計在很大程度上依賴于卡片，而他們對這種技術的深入分析也很有分量。如果你正在尋找一個完整的解釋，他們對材料設計指南中的卡片的描述是值得檢查的。

邊緣

圖片來源:谷歌

未來的卡片

雖然卡片用戶界面模式不斷地重塑自身以適應新的挑戰(zhàn)，但響應性和應用程序設計可能是*受影響的設計學科。正如2015年和2016年的網頁設計趨勢所描述的那樣，這一轉變部分是由于紙質的影響材料設計正在開發(fā)Android應用程序。

1。技術

卡片可能不會停留太久。隨著web性能的提高，支持更豐富的多媒體內容的能力也會提高。您可能會看到更詳細的元素，比如自動更新內容，不會降低整個體驗。

用你的接口

照片信用:使用你的界面。

視頻取代圖像(一些設計師多年來一直與之調情的想法)可能會變得更受歡迎。使用你的界面(上面)有動畫的GIF卡片，使主頁成為一個快樂的體驗。

2。更深層次的互動

在不久的將來，卡片也可能比作為鏈接更有創(chuàng)意。正如我們在材料設計中看到的，卡片根據個體的相互作用而變化。 本文來源：智通澤軟件，轉載請注明出處！如果需要泊頭網站建設 泊頭小程序開發(fā) 泊頭微信開發(fā) 泊頭APP開發(fā)請聯(lián)系封經理，我們將提供上門服務！
聯(lián)系方式：手機：13393374114  座機：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：