PPT中嘅卡片式設計其實情很早之前就出現了,它憑借簡單就手又充滿邏輯嘅特性,受歡迎程度也系越來越高。

宜家卡片式設計大多被用于移動端嘅UI設計,我哋浏覽各個設計網站時,80%嘅網站設計都系卡片式風格。卡片式設計長乜嘢樣呢?來睇一組圖:

睇完這4張圖之後,相信大家對卡片式設計有了實行嘅識得。

簡單來說,卡片式設計就系將“卡片”置于一個圖片或形狀背景上,通常會給卡片添加陰影,使頁面有立體效果。

複雜來說,卡片式設計系我哋喺各個網站/APP中常常見到嘅承載住圖片、文字等內容嘅矩形區塊,它系交互聲氣嘅承載體,通常以直角矩形或圓角矩形嘅方式呈現。

▲ UI 交互

▲ 網站排版

生活中處處可見卡片,諸如:銀行卡、身份證、交通卡等等。咁,卡片式設計喺PPT中點應用呢?其實跟網站設計相差無幾。

1

封面

這系上海家化(六神花露水)嘅PPT,封面采用卡片式設計,使得頁面更新穎。

仲有一種設計封面嘅思路,唔識得有冇小夥伴知道。下圖咁樣嘅設計方式,可以讓形狀和背景圖片有連貫性,可以說很新穎了。

2

目錄

用卡片式設計使得觀衆嘅視線“聚焦”,使人一眼就能睇到這份PPT講嘅主要內容。

3

內頁

比如六神嘅産品扯線頁,呢度結合了一些國外優秀嘅設計思路,用“異形”打造頁面。

除開呢啲玩法,我哋還可以點樣玩呢?下便我哋來睇睇高階用法。

以下頁面透過三維旋轉嘅方式使各個卡片之間有層次感,讓頁面具有3D嘅視覺效果,再添加一些樣機作爲背景,直頭棒呆了。

▲ 華爲榮耀産品扯線

可以睇出,卡片式設計喺內頁嘅應用更常見。

4

操作步驟

   步驟1

到素材網站(https://undraw.co/illustrations)下載一個適合主題嘅素材,呢度選擇嘅系一名正喺辦公嘅女性圖片。該網站上嘅素材可自由調節顔色,下載嘅素材爲SVG格式,可直情拖入 Office 365版PPT,省時省力。將素材置于合適嘅位置,如下圖:

   步驟2

給頁面添加參考線,固定圓角矩形框(卡片)嘅位置,可透過調節圓角矩形上嘅黃色小點,調整圓角半徑。覺得圓角唔夠夠味,可以再做細微嘅調整,調整夠味後,去除圓角矩形嘅線條。

圓角矩形參數:高度:16.4 厘米;寬度:31.4 厘米

   步驟3

通常我哋見到嘅卡片都系白色嘅,所以我哋需要給頁面添加一個對比強烈嘅漸變色,呢度選擇較流行嘅:藍紫漸變。

漸變顔色設置好後,將圓角矩形嘅顔色改爲白色,並置于底層。

▲ 效果圖

   步驟4

給矩形添加陰影,這也系讓頁面更加生動嘅方式之一。

圓角矩形陰影參數:

▲ 圓角矩形參數

▲ 效果圖

   步驟5

同樣嘅,爲頁面添加參考線,目嘅系劃分各個文本、圖片嘅區域,同時也爲了讓元素對齊。收屘給頁面添加文字,再加一些圖標也系可以嘅。

▲ 效果圖

咁樣,就攪掂卡片式設計頁面啦,系唔系很簡單~

5

總結

   卡片式設計應用場景

01.  封面  ★★☆☆☆

02.  目錄  ★★☆☆☆

03.  內頁  ★★★★★

總有一些意想唔到嘅設計蓄勢待發,總有一些潮流趨勢我哋需要跟隨。卡片式設計能成爲新嘅設計趨勢也系迎合了社會發展嘅需求。

更多卡片設計:http://www.designnow.com.hk/

 

創作者介紹
創作者 www.renewa 的頭像
www.renewa

www.renewa的部落格

www.renewa 發表在 痞客邦 留言(0) 人氣()