小程序卡片叠层切换卡片_现在,卡片和清单在哪里?

小程序卡片叠层切换卡片

重点 (Top highlight)

介绍 (Intro)

I was recently tasked to redesign the results of the following filters:

我最近受命重新设计以下过滤器的结果:

  1. Filtered results for users (creatives)

    用户的筛选结果(创意)
Image for post

2. Filtered results for projects

2.项目的筛选结果

Image for post

These certainly looked like cards to me (as opposed to list items), but before declaring that this was the best path forward I decided to do a little research.

对于我来说,这些当然看起来像是卡片 (而不是列表项),但是在宣布这是前进的最佳途径之前,我决定进行一些研究。

研究 (Research)

Turns out the most documentation will say that lists, not cards, are the best way to show searched/filtered results.

事实证明, 大多数文档会说列表(而不是卡片)是显示搜索/过滤结果的最佳方法。

Image for post
View Profile and 查看个人资料”和“ Follow). Source: Strava关注” )。 资料来源:Strava

But the more digging I did the more I saw how cards and lists were becoming one of the same, and can both be used when displaying results on a page.

但是我做得越深入,我越能看到卡片列表如何成为同一个卡片 ,并且在页面上显示结果时都可以使用。

进化 (The evolution)

Cards became mainstream when Pinterest started leveraging them in a collage-like format.

当Pinterest开始以类似拼贴的格式使用卡片时,卡片就成为了主流。

Image for post
Pinterest’s current card design showing results of cards. It’s ununiformed layout embraces browsing more than reviewing searched/filtered results.
Pinterest当前的卡片设计显示了卡片的结果。 它的布局不统一,浏览起来比查看搜索/过滤的结果还要多。

As its skeuomorphic name indicates, these containers initially had the dimensions and depth of playing cards. In fact, in 2016 the Nielson Norman Group defined cards as:

顾名思义,这些容器最初具有纸牌的尺寸和深度。 实际上,尼尔森·诺曼集团(Nielson Norman Group)在2016年将卡片定义为:

A UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

一种UI设计模式,将相关信息分组在一个看起来像扑克牌的灵活大小的容器中。

Image for post
Nielson Norman Group’s example of a card, circa 2016.
Nielson Norman Group的信用卡示例,大约在2016年。

Yet, the cards quickly transformed into new, non-card shapes.

但是,卡片很快就变成了新的非卡片形状。

Image for post
this interesting article. Source: goal.com.这个有趣的文章的例子。 资料来源:goal.com。

While others lost their shadow:

当其他人失去了阴影时:

Image for post
Recommended connections in the form of “cards”. Source: LinkedIn.
推荐的连接形式为“卡”。 资料来源:LinkedIn。

And then came border-less cards

然后是无边界卡

Image for post
No border around the card’s image and it’s text. Source: Spotify.
卡的图像和文本周围没有边框。 资料来源:Spotify。

As time went on people did not need the card analogy to understand what cards were and how to interact with them

随着时间的流逝,人们不需要用类比来了解什么是以及如何与之交互

So at this point, what are the differences of cards and lists? Well, as alluded to previously, cards have been known for “browsing” since they have usually contained photos, while lists are text-heavy and are great for “searching”. Let’s take Medium as an example:

那么,此时, 卡片列表有什么区别? 那么,作为前面提到的, 已经知道了“浏览”,因为他们通常包含照片,而列表是文字为主的和是伟大的“搜索”。 让我们以Medium为例:

Image for post
A list item at the top and a card at the bottom.
列表项在顶部,卡片在底部。

In the mobile app, users can scroll through Your Daily Read and are first presented with list items. As they continue to scroll (and you can argue are now in a browsing mentality) they are presented with cards. If a user does a manual search they are presented with only list items.

在移动应用程序中,用户可以滚动浏览“每日阅读” ,并首先显示列表项。 当他们继续滚动时(您可以说现在处于浏览状态),他们会看到卡片 。 如果用户进行手动搜索,则仅显示列表项。

*These cards are actually a list of archived items, but I am focusing more on the user’s mentality if they are this far down the page

*这些卡片实际上是已归档项目的列表,但是如果它们在页面下方,我将重点放在用户的心态上

The only difference between Medium’s list items and cards is really just the size of the picture.

中号列表项和卡片之间的唯一区别实际上只是图片的大小

当前状态 (Current state)

So it appears that the current definition of a card is something like this:

这样看来, 卡片的当前定义是这样的:

A UI design pattern that groups related information in a significantly-sized container, fostering a browser’s mentality and allowing only a few results to be seen at a time.

一种UI设计模式,它将相关信息分组到一个很大的容器中,从而培养了浏览器的思维方式,并且一次只能看到一些结果。

