當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网卡驱动程序设计_设计卡

發布時間：2023/12/29 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了网卡驱动程序设计_设计卡小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網卡驅動程序設計

牌？你是說喜歡撲克？ (Cards? You mean like Poker?)

Close. But no, not exactly.

關。但是不，不完全是。

We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart.

我們正在談論用戶界面術語中的“卡片”。盡管UX中卡的概念是由其現實生活中的對應對象啟發而來的，但這并非不正確。

So what’s a card in UI/UX terms? The Nielsen Norman Group defines it as below:

那么用UI / UX術語來說是什么卡呢？ Nielsen Norman Group對其定義如下：

Definition: A card is a container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit.

定義：卡是一些簡短的相關信息的容器。它在大小和形狀上大致類似于紙牌，旨在作為概念單元的鏈接式簡短表示。

Cards come in many sizes and forms卡有多種尺寸和形式

In my relatively short, but exciting design career, almost every project I’ve worked on invariably involved the design of cards. One of my very early projects was a redesign of a “post” card for an e-learning forum. Not to mention, I spent the majority of the past year solely focused on bringing various types of cards to life on the GoIbibo app home screen.

在我短暫但激動人心的設計生涯中，幾乎我從事的每個項目都總是涉及卡片的設計。我最早期的項目之一是為電子學習論壇重新設計了“帖子”卡。更不用說，在過去的一年中，我大部分時間都專注于在GoIbibo應用主屏幕上實現各種類型的卡的生活。

I’ve come to realise that cards are one of the basics to master when it comes to interaction design and visual design.

我已經意識到，卡片是交互設計和視覺設計的基礎知識之一。

Cards are the building blocks of a web-based product, be it an app or site. They’re like little Lego pieces for a user interface.

卡片是基于Web的產品(無論是應用程序還是網站)的組成部分。它們就像用戶界面的小樂高積木。

When it comes to presenting a heterogeneous collection of data, there are very few sites or apps which I’ve encountered which doesn’t use some form of card layout.

在呈現異構數據集合時，我遇到的站點或應用程序很少，它們不使用某種形式的卡片布局。

卡的基本結構 (Basic Anatomy of a Card)

Note: The placement or arrangement of the various elements may vary注意：各種元素的放置或排列方式可能會有所不同

1.標題文字 (1. Title Text)

This is your card summary. At a glance, a user must know what the card is about. Titles should be short and to-the-point.

這是您的卡摘要。乍一看，用戶必須知道卡的用途。標題應該簡短明了。

Determine whether your title requires one line or two lines, and what happens in case of text-overflow (e.g. truncation, ellipsis, etc).

確定標題需要一行還是兩行，以及在文本溢出的情況下會發生什么情況(例如，截斷，省略號等)。

2.次要文字/字幕 (2. Secondary Text / Sub-title)

Use this to provide more information. Secondary text may get ignored when the user is scanning, so keep the copy crisp.

使用它來提供更多信息。用戶掃描時，次要文字可能會被忽略，因此請保持副本清晰。

Pro tip: Adjust the width of your text field such that there are no orphaned or hanging words in the last line.專家提示：調整文本字段的寬度，以使最后一行沒有孤立或懸空的單詞。

3.第三級文本(可選) (3. Tertiary Text (Optional))

If more information needs to be conveyed to the user, a tertiary line of text can be added. This should be non-essential data.

如果需要向用戶傳達更多信息，則可以添加第三行文本。這應該是非必要的數據。

Make sure to maintain a visible hierarchy between all thee tiers of text.

確保在所有所有文本層之間保持可見的層次結構。

4.媒體 (4. Media)

This could be an image, illustration or video. The media could span the entire container, be part of the background, or be confined to shape within the card. In most cases, a card contains a single hero image.

這可以是圖像，插圖或視頻。介質可以橫跨整個容器，可以是背景的一部分，也可以局限于卡片內的形狀。在大多數情況下，一張牌只包含一個英雄形象。

