網(wǎng)站設(shè)計(jì)

Website development

卡片式設(shè)計(jì)思考，形式與功能

發(fā)布時(shí)間：2016-07-25 09:40:52

在互聯(lián)網(wǎng)產(chǎn)品中，除了內(nèi)容型外，一些功能型的產(chǎn)品信息內(nèi)容也是相當(dāng)巨大的，特別是管理控制系統(tǒng)，業(yè)務(wù)管理、功能操作、數(shù)據(jù)展示等。在信息量這么大的頁(yè)面中除了重視內(nèi)容質(zhì)量外，形式功能的組織與呈現(xiàn)也是同等重要，對(duì)提高用戶獲取有效信息的效率有著非常大的幫助。

上面所說(shuō)的形式功能的組織與呈現(xiàn)其實(shí)講的是設(shè)計(jì)排版上的問(wèn)題，當(dāng)然對(duì)設(shè)計(jì)師排版功力也有相當(dāng)?shù)囊?。這種排版優(yōu)化的方法有很多種，我這里主要圍繞卡片式設(shè)計(jì)的理論進(jìn)行深入探討，相信大家對(duì)卡片式設(shè)計(jì)已非常熟悉，雖然已流行了好多年，但是設(shè)計(jì)形式并不是隨著使用年齡的增長(zhǎng)而消失，芝加哥學(xué)派路易斯.H.沙利文提出過(guò)：“形式追隨功能”就能說(shuō)明這一點(diǎn)。近筆者在項(xiàng)目改版中也運(yùn)用了相關(guān)卡片方法，發(fā)現(xiàn)效果不錯(cuò)，所以希望借在項(xiàng)目里的思考與嘗試，拋出引子，供大家參考。

卡片式設(shè)計(jì)的定義

在生活中，我們經(jīng)常接觸到各式各樣的類似右圖中的卡片，比如撲克牌、名片、機(jī)場(chǎng)和地鐵的指示牌等等。

卡片式設(shè)計(jì)1.jpg

如上圖，大家可以看出，他們普遍具有以下特點(diǎn)：

一清晰直觀，二簡(jiǎn)單易懂，三信息模塊化。

比如撲克牌我們可以看出雖然只有一個(gè)圖案，一組文字，但很清晰傳達(dá)出這張牌所代表的含義；又比如機(jī)場(chǎng)和地鐵的指示牌，采用了圖標(biāo)、字體元素，很清晰直觀地引導(dǎo)乘客方向，這種由文字或圖案組成的方塊樣式叫做“卡片式設(shè)計(jì)”。這種輕巧、簡(jiǎn)潔的實(shí)物設(shè)計(jì)也被慢慢應(yīng)用到虛擬設(shè)計(jì)當(dāng)中。

如上圖，現(xiàn)在卡片式設(shè)計(jì)的應(yīng)用場(chǎng)景非常廣泛，有代表性的是微軟Win8、Win Phone 7的metro風(fēng)格，他們也是采用了大量的卡片式設(shè)計(jì)，據(jù)說(shuō)這種Metro的設(shè)計(jì)靈感也來(lái)自于機(jī)場(chǎng)、地鐵指示牌。

另外google +、 google play等很多谷歌產(chǎn)品也同樣采用了這種設(shè)計(jì)，如下圖

卡片式設(shè)計(jì)3.jpg

正是因?yàn)榭ㄆ皆O(shè)計(jì)在微軟、谷歌的產(chǎn)品界面的大量運(yùn)用，很多互聯(lián)網(wǎng)企業(yè)也紛紛采用這種設(shè)計(jì)，這是應(yīng)用在PC端的界面，內(nèi)容部分也都采用了卡片式設(shè)計(jì)，如下圖：

卡片式設(shè)計(jì)4.jpg

下圖中的移動(dòng)端的界面，模塊中可點(diǎn)擊部分也采用了卡片風(fēng)格。

卡片式設(shè)計(jì)5.jpg

這是印刷類的雜志界面，如下圖雜志里的部分展示信息，也采用了這種卡片式風(fēng)格。

卡片設(shè)計(jì)6.jpg

1.增強(qiáng)點(diǎn)擊感

這是諾基亞手機(jī)的win phone系統(tǒng)（下圖），系統(tǒng)桌面的所有內(nèi)容都是一個(gè)個(gè)小方塊展示，類似一個(gè)塊狀類的按鈕，讓人聯(lián)想到是可以點(diǎn)擊的操作入口.

卡片設(shè)計(jì)7.jpg

而且每一塊入口都是有區(qū)域大?。ㄏ聢D），從而避免造成誤點(diǎn)擊。

卡片設(shè)計(jì)8.jpg

2.排版整齊

如下圖，將信息、圖像歸類整合到一個(gè)方塊里，清晰直觀又避免頁(yè)面因?yàn)樾畔⒍喽y，卡片的排列方式是按列或者行的方式進(jìn)行對(duì)齊展示，視線沿著橫向或者縱向?yàn)g覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利于柵格化排版。

卡片設(shè)計(jì)9.jpg

比如下圖，頁(yè)面按5個(gè)單元進(jìn)行柵格，利用卡片方塊的展示，很輕松地計(jì)算并調(diào)整它的大小進(jìn)行柵格布局

卡片設(shè)計(jì)10.jpg

3.信息模塊化

如下圖，這是google now的一個(gè)界面，將信息、圖像按維度分類整合到一個(gè)卡片里，能有效地避免信息散亂、同時(shí)避免信息分類不明確像這種模塊化展示有效地減少用戶思考的時(shí)間，能快速找到自己所需的信息。

卡片設(shè)計(jì)11.jpg

4.響應(yīng)式設(shè)計(jì)

卡片方塊的高度和寬度的大小都是可以調(diào)整的，正是因?yàn)檫@種特性很適合用在響應(yīng)式設(shè)計(jì)里，卡片在不同的平臺(tái)展示，由于分辨率不同，卡片能自適應(yīng)地展示，以上是卡片設(shè)計(jì)的優(yōu)點(diǎn)。

卡片設(shè)計(jì)12.jpg

項(xiàng)目實(shí)踐

去年做的項(xiàng)目改版，嘗試新的風(fēng)格探索。如官網(wǎng)和控制臺(tái)改版中，為了能讓信息更好的整合、更好地發(fā)揮不同信息的作用、發(fā)揮不同信息的功能，這次DNSPod官網(wǎng)改版中，banner、快捷入口，業(yè)務(wù)信息以及售賣模塊，也運(yùn)用了卡片式設(shè)計(jì)的方法。

卡片設(shè)計(jì)13.jpg