當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/29 编程问答 43 豆豆

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

網(wǎng)卡驅(qū)動程序設(shè)計

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

Close. But no, not exactly.

關(guān)。但是不，不完全是。

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.

我們正在談?wù)撚脩艚缑嫘g(shù)語中的“卡片”。盡管UX中卡的概念是由其現(xiàn)實生活中的對應(yīng)對象啟發(fā)而來的，但這并非不正確。

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

那么用UI / UX術(shù)語來說是什么卡呢？ 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.

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

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.

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

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

我已經(jīng)意識到，卡片是交互設(shè)計和視覺設(shè)計的基礎(chǔ)知識之一。

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的產(chǎn)品(無論是應(yīng)用程序還是網(wǎng)站)的組成部分。它們就像用戶界面的小樂高積木。

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.

在呈現(xiàn)異構(gòu)數(shù)據(jù)集合時，我遇到的站點或應(yīng)用程序很少，它們不使用某種形式的卡片布局。

卡的基本結(jié)構(gòu) (Basic Anatomy of a Card)

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

1.標(biāo)題文字 (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.

這是您的卡摘要。乍一看，用戶必須知道卡的用途。標(biāo)題應(yīng)該簡短明了。

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

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

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.專家提示：調(diào)整文本字段的寬度，以使最后一行沒有孤立或懸空的單詞。

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.

如果需要向用戶傳達(dá)更多信息，則可以添加第三行文本。這應(yīng)該是非必要的數(shù)據(jù)。

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

確保在所有所有文本層之間保持可見的層次結(jié)構(gòu)。

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.

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

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.

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

6.標(biāo)簽/標(biāo)簽/狀態(tài)指示器 (6. Tags / Labels / Status Indicator)

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

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

Examples of these are:

這些示例包括：

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

Commonly used tags in consumer apps消費者應(yīng)用中的常用標(biāo)簽

設(shè)計卡片的提示 (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.

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

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?

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

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

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.

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

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.

卡的整體結(jié)構(gòu)不得更改。熟悉和重復(fù)是關(guān)鍵-用戶的眼睛應(yīng)該可以輕松掃描您的卡。

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張卡片，就可以預(yù)測第100張卡片的標(biāo)題將出現(xiàn)在何處。

4.確保您的卡規(guī)模 (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.

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

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.

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

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

一組 內(nèi) 的卡片必須是統(tǒng)一的，但是， 不同組之間不必是統(tǒng)一的。

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.

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

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:

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

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?
懸停時會發(fā)生什么？

Ask the questions, and define the rules.

提出問題，并定義規(guī)則。

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

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.

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

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.
確保用戶能夠在一組卡片之間跳轉(zhuǎn)，并且不被迫在每個卡片元素之間進(jìn)行切換以繼續(xù)。
Ensure clickable areas are fat-finger friendly.
確保可點擊區(qū)域適合胖手指。

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

蘋果建議最小目標(biāo)尺寸為44像素乘44像素，而Android設(shè)備的最小目標(biāo)尺寸為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.

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

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.專家提示：避免左側(cè)的卡設(shè)計。轉(zhuǎn)換為從右到左閱讀的語言(例如阿拉伯語)將是一場噩夢。嘗試遵循右側(cè)的卡設(shè)計。

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!

為了創(chuàng)新，我們必須開箱即用。但是，在違反或改變規(guī)則之前，我們必須首先學(xué)習(xí)并掌握它們。一旦掌握了最基本的知識，設(shè)計卡片就可以輕而易舉了。祝好運(yùn)！

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

https://material.io/components/cards

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

有關(guān)可訪問性的更多信息： https : //webaim.org/

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

有關(guān)本地化的更多信息 ： 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.海灣地區(qū)黑人設(shè)計師：一個專業(yè)的黑人開發(fā)社區(qū)，他們是舊金山灣區(qū)的數(shù)字設(shè)計師和研究人員。通過在社區(qū)中團(tuán)結(jié)起來，成員可以共享靈感，聯(lián)系，同伴指導(dǎo)，專業(yè)發(fā)展，資源，反饋，支持和韌性。對系統(tǒng)性種族主義保持沉默是不可行的。建立您相信的設(shè)計社區(qū)。

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