莫b

卡片是我們隨處可見的UI元素,原因很簡單,它們占用的空間非常小,并且可以顯示足夠的信息,通常還有1-2種選項設置。

墨刀網站中的卡片設計

為什么使用卡片
1)卡片能夠存在和流行,因為它們本身擁有簡約的設計和良好的可用性。
2)卡片作為切入點,可以進一步展示更詳細的信息。
3)卡片在視覺上也很令人愉悅,因為在大多數卡片上,卡片的圖像為卡片賦予了風格。
4)它們自動適應Web和移動視圖。
5)沒有太多認知負荷,畢竟卡片無處不在,用戶早已經很熟悉。
6)它們保持界面井然有序,且非常簡約。

 

1.了解結構

UI中的“卡片”就相當于物理世界的卡片。它們可充當容器,將內部信息組合起來。

(該原型使用墨刀設計)

 

2.陰影/描邊

陰影/描邊有助于呈現出卡片的形態,至于你是想使用陰影還是描邊,取決于UI的風格。

(該原型使用墨刀設計)

 

3.背景

卡片的好處在于:只要保證視覺上沒有太繁多的對比,卡片的背景你可以隨便“玩”。

(該原型使用墨刀設計)

 

4. 文本大小和重量

當字體較小時,用戶會傾向于“細讀”;而字體較大時,用戶更傾向于“跳讀”。
如果字體粗細使用錯誤,會影響可用性和美觀性。

 

5.對比度

卡片面積比較小,因此對比度在分割信息和體現優先級方面起著重要作用。

 

6. 按鈕

卡片上可以使用普通按鈕、文本按鈕或圖標。在垂直卡片上,按鈕通常放置在底部上;在水平卡片上則是在右側或底側。

 

7.間距和空隙

在可聚焦元素之間添加適當的空隙,也留足夠的間距來對內部信息進行分組。

 

8.對焦和懸停

要使卡片在鼠標懸浮時更明顯,通常使用較暗的陰影上升一點高度


本文由墨刀編譯自Dorjan Vulaj 的8 rules for a perfect card design,轉載請聯系。

封面Photo by?Aditya Chinchure?on?Unsplash

墨刀作為一款在線原型設計與協同工具,已經幫助眾多產品經理和設計師們輕松做出交互原型,展現和驗證設計想法,還支持多人協作編輯,分享和評論。

 

原文地址:墨刀(公眾號)
作者:Dorjan Vulaj

轉載請注明:學UI網 » 如何做出好的“卡片”設計?8種方法大分享

登錄收藏
 
你可能喜歡的:
如何快速又精準的確定產品風格?(上)如何快速又精準的確定產品風格?(上)
深耕“用戶界面”(上篇)- 界面表現層自查深耕“用戶界面”(上篇)- 界面表現層自查
PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔
行為召喚:終極生存指南行為召喚:終極生存指南
觸摸鍵盤的設計解析 | 智能化工具產品觸摸鍵盤的設計解析 | 智能化工具產品
你對信息架構圖了解多少?你對信息架構圖了解多少?
十萬個為什么設計系列02-內容個性化十萬個為什么設計系列02-內容個性化
騰訊動漫8.0——用戶為本騰訊動漫8.0——用戶為本
蘋果絕對不會告訴你表單設計原則:我研究3年后才發現蘋果絕對不會告訴你表單設計原則:我研究3年后才發現
從4款主流產品中掌握登錄注冊流程從4款主流產品中掌握登錄注冊流程
?
5星腾龙时时彩做号软件 竟彩足球比分直播官网 天天乐游戏中心下载 山西快乐十分直播视频 腾讯游戏下载 重庆时时走势图软件 手机怎么玩快速时时彩 快速赛车e赢彩 南通棋牌游戏中心下载安装 体球网即时指数 梦幻单开HS怎么赚钱 陕西十一选五前三走势图 爱玩斗地主刷金币软件 001足球比分比什么 足球比分独家 刮刮乐哪个中奖几率高 开店卖建材五金赚钱吗