Design trends are constantly changing, aren’t they? Each month there is a new visual effect or a trick that becomes “

設計趨勢在不斷變化，不是嗎？ 每個月都有一個新的視覺效果或技巧，成為“

My point of view is — as long as it’s accessible, as long as it’s useful, as long as the user understands it — it’s ok. Use all the trends you want and have fun. If every single digital product looked the same, it would be terribly dull.

我的觀點是-只要它是可訪問的，只要它有用，只要用戶理解就可以-沒關系。 使用所有想要的趨勢，并從中獲得樂趣。 如果每個數字產品看起來都一樣，那將是無聊的。

The key is to match the style of your product with your user group.

關鍵是使產品樣式與用戶組匹配。

Personally, I adore everything made with beautiful shadows and gradients. They make interfaces look alive and inviting. Elements with tonal transitions and shadows imitate what we perceive in real life — and that’s why they are more friendly and understandable even for non-tech-savvy users.

我個人很喜歡用美麗的陰影和漸變制成的所有東西。 它們使界面看起來生動有趣。 具有音調過渡和陰影的元素模仿了我們在現實生活中的感知-這就是為什么即使對于不懂技術的用戶來說，它們也更加友好和易于理解的原因。

In this article, I want to share my ways of achieving nice UI effects and overall visual “feeling” of lightweight, friendly interface design. I’ve created a fake “Financial App for teenagers/young adults” as an example.

在本文中，我想分享實現良好的UI效果以及輕巧，友好的界面設計的整體視覺“感覺”的方式。 我創建了一個假的“青少年/年輕人金融應用程序”作為示例。

Let’s get to it!

讓我們開始吧！

一般視覺一致性 (General visual consistency)

How to make our design look sleek and consistent? Start with preparing this:

如何使我們的設計看起來圓滑而一致？ 首先準備：

1. Choose colors you want to use (think delicate pastels for a background, CTA that would be a very contrasting color, more delicate colors for secondary elements, and a pop of color for accents).

1.選擇您要使用的顏色 (請考慮使用柔和的粉彩作為背景，將CTA用作對比強烈的顏色，將輔助元素使用更精細的顏色，并使用重音作為色調)。

2. Choose a font(s) you want to use (I used Brandon Grotesque, which is one of my favorite fonts — it has such a friendly, playful vibe, and it’s readable at the same time). Create a few font sizes (preferably up to 5 and don’t exceed that limit) — bigger size for titles and subtitles, smaller for content, the smallest one for least essential details. You can mix lowercase with uppercase (try not to use uppercase for long sentences because it can negatively impact readability — it looks the best on buttons).

2.選擇您要使用的字體(我使用了Brandon Grotesque，這是我最喜歡的字體之一-它具有友好，有趣的氛圍，并且可以同時讀取)。 創建一些字體大小(最好不超過5個，并且不超過該限制)-標題和字幕的大小較大，內容的大小較小，最小的基本細節最小。 您可以將小寫字母與大寫字母混合使用(盡量不要在大寫句子中使用大寫字母，因為這會對可讀性產生負面影響-在按鈕上看起來最好)。

3. Decide on how deep/blurred you want your shadows to be.

3.確定您想要陰影的深度/模糊度 。

4. If you are using icons, decide whether you want to use solid or outlines. Try not to mix them.

4.如果使用的是圖標，請確定要使用實體還是輪廓。 盡量不要混在一起。

By now, you created your little design-system. How cool! 😎

至此，您已經創建了您的小型設計系統。 挺酷的！ 😎

Now you should stick to it.

現在，您應該堅持下去。

實現元素上柔和夢幻的氛圍 (Achieving that soft, dreamy vibe on elements)

When designing an interface, remember that sharp edges make the interface look more serious and “professional.” Rounded corners work the opposite way — it makes the interface look less serious, more playful, and carefree.

在設計界面時，請記住，銳利的邊緣會使界面看起來更加嚴肅和“專業”。 圓角以相反的方式工作-它使界面看起來不那么嚴肅，更有趣和無憂無慮。

What also makes our design look delicate and lightweight are those smooth, deep shadows. When we add shadows to elements, we create a visual hierarchy. Items that cast a bigger, deeper shadow, are the ones that are nearer to us. Elements that cast a delicate, light shadow, are those that are closer to the surface. That’s why only a few elements should cast a deep shadow, and the rest should work as a background — any other way it will just look unnatural!

那些光滑，深色的陰影也使我們的設計看起來精致輕巧。 當我們向元素添加陰影時，我們會創建一個視覺層次。 投下更大，更深的陰影的物品是離我們最近的物品。 投射出細膩光影的元素是靠近表面的元素。 這就是為什么只有少數幾個元素應該投射出深深的陰影，而其余的元素應該作為背景的原因-不管怎樣，它看起來都不自然！

Choose the element and give it a blur effect. Don’t be afraid and play with the numbers. Here are mine on different elements I used in my interface:

選擇元素并為其賦予模糊效果。 不要害怕，玩數字。 以下是我在界面中使用的不同元素：

If you want your shadows to look even more fanciful, make the shadow have the same color as the element that casts it, then lower the opacity. Ideally, the background would have a similar tone, too.

如果要使陰影看起來更加虛幻，請使陰影具有與投射陰影的元素相同的顏色 ，然后降低不透明度。 理想情況下，背景也應具有類似的色調。

使漸變看起來更平滑細膩 (Making gradients look more smooth and delicate)

