写点什么

从列表式 UI 中升华探讨:卡片式 UI 有哪些创新点(二)

  • 2019-12-31
  • 本文字数:823 字

    阅读完需:约 3 分钟

从列表式UI中升华探讨:卡片式UI有哪些创新点(二)

价值点分析:卡片式设计的优点

1. 重塑空间利用价值

我们将卡片当做一个承载内容的容器,不同的内容被规划成不同的卡片,不同的卡片有着适合自己的尺寸。这个时候传统的框架被打破,卡片组成卡片集,空间利用上会得到极大的拓展,同时看起来也具有整体性。


卡片式设计配合以卡片相应的交互操作,可以让空间利用率更加合理。



在 iOS 系统下,appstore 将卡片式设计发挥的淋漓尽致,不同的内容被盛放到相应的卡片容器中。


1.【专题】卡片就像窗口,卡片内的信息可以平铺在一个很大的画布上,用户可以通过窗口滚动浏览信息,当点击的时候,窗口会展开变大,使用户专注于这个类目的浏览与选择;


2.不同的卡片之间采用常规竖向滚动与横向滚动相结合,使得卡片集的组合空间更大,并且可以在横向同类卡片与纵向不同栏目之间快速切换,方便快捷。

2. 内容前置,信息分级

卡片作为一个独立的容器,可以在内容上进行良好的布局组织,将信息分块,突出重点,让用户快速找到感兴趣的内容,避免在繁杂的信息集中浪费时间。



类似于电商中的商品类卡片,商品图片、商品名称、折扣信息、价格等被按重要性组织布局,组成一个友好且连贯的内容体,整齐简练。

3. 跨越终端,多元场景

正因为卡片是一个内容的盛放容器,所以它有一个特别重要的特性是它可以自由变换大小,这使得它在跨终端的响应中表现出色。


同时在不同的终端中,卡片的信息组织并不受影响,这也是保证跨终端体验一致的重要因素。



google 极度推行卡片式设计,正是为了保证各式各样的安卓机分辨率下的一致体验。

4. 拟物视觉,赏心悦目

人机界面交互是一门语言也是一门艺术,界面需要给用户呈现信息,也需要给用户心理感知。感知源于习惯,习惯源于现实,这就是拟物化设计,将用户在现实生活中的习惯与感知传承到界面交互中。



iOS 中的卡包在空间布局允许的情况下,使用卡片式的拟物化设计,将真实且亲切的感知带给用户,同时增加界面趣味性。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/vYfol56CZPMStx9JqxrCOg


2019-12-31 14:47933

评论

发布
暂无评论
发现更多内容

2020一个Android大牛的面试经历分享(金九银十面试30多家公司)

android 程序员 移动开发

架构实战训练营-模块二作业

御道而行

架构实战营

2020字节跳动面试看这篇就够了100道高频面试题解析!(数据结构与算法

android 程序员 移动开发

2020年Android高级面试题总结(附答案解析),面试突击版

android 程序员 移动开发

2020个人开发者做一款Android-App需要知道的事情,年薪百万在此一举

android 程序员 移动开发

架构实战营模块2作业

小饭🍎

架构师 作业 模块二

第二周学习记录总结

乐知

架构训练营

2020了,Android开发是否真的还有出路!25岁的我还有机会吗

android 程序员 移动开发

2020届毕业生9月份还没找到Android开发工作,是什么体验?(1)

android 程序员 移动开发

架构训练营 - 模块二作业

VegetableBird

架构训练营 架构实战营

2020Android面试心得(二),【面试总结】

android 程序员 移动开发

2020关于面试字节跳动,我总结一些面试点,希望对最近需要面试的你们一些帮助

android 程序员 移动开发

2020年中总结之----怎么挤进一线大厂?非软文!,2021Android面试心得

android 程序员 移动开发

2020初中级Android开发社招面试总结+解答分享!,androidsdk开发书籍

android 程序员 移动开发

2020年8月30写篇文章,记录我的字节跳动客户端面试之旅!

android 程序员 移动开发

2020年Android开发年终总结之如何挤进一线大厂?,android界面开发实验报告

android 程序员 移动开发

2020年中总结之----怎么挤进一线大厂?非软文!(1),Android面试题整理

android 程序员 移动开发

2020Android面试心得,已拿到offer,阿里P8架构师Android大厂面试题总结

android 程序员 移动开发

模块二

小麦🌾

架构实战营

2020年度整理国内一线互联网公司内部Android面试题库,androidstudio开发项目

android 程序员 移动开发

初识JavaScript第一篇及解释器和编译器

你好bk

JavaScript html5 大前端 html/css

2020互联网寒冬之下,作为一个Android老码农,是如何进入腾讯的?

android 程序员 移动开发

“元宇宙”概念股中青宝、天下秀涨停

区块链日报

2020届毕业生9月份还没找到Android开发工作,是什么体验?

android 程序员 移动开发

2020年末知识大总结:Java程序员转Android开发必读经验一份

android 程序员 移动开发

2020Android面经,历时一个半月,斩获3个大厂offer,kotlin语法大全

android 程序员 移动开发

2020上半年已过,疫情下互联网迎来红利期,Android技术下半场在哪?

android 程序员 移动开发

2020全网HTTP最佳解析,没有之一!(github标星5-1K,字节跳动Android岗面试题

android 程序员 移动开发

[ CloudWeGo 微服务实践 - 04 ] 尝试操作数据(2)

baiyutang

golang 11月日更

模块二作业及总结

Thomas

架构训练营

2020年Android开发年终总结之如何挤进一线大厂?(1),如何成为杰出的程序员

android 程序员 移动开发

从列表式UI中升华探讨:卡片式UI有哪些创新点(二)_语言 & 开发_Think体验设计_InfoQ精选文章