北京網站建設>前端開發>Css>

Css

【干貨】網頁設計中的卡式設計

來源:未知 作者:admin 時間:2015-11-05 19:28 點擊:

干貨丨讓我們談談網頁設計中的卡式設計

前言

“我要卡式的”,這是上一期客戶在和我聊需求的時候說的第一個需求點。毫無疑問,卡式不論是適應PC還是手機都表現優秀。從在線商城到社交媒體網站,卡式設計成為網頁設計中的一股強大風潮且風頭正勁。其中最重要的原因想必就是它的靈活性。

卡片,可以是任何形狀、顏色和形式。但是總的來說,他們都包含了圖片、圖標和一些基本的文字信息,例如標題、用戶名和位置信息。

“然而,其風靡起來的核心還在于其簡單性。你很少見到復雜的卡片設計,它之所以出現的目的就是為了引導用戶去點擊它”

作為網頁設計師,你該如何使用卡片?當在設計卡片時,你應該注意些什么?下面讓我們來談談。

是什么讓卡式設計勢不可擋**

當提及實用性和美感,卡片式設計可謂當仁不讓的雄踞上風。以下所列的特性也許是它能勝出的原因。

1、響應式

響應式是個老生常談,它成為了一項硬性要求。大部分客戶都為各種層出不窮的移動設備準備好了響應式方案,那么卡式就是如此應運而生。在滿足各種屏幕尺寸需要之上,卡式設計能非常便捷地幫助用戶焦距到特定的內容,也讓設計師在設計時合理又簡潔地進行內容的布局。

干貨丨讓我們談談網頁設計中的卡式設計

2、有序性

混亂不堪的網站令人頭疼,當我們在整理頁面不同種類的元素時,卡式設計就能為這些內容的排版提供一種奇妙的有序性。這對于設計師和用戶來說都是項利好。Kelsey Drake的網站也許能展示出這一特點。

干貨丨讓我們談談網頁設計中的卡式設計

3、易讀性

卡式設計一個非常重要的特性就是它們包含的信息十分簡潔,這讓它們變得有趣且引人入勝,但這也讓網站內容變得比較單一,很快就一覽無余。像NamesForChange.org這樣的網站就把每張卡片都設計得生動且讓人理解起來毫不費力。

干貨丨讓我們談談網頁設計中的卡式設計

4、為社交媒體平臺所青睞

想想一個社交媒體的網站是怎樣建立起來的?它們需要的是清晰易讀和快捷的展示方式。再考慮到卡式設計,你難道沒有發現這之間的聯系?最著名的卡式設計的例子就是Pinterest和Dribble啦!

干貨丨讓我們談談網頁設計中的卡式設計

干貨丨讓我們談談網頁設計中的卡式設計

5、平等性

卡式設計還有一個特性就是平等,這里的平等當然不是絕對的,也就是說,卡式設計里每張卡片,它在整個網頁中的重要性是差不多相同的。這也就讓大家省去了為內容進行等級排序的麻煩。不妨看看AHH的網站,你就能明白。

干貨丨讓我們談談網頁設計中的卡式設計

6、通用性

卡式設計幾乎可以用于任何行業任何用途,它的創作彈性非常大。在設計風格上可以說沒有任何定論,給了設計師非常大的可發揮的創意空間。就拿Futurefabric.co.uk這個網站來說,設計師利用了卡式設計去展示他的不同類型的作品。

干貨丨讓我們談談網頁設計中的卡式設計

卡式設計中我們應該注意什么

來到重點了!作為UI設計師,如果你要運用到卡片式風格的話,有這些地方是你需要注意的(以下是我的經驗之談)

1、留白

留白是老話題,但卡式設計會非常容易忽略這個問題,因為你的注意力焦點都在卡片上面,一不小心你就陷入到了一片混亂里。你必須善用留白(或者也叫負空間)。不僅是卡片外的空間,甚至卡片內部,對于產品展示以外的空間也需要謹慎的處理。看看Danish company網站的產品展示就運用留白,將網站做得非常流暢自然。

干貨丨讓我們談談網頁設計中的卡式設計

2、細節

卡式設計帶來了簡潔,但與此同時也必須強調一點,那就是內容的豐富性。這在一定基礎上必須保證頁面能提供足夠多的頁面內容來引導用戶,否則用戶只會感到茫然。Silk Tricky的網站完美地平衡了簡潔性和內容豐富性,它讓兩個相鄰卡片之間共同展示同一內容,一圖一文,又削減掉頁面因平鋪的畫面而顯出的單調。它還利用了“VIEW”的高亮按鈕來提醒和吸引用戶點擊進入詳細。

干貨丨讓我們談談網頁設計中的卡式設計

3、來點不一樣的

卡式設計有其重復性,但并不意味著它必須得單調沉悶。別怕給你的項目中增加點吸引人的個性化的東西。客戶也許不喜歡而否決掉,但它增加了你為創作所付出的一種可能性。炫目的小動畫、別具一格的配色風格或者是讓人耳目一新的字體,這些都值得去嘗試。就像White Frontier這個網站所做的努力一樣。

干貨丨讓我們談談網頁設計中的卡式設計

4、使用網格

這一條其實不用多說,想要讓網頁看上去更協調,網格可謂功不可沒。

飛屋輕網站卡式設計范例

飛屋從卡式設計開始之初就在很多地方嘗試了這一風格,下面展示一系列輕網站中卡式設計的樣例。

干貨丨讓我們談談網頁設計中的卡式設計

DEMETER

干貨丨讓我們談談網頁設計中的卡式設計

MEROPE

干貨丨讓我們談談網頁設計中的卡式設計

THOTH

干貨丨讓我們談談網頁設計中的卡式設計

ATHENA

干貨丨讓我們談談網頁設計中的卡式設計

SEAWEE

17

別怪我沒提醒,以上網站均為免費開源!網站的申請地址可以點擊這里,或者進入到飛屋的輕網站頻道。

公司業務:北京網站建設刷百度下拉刷百度指數虛擬主機租用

如轉載,請保留本文鏈接地址:http://www.iivnlp.live/Style/Css/1788/

Loading......
工作時間:

AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

聯系方式:

Tel 010-50933590

Hp 18701620736

設計優勢

獨立的設計團隊 帶給您全新的視覺體驗

功能開發

強大的技術實力,完成您想要的任何功能

售后服務

完善的售后服務,解決您在使用過程中遇到的問題

Copyright © 2010 - 2018 北京順晟科技發展有限公司 All Rights Reserved

地址:北京市順義區南法信政府府前街16號 炫立方 | TEL:010-50933590

北京網站建設 | 北京網站設計 | 北京SEO公司

云南11选5开奖号码走势图