本文作者主要從三個方面入手，對登錄界面的設計樣式進行了梳理，供大家參考學習。

最近在公司剛做完一個項目，在設計過程中遇到一個大家常會遇到的問題——沒思路，不知道該如何下手，因此針對這個問題我做一個小小的項目復盤。

首先和大家介紹一下項目背景，它是一個地產客戶資源管理的APP，目標人群就是我們公司的銷售人員約3000人，以前他們在客戶資源管理上主要使用的后臺管理系統，但是常常會出現資料跟進不及時，或者資料錄入不完善的情況，這次在APP中得到了改善并增加了一些新的功能。

我主要負責這次界面的設計工作，整個界面設計完成還算比較順利，只是登錄界面遲遲不過稿，因為想到咱們的產品是工具類、需要登錄之后才能進入界面進行操作，因此登錄界面就是大家進入APP看到的第一個界面，在設計上我采用的是全屏大圖的商務風格，使用了一個和房產有關和商務類的圖片。

不過后來老板反饋登錄界面的背景圖像有一層霧，他建議圖片最好是藍天白云看上去活躍點，不要氣死沉沉的。

大家看到藍天白云可能會笑，這設計出來會不會太low，我開始也是這樣想的但是轉念一想，老板只是覺得這個界面沒有生氣不活潑，我們的目標人群本來就是自己公司的銷售員工，在設計上一定要是充滿朝氣。

后來我嘗試了多種圖片類型：商務辦公、海景房、純意向類圖片等，覺得都不能很好的表達。這時候同事看到我有點糾結，于是就提醒我我換個思路不一定要設計成這種全屏大圖風格，現在很多APP登錄界面設計都較為簡潔，不用拘泥于一種樣式。

那還有什么樣式較為適合呢？于是晚上回家我對登錄界面的設計樣式進行了梳理，我主要從三個方面入手：

1. 如何進行參考收集？
2. 參考收集完后怎么辦？
3. 如何選擇符合產品的設計樣式？

一、如何進行參考收集？

參考收集大家也可以理解為尋找參考，不管是樣式參考還是版式參考，在設計前期一定是會經歷收集的過程。

收集可以分為網上資源和項目資源，網上資源也就是大家熟知的花瓣、追波、Behance、站酷、UI中國這些設計平臺，大家可以通過這些平臺了解當前流行趨勢、樣式風格、界面分析等內容獲取幫助。

除此之外，我們還可以收集各行業優秀的APP、競品對他們進行分析，因此收集這一步是必不可少的。下圖是我手機上常備的覺得還不錯的APP：

由于這次做登錄界面，因此我首先將這些APP的登錄界面大體過了一遍，了解每個行業的特點。然后我在搜集了一些資源管理和工具類的APP（競品分析是必不可少的）。

收集完成后，我們可在每個行業挑選兩到三款APP進行截圖，到這里收集工作也就完成了。（收集工作雖然簡單，但是通過長期積累你會熟知每個行業的設計特點、你知道某個APP更新了，它為什么要更新，更新之后有什么好處等）

二、參考收集完后怎么辦？

參考收集完后就需要將上面收集到的截圖進行相關的分類（風格樣式分類、展示內容分類等），在設計時由于我們的內容已經確定，因此只需要進行風格樣式分類即可。

這里我將登錄界面的樣式分為：白色簡潔、輕裝飾、純色背景、全屏大圖、半屏圖片、插畫背景六大分類。通過分類我們可以了解到不同行業他們采用的設計方式。

1. 白色簡潔

白色簡潔風格是目前較為常見的樣式，其目的以信息錄入為目的，多用于體量比較大的APP中，在設計時沒有采用較為復雜的裝飾元素，整個界面以簡潔設計為主，在設計上主要是信息展示的排版設計。如下圖所示：

