如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計 - 網頁設計, 網站設計, 網頁方案, Website Design, 網絡推廣

如何設計出精緻的UI設計卡片?如今卡片在UI設計中已廣泛存在,事實上Google、Twitter和Facebook這些大公司同樣非常推崇產品採用這種UI設計手法

UI設計基礎知識:什麼是卡片式設計?

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計基礎知識

卡片在UI設計中,相當於交互訊息的承載體。與日常使用的信用卡或者名片相似,UI設計的卡片也是以一個「濃縮」的形式,為用戶提供相關且快速的訊息。

除此之外,UI設計的卡片還具有極高的交互性,他們不僅能為用戶提供準確的訊息,還用另一種婉轉的方式要求用戶與產品進行一次友好的互動。

UI設計基礎知識:使用卡片式設計有什麼好處?

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計基礎知識

總體來說,卡片式設計之所以能被各大品牌廣泛應用,其原因主要有以下五點:

☑ 卡片能針對令人滿意的、特別的功能,以不同方式呈現。

☑ 相對於過度且毫無理由的文本,卡片更能抓住用戶的眼球。

☑ 隨着使用智慧型手機的用戶愈來愈多,而搜尋器也愈來愈重視智慧型手機的SEO優化,使用卡片設計能很好地使用響應式網頁設計。

☑ 由於卡片的空間有限,因此卡片內的內容大多會非常簡短且準確,如果用戶想知道更多會點擊它進入到詳細頁面,這有利於延長用戶在網站的停留時間,間接提高SEO效果

☑ 卡片設計能讓用戶快速且輕鬆地通過社群媒體平台等分享內容。

UI設計技巧:如何設計出精緻的UI設計卡片?

既然卡片對UI設計有那麼多好處,接下來就說說卡片設計的技巧。

很多品牌看到「卡片」二字,就自動將現實中的卡片代入到UI設計中的卡片。事實上,卡片設計是否好看,關鍵在於「細節」上的處理。那麼如何設計出精緻的卡片,來提高介面的精緻度和質感呢?

UI設計技巧一:卡片圓角的畫法

卡片上的圓角設計看起來很簡單,但是稍有不慎很容易會讓整個介面看起來非常不和諧。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

單純的卡片佈局,我們可以根據產品設計中所需的圓角數量來定義幾種圓角大小。建議定義3~5個就夠了,不宜過多,可以用在小卡片、按鈕和其他需要圓角的控件上。

但如果是卡片嵌套卡片呢?兩個卡片的圓角該怎樣設計?

要處理這種情況,最好的方法就是內卡片的圓角大小是外卡片的1/2,比如內卡片的圓角大小為16px,那麼外卡片的圓角就是32px。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

如上圖,左側外卡片和內卡片的圓角大小一致,視覺效果會總覺得差點意思;右側內卡片是外卡片的一般,這樣看起來就會舒服很多。

UI設計技巧二:卡片描邊

在一些場景下,如果介面的底色是白色,同時需要添加白色的卡片時,單純添加投影來區分層級,會顯得有些模糊;但如果添加投影的同時增加描邊效果,這樣看起來層級會顯得清晰些。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

如上圖,同樣是在白色背景的介面中,右側的卡片邊緣添加了0.5px且色值為#E9E9E的分割線,就會比左側有更清晰的輪廓,層級也會更清楚些。

UI設計技巧三:卡片組合版式

卡片組合版式,是指卡片與卡片之間的組合排版。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

上圖是比較常見的兩種卡片組合版式。但在前期概念探索階段,其實也可以挑戰其他思路,打破常規的佈局模式。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

例如嘗試多卡片組合版式,讓畫面更有張力和新鮮感。

UI設計技巧四:異形卡片

雖然很少品牌會考慮使用異形卡片,畢竟會存在一定的風險。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

但基於異形卡片的特點,如不規則中有統一性的規律、形式感強、增加趣味性,以及濃濃的雜誌味道,設計得當能讓整個介面效果非常有驚喜。

如何設計出精緻的UI設計卡片?為什麼各大品牌都熱衷卡片設計
UI設計技巧

品牌若想打破現有的UI設計模式,不妨以異形卡片作為一個切入點,透過異形卡片和品牌符號銜接起來,做創新的拓展。

【最後】

憑著高靈活性和高適配性的特點,卡片的確受到不少品牌的青睞。因此,既然這個UI設計手法如此重要,我們更應該去細緻研究,以便做出更合理、更有創意的卡片佈局,給用戶帶來流暢且有趣的操作體驗!


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk