移动应用程序和网页应用程序

by Luke Konior

卢克·科尼尔(Luke Konior)

如何不完全破坏您的移动应用程序的用户界面 (How to not utterly ruin your mobile app’s user interface)

There’s no single universal formula for designing a great user interface (if you discover one, please let me know). But I do know some major mistakes to avoid if you want to deliver a great app.

设计出色的用户界面并没有统一的通用公式(如果您发现一个界面，请告诉我)。 但是，我确实知道一些主要的错误，可避免在您要交付出色的应用程序的情况下使用。

I’ve seen every one of these mistakes made by designers of all levels of experience. There’s no shame in that — a good UI design is a multifaceted challenge, and it’s easy to overlook some aspects of it.

我已经看到了具有不同经验的设计师所犯的每一个错误。 这没有什么可耻的-好的UI设计是多方面的挑战，很容易忽略它的某些方面。

At All In Mobile, we often redesign apps for clients who aren’t satisfied with their product and want to improve the way their app looks and feels. So today I’m going to share some major no-nos I’ve observed.

在All In Mobile中 ，我们经常为对产品不满意并希望改善其应用外观的客户重新设计应用程序。 因此，今天我将分享一些我观察到的主要问题。

Of course, I’m all about fixing issues, not just pointing them out. So I’ll demonstrating all 5 of these major UI mistakes — then show you redesigned app views, so you can see how your team can fix them.

当然，我全都在解决问题，而不仅仅是指出问题。 因此，我将展示所有这5个主要的UI错误-然后向您展示重新设计的应用程序视图，以便您了解团队如何解决这些问题。

UI错误1：滥用字体 (UI mistake 1: Abusing fonts)

Let’s start with system font families.

让我们从系统字体系列开始。

For example, San Francisco is a system font for iOS, and Android has Roboto. They’re both easy-to-read and fairly similar.

例如，旧金山是iOS的系统字体，而Android具有Roboto。 它们既易于阅读又相当相似。

Are system fonts okay to use? Yes, definitely. It’s a safe and proven option. But remember — Samsung phones allow you to change the default font. Your beautifully designed app can be killed in an instant if the phone user switches into Choco Cooky font.

系统字体可以使用吗？ 当然是。 这是一个安全可靠的选择。 但是请记住-三星手机允许您更改默认字体。 如果电话用户切换为Choco Cooky字体，则设计精美的应用程序可立即被杀死。

You can also opt for a more sophisticated solution and choose a custom font. If you go this route, though, keep in mind: Less is more.

您还可以选择更复杂的解决方案并选择自定义字体。 但是，如果您走这条路，请记住：少即是多。

There might be plenty of awesome fonts, but be reasonable. Fonts should add to the user experience. Too many types, sizes, or colors can complicate things.

可能有很多很棒的字体，但是很合理。 字体应该增加用户体验 。 太多的类型，大小或颜色会使事情复杂化。

If you do go for custom fonts, keep it simple and coherent. Add custom fonts only when needed, and where they can actually improve your app. And using custom fonts for the sake of having custom fonts is not a good enough reason.

如果您确实要使用自定义字体，请使其保持简洁和连贯。 仅在需要时才添加自定义字体，并在实际可以改进您的应用程序的地方添加。 而且，为了拥有自定义字体而使用自定义字体还不够好。

License. A few months ago we were asked to redesign a fashion app. While reviewing the fonts, we came across 2 commercial fonts, both being used without any bigger purpose and without license. This mistake could have cost the client $2,000! A font is software, and always licensed. If you embed a font into a mobile app, make sure you read the license and the terms of use. Don’t know the license? Then don’t use the font.

执照。 几个月前，我们被要求重新设计时尚应用程序。 在审查字体时，我们遇到了2种商业字体，它们都没有更大的用途并且没有许可证就被使用。 此错误可能会使客户损失$ 2,000！ 字体是软件，并且始终获得许可。 如果您将字体嵌入到移动应用程序中，请确保您已阅读许可和使用条款。 不知道许可证？ 然后不要使用字体 。

UI错误2：屏幕上过多 (UI mistake 2: Too much on the screen)

When phones were much smaller, designers faced issues bundling necessary things onto the screen. For example, the iPhone 4 had 640×960 resolution and 2:3 ratio. With the advent of super-sized phones (or phablets), we can put more stuff on the screen — bigger fonts, more buttons, and fancier design.

当手机小得多时，设计师面临将必需的东西捆绑到屏幕上的问题。 例如，iPhone 4的分辨率为640×960，比例为2：3。 随着超大尺寸手机(平板手机)的出现，我们可以在屏幕上放置更多东西-更大的字体，更多的按钮和更新颖的设计。

