Mobile User Interface Login Form Design Inspiration

Tag: Inspiration/ User Interface Design/ Web and Mobile Design

标签：灵感、用户界面设计，网页和移动端设计

The success of your application depends on a variety of factors, but the most important among them is smart mobile user experience (UX).

一款应用的成功有赖于很多因素，但在其中最重要的是很棒的用户体验设计。

As practice shows, the best rated apps in all stores are exactly the ones with a memorable UX.

像实际那样，在所有应用市场中，最高排名的恰好是那些令人记忆尤新的。

Obviously, this is not all you have to consider – there is a variety of elements that need to be included and optimally combined, so that the UX would be perfect in all aspects.

显然，这并不是你要考虑的所有的——有很多的元素都需要被包含和完美组合。正因如此，UX才会在所有方面都是完美的。

The best course of action for your UX is to follow the best samples and practices in the industry.

对于你UX最好的行动方案，是跟随行业里最好的例子和实践。

You should apply common and familiar patterns, and study your audience to see what could have the best effect on them.

你应该应用普遍和熟悉的模式，并且研究你的用户来弄清楚，对于他们什么会有最好的效果。

The process is not exactly easy, and involves a concrete understanding of a variety of psychological underpinnings for each practice you choose.

过程并不简单，你所选择的每一个实践，都涉及了一个具体的基础心理学的多方面理解。

At the end, you should produce an interface that excites users, rather than one that frustrates them. To make matters easier for you, we prepared a guide with several UX stardom strategies you should put into action:

最后，你应该生成一个能让用户兴奋的界面，而不是一个另他们沮丧的。让你问题对你更简单，我们准备了一个几项UX策略指南你可以应用于实践。

Include text input fields

包含文本输入字段

If uses have to login in order to use your services, information fields are the primary features you have to work on.

如果用户使用你的服务必须登录，那么信息字段是你必须要做的主要功能。

Make those fields visible and clear, and don’t force users to navigate around and take additional steps to enter the app. Once they launch the app, login fields are the first things they should see.

使这些字段清楚可视，并且不要强迫用户到处寻找，或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。

Bonus tip: Instead of going with the traditional ‘Login’ or Sign in’ buttons, be more creative, and include direct input fields. Make sure the app will memorize their data so that they won’t always have to insert their information.

奖励提示：相比于使用常见的“登录”“登陆”的按钮，可以更富有创造性，并要包含可直接输入区域。确保记住用户的数据，这样他们就不需要每次输入信息。

‘Sign Up’ and ‘Sign In’ should not be put in the same section

“注册”和“登陆”不应该放在一起。

Most of the time, we see Sign Up and Sign In buttons positioned close to each other, but this can have a reverse effect on users.

更多地时候，我们看到注册和登陆按钮被放置的靠近彼此，但是这会对用户产生反作用。

Both actions contain the same verb and look similar to each other, so they may confuse users to choose the wrong option over the right one. With limited time and entry problems, they may get frustrated and leave the app.

这两个动作都包含了相同的动词，并且看起来也很相似，所以他们会混淆用户选择了错的选项。在有限的时间内有进入问题，他们可能会感到沮丧并且离开。

Basically, no element embedded on the app’s interface should make users pause and think.

基本上，不应该有任何界面上的元素使用户暂停和思考。

If you want their experience to be spotless, divide these fields, and make the difference clearly visible. Additionally, you can use different verbs or explain in brief what each field is about.

如果你想让他们的体验完美无瑕，分开这注册和登陆两个区域，并且使差别清晰可见。另外，你可以使用不同的动词或者简单解释不同的字段是什么。

Add different input fields in the Login and Registration sections

在登录和注册部分，增加不同的输入字段。

Another thing that confuses users except of the verb ‘Sign’ is the fact that both login and registration sections usually have the same number of input fields (usernames, passwords, and email addresses).

除了动词“Sign”是事实之外，另一个另用户感到困惑的是，登录和注册部分通常有相同数量的输入框（用户名，密码，和邮箱）。

In order to distinguish them entirely, and to minimize the chance for new users to try to log in directly, use different input fields.

为了完全地区分，最小化新用户尝试直接登录的机会。用不同的输入字段。

Make the password visible

让密码可被看到

Another problem users frequently have is mistyping their password, as most of the password input fields are masked due to security reasons.

当大多数用户的密码由于安保原因被打了马赛克，用户频繁遇见的另一个问题是打错他们的密码。

It happens even to the most experienced typists, especially when they’re logging in from mobile devices.

这甚至会发生在很有经验的打字员身上，特别是当他们在移动设备上登录的时候。

What you can do to prevent this is to include a ‘show password’ checkbox or icon next to the password field. Once users click on it, they’ll have the password unmasked and see where they got wrong. Mobile login pages with small keyboards are the perfect setting for such options.

你所可以做的防止这种情况发生的是，在密码字符旁边包含一个“显示密码”的单选框或图标。一旦用户点击它，会得到没有被马赛克的密码，并且看到哪里出错了。有小小键盘的手机登录页是这么做的完美环境。

