一個完整的App包含很多頁面，設計一個App是一個很系統的工程。筆者會陸續撰寫，帶著大家完整的學習設計App的過程。我們先從登錄頁設計開始學習。做界面設計前，我們先來理解一下界面的邏輯。

一、APP的屬性分類

我們先給App分個類，為什么需要登錄注冊？因為App需要你的個人信息啊。這樣才是一個留存下來的用戶，而不是來一下就走的過客。App按注冊登錄必要性分分如下三種：

第一種：無需登錄

直接使用App的功能，主要是工具類的App,如日歷、計算器，手電筒之類的App，不過現在這樣純粹的App幾乎不存在，因為沒有用戶留存的App就沒有價值啊。沒有經濟價值就活不下去啊。所以市場上沒有這樣的活雷鋒了，都被系統應用取代了。而工具類的APP為了不被系統應用取代，就想辦法提供一些個性功能吸引用戶注冊。

第二種：非強制登錄

主要是一些資訊、生活類應用，如：網易新聞、網易云音樂等；第一次啟動App的時候既可以選擇立即注冊，也可以選擇不注冊，直接進入App的主界面。用戶無須登錄可以使用部分功能，如果需要解鎖某些功能，就必須登錄啦。比如聽音樂想根據你聽歌習慣推薦歌曲這樣的個性化功能。

第三種：強制登錄

這類應用具有很強的個人隱私熟悉，比如支付寶，你的錢袋子不能讓人知道你有多少錢吧，比如陌陌，你最近約了誰也不能讓人知道。還有淘寶，最近買了一些不可描述的東西不能閑雜人看到。所以這些和錢和隱私有關的音樂都是強制登錄。不登錄你是不可以使用這個App的。

二、注冊登錄的四種方式

理清楚哪些App需要登錄后，那么我們開看看注冊有哪幾種方式？

第一種：手機號登錄注冊

一個界面就完成了登錄或者注冊的過程。通過手機號驗證碼快速注冊或登錄，這應該是目前最高效的登錄注冊方式了。如果是新用戶直接通過手機驗證碼注冊，老用戶也可以通過驗證碼登錄。登錄和注冊一氣呵成。用戶甚至不需要記得密碼，只要手機在手，就可以無憂登錄。

第二種：用戶名密碼注冊登錄

注冊和登錄是分開的，簡單的說就是登錄和注冊界面是兩個界面。優點就是多平臺登錄的時候有用戶名密碼方便些。缺點就是注冊流程繁瑣啊。界面表現形式如圖例B用戶名/郵箱登錄，如果需要注冊點擊跳轉新頁面。國外用戶是挺喜歡用郵箱注冊的，總覺得老外的用戶習慣很多時候和國人差異挺大的。當然如果不想注冊彈出新頁面，那么選擇圖CD方式的標簽切換也可以讓界面很簡潔。

第三種：用戶名或者手機登錄

這種界面表現形式如圖EF,是一個標簽欄切換登錄方式。一個界面上可以切換手機號登錄和賬戶登錄兩種方式。這種方式擺在臺面上的說法是，為了方便用戶，給你多種登錄選擇。實際上為了方便企業維護App賬號體系的，因為可能有大量用戶是從PC上轉換過來的。他們之前并沒有用手機注冊。當然也就沒有手機號登錄了。例如美團大眾點評這樣的PC用戶量的應用肯定會選擇如EF這種形式。從用戶體驗的角度來說不是方便用戶的，因為選擇越多越難用啊。

第四種：第三方社交賬號登錄

一般會通過微信、微博、豆瓣等第三方常用社交賬號登錄，不僅僅能夠快捷方便的登錄體驗產品，同時方便后續通過社交賬號對APP進行分享宣傳推廣。一般小應用都會選擇這種方式，因為登錄門檻比較低。但一些用戶隱私性比較高的應用還是會選擇自建賬號體系。比如支付理財類應用比較偏向自建用戶體系，因為對于此類應用，用戶賬戶數據是至關重要的信息。

前面說了這么多，就是讓各位同學知道UI是需要基于產品設計，同時對于頁面的交互邏輯也要理解。所以視覺設計師做頁面需要去理清你界面上下游，或者界面中每個元素的邏輯，從哪里來到哪里去。

