如何設(shè)計(jì)APP的登錄頁(yè)

一、APP的屬性分類

　　我們先給App分個(gè)類，為什么需要登錄注冊(cè)？因?yàn)锳pp需要你的個(gè)人信息啊。這樣才是一個(gè)留存下來(lái)的用戶，而不是來(lái)一下就走的過(guò)客。App按注冊(cè)登錄必要性分分如下三種：

　　種：無(wú)需登錄

　　直接使用App的功能，主要是工具類的App,如日歷、計(jì)算器，手電筒之類的App，不過(guò)現(xiàn)在這樣純粹的App幾乎不存在，因?yàn)闆](méi)有用戶留存的App就沒(méi)有價(jià)值啊。沒(méi)有經(jīng)濟(jì)價(jià)值就活不下去啊。所以市場(chǎng)上沒(méi)有這樣的活雷鋒了，都被系統(tǒng)應(yīng)用取代了。而工具類的APP為了不被系統(tǒng)應(yīng)用取代，就想辦法提供一些個(gè)性功能吸引用戶注冊(cè)。

第二種：非強(qiáng)制登錄

主要是一些資訊、生活類應(yīng)用，如：網(wǎng)易新聞、網(wǎng)易云音樂(lè)等；次啟動(dòng)App的時(shí)候既可以選擇立即注冊(cè)，也可以選擇不注冊(cè)，直接進(jìn)入App的主界面。用戶無(wú)須登錄可以使用部分功能，如果需要解鎖某些功能，就必須登錄啦。比如聽(tīng)音樂(lè)想根據(jù)你聽(tīng)歌習(xí)慣推薦歌曲這樣的個(gè)性化功能。

　　第三種：強(qiáng)制登錄

　　這類應(yīng)用具有很強(qiáng)的個(gè)人隱私熟悉，比如支付寶，你的錢(qián)袋子不能讓人知道你有多少錢(qián)吧，比如陌陌，你近約了誰(shuí)也不能讓人知道。還有淘寶，近買(mǎi)了一些不可描述的東西不能閑雜人看到。所以這些和錢(qián)和隱私有關(guān)的音樂(lè)都是強(qiáng)制登錄。不登錄你是不可以使用這個(gè)App的。

　　二、注冊(cè)登錄的四種方式

　　理清楚哪些App需要登錄后，那么我們開(kāi)看看注冊(cè)有哪幾種方式？

　　種：手機(jī)號(hào)登錄注冊(cè)

　　一個(gè)界面就完成了登錄或者注冊(cè)的過(guò)程。通過(guò)手機(jī)號(hào)驗(yàn)證碼快速注冊(cè)或登錄，這應(yīng)該是目前高效的登錄注冊(cè)方式了。如果是新用戶直接通過(guò)手機(jī)驗(yàn)證碼注冊(cè)，老用戶也可以通過(guò)驗(yàn)證碼登錄。登錄和注冊(cè)一氣呵成。用戶甚至不需要記得密碼，只要手機(jī)在手，就可以無(wú)憂登錄。

　　第二種：用戶名密碼注冊(cè)登錄

　　注冊(cè)和登錄是分開(kāi)的，簡(jiǎn)單的說(shuō)就是登錄和注冊(cè)界面是兩個(gè)界面。優(yōu)點(diǎn)就是多平臺(tái)登錄的時(shí)候有用戶名密碼方便些。缺點(diǎn)就是注冊(cè)流程繁瑣啊。界面表現(xiàn)形式如圖例B用戶名/郵箱登錄，如果需要注冊(cè)點(diǎn)擊跳轉(zhuǎn)新頁(yè)面。國(guó)外用戶是挺喜歡用郵箱注冊(cè)的，總覺(jué)得老外的用戶習(xí)慣很多時(shí)候和國(guó)人差異挺大的。當(dāng)然如果不想注冊(cè)彈出新頁(yè)面，那么選擇圖CD方式的標(biāo)簽切換也可以讓界面很簡(jiǎn)潔。

　　三、視覺(jué)設(shè)計(jì)的思考過(guò)程

　　下面我開(kāi)始做視覺(jué)設(shè)計(jì)了。為了演示方便，我給自己出了一個(gè)題目，以綠色為虛擬的主題做設(shè)計(jì)登錄頁(yè)。

　　先設(shè)計(jì)稿以iPhone7為基準(zhǔn)設(shè)計(jì)，分辨率是1334×750，為什么選擇這個(gè)分辨率，我的書(shū)說(shuō)的很明白了。這里就不再贅述了。我們先做強(qiáng)制登錄注冊(cè)的。這里打開(kāi)應(yīng)用后,一般國(guó)外的應(yīng)用挺喜歡出現(xiàn)選擇登錄注冊(cè)界面。這里我給自己出一個(gè)題目，以綠色為主題進(jìn)行設(shè)計(jì)。

　　不選擇純的顏色

　　1、填充品牌色

　　整個(gè)界面背景填充App的主色，因?yàn)槭蔷G色主題，暫定主為綠色。色相選擇不要選擇過(guò)于純的顏色，不要選擇下面排的顏色比如翠綠。而傾向于選擇第二排，例如墨綠，祖母綠這樣顏色。就好像我們畫(huà)畫(huà)用的顏料如果直接使用顏料的顏色，會(huì)顯得畫(huà)面顏色生硬。而經(jīng)過(guò)多色調(diào)節(jié)出來(lái)的顏色會(huì)顯得層次豐富。如果主色飽和度較高，請(qǐng)調(diào)低主色的飽和度。因?yàn)檫^(guò)于鮮亮的顏色會(huì)降低應(yīng)用的品質(zhì)感。

　　多效果混合模式

　　2、加矢量紋理

　　純色背景適合用反白的logo，那么，你需要設(shè)計(jì)一個(gè)有特點(diǎn)的線性或者剪影圖標(biāo)。很多時(shí)候APP并沒(méi)有單獨(dú)設(shè)計(jì)文字名稱，這時(shí)候logo的標(biāo)題字我一般選用非襯線粗體搭配。界面上的按鈕只有兩個(gè)，至于是突出注冊(cè)還是突出登錄。這個(gè)還是看產(chǎn)品人員的需求。因?yàn)椴煌瑧?yīng)用對(duì)于登錄注冊(cè)的優(yōu)先級(jí)理解不一樣。如果你的BOSS覺(jué)得這種極簡(jiǎn)風(fēng)格的背景太敷衍了。那么我們可以考慮加一些矢量的紋理。當(dāng)然我們需要找綠葉元素的紋理。這樣才貼合主題。為了讓顏色更加貼合主色，我會(huì)把矢量的圖片去色，圖層模式并選用明度的模式。