soup ui使用指南_如何为D2C网站现代化ui快速指南-CSDN博客

soup ui使用指南

In the past decade, we’ve seen a big shift in global consumerism, as witnessed in the acute rise of online shopping as a preferred method to the traditional brick and mortar ones due to the convenience it offers. Nowadays, when prospective buyers visit an e-commerce site, they are not only expecting to buy a product, but they also expect to be met with a smooth, pleasant, conducive, hassle-free and -hopefully- a memorable experience.

在过去的十年中，我们看到了全球消费主义的巨大转变，见证了在线购物的迅猛发展，由于其提供的便利性，在线购物已成为传统实体店的首选方法。如今，当潜在买家访问电子商务站点时，他们不仅希望购买产品，而且希望获得平稳，愉快，有益，无忧且希望的令人难忘的体验。

Thus, it suffices to say that they are buying not only the product but the experience as well. Therefore, it is vital that your website reflects and provides those qualities, besides just merely providing a great UX site that’ll guide them through the “purchase tunnel”. One must always keep in mind that the overall UI design is just as equally important. People oftentimes visit a site for its eye-candy properties, and often with the intent and interest to see if the product is worth the try.

因此，只要说他们不仅在购买产品，而且也在购买体验就足够了。因此，至关重要的是，您的网站必须反映并提供这些品质，而不仅仅是提供一个出色的UX站点来引导他们通过“购买通道”。必须始终牢记，整个UI设计同样重要。人们通常会因为其糖果色特性而访问该站点，并且经常有意图和兴趣来查看该产品是否值得尝试。

以下是一些建议和建议，您可以在创建或升级直接到消费者的站点时考虑这些建议和建议。 (Here are some suggestions and recommendations that you can consider while creating or modernizing your Direct to Consumer Sites.)

Disclaimers: The following guide is the result of research conducted over 40+ D2C sites; and while it may not cover the complete range of products available, this guide’s purpose is to show you the current 2019/2020 trends of modern UI for your consideration while designing or redesigning your site.

免责声明：以下指南是在40多个D2C网站上进行的研究结果； 尽管本指南可能无法涵盖全部可用产品，但本指南的目的是向您显示现代UI的当前2019/2020趋势，供您在设计或重新设计网站时考虑。

不要害怕大局 (Don’t be afraid of the big picture)

Images used on your site sets the tone of your brand. Especially on the landing section, your goal would be to make that first wow impression. Go with a big picture, make it memorable, make it big with a minimal copy to keep your customers scrolling. Don’t try to overwhelm them by feeding them too much information. Rely on the big picture instead as an opening of your brand’s story.

您网站上使用的图像确定了品牌的基调。尤其是在着陆区，您的目标将是赢得第一印象。放眼大局，让它令人难忘，以最小的副本变大，以使客户不断滚动。不要试图通过给他们提供太多信息来压倒他们。而是依靠大局作为品牌故事的开场白。

Image for post — Warby Parker — close up background video of Scout contact lens Warby Parker —关闭了侦察员隐形眼镜的背景视频

使其可访问 (Make it accessible)

It’s 2020. It’s time we design for accessibility and inclusivity. There are 57 million Americans who have a disability of some sort. A few of them being vision loss, hearing loss, the lack of ability to use a mouse, keyboard and more. You may think that disable users are a minority (or a myth!) but, in reality, 54% of adults living with a disability go online, as a survey conducted by Princeton Survey Research Associates International, Jan. 2011, has stated. Do research on how to begin design for accessibility at Web Content Accessibility Guidelines, and update your knowledge on Web Accessibility Evaluation Tools List. Besides being considerate on colors, contrast ratio, readability, font size…etc while modernizing your site, try to think about how to incorporate site consistency, site structure, adding full keyboard accessibility, and alternative text to accommodate your disabled customers.

现在是2020年。是时候设计可访问性和包容性了。有5700万美国人患有某种残疾。其中一些是视力障碍，听力障碍，无法使用鼠标，键盘等。您可能会认为残障用户是少数(或神话！)，但实际上，正如2011年1月普林斯顿调查研究协会国际进行的一项调查显示，有54％的残障成年人上网。在Web Content Accessibility Guidelines上研究如何开始设计可访问性，并更新有关Web Accessibility Evaluation Tools List的知识。在现代化网站时，除了要考虑颜色，对比度，可读性，字体大小等因素外，还要尝试考虑如何整合网站一致性，网站结构，增加完整的键盘可访问性以及替代文本以适应残障客户。

Source: interactiveaccessibility.com

资料来源：interactiveaccessibility.com

Quip — Example of an accessible homepage for people with hearing or vision loss; using ChromeVox Quip —为听力或视力障碍者提供的可访问主页的示例；使用ChromeVox

别太刻板 (Don’t be too literal)

Literally, don’t be too literal. If you are selling vitamin pills, the images do not necessarily need to show a person who’s about to drink it. Instead, make it abstract, make it fun, make it a lifestyle.

从字面上看，不要太刻板。如果您正在出售维生素药丸，则图像不一定需要显示要喝的人。相反，使其变得抽象，使其变得有趣，使其成为一种生活方式。

Also, ditch those outdated stock photos. Invest in a photo shoot; it’s going to be worth every cent!

