移動(dòng)端UI設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)教程 項(xiàng)目四-任務(wù)一-登錄頁設(shè)計(jì)-任務(wù)實(shí)現(xiàn)

登錄頁設(shè)計(jì)目錄4、常見的APP設(shè)備規(guī)格1、APP的概念及常見類型2、APP常見類型3、智能手機(jī)屏幕（英寸、像素、分辨率）5、多種登錄方式及表現(xiàn)形式6、任務(wù)實(shí)現(xiàn)知識(shí)點(diǎn)導(dǎo)入011、APP的概念及常見類型

APP為application的縮寫，即為應(yīng)用程序。所以手機(jī)APP指安裝在智能手機(jī)上的軟件、應(yīng)用，完善原始系統(tǒng)的不足與個(gè)性化，使手機(jī)完善其功能，為用戶提供更豐富的使用體驗(yàn)的主要手段。手機(jī)軟件的運(yùn)行需要有相應(yīng)的手機(jī)系統(tǒng)，主要的手機(jī)系統(tǒng)有蘋果公司的iOS、谷歌公司的Android（安卓）系統(tǒng)、塞班平臺(tái)和微軟平臺(tái)。2、APP常見類型

當(dāng)前中國的商業(yè)模式已經(jīng)進(jìn)入數(shù)字資產(chǎn)時(shí)代，帶來的也是營銷手段的不斷變化，app已成為許多企業(yè)的首選，并承擔(dān)著商業(yè)變現(xiàn)的重要使命，品牌傳播與客戶的維護(hù)。要知道大家生活中幾乎每時(shí)每刻都在使用手機(jī)，手機(jī)App已經(jīng)成為了大家所熟知了，而App也給大家生活帶來眾多方便，那么我們生活中常見的App類型又有哪些呢？（1）、電子商務(wù)。app是企業(yè)銷售中最直接、最有效的一種，許多電商app加入了社交等元素，加上各種社交平臺(tái)開發(fā)分享，因此用戶可以在購買的同時(shí)快速分享，在增加自己的銷售渠道。（2）、服務(wù)品牌。以大型企業(yè)為主，承擔(dān)一些功能，如我們熟悉的快遞查詢、小區(qū)內(nèi)客服、維修、活動(dòng)、積分（1）、電子商務(wù)。app是企業(yè)銷售中最直接、最有效的一種，許多電商app加入了社交等元素，加上各種社交平臺(tái)開發(fā)分享，因此用戶可以在購買的同時(shí)快速分享，在增加自己的銷售渠道。（2）、服務(wù)品牌。以大型企業(yè)為主，承擔(dān)一些功能，如我們熟悉的快遞查詢、小區(qū)內(nèi)客服、維修、活動(dòng)、積分商城等。讓你和顧客更近一點(diǎn)。（3）、本地應(yīng)用程序。企業(yè)可以把自己的業(yè)務(wù)領(lǐng)域分成若能，而本地app最主要的一點(diǎn)就是利用app來發(fā)展新客戶，維持舊客餐飲企業(yè)積累自己的客戶資源，有效地打造餐飲企業(yè)品牌。

（1）、電子商務(wù)。app是企業(yè)銷售中最直接、最有效的一種，許多電商app加入了社交等元素，加上各種社交平臺(tái)開發(fā)分享，因此用戶可以在購買的同時(shí)快速分享，在增加自己的銷售渠道。

（2）、服務(wù)品牌。以大型企業(yè)為主，承擔(dān)一些功能，如我們熟悉的快遞查詢、小區(qū)內(nèi)客服、維修、活動(dòng)、積分商城等。讓你和顧客更近一點(diǎn)。

（3）、本地應(yīng)用程序。企業(yè)可以把自己的業(yè)務(wù)領(lǐng)域分成若干區(qū)域，利用app開發(fā)新的客戶，維護(hù)好老客戶，并配合線下活動(dòng)轉(zhuǎn)化客戶，而本地app最主要的一點(diǎn)就是共享功能，而本地app最主要的一點(diǎn)就是利用app來發(fā)展新客戶，維持舊客戶群。

（4）、連鎖餐飲app。餐飲業(yè)連鎖店app可以實(shí)現(xiàn)對(duì)手機(jī)店的訂貨、VIP活動(dòng)等信息的推送，還可以稍微增加一點(diǎn)社交功能，這樣就可以幫助餐飲企業(yè)積累自己的客戶資源，有效地打造餐飲企業(yè)品牌。

（5）、營銷app。銷售類app的功能是為客戶自行分配銷售人員，因此會(huì)涉及諸如在線支付和導(dǎo)購消費(fèi)等一些常見功能，對(duì)后臺(tái)CRM進(jìn)行管理，并可以運(yùn)用大數(shù)據(jù)精確營銷。3、智能手機(jī)屏幕（英寸、像素、分辨率）

屏幕分辨率:屏幕上顯示的像素個(gè)數(shù)，單位尺寸內(nèi)像素點(diǎn)越多，顯示的圖像就越清楚。單位是px，1px=1個(gè)像素點(diǎn)。分辨率720*1280表示手機(jī)水平方向的像素為720,垂直方向?yàn)?280.

市場(chǎng)主流分辨率有:480*800、720*1280、1080*1920。特別注意:這里的分辨率和我們ps里面設(shè)置的分辨率不是同一個(gè)分辨率。一般設(shè)計(jì)的時(shí)候我們?cè)O(shè)置PS的分辨率為:72像素/英寸

5.0英寸分辨率為480x800(WVGA)像素密度186PPI

5.0英寸分辨率為1280*720像素密度294PPI

5.0英寸分辨率為1920x1080(FHD)像素密度441PPI4、常見的APP設(shè)備規(guī)格

