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％的折扣 。 即將結束！