2016年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì):卡片式設(shè)計(jì)如何在占盡優(yōu)勢(shì)?
在現(xiàn)實(shí)生活在,視覺(jué)信息總是很吸引人的眼球,卡片設(shè)計(jì)的應(yīng)用不僅僅只是一種趨勢(shì)。
有數(shù)據(jù)顯示2014年 移動(dòng)端使用率遠(yuǎn)遠(yuǎn)高于桌面端,網(wǎng)頁(yè)設(shè)計(jì)都能很好的適應(yīng)小屏幕。這個(gè)結(jié)論就是:簡(jiǎn)單的界面風(fēng)格,比如:扁平化設(shè)計(jì),極簡(jiǎn)設(shè)計(jì),尤其是卡片設(shè)計(jì)比往年都要流行。
圖片來(lái)源:Formerly Yes
好的卡片設(shè)計(jì)不會(huì)使用太多的加載時(shí)間,同時(shí)它也能在不同的屏幕上切換自如。小的模塊對(duì)于用戶來(lái)說(shuō)更能吸引注意力(尤其在移動(dòng)端),它在Pinterest上培養(yǎng)大家的習(xí)慣,然后在Facebook和Twitter上面推廣,卡片設(shè)計(jì)能應(yīng)用于各個(gè)領(lǐng)域的網(wǎng)站設(shè)計(jì)。
在這篇文章中,我們將會(huì)探討卡片設(shè)計(jì)的崛起:為什么它們有用,它們?nèi)绾芜m應(yīng)于響應(yīng)設(shè)計(jì)和material design,在未來(lái)又會(huì)發(fā)生什么?
什么是抽屜式設(shè)計(jì)?
為了了解抽屜式設(shè)計(jì),你首先得先了解卡片是什么。
每一個(gè)卡片擁有屬于自己的信息。一張卡片能包含所有信息 — 視覺(jué)、文本、鏈接等等— 但是所有這些內(nèi)容都是一張卡片里面的內(nèi)容。
這種獨(dú)立填滿整個(gè)屏幕抽屜式展現(xiàn)信息的方式 被Guardian 叫做“抽屜模式”。它讓用戶更加直接清晰的看到整個(gè)界面,也有利于用戶快速的尋找他們需要的信息。(最重要的是,這種方式能夠有利于我們自己控制,下面的文章我會(huì)解釋為什么。)
讓人覺(jué)得很有吸引力的是:它們使用的卡片界面是相互疊加的。
照片來(lái)源于:Trello
Trello 能讓用戶創(chuàng)建他們自己想要的任何卡片列表。所有人都能創(chuàng)建“to-do”卡片 ,同時(shí)能夠按照自己的需求進(jìn)行分類。
Trello不僅讓卡片具有靈活性,而且還能被用戶隨意擺放。Trello的成功是因?yàn)橄噍^于傳統(tǒng)列表式布局,它讓用戶感覺(jué)很簡(jiǎn)單。
UI卡片在移動(dòng)端和響應(yīng)式設(shè)計(jì)中的應(yīng)用
正如上文提到的,卡片為響應(yīng)式框架提供了出色的兼容性,因?yàn)?span style="line-height: 1.5;">一些像Des Traynor把他叫做“網(wǎng)頁(yè)的未來(lái)
這種設(shè)計(jì)能夠在移動(dòng)端隨意很好的轉(zhuǎn)換。”
來(lái)源于:The Verge
首先,它能夠自己擴(kuò)展或者收縮去適應(yīng)任何屏幕的尺寸。設(shè)計(jì)師可以很靈活的控制卡片的比例(幾組卡片能夠更好的適應(yīng)彼此)。例如,你可以設(shè)計(jì)固定的寬度和一致的間距來(lái)適應(yīng)可變動(dòng)的高度。
比較上面The Verge的網(wǎng)頁(yè)截圖和下面的移動(dòng)端截圖:
來(lái)源于:The Verge (移動(dòng)端)
注意他們兩個(gè)的文本信息、圖像和顏色的風(fēng)格都是一致的??ㄆO(shè)計(jì)讓用戶在不同的設(shè)備上有一致性的體驗(yàn)。
你可以看到這個(gè)優(yōu)勢(shì)在UXPin的e-book里面被利用。注意他們從移動(dòng)端到全屏的界面是非常清晰的。
UXPin移動(dòng)端界面: