UI設(shè)計中卡片化設(shè)計的運(yùn)用方法

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

　　上面所說的形式功能的組織與呈現(xiàn)其實講的是設(shè)計排版上的問題，當(dāng)然對設(shè)計師排版功力也有相當(dāng)?shù)囊?。這種排版優(yōu)化的方法有很多種，我這里主要圍繞卡片式設(shè)計的理論進(jìn)行深入探討，相信大家對卡片式設(shè)計已非常熟悉，雖然已流行了好多年，但是設(shè)計形式并不是隨著使用年齡的增長而消失，今天AAA教育郭老師就針對UI設(shè)計中卡片化設(shè)計的運(yùn)用方法進(jìn)行簡單的說明。
 

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

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

 

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

　　一清晰直觀，二簡單易懂，三信息模塊化。
 

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

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

 

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

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

 

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

 

　　卡片式設(shè)計的優(yōu)點(diǎn)
 

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

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

 

　　2. 排版整齊
 

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

　　3. 信息模塊化
 

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

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

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

 

　　總結(jié)
 

　　在信息量大的頁面中除了重視內(nèi)容質(zhì)量外，形式功能的組織與呈現(xiàn)也是同等重要，對提高用戶獲取有效信息的效率有著非常大的幫助，這時應(yīng)用卡片式的設(shè)計方式是不錯的選擇。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。