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

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

應用 梳理 運用 都是 什麽 要去 一點 樣式 思考

一、怎麽理解登錄頁?

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

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

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

技術分享圖片

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

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

技術分享圖片技術分享圖片

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

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

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

登錄頁的核心作用:

技術分享圖片

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

技術分享圖片

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

技術分享圖片

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

技術分享圖片

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

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

技術分享圖片

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

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

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

技術分享圖片

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

技術分享圖片

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

技術分享圖片

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

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

我簡單做一下思路總結:

技術分享圖片

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