To make gradients look well, I chose the opposing colors from the same color palette. It can even be the same color, but make one of the colors brighter and add some Hue (H) to it (5 to 10 points). Now, stretch the anchors of the gradient, so that the color transition becomes very smooth. The gradient will be barely visible but still makes the element look a little convex.

為了使漸變看起來更好，我從同一調色板中選擇了相反的顏色。 它甚至可以是相同的顏色，但可以使其中一種顏色更亮，并為其添加一些色相(H)(5至10點)。 現在，拉伸漸變的錨點，以便顏色過渡變得非常平滑。 漸變幾乎看不見，但仍使元素看起來有點凸。

For white elements, make a gradient using white and a very delicate color that matches the background. Just make sure it has enough contrast and doesn’t blend too much.

對于白色元素，請使用白色和與背景相匹配的非常精美的顏色進行漸變。 只要確保它具有足夠的對比度并且不會融合太多即可。

選擇正確的字體顏色，使其與背景匹配。 (Choose the right color for the font, so it matches the background.)

Black and monochrome grays are classic font colors used for content, but to make the font visually match the background, add a pop of color. For example — if we have a green background, add a little bit of green to the grey. It will look way more paired!

黑色和單色灰色是用于內容的經典字體顏色，但是要使字體在視覺上與背景匹配，請添加某種顏色。 例如，如果背景為綠色，則在灰色處添加一點綠色。 看起來會更加配對！

考慮一些使您的項目更具吸引力的細節。 (Think about the little details that will make your project more appealing.)

They may not be necessary at all. You may as well skip it, and your design will be ok, too. But personally, I love all the little things and details that make the interface look delightful and engaging. I like the feeling that somebody actually put some effort and added a little “extra” to the design.

它們可能根本沒有必要。 您也可以跳過它，您的設計也可以。 但就我個人而言，我喜歡使界面看起來令人愉悅且引人入勝的所有小細節。 我喜歡有人實際上付出了一些努力，并在設計上添加了一些“額外”的感覺。

So, what can it be? 🤔

那會是什么呢？ 🤔

Let’s suppose you have a boring shape that works as a header for your interface. Make it rounded and add a little triangle. It looks like a speech bubble now. So the interface is visually speaking to you.

假設您有一個無聊的形狀，可以用作界面的標題。 使它變圓并添加一個小三角形。 現在看起來像氣泡。 因此，界面在視覺上與您對話。

Simple white background? Add something that will make it more entertaining. It can be a simple icon that you’ve copied and pasted a few times and created a pattern. Just make sure it doesn’t make the content less readable.

簡單的白色背景？ 添加一些東西，使其更具娛樂性。 它可以是一個簡單的圖標，您已經復制并粘貼了幾次并創建了圖案。 只要確保它不會降低內容的可讀性即可。

Boring data? Make the transaction list look like a little receipt on a timeline.If you can, add some icons to represent different types of information visually.Go for whatever makes your interface look more creative — the possibilities are infinite. If you don’t have an idea, search for inspiration in real-life items and processes.

無聊的數據？ 使事務列表看起來像時間軸上的小收據。如果可以的話，添加一些圖標以直觀地表示不同類型的信息。尋找使界面看起來更具創意的東西-無限的可能性。 如果您沒有想法，請在現實生活中的物品和過程中尋找靈感。

另外，您需要更改用戶頭像上的顏色，使其與界面匹配。 (Be so extra, that you change colors on your user’s avatar, so it matches the interface.)

This step is likely completely unnecessary, but I do it every damn time. I just can’t help it.

此步驟可能完全不必要，但我該死的每一次都這樣做。 我就是無能為力。

Sometimes I find a beautiful photo of a face for my user. But the color of the eyes, or the makeup, are not matching with the rest of the interface. It upsets my perfectionist soul. 😫 So I use a color picker tool, and I grab some colors from the interface. Let’s say, green for the eyes, red for the lips. I create shapes for eyes and lips, so they cover the ones on the photo. I color them, switch blending mode to “Color” and lower opacity to 50%.

有時，我會為用戶找到一張漂亮的臉部照片。 但是眼睛的顏色或妝容與界面的其余部分不匹配。 它使我的完美主義者不高興。 😫因此，我使用顏色選擇器工具，并從界面中獲取一些顏色。 假設綠色代表眼睛，紅色代表嘴唇。 我為眼睛和嘴唇創建形狀，以便它們覆蓋照片上的形狀。 我給它們上色，將混合模式切換為“顏色”，并將不透明度降低到50％。

Tada! ? Now the avatar is perfect.

多田 ?現在，頭像是完美的。

Despite the style you use for your interface, consistency, accessibility, and usability are the most critical factors. Make sure that your design meets those rules, and use your imagination to create stunning, creative, outstanding interfaces that your users will love!

盡管您使用了界面風格，但最重要的因素還是一致性，可訪問性和可用性。 確保您的設計符合這些規則，并利用您的想象力來創建用戶會喜歡的驚人，創意，出色的界面！

Thanks for reaching the end of the article. I hope it was exciting and helpful!

感謝您到達本文的結尾。 我希望這是令人興奮和有益的！

你喜歡這篇文章嗎？ 😊 (Did you like this article? 😊)

I just released a >📚 UI DESIGN BOOK 📚<I 🖋 write about design and I’m a 👩🏻?🔧 co-founder/lead designer at HYPE4 design-driven software agency!

我剛剛發布了>📚 UI設計圖書 📚<我🖋 寫的設計 ，我在👩🏻🔧共同創始人/首席設計師HYPE4設計驅動的軟件代理！