如何合理地設計APP登錄頁——視覺篇

6 評論 17273 瀏覽 103 收藏 8 分鐘

本文主要是關于app登錄頁的設計合理性的相關思考,希望對大家幫助!

一、怎么理解登錄頁?

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

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

來看看現有app登錄頁的案例:

如何思考并合理的設計APP登錄頁(視覺篇)

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

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

如何思考并合理的設計APP登錄頁(視覺篇)

如何思考并合理的設計APP登錄頁(視覺篇)

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

二、登錄頁設計樣式有哪些?(技法或是表現方式)

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

登錄頁的核心作用:

如何思考并合理的設計APP登錄頁(視覺篇)接下來就是設計樣式分析了:

如何思考并合理的設計APP登錄頁(視覺篇)

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

三、如何設計登錄頁的內容?(如何布局內容?)

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

如何思考并合理的設計APP登錄頁(視覺篇)

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

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

我簡單做一下思路總結:

如何思考并合理的設計APP登錄頁(視覺篇)

 

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

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝

    回復
    1. 相互學習!不客氣!

      來自廣東 回復
  2. 活到老學到老

    回復
    1. 優秀+

      來自廣東 回復
  3. 學習了,感謝分享

    回復
    1. 多多交流!

      來自廣東 回復