小程序卡片疊層切換卡片

重點 (Top highlight)

介紹 (Intro)

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

我最近受命重新設計以下過濾器的結果：

Filtered results for users (creatives)

用戶的篩選結果(創意)

2. Filtered results for projects

2.項目的篩選結果

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.

事實證明， 大多數文檔會說列表(而不是卡片)是顯示搜索/過濾結果的最佳方法。

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開始以類似拼貼的格式使用卡片時，卡片就成為了主流。

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設計模式，將相關信息分組在一個看起來像撲克牌的靈活大小的容器中。

Nielson Norman Group’s example of a card, circa 2016.Nielson Norman Group的信用卡示例，大約在2016年。

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

但是，卡片很快就變成了新的非卡片形狀。

this interesting article. Source: goal.com.這個有趣的文章的例子。 資料來源：goal.com。

While others lost their shadow:

當其他人失去了陰影時：

Recommended connections in the form of “cards”. Source: LinkedIn.推薦的連接形式為“卡”。 資料來源：LinkedIn。

And then came border-less cards

然后是無邊界卡

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為例：

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)

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用戶的單擊位置。 多年的用戶發展和學習使我們達到了這種設計不僅有效而且簡單的風格。

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)

Creative results. Old vs New.創意結果。 舊與新。 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 😏

由于我在一家小公司工作，因此對設計進行驗證(不僅僅是幾個用戶測試)歸結為查看是否有其他應用程序在做同樣的事情。 事實證明，很多看起來非常相似😏

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

小程序卡片疊層切換卡片

總結

以上是生活随笔為你收集整理的小程序卡片叠层切换卡片_现在，卡片和清单在哪里？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。