由于它們?cè)谝曈X(jué)上具有吸引力，所以卡片界面不僅僅是一種趨勢(shì)。

隨著2014年*次移動(dòng)互聯(lián)網(wǎng)使用超過(guò)桌面，網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)在傾向于小屏幕作為響應(yīng)性設(shè)計(jì)成為強(qiáng)制性。其結(jié)果是:簡(jiǎn)單的界面風(fēng)格，如新的平面設(shè)計(jì)，極簡(jiǎn)主義，尤其是卡片比以往更受歡迎。

卡如何主導(dǎo)設(shè)計(jì)

來(lái)源:以前是的

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

在本文中，我們將探討card UI模式的興起:為什么它們是有用的，它們?nèi)绾芜m應(yīng)響應(yīng)性和材料設(shè)計(jì)，以及在未來(lái)對(duì)它們的期望。

Container-style設(shè)計(jì)是什么?

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

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



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

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

Trello

圖片來(lái)源:Trello

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

這不僅說(shuō)明了卡的靈活性，還展示了它的組織能力。Trello成功了，因?yàn)樗麄兊目ㄆ袷奖葌鹘y(tǒng)的list風(fēng)格的任務(wù)管理器簡(jiǎn)單。

用戶(hù)界面卡在移動(dòng)和響應(yīng)設(shè)計(jì)。

正如上面所提到的，卡提供了良好的兼容性與響應(yīng)性框架，導(dǎo)致了一些像Des Traynor的對(duì)講機(jī)稱(chēng)之為“網(wǎng)絡(luò)的未來(lái)”。這一模式在移動(dòng)設(shè)備上有多種原因，我們現(xiàn)在就來(lái)解釋。

邊緣

來(lái)源:邊緣

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

將上面的截圖與下面的移動(dòng)視窗相比較:

邊緣

來(lái)源:邊緣(移動(dòng))

注意顏色的文字、圖像和風(fēng)格是如何保持不變的?？ㄆ试S在不同設(shè)備之間有一致的體驗(yàn)。

您可以在UXPin提供的免費(fèi)設(shè)計(jì)庫(kù)中看到這一優(yōu)勢(shì)。請(qǐng)注意從移動(dòng)到全尺寸視口的布局是多么的干凈利落。

移動(dòng)視窗:

移動(dòng)窗口

來(lái)源:UXPin

全尺寸的窗口:

全尺寸的窗口

來(lái)源:UXPin

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

當(dāng)Fitts的法律適用于網(wǎng)頁(yè)設(shè)計(jì)時(shí)，按鈕的可點(diǎn)擊區(qū)域越大，就越容易與之交互。有多少次我們都在移動(dòng)設(shè)備上點(diǎn)擊小文本鏈接?

卡和材料設(shè)計(jì)

材料設(shè)計(jì)在很大程度上依賴(lài)于卡片，而他們對(duì)這種技術(shù)的深入分析也很有分量。如果你正在尋找一個(gè)完整的解釋?zhuān)麄儗?duì)材料設(shè)計(jì)指南中的卡片的描述是值得檢查的。

邊緣

圖片來(lái)源:谷歌

未來(lái)的卡片

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

1。技術(shù)

卡片可能不會(huì)停留太久。隨著web性能的提高，支持更豐富的多媒體內(nèi)容的能力也會(huì)提高。您可能會(huì)看到更詳細(xì)的元素，比如自動(dòng)更新內(nèi)容，不會(huì)降低整個(gè)體驗(yàn)。

用你的接口

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

視頻取代圖像(一些設(shè)計(jì)師多年來(lái)一直與之調(diào)情的想法)可能會(huì)變得更受歡迎。使用你的界面(上面)有動(dòng)畫(huà)的GIF卡片，使主頁(yè)成為一個(gè)快樂(lè)的體驗(yàn)。

2。更深層次的互動(dòng)

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