Axure Tutorial: Common Mobile Login and Registration Page

Introduction Today, I'd like to share a set of APP registration / login interface templates, including local number login page, ... Skiptocontent Closemenu Home AxureCollections AxureLibraries AxureTemplates Product&UXtools Free Mobile Icons Articles ProductDesign&ProductManager UI/UX/InteractionDesign AxureTutorials&Tips UserResearch Axure&PluginAffiliate Login Facebook Twitter Cart Closecart Subtotal $0.00 Shipping,taxes,anddiscountcodescalculatedatcheckout. Checkout Yourcartiscurrentlyempty. Introduction Today,I'dliketoshareasetofAPPregistration/logininterfacetemplates,includinglocalnumberloginpage,SMSverificationloginpage,FacebookandGoogleloginpage. FeaturestobeRealized 1.ClicktheLoginwithyourPhonebuttontoshow thesuccessfullogininterface. 2.ClickLoginwithother Phonetoenterthemobilephonenumber.Afterenteringthenumber,thesystemwillsendtheverificationcode. Aftertheverificationcodeisfilledincorrectly,thesuccessfulloginpageisshown; Aftertheverificationcodeisfilledinincorrectly,anerror noticewillbeshown. 3.ClicktheFacebookorGoogleicontoentertheauthorizationpage,andclickConfirmAuthorization button to showthesuccessfulloginpage. Previewthecompletedprototypeforthistutorial WidgetsSetup Makeallpagesintodifferentstatesofdynamicpanel. IncludingHome,Loading,Login,Successful,PhoneLogin,VerificationCode,GoogleAuthorizedLoginandFacebookAuthorizedLogin. Interactions Setup HomePage 1.WhentheLOGIN WITH YOUR PHONEbuttonisclicked,setthedynamicpanel statetoloading,wait2000ms,setthedynamicpanel statetoLoginSuccessful,wait2000ms,andsetthedynamicpanel statetoHome. 2.ClickLoginwithotherphonetoenterPhoneLoginstate,clickRegistertoenterPhoneLogin,clickGoogleorFacebookicontoenterGoogleauthorizedloginorFacebookauthorizedlogin. Phone Login Setthedisabledstyleforthebutton.Whenthetextofthe textfield changes,ifthetextlengthisgreaterthan0,thebuttonwillbeenabled;ifthetextlengthisequalto0,thebuttonwillbedisabled. Whenthebuttonisclicked,setthepanel statetoVerificationCode,andtransfertheenteredtexttothecorrespondingcontrolonthenextpage. VerificationCode Whentheverificationcodedynamicpanelatthetopisshown,changethetextofcodeto4randomnumbers,andhidethedynamicpanelatthetopafterwaitingfor3000ms. Whenthetextofthelasttextfieldchanges,verifywhetherthetextcombinationofthefour textfieldsisequaltotherandomnumberjustgenerated.Ifyes,change to login successfulstate.Ifnot,showerrornotice. GoogleAuthorizedLogin Whentheconfirmauthorizationbuttonisclicked,thedynamicpanelwillentertheLoginSuccessful state. Inthisway,allthesettingsarecompleted. Ifyouhaveanyquestionsandsuggestions,pleaseleaveamessage. Note:ClickheretodownloadthecompletedRPfileforthistutorial(RP10orup). WellJoe @AxureBoutique,a technical writerandteacher,focusesonAxureprototypedesignandproductdesign. Share ShareonFacebook Tweet TweetonTwitter Pinit PinonPinterest Leaveacomment Name Email Message Pleasenote,commentsmustbeapprovedbeforetheyarepublished ThissiteisprotectedbyreCAPTCHAandtheGooglePrivacyPolicyandTermsofServiceapply. BacktoAxureTutorials&Tips Mostpopular AxureLibraries AxureTemplates UIkitWidgetLibraryAxureBoutique from$75.00 MaterialDesignWidgetLibraryAxureBoutique from$78.00 SalesforceLightningDesignSystemAxureBoutique from$99.00 Material-UIWidgetLibraryAxureBoutique from$75.00 Foundation6WidgetLibraryAxureBoutique from$78.00 Bootstrap5WidgetLibraryAxureBoutique from$69.00 Semantic-UIWidgetsLibraryAxureBoutique from$79.00 iOS14+AppleWidgetLibraryAxureBoutique from$59.00 MaterializeWidgetLibraryAxureBoutique from$49.00 BulmaWidgetLibraryAxureBoutique from$69.00 FluentUIWidgetLibraryJusoc from$59.00 IonicWidgetLibraryV5+AxureBoutique from$58.00 Viewall OAEnterpriseCollaborativeSystem+AdminLteUIUtaShare from$249.00 E-CommerceFinancialAppAxure_store from$99.00 OMINIHigh-FidelityShopAppOMINI.BASS from$99.00 OMINIFitnessHigh-FidelityPrototypeV1.0OMINI.BASS from$99.00 OMINIE-CommerceShopTemplateOMINI.BASS from$29.00 OMINISmartDrivingAppOMINI.BASS from$49.00 SharedVehicleChargingAppOMINI.BASS from$39.00 TechCompanyOfficialWebsiteTemplateOMINI.BASS from$19.00 SmallFreshStyleResumeTemplateOMINI.BASS from$29.00 WarmStyleResumeTemplateOMINI.BASS $0.00 CommonBackendMenuTemplateUtaShare from$59.00 Online&OfflineEducationBackendManagementSystemUtaShare from$59.00 Viewall AxureTutorial:MakeDropdownwithTreebyWELLJOE AxureTips:7TipsforUsingAxure10byWELLJOE AxureTutorial:MakeHeatMapwithRepeaterbyWELLJOE Subscribetoreceivenewproductanddiscountinformation.Unsubscribeatanytime. Enteryouremail Subscribe "Close(esc)"