2015-2016年最流行的APP設(shè)計(jì)是什么？比如，F(xiàn)acebook那樣的

Facebook仍是內(nèi)容驅(qū)動(dòng)型卡片設(shè)計(jì)的優(yōu)秀案例，并將繼續(xù)引領(lǐng)更多基于新聞和博客的功能設(shè)計(jì)。

譯者注：本文譯自UXPin出品的電子書(shū)Mobile Design Book of Trends 2015&2016的第六章Bite-Sized Cards。這本電子書(shū)結(jié)合豐富案例講述了2015-2016年間重要的移動(dòng)設(shè)計(jì)趨勢(shì)，共含6章節(jié)：靈巧的手勢(shì)操作、層級(jí)化的移動(dòng)界面、雋永的字體排印、扁平化設(shè)計(jì)、愉悅的微交互、小卡片。本文將來(lái)分享小卡片設(shè)計(jì)。注：以下圖片全部來(lái)自UXPin。

對(duì)于APP設(shè)計(jì)，2015儼然是卡片設(shè)計(jì)年。從網(wǎng)站到移動(dòng)應(yīng)用，不同屏幕尺寸的卡片無(wú)處不在，卡片展現(xiàn)形式與實(shí)物相似。通過(guò)手指滑動(dòng)，用戶(hù)可以輕松地在卡片容器中翻閱。

（Photo credit: Trello）

無(wú)論你是否意識(shí)到這一點(diǎn)，卡片會(huì)長(zhǎng)期存在下去。

坦白說(shuō)，卡片式風(fēng)格似乎只是為APP而生。你無(wú)法想象現(xiàn)在有多少APP正在使用卡片式設(shè)計(jì)。讓我們做一個(gè)小實(shí)驗(yàn)：拿起你的手機(jī)，打開(kāi)你看到的前10個(gè)應(yīng)用，有多少用了卡片設(shè)計(jì)呢？

我們已經(jīng)知道卡片式設(shè)計(jì)統(tǒng)治了移動(dòng)端，接下來(lái)讓我們深入了解如何實(shí)際使用它們吧。

卡片式界面入門(mén)課

卡片式布局將信息分布在一系列矩形卡片容器中，如圖像、文本、按鈕、鏈接等。這些卡片可以分層或移動(dòng)，并依據(jù)屏幕尺寸自適應(yīng)適配，如果你將手機(jī)橫豎屏切換，卡片將堆疊降落為新的卡片隊(duì)列。

卡片是整齊的信息容器。正如電子書(shū)《Web UI現(xiàn)狀和未來(lái)趨勢(shì)：卡片設(shè)計(jì)模式》中所言，最好把每個(gè)卡片視為單一的想法或基本動(dòng)作。

（Photo credit: Apple AirDrop）

讓我們來(lái)看看蘋(píng)果設(shè)備上常見(jiàn)的AirDrop功能。當(dāng)有數(shù)據(jù)傳入時(shí)，一個(gè)卡片式通知會(huì)彈出，你可以選擇接受或拒絕傳輸數(shù)據(jù)。無(wú)論是手機(jī)、平板電腦或筆記本電腦，云傳輸功能均以同樣的交互模式實(shí)現(xiàn)，這意味著用戶(hù)很容易對(duì)操作行為有一定預(yù)期，知道如何使用。

雖然卡片最近才流行開(kāi)來(lái)，這個(gè)設(shè)計(jì)倒并不新。Pinterest奠定了卡片作為主要設(shè)計(jì)模式的地位，而很多其他公司緊隨其后實(shí)踐卡片設(shè)計(jì)。

（Photo credit: Tinder）

卡片式設(shè)計(jì)越來(lái)越流行的原因之一，在于它與手機(jī)屏幕的兼容性。根據(jù)屏幕尺寸自適應(yīng)卡片大小，與大多數(shù)移動(dòng)用戶(hù)場(chǎng)景都完美匹配，而矩形的審美也符合UI設(shè)計(jì)。

細(xì)想卡片的設(shè)計(jì)，它幾乎完美適配了手機(jī)屏幕的大小和形狀。由于存在多種不同型號(hào)的屏幕尺寸，所以這里的卡片尺寸并不是一個(gè)精確的數(shù)值，而是一個(gè)極具代表性的長(zhǎng)寬比。

卡片式設(shè)計(jì)的精髓在于桌面端和移動(dòng)設(shè)備的交集設(shè)計(jì)，在互動(dòng)性和可用性之間尋求平衡點(diǎn)。正如我們?cè)凇兑苿?dòng)界面模式》中首次描述過(guò)的，跨越不同的設(shè)備，卡片式設(shè)計(jì)創(chuàng)建了一個(gè)更為一致的體驗(yàn)。在響應(yīng)式設(shè)計(jì)中尤其是這樣，卡片作為“內(nèi)容容器”可以輕松地放大縮小（像重新堆疊擺放箱子一樣）。