提升UI技能的5个步骤

最新推荐文章于 2024-10-14 09:08:48 发布

weixin_26732881

最新推荐文章于 2024-10-14 09:08:48 发布

阅读量183

点赞数

文章标签： python java 算法

原文链接：https://uxdesign.cc/5-steps-to-improve-your-ui-skills-69b0de387034

版权

element ui 步骤

重点 (Top highlight)

What to do when you know how to use the software and know the basics of designing interfaces? There are a few simple things that you can do to take your skills to the next level, and you don’t need to invest in expensive online courses and tutorials.

当您知道如何使用软件并了解界面设计基础时该怎么办？您可以做一些简单的事情，将自己的技能提高到一个新的水平，并且无需投资昂贵的在线课程和教程。

Here’s what to try and learn!

这是尝试和学习的方法！

Examples of the usage of perception laws

1.学会在界面中使用人类感知法则 (1. Learn to use human perception laws in your interfaces)

Is your design following the rules of human perception? It is good to know them quite well, because without this knowledge you can’t really explain the reasoning behind your visual choices. There’s a handful of them, but for know focus on the most crucial ones:

您的设计是否遵循人类感知的规则？很好地了解它们是一件好事，因为没有这些知识，您将无法真正解释视觉选择背后的原因。其中有少数几个，但要知道要专注于最关键的几个:

邻近法则 (Law of Proximity)

If we have multiple elements present, the ones that are close to each other are perceived as a group (even, if they look different).

如果存在多个元素，则彼此接近的元素将被视为一个组(即使它们看起来不同)。

That’s why it is so important to keep the right distance and margins between the elements and sections. Don’t be afraid of too much whitespace (better too much, than too little) — make sure that whitespace is around 50% of your design. It makes the UI look clean and tidy and it helps to keep the right hierarchy of the elements.

这就是为什么在元素和部分之间保持正确的距离和边距如此重要的原因。不要担心太多的空格(最好多于少)—确保空格大约占设计的50％。它使UI看起来干净整洁，并有助于保持元素的正确层次结构。

雅各布定律 (Jakob’s Law)

“Users spent most of their time on the other sites”. You definitely heard that one before, right? In general, it’s all about making the UI elements look familiar to the user. In many cases, too creative UI design can be overwhelming.

“用户将大部分时间都花在了其他站点上”。您肯定以前听说过，对吧？通常， 所有这些都是关于使UI元素看起来对用户熟悉的 。在许多情况下，过于创新的UI设计可能会让人不知所措。

We all don’t like what we don’t understand. If you have to choose between standard and unusual visual solution, choose the standard, understandable and well-known one.

我们都不喜欢我们不了解的东西。如果您必须在标准和不寻常的视觉解决方案之间进行选择，请选择标准，易于理解且众所周知的解决方案。

隔离效果 (The Isolation Effect)

Also called Von Restroff Effect, says that when they are many elements present, the one that differs catches the most attention and it’s easier to remember. For example: That’s why when we design CTA button, we have to make sure that the color of it stands out!

也称为冯·斯特罗夫效应(Von Restroff Effect)，它表示当它们存在很多元素时，不同的元素会引起最多的关注，并且更容易记住 。例如:这就是为什么在设计CTA按钮时，我们必须确保其颜色突出！

Different visual styles pictured as buttons

2.尝试不同的设计风格和趋势 (2. Try different design styles and trends)

Your client might want to create a UI for their product in a particular style. It happens quite often. You may not like all the design styles or trends that are happening right now, but it’s good to try at least once and see for yourself if they suit you, and learn how to achieve certain effects just in case.

您的客户可能想要以特定样式为其产品创建UI。它经常发生。您可能不喜欢目前正在发生的所有设计风格或趋势，但最好至少尝试一次，看看自己是否适合您 ，并学习如何以防万一。

It will give you a personal perspective!

它将给您个人的观点！

Simple and complicated typography examples

3.简化字体集合 (3. Simplify your font collection)

Designers often tend to complicate the typography in their designs, and use too many fonts in different pairings. The truth is, you don’t have to own many fonts to create a stunning, useful UI.

设计师通常会使设计中的版式复杂化，并在不同的配对中使用过多的字体。 事实是，您不必拥有许多字体即可创建令人惊叹且有用的UI。

Own just a few: two or three sans-serifs, one serif and one decorative (handwritten, but simple enough to be easily readable — it may come in handy sometimes). You won’t drown in hundreds of choices anymore. This is a real game changer and time saver!

仅有几个:2或3个无衬线字体，1个衬线和1个装饰性字体(手写，但足够简单以至于易于阅读-有时可能会派上用场)。您不会再淹没数百种选择。这是真正的改变游戏规则和节省时间的工具！

If you are actually searching for amazing, readable fonts to use that look good in UI, try the free ones: Montserrat, Poppins, Lato or the paid ones (but worth the money - I use them on a daily basis as my main fonts) Sofia Pro, Gilroy, Brandon Grotesque or Proxima Nova. They are also available via Adobe Fonts.

如果您实际上是在寻找令人惊叹的可读字体以在UI中使用好看的字体，请尝试免费的字体: Montserrat ， Poppins ， Lato或付费的字体(但物有所值-我每天都将它们用作主要字体) Sofia Pro ， Gilroy ， Brandon Grotesque或Proxima Nova 。也可以通过Adobe字体获得它们。

Example of how to simplify the ui design

4.了解认知负荷并尝试将其最小化 (4. Learn about the Cognitive Load and try to minimize it)

Coco Chanel once said “Before you leave the house, look in the mirror and remove one accessory”.

可可·香奈儿(Coco Chanel)曾经说过“离开家之前，照镜子并卸下一个配件”。

I believe it can also apply to the UI design.

我相信它也可以应用于UI设计。

When there’s too much going on, it’s hard for the user to focus on the most important elements. Before you end up with the final design, try to remove something that is the most unnecessary.

当发生太多事情时，用户很难专注于最重要的元素。 在进行最终设计之前，请尝试删除最不必要的内容。

Maybe the button doesn't need all those effects? Maybe the background could be simpler? Maybe you can minimize the number of the font sizes and styles?

也许按钮不需要所有这些效果？也许背景可能更简单？也许您可以减少字体大小和样式的数量？

Different accessibility examples shown on buttons

5.始终检查可访问性 (5. Always check the accessibility)

I encourage you to learn more about the accessibility in user interfaces, and make your own accessibility checklist.

我鼓励您更多地了解用户界面中的辅助功能，并制作自己的辅助功能清单。

Every time you design an interface, walk through the checklist to make sure that your interface follows the rules. Here are some of them:

每次设计界面时，请遍历清单以确保界面遵循规则。这里是其中的一些:

Is the contrast between elements right? Try the Contrast Checker tool.
元素之间的对比正确吗？ 尝试使用“ 对比度检查器”工具。
Does every clickable element has the right touch target? (minimal is around 44x44px).
是否每个可点击元素都具有正确的触摸目标？ (最小值约为44x44px)。
Is text readable enough? (The minimal font size should be 12p).
文字是否足够可读？ (最小字体应为12p)。

Ensuring UI accessibility and readability is often overlooked — make the difference and design simple and friendly products that everyone can use with ease!

确保UI的可访问性和可读性经常被忽略-有所作为，设计简单友好的产品，每个人都可以轻松使用！