NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

从列表式 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:47602

评论

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

架构训练营第十周感悟

张锐

hive拉链表优化·百亿量级数据支持准实时更新

誓约·追光者

hive 实时数仓 海量数据库的设计与实践

【架构师训练营】第 10 周总结

花生无翼

OAuth 2.0

陈皮

微服务架构关键点思考

dony.zhang

微服务、中台和 DDD

dongge

架构师训练营——第 10 周作业

jiangnanage

架构师课作业 - 第十周

Tulane

Django单元测试用法及Fixtures用法

BigYoung

Python django 单元测试 Fixtures

架构师训练营第十周学习总结

Bruce Xiong

架构训练营第十周作业

张锐

让我们慢慢地成长

姜海天

个人成长

架构师课程第十周总结

dongge

week10 作业

雪涛公子

Lambda架构已死,去ETL化的IOTA才是未来

易观大数据

浅析Python3列表操作之*和*=

王坤祥

Python Python基础

Dubbo的服务注册与调用

superman

iOS Abort问题系统性解决方案

移动研发平台EMAS

ios 监控 移动

架构师第十周

Tulane

【数据结构与算法】如何高效学习数据结构与算法

三钻

学习 数据结构与算法

基于小程序云Serverless开发微信小程序

移动研发平台EMAS

服务化问题与方案简述

superman

微服务 服务化改造

下载的附件名总乱码?你该去读一下 RFC 文档了!

Java课代表

Spring Boot

week10 总结

雪涛公子

【架构师训练营】第 10 周作业

花生无翼

Python中list操作之append、extend

王坤祥

Python Python基础

手动实现mini-vue

晓枫

Java vue.js

致力打造下一代云原生分布式消息系统,StreamNative 完成源码资本数百万美元 Pre-A 轮融资,红杉中国种子基金跟投

Apache Pulsar

kafka Apache Pulsar StreamNative

威联通(NAS)应用篇:搭建个人图床

BigYoung

图床 NAS QNAP 威联通 自建

架构师训练营——第10周学习总结

jiangnanage

Dubbo微服务调用过程时序图

2流程序员

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