基於卡片設計的UI界面優化

在現實生活在，視覺信息老是很吸引人的眼球，好的頁面設計老是可以脫穎而出，而卡片設計的應用就是一種趨勢。

有數據顯示移動端使用率遠遠高於桌面端，網頁設計都能很好的適應小屏幕。這個結論就是：簡單的界面風格，好比：扁平化設計，極簡設計，尤爲是卡片設計比往年都要流行。

卡片式網頁設計

判斷一個卡片設計的好壞，重點看下面兩個：

• 好的卡片設計不會使用太多的加載時間，

• 同時它也能在不一樣的屏幕上切換自如。

小的模塊對於用戶來講更能吸引注意力（尤爲在移動端），它在Pinterest上培養你們的習慣，而後在Facebook和Twitter上面推廣，卡片設計能應用於各個領域的網站設計。

更多免費教程資源，歡迎添加小編的私人QQ（1058484219）索取~~

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

什麼是抽屜式設計？

爲了瞭解抽屜式設計，你首先得先了解卡片是什麼。

每個卡片擁有屬於本身的信息。一張卡片能包含全部信息 — 視覺、文本、連接等等— 可是全部這些內容都是一張卡片裏面的內容。

這種獨立填滿整個屏幕抽屜式展示信息的方式 被Guardian 叫作「抽屜模式」。它讓用戶更加直接清晰的看到整個界面，也有利於用戶快速的尋找他們須要的信息。（最重要的是，這種方式可以有利於咱們本身控制，下面的文章我會解釋爲何。）

讓人以爲頗有吸引力的是：它們使用的卡片界面是相互疊加的。

疊加的卡片界面

「網頁的將來這種設計可以在移動端隨意很好的轉換。」，卡片設計有以下的優勢：

• Trello 能讓用戶建立他們本身想要的任何卡片列表。全部人都能建立「to-do」卡片 ，同時可以按照本身的需求進行分類。

• Trello不只讓卡片具備靈活性，並且還能被用戶隨意擺放。Trello的成功是由於相較於傳統列表式佈局，它讓用戶感受很簡單。

• UI卡片在移動端和響應式設計中的應用 正如上文提到的，卡片爲響應式框架提供了出色的兼容性

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​The Verge 網頁端

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

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

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​The Verge移動端

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

你能夠看到這個優點在UXPin的e-book裏面被利用。注意他們從移動端到全屏的界面是很是清晰的。

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​UXPin移動端界面

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​UXPin全屏的界面

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

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

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

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​Material Design

卡片設計的將來

卡片設計模式不斷的重塑自身以適應新的挑戰，而響應式和移動端也許會受最大的影響（沒錯，說的就是Android）

1.技術

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

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​Use Your Interface

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

2.深度的交互

在不久的未來，卡片也許可以變得更加的有創意。就像咱們看見 Material Design，它很是依賴我的的交互，隨着自動排序和實時更新等功能的更新（好比天氣預報）。

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​Material Design

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

3.尺寸

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

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

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​Arkitekter

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

4.可穿戴的

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

    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​    ​   谷歌眼鏡

儘管有不少人認爲谷歌眼鏡會失敗，可是也有一部分人認爲它有市場。無論怎樣，穿戴設備的UI設計必需要很好的利用空間來設計，而卡片設計是它最實用的選擇。

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

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