好的卡片設計不會使用太多的加載時間，同時它也能在不同的屏幕上切換自如。小的模塊對于用戶來說更能吸引注意力（尤其在移動端），它在Pinterest上培養大家的習慣，然后在Facebook和Twitter上面推廣，卡片設計能應用于各個領域的網站設計。

　　在這篇文章中，我們將會探討卡片設計的崛起：為什么它們有用，它們如何適應于響應設計和material design，在未來又會發生什么？

　　什么是抽屜式設計？

　　為了了解抽屜式設計，你首先得先了解卡片是什么。

　　每一個卡片擁有屬于自己的信息。一張卡片能包含所有信息 — 視覺、文本、鏈接等等— 但是所有這些內容都是一張卡片里面的內容。

　　這種獨立填滿整個屏幕抽屜式展現信息的方式 被Guardian 叫做“抽屜模式”。它讓用戶更加直接清晰的看到整個界面，也有利于用戶快速的尋找他們需要的信息。（最重要的是，這種方式能夠有利于我們自己控制，下面的文章我會解釋為什么。）

　　讓人覺得很有吸引力的是：它們使用的卡片界面是相互疊加的。

　　Trello 能讓用戶創建他們自己想要的任何卡片列表。所有人都能創建“to-do”卡片 ，同時能夠按照自己的需求進行分類。

　　Trello不僅讓卡片具有靈活性，而且還能被用戶隨意擺放。Trello的成功是因為相較于傳統列表式布局，它讓用戶感覺很簡單。

　　UI卡片在移動端和響應式設計中的應用

　　正如上文提到的，卡片為響應式框架提供了出色的兼容性，因為一些像Des Traynor把他叫做“網頁的未來。

　　這種設計能夠在移動端隨意很好的轉換。”

　　首先，它能夠自己擴展或者收縮去適應任何屏幕的尺寸。設計師可以很靈活的控制卡片的比例（幾組卡片能夠更好的適應彼此）。例如,你可以設計固定的寬度和一致的間距來適應可變動的高度。

　　比較上面The Verge的網頁截圖和下面的移動端截圖：

　　注意他們兩個的文本信息、圖像和顏色的風格都是一致的。卡片設計讓用戶在不同的設備上有一致性的體驗。

　　你可以看到這個優勢在UXPin的e-book里面被利用。注意他們從移動端到全屏的界面是非常清晰的。

　　UXPin移動端界面：

　　UXPin全屏的界面：

　　另外一個優勢是如何讓卡片適應人們手指操作。在觸屏上，操作它就像按動一個按鈕一樣不需要花費多少精力。這個想法很簡單：點擊卡片，讓它與內容交互。

　　像菲茨定律適應于網頁設計展示那樣，點擊區域越大就越容易相互作用。還記得我們有多少次掙扎在移動設備上點擊一些文本鏈接么？

　　卡片和Material Design

　　Material Design很依賴卡片式設計，卡片描述在Material Design指南里值得你去尋找一個好的解釋。

　　卡片設計的未來

　　卡片設計模式不斷的重塑自身以適應新的挑戰，而響應式和移動端也許會受最大的影響。就像2015&2016網頁設計趨勢 描述的那樣，這種設計流行的轉變是因為 Material Design 在安卓系統里面的應用。

　　1.技術

　　卡片不可能永遠是靜態的。隨著網絡性能的提高，也能夠支持更豐富的多媒體內容。你可能會看到更多細節的元素，比如自動更新內容但是不會影響整個用戶體驗。

　　視頻能更換圖片（設計師思考這個問題很多年了）也許會變得很流行。Use Your Interface（上圖），這些GIF動畫功能讓整個頁面體驗非常愉悅。

　　2.深度的交互

　　在不久的將來，卡片也許能夠變得更加的有創意。就像我們看見 Material Design，它非常依賴個人的交互，隨著自動排序和實時更新等功能的更新（比如天氣預報）。

　　Windows手機里面已經開始應用卡片式自動分類方式，很有可能其他移動手機也會使用這種方式。

　　3.尺寸

　　圖片并列的布局趨勢，也讓卡片更好的使用大尺寸屏幕。

　　大卡片上能布局更多的細節和復雜的字體，它從視覺上讓用戶感覺很舒服。大小卡片交替的時候，大卡片在視覺上更讓人感覺舒服。

　　Arkitekter（如上圖）是怎樣應用大尺寸和中等尺寸作為信息布局的。有些卡片有鏈接，有些卡片是靜態的信息。大小不同的卡片呈現方式，讓整個頁面更有呼吸感。

　　4.可穿戴的

　　多虧了谷歌眼鏡，它讓卡片的UI設計在穿戴設備上奠定了基礎。

　　盡管有很多人認為谷歌眼鏡會失敗，但是也有一部分人認為它有市場。不管怎樣，穿戴設備的UI設計必須要很好的利用空間來設計，而卡片設計是它最實用的選擇。

　　要點