Be wary of falling into this freedom trap. More isn’t more, so be selective. Every additional item has to be processed by the user. Attract their attention wisely so they can easily navigate the app. If there’s too much on the screen, users can easily get lost and wonder what to do or where to click. Use design to focus the user’s eye on significant aspects. You want people to access the important content straight away and in an intuitive way.

警惕掉入这个自由陷阱。 多不多，所以要有选择性。 用户必须处理所有其他项目。 明智地吸引他们的注意力，以便他们可以轻松导航该应用程序。 如果屏幕上的内容过多，用户很容易迷失方向，想知道该怎么做或单击何处。 使用设计将用户的注意力集中在重要方面。 您希望人们以直观的方式直接访问重要内容。

UI错误3：缺乏一致性 (UI mistake 3: Lack of consistency)

Be consistent when you design. Don’t send mixed signals to users. If you use one element for a specific action, stick with it. Users learn by doing certain actions, and if they encounter unexpected or ambiguous actions, it can really ruin their experience.

设计时要保持一致。 不要向用户发送混合信号。 如果您将一个元素用于特定操作，请坚持下去。 用户通过执行某些操作来学习，如果他们遇到意外或模棱两可的操作，则可能会破坏他们的体验。

Also keep a consistent layout — for the most part. For instance, use the same colors and elements to create a repeating pattern. Use style guides to set standards so that you can stay on the right track when designing.

在大多数情况下，还要保持一致的布局。 例如，使用相同的颜色和元素创建重复图案。 使用样式指南来设置标准，以便在设计时可以保持正确的步伐。

Consistent layouts help users learn their way through your app, but you can have some exceptions, like the login page or other screens with dedicated uses. Whenever you break out of the pattern, keep in mind that every element still needs to make up a whole.

一致的布局可帮助用户学习您的应用程序，但是您可能会有一些例外，例如登录页面或其他具有专用用途的屏幕。 每当您突破模式时，请记住，每个元素仍然需要组成一个整体。

UI错误4：从iOS迁移到Android 1：1 (UI mistake 4: Transferring from iOS to Android 1:1)

It made sense to do 1:1 transfers from iOS to Android until Android 4.0, when Holo Design appeared. This was the first sensible theme for Android, with structures, guidelines, and navigation that was incompatible with iOS.

在Holo Design出现之前，从iOS到Android进行1：1传输是有意义的，直到Android 4.0。 这是Android的第一个明智主题，其结构，准则和导航与iOS不兼容。

Why not transfer directly from iOS to Android, or vice versa? Doesn’t it save you time and money?

为什么不直接从iOS转移到Android，反之亦然？ 这样可以节省您的时间和金钱吗？

Well, it might, but the ultimate goal is to create the best user experience, right? And users have habits and preferences. They use their phones all the time, and they grow accustomed to how their particular one functions. So if your applications behave differently than what people are used to, they’re way less likely to enjoy using it.

可以 ，但是最终目标是创造最佳的用户体验 ，对吗？ 并且用户有习惯和偏好。 他们一直在使用手机，并且习惯于特定手机的功能。 因此，如果您的应用程序的行为不同于人们习惯的行为，那么他们使用它的可能性就会降低。

Android and iOS have their own interaction patterns, and users might not be pleased if you serve them something else they’ll have to learn from scratch. If you transfer from iOS to Android (or the other way around), you could also make consistency mistakes from device to device.

Android和iOS具有自己的交互模式，如果您向他们提供其他一些他们需要从头学习的内容，则用户可能会不满意。 如果您从iOS转移到Android(或相反)，也可能在设备之间犯一致性错误。

There’s good news, though — your app doesn’t have to look completely different for iOS and Android. Try to keep most of your visual style for both platforms. Take for example the case of car rental app Silvercar. They came up with their own navigation style, but at the same time they retained consistency between the mobile operating systems.

不过，有个好消息-您的应用在iOS和Android上看起来不必完全不同。 尝试在两种平台上都保留大部分视觉风格。 以汽车租赁应用程序Silvercar为例。 他们提出了自己的导航样式，但同时又保留了移动操作系统之间的一致性。

UI错误5：信息层次结构不佳 (UI mistake 5: Poor information hierarchy)

When you design something, whatever it is — a business card, a website, an app — a person will interact with it in some way. You need to plan and design according to the degree of significance of the information you’re presenting, based on the way someone will interact with it.

设计任何东西时，无论是名片，网站还是应用程序，人们都会以某种方式与之交互。 您需要根据所呈现信息的重要程度来规划和设计，并基于人们与之交互的方式。

Sit down and think about the most important thing you want to show. Once you know your priorities, you can distinguish significant things with the help of fonts, colors, size, location, etc. You need to think about what people do with your product — in ideal and non-ideal settings — and design it accordingly.