移動(dòng)端設(shè)備屏幕尺寸非常多,碎片化嚴(yán)重。其是Android,有多種分辨率:480x800,480x854,540x960,720x1280，1080x1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640x960,640x1136,750x1334,1242x2208。實(shí)際上大部分的app和移動(dòng)端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規(guī)律可循。5、多種登錄方式及表現(xiàn)形式

（1）、賬號(hào)登錄(郵箱、手機(jī)號(hào)碼、自定義昵稱)直接使用郵箱、手機(jī)號(hào)碼等進(jìn)行登錄是最為傳統(tǒng)的登錄方式，這類登錄方式常常需要用戶跳出APP進(jìn)行驗(yàn)證操作。用戶在APP里的操作尚可加以控制，一旦用戶跳出APP,很容易就會(huì)被其他東西吸引了注意力而中斷了操作。而且，還有其他不可控的因素，如進(jìn)行郵箱驗(yàn)證時(shí)，郵件被屏蔽了、郵箱軟件要升級(jí)升完忘了驗(yàn)證了，這些都有可能發(fā)生。5、多種登錄方式及表現(xiàn)形式

（2）、第三方賬號(hào)登錄(簡(jiǎn)書、大眾點(diǎn)評(píng))APP采用這種登錄方式，可以有效降低注冊(cè)的門檻從而提高了用戶的轉(zhuǎn)化率,避免了用戶重新注冊(cè)賬號(hào)而產(chǎn)生的記憶負(fù)擔(dān)。但是，最好不要讓用戶使用第三方賬號(hào)登錄之后，還要求用戶再注冊(cè)一個(gè)賬號(hào)。第三方賬號(hào)登錄常常還會(huì)帶來一個(gè)很嚴(yán)重的問題:因?yàn)殚L(zhǎng)時(shí)間沒有進(jìn)行過登錄操作，用戶忘了自己到底是用哪個(gè)第三方賬號(hào)注冊(cè)的賬號(hào)。5、多種登錄方式及表現(xiàn)形式

還有一種情況，接入的第三方停止了服務(wù),會(huì)使用戶大量丟失。所以，第三方賬號(hào)登錄的接口選擇很重要。為了預(yù)防這類情況的發(fā)生，做好第三方賬號(hào)登錄的用戶向傳統(tǒng)的賬號(hào)登錄的導(dǎo)流很重要。當(dāng)然，我們也可以將不同接口的賬號(hào)相關(guān)聯(lián)，這可以有效地解決上述兩個(gè)問題。

設(shè)計(jì)APP登錄方式時(shí)，我們一定要想清楚使用第三方賬號(hào)登錄的根本目的是什么，到底是為了降低登錄門檻還是為了利用社交渠道進(jìn)行分享或是其他的目的。在達(dá)到目的的同時(shí)，也一定要避開這其中的坑。任務(wù)實(shí)現(xiàn)026、任務(wù)實(shí)現(xiàn)：

本書中的案例是一款母嬰電商及社交結(jié)合性質(zhì)的APP，該產(chǎn)品的用戶畫像在設(shè)計(jì)APP的時(shí)候就已經(jīng)確定，主要面對(duì)的顧客群體是女性（不排除部分男性用戶），在登錄前該APP有一個(gè)了解用戶目前婚育狀態(tài)的信息頁面。（在任務(wù)二里會(huì)詳細(xì)介紹）

當(dāng)然，為提高用戶體驗(yàn)，界面設(shè)置了可跳過該選擇環(huán)節(jié)的按鈕，，用戶可直接跳過選項(xiàng)進(jìn)入登錄界面，登錄具體界面如圖

該APP采用手機(jī)驗(yàn)證碼/密碼登錄與第三方登錄結(jié)合的登錄形式，下面我們將以該登錄形式進(jìn)行設(shè)計(jì)實(shí)現(xiàn)：1、新建一個(gè)以iPhone62倍圖為設(shè)計(jì)基準(zhǔn)，尺寸750×1334px的畫布，設(shè)置顏色模式為RGB，分辨率為72。

2、建好后按快捷鍵【ctrl+R】調(diào)出參考線，設(shè)置頂部電量欄高度40px，標(biāo)題欄高度88px，畫布左右安全距離各為20px。拉好參考線，置入iOS組件里的電量欄及提前繪制好的返回圖標(biāo)，置于電量欄及標(biāo)題欄位置，對(duì)齊如圖。

3、在距離標(biāo)簽欄60px下輸入標(biāo)題文字【手機(jī)快速登錄】，文字樣式如圖，顏色#333333在界面中居中對(duì)齊。

4、在距離標(biāo)題文字【手機(jī)快速登錄】90px下方輸入文字【+86輸入手機(jī)號(hào)】，文字參數(shù)：蘋方，中等，36pt，#999999。并在中文文字下方24px距離處繪制一條1px，#999999，寬412px的直線。繪制好線條，在距離線條下方120px處，繪制第二根線條，作為驗(yàn)證碼輸入位置，并輸入【發(fā)送驗(yàn)證碼】文字，文字激活前參數(shù)：蘋方，中等，22pt，#999999，文字激活后參數(shù)：蘋方，中等，22pt，#ff6699，對(duì)齊并調(diào)整好相應(yīng)的位置。

5、繪制一個(gè)寬400px，高78px，四邊圓角為20像素的圓角矩形作為登錄按鈕，并在上方輸入文字【登錄】，文字參數(shù)：蘋方，中等，48pt，#ffffff。此按鈕在激活前顏色#eaeaea，激活后按鈕顏色為#ff70e4到fe7883的-90°線性漸變色。