　　在所有的媒介和設備上，卡片設計已經成為設計常用的一種方式。他們當前的形式可能會隨著技術的發展隨著技術有所改變，但是他們確實是存在的。

　　畢竟，這些布局并不是一個表格。別忘了，在不久前卡片只是一張包含內容的紙片而已。

　　當前，卡式的網站建設以精簡，重點內容突出的表達形式受到用戶的歡迎，跟著趨勢走的網站必然不會被淘汰。

隨著生活節奏加快，人的需求也相應增高，互聯網行業也不例外，各企業主對網站建設的要求也增高，很多企業都選擇了響應式網站設計。然而很多對于seo來說，響應式網站優化與單獨pc與移動站優化一直存在爭議，也有很多新手seo分不清楚到底哪個類型對網站優化更友好。那么響應式網站優化有什么優缺點呢？

響應式網站優化優點

①節約建站成本

很多人覺得制作響應式網站工期很長，會增加成本，其實是錯誤的。響應式網站只需要設計一套pc端的設計圖，就可以了，至于移動端與平板電腦上面的展現前端人員調css樣式就可以了。而分開做單獨的移動端，那么需要出兩套設計圖，這增加了網頁設計的成本。一般企業網站而言工時主要還是用在了網頁設計上面，建站過程中雖然響應式設計匯增加一部分前端人員切圖時間，但是這個時間增加的相對設計來說還是比較少的。

②URL永遠同步一致

響應式網站設計在適配到移動端的時候，雖然調節了網頁布局，但是其URL不會發生變化，這對于SEO來說是非常大的優勢。移動端在百度熊掌號沒有推出之前，實際上是沒有單獨針對移動端排名的算法的，甚至收錄也是。當pc網站收錄/有排名了以后，移動端的收錄與排名是根據適配規則繼承pc端網站而來的，只不過在繼承地過程中，搜索引擎會根據移動端瀏覽體驗再進行微調。

③內容一致，形象更統一，用戶體驗良好。

大家都知道，響應式網站適配到移動端的時候是調節了css樣式，整體內容與pc端基本上是保持一致的，比如顏色，每個頁面板塊內容等。這對于老訪客而言，用戶體驗更好，不管是在pc端還是在移動端它們的操作瀏覽體驗都是一致的。而用戶體驗又是SEO中非常重要的一塊，占據著絕對地位。

響應式網站優化缺點

①加載速度相對于單獨移動站較慢

響應式網站因兼容多個屏幕尺寸，所以需要寫多套css樣式，適配到不同分辨率上面需要加載調整css樣式與圖片彈性伸縮來適應于瀏覽者當前屏幕，這就導致加載時間較長，另外很多網站中的圖片因為公用關系本身PC上面的尺寸就比較大，導致在手機上去看還是同樣大的尺寸，也是導致網站加載過慢的一個因素，對于網站優化而言，網頁加載速度又很重要，尤其移動端優化需要在1.5s內完成。相對于單獨的移動端網站，響應式網站加載速度要弱一點。

②選詞布局的尷尬

PC端搜索所展現的網頁標題在32個漢字，而移動端需要控制在20個字以內，然而響應式網站需要移動端與pc端保持一致，因為url未發生變化，不能定義兩個不同的網頁標題。想pc端與移動端都完全展現寫不一樣的標題只能單獨地移動站來實現。同理，想設置不同的描述與關鍵詞也是需要單獨移動端來展現。這里可能有些同行會說pc端與移動端做一樣的詞，十二君想說的是用戶用pc與移動的搜索習慣是不同的，比如有些詞是pc端搜索量較高，有些詞又是移動端搜索量較高，如果做的關鍵詞較多，pc端與移動端的關鍵詞差別又比較大，那么只能放棄一部分關鍵詞，畢竟一個網站承載地關鍵詞是有限，只能取下折中的辦法。若是用單獨移動站與單獨pc站來做詞，那么可以讓流量最大化，這是響應式網站優化無法取代的優勢。

③個別行業感官體驗不友好

大家都知道響應式網站適配到移動端主要是繼承pc端的樣式與內容，針對一些特別行業，移動端用戶的瀏覽習慣于pc端是相差巨大的，比如電商平臺pc端內容會很豐滿，但是適配到移動端，會導致頁面極長。若是想針對兩個端口根據用戶瀏覽習慣做風格差異化較大的UI界面，這對于響應式網站來說無疑是非常痛苦的，這個時候一般就選擇單獨移動端設計了。

網站關鍵詞：網站建設  網站設計  網站制作  上海網站建設  上海網站設計  上海網站制作  上海網絡公司  網站建設上海  上海做網站  上海建設網站  上海做網站公司  上海建網站公司  上海高端網站建設  上海手機網站建設  怎么建設網站  如何建設網站  營銷網站建設  品牌網站建設  網站建設方案  響應式網站建設  外貿網站建設  公司網站建設  建設網站  網站建設服務  高端網站建設  網站優化服務  上海網站公司  企業網站設計  官網制作  官網建設  官網設計  網站建設公司  網站設計公司  網站制作公司