写点什么

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

评论

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

11. python入门复习教程之命名空间与作用域,再谈异常,标准库,持久化与序列化

梦想橡皮擦

10月月更

设计电商秒杀系统

木云先森

架构训练营

「 活动 」连续 3 天,企业容器应用实战营上海站来啦!

阿里巴巴云原生

阿里云 Kubernetes 容器 云原生 活动

模块九 电商秒杀系统设计

小牧ah

架构实战营

梦幻西游H5游戏超详细图文架设教程

echeverra

H5游戏

为绿色而生:智慧矿山可视化数治监管

一只数据鲸鱼

数据可视化 智慧矿山 煤矿 矿山

一加9 Pro怎么样?值得入手的全能旗舰

Geek_8a195c

第 14 章 -《Linux 一学就会》- RAID磁盘阵列的原理与搭建

学神来啦

Linux linux运维 linux云计算

低代码BPM平台

低代码小观

低代码 企业 企业管理 BPM 低代码平台

专场预告 | DTCC数据库技术大会云溪数据库专场

云计算

教你用Java7的Fork/Join框架开发高并发程序

华为云开发者联盟

Java 算法 线程 高并发 Fork/Join框架

【优化技术专题】「线程间的高性能消息框架」终极关注Disruptor的核心源码和Java8的@Contended伪共享指南

码界西柚

Disruptor 异步执行 高性能框架 10月月更

Vue进阶(幺叁幺):父子组件传值实现数据深拷贝

No Silver Bullet

Vue 深拷贝 10月月更

直播回顾|蒋烁淼:《下一代企业级应用软件论坛》可观测性主题精彩分享

观测云

可观测性

仅需三天,受人追捧的华为内部Java优化笔记登顶Github热搜!

Java 架构 面试 程序人生 编程语言

浙江金华市正规等保测评机构有几家?在哪里?联系电话是多少?

行云管家

网络安全 等保 等保测评

百分点大数据技术团队:低代码平台实践

百分点科技技术团队

【LeetCode】删除链表的倒数第 N 个结点Java题解

Albert

算法 LeetCode 10月月更

013 云原生之容器技术

穿过生命散发芬芳

云原生 10月月更

中秋图关系构建

6979阿强

图算法 GraphScope 中秋节

12种 vo2dto 方法,就 BeanUtils.copyProperties 压测最拉胯!【快双11了,别用错喽】

小傅哥

Java 小傅哥 MapStruct vo2dto JMapper

成本直降50% | 阿里云发布云原生网关,开启下一代网关新进程

阿里巴巴中间件

阿里云 微服务 云原生 中间件 网关

DCI架构是如何解决DDD战术建模缺点的?

华为云开发者联盟

领域驱动设计 对象 建模 对象编程 DCI架构

校友录小程序开发笔记三十二:校友卡模块设计与实现

CC同学

机器翻译是否能替代人工翻译?从前世今生说起

博文视点Broadview

Pandas高级教程之:时间处理

程序那些事

Python 大数据 数据分析 pandas 程序那些事

【Flutter 专题】32 图解自定义 View 之 Paint

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 10月月更

云计算改变企业的传统思考方式

低代码小观

云计算 创新 企业 企业管理 传统观念

授人以渔,华为“开源雨林”计划致力推动开源生态发展

设计模式如何提升 vivo 营销自动化业务扩展性 | 引擎篇01

vivo互联网技术

自动化 后端 设计模式 软件架构设计 java

SSH是什么?怎么组成?有哪些优势?

行云管家

SSH 服务器 SSH工具 服务器管理协议

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