卡片式設計的由來
卡片設計來源于早已存在于人類生活的各種現實物品。
舉個例子,顯示器、手機、名片,一封信、等等,都是獨立承載信息的一個個卡片。人們不用把電影院搬走就可以通過電視觀看到不同的內容載體,這時候電視充當的是內容載體的入口。而名片盒書信這種卡片感就更強了,你可以把一封信折疊起來,方便攜帶,等到需要的時候再伸展開來,進行詳細閱讀。正是人類生活早已充斥著“卡片設計”,所以當我們手中的設備界面有了“卡片式設計”的時候,人們反而覺得使用起來很方便和有熟悉感。
這些實物的卡片有以下這些好處:
1、體量-輕便易攜(手中的信件、名片、甚至電視機)
2、信息-精簡易懂(例如名片,折疊后的信件)
3、包裝-分類獨立
這些好處在互聯網信息數據爆發的年代,特別需要得到應用。說到這里,首先先科普一下。
最早應用卡片式設計并不是google 的material design 也不是蘋果的IOS design,而是palm webOS。webOS中,傳統意義上的程序概念被弱化,取而代之的是卡片系統。所有的任務均以卡片的形式出現。任何時候點擊手勢區,都會進入卡片視圖。卡片視圖中展現出正在運行的任務,這些任務以多窗口的形式呈現。你可以看到正在運行的全部任務,可以通過滑動進行切換,點擊后進入任務,這樣一種操作方式,是極其美妙的。更為重要的是webOS 中的多任務的流暢度可以得到很好的保證,可以說webOS的多任務是世界上最好的移動系統多任務平臺。
卡片式設計的好處
1、聚焦
每一張卡片都是一個獨立內容單元,在瀏覽和理解上,是獨立區分于其他卡片模塊,所以可以更聚焦地瀏覽當前卡片。
2、多態操作
卡片是可操作性十分強的設計模式,可以橫向滑動,上下伸展,點擊操作等。
3、自由組合
卡片設計的自由組合特性對設計師或者工程師來說都是一種便利和愉悅的體驗摒棄了以往古板而單調的網格單元格式的排版和代碼。不用再為圖片比例不對,需要裁剪而頭痛,記得“瀑布流”提出的時候,風頭可是極盛的。而對用戶,則同樣是視覺上的輕松和自由。
4、視覺上的舒適
卡片設計往往帶有足夠的空間留白、足夠的圖片和通過少量的陰影造就合理的層次,看上去會十分的有質感和舒適感(這里就不貼圖了,可以自行體會一下)
卡片式設計不適用范圍
雖然綜上所述,卡片式設計有這么多的好處。但是因為卡片式設計自身的特性所限,同樣也有不適用的地方。
1、不利于沉浸式閱讀
卡片設計其實就是一個個的框用來界定內容元。當用戶進行沉浸式閱讀時候,這樣的界定反而會令用戶產生脫離。打斷了原有的閱讀或操作。
所以當進行長文本的陳述或者強關聯閱讀類內容(非操作類)進行排列時,盡量避免使用卡片形式設計。(試想想,當你在念一封信的時候,把里面的每一段內容都給你重新用另一封信包裝起來......)
2、小空間條目
當內容過多,可容納空間比較小的時候,不適合用卡片設計。因為卡片劃分的邊界會消耗一定的空間,內容元的空間如果跟劃分空間比例相近,
會扼殺掉卡片設計的優勢,反而增加負擔。
3、內容容易劃分并被感知
當內容空間大量重復容易區分和感知的內容時,也不適用于卡片式的設計。例如相冊:
卡片每一次的卡片邊界的劃分也會消耗一定的用戶的心理認知,在強調極簡設計,碎片化時間的當今,盡量不消耗多余的哪怕是一丁點的認知。
本文配圖出自:http://www.lxweimin.com/p/20ba212a5f0c
同時有對于卡片式有興趣可以讀以下文章: