首页 > 建站资源 > 网站优化 > 探探和Linkedin都用的卡片设计 怎样才有好的体验?

探探和Linkedin都用的卡片设计 怎样才有好的体验?

时间:2017-03-14    来源:爱范儿

 君导读:最近,越来越多 app 开始使用「卡片式设计」,例如我们所熟知的高端职场社区 Linkedin 领英和 Facebook。

到底这种卡片式设计怎么用,才能给我们良好的体验?AppSo(微信号 appsolution)为你带来了 5 个实践原则和案例。

卡片是简洁小巧的信息盒子。在界面设计中,要平衡界面的审美和可用性,卡片基本是一个通用选择。卡片这一设计概念最先被 Pinterest 和 Facebook 使用,而如今卡片的使用已经渗入了各行各业。

Pinterest 引入卡片这一概念,基本可以将某主题相关的所有信息纳入一个信息盒子。

如果运用恰当的话,卡片可以提升 app 的用户体验。这篇文章介绍了 5 种卡片运用的最佳实践,并提供相关的实用案例。

1. 遵循「一卡一概念」原则

卡片的所有内容只能和一个主题相关。一个卡片可以包含多种元素,但应该主要体现同类信息或内容。这样用户才能更轻松地选择他们所喜爱或愿意分享的内容。

一个模块(或卡片)「包含」一次用户交互。

2. 保证整个卡片都可点击

遵循菲兹定律(Fitts’s Law),要让用户可以点击或触击卡片的任何部分,而不只是文字链接或图片。无论在移动端的触击屏幕,还是需要鼠标操作的主桌面端,有相对大面积的触击区都可大大提高卡片的可用性。

AppSo(微信号 appsolution)注:

菲兹定律是人机交互领域一个非常重要的法则。其基本观点是,当一个人用鼠标来移动鼠标指针时,屏幕上的目标其某些特征会使得点击变得轻松或困难。目标离得越远,到达就越费劲;目标越小,就越难点中。

小提示:推荐使用一点阴影来呈现深度,让大家知道卡片是可点击的。

图片来源:nngroup

3. 保证卡片的视觉享受感

要说什么样的卡片才是成功的,那必然是有良好设计和可用性的卡片了。对卡片稍加打磨,加入少许美学特征,卡片会让人感觉熟悉,同时创意十足。

图片来源:Piper Lawson

相关推荐
APP界面设计:关于卡片设计、分割线、无框设计的思考
制作完美搜索框的9个要素设计原则
2017版“我的淘宝”可能是迄今为止最懂你的设计
为什么你爱用的App,都用卡片式设计?优势在哪?
手机淘宝卡券包的改版设计经验分享
手淘首屏设计是如何用户逛得停不下来?
UI设计规范:单选按钮vs复选框要怎么用?
APP设计教程:特殊情况下如何处理加载页面?
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
App启动页分类与设计逻辑
APP移动应用弹窗设计指南
如何让APP图标设计得有特色?
24个UI案例对比 教你如何提升APP设计品质
干货:移动端响应式的7种UI布局解析
APP设计优化:空白页的存在价值与设计方案
iPhone X 官方人机交互指南中文版
9个UI界面设计灵感来源的网站推荐
从iOS 11看怎样设计APP图标
推送的暗黑模式:被 App 小红点淹没的你正被套路……
5种技巧教你如何提高移动端用户体验
APP设计推送通知的时候,这7个关键点要把握好
超实用的APP引导页设计基础手册分享
为什么微博不像微信一样设计得简洁?
APP设计:如何打造优质移动页面提高用户体验?
APP设计:内容呈现更友好易用的5种常见导航设计模式
那些方法可以让搜索框的体验更好?
APP设计:启动页/广告页/引导页设计思想
APP设计:悬浮按钮设计规范和经典实践
APP设计教程:导航设计的对比总结
总结:那些可以提升用户设计体验的方法分享
APP设计:“返回”功能应该怎么设计?
设计实践:如何让用户参与我的设计?
从两个层面分析抖音的交互设计
APP设计:如何设计电商APP的消息通知?

精彩推荐

热门教程