There is no modern interactive UI without buttons. They are an fundamental part of every digital solution. Learn how to improve the style of your buttons and delight users with perfect style.

沒有按鈕，就沒有現代的交互式UI。 它們是每個數字解決方案的基本組成部分。 了解如何改善按鈕的樣式并以完美的樣式使用戶滿意。

This is the next tutorial from the series of quick tips that enhances your design. Read the first part.

這是增強您的設計的一系列快速提示中的下一個教程。 閱讀第一部分。

1.選擇形狀 (1. Choose a Shape)

Buttons may be filled ones or just ghost buttons with stroke, but choosing the shape is the first step to create a better button. This may be a sharp rectangle or rounded one. It may be circular or mixed with some fancy unique shape.

按鈕可以是實心按鈕，也可以是帶有筆觸的幻影按鈕，但是選擇形狀是創建更好按鈕的第一步。 這可以是一個尖銳的矩形或圓形的。 它可以是圓形的，也可以與某些獨特的形狀混合。

It is important to establish one that will fit to the project style.

建立一個適合項目風格的項目很重要。

2.選擇一種顏色 (2. Pick a Color)

Often main buttons get the Primary color of a brand. However, remember that buttons have to indicate their purpose, so choosing the color may depend on the context.

通常，主按鈕會獲得品牌的原色。 但是，請記住，按鈕必須指明其用途，因此選擇顏色可能取決于上下文。

Always perform small research with users if you have any doubts on picking the right tone.

如果您對選擇正確的音色有任何疑問，請務必與用戶進行小型研究。

3.應用生動的漸變 (3. Apply Vivid Gradient)

If the project brand allows that, consider applying a nice looking gradient. Thanks to this, the buttons look very modern. Gradients make buttons pop!

如果項目品牌允許，請考慮應用美觀的漸變。 因此，按鈕看起來非常現代。 漸變使按鈕彈出！

4.添加有吸引力的陰影 (4. Add Attractive Shadow)

Shadows always guarantee better affordance. Thanks to them, every UI element feels more natural as an interactive object. To learn about creating perfect shadows in UI Design read the tutorial.

陰影總是保證更好的承受能力。 多虧了他們，每個UI元素都可以作為交互式對象而變得更加自然。 要了解有關在UI Design中創建完美陰影的信息， 請閱讀本教程 。

5.包含有意義的圖標 (5. Include Meaningful Icon)

While icons are optional, they help to recognize the action which is performed by a button. Think how many times simple “x” or “+” was the fastest way to recognize button’s purpose.

圖標是可選的，但它們有助于識別按鈕執行的操作。 想想簡單的“ x”或“ +”是識別按鈕用途的最快方法的次數。

Always use simple symbols. The label nearby the icon is a must so users will be able to confirm their assumptions.

始終使用簡單的符號。 圖標附近的標簽是必須的，因此用戶將能夠確認他們的假設。

6.應用動作 (6. Apply Motion)

Add hover and press states to the button and animate it. The user’s mind demands immediate feedback on the action they performed. Playful motion design may create moments of delight.

將鼠標懸停并在按鈕上按狀態，然后對其進行動畫處理。 用戶的思想要求立即反饋他們執行的操作。 有趣的動作設計可能會帶來歡樂。

那是所有人！ (That’s all folks!)

This 6 quick and easy to apply steps will move the style of your buttons to the next level. When you apply the simple tricks, repeat and adjust them to your projects, you will notice how the quality of your work enhances.

這6個快速簡便的步驟將使您的按鈕樣式更上一層樓。 當您應用簡單的技巧，重復并調整它們到您的項目時，您會注意到工作質量如何提高。

If you found the tutorial useful, share it to let your friends know how to make their UI better! Feel free to 👉 discover more tutorials like this!

如果您覺得本教程有用，請與他人分享，以使您的朋友知道如何改善他們的UI！ 隨意👉 發現更多類似的教程 ！

This article was originally published on my blog??, which has its origin in the Instagram tutorial 📷.

本文最初發表在我的博客 ??中 ，其起源于Instagram教程 tutorial。

Thanks for reading!

謝謝閱讀！