移动应用程序和网页应用程序_完善移动应用程序用户界面的6种方法

青旅半醒 2022-12-07 13:17 199阅读 0赞

![9fa7f46e362dc0030f5ba10413b94156.png][]

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

One of the biggest headaches mobile app programmers face is how to make their app stand out from the rest. It’s a valid concern since the average app will be coming up against tens or hundreds of applications already in the market that do almost the same thing.

移动应用程序程序员面临的最大难题之一是如何使他们的应用程序脱颖而出。 这是一个令人担忧的问题，因为普通应用程序会遇到市场上已经有差不多相同功能的数十个或数百个应用程序。

Whereas making sure the app has the functionality users expect is vital, it’s the softer considerations such as the user interface (UI) that often determine what app a user will prefer.

确保应用程序具有用户期望的功能至关重要，而诸如用户界面(UI)之类的软性因素通常会确定用户希望使用哪种应用程序。

The UI gives the user a perception of how effective the app is. Here are some tips on designing a quality UI for your mobile app.

用户界面可让用户了解该应用的有效性。 以下是为移动应用程序设计高质量UI的一些技巧。

![6 Ways to Perfect the UI of Your Mobile App][]

### 1.从初始应用程序设计考虑UI权利 **(**1. Think About the UI Right from Initial App Design**)** ###

You are more likely to build a quality UI if you incorporate it in app design from the start. Create sketches that visualize navigational flow from the end user’s perspective. Pen and paper sketches will suffice at this early stage.

如果从一开始就将高质量的UI集成到应用程序设计中，则更有可能构建出高质量的UI。 创建草图以从最终用户的角度可视化导航流程。 笔和纸草图在此早期阶段就足够了。

You could have several UI sketches and narrow down to a final two that seem the most feasible. Once you’ve built the nuts and bolts of the app, you can have two versions of the app [as prototypes][] based on the final two sketches. Test out the two with a limited audience to see which one is most popular with users.

您可以有几个UI草图，然后缩小到最后两个看起来最可行的草图。 一旦构建了应用程序的基本功能，就可以基于最后两个草图将应用程序的两个版本[作为原型][as prototypes] 。 在有限的受众群体中测试这两种产品，以查看哪种产品最受欢迎。

### 2.保持一致性 **(**2. Maintain Consistency**)** ###

Your mobile app will have multiple screens such as the home screen, settings screen and user registration screen. Once you’ve settled on a specific design and style for your UI, you must apply it consistently to every screen within the app.

您的移动应用将具有多个屏幕，例如主屏幕，设置屏幕和用户注册屏幕。 确定UI的特定设计和样式后，必须将其一致地应用于应用程序中的每个屏幕。

If design, typology and colors change whenever the user switches to a different screen, this will only cause confusion. Keeping structure and aesthetics the same creates smooth transitions during navigation.

如果用户每次切换到其他屏幕时设计，类型和颜色发生变化，这只会引起混乱。 保持结构和美观相同，可以在导航过程中平稳过渡。

### 3.颜色选择 **(**3. Choice of Colors**)** ###

Color is one of the most import aspects of the UI. When developing a color theme for your app, choose hues that do not exert visual strain on users. For example, grey text on a yellow background would be difficult to read.

颜色是用户界面最重要的方面之一。 在为您的应用开发颜色主题时，请选择不会对用户造成视觉负担的色相。 例如，黄色背景上的灰色文本将难以阅读。

The number of colors matters too. Best practice is to keep it at a maximum of three. Finally, go for colors that evoke the right emotions and encourage users to follow through on your call to action (CTA).

颜色的数量也很重要。 最佳做法是最多保留三个。 最后，选择能够唤起正确情感并鼓励用户遵循您的号召性文字(CTA)的颜色。

### 4.摆脱多余的功能 **(**4. Get Rid of Superfluous Functionality**)** ###

