介面設計中的卡片式是什麼?

來源:酷知科普網 9.5K

隨著手機APP的快速發展,越來越多的風格開始應用在設計中,卡片式就是其中的一種,這種風格能夠讓介面排版更簡潔,看起來更舒服,下面以設計為例項來介紹下卡片式風格。

卡片式風格

(01)要想設計卡片式風格的話,我們需要將背景和卡片的顏色進行區分,選擇“矩形”建立同等大小的背景,一般顏色為#f9f9f9.

介面設計中的卡片式是什麼?

(02)卡片式風格也是有導航欄和狀態列的,找個預設的格式來複製貼上就行了。

介面設計中的卡片式是什麼? 第2張

(03)接著開始繪製卡片,選擇“矩形”工具欄繪製卡片,一排的數量根據個人的想法來設計。

介面設計中的卡片式是什麼? 第3張

(04)一般來說我們的卡片都是白色的,點選矩形,在右側“填充”中更改顏色。

介面設計中的卡片式是什麼? 第4張

(05)做卡片式的設計需要讓形狀看起來更立體點,我們需要新增1px的描邊效果。

介面設計中的卡片式是什麼? 第5張

(06)最重要的是投影效果,新增投影效果之後能讓卡片看起來更立體,點選“陰影”進行調整。

介面設計中的卡片式是什麼? 第6張

(07)卡片式設計的重點就是凸出圖片的效果,我們可以置入兩張圖片來檢視下效果,如下圖,在介面中,如果設計文字的話,就是輔助作用,重點是凸出圖片內容。

介面設計中的卡片式是什麼? 第7張

(08)如下圖我們可以看到,如果有卡片式來排版的話,整個介面看起來就會乾淨很多,但是如果圖片質量不好的話,不建議使用這種風格。

介面設計中的卡片式是什麼? 第8張

(09)當然設計的時候需要靈活變通,如下圖,如果頁面只想擺放一張圖片的話,就需要對卡片的大小進行調整,這就看設計師對格局的把控了,反正一定要選好素材圖。

介面設計中的卡片式是什麼? 第9張
熱門標籤