以得到、土豆、拉勾為例，在展示上出入不大，主要設計是信息的排版，得到和拉勾類似采用線條輸入框，居左排版樣式。土豆采用橢圓矩形輸入框，居中排版，同時還加入Logo體現品牌感。

2. 輕裝飾背景

輕裝飾背景也就是在簡潔風格的基礎上添加一些品牌裝飾元素，相較于簡潔風格該設計更能體現界面細節，增加界面品牌感，同時也不影響信息的錄入。如下圖所示：

輕裝飾在設計上可以有四種展現效果：

第一類似網易云音樂和網易美學，取產品相關元素進行裝飾；

第二類似好奇心日報做模糊處理增加界面層次感；

第三類似網易云課堂加入意向類的圖片；第四類似優酷、36Kr添加幾何元素進行裝飾。

3. 純色背景

純色背景在使用時往往采用品牌色，同時搭配Logo進行設計，體現品牌感。需要注意的是，該方式多用在登錄信息簡單，或者以第三方登錄為主的界面中。如下圖所示：

Keep、問卷網、騰訊課堂均采用品牌色進行設計，同時可以看出他們的登錄信息都較少，在視覺設計上也較為簡潔。

4.全屏大圖

全屏大圖也就是在登錄信息下方采用圖片的形式填充，其優勢是圖片更容易吸引人的注意力，更容易傳遞情感引起用戶共鳴，如果采用產品相關的圖還能夠提前給用戶有個預期。

其缺點是信息和背景融合度較高，對于一些體量較大的產品不太適合，多用在垂直類的APP中。如下圖所示：

全屏大圖其圖片是整個界面的核心，因此想要找到一個符合產品的圖片是不易的事情，在進行圖片查找時我們也需要有目的性的尋找，比如咕咚、釘釘選擇的和產品相關的圖片；每日開眼、隨辦、企業查用了較為意向的圖片；馬蜂窩采用全屏動圖讓整個登錄界面更加生動（使用動圖要慎重，因為用戶往往會使用過長的時間查看，拉長登錄時間）。

5. 半屏圖片

半屏圖片和全屏圖片類似都可以通過圖片傳遞產品核心功能、或者通過意向圖傳遞產品品牌感，只是半屏圖片其重點是以登錄信息為主。

其缺點是在設計上不容易出彩，目前僅有少部分的APP采用該樣式，如下圖所示：

小豬短租、NOTHING、螞蟻短租均使用的是半屏圖片的形式，可以看出其登錄操作模塊在界面的黃金位置上，整個界面設計會有一定的分割感。

6. 插畫背景

相比于圖片設計，插畫背景有個優勢就是通過自己手繪不需要到處找圖片，也不用擔心圖片的版權問題，可以完全根據自身產品進行插畫制作。

需要注意的是插畫設計最好加入品牌識別元素，或者和品牌相關元素，這樣才會顯得有意義。如下圖所示：

印象筆記采用鬧鐘、文檔的方式也讓人一目了然知道他的記事功能，in的Slogan就是有趣的人都在in，這幅插畫剛好也表現出了這個意思，最右采用品牌章魚卡通形象，讓界面具有可識別性。

三、如何選擇符合產品的設計樣式？

上面我們已經進行了參考的收集、截圖分類并做了簡單的樣式分析?，F在我們就需要將這些樣式結合我們實際的產品進行梳理，選出適合我們當前的設計方式。

任何界面的設計都是有理有據的，也就是我們的設計需要根據我們的設計目的、老板預期、競品分析多方面進行篩選。

1. 設計目的

首先我們來看登錄界面的目的主要有哪些？這里我主要歸納了4個方面：個人信息錄入、品牌展現、傳遞信息（商業信息、產品核心作用）、故事或產品的人文情懷。這些目的分別對應著不同的設計樣式。

個人信息錄入：主要使用在體量較大的項目中，其主要涉及目的就是高速高效的幫助用戶登錄，結合上面的樣式分析我們可以推出白色簡潔樣式、半屏圖片展示樣式、輕裝飾風格是以個人信息錄入為主要目的的。

