收据html_香港专业教育学院得到了收据-CSDN博客

收据html

When it comes to design, email is not sexy. Sure, newsletters have become a lot more aesthetically pleasing in recent years, but designing a simple, straightforward, good looking email is harder than it sounds.

在设计方面，电子邮件并不性感。当然，近几年来，新闻通讯在美学上变得更加令人愉悦，但是要设计一个简单，直接，美观的电子邮件比听起来要难得多。

For this week’s challenge, I decided to take on a redesign for what is possibly one of the least interesting of all types of emails: receipts. Even though many of us have been purchasing online for years and we receive email receipts often, they are rarely something to write home about. So I went fishing for one that could use a little bit of love in my inbox archive.

对于本周的挑战，我决定对所有类型的电子邮件中最不有趣的一种：收据进行重新设计。即使我们许多人已经在网上购物多年了，并且我们经常收到电子邮件回执，但这些回执很少写在家里。因此，我去钓鱼了，可以在收件箱存档中使用一点点爱。

In March, I was pretty sick. Testing for COVID in NYC was still not widespread and I wasn’t sure if I had it or not, but I figured it couldn’t hurt to have a Telehealth visit — so I signed up for one through MDLive. The experience itself was great, but the receipt I received afterwards left me wanting.

三月份，我病得很厉害。在纽约市进行COVID的测试仍不广泛，我不确定是否要使用它，但是我认为进行远程医疗访问不会有伤害-因此我通过MDLive签约了。体验本身很棒，但是我后来收到的收据让我很想不到。

An email receipt from Telehealth provider MDLive. — MDLive’s current email receipt

There’s nothing inherently wrong with this email receipt — the layout is simple and all the information you would expect is there, but I thought the layout could be improved and specifically that the hierarchy of information could be rejiggered to better guide the user’s eye to the most crucial information.

电子邮件收据没有本质上的错误-布局很简单，并且您希望得到的所有信息都在其中，但是我认为可以改进布局，尤其是可以重新调整信息的层次结构，从而更好地引导用户的视线重要信息。

In looking for design inspiration for this challenge, I didn’t have to look any farther than my own inbox again. One of the best-looking receipts I found came from companies that use Stripe (the credit card processing company) as their vendor.

在寻找这一挑战的设计灵感时，我不必再比我自己的收件箱看起来更远了。我发现的最好看的收据之一来自使用Stripe(信用卡处理公司)作为供应商的公司。

An email receipt for The Atlantic, as provided by Stripe. — A receipt for The Atlantic, as supplied by Stripe

I liked a lot of what I saw here, particularly with the dollar amount, date paid, and payment method clearly listed across the top of the message. I decided that I would take a page out of Stripe’s book for my redesign.

我喜欢这里看到的很多内容，特别是在消息顶部清楚列出了美元金额，付款日期和付款方式。我决定从Stripe的书中抽出一页来进行重新设计。

To start, I grabbed all the text from the MDLive receipt and compared it to what was presented in the Stripe email. Then, I more throughly read through both to see what information was common across each one, and in particular: what was vital, what was less vital, and what maybe could be removed entirely. After that, I began pruning and rearranging the information from the MDLive receipt.

首先，我从MDLive收据中获取了所有文本，并将其与Stripe电子邮件中显示的内容进行了比较。然后，我更通透地阅读了两者，以了解彼此之间共有哪些信息，尤其是：哪些是至关重要的，哪些是较不重要的，哪些可以完全删除。之后，我开始修剪和重新排列MDLive收据中的信息。

One thing I didn’t like about the MDLive receipt was how it was formatted like an email from a friend (with a salutation). I don’t know about you, but when I get a corporate receipt, I don’t really feel like it needs to be personalized as if it’s a real letter.

我不喜欢MDLive收据的一件事是它的格式像是来自朋友的电子邮件(称呼)。我不了解您，但是当我收到公司收据时，我真的不觉得需要对其进行个性化处理，就像是一封真实的信件一样。

I then took note of redundant information, such as the phone number being listed twice within very close proximity. I also decided to consolidate some of the language such as “A receipt of your consultation is below” to “Consultation receipt” as a simple header at the top of the email, replacing “Transaction Receipt.” Other copy that I changed included (again taking a page out of Stripe’s book):