三、視覺設計的思考過程

下面我開始做視覺設計了。為了演示方便，我給自己出了一個題目，以綠色為虛擬的主題做設計登錄頁。

首先設計稿以iPhone7為基準設計，分辨率是1334×750，為什么選擇這個分辨率，我的書說的很明白了。這里就不再贅述了。我們先做強制登錄注冊的。這里打開應用后,一般國外的應用挺喜歡出現選擇登錄注冊界面。這里我給自己出一個題目，以綠色為主題進行設計。

不選擇純的顏色

1、填充品牌色

整個界面背景填充App的主色，因為是綠色主題，暫定主為綠色。色相選擇不要選擇過于純的顏色，不要選擇下面第一排的顏色比如翠綠。而傾向于選擇第二排，例如墨綠，祖母綠這樣顏色。就好像我們畫畫用的顏料如果直接使用顏料的顏色，會顯得畫面顏色生硬。而經過多色調節出來的顏色會顯得層次豐富。如果主色飽和度較高，請調低主色的飽和度。因為過于鮮亮的顏色會降低應用的品質感。

多效果混合模式

2、加矢量紋理

純色背景適合用反白的logo，那么，你需要設計一個有特點的線性或者剪影圖標。很多時候APP并沒有單獨設計文字名稱，這時候logo的標題字我一般選用非襯線粗體搭配。界面上的按鈕只有兩個，至于是突出注冊還是突出登錄。這個還是看產品人員的需求。因為不同應用對于登錄注冊的優先級理解不一樣。如果你的BOSS覺得這種極簡風格的背景太敷衍了。那么我們可以考慮加一些矢量的紋理。當然我們需要找綠葉元素的紋理。這樣才貼合主題。為了讓顏色更加貼合主色，我會把矢量的圖片去色，圖層模式并選用明度的模式。

3、加背景圖

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

“ It seems that green leaves look more beautiful after the rain “（雨后的綠葉看起來更美了）

選圖的四種技巧

4、如何選圖

通過前面幾步發現選圖也是一個非常有技術的活，圖片好不好直接決定整體視覺格調高不高。那么如何選圖了。因為使用VPN有時候太慢了。所以我經常在花瓣上搜圖?；ò晟系膱D片已經很多了。很多國外站好看的圖片其實已經被采過來了。搜綠色，植物，葉子等一切你可以想到的關鍵詞。然后通過畫板尋找。一些優質的畫板已經整理好足夠多的圖片。那么剩下來就是挑選。

（1）局部特寫圖片

局部特寫圖片適合做背景圖片，因為局部的圖形不會顯得瑣碎，配合適當的疊色對于前景的文字，按鈕視覺干擾非常少。

（2）矢量紋理圖片

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

（3）透明底的圖片

透明底的圖片節省了摳圖的時間。一般界面是二維平面的，當畫面中前景放置一些這種扣好的圖片的時候，有效的破除了界面的規則感。讓整個界面更加立體。

（4）有人的圖片

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

四、設計案例演示

（1）登錄注冊分開的界面，切換時候上部背景圖片要有區別，區別中又要統一，所以共同選擇了紋理不一樣的局部特寫圖片，圖片綠色的顏色可能不一樣，所以共同疊加了同一種綠色，降低了透明度。讓界面圖片更加統一。

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

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

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

五、登錄界面設計總結

視覺設計前先理清楚界面的邏輯，界面中每個元素的點擊從哪里來到哪里去。App因為產品賬號體系不同的，所以有各種登錄注冊方式。登錄注冊有四種方式。每種方式可以采用不同的形式的背景圖設計。

找圖片有意識的按不同類型分類去尋找圖片。要善于運用一些透明底圖片調節界面的維度。讓界面細節設計更豐富。設計師也要學會運用文字的力量，點睛的文字可以讓界面設計增加品質感。

作者：余振華（網名：風尾竹），UI設計師，站酷推薦設計師，微信公眾號【 liaosheji2010】，歡迎交流

本文由 @余振華 原創發布于人人都是產品經理。未經許可，禁止轉載。