5.呼吁采取行動 (5. Call to Action)

This could be an explicit button, or a link, inviting the user to interact with the card. The card itself may be clickable in some cases, or an affordance is provided in the form of icons e.g. chevrons and arrows.

這可能是一個明確的按鈕或一個鏈接，邀請用戶與卡進行交互。在某些情況下，卡本身可能是可單擊的，或者以圖標(例如人字形和箭頭)形式提供了可負擔的物品。

6.標簽/標簽/狀態指示器 (6. Tags / Labels / Status Indicator)

Cards may require a tag or indicator to make it stand out in a crowd.

卡片可能需要標簽或指示器，以使其在人群中脫穎而出。

Examples of these are:

這些示例包括：

Tags like “New” / “Updated”
像“新” /“已更新”這樣的標簽
Status indicators like “Live” or “Expired”
狀態指示器，例如“實時”或“已過期”
Labels like “Most Rated” or “Exclusive”
像“最高評分”或“獨家”標簽

Commonly used tags in consumer apps消費者應用中的常用標簽

設計卡片的提示 (Tips to design your cards)

Finally, coming to some things to keep in mind while dealing with various types of cards. Of course, there could be many more, and the rules are in no way limited to only this list.

最后，在處理各種類型的卡時要記住一些注意事項。當然，可能還有更多，并且規則絕不僅限于此列表。

1.絕對必要嗎？如果不是，則將其丟棄 (1. Is it absolutely required? If not, discard it)

Don’t get carried away and stuff your cards with excess information. Card complexity varies with context — they can be simple or very detailed. Make a list of all the data points you have, and for each list item, ask: is this necessary or can I remove it?

不要被帶走，不要在卡上塞滿多余的信息。卡的復雜度隨上下文而變化-它們可以簡單也可以非常詳細。列出所有數據點，并針對每個列表項詢問：這是必需的還是可以刪除？

The same sellable item (KFC) but the card changes based on the use case相同的可售商品(KFC)，但卡根據使用情況而變化

2.識別卡中的“掛鉤” (2. Identify ‘hooks’ in your card)

Depending on the use case, your card should have one or more ‘hooks’. These are the hero elements of the card. Users will scan these during their decision-making process.

根據使用情況，您的卡應具有一個或多個“掛鉤”。這些是卡片的英雄元素。用戶將在決策過程中對其進行掃描。

If I’m browsing hotels, my hooks are the price, and then the picture. But if I’m ordering food, I’d rather go by the image and the restaurant name.如果我正在瀏覽酒店，那么我最著迷的是價格，然后是圖片。但是，如果我要點菜，我寧愿按圖片和餐廳名稱去。

3.使您的卡可掃描 (3. Make your cards scannable)

The overall structure of the card must not change. Familiarity and repetition is key — your card should be easily scannable by the users’ eye.

卡的整體結構不得更改。熟悉和重復是關鍵-用戶的眼睛應該可以輕松掃描您的卡。

A user should be able to predict where the Title of the 100th card would appear by simply looking at 2–3 cards.

用戶只需查看2-3張卡片，就可以預測第100張卡片的標題將出現在何處。

4.確保您的卡規模 (4. Ensure your card scales)

While designing, consider all edge cases e.g. text overflows, truncation and image scaling factors. Your card template should look good for both the best and the worst case — if a card has very little data, if the content is not available or if images are of low-quality.

在設計時，請考慮所有邊緣情況，例如文本溢出，截斷和圖像縮放比例。卡片模板無論在最佳還是最壞的情況下都應該看起來不錯-如果卡片數據很少，內容不可用或圖像質量低劣。

5.同時，保持有趣 (5. At the same time, keep things interesting)

When things on your page start to look the same, the user loses focus. That's when you break the pattern and grab their attention.

當頁面上的內容開始看起來相同時，用戶將失去焦點。那是當您打破模式并吸引他們的注意力時。

