視覺(jué)設(shè)計(jì)的思考：如何設(shè)計(jì)APP的登錄頁(yè)

一、APP的屬性分類(lèi)

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

第一種：無(wú)需登錄

直接使用App的功能，主要是工具類(lèi)的App,如日歷、計(jì)算器，手電筒之類(lèi)的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)用取代了。而工具類(lèi)的APP為了不被系統(tǒng)應(yīng)用取代，就想辦法提供一些個(gè)性功能吸引用戶注冊(cè)。

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

主要是一些資訊、生活類(lèi)應(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)制登錄

這類(lèi)應(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)潔。

第三種：用戶名或者手機(jī)登錄

這種界面表現(xiàn)形式如圖EF,是一個(gè)標(biāo)簽欄切換登錄方式。一個(gè)界面上可以切換手機(jī)號(hào)登錄和賬戶登錄兩種方式。這種方式擺在臺(tái)面上的說(shuō)法是，為了方便用戶，給你多種登錄選擇。實(shí)際上為了方便企業(yè)維護(hù)App賬號(hào)體系的，因?yàn)榭赡苡写罅坑脩羰菑腜C上轉(zhuǎn)換過(guò)來(lái)的。他們之前并沒(méi)有用手機(jī)注冊(cè)。當(dāng)然也就沒(méi)有手機(jī)號(hào)登錄了。例如美團(tuán)大眾點(diǎn)評(píng)這樣的PC用戶量的應(yīng)用肯定會(huì)選擇如EF這種形式。從用戶體驗(yàn)的角度來(lái)說(shuō)不是方便用戶的，因?yàn)檫x擇越多越難用啊。

第四種：第三方社交賬號(hào)登錄

一般會(huì)通過(guò)微信、微博、豆瓣等第三方常用社交賬號(hào)登錄，不僅僅能夠快捷方便的登錄體驗(yàn)產(chǎn)品，同時(shí)方便后續(xù)通過(guò)社交賬號(hào)對(duì)APP進(jìn)行分享宣傳推廣。一般小應(yīng)用都會(huì)選擇這種方式，因?yàn)榈卿涢T(mén)檻比較低。但一些用戶隱私性比較高的應(yīng)用還是會(huì)選擇自建賬號(hào)體系。比如支付理財(cái)類(lèi)應(yīng)用比較偏向自建用戶體系，因?yàn)閷?duì)于此類(lèi)應(yīng)用，用戶賬戶數(shù)據(jù)是至關(guān)重要的信息。

前面說(shuō)了這么多，就是讓各位同學(xué)知道UI是需要基于產(chǎn)品設(shè)計(jì)，同時(shí)對(duì)于頁(yè)面的交互邏輯也要理解。所以視覺(jué)設(shè)計(jì)師做頁(yè)面需要去理清你界面上下游，或者界面中每個(gè)元素的邏輯，從哪里來(lái)到哪里去。

三、視覺(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ì)文字名稱(chēng)，這時(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ì)把矢量的圖片去色，圖層模式并選用明度的模式。

3、加背景圖

很多時(shí)候矢量紋理也許找不到合適的，或者厭倦了各種規(guī)則紋理，我們可以試著去尋找一些好看的圖片做為背景。一般選擇整體為暗調(diào)的圖片，這樣可以承托前景的按鈕，logo等元素。對(duì)于需要強(qiáng)調(diào)的按鈕可以用純白做底，需要弱化的可以降低白色底的透明度。如果圖片頂端顏色雜亂不利于線上電池欄，所以可以再加上一個(gè)綠色的半透明漸變。貌似按鈕下感覺(jué)有點(diǎn)空，那么我們可以配上一段有詩(shī)意的語(yǔ)句：

成都 It seems that green leaves look more beautiful after the rain 成都（雨后的綠葉看起來(lái)更美了）

選圖的四種技巧

4、如何選圖