From a visual perspective, a card is a large list. From a use case perspective, a card excels when user’s are in a curious or amendable state.

从视觉上看,一张卡片是一个很大的清单 。 从用例的角度来看,当用户处于好奇或可修改状态时, 卡片会表现出色。

卡还是清单? (Card or List?)

The question is not, “should I leverage a card design or list design?”. You should ask:

问题不是,“我应该利用卡片设计还是列表设计?”。 您应该问:

  • how much visual weight do I want each component to have?

    我希望每个组件有多少视觉重量?
  • what mindset are my users in at this point of their experience?

    我的用户目前的心态是什么?

Depending on these answers you may have something that looks very much like a prototypical card/list, or you may have some happy medium.

根据这些答案,您可能会拥有非常像原型 / 列表的东西 ,或者可能拥有一些快乐的媒介。

回到重新设计 (Back to the Redesign)

I learned that my users were not explicitly searching, they were just filtering by their area and more browsing for interesting projects / creatives.

我了解到,我的用户没有明确搜索,他们只是按所在区域进行过滤,而是浏览更多有趣的项目/广告。

More importantly, the results of user research said people did not mind scrolling through content, and liked to see larger photos without having to drill down. This led me to the following designs:

更重要的是,用户研究的结果表明,人们不介意滚动浏览内容,并且喜欢看更大的照片而不必进行深入研究。 这导致我进行以下设计:

推理设计 (Designs with reasoning)

Image for post
Filtered results for Creatives (users).
广告素材(用户)的过滤结果。

Like Instagram, photos dominate the user’s decision to click on a result, thus the size of the images. White space separates where to click for the drill down view vs DMing the user. Years user evolution and learning have gotten us to the point where this design not only works, but does it with a simplistic style.

像Instagram一样,照片在用户决定点击结果的决定中占主导地位,从而决定了图像的大小。 空格分隔了向下钻取视图和DM用户的单击位置。 多年的用户发展和学习使我们达到了这种设计不仅有效而且简单的风格。

Image for post
Filtered results for Projects.
项目的筛选结果。

Similar to the design above, user can click (tap) on any part of the result for the drill down view while swiping on the photo or user attributes will trigger the appropriate carousels. This had led to more engagement as every part of the result is intractable, compared to the original designs that had users guessing what was clickable and what was not.

与上面的设计类似,用户可以在浏览照片的任何部分上单击(点击),同时在照片上滑动,否则用户属性将触发适当的轮播。 与原始设计相比,这导致了更多的参与,因为结果的每个部分都是难以捉摸的,而原始设计使用户只能猜测可点击的内容和不可点击的内容。

设计比较 (Design comparison)

Image for post
Creative results. Old vs New.
创意结果。 旧与新。
Image for post
Project results. Old vs New.
项目成果。 旧与新。

验证方式 (Validation)

Since I work for a small company, validating the designs (more than just a few user tests) comes down to seeing if any other apps are doing the same thing. Turns out more than a few look very similar 😏

由于我在一家小公司工作,因此对设计进行验证(不仅仅是几个用户测试)归结为查看是否有其他应用程序在做同样的事情。 事实证明,很多看起来非常相似😏

Image for post
YouTube and AirBnb’s Home and Explore sections, respectively.
YouTube和AirBnb的“主页”和“浏览”部分。

That’s it! Would be happy to hear from people on what they think about these designs 😎

而已! 很高兴听到人们对这些设计的看法😎

*The app I redesigned is called Connective, the super-awesome app where creatives can connect. Download the app here.

*我重新设计的应用程序称为Connective ,这是一款超棒的应用程序,可以在其中连接广告素材。 在此处下载该应用程序。

翻译自: https://blog.prototypr.io/where-are-we-now-with-cards-vs-lists-7bd293ae1da0

小程序卡片叠层切换卡片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

效率神器!UI 稿智能转换成前端代码

做前端,不搬砖大家好,我是若川。从事前端五年之久,也算见证了前端数次变革,从到DW(Dreamweaver)到H5C3、从JQuery到MVC框架,无数前端大佬在为打造前端完整生态做出努力,由于他们的努…

$.when.apply_When2Meet vs.LettuceMeet:UI和美学方面的案例研究

$.when.apply并非所有计划应用程序都是一样创建的。 (Not all scheduling apps are created equal.) As any college student will tell you, we use When2Meet almost religiously. Between classes, extracurriculars, work, and simply living, When2Meet is the scheduling…

前端不容你亵渎

大家好,我是若川,点此加我微信进源码群,一起学习源码。同时可以进群免费看Vue专场直播,有尤雨溪分享「Vue3 生态现状以及展望」背景最近我在公众号的后台收到一条留言:言语里充满了对前端的不屑和鄙夷,但仔…

