10
| 本文作者： 訾竣喆 | 2015-11-20 11:14 |
【編者按】本文編譯自thenextweb，原文作者CARRIE COUSINS
如今，全屏化的卡片式設(shè)計幾乎無處不在，這種設(shè)計語言有其獨特的美感。不管你是如何看待卡片式設(shè)計這個概念的，卡片化都已成為了當今應(yīng)用程序設(shè)計的潮流趨勢?？ㄆ皆O(shè)計似乎天生就是為了應(yīng)用程序而存在著的一種獨特的設(shè)計風格。如今，絕大部分的應(yīng)用程序都在使用卡片式設(shè)計，而這種卡片式設(shè)計也自有其在移動端領(lǐng)域的絕對優(yōu)勢。
讓我們做一個小實驗：拿起您的手機，打開排列靠前的十個應(yīng)用程序，看看其中有多少采用了卡片式設(shè)計呢？
現(xiàn)在就讓我們深入分析，看看在實際應(yīng)用下它們是如何被合理使用的。
卡片式的布局能夠把信息、圖像、文本、按鈕、鏈接等一系列數(shù)據(jù)整合到各種矩形方框中。這些模塊可以分層或移動，并都傾向于調(diào)整到全屏幕尺寸。如果你把它滑動到手機的一側(cè)，它就會和其它的卡片堆疊在一起。
卡片能夠合理利用空間，清爽的列出全部信息。而就像“2015年和2016年手機設(shè)計流行趨勢”所指出的那樣，最好的設(shè)計思路其實就是把每個卡片作為一個獨立整體來設(shè)計。
接下來我們看看實例。首先，我們來看看蘋果設(shè)備的AirDrop功能。當用戶有數(shù)據(jù)傳入時，手機會彈出一個卡片式的通知，用戶可以選擇接受或拒絕——無論用戶做出何種選擇，只需要一個操作即可。這種操作邏輯與平板電腦或計算機都是相通的，而這就意味著用戶能夠很容易地理解這種操作邏輯。
卡片式設(shè)計在最近一段時間已經(jīng)可以用“泛濫”來形容了。在Pinterest第一次給用戶帶來了這種清爽的卡片式設(shè)計之后，很多公司都緊隨其后推出了自己的卡片式交互設(shè)計，于是這股卡片化主導(dǎo)的設(shè)計潮流就這么火了起來。
而卡片式設(shè)計能夠成為流行趨勢的一個最重要的原因就是——卡片式設(shè)計能夠完美利用手機屏幕的空間，不但界面清爽，內(nèi)容也一目了然。在大多數(shù)的交互場景下，卡片式設(shè)計與移動應(yīng)用程序簡直是絕配。而矩形的設(shè)計也能夠完美體現(xiàn)出UI設(shè)計的簡潔美。
我們可以試著腦補一下，看看還有能跟卡片式設(shè)計一樣，與手機屏幕完美匹配的其他設(shè)計語言嗎？
卡片式設(shè)計可以說就是桌面設(shè)備和移動設(shè)備之間的設(shè)計交點，能夠?qū)⒖山换バ院涂捎眯酝昝廊诤显谝黄稹?/p>
無論是何種設(shè)備，卡片式設(shè)計都能提供一致的體驗感受。在響應(yīng)式設(shè)計思維方面，因為卡片式設(shè)計是作為“內(nèi)容存儲的介質(zhì)”，所以可以輕松地向上或向下擴展，而在與之交互時，這種優(yōu)勢便能夠淋漓盡致地體現(xiàn)出來。
卡片式設(shè)計有兩種最常見的形式——卡片式界面以及卡片式嵌入內(nèi)容。
有時候，雖然軟件使用的是卡片式設(shè)計，但其實你根本無法察覺到——因為它們已經(jīng)被全屏化了。但是如果你仔細觀察的話，還是可以看出其中卡片式設(shè)計的一些特征。
卡片式界面通常會融合單點式觸控設(shè)計的元素，也就是說，點擊或滑動屏幕上的任何地方都會做出相應(yīng)的動作。因此，卡片式設(shè)計也經(jīng)常被用于游戲界面上。
以最近在美區(qū)APP Store比較流行的小游戲Trivia Crack（益智闖關(guān)類小游戲）為例，主界面其實就是由許多卡片構(gòu)成，卡片上面顯示了游戲中的一些比賽以及競爭對手。仔細看的話，還能發(fā)現(xiàn)它在頂部還嵌入了一個廣告（巧妙地偽裝成了卡片），而且，在這款游戲中，卡片收集也是游戲中的一個重要的部分。這種卡片式設(shè)計使得游戲更容易操作，并且從玩家角度來講也更容易理解。
卡片式嵌入廣告在移動應(yīng)用程序中也是很常見的，一般會隨著程序中的某個動作觸發(fā)并下拉覆蓋大部分或是整個屏幕。
與卡片式界面風格所不同的是，這種卡片式廣告包含兩個鏈接，一種所占面積非常大，另一種則非常小。點擊到覆蓋面積大的那個鏈接，它就會帶你到廣告中的產(chǎn)品那里去——一般都是跳轉(zhuǎn)到網(wǎng)頁鏈接上，如果是iOS系統(tǒng)的話還會繼續(xù)跳轉(zhuǎn)到APP Store中；而那個占地比較小而且極為不起眼的區(qū)域（一般就是個小的×號）就會帶你回到原來的界面中（當然，還有些比較惡心的廣告不管用戶點擊哪里都會跳轉(zhuǎn)到廣告中的產(chǎn)品，甚至是直接跳轉(zhuǎn)到下載鏈接自動下載，這種我們暫時先不予討論）。
我們繼續(xù)以Trivia Crack為例。在你成功觸發(fā)廣告后，廣告會占滿整個屏幕。這就是卡片式設(shè)計的應(yīng)用之一（雖然用戶會很反感）。這些廣告窗口可以包含任何圖像、聲音、視頻以及文字信息，用以說服你點擊廣告上的推薦產(chǎn)品。
從一個用戶的體驗的角度來看，這種卡片式廣告感覺更像是集成在了界面之中。即使廣告可能占據(jù)整個屏幕，這也不會打破程序內(nèi)部整體的協(xié)調(diào)性，因為這其實就相當于在應(yīng)用程序頂層新打開了一個卡片。
卡片式設(shè)計能夠幫助用戶快速瀏覽信息，這種在視覺上“能夠和應(yīng)用程序內(nèi)部基調(diào)保持一致”的廣告能夠直接帶來更加可觀的商業(yè)價值。
使用卡片式設(shè)計的優(yōu)勢就在于——這一“容器”幾乎可以容納所有類型的內(nèi)容?？ㄆ梢耘c不同類型的內(nèi)容進行搭配，而這種設(shè)計語言對于那些以內(nèi)容為主的網(wǎng)站和應(yīng)用程序簡直稱得上是絕配。因為沒有什么內(nèi)容是卡片所裝不進去的。
卡片所能容納的內(nèi)容元素真的非常多，比如：照片、文本、視頻、優(yōu)惠券、音樂、付款信息、注冊表格、游戲數(shù)據(jù)、社交媒體流、共享文件、獎勵信息以及鏈接等等等等…
卡片式設(shè)計能夠把這些內(nèi)容有機的結(jié)合起來。而且對于用戶而言，這種卡片也易于快速瀏覽和閱讀。畢竟誰也不會盯著一個廣告看上半天，廣告商所能把握的時機只有那一瞬間的轉(zhuǎn)眸。
卡片是用來翻閱的。這聽起來似乎是理所當然的對吧？但這看似平常的邏輯卻是卡片能夠在現(xiàn)實社會普及開來的關(guān)鍵原因，同時這也是卡片式設(shè)計在移動應(yīng)用領(lǐng)域的最大優(yōu)勢所在。
作為2015年的移動設(shè)計趨勢，這股潮流很可能繼續(xù)蔓延到2016年。就像UXPin所說的那樣，卡片式設(shè)計能夠方便用戶使用的根本原因就是——卡片化的數(shù)字界面能夠在現(xiàn)實中得到映射，用戶很容易就能夠融入其中。試想一下，在現(xiàn)實中你是如何玩撲克牌的——你可以將它們摞起來、鋪展開、翻轉(zhuǎn)、折疊，或是放在撲克牌盒子里。
而卡片化的數(shù)字界面具有著與現(xiàn)實中的卡片相同的性質(zhì)，這是一種天然的優(yōu)勢，這能夠給用戶帶來一個舒適的體驗。因為用戶不必再思考到底該如何操作了，手到擒來。
設(shè)計者也能夠充分利用用戶的這種現(xiàn)實中的思維慣性來設(shè)計操作邏輯，從而實現(xiàn)在應(yīng)用中的無縫連接與轉(zhuǎn)換。而當用戶與卡片進行交互時，他們就會自然融入到這種固有的行為模式之中。
以上這些就是著名的UI設(shè)計師Chris Tse所說的，卡片式設(shè)計能夠做的三件事：記錄信息、用信息挑逗用戶、或者用信息提醒用戶。
那么，我們進一步分解來看看，不同類型的內(nèi)容元素是如何放到這些卡片中的：
如何使卡片在數(shù)據(jù)流中進行推送的過程中，形成一種自然的“時間軸”對于用戶體驗而言是很重要的。先使用卡片來做一個吸引人的概括，之后再把故事的細節(jié)娓娓道來是一種不錯的思路。
卡片可以把想要推送的相關(guān)內(nèi)容，非常自然的呈現(xiàn)在用戶眼前。如果能把廣告加入淡入的效果，給人以出牌的這種感覺的話，用戶肯定不會像現(xiàn)在這樣對廣告感到如此反感。我們可以看看Spotify的卡片效果：用戶只需要向左或向右滑動，就可以找到符合口味的歌曲，這種酣暢的感覺能夠給使用者以一種愉悅的享受。
由于卡片是能夠自成一體的，所以他們能夠完美地把正在進行的對話容納進去。接下來我們以微信為例，我們可以看到其中包含了多個矩形窗口用于對話，雖然各個對話框之間的間距非常小，但是它們之間并沒有相接，就在這點滴之間蘊含著一種十分微妙的美學(xué)。（雖然兩人的頭像各在屏幕的一邊，但是我們的心已經(jīng)靠在了一起）
卡片能夠非常輕松地把待辦事項進行歸類。在這里我們拿Evernote舉例，用戶可以給不同的待辦事宜選項卡里創(chuàng)建不同的注釋。當你把某個小卡片刪除后，剩余的“牌”將自動重新回到原來的位置。
現(xiàn)在，讓我們再從多設(shè)備的角度來看看卡片式設(shè)計。雖然這種卡片內(nèi)容經(jīng)常會被限定在一個特定的應(yīng)用程序內(nèi)，但是其實卡片也是可以在應(yīng)用、設(shè)備甚至用戶之間移動的。在這里我們可以回想一下蘋果的AirDrop應(yīng)用是如何把數(shù)據(jù)從一個用戶發(fā)送給另一個用戶的。
在現(xiàn)實中也是一樣，卡片很容易設(shè)計和使用。當涉及到卡片的實際設(shè)計時，你有時需要做一些重要的取舍。在這里我們可以拿SIM卡舉例，就你而言，你覺得SIM卡設(shè)計成多大尺寸是比較合適的？又該以怎樣的設(shè)計語言去設(shè)計SIM卡的外觀呢？
我們再回到移動應(yīng)用程序領(lǐng)域。當考慮到的卡片大小尺寸的問題時，目前最流行的選擇無非三種：小尺寸卡片，用于對內(nèi)容進行簡單的描述；中等尺寸，占屏幕的一部分，可允許多個卡片顯示在屏幕中;全尺寸卡片，覆蓋整個屏幕，可以彈出覆蓋在其他元素的頂部。
Yahoo! Fantasy這一應(yīng)用就充分利用了所有的這三種卡片尺寸。第一個畫面顯示了一個球員名單，其中每個球員的名字都是一張牌。點擊其中一個名字，就會彈出一個幾乎占滿整個屏幕的新卡片，卡片中有該球員詳細的資料。進入到新聞界面時，應(yīng)用就會全屏展開最近該球隊在聯(lián)賽中的新聞。這些不同尺寸的卡片能夠讓用戶清楚的了解到他們正在看哪類的內(nèi)容。
卡片化設(shè)計同樣蘊含著美學(xué)。微軟的Metro界面就是用扁平式卡片把應(yīng)用程序展現(xiàn)在用戶面前。雖然微軟在Win10中不再那么依賴Metro風格的卡片了，但是這股卡片式設(shè)計的潮流卻絲毫沒有退卻。應(yīng)用程序里也開始出現(xiàn)了各類雜志風格的卡片，特別是在新聞網(wǎng)站這種包含有大量的文字信息的地方，比如Flipboard、CNN和Newsify。
那么，為什么說卡片的設(shè)計感十足且十分易于使用的呢？這是由于如果設(shè)計者想要使用卡片式設(shè)計的話，就必須有能力對所有能夠放進卡片中的內(nèi)容加以修飾和潤色——從文字的排版到顏色的搭配再到圖片的使用，都必須能夠稱得上專家才可以駕馭。而設(shè)計理論就是設(shè)計師在規(guī)劃和制作這種卡片時的良師益友。
UX的設(shè)計師Erik D. Kennedy寫了一篇非常棒的文章（一共分為兩部），這篇文章打破了許多傳統(tǒng)的設(shè)計觀念。以下是我們認為在這篇文章中最適用于卡片式設(shè)計的幾條規(guī)則：
了解光線的物理性質(zhì)：設(shè)計師應(yīng)仔細考慮如何使用陰影和漸變，使元素看起來更加真實。這對于卡片式設(shè)計而言是非常重要的，因為它涉及到了卡片的“真實感”。如果陰影投在各個角落邊上的話，這種卡片式的體驗可能就會被破壞掉。
確保UI在黑白兩色下能夠正常使用：設(shè)計的第一步就是要拋棄顏色。這將能夠讓你明確地把設(shè)計重點放在實用性和內(nèi)容上。根據(jù)Kennedy的說法，設(shè)計師應(yīng)該在設(shè)計的最后一步再添加顏色，顏色對UI設(shè)計只是起到點綴的作用。
不要吝嗇使用留白：請先給你的卡片一些空白的空間，之后再去慢慢縮減這部分空白。正如我們在“網(wǎng)頁設(shè)計中留白的禪學(xué)”中所描述的那樣，“負空間”是幫助你“組織和分離各種必要與不必要元素”的良師益友。
掌握分層文字的藝術(shù)：這可能并不是那么容易掌握的。一定要使用一個明確的、清晰的圖像作為背景。為了確保文本看起來效果更好一些，你可以使用一個黑暗的色調(diào)來進行疊加——把文字放進一個“盒子”里，或者是嘗試虛化背景圖。
知道如何創(chuàng)建與排版對比：無論是猶豫用大卡片還是小卡片，或是糾結(jié)用更多的文字還是更少的文字進行組合，其實最重要的是要把這些元素有機的配合起來，達到吸引用戶注意這一最終目標。其實，在卡片式設(shè)計上簡單的排版往往效果最好。通過給卡片加以美化潤色，來使得用戶對卡片更加熟悉，而且這種方式也并不失創(chuàng)意。例如，把陰影元素加進卡片中的話就會使用戶感到更加親切自然。
你可能已經(jīng)感覺到卡片式的設(shè)計在移動領(lǐng)域越來越流行，而且這股潮流并不會在短時間內(nèi)消失。這意味著更多的應(yīng)用程序會出現(xiàn)卡片式界面，更多的開始使用有層次的卡片來設(shè)計。
谷歌地圖就使用了分層卡片式設(shè)計來幫助用戶瀏覽。我們可以來看下面的例子，左圖中包含一個位于頂層的地址輸入框和位于下層的全屏化地圖。右圖中位于頂端（或者說底部）的卡片顯示的是該地方的實景圖，幫助你確定你所搜索的位置，而屏幕下方（或者說頂層）的卡片則擴展顯示了地址的具體細節(jié)。
設(shè)計人員如今的目標是找尋新的方式來進一步簡化卡片的數(shù)量。第一種方式就是把一些常見的美學(xué)圖案融合進圖片、視頻或標題之中，第二種方式就是通過將主文本堆疊起來，來使元素之間相互覆蓋。
卡片式設(shè)計也可能還會有其他的設(shè)計趨勢，例如在標題或圖片上添加按鈕。
雖然扁平化的設(shè)計從來沒有真正的走出風格過，但是它的發(fā)展將激勵卡片式設(shè)計繼續(xù)發(fā)展?？ㄆ皆O(shè)計將更多的加入顏色的碰撞、流線型的排版以及更精妙的小設(shè)計，以幫助用戶更好的瀏覽內(nèi)容。
而那些以內(nèi)容為主的網(wǎng)站很可能也會漸漸開始應(yīng)用卡片式界面。因為，就目前而言，卡片式設(shè)計對于信息量比較大的內(nèi)容都是絕配，沒有之一。
Facebook仍然是內(nèi)容驅(qū)動型卡片設(shè)計的一個范例。而且，F(xiàn)acebook將繼續(xù)領(lǐng)導(dǎo)卡片式設(shè)計的潮流，并與更多的新聞和博客交流合作，并能夠最終促使它們也使用這種設(shè)計語言。作為業(yè)界領(lǐng)袖，人們能夠在Facebook里發(fā)現(xiàn)大量的卡片式設(shè)計語言，這并不奇怪，因為Facebook本身就是以內(nèi)容為主的應(yīng)用程序，而它的卡片式界面和模式將會鼓勵越來越多的應(yīng)用程序相繼效仿。
相關(guān)閱讀：
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
