大多數(shù)情況下，APP的登錄界面決定了客戶對(duì)APP的第一印象，所以在進(jìn)行APP登錄界面設(shè)計(jì)時(shí)一定要格外用心，設(shè)計(jì)出一個(gè)無瑕疵且吸引人的登錄界面才可讓客戶對(duì)使用APP有更加強(qiáng)烈的興趣。下面faceui為大家分享一下APP登錄界面設(shè)計(jì)時(shí)應(yīng)該包含的幾大要素，希望對(duì)您有所幫助。

　　APP登錄界面需要包含的幾大要素

　　一、背景的選擇

　　1.純色背景：整體上看起來非常的干凈。

　　2.毛玻璃效果：要控制好效果，注意顏色搭配，否則會(huì)看來有點(diǎn)“臟”。

　　3.漸變色。

　　4.蒙版背景圖片：要注意背景圖片的選擇及蒙版的透明度，否則容易造成輸入框和按鈕辨識(shí)度降低。

APP登錄界面設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　二、上半部分（即輸入框的上面）

　　當(dāng)前主流的App登錄界面一般不顯示標(biāo)題欄，界面整體顯示大方，空間感強(qiáng)，上半部分一般展示圖片（可能是應(yīng)用的logo）、文字（應(yīng)用的名稱或一個(gè)體現(xiàn)App的短句）或者圖片加文字的方式。

　　三、輸入框和登錄按鈕

　　1.純輸入框，里面有輸入內(nèi)容的提示文字

　　2.輸入框增加一個(gè)小圖標(biāo)，用來標(biāo)識(shí)需要輸入的內(nèi)容

　　3.輸入框前或輸入框中帶title

　　四、注冊鍵位

　　只要兩種表現(xiàn)形式：按鈕和文字。位置一般在登錄按鈕下方。一般更傾向于按鈕，因?yàn)槭褂妙l率比較高。

　　五、忘記密碼鍵位

　　大都采用文字展示，畢竟這個(gè)功能的使用頻率較低，相對(duì)于登錄和注冊是最不重要的功能，一般會(huì)放在登錄按鈕的下方，部分App會(huì)放到登錄按鈕和文字框之間，居左放。

　　六、聯(lián)合登錄鍵位

　　一般會(huì)放在登錄界面的最底部，有些App會(huì)放在登錄按鈕之下，注冊按鈕的上方（畢竟聯(lián)合登錄也屬于登錄）。

　　APP登錄界面設(shè)計(jì)的兩種思路

　　第一種APP登錄界面設(shè)計(jì)思路：大眾化設(shè)計(jì)

　　普通純色背景，元素就是登錄框和密碼框，加上登錄按鈕，這類APP登錄界面設(shè)計(jì)比較大眾化，中規(guī)中矩。通用的布局就是：上-中-下，上面一般放置企業(yè)形象logo或APP名稱，中間就是登錄密碼框，下面就是注冊信息。這類APP登錄界面的背景是漸變的或者多色塊的。很有扁平化的意境。

APP登錄界面設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　第二種APP登錄界面設(shè)計(jì)思路：：情感化設(shè)計(jì)

　　在大眾化設(shè)計(jì)的基礎(chǔ)上，會(huì)加上一些情感化的元素，比如人物頭像，代表這個(gè)APP有象征意義的圖標(biāo)或者背景素材。比如信封，旅游圖片。

　　也有一些APP登錄界面背景會(huì)隨著當(dāng)前的時(shí)間來變化背景，如果是白天，背景是簡約而陽光的 如果是晚上，則是深層夜晚星空閃耀的背景如QQAPP登錄界面設(shè)計(jì)。

　　用戶體驗(yàn)方面的設(shè)計(jì)注意事項(xiàng)

　　1、把郵箱和手機(jī)號(hào)輸入框合并成一個(gè)，可縮減用戶的操作步驟。

　　2、用戶名密碼這些必填項(xiàng)在沒有輸入時(shí)，登錄按鈕為不可用狀態(tài)，避免誤操作帶來的麻煩。

　　3、輸入框中顯示提示信息的方式進(jìn)一步釋放了畫面空間，讓整個(gè)畫面看起來更加簡潔。但是注意輸入框、提示文字的顏色灰度要把握好，顏色太淺不容易查看。

　　4、畫面中核心流程按鈕突出顯示，其它按鈕則最小化顯示，根據(jù)重要程度將顏色加以區(qū)別。

　　5、輸入框的獲得焦點(diǎn)時(shí)突出顯示，以便在多個(gè)輸入框時(shí)辨別焦點(diǎn)所處的位置。

　　6、錯(cuò)誤提示直接顯示在畫面中，不以彈出對(duì)話框的形式或者toast的形式實(shí)現(xiàn)。消息提示框（toast）顯示時(shí)間如果短的話用戶可能會(huì)看不清楚。

APP登錄界面設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　7、頁面中的輸入框、按鈕等其他重要控件盡可能在彈出軟鍵盤時(shí)顯示在手機(jī)屏幕上半部分，方便用戶切換、確認(rèn)等操作。

　　8、注冊/登錄失敗的情況，提示信息盡可能地詳細(xì)，是賬戶名出錯(cuò)還是密碼出錯(cuò)，或者是手機(jī)號(hào)已經(jīng)被注冊過了。

　　9、輸入郵箱地址時(shí)，可彈出自動(dòng)補(bǔ)全功能，自動(dòng)加入常見的郵箱后綴。

　　10、發(fā)送驗(yàn)證郵件后，可給用戶詳細(xì)的說明及操作提示，也可以加入一個(gè)按鈕直接跳轉(zhuǎn)到相應(yīng)的郵箱。

　　APP登錄界面設(shè)計(jì)不可馬虎，只有多學(xué)多試才能設(shè)計(jì)出令大家都滿意的產(chǎn)品。更多的ui設(shè)計(jì)心得可長期關(guān)注faceui，若有其他的相關(guān)需求也可隨時(shí)聯(lián)系我們進(jìn)行咨詢了解哦。