激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計中登錄頁的設(shè)計指南

發(fā)布時間：2024-02-29 11:54:23 瀏覽量：249次

　　UI設(shè)計創(chuàng)新技能層出不窮，UI設(shè)計滿足著形形色色各種垂直化的需求,在設(shè)計方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天我就針對UI設(shè)計中登錄頁設(shè)計指南進行簡單的說明。

　　一、注冊登錄方式

　　1.只使用第三方賬號注冊登錄

　　這種方式是最快捷的登錄方式，省去了手機注冊的繁瑣操作，幫用戶提高效率，節(jié)省時間。

　　這里沒有找到參考案例，可能現(xiàn)在用這種方式的APP已經(jīng)很少了。

　　2.只使用手機號注冊登錄

　　使用手機號+獲取驗證碼是目前最常用的注冊登錄方式，通過發(fā)送短信獲取驗證碼在60-90秒內(nèi)進行注冊登錄，這么做是為了確認(rèn)用戶擁有該手機號的使用權(quán)。

　　手機號+驗證碼是比較簡便的登錄方式，手機號+密碼是比較常用的登錄方式。在輸入手機號后，為了讓用戶查看是否輸入正確，建議手機號顯示樣式為3-4-4模式(如186 3464 ****)


　　手機號也是商家進行用戶維護的有效手段，可以在節(jié)假日發(fā)送祝福或者促銷短信，也可以在用戶長期未使用產(chǎn)品時進行短信提示，避免用戶將產(chǎn)品遺忘。

　　3.使用手機號+第三方賬號注冊登錄

　　這種樣式是上面兩種樣式的結(jié)合，一般這樣的組合方式是希望用戶使用手機號注冊，所以手機注冊登錄比較突出，第三方注冊會置于頁面底部弱化處理。如下圖所示：


　　還有一類APP是希望用戶使用第三方登錄，弱化手機號注冊登錄。比如阿里旗下的閑魚、一淘、飛豬等，登錄時為了用戶數(shù)據(jù)之間的連接，會推薦用戶使用淘寶賬號進行登錄，從而弱化了手機號注冊登錄，這是出于產(chǎn)品屬性方面的考慮。


　　4.使用郵箱注冊登錄

　　使用郵箱進行注冊登錄是以前PC端常用的方式，一些又有移動端又有PC端的產(chǎn)品會使用。

　　5.先體驗后注冊登錄

　　一開始用戶可以游客狀態(tài)進入使用產(chǎn)品，當(dāng)用到添加、收藏、關(guān)注、評論、購買等功能就必須要進行注冊登錄了，這種方式一般多用于閱讀類、游戲類或是電商類產(chǎn)品中。

　　這種方式對新用戶的產(chǎn)生有積極作用，很多用戶在不了解產(chǎn)品的情況下，可能只是想初步了解一下產(chǎn)品，又不想進行手機注冊，所以會先進入熟悉一下產(chǎn)品，待初步使用了解后，再通過引導(dǎo)讓用戶進行手機號的綁定。

　　二、注冊登錄頁面設(shè)計要點

　　1.分步驟注冊登錄

　　先輸入手機號，UI設(shè)計中登錄頁的設(shè)計指南https://www.aaa-cg.com.cn/ui/2556.html?gpf點擊“下一步”的同時，系統(tǒng)查詢該手機號是否可以注冊，通過的話則進入輸入驗證碼頁面，這樣做的好處是可以及時反饋給用戶，避免用戶在輸完手機號和驗證碼之后出現(xiàn)錯誤toast的情況。

　　需要注意的是步驟不宜過多，建議3步以內(nèi)。如下圖所示：


　　2.注冊登錄合二為一

　　這種方式是將注冊和登錄合到一起，如果是第一次使用，只要輸入手機號再填寫驗證碼就相當(dāng)于注冊成功了。

　　3.彈窗登錄

　　在用戶使用必須要登錄才能用的功能時會跳出彈窗登錄界面。


　　三、注冊登錄頁面常用背景樣式

　　注冊登錄頁面常用背景樣式可分為以下六大類：白色背景、輕裝飾背景、純色背景、全屏大圖背景、半屏圖片背景、插畫背景。

　　1、白色背景

　　使用白色背景是目前較為常見的設(shè)計樣式。頁面以信息錄入為主，不做過多裝飾。

　　多用于體量比較大的APP中，主要目的是提高登錄頁面的操作效率，所以沒有多余的點綴。如下圖所示：


　　2、輕裝飾背景

　　輕裝飾背景會添加一些品牌設(shè)計元素或裝飾來體現(xiàn)界面細節(jié)，增加產(chǎn)品品牌感。

　　輕裝飾背景常見的有以下幾種處理方式：

　　1、取產(chǎn)品相關(guān)元素進行裝飾。

　　2 背景做模糊處理增加界面層次感。

　　3、加入意向類的圖片。

　　4、 添加幾何元素進行裝飾。


　　3、純色背景

　　純色背景多采用品牌色，也可搭配Logo進行設(shè)計，體現(xiàn)品牌感。

　　該方式多用在登錄信息簡單或者以第三方登錄為主的界面中，在不干擾用戶視線的基礎(chǔ)上豐富頁面。

　　如下圖所示：騰訊課堂、知識星球均采用品牌色進行設(shè)計，同時可以看出他們的登錄信息都較少，在視覺設(shè)計上也較為簡潔。


　　4、全屏大圖背景

　　全屏大圖背景就是在登錄信息下方平鋪一張與產(chǎn)品相關(guān)的圖片。

　　優(yōu)點：圖片更容易吸引人的注意力，視覺上更有沖擊力，也能提前給用戶一個心理預(yù)期。

　　缺點：信息和背景融合較高，視覺干擾比較大，多用在垂直類的APP中，對于一些體量較大的產(chǎn)品不太適合。

　　如下圖所示：


　　5、半屏圖片背景

　　半屏圖片和全屏圖片有些類似， 都是通過意向圖片傳遞產(chǎn)品品牌感，不過半屏圖片重點是以登錄信息為主，如下圖所示：


　　6、插畫背景

　　插畫背景就是自己繪制品牌識別元素或者和品牌相關(guān)的元素作為背景。

　　優(yōu)點：插畫更有親和力，更能與用戶產(chǎn)生情感共鳴。

　　缺點：繪制成本較高，比較費時間。

　　如下圖所示：


　　好了，今天的分享就到這里了，歡迎大家留言討論哦。

Ui設(shè)計中圖片的使用技巧

UI設(shè)計中間距的重要性

UI設(shè)計中引導(dǎo)頁設(shè)計指南

UI設(shè)計中的空狀態(tài)設(shè)計指南

UI設(shè)計中聊天氣泡框的設(shè)計技巧

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定