通過(guò)前面幾步發(fā)現(xiàn)選圖也是一個(gè)非常有技術(shù)的活，圖片好不好直接決定整體視覺(jué)格調(diào)高不高。那么如何選圖了。因?yàn)槭褂肰PN有時(shí)候太慢了。所以我經(jīng)常在花瓣上搜圖。花瓣上的圖片已經(jīng)很多了。很多國(guó)外站好看的圖片其實(shí)已經(jīng)被采過(guò)來(lái)了。搜綠色，植物，葉子等一切你可以想到的關(guān)鍵詞。然后通過(guò)畫(huà)板尋找。一些優(yōu)質(zhì)的畫(huà)板已經(jīng)整理好足夠多的圖片。那么剩下來(lái)就是挑選。

（1）局部特寫(xiě)圖片

局部特寫(xiě)圖片適合做背景圖片，因?yàn)榫植康膱D形不會(huì)顯得瑣碎，配合適當(dāng)?shù)寞B色對(duì)于前景的文字，按鈕視覺(jué)干擾非常少。

（2）矢量紋理圖片

矢量紋理圖片適合做背景圖片，且一些元素可以供靈感參考，單獨(dú)提取出來(lái)做為界面中的裝飾元素。

（3）透明底的圖片

透明底的圖片節(jié)省了摳圖的時(shí)間。一般界面是二維平面的，當(dāng)畫(huà)面中前景放置一些這種扣好的圖片的時(shí)候，有效的破除了界面的規(guī)則感。讓整個(gè)界面更加立體。

（4）有人的圖片

有人的圖片才有靈氣，所以可以選擇一些在自然環(huán)境中的人物，選擇人物圖片的要點(diǎn)就是感受整張圖片傳達(dá)給你的情緒。孤單的，安靜的，又或者溫暖的情緒。

四、設(shè)計(jì)案例演示

（1）登錄注冊(cè)分開(kāi)的界面，切換時(shí)候上部背景圖片要有區(qū)別，區(qū)別中又要統(tǒng)一，所以共同選擇了紋理不一樣的局部特寫(xiě)圖片，圖片綠色的顏色可能不一樣，所以共同疊加了同一種綠色，降低了透明度。讓界面圖片更加統(tǒng)一。

（2）白色的文字，半透明的按鈕顯得畫(huà)面非常有格調(diào)，所以圖片要選擇有明有暗的，這樣的背景圖，既不會(huì)太亮，前景無(wú)法清晰顯示。也不會(huì)太暗，使這個(gè)畫(huà)面氣氛壓抑。

（3）如果界面只是一張平面圖，會(huì)顯得很死板。這時(shí)候我們需要破除界面的邊界?？梢栽诮缑嬖O(shè)計(jì)中，選擇透明底的圖片，把界面中的樹(shù)葉，花之類(lèi)的元素，加上陰影。這樣可以增加界面的立體效果。

（4）登錄注冊(cè)切換的界面可以選擇一對(duì)近似又有不同的圖片。這時(shí)候我選擇兩個(gè)在森林中有人物的圖片做為背景。人在自然界很容易有產(chǎn)生神秘孤寂的情緒。所以配上兩行詩(shī)意文字更好啦！當(dāng)然文字不是亂寫(xiě)的，需要配合當(dāng)前界面意境。

五、登錄界面設(shè)計(jì)總結(jié)

視覺(jué)設(shè)計(jì)前先理清楚界面的邏輯，界面中每個(gè)元素的點(diǎn)擊從哪里來(lái)到哪里去。App因?yàn)楫a(chǎn)品賬號(hào)體系不同的，所以有各種登錄注冊(cè)方式。登錄注冊(cè)有四種方式。每種方式可以采用不同的形式的背景圖設(shè)計(jì)。

找圖片有意識(shí)的按不同類(lèi)型分類(lèi)去尋找圖片。要善于運(yùn)用一些透明底圖片調(diào)節(jié)界面的維度。讓界面細(xì)節(jié)設(shè)計(jì)更豐富。設(shè)計(jì)師也要學(xué)會(huì)運(yùn)用文字的力量，點(diǎn)睛的文字可以讓界面設(shè)計(jì)增加品質(zhì)感。

新聞名稱(chēng)：視覺(jué)設(shè)計(jì)的思考：如何設(shè)計(jì)APP的登錄頁(yè)
當(dāng)前URL：http://www.bm7419.com/news/33231.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、Google、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)