写点什么

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

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

    阅读完需:约 3 分钟

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

场景探索:寻求卡片式设计的最佳案例

Dashboard(工作台)运用场景


工作台的设计源于仪表盘,而仪表盘的核心理念是直接、高效、准确地向用户展示最重要的信息。


对于工作台的设计,需要重注三个元素:场景、角色、内容;他们的关系是在相应场景下需要给某类角色提供最需要查看的内容,而这个内容往往是多类别的。


我们将卡片式设计代入,自由的布局方式可以带来每块区域的很好的展示方式,同时更加重要的是卡片集强大的分类功能,在工作台上做信息分类布局使得用户可以更高效浏览一类信息。


数据排布主要涉及到三个心理学小知识:格式塔原则、短时记忆和神奇的 X。

应用选择运用场景


对于应用选择,我们需要展示给用户的第一要素是『这是什么应用』,每个独立卡片中承载的图标和名称可以以最生动形象的感知传达给用户。


设计师往往注重功能化导向设计,而用户体验更需要让用户愉悦的完成任务,所以注重感知和情绪设计会让用户更加喜欢。


###卡片集运用场景



这类场景往往更注重对单个信息的关注,此时用户不需要进行对比,更需要对单个信息内容进行多远互动,我们将卡片进行信息分级设计,同时设计丰富的互动操作栏。


列表更倾向于对信息进行总览、比较、过滤筛选。


###图表类运用场景



在数据可视化领域有『数据深度分析』和『数据概览』,我们借助卡片承载简单的数据概览内容,展示数据趋势与核心指标,在保证数据价值的同时也使得数据可视化的运用场景得到拓充。


将图表卡片运用在报表页面,可以打造分析型报表的业务场景。

对话式 UI 运用场景


我们打破传统对话式 UI 的体验模式,将『图形化 UI』与『对话式 UI』相结合,此时卡片就是图形化元素最好的载体,各式各样的卡片丰富了对话式 UI 的交互方式,又与之完美融合,体验具有整体性。

结语

正是因为上述价值点使得卡片化设计快速流行起来,并且会使用越来越广泛。


卡片式设计并不是一种简单的样式设计,而是一种信息自由布局的设计语言,它使人机交互方式越来越丰富,相信会有越来越多的平台创造新的卡片式交互形式,以创造更加极致的用户体验。


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


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


2019-12-31 14:47884

评论

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

Android面试题之Java基础篇,安卓rxjava使用

android 程序员 移动开发

Android高速下载器实现思路——单个任务的提速与优化,flutter二维码扫描

android 程序员 移动开发

Android:这是一份全面&详细的-热修复-学习指南(1),统统给你解决

android 程序员 移动开发

Android面试吃透这一篇就够了,没有拿不到的offer!1096页Android学习笔记

android 程序员 移动开发

Android题集四大组件之Content provider、BroadcastReceiver

android 程序员 移动开发

Android:手把手教你实现在XML中配置网易云歌手详情滑动效果

android 程序员 移动开发

Android面试主题整理合集(三),Android屏幕适配很难嘛其实也就那么回事

android 程序员 移动开发

Android面试:来说一说Context吧,Android中的Context跟Java有什么区别

android 程序员 移动开发

【LeetCode】最长定差子序列Java题解

Albert

算法 LeetCode 11月日更

Android面试题之Listview篇,2021Android面试心得

android 程序员 移动开发

Android:2021大厂直通车面试宝典,为你的offer保驾护航

android 程序员 移动开发

英特尔与腾讯以全方位合作 开启云数智时代新征程

科技新消息

Android高工面试(难度:四星,Android开发三年月薪才12K

android 程序员 移动开发

Android面试心得必备技能储备详解,已拿到offer,androidhtml5开发框架

android 程序员 移动开发

Android面试必备!爆火超全的《Android性能优化全方面解析

android 程序员 移动开发

Android面试抱佛脚:进程间通讯学习,从Binder使用看起

android 程序员 移动开发

Android面试官装逼失败之:关于Activity的启动模式,android界面开发工具

android 程序员 移动开发

Android面经:入职网易的那一天,我哭了,狂刷200道数据结构与算法

android 程序员 移动开发

Android面试回忆录:Service有几种启动方式?,大佬带你看源码

android 程序员 移动开发

Android面试必问:Handler、Bitmap,android插件化开源

android 程序员 移动开发

Android:这是一份全面&详细的-热修复-学习指南,含泪狂刷Android基础面试118题

android 程序员 移动开发

Android面经分享:我是如何一举拿下阿里、抖音,html5图片左右移动

android 程序员 移动开发

RabbitMQ详解——RabbitMQ服务端执行逻辑(三)

AiDaddy

RabbitMQ 服务端执行逻辑

Android高工面试(难度:四星(1),真的太香了

android 程序员 移动开发

Android高工面试:用Glide加载Gif导致的卡顿,说一下你的优化思路

android 程序员 移动开发

Android高工:细说 Android 多线程,探究原理知其所以然

android 程序员 移动开发

Android:知道类加载过程面试还是卡壳?干货总结,安卓运行内存监控

android 程序员 移动开发

android面试之今日头条-字节跳动-android社招面试(附答案)

android 程序员 移动开发

Android面试必问:Handler、Bitmap(1),kotlin数据库框架

android 程序员 移动开发

【设计模式】第十一篇 - 装饰模式 - 孙悟空的六神装

Brave

设计模式 装饰模式 11月日更

Android面试必备的集合源码详解,看完之后简历上多一个技能!

android 程序员 移动开发

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