1. 程式人生 > >如何合理地設計APP登入頁——視覺篇

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

一、怎麼理解登入頁?

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

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

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

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

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

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

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

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

 

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

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

登入頁的核心作用:

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

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

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

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

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

品牌色的填充應用,大量運用品牌色來支撐整個畫面,簡潔直觀,且容易讓使用者感知,介面比較乾淨,品牌符號+大量品牌色的應用+常規登入路徑以及輔助登入路徑,就可以構成了一個登入介面,而且能夠傳遞品牌資訊以及產品資訊。

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

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

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

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

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

 

三、如何設計登入頁的內容?(如何佈局內容?)

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

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

居中板式:讓所有資訊集中在介面中央,可以讓使用者一眼看到所有資訊,資訊內容突出性很強且十分集中:

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

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

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

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

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

我簡單做一下思路總結:

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