談?wù)劸W(wǎng)頁設(shè)計中的卡式設(shè)計
2016-07-18 16:02:27
作為網(wǎng)頁設(shè)計師,你該如何使用卡片?當在設(shè)計卡片時,你應(yīng)該注意些什么?下面讓我們來談?wù)??!?/p>
毫無疑問,卡式不論是適應(yīng)PC還是手機都表現(xiàn)優(yōu)秀。從在線商城到社交媒體網(wǎng)站,卡式設(shè)計成為網(wǎng)頁設(shè)計中的一股強大風潮且風頭正勁。其中最重要的原因想必就是它的靈活性??ㄆ梢允侨魏涡螤?、顏色和形式。但是總的來說,他們都包含了圖片、圖標和一些基本的文字信息,例如標題、用戶名和位置信息。
“然而,其風靡起來的核心還在于其簡單性。你很少見到復雜的卡片設(shè)計,它之所以出現(xiàn)的目的就是為了引導用戶去點擊它。當提及實用性和美感,卡片式設(shè)計可謂當仁不讓的雄踞上風。以下所列的特性也許是它能勝出的原因。
1、網(wǎng)頁設(shè)計之響應(yīng)式
響應(yīng)式是個老生常談,它成為了一項硬性要求。大部分客戶都為各種層出不窮的移動設(shè)備準備好了響應(yīng)式方案,那么卡式就是如此應(yīng)運而生。在滿足各種屏幕尺寸需要之上,卡式設(shè)計能非常便捷地幫助用戶焦距到特定的內(nèi)容,也讓設(shè)計師在設(shè)計時合理又簡潔地進行內(nèi)容的布局。
2、網(wǎng)頁設(shè)計之有序性
混亂不堪的網(wǎng)站令人頭疼,當我們在整理頁面不同種類的元素時,卡式設(shè)計就能為這些內(nèi)容的排版提供一種奇妙的有序性。這對于設(shè)計師和用戶來說都是項利好。Kelsey Drake的網(wǎng)站也許能展示出這一特點。
3、網(wǎng)頁設(shè)計之易讀性
卡式設(shè)計一個非常重要的特性就是它們包含的信息十分簡潔,這讓它們變得有趣且引人入勝,但這也讓網(wǎng)站內(nèi)容變得比較單一,很快就一覽無余。像NamesForChange.org這樣的網(wǎng)站就把每張卡片都設(shè)計得生動且讓人理解起來毫不費力。
4、為社交媒體平臺所青睞
想想一個社交媒體的網(wǎng)站是怎樣建立起來的?它們需要的是清晰易讀和快捷的展示方式。再考慮到卡式設(shè)計,你難道沒有發(fā)現(xiàn)這之間的聯(lián)系?最著名的卡式設(shè)計的例子就是Pinterest和Dribble啦!
5、網(wǎng)頁設(shè)計之平等性
卡式設(shè)計還有一個特性就是平等,這里的平等當然不是絕對的,也就是說,卡式設(shè)計里每張卡片,它在整個網(wǎng)頁中的重要性是差不多相同的。這也就讓大家省去了為內(nèi)容進行等級排序的麻煩。不妨看看AHH的網(wǎng)站,你就能明白。
6、網(wǎng)頁設(shè)計之通用性
卡式設(shè)計幾乎可以用于任何行業(yè)任何用途,它的創(chuàng)作彈性非常大。在設(shè)計風格上可以說沒有任何定論,給了設(shè)計師非常大的可發(fā)揮的創(chuàng)意空間。就拿Futurefabric.co.uk這個網(wǎng)站來說,設(shè)計師利用了卡式設(shè)計去展示他的不同類型的作品。
卡式設(shè)計中我們應(yīng)該注意什么
來到重點了!作為UI設(shè)計師,如果你要運用到卡片式風格的話,有這些地方是你需要注意的(以下是我的經(jīng)驗之談)
1、留白
留白是老話題,但卡式設(shè)計會非常容易忽略這個問題,因為你的注意力焦點都在卡片上面,一不小心你就陷入到了一片混亂里。你必須善用留白(或者也叫負空間)。不僅是卡片外的空間,甚至卡片內(nèi)部,對于產(chǎn)品展示以外的空間也需要謹慎的處理??纯碊anish company網(wǎng)站的產(chǎn)品展示就運用留白,將網(wǎng)站做得非常流暢自然?!?/p>
2、細節(jié)
卡式設(shè)計帶來了簡潔,但與此同時也必須強調(diào)一點,那就是內(nèi)容的豐富性。這在一定基礎(chǔ)上必須保證頁面能提供足夠多的頁面內(nèi)容來引導用戶,否則用戶只會感到茫然。Silk Tricky的網(wǎng)站完美地平衡了簡潔性和內(nèi)容豐富性,它讓兩個相鄰卡片之間共同展示同一內(nèi)容,一圖一文,又削減掉頁面因平鋪的畫面而顯出的單調(diào)。它還利用了“VIEW”的高亮按鈕來提醒和吸引用戶點擊進入詳細?! ?/p>
3、來點不一樣的
卡式設(shè)計有其重復性,但并不意味著它必須得單調(diào)沉悶。別怕給你的項目中增加點吸引人的個性化的東西??蛻粢苍S不喜歡而否決掉,但它增加了你為創(chuàng)作所付出的一種可能性。炫目的小動畫、別具一格的配色風格或者是讓人耳目一新的字體,這些都值得去嘗試。就像White Frontier這個網(wǎng)站所做的努力一樣。
4、網(wǎng)頁設(shè)計之使用網(wǎng)格
這一條其實不用多說,想要讓網(wǎng)頁看上去更協(xié)調(diào),網(wǎng)格可謂功不可沒。