卡片是承載信息的容器,可以承載不同類型的內(nèi)容,其元素可以包含:圖片、文字、視頻、表單、介紹信息、鏈接等等,是UI界面設(shè)計(jì)中十分常見的元素。下面,成都UI設(shè)計(jì)公司藍(lán)橙視覺就給大家分享一下卡片式UI界面設(shè)計(jì)該怎么做。
一、卡片在界面中的運(yùn)用
卡片簡(jiǎn)單易懂,用戶不需要考慮事情如何發(fā)生,可自然而然的創(chuàng)建舒適的用戶體驗(yàn)。當(dāng)用戶與卡片進(jìn)行交互時(shí),可以分成幾種行為模式??ㄆǔ?huì)做三件事:記錄信息、用信息吸引用戶或提醒用戶信息。根據(jù)卡片的內(nèi)容元素,可將卡片進(jìn)一步細(xì)化為不同類型容器。
1、敘述:卡片以瀑布流形式出現(xiàn),同時(shí)創(chuàng)建事件發(fā)展的時(shí)間軸。
2、發(fā)現(xiàn):卡片能讓相關(guān)內(nèi)容自然的呈現(xiàn)出來。采用網(wǎng)格或瀑布流布局時(shí),使用淡入效果展現(xiàn)卡片,會(huì)讓用戶覺得好玩和身在其中。
3、對(duì)話:由于卡片是相對(duì)獨(dú)立的,它們能夠完美展示正在進(jìn)行的對(duì)話。
4、工作流:卡片可以將待辦事項(xiàng)快速歸類。例如:創(chuàng)建不同的筆記或待辦事項(xiàng)的卡片,當(dāng)用戶刪除時(shí),剩余的卡片按照初始順序重新排列。
二、卡片設(shè)計(jì)注意事項(xiàng)
由于卡片式設(shè)計(jì)能夠承載各種類型的內(nèi)容,需要設(shè)計(jì)師在設(shè)計(jì)卡片時(shí)要有規(guī)范性和創(chuàng)意性,使用合適的排版、尺寸、圓角以及良好的陰影和漸變效果,讓卡片為用戶提供更加舒適的視覺感受。以下是卡片設(shè)計(jì)需要注意的地方:
1、了解陰影及特點(diǎn)
為了讓投影和漸變的元素更加真實(shí),了解陰影特點(diǎn)在卡片設(shè)計(jì)中顯得尤為重要。如果陰影投在整個(gè)卡片的邊和角上,就會(huì)喪失卡片載體的物理交互感。
2、增加排版的對(duì)比性
比如通過字體大小、字體粗細(xì)來吸引用戶的注意力。簡(jiǎn)單的圖文排版其視覺效果是最好的,加之非襯線字體,會(huì)給卡片一些美感上的潤(rùn)色,這樣的卡片會(huì)看上去既有熟悉感又富有創(chuàng)意。諸如陰影之類的元素,在很大程度上能幫助用戶聯(lián)想到實(shí)體卡片。
3、保證UI清晰
在無色系的條件下設(shè)計(jì),必須考慮其可用性和所包含的內(nèi)容,在此基礎(chǔ)上有目的添加顏色。為了讓卡片信息看起來足夠清晰,可以在卡片背景使用深色蒙層,把背景做模糊處理,來突出卡片信息。
以上就是本次為大家分享的UI界面設(shè)計(jì)技巧,卡片式設(shè)計(jì)需要確保不同的卡片,都遵循在一個(gè)統(tǒng)一寬度和樣式的卡片內(nèi)進(jìn)行發(fā)揮和設(shè)計(jì)。既保證了卡片和卡片之間的獨(dú)立性,又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計(jì)。
更多服務(wù):表情包制作|
成都視頻剪輯公司|
成都畫冊(cè)設(shè)計(jì)公司|
成都IP形象設(shè)計(jì)|
插畫設(shè)計(jì)公司
藍(lán)橙視覺·做您專屬的設(shè)計(jì)部門