美文网首页UI/UE设计喵交互设计方法论@产品
[信息集合]卡片式&列表设计

[信息集合]卡片式&列表设计

作者: FayeWang | 来源:发表于2016-07-30 05:14 被阅读1207次

    如何解决信息集合的问题?

    在交互设计中,信息集合的方式往往采用卡片式设计和列表设计。列表针对的集合主要是信息栏的“排列展示”,而卡片式主要解决的是单条信息的“内容较多”,以及此信息的“可操作性”。

    一、列表设计

    什么是列表设计?

    列表设计较为简单,纵向列表以展示所有相同的信息栏,用户能够滑动快速查看信息,并不必强调可操作性。传统的列表设计主要包括简单图文加分割线,像通讯录、聊天框的简单信息展示,能够帮助用户快速浏览。现在随着信息栏内容的丰富,也有卡片式列表,如知乎、微博、Facebook等就是采用这种列表方式。

    信息栏是用图文+分割线还是卡片?

    这个需要根据信息栏的内容而定。当信息的内容较为复杂且要强调操作时,卡片是个好选择(如左);反之,假如内容较为简单,且无操作性时,用图文加分割线的传统列表较合适(如右)。简而言之,卡片是为了拓展信息块的视觉深度和突出可操作性。

    二、卡片式设计

    卡片式设计是为了将内容信息更好地展示出来,并利用信息来挑逗用户产生操作。

    视觉上需要有卡片的真实感受,操作上卡片的翻转、移动、折叠、分享等操作也可以通过设计来强调。

    一些有趣的操作

    好的视觉体验

    相关文章

      网友评论

      • CyclingBoy:to B行业的代办列表中的每个列表横向都还有5个以上甚至更多的条目,在PC端通常表现为表格状的列表,形式单调,要求严谨严肃,应该如何适配到移动端?
      • 茄子太郎和茄子美:大神带我!

      本文标题:[信息集合]卡片式&列表设计

      本文链接:https://www.haomeiwen.com/subject/igazjttx.html