Mobile app use usually follows [the Paretto Principle][] — 80 percent of users will make use of just 20 percent of an application’s features. The more the features, the greater the risk of having a cluttered chaotic UI. So as you design the app, rank the features by order of priority and see which of the low priority features are expendable.

移动应用程序的使用通常遵循[Paretto原则][the Paretto Principle] \-80％的用户将仅使用应用程序功能的20％。 功能越多，出现混乱的UI的风险就越大。 因此，在设计应用程序时，请按优先级对功能进行排名，并查看哪些低优先级功能是可消耗的。

If it’s difficult to do this prioritization during the design phase, you may have to do it either through prototype tests or after the app goes live. Simply monitoring data usage and the number of times users call on each feature can give you a fairly accurate picture of what functions you can let go of.

如果在设计阶段很难确定优先级，则可能需要通过原型测试或在应用上线之后进行。 只需监视数据使用情况和用户调用每个功能的次数，就可以相当准确地了解您可以放弃的功能。

### 5.传统的智能手机用户习惯 **(**5. Conventional Smartphone User Habits**)** ###

Most smartphone users operate their devices with just one hand. Your mobile app interface should factor conventional gestures into the design. Users are already accustomed to sliding or touching their screens in a certain way.

大多数智能手机用户仅用一只手即可操作其设备。 您的移动应用界面应将传统手势纳入设计。 用户已经习惯于以某种方式滑动或触摸屏幕。

There’s heavy dependence on the thumb in particular. Ergo, the placement of buttons, tabs, links and form fields should be within easy reach of the user’s thumb.

特别是严重依赖拇指。 因此，按钮，选项卡，链接和表单字段的位置应该在用户的拇指附近。

### 6.良好的错误处理 **(**6. Good Error Handling**)** ###

Despite the amount of time, thought, resource and effort you devote to building an app, there’s no guarantee that it will be error free. You have to develop a process for error handling that doesn’t leave the user bewildered.

尽管您花费大量时间，思想，资源和精力来构建应用程序，但不能保证它不会出错。 您必须开发一个不会使用户感到困惑的错误处理流程。

When an error occurs, keep messages brief, simple and specific. You could also notify the user on what they need to do to resolve the error (for example, restart the app or download a newer version). Making sure the back end works as it should is something you must pay attention to as well. For instance, you can benefit from [AWS monitoring][] for your cloud servers.

发生错误时，请使消息简短，简单和具体。 您还可以通知用户他们需要做什么来解决该错误(例如，重新启动应用程序或下载更新的版本)。 您还必须注意确保后端正常工作。 例如，您可以从对云服务器的[AWS监控中][AWS monitoring]受益。

Don’t leave UI considerations up to the last minute. It should be an integral part of your software development process from the get-go. The UI can make the difference between the success and failure of your app.

请勿在最后一分钟之前保留UI注意事项。 从一开始，它就应该是您软件开发过程中不可或缺的一部分。 用户界面可以使您的应用成功与失败有所不同。

> 翻译自: [https://www.thecrazyprogrammer.com/2018/12/6-ways-to-perfect-the-ui-of-your-mobile-app.html][https_www.thecrazyprogrammer.com_2018_12_6-ways-to-perfect-the-ui-of-your-mobile-app.html]

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

[9fa7f46e362dc0030f5ba10413b94156.png]: /images/20221123/27f1491e91e140a8adfb41e2ee5298f4.png
[6 Ways to Perfect the UI of Your Mobile App]: /images/20221123/85af57e4204145899b75d5311c2c7a0b.png
[as prototypes]: http://www.ni.com/white-paper/8752/en/
[the Paretto Principle]: https://www.investopedia.com/terms/p/paretoprinciple.asp
[AWS monitoring]: https://www.solarwinds.com/topics/aws-monitoring
[https_www.thecrazyprogrammer.com_2018_12_6-ways-to-perfect-the-ui-of-your-mobile-app.html]: https://www.thecrazyprogrammer.com/2018/12/6-ways-to-perfect-the-ui-of-your-mobile-app.html