原型設(shè)計：一個好的Web登錄頁原型需要這些

時間：2023-10-10 11:12:01 | 來源：網(wǎng)站運營

時間：2023-10-10 11:12:01 來源：網(wǎng)站運營

原型設(shè)計：一個好的Web登錄頁原型需要這些：獲取用戶有多難，相信每個人互聯(lián)網(wǎng)人都深有體會，一定要非常努力優(yōu)化產(chǎn)品的每一個體驗步驟，才能吸引別人的注冊。




注冊登錄頁面就是讓路人變成用戶的最后一步，也是最關(guān)鍵的一步。




一個出彩的登錄頁面，可以吸引住用戶，讓他成為你的注冊用戶，也能夠體現(xiàn)產(chǎn)品的質(zhì)感和品牌的特性，甚至能提升用戶體驗，拉近與用戶的距離。

為此，本期「素材播報」上架了一些關(guān)于登錄的頁面和組件，都是根據(jù)網(wǎng)上 100+ 的優(yōu)秀登錄頁面設(shè)計作品總結(jié)而來。

接下來，請看詳細報道：

Web 登錄頁面之大圖背景

大圖背景的登錄頁面，是最為常見的頁面設(shè)計之一。這樣的設(shè)計不僅會讓人有一種沉浸式的體驗，圖片的選擇也會體現(xiàn)產(chǎn)品氣質(zhì)。

通常，大圖背景的登錄頁面會搭配大卡片、小卡片，當然也會有人選擇無卡片的形式。

比如，outlook 的登錄頁面就是大圖+小卡片的形式。圖片背景與系統(tǒng)的保護程序的風格相呼應。郵件作為工作的工具，采用風景的照片，給人以冷靜的感覺。

更典型的是《華盛頓郵報》，直接用華盛頓特區(qū)的實景圖片作為背景，可供選擇的三種登錄方式，也與圖片中的顏色吻合，一切都是那么的和諧。

還有哪些經(jīng)典樣式呢？請看素材廣場本期上架的 7 款大圖背景 Web 登錄頁面。

Web 登錄頁面之純色背景

純色背景的 Web 登錄頁面應用范圍更廣。因為設(shè)計簡潔的產(chǎn)品，即使是登錄頁也會一以貫之。

比如 Linkedin ，就沒有任何背景圖片或動畫。畢竟我們不需要在登錄頁面顯示有趣，簡潔明了的展示就是完美的頁面了。




還有些會選擇在突出自己特質(zhì)的顏色上搭配一些圖片。

像 Shopify ，用沉靜的藍色作為自己的底色，注冊表單旁只是一個簡單的圖片：一位眼神堅定的女性，卻傳遞出了所有人都可以在這里創(chuàng)建店鋪，并獲得成功的訊息。

Dribbble 也是采用這樣的形式：左邊用戶制作的插圖，顏色豐富且極具設(shè)計感，直接表達出 Dribbble 本身的概念。

純色背景能做的也不止這些。在素材廣場中，我們例舉出了 13 種純色背景登錄頁面的樣式，包含了大卡片、小卡片、插畫+卡片、無卡片、插畫+卡片的類型。

Web 登錄頁面之拼色背景

如果覺得純色和圖片過于普通，你可以嘗試帶有更多產(chǎn)品原色的拼色背景。

Uber 就是一個很好的范本，在純色的背景添加了條紋圖文和插畫，增加了視覺趣味，體現(xiàn)出了生機感。

也可以學 Diprella， 在拼色的背景上玩一些簡單的交互，讓注冊、登錄變得好玩了起來。

上面兩種樣式，都屬于對拼色背景基礎(chǔ)版的優(yōu)化升級，素材廣場提供了更多的樣式，等著產(chǎn)品經(jīng)理和設(shè)計師前去探索。

Web 登錄頁面組件

這次的組件素材都是常見的 Web 登錄組件，依據(jù)尺寸劃分了大、中、小三類，每一類又根據(jù)組件的設(shè)計樣式（方形、圓形、線性）以及登錄方式（賬號密碼登錄、第三方登錄、掃碼登錄...）分類。

本套組件既可以單獨使用，也可以配合上面的登錄頁面使用哦～

相信知友們都看出來了，本次的素材無論是對設(shè)計師還是產(chǎn)品經(jīng)理，都是非常有用的。

設(shè)計師可以從相關(guān)版式設(shè)計中獲取設(shè)計靈感，產(chǎn)品經(jīng)理則可以直接使用這些版式和組件，快速搭建一個美觀且符合需求的 Web 登錄頁面。




有沒有感受到我們滿滿的誠意呢？！

如果你喜歡這次的素材請點個贊吧～關(guān)于本期的素材，你有任何的想法也可以留言告訴我們哦～或者，你有什么急切需要我們上架的素材，也可以留言說出來。