點點信封
- 發布時間: 2016-08-05 10:13:44
- 浏覽次數: 1742
在互聯網産品中，除了內(nèi)容型外，一(yī)些功能型的(de)産品信息內(nèi)容也是相當巨大的(de)，特别是管理(lǐ)控制系統，業務管理(lǐ)、功能操作、數據展示等。在信息量這麽大的(de)頁面中除了重視(shì)內(nèi)容質量外，形式功能的(de)組織與呈現也是同等重要，對提高(gāo)用戶獲取有效信息的(de)效率有着非常大的(de)幫助。
上面所說的(de)形式功能的(de)組織與呈現其實講的(de)是設計排版上的(de)問題，當然對設計師排版功力也有相當的(de)要求。這種排版優化的(de)方法有很多種，我這裏主要圍繞卡片式設計的(de)理(lǐ)論進行深入探讨，相信大家對卡片式設計已非常熟悉，雖然已流行了好多年(nián)，但是設計形式并不是随着使用年(nián)齡的(de)增長(cháng)而消失，芝加哥(gē)學(xué)派路易斯.H.沙利文提出過："形式追随功能"就能說明這一(yī)點。最近筆(bǐ)者在項目改版中也運用了相關卡片方法，發現效果不錯，所以希望借在項目裏的(de)思考與嘗試，抛出引子(zǐ)，供大家參考。
卡片式設計的(de)定義
在生活中，我們經常接觸到各式各樣的(de)類似右圖中的(de)卡片，比如(rú)撲克牌、名片、機場和(hé)地(dì)鐵的(de)指示牌等等。
如(rú)上圖，大家可(kě)以看出，他們普遍具有以下特點：
一(yī)清晰直觀，二簡單易懂，三信息模塊化。
比如(rú)撲克牌我們可(kě)以看出雖然隻有一(yī)個圖案，一(yī)組文字，但很清晰傳達出這張牌所代表的(de)含義；又比如(rú)機場和(hé)地(dì)鐵的(de)指示牌，采用了圖标、字體元素，很清晰直觀地(dì)引導乘客方向，這種由文字或圖案組成的(de)方塊樣式叫做(zuò)"卡片式設計"。這種輕巧、簡潔的(de)實物設計也被慢慢應用到虛拟設計當中。
如(rú)上圖，現在卡片式設計的(de)應用場景非常廣泛，最有代表性的(de)是微軟Win8、Win Phone 7的(de)metro風格，他們也是采用了大量的(de)卡片式設計，據說這種Metro的(de)設計靈感也來自(zì)于機場、地(dì)鐵指示牌。
另外google +、 google play等很多谷歌産品也同樣采用了這種設計，如(rú)下圖
正是因為(wèi)卡片式設計在微軟、谷歌的(de)産品界面的(de)大量運用，很多互聯網企業也紛紛采用這種設計，這是應用在PC端的(de)界面，內(nèi)容部分也都采用了卡片式設計，如(rú)下圖：
下圖中的(de)移動端的(de)界面，模塊中可(kě)點擊部分也采用了卡片風格。
這是印刷類的(de)雜志界面，如(rú)下圖雜志裏的(de)部分展示信息，也采用了這種卡片式風格。
卡片式設計的(de)優點
1.增強點擊感
這是諾基亞手機的(de)win phone系統（下圖），系統桌面的(de)所有內(nèi)容都是一(yī)個個小方塊展示，類似一(yī)個塊狀類的(de)按鈕，讓人聯想到是可(kě)以點擊的(de)操作入口，
2.排版整齊
如(rú)下圖，将信息、圖像歸類整合到一(yī)個方塊裏，清晰直觀又避免頁面因為(wèi)信息多而散亂，卡片的(de)排列方式是按列或者行的(de)方式進行對齊展示，視(shì)線沿着橫向或者縱向浏覽能快速找到想要的(de)信息，此外，這種固定大小的(de)卡片方塊也有利于栅格化排版。
比如(rú)下圖，頁面按5個單元進行栅格，利用卡片方塊的(de)展示，很輕松地(dì)計算并調整它的(de)大小進行栅格布局
3.信息模塊化
如(rú)下圖，這是google now的(de)一(yī)個界面，将信息、圖像按維度分類整合到一(yī)個卡片裏，能有效地(dì)避免信息散亂、同時避免信息分類不明确像這種模塊化展示有效地(dì)減少用戶思考的(de)時間，能快速找到自(zì)己所需的(de)信息。
4.響應式設計
卡片方塊的(de)高(gāo)度和(hé)寬度的(de)大小都是可(kě)以調整的(de)，正是因為(wèi)這種特性很适合用在響應式設計裏，卡片在不同的(de)平台展示，由于分辨率不同，卡片能自(zì)适應地(dì)展示，以上是卡片設計的(de)優點。
項目實踐
去(qù)年(nián)做(zuò)了DNSPod的(de)項目改版，嘗試新的(de)風格探索。如(rú)官網和(hé)控制台改版中，為(wèi)了能讓信息更好的(de)整合、更好地(dì)發揮不同信息的(de)作用、發揮不同信息的(de)功能，這次DNSPod官網改版中，banner、快捷入口，業務信息以及售賣模塊，也運用了卡片式設計的(de)方法。
DNSPod管理(lǐ)控制台概覽頁
總結
在信息量大的(de)頁面中除了重視(shì)內(nèi)容質量外，形式功能的(de)組織與呈現也是同等重要，對提高(gāo)用戶獲取有效信息的(de)效率有着非常大的(de)幫助，這時應用卡片式的(de)設計方式是不錯的(de)選擇。
