Creating beautiful, usable, and efficient UIs takes time, with many design revisions along the way.

创建漂亮，可用和高效的UI需要花费时间，并且在此过程中进行了许多设计修订。

Making those constant tweaks to produce something that your clients, users, and yourself are truly happy with. I know. I’ve been there many times before myself.

不断进行调整，以产生令您的客户，用户和您自己真正满意的东西。 我知道。 我自己之前去过那里很多次。

But what I’ve discovered over the years is that by making some simple adjustments you can quickly improve the designs you’re trying to create.

但是我多年来发现的是，通过进行一些简单的调整，您可以快速改进您要创建的设计。

In this follow up article (You can find Parts 1 & 2 here, and here), I’ve once again put together a small, and easy to put into practice selection of tips that can, with little effort, help improve both your designs (UI), and the user experience (UX).

在这篇后续文章( 您可以 在此处 和 此处 找到第1和2部分 )中，我再次整理了一些 易于实践的小技巧，这些技巧可以毫不费力地帮助您改进两个设计(UI)和用户体验(UX) 。

Let’s dive on in…

让我们潜入……

1.从您的图像中进行颜色选择，使您的产品栩栩如生 (1. Colour-Pick from your images, and bring your products to life)

Simply colour-picking from your product images, and then applying various tints and shades of your chosen colour to your background, text, icons or more, can add plenty of visual interest, and character to your designs.

只需从你的产品图片颜色采摘 ，然后将你选择的颜色的各种色彩和色调 ，以你的背景 ， 文本 ， 图标或更多，可以补充充足的视觉兴趣 ， 性格和你的设计。

2.尝试在Mobile上创建宽敞的Tappable区域 (2. Try to create generous Tappable areas on Mobile)

When designing for Mobile try to create Tappable Areas large enough for fingers to, well, tap successfully.

在为Mobile设计时，尝试创建足够大的Tappable区域 ，以使手指可以成功点击。

Things can be challenging for Buttons, and Links that consist only of Text so try to go for an Icon with a Label whenever possible.

对于Buttons和仅包含Text的链接而言 ，事情可能具有挑战性，因此请尽可能尝试带标签的Icon 。

Here’s the minimum recommended Tap Areas for both iOS and Android…

这是同时适用于iOS和Android的最低建议分接区域 …

44 x 44pt for iOS

iOS为44 x 44pt

48 x 48dp for Android

Android的48 x 48dp

3.保持浅色文字和图像之间的对比度可接受 (3. Keep the contrast ratio acceptable between light text, and images)

Always make sure light text is legible against, well, lighter image backgrounds.

始终确保浅色文本在较浅的图像背景下清晰可见 。

Simply applying a slightly opaque darkened background behind your text will keep a good contrast ratio between those elements.

只需在文本后面应用稍微不透明的深色背景 ，即可在这些元素之间保持良好的对比度 。

It also allows you to easily switch between dark, and light images without the hassle of changing the text colour.

它还使您可以轻松地在深色和浅色图像之间切换 ，而无需更改文本颜色。

4.查看这些很棒的字体； 非常适合您的设计标题 (4. Check out these great Fonts; Perfect for Headlines in your designs)

Here’s a selection of Serif, and Sans-Serif Commercial Fonts that I’ve used many times before, and found they work really well for Headlines, bringing a bit of warmth, and character to any design.

这是我以前使用过的Serif和Sans-Serif商业字体的精选，发现它们确实非常适用于Headlines ，为任何设计带来了温暖和特色。

You can find them at fonts.adobe.com (No, I’m not getting any commission).

您可以在fonts.adobe.com上找到它们(不，我没有得到任何佣金)。

5.查看这些很棒的字体； 非常适合设计中的车身复制 (5. Check out these great Fonts; Perfect for Body copy in your designs)

Behold a small selection of both Serif, and Sans-Serif Commercial Fonts that I’ve used consistently for long-form Body text, and highly recommend.

看一下我一直用于长形正文文本的 Serif和Sans-Serif商业字体的一小部分，并强烈推荐。

You can find them over at fonts.adobe.com (No, I’m still not getting any commission).

您可以在fonts.adobe.com上找到它们(不，我仍然没有得到任何佣金)。

6.对于下载指示器，请尝试提供尽可能多的信息 (6. For Download Indicators, try to be as informative as possible)

The one time you don’t want to go with the super ‘Minimal’ look is when it comes to Download Indicators.

一次您不想要超级“最小”外观的地方就是下载指标 。

For the user, try to make your Download Indicators as informative, and user-friendly as possible.

对于用户，请尝试使您的下载指示器具有更多的信息性和用户友好性 。

You can achieve this via the use of colour, a percentage figure to show the current progress, and a simple icon giving them the ability to cancel the download at any time.

您可以通过使用color ，一个显示当前进度的百分比数字以及一个使他们可以随时取消下载的简单图标来实现此目的。

🚀 想更轻松，更快速地创建出色的UI？ (🚀 Want to create amazing UIs easier, and faster?)

Check out my Design System Kit: Cabana for Sketch & Cabana for Figma SPECIAL OFFER: Due to current events, please use the code CABANA30 to receive 30% OFF. ENDING SOON!

查看我的设计系统套件： 素描的 小屋和Figma的小屋 特别优惠：由于当前事件，请使用代码CABANA30享受30％的折扣 。 即将结束！