Creating beautiful, usable, and efficient UIs takes time, with many design revisions along the way. 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.

創建漂亮，可用和高效的UI需要花費時間，并且在此過程中進行了許多設計修訂。 不斷進行調整，以產生令您的客戶，用戶和您自己真正滿意的東西。 我知道。 我自己之前去過那里很多次。

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

但是我多年來發現的是，通過進行一些簡單的調整，您可以快速改進您要創建的設計。

In this follow up article (You can find Part 1 here), I’ve put together a small, and easy to put into practice, selection of tips that can, with little effort, not only help improve your designs today, but hopefully give you some handy pointers for when you’re starting your next project.

在這篇后續文章( 您可以 在這里 找到第1部分 )中，我整理了一些易于實踐的小技巧，這些技巧可以毫不費力地幫助您改進當今的設計，而且希望當您開始下一個項目時，會為您提供一些方便的指針。

Let’s dive on in for some more UI & UX goodness…

讓我們繼續深入研究UI和UX的更多優點……

1.如果文本看起來有點沉重，請使其變亮 (1. Lighten up your text if it looks a little on the heavy side)

When it comes to long-form content, certain Regular weight Typefaces can still look a little too heavy, and stark.

當涉及到長格式內容時，某些常規粗體字看起來仍然有些沉重和鮮明。

Easily fix this by opting for something like a Dark Grey (ie; #4F4F4F) to make that text a little easier on the eye.

通過選擇類似Dark Gray( 即＃4F4F4F )的內容，可以輕松地解決此問題，從而使文本在眼睛上看起來更容易些。

2。 字體大小越小，行高越大 (2. The smaller the font size, the more generous the line height)

As your font size decreases, increase the line height for better, all-round legibility.

隨著字體大小的減小 ， 增加 行高可以更好地全面理解。

The same applies to when your font size increases. Simply Decrease the line height.

當字體大小增加時也是如此 。 只需降低 行高即可 。

3.選擇一種基礎顏色，然后使用“色調和陰影”添加均勻性 (3. Choose a Base Colour, and then use Tints & Shades to add uniformity)

You don’t always have to stuff your design with a multitude of colours.

您不必總是用多種顏色來填充您的設計。

If the project allows it, simply using a restricted colour palette, by choosing a Base Colour and then using Tints and Shades, can add uniformity to your designs in the simplest of ways.

如果項目允許，只需使用受限的調色板，選擇“ 基礎顏色” ，然后使用“色調”和“陰影” ，就可以以最簡單的方式為您的設計增加一致性 。

4.突出最重要的元素 (4. Give prominence to the most important elements)

By using a combination of Font Sizes, Weights, and Colour, you can easily give prominence to the most important elements in your UI.

通過結合使用Font Sizes ， Weights和Color ，您可以輕松地突出 UI中最重要的元素。

Simple adjustments to make the user experience that little bit better.

進行簡單的調整即可使用戶體驗更好。

5.為了保持一致性，請確保您的圖標具有相同的視覺樣式 (5. For Consistency, make sure your Icons share the same visual style)

When implementing Icons in your UI, keep things consistent.

在用戶界面中實現圖標時，請保持一致 。

Make sure they all share the same visual style; the same weight, and either filled, or outlined.

確保它們共享相同的視覺風格 ; 相同的重量 ， 填充或勾勒輪廓 。

Don’t mix and match.

不要混搭。

6.始終將“號召性用語”放在屏幕上最突出的位置 (6. Always make your ‘Call to Action’ the most prominent item on the screen)

You think this would be common sense right? Erm. Not always I’m afraid.

您認為這是常識吧？ 恩 我并不總是害怕。

Make sure that ‘Call to Action’ is as prominent as possible, via the use of colour contrast, size, and labels.

通過使用顏色對比 ， 大小和標簽 ，確保“號召性用語”盡可能突出 。

Don’t always rely on Icons alone if you can. If you can use Text Labels too, use ’em, to enable much better user comprehension.

如果可以的話，不要總是僅依賴Icon 。 如果您也可以使用文本標簽 ，請使用'em，以實現更好的用戶理解 。

7.為您的表格錯誤添加額外的視覺輔助 (7. Add an extra visual aid to your Form Errors)

Adding an Error Message close to the action that the user has just taken can be a simple, but helpful, extra visual aid for when they’re filling out Forms of any kind.

在用戶填寫任何形式的表單時，在用戶剛剛執行的操作附近添加錯誤消息可能是一種簡單但有用的額外視覺幫助。

Every little helps right?

一點幫助都對嗎？

8.突出顯示菜單中最常用的操作 (8. Give Prominence to the most frequently used action in a Menu)

When designing a Menu to use inside of an application, make sure to give the most frequently used action (ie; Upload Image, Add File etc…) the most prominence on the screen.

設計要在應用程序內部使用的菜單時，請確保在屏幕上突出顯示最常用的操作 (即，上載圖像 ， 添加文件等)。

🚀 Want to create amazing UIs easier, and faster? Check out my Design System/Starter Kit: Cabana for Sketch & Cabana for Figma SPECIAL OFFER: Due to current events, please use the code CABANA30 to receive 30% OFF.

🚀 想更輕松，更快速地創建出色的UI？ 簽出我的設計系統/入門套件： 素描的 小屋和Figma的小屋 特別優惠：由于當前事件，請使用代碼CABANA30享受30％的折扣 。