然后，我记下了多余的信息，例如在非常接近的位置列出了两次电话号码。我还决定将某些语言(例如“咨询收据在下面”)合并为“咨询收据”，作为电子邮件顶部的简单标头，代替“交易收据”。我更改的其他副本包括(再次从Stripe的书中取出一页)：

Making the three biggest pieces of payment information specifically include the word “paid” — with different font weights
付款信息的三大部分具体包括“已付”一词-不同的字体粗细
Adjusting “Be sure to keep it in a safe place for further reference” to something a tad more adult: “Please keep this email receipt for your medical records.”
调整“确保将其保存在安全的地方以备将来参考”以适应更多成年人：“请保留此电子邮件收据作为您的病历。”
Changing “Your credit card has been charged by MDLIVE Medical Group PA” to the clearer “The consultation charge will show up on your statement as MDLIVE MEDICAL GROUPSUNRISE FL” — particularly since that’s both more useful, and also more accurate — when I went to look back at my statement it was listed as that, and not as “MDLIVE Medical Group PA”
将“您的信用卡已由MDLIVE Medical Group PA收取”更改为更清晰的“咨询费用将以MDLIVE MEDICAL GROUP SUNRISE FL的形式显示在您的对帐单上”，尤其是因为这样做既有用又准确，因为我去了回头看看我的陈述，它被列为那样，而不是“ MDLIVE Medical Group PA”

Here’s my redesign, followed by a side-by-side comparison with the original:

这是我的重新设计，然后是与原始设计的并排比较：

A redesign concept of the MDLive email receipt, with a more central focus on important pieces of information.

A side-by-side screenshot comparison of the original email receipt and the redesign concept. — Original MDLive Email Receipt (Left) and my redesign (Right)

One other thing I decided to do was simplify the original footer (aside from the legalese, which I’m sure could be pruned too, but I’m no lawyer!) by stripping out the social media buttons.

我决定要做的另一件事是，通过删除社交媒体按钮来简化原始页脚(除了法文，我敢肯定也可以删掉，但我不是律师！)。

I did this mostly because it seemed unnecessary to me — I can’t think of why I would want to visit MDLive’s Instagram from a receipt I received. Obviously, there are other emails from other types of companies where it would be appropriate to link to those sites, but I thought it was just a little silly.

我这样做主要是因为这对我来说似乎不必要-我想不出为什么要从收到的收据中访问MDLive的Instagram。显然，还有其他类型公司的电子邮件可以链接到这些网站，但是我认为这有点愚蠢。

As far as the typeface, I decided to enhance the overall legibility with the font “Inter” — one of my favorite new fonts, designed for screens specifically.

至于字体，我决定使用“ Inter ”字体来增强整体可读性，该字体是我最喜欢的新字体之一，专门为屏幕设计。

Although my redesign is very simple and straightforward, I did decide to add a couple pops of the logo’s orange color to their website link and phone number at the bottom to provide some brand consistency, and to also be more noticeable if the user needs to locate this information.

尽管我的重新设计非常简单明了，但我还是决定在徽标的网站链接和底部的电话号码中添加一对徽标的橙色弹出按钮，以提供一定的品牌一致性，并且在用户需要定位时也更加引人注目这个资讯。

Finally, to tie it all together I decided to add a border with a variation of the gray color from their logo just to give the email a little more pop and to tighten the user’s focus on the important information that’s front and center.

最后，为了将它们结合在一起，我决定在其徽标上添加带有灰色变体的边框，以使电子邮件更加流行，并让用户将注意力集中在前端和中间的重要信息上。

For something pretty boring on the surface, I had a lot of fun redesigning this receipt. As counter-intuitive as it might seem, everything we interact with on the web was designed by someone. Even when it’s something as simple as an email receipt, someone had to make decisions on layout, fonts, colors, etc. But boring things often still contain important information, and deserve just as much attention as the apps, sites, and services we interact with every day. After all, email receipts aren’t going anywhere anytime soon.

对于表面上有些无聊的东西，重新设计这张收据给我带来了很多乐趣。尽管看起来违反直觉，但我们在网络上与之交互的所有内容都是由某人设计的。即使只是简单的电子邮件收据，也要有人决定布局，字体，颜色等。但无聊的东西通常仍包含重要信息，应与我们交互的应用程序，网站和服务一样受到关注与每一天。毕竟，电子邮件收据很快就不会寄到任何地方。