本文主要是關于app登錄頁的設計合理性的相關思考，希望對大家?guī)椭?/p>

一、怎么理解登錄頁？

每一產(chǎn)品app都會有一個登錄頁面，它是產(chǎn)品第一次接觸用戶的頁面，也是第一個傳遞信息給用戶的媒介，由此可見它非常重要的，作為一個招牌或者是門面，一個好的登錄頁往往會給用戶留下深刻印象，無論是界面視覺表現(xiàn)，還是流程交互體驗，都是不可或缺的。

上述部分是對登錄頁面作了一個總體的概括，深入理解就要去觀察登錄頁具體包含了哪些內容，這是我們做設計前必須要了解的。

來看看現(xiàn)有app登錄頁的案例：

以上我列舉了四類不同的產(chǎn)品app：分別是音樂類——網(wǎng)易云/動漫類——騰訊動漫/體育類——企鵝體育/電影類——淘票票，相信大家的手機里面應該都裝有這些app，畢竟是這幾款app的使用頻率還是挺高的，視覺上面觀察，幾款app的登錄頁設計差異并不是特別大。

接下來用模塊的方法來梳理一下頁面的內容和結構：

小結：通過上面的舉例分析和模塊劃分，我們大致了解了一般產(chǎn)品的常規(guī)登錄頁所包含的內容有哪些，知道了設計的具體內容。那么接下來我們要去了解一下現(xiàn)有登錄頁面設計的一些技法或是樣式，也可以是一些表現(xiàn)樣式。

二、登錄頁設計樣式有哪些？（技法或是表現(xiàn)方式）

在進行設計樣式的分析之前，我想和大家聊聊關于如何去規(guī)劃登錄頁面的相關內容以及為什么要放置這些內容的原因？因為設計背后總會有目的和理性思考在里面，并不是憑空去設計的，所以也就是登錄頁的核心作用是什么？

登錄頁的核心作用：

接下來就是設計樣式分析了：

這種設計方法應是最常規(guī)且效率最高的一種方式了，背景純白色，把其余元素放置中央，留白處理，有空間感和透氣性，沒有任何色彩傾向和視覺元素干擾，讓用戶專注于品牌和登錄路徑，算是一種很好的常規(guī)設計樣式！

品牌色的填充應用，大量運用品牌色來支撐整個畫面，簡潔直觀，且容易讓用戶感知，界面比較干凈，品牌符號+大量品牌色的應用+常規(guī)登錄路徑以及輔助登錄路徑，就可以構成了一個登錄界面，而且能夠傳遞品牌信息以及產(chǎn)品信息。

沒有大量運用品牌色，而是運用與產(chǎn)品行業(yè)相關特性的圖片來作為背景支撐，顯然是為了強化品牌行業(yè)屬性，因為圖片比顏色的視覺沖擊力更強，也比較容易感知到產(chǎn)品的用途，所以運用品牌行業(yè)相關的圖片來設計登錄頁面也是一種可行的方法，加上常規(guī)的登錄路徑和輔助登錄路徑即可。

這種氛圍感更強，畫面感也是十分突出，也更容易讓用戶感知到一些內容，并對產(chǎn)品初步產(chǎn)生一些認識和理解，也是當下比較流行的設計樣式！

第三種運用產(chǎn)品符號或是品牌符號來作為設計主要元素，一是可以傳遞品牌感，二是可以渲染產(chǎn)品行業(yè)屬性特征，兩者都能兼顧，可以是視覺沖擊力和氛圍渲染力都非常強了，給予用戶的視覺感官也是滿滿的，這也是一種可采用的設計樣式方法！

三、如何設計登錄頁的內容？（如何布局內容？）

通過上面的內容的闡述，我相信大家已經(jīng)了解了登錄頁的含義/登錄頁所包含的大致內容/登錄頁常規(guī)的設計樣式，那么接下來我們就聊聊如何設計布局登錄頁的內容，也就是如何在界面中進行板式設計！

居中板式：讓所有信息集中在界面中央，可以讓用戶一眼看到所有信息，信息內容突出性很強且十分集中：

兩端對齊：上下兩端預留出相同的間距，然后將內容居中與界面，這樣做可以很好的平衡畫面，不會讓界面失去重心，還有一點就是整個界面也會相對飽滿許多，更加有看點和視覺感。

底對齊：這種情況比較特殊，背景采用了一張游戲圖來作為主體內容視覺，為了不干擾信息，所以把按鈕放在了底部，重點是突出游戲氛圍圖，讓用戶沉浸在氛圍中！

分析到這里，關于如何思考且合理的去設計登錄頁，我相信大家應該有了一個明確的方向了吧！從理解什么是登錄頁，到了解登錄頁所包含的內容方向，再到登錄頁所發(fā)揮的作用以及登錄頁的設計樣式，還有登錄頁內容布局的方式。

我簡單做一下思路總結：

本文由 @Moredesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議。