另外，弃用那些过时的库存照片。投资拍照；这将值得每一分钱！

讲一个故事 (Tell a story)

Leave a space on your site to share your mission and story. The story of your brand and your commitment would leave such an impact on the customer and their impression of your brand. Are you changing the world with your focus on sustainability? Do tell!

在您的网站上留出空间来分享您的使命和故事。您品牌的故事和您的承诺将对客户及其对您品牌的印象产生影响。您是否正在关注可持续性来改变世界？一定要告诉！

展示真正的英雄 (Showcase the real heroes)

Highlight the heroes behind the scene. Tell their personal story, their mission and their commitment to the product/service. By bringing out the authenticity of your brand, you are delivering more credibility and earning more trust from your customers. (Also, can we all agree that real people are so much better than bad stock photos?)

突出显示幕后英雄。讲述他们的个人故事，他们的使命以及对产品/服务的承诺。通过展现品牌的真实性，您将提供更多的信誉并赢得客户的更多信任。 (此外，我们都可以同意，真实的人比劣质的照片要好得多吗？)

吹嘘善良 (Brag about the goodness)

Make sure your product ingredient is clear and loud. Is it cruelty-free? Make sure that it resonates loudly to everyone who’s hearing. List out your ingredients and all the beneficial qualities about them to help educate your customers and why they should consider your products.

确保您的产品成分清晰且响亮。它没有残酷吗？确保它能引起所有人的共鸣。列出您的成分以及所有有益成分，以帮助教育您的客户以及他们为什么要考虑您的产品。

透明 (Be Transparent)

If this is how it works, make an attempt to show exactly how it works. If the pricing is a certain amount, make sure it remains as that amount. People are now well aware of the dark UX (or A**hole Design), and no-one likes the fine print. Providing clear, upfront information from the start to your customers will be the best method in gaining credibility and trust for your brand. It also promotes ease in their decision making when they are able to understand it with clarity.

如果这是它的工作方式，请尝试确切显示它的工作方式。如果定价是一定数量，请确保将其保留为该数量。人们现在已经很清楚深色的UX(或A ** hole设计) ，没有人喜欢精美的打印。从一开始就向客户提供清晰，预先的信息，这将是获得品牌信誉和信任的最佳方法。当他们能够清楚地理解决策时，它也可以简化决策过程。

体验就是一切 (The experience is everything)

In addition to your product photos, be sure to include extra images and content which are able to showcase and highlight the experience of using the product. i.e If it’s a mattress or a blanket, show how people are enjoying them. If it’s a waxing kit, don’t just show the kit, show the waxing experience including before and after images. Give your customers an opportunity to get a view of their future experience.

除了产品照片之外，请确保还包括其他图像和内容，这些图像和内容能够展示和突出使用产品的体验。即，如果是床垫或毯子，请说明人们如何享受它们。如果是打蜡工具，则不仅要展示工具，还要显示打蜡体验，包括之前和之后的图像。给您的客户一个机会，以了解他们的未来经验。

一点幽默不会伤害 (A little bit of humor won’t hurt)

In addition to investing in good copywriting, consider injecting a bit of humor if and when it’s appropriate according to the specific product. People usually enjoy a good laugh and so, it will potentially create a longer-lasting impression of your brand.

除了投资于良好的文案写作外，还可以考虑根据特定产品在适当的时候添加幽默感。人们通常会开怀大笑，因此，这可能会给您的品牌留下更持久的印象。

拥抱真实性 (Embrace authenticity)

Stay true and do not mislead. Photoshopping imperfection is a thing of the past. Nowadays, customers look for that organic, authentic experience that is more relatable to them. By overly photoshopping your images (which your customers can definitely spot), it will, in reality, have an adverse effect instead, especially when an unexpected standard is set.

保持真实，不要误导。 Photoshop的缺陷已成为过去。如今，客户正在寻找与他们更相关的有机，真实的体验。通过过度照相购物(您的客户肯定可以发现)图像，实际上它将产生不利影响，特别是在设置了意外标准时。

展示包装 (Show off the packaging)

Consumers care about the unboxing experience. Consumers are no longer thrilled in receiving just a bland brown box. Instead, give them a tease of what a memorable unboxing experience is like. Showcasing your product’s branded packaging through images, gifs, and looped videos are the way to hype them up.

消费者关心拆箱体验。消费者不再为只收到一个淡褐色的盒子而高兴。取而代之的是给他们一个难忘的拆箱体验。通过图像，GIF和循环播放的视频展示产品的品牌包装是宣传它们的方法。

卖出一种生活方式 (Sell a lifestyle)

Don’t just highlight the products, but instead, add and highlight the lifestyle that comes along with it. Instead of just showing a listing of suitcases, Away makes an effort to highlight and include people traveling to various hotspots with their suitcases. Thus, when you sell a lifestyle alongside the products you carry, your customers are able to visualize and imagine themselves in it.

不仅要突出产品，而且要添加并突出其附带的生活方式。 Away不仅着重展示行李箱清单，还着重突出并囊括了随身携带手提箱前往各个热点地区的人们。因此，当您将生活方式与所携带的产品一起出售时，客户便可以在其中进行可视化和想象。