Let them know what’s wrong
让他们知道什么是错误的

If the app detects a wrong combination of passwords and usernames, but doesn’t report exactly what the problem is, user may try numerous time and get angry enough to quit.

如果应用监测到一个错误的密码组合，和用户名，但是没有明确的报告给用户问题是什么，用户可能会多次尝试后，很生气的退出应用。

This is why you should consider generic responses (for instance ‘Your password or email doesn’t match), and give them instant feedback on how to fix this problem.

这是为什么你应该考虑通用的回复（例如“你的密码或邮箱不符合”），并且给他们立马回复怎么修复这个问题。

Ask for email addresses or phone numbers instead of unique usernames

要求邮箱地址或电话号码，而不是唯一的用户名

Why complicating logins with usernames people barely remember? In cases like these, you will face many avoidable difficulties:

为什么有用户名复杂的登录人们很少记住？在这种情况下，你会面对很多可避免的困难：

The username must be a unique one, which means people will repeatedly try to insert one the system doesn’t already have, or end up using their real name.

用户名必须是一个唯一的，这意味着人们会重复尝试输入一个系统里目前还没有的，或者最终使用其真实姓名。

After a while, the user comes up with a unique login name, but forgets it only after a while because it doesn’t mean anything to him.

过了一会儿，用户想出了一个唯一的登录名，但是只过了一小会儿就忘记了，因为这个用户名对他没有任何的意义。

Another thing that can facilitate access is providing users with several login options, and giving them the chance to choose and try usernames without getting frustrated. A compulsory part of the process is to allow them to register using their email address or password.

另一个事情可以促进登录，是提供给用户几个登录选项，并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。

Include a ‘Forgot Your Password?’ flow
包括一个“忘记你的密码”的流程

Forgetting passwords happens to all of us, which is why it is imperative for you to give users the chance to restore them, and do so directly from the login page.

忘记密码发生在所有人身上，这也是为什么，你急迫的给到用户一个机会来恢复密码，那么就直接在登录界面这么做吧。

What it takes is to add a ‘Forgot Your Password’ link right under the input fields, and enable the system to send recovery codes to users’ emails or phone numbers.

所要做的就是，在输入框下增加一个“忘记你的密码”的链接，并让系统能给用户的邮箱或电话号码发送覆盖码。

Don’t lock users’ accounts without warning them
不要锁了用户的账号而不告知他们

In order to avoid forced entry and brute attacks, many websites and apps lock out accounts after a series of mistyped attempts.

为了避免强迫进入和暴力攻击，许多网页和应用在一系列的错误尝试之后关闭账户。

Security comes first, but you should at least try to warn users how many attempts they’ve got left before locking them out. You can also share extra details, such as the fact that it will take 10 minutes after the attempt to try again.

安全第一，但是你至少要尝试告诉用户，在多少次尝试后，在关闭账户前，他们必须离开。你也可以分享更多的细节，例如，在试错后的十分钟才可以再次尝试的事实。

Login form inspiration
登录样式灵感

If in the past the apps were using the same login form with no style and customization.

如果在过去，都是在用相同的无风格和定制化的登录页。

Nowadays creating a unique login design for your app is something that is really important especially if you want to create a brand around your app and its services.

现如今，给你的应用，创造一个独特的登录页设计是非常重要的事情，尤其是你想要围绕你的应用和服务来创造品牌。

Designers and developers as well are aware are acknowledging the importance of login forms.

设计师和开发人员也有承认意识到登录表单的重要性。

This is true, especially for mobile environments where the user interface plays a much bigger role than on regular ‘desktop’ websites.

这是事实，特别对于移动环境下，用户界面相比于“桌面”网站，扮演了更重要的角色。

Designers are paying a lot of attention when designing this element for an app or mobile site, making it both useful and aesthetically pleasing.

当为一个应用和移动站设计这个元素的时候，设计师花很多的精力，使它既好用又美观。

In this article you will see examples of mobile user interface design inspiration to give you a hint on how a login form must be designed for mobile design.

在这篇文章里，你会看到很多移动端用户界面设计的案例灵感，关于一个移动端登陆页面应被设计成什么样，给你一些线索。

Roostio Login Screen

Login Screen

Job Board – Company Profile / Login

Shopping app

Tailslife: Login

Moody Sign Up/In Screen

Bandio App Login & Sign Up

Parts – login dark side

Login Screens

ZSSK – login and route detail

DailyUI Day001

Skype Redesign

Sign Up Window – Daily UI #001

Ending thoughts

结尾思考

Logins are already difficult enough for users, so making them even more complex is not the smartest decision for your mobile app. Avoid extra large and unfamiliar forms, and make input fields clearly visible. These are only some of the techniques to consider to save users time, and help them enjoy the service you provide.

对用户来说，登陆已经很困难了，所以，使之变得更复杂，对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式，并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧，并且帮助他们享受你所提供的服务。