卡片使用_APP必备的设计元素!卡片
文/閆文喆 卡片是承載信息的容器,卡片可以承載不同類型的內容,其元素可以包含:圖片、文字、視頻、按鈕、優惠券、音樂、付款信息、注冊表單、社交媒體流或分享、獎勵信息、鏈接以及以上元素的任意組合。
卡片也就是承載一些圖片和文字信息的容器,作為跳轉下級頁面的入口,不同的卡片都遵循在一個統一寬度和樣式的卡片內,進行發揮和設計。既保證了卡片和卡片之間的獨立性,又保證了服務和服務的統一化設計。用卡片當作不同內容的載體,會使得層次簡單易懂,用戶易于滑動瀏覽。
卡片簡單易懂,用戶不需要考慮事情如何發生,可自然而然的創建舒適的用戶體驗。當用戶與卡片進行交互時,可以分成幾種行為模式??ㄆǔ鋈?#xff1a;記錄信息、用信息吸引用戶或提醒用戶信息。根據卡片的內容元素,將卡片進一步細化為不同類型容器。
①敘述??ㄆ云俨剂餍问匠霈F,同時創建事件發展的時間軸。
②發現??ㄆ茏屜嚓P內容自然的呈現出來。采用網格或瀑布流布局時,使用淡入效果展現卡片,會讓用戶覺得好玩和身在其中。
③對話。由于卡片是相對獨立的,它們能夠完美展示正在進行的對話。
④工作流??ㄆ梢詫⒋k事項快速歸類。例如:創建不同的筆記或待辦事項的卡片,當用戶刪除時,剩余的卡片按照初始順序重新排列。
在手機APP中,用戶可以清晰地感知到距離接近的信息在一張卡片之上,卡片通常會有一個大的底色來做背景,以使卡片的視覺層次效果更加明顯。結合卡片的宮格式布局可以將頁面的視覺層級變得更加清晰,豐富界面設計。
由于卡片式設計能夠承載各種類型的內容,需要設計師在設計卡片時要有規范性和創意性,使用合適的排版、尺寸、圓角以及良好的陰影和漸變效果,讓卡片為用戶提供更加舒適的視覺感受。以下是卡片設計需要注意的地方:
①了解陰影及特點。為了讓投影和漸變的元素更加真實,了解陰影特點在卡片設計中顯得尤為重要。如果陰影投在整個卡片的邊和角上,就會喪失卡片載體的物理交互感。
②留白很重要??ㄆ舭椎闹匾圆谎远?#xff0c;先給卡片一些空間恰當地添加內容。如果卡片信息內容過于繁瑣,會使用戶產生疲勞感和厭煩感,而留白的使用可以增加卡片內容的呼吸感,有效減少使用過程中的壓力,幫助用戶找到重點信息。卡片信息越簡約,設計目標和針對性就越明顯。
③增加圖文排版的對比性。比如通過字體大小、字體粗細來吸引用戶的注意力。簡單的圖文排版其視覺效果是最好的,加之非襯線字體,會給卡片一些美感上的潤色,這樣的卡片會看上去既有熟悉感又富有創意。諸如陰影之類的元素,在很大程度上能幫助用戶聯想到實體卡片。
④在無色系中保證UI清晰。在無色系的條件下設計,必須考慮其可用性和所包含的內容,在此基礎上有目的添加顏色。為了讓卡片信息看起來足夠清晰,可以在卡片背景使用深色蒙層,把背景做模糊處理,來突出卡片信息。
⑤卡片圓角的情感性。在同一個APP中,所有卡片一般會使用相同的圓角大小。圓角越大,產品越圓潤有趣,更具有親和力,但缺乏穩重感; 圓角越小,則越嚴謹安全,當圓角為0時,不管是從視覺還是感覺上,都會顯得過于鋒利尖銳,產生距離感,更加具有權威性。在設計中我們需要根據產品自身的特點來選擇卡片的圓角,不能隨意濫用不同的圓角大小。
卡片式設計幾乎成為當前界面設計的主流模式,相比傳統單一的頁面設計,卡片設計提供更多個性化的用戶體驗,使界面設計清晰平衡、富有美感、簡約時尚而又具備良好可用性。而卡片作為容器,能夠適應不同屏幕大小而不破壞信息的展示效果。
總結
以上是生活随笔為你收集整理的卡片使用_APP必备的设计元素!卡片的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《测谎人》这部片子可以吗
- 下一篇: php 长连接心跳_支持gRPC长链接,