Cards within a set must be uniform, however, there need not be uniformity across different sets.

一組內的卡片必須是統一的，但是， 不同組之間不必是統一的。

Play with visuals — Some cards may have rounded corners; some may have a shadow. Use differently shaped cards. Some commonly used shapes are circles and rectangles: don’t hesitate to experiment.

玩視覺效果—有些紙牌可能帶有圓角；有些可能會有陰影。使用形狀不同的卡。一些常用的形狀是圓形和矩形：不要猶豫進行實驗。

Different shapes of card elements used on GoIbibo & CREDGoIbibo和CRED上使用的不同形狀的卡片元素

6.定義行為和限制 (6. Define behaviour and limits)

Before handing off your design for implementation, ask yourself:

在將設計交付實施之前，請問自己：

How would this look if there were only one or two cards?
如果只有一張或兩張卡，效果如何？
How many cards go in a line?
一行中有幾張牌？
In what order will these cards be sorted?
這些卡片將以什么順序分類？
Which part(s) of the card are clickable? Is the whole card clickable?
卡的哪一部分是可點擊的？整個卡是否都可點擊？
What happens on-hover?
懸停時會發生什么？

Ask the questions, and define the rules.

提出問題，并定義規則。

Hovering on a Netflix card plays a video preview, and brings up additional buttons將鼠標懸停在Netflix卡上可播放視頻預覽，并彈出其他按鈕

7.不要忘記可訪問性和本地化 (7. Don’t forget Accessibility and Localisation)

When a visually challenged user interacts with your card, they must be able to make sense of the information in an orderly fashion.

當視力不佳的用戶與您的卡片互動時，他們必須能夠以有序的方式理解信息。

Define alt text for media elements and links, and a tab order for the elements within your cards.
為媒體元素和鏈接定義替代文本 ，并為卡片中的元素定義跳位順序。
Make sure user is able to jump between cards in a set, and is not forced to tab through each and every individual card element to proceed.
確保用戶能夠在一組卡片之間跳轉，并且不被迫在每個卡片元素之間進行切換以繼續。
Ensure clickable areas are fat-finger friendly.
確保可點擊區域適合胖手指。

Apple recommends a minimum target size of 44 px by 44 px, while for Android it is 48dp by 48dp

蘋果建議最小目標尺寸為44像素乘44像素，而Android設備的最小目標尺寸為48像素乘48像素

If your card will be localised into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.

如果您的卡將被本地化為其他語言，則請記住字符數和易讀性。例如，漢字比拉丁文字占用更多的空間。

Pro tip: Avoid the card design on the left. Converting to languages which read right-to-left (e.g. Arabic) will be a nightmare. Try to follow the card design on the right.專家提示：避免左側的卡設計。轉換為從右到左閱讀的語言(例如阿拉伯語)將是一場噩夢。嘗試遵循右側的卡設計。

In order to innovate, we must think out of the box. But, before breaking or bending rules, we must first learn and master them. Once you’ve got most of the basics right, designing cards will be a piece of cake. Good luck!

為了創新，我們必須開箱即用。但是，在違反或改變規則之前，我們必須首先學習并掌握它們。一旦掌握了最基本的知識，設計卡片就可以輕而易舉了。祝好運！

https://www.nngroup.com/articles/cards-component/

https://material.io/components/cards

More about accessibility: https://webaim.org/

有關可訪問性的更多信息： https : //webaim.org/

More about localisation: https://www.interaction-design.org/literature/article/localizing-the-user-experience

有關本地化的更多信息 ： https : //www.interaction-design.org/literature/article/localizing-the-user-experience

Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.海灣地區黑人設計師：一個專業的黑人開發社區，他們是舊金山灣區的數字設計師和研究人員。通過在社區中團結起來，成員可以共享靈感，聯系，同伴指導，專業發展，資源，反饋，支持和韌性。對系統性種族主義保持沉默是不可行的。建立您相信的設計社區。

翻譯自: https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6