利益相关者软件工程_如何向利益相关者解释用户体验的重要性

利益相关者软件工程With the ever increasing popularity of user experience (UX) design there is a growing need for good designers. However, there’s a problem for designers here as well. How can you show the importance of UX to your stakeholders and convince…

云栖大会上,阿里巴巴重磅发布前端知识图谱!

大家好,我是若川,点此加我微信进源码群,一起学习源码。同时可以进群免费看Vue专场直播,有尤雨溪分享「Vue3 生态现状以及展望」阿里巴巴前端知识图谱,由大阿里众多前端技术专家团历经1年时间精心整理,从 初…

Linux下“/”和“~”的区别

在linux中,”/“代表根目录,”~“是代表目录。Linux存储是以挂载的方式,相当于是树状的,源头就是”/“,也就是根目录。 而每个用户都有”家“目录,也就是用户的个人目录,比如root用户的”家“目…

在当今移动互联网时代_谁在提供当今最好的电子邮件体验?

在当今移动互联网时代Hey, a new email service from the makers of Basecamp was recently launched. The Verge calls it a “genuinely original take on messaging”, and it indeed features some refreshing ideas for the sometimes painful exercise we call inbox man…

React 全新文档上线!

大家好,我是若川,点此加我微信进源码群,一起学习源码。同时可以进群免费看明天的Vue专场直播,有尤雨溪分享「Vue3 生态现状以及展望」,还可以领取50场录播视频和PPT。React 官方文档改版耗时 1 年,今天已完…

网络低俗词_从“低俗小说”中汲取7堂课,以创建有影响力的作品集

网络低俗词重点 (Top highlight)Design portfolios and blockbuster movies had become more and more generic. On the design side, I blame all the portfolio reviews and articles shared by “experienced” designers that repeat the same pieces of advice regardless…

尤雨溪写的100多行的“玩具 vite”,十分有助于理解 vite 原理

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12想学源码,极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

webflow如何使用_我如何使用Webflow构建辅助项目以帮助设计人员进行连接

webflow如何使用I launched Designer Slack Communities a while ago, aiming to help designers to connect with likeminded people. By sharing my website with the world, I’ve connected with so many designers. The whole experience is a first time for me, so I wa…

重新构想原子化 CSS

感谢印记中文的 QC-L[1] 对本文进行翻译,英文原文: English Version[2]。本文会比往期文章相对长些。这是我个人的一个重大的工具发布,有许多内容我想谈论。如果你能花些时间读完,不胜感激,希望能对你有所帮助 :)推荐访问 https:/…

cv::mat 颜色空间_网站设计基础:负空间

cv::mat 颜色空间Let’s start off by answering this question: What is negative space? It is the “empty” space between and around the subjects of an image. In the context of web design, your “subjects” are the pictures, videos, text, buttons and other e…

[知乎回答] 前端是否要学习 Node.js?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12很多小伙伴都表示收获颇丰。一起学的大多数200行左右的Node.js源码。今天推荐这篇文章。(刚刚在写明天掘金要发的文章,差点忘记今天还没发文。在知乎上看…

shields 徽标_我的徽标素描过程

shields 徽标Sketching is arguably the most important part of my process when it comes to logo design. In the beginning of my design career, I would actually skip this step completely and go right to the computer. I’d find myself getting stuck and then goi…

叮咚,系统检测到 npm 有更新,原理揭秘!

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记,写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你,组件库…

ui设计未来十年前景_UI设计的10条诫命

ui设计未来十年前景重点 (Top highlight)The year is approximately 1,300 BC when Moses received the 10 UI design commandments from the almighty design gods. The list was comprised of best practices that only the most enlightened designers would be aware of.当…

w3ctech 2011 北京站(组图)

门前的牌子大厅一推低价技术书籍会场嘉宾席人渐渐到齐准备工作w3c中国区负责人 安琪 第一个演讲焦峰同学分享了浏览器兼容性的相关问题石川同学分享的是JQuery的相关内容摄影哥微博大屏幕,有亮点哦。。。MBP啊有木有~~~貘大现场提…

浏览器中的 ESM

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12早期的web应用非常简单,可以直接加载js的形式去实现。随着需求的越来越多,应用越做越大,需要模块化去管理项目中的js、css、图片等资源。这里…

标记图标_标记您的图标

标记图标Not labeling your icons is the same as assuming that we are all fluent in ancient hieroglyphics. Are you? Can you just walk up to Cleopatras needle and read it like you could read a childrens book? Even emojis, our modern hieroglyphics dont mean …