品牌展現：如果你覺得千篇一律的白色簡潔風格沒有特點，你也可以根據需要加入品牌識別，比如在界面中添加Logo、添加和產品相關的圖片、插畫元素等。

結合上面的樣式分析，主要有輕裝飾風格、純色背景、插畫背景、全屏大圖能夠更好的提現品牌化。

傳遞信息：當你的登錄信息較為簡單時，比如僅有第三方或者簡單的登錄信息，這時候登錄界面不單單是以個人錄入為主，還會起著傳遞商業信息、產品信息等作用。

結合上面的樣式分析，主要有輕裝飾風格、全屏大圖、半屏圖片能夠更好的傳遞產品信息。

故事或產品的人文情懷：這個比較適合小眾的產品，我們知道圖片是最好的傳遞情感的方式，因此全屏圖片是不錯的選擇，當然如果產品預算較高，我們也可制作成視頻，更能夠引起用戶的共鳴。

分析完后就需要結合我們產品的設計目的進行選擇了，根據前期的需求溝通我們的登錄界面信息簡單，同時用戶需要登錄之后才能進入界面，因此在展現上以品牌展現和傳遞信息為主，因此我們可以推出我們的產品較為適合輕裝飾風格、純色背景、插畫背景、全屏大圖。

2. 老板預期

有時候你分析的不一定是正確的，你可以將你的分析和經理說，經理會比你更清楚和老板想要哪種。在前言部分我也提到過，老板想要登錄界面較為活躍，體現銷售行業的朝氣。因此在設計時我們需要考慮這一因素。

3. 競品分析

競品分析往往能夠解決我們采用何種樣式，我們的項目定位很明顯，就是客戶資源管理，目標人群也只是本公司銷售人員使用，因此可以將其歸納為工具類的APP，在工具類的APP中常見的設計方式主要有：白色簡潔、純色背景、全屏大圖。

客戶資源管理類的優秀APP幾乎很少，因此這里我找了以工具使用為主的APP，貝殼找房面向人群更廣，主要為大家提供找房信息，他的用戶群體主要是用戶，當然他希望用戶快速登錄為主，因此采用了能夠高效操作的白色簡潔風格，這個樣式我從側面問過經理，覺得不太適合。

最后我們決定做兩個風格，純色扁平風格和商務背景能夠很好的提現品牌化。最后，為了提高過稿率，我將最后得出的純色背景和全屏大圖樣式各設計了一稿，提交給老板進行反饋。他們選擇的是純色背景的風格樣式，到這里我們就成功過稿了。

這個分析過程大家可能會覺得很繁瑣，其實當你將收集之后的圖片分類對比分析時，基本就能夠確定采用何種風格了，這里提醒大家，你的分析可能和老板預期會有出入，因此最好能夠設計兩個版本給老板選擇，同時分別闡述使用他的原因，這樣就能大大提高過稿率。

總結

今天主要以登錄就界面為例，和大家分享設計沒想法時可以通過收集、分類、分析對比三個方面進行梳理，幫助我們有理有據的找到適合產品的設計方案，提高過稿率。

1. 收集：平時多收集優秀APP，在你不知道怎么做的時候我們可以結合競品，將這些APP大致過一遍，了解每個行業的設計特點，為后面的分類做準備。

2. 分類：通過分類可以就可以知道有哪些風格樣式，了解他們的設計優缺點，可以幫助我們做到心中有數。

3. 分析：根據產品設計目的，結合上面的樣式分析，選出適合我們產品的設計方式。

以上就是我在項目中遇到問題的總結，希望對大家有幫助，看完你可以找個界面來分析試試，看看是不是這樣。

參考鏈接：

http://t.cn/EyESQVq如何設計更受歡迎的APP啟動頁&引導頁？

作者：風箏KK，公眾號：海鹽社本文由 @ 風箏KK

原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議