坐下来，想想你想展示的最重要的东西。 一旦知道了优先级，就可以借助字体，颜色，大小，位置等来区分重要的事物。您需要考虑人们在理想和非理想的情况下如何使用您的产品，并相应地进行设计。

实践中的错误和解决方案 (Mistakes — and solutions — in practice)

Now we’re going to show you what all of these mistakes look like in practice, and how to fix them. As an example, we’ll redesign a view list for a food ordering app.

现在，我们将向您展示在实践中所有这些错误的模样以及如何解决这些错误。 例如，我们将重新设计食品订购应用程序的视图列表。

A client with a food ordering app decided to add the option of rating restaurants, but the previous design didn’t provide for such a solution. We took this opportunity to improve a few things.

拥有食品订购应用程序的客户决定添加为餐厅评分的选项，但是以前的设计并未提供这种解决方案。 我们借此机会改进了一些东西。

The previous screen was designed at a time when iPhone 5 still held a greater share of the market. It had smaller cells, a smaller restaurant logo, and more compressed text. When viewed on new devices, too many elements appeared on the screen, making it more difficult to read.

前一个屏幕是在iPhone 5仍占据更大市场份额的时候设计的。 它具有较小的单元格，较小的餐厅徽标和更多压缩文本。 在新设备上查看时，屏幕上出现了太多元素，因此更难以阅读。

That’s where we stepped in and made some changes:

那就是我们介入并进行一些更改的地方：

As you can see, the cells are more distant from each other. They don’t fuse together anymore, and their information looks much clearer. The user isn’t overwhelmed by the number of items on the screen.

如您所见，单元之间的距离更远。 他们不再融合在一起，他们的信息看起来更加清晰。 用户不会为屏幕上的项目数量所困扰。

Also, the hierarchy of information has been improved. Now, the most important element is the logo. A returning user is more likely to quickly recognize the logo than to read the brand name. Previously, the name was fighting with the logo.

同样，信息的层次结构也得到了改善。 现在，最重要的元素是徽标。 老用户比阅读品牌名称更容易快速识别徽标。 以前，该名称与徽标冲突。

Another element that needed work was the typography. We used the Oswald font for names and tags. We initially anticipated only one line for tags, but some restaurants have a really rich offer, and so we enabled ourselves to fit as many tags as possible.

需要工作的另一个要素是排版。 我们使用Oswald字体作为名称和标签。 最初，我们只希望标签有一条生产线，但是有些餐馆的报价确实很高，因此我们使自己能够适应尽可能多的标签。

We also include visualization of the Android version with the system font and Choco Cooky on Samsung phones. We solved this issue by adding Roboto as the custom font.

我们还包括三星手机上带有系统字体和Choco Cooky的Android版本的可视化。 我们通过添加Roboto作为自定义字体解决了此问题。

To add the rating portion the client wanted, we decided to use the stars. Hotels and Michelin Guides use it, so it made sense to us.

为了增加客户想要的评分部分，我们决定使用星号。 酒店和《米其林指南》都在使用它，因此对我们来说很有意义。

But there was a problem. We’d used stars in the previous design to mark favorite restaurants. We couldn’t place these 2 elements together because it’d be confusing. Liking a restaurant has nothing to do with its rating, and we would be left using the same symbol for those 2 actions. We didn’t want to be inconsistent, nor did we want to change the meaning of a symbol from one version to another. In the end, we solved the issue with a screen informing users a new feature had been added.

但有一个问题。 在以前的设计中，我们曾使用星号标记最喜欢的餐厅。 我们无法将这两个元素放在一起，因为这会造成混淆。 喜欢餐厅与它的评级无关，对于这两个动作，我们将使用相同的符号表示。 我们既不想前后矛盾，也不想将符号的含义从一个版本更改为另一个版本。 最后，我们通过屏幕通知用户已添加新功能来解决该问题。

“Design isn’t science — there’s no magic formula for success.”

“设计不是科学，没有成功的神奇公式。”

Even if you avoid these 5 major mistakes, what you designed might fall apart when the user comes into contact with it.

即使您避免了这5个主要错误，当用户接触到它时，您设计的内容也可能会崩溃。

You simply can’t anticipate everything people might do. That’s why you have to observe the behavior and needs of the users, with the help of analytics and other tools. Then, react accordingly and improve your app. Design should be about changing to improve UX — continuously.

您根本无法预期人们会做的所有事情。 因此，您必须借助分析和其他工具来观察用户的行为和需求。 然后，做出相应React并改善您的应用程序。 设计应围绕不断变化以提高用户体验。

Never rest on your laurels, because there’s always something you can design better.

永远不要固步自封，因为总有一些东西可以设计得更好。

翻译自: https://www.freecodecamp.org/news/how-to-not-utterly-ruin-your-mobile-apps-user-interface-8433cee6477d/

移动应用程序和网页应用程序