Mobile User Interface Login Form Design Inspiration

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

標簽：靈感、用戶界面設(shè)計浦译，網(wǎng)頁和移動端設(shè)計

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

一款應(yīng)用的成功有賴于很多因素岸更，但在其中最重要的是很棒的用戶體驗設(shè)計昼钻。

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

像實際那樣嗤锉，在所有應(yīng)用市場中憨闰，最高排名的恰好是那些令人記憶尤新的尝胆。

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最好的行動方案懈玻，是跟隨行業(yè)里最好的例子和實踐巧婶。

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

你應(yīng)該應(yīng)用普遍和熟悉的模式，并且研究你的用戶來弄清楚涂乌，對于他們什么會有最好的效果艺栈。

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

過程并不簡單，你所選擇的每一個實踐湾盒，都涉及了一個具體的基礎(chǔ)心理學(xué)的多方面理解湿右。

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:

最后，你應(yīng)該生成一個能讓用戶興奮的界面罚勾，而不是一個另他們沮喪的毅人。讓你問題對你更簡單，我們準備了一個幾項UX策略指南你可以應(yīng)用于實踐尖殃。

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.

如果用戶使用你的服務(wù)必須登錄丈莺，那么信息字段是你必須要做的主要功能。

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, 登錄界面是他們所應(yīng)當見到的第一個事情。

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.

獎勵提示：相比于使用常見的“登錄”“登陸”的按鈕蚪战，可以更富有創(chuàng)造性牵现，并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù)邀桑，這樣他們就不需要每次輸入信息瞎疼。

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

“注冊”和“登陸”不應(yīng)該放在一起。

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.

更多地時候壁畸，我們看到注冊和登陸按鈕被放置的靠近彼此贼急，但是這會對用戶產(chǎn)生反作用茅茂。

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.

這兩個動作都包含了相同的動詞，并且看起來也很相似太抓，所以他們會混淆用戶選擇了錯的選項空闲。在有限的時間內(nèi)有進入問題，他們可能會感到沮喪并且離開走敌。

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

基本上碴倾，不應(yīng)該有任何界面上的元素使用戶暫停和思考。

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.

如果你想讓他們的體驗完美無瑕掉丽，分開這注冊和登陸兩個區(qū)域跌榔，并且使差別清晰可見。另外捶障，你可以使用不同的動詞或者簡單解釋不同的字段是什么僧须。

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”是事實之外担平，另一個另用戶感到困惑的是，登錄和注冊部分通常有相同數(shù)量的輸入框（用戶名芥挣，密碼驱闷，和郵箱）。

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

為了完全地區(qū)分空免，最小化新用戶嘗試直接登錄的機會空另。用不同的輸入字段。

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.

當大多數(shù)用戶的密碼由于安保原因被打了馬賽克蹋砚，用戶頻繁遇見的另一個問題是打錯他們的密碼扼菠。

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

這甚至?xí)l(fā)生在很有經(jīng)驗的打字員身上，特別是當他們在移動設(shè)備上登錄的時候坝咐。

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.

你所可以做的防止這種情況發(fā)生的是循榆，在密碼字符旁邊包含一個“顯示密碼”的單選框或圖標。一旦用戶點擊它墨坚，會得到?jīng)]有被馬賽克的密碼秧饮，并且看到哪里出錯了。有小小鍵盤的手機登錄頁是這么做的完美環(huán)境泽篮。

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.

如果應(yīng)用監(jiān)測到一個錯誤的密碼組合盗尸，和用戶名瘩将，但是沒有明確的報告給用戶問題是什么赠群，用戶可能會多次嘗試后，很生氣的退出應(yīng)用履肃。

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.

這是為什么你應(yīng)該考慮通用的回復(fù)（例如“你的密碼或郵箱不符合”）亏拉，并且給他們立馬回復(fù)怎么修復(fù)這個問題扣蜻。

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:

為什么有用戶名復(fù)雜的登錄人們很少記住莽使？在這種情況下锐极，你會面對很多可避免的困難：

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.

用戶名必須是一個唯一的，這意味著人們會重復(fù)嘗試輸入一個系統(tǒng)里目前還沒有的吮旅，或者最終使用其真實姓名溪烤。

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.

忘記密碼發(fā)生在所有人身上，這也是為什么全陨，你急迫的給到用戶一個機會來恢復(fù)密碼爆班，那么就直接在登錄界面這么做吧。

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.

所要做的就是辱姨，在輸入框下增加一個“忘記你的密碼”的鏈接柿菩，并讓系統(tǒng)能給用戶的郵箱或電話號碼發(fā)送覆蓋碼。

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.

為了避免強迫進入和暴力攻擊雨涛，許多網(wǎng)頁和應(yīng)用在一系列的錯誤嘗試之后關(guān)閉賬戶枢舶。

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.

安全第一，但是你至少要嘗試告訴用戶替久，在多少次嘗試后凉泄，在關(guān)閉賬戶前，他們必須離開蚯根。你也可以分享更多的細節(jié)后众，例如，在試錯后的十分鐘才可以再次嘗試的事實颅拦。

Login form inspiration
登錄樣式靈感

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

如果在過去蒂誉，都是在用相同的無風(fēng)格和定制化的登錄頁。

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.

現(xiàn)如今矩距，給你的應(yīng)用拗盒，創(chuàng)造一個獨特的登錄頁設(shè)計是非常重要的事情，尤其是你想要圍繞你的應(yīng)用和服務(wù)來創(chuàng)造品牌锥债。

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

設(shè)計師和開發(fā)人員也有承認意識到登錄表單的重要性陡蝇。

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

這是事實痊臭，特別對于移動環(huán)境下，用戶界面相比于“桌面”網(wǎng)站登夫，扮演了更重要的角色广匙。

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

當為一個應(yīng)用和移動站設(shè)計這個元素的時候，設(shè)計師花很多的精力恼策，使它既好用又美觀鸦致。

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.

在這篇文章里，你會看到很多移動端用戶界面設(shè)計的案例靈感涣楷，關(guān)于一個移動端登陸頁面應(yīng)被設(shè)計成什么樣分唾，給你一些線索。

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

結(jié)尾思考

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.

對用戶來說狮斗，登陸已經(jīng)很困難了绽乔，所以，使之變得更復(fù)雜碳褒，對你的產(chǎn)品來說并不是一個很聰明的決定折砸。避免更大的和不熟悉的形式，并且讓輸入字符簡單可視沙峻。這些只是一些為了節(jié)省用戶時間可以考慮的技巧睦授，并且?guī)椭麄兿硎苣闼峁┑姆?wù)。