輾轉(zhuǎn)已到第三課,趁著雙十一還木有剁手之前,趕緊來學(xué)一篇超贊的登錄界面設(shè)計指南。想想有一天你滿心歡喜買了一籃子?xùn)|西,剛想豪爽地叫小二買單,小二讓你先注冊,頓時歡喜近無。這時候就該設(shè)計師出場咯,今天我們分享10個技巧,幫訪客高興注冊。
AnyForWeb :電子商務(wù)網(wǎng)站已經(jīng)慢慢成為現(xiàn)代都市人的必需品,大家都樂此不疲的使用著,但對于第一次注冊使用的情景,相信大家還記憶猶新。精心挑選完商品之后,用戶們懷著愉快的心情點擊購買按鈕,但顯示的卻是“請先注冊或登錄”,原本滿滿的購物欲和好心情有可能瞬間大打折扣。
電商網(wǎng)站需要注冊和登錄才能執(zhí)行購買流程雖然受到很大一部分用戶的不喜愛,但確實是非常普遍的現(xiàn)象。用戶之所以如此反感,也不完全因為流程繁瑣,網(wǎng)站的表現(xiàn)形式不夠友好、人性化也是原因之一,甚至還有網(wǎng)站令用戶很直接的感受到一種強迫性。
市場環(huán)境讓幾乎所有國內(nèi)的電商網(wǎng)站都隨大流的加上注冊登錄環(huán)節(jié),那么,如何讓這一步驟變得更友好更適用,這是我們需要思考的問題。現(xiàn)在,就列出10條我們的觀點。
1. 簡潔突出,大膽留白
“挑剔”是大多數(shù)網(wǎng)購人群的特性,這種“挑剔”不僅體現(xiàn)在他們對商品的態(tài)度,也蔓延到對網(wǎng)站的每個頁面。用戶不喜歡思考和尋找,他們希望所有自己需要的內(nèi)容都清晰的攤在眼前,甚至眼前只有自己需要的內(nèi)容。這樣的要求聽起來很苛刻,但只有把握類似這樣的細節(jié),才能在競爭激烈的電商市場中占有一席之地。
很多設(shè)計師對于留白都有些戰(zhàn)戰(zhàn)兢兢,生怕讓別人誤以為是自己偷懶了。其實,在電商登陸頁的設(shè)計中,留白卻是一種挽回用戶好心情的好方法。登錄注冊在用戶心里就是一個很麻煩的過程,而大量的留白能讓用戶感覺“原來只有一個步驟而已”,能很大程度的提升用戶體驗。

蘇寧易購的登陸頁使用了大量的留白,頁面整體和細節(jié)都十分干凈整潔,讓用戶以最快的速度完成注冊或登錄這一環(huán)節(jié)。
一個精致有調(diào)性的注冊界面,也能減少訪客的抵觸情緒,來優(yōu)設(shè)搜99個+注冊界面就可以看到咯。
2. 以訪客利益為主導(dǎo)
訪客利益為先的衡量標準說起來可能比較空洞,很多電商網(wǎng)站也因此忽略了這一點。電商網(wǎng)站的主要目的是盡可能的多推廣、多銷售自己的產(chǎn)品,于是有的網(wǎng)站就不放過任何一個可以推銷自己產(chǎn)品的角落,這樣的做法會讓用戶很厭煩,尤其在登陸頁上出現(xiàn)諸如此類的推銷信息。
登陸頁是一個屬于用戶的網(wǎng)頁,比較一下你的登陸頁面,提到用戶的次數(shù)和提到品牌產(chǎn)品的次數(shù)哪個更多?

麥網(wǎng)的登陸頁是一個反面教材,網(wǎng)站過于急切的想把自己的商品展示給用戶,所以頁面上的內(nèi)容看起來很雜亂,這有可能對營銷會有一些幫助,但卻造成了不佳的用戶體驗。

亞馬遜的登陸頁就與之完全不同,不僅在引導(dǎo)上做的很到位,語句的撰寫也更多的為客戶考慮,“我的郵箱地址是…”,這樣的語言顯得更有親和力。
3. 好的標題是成功的一半
有統(tǒng)計顯示,閱讀標題的人是閱讀正文的人的5倍,這意味著“敲門磚”的重要性。如果你的標題夠吸引人,也許用戶跟不用等到購買前才登陸注冊,讓用戶心甘情愿的化被動為主動才是交互設(shè)計更深層的意義。

嗨淘首頁的登錄入口標題就與普通電商網(wǎng)站的標題不太一樣,“hi”的小標識讓按鈕更吸引用戶點擊。

點進登陸頁后,嗨淘的標題依然與眾不同,相比較普通的“歡迎登錄”,“還不是嗨淘網(wǎng)會員?”這樣的標題是不是更能讓用戶愉悅呢?
4. 簡化頁面副本,切中要害
剛才已經(jīng)提到,用戶根本沒有心思在短短的幾秒鐘之內(nèi)做任何思考,因此,這里又涉及到了頁面副本的問題。如今什么都講求要創(chuàng)新獨特,但在登陸頁上還是要盡量避免。登陸頁面上的文案還是應(yīng)該簡單一點,用一些一看就能懂,而且沒有歧義的文字。

百度糯米的登陸頁真正理解了簡化副本的含義。頁面文字的簡化并不是文字越少越好,而是要用盡可能少的文字把意思表達清楚。左側(cè)的圖片上也沒有多余的文字,色彩上也選擇了淡色系,讓整體看起來很舒服。
5. 有趣美觀的頁面設(shè)計
“人不愛美,天誅地滅”,視覺上美觀的是事物總能給人更好的第一印象,對于網(wǎng)頁設(shè)計也是一樣的道理。從色彩到布局,登陸頁設(shè)計要的是一種和諧,如果能在和諧舒適的體驗基礎(chǔ)上增添一些趣味性,用戶會更樂于使用和點擊。

京東的登陸頁就很有趣味性,左側(cè)圖片是略帶搞笑的風(fēng)格,也許能不少讓用戶會心一笑,帶著好心情來登錄和購物。
6. 必要時加入動畫效果
雖然登陸頁面講求簡潔,但不可否認動態(tài)的事物總能在第一時間抓住用戶的眼球。當用戶不愿閱讀文字的時候,在網(wǎng)頁中加入動畫或小視頻就是個提高轉(zhuǎn)化率的另一個方法。但這樣的做法如果把握不好界限反而會破壞整個頁面的效果,甚至影響用戶體驗,所以還是要謹慎而行。

在線客服的功能很多網(wǎng)站都有,但在登陸頁出現(xiàn)的卻不多見。在登錄或注冊的過程中,其實用戶很容易遇到困難,在麥德龍的登陸頁中就很貼心的設(shè)置了這一功能,并且實現(xiàn)動態(tài)效果,讓用戶在有需要的時候馬上找到它。
7. 撰寫充滿號召力的文案
要用僅僅幾個字的短句就抓住用戶的心,文案的號召力是很重要的因素,尤其對新用戶。這里所說的號召力也并非一定要用短句來實現(xiàn),使用大動態(tài)字體的“注冊”也能產(chǎn)生相應(yīng)的效果,總之能讓用戶感受到你的活力和朝氣,他們才會更愿意去做。

充滿號召力的文案一定要夠簡短夠順口,易迅網(wǎng)的“就是這么拼”雖然稱不上多有創(chuàng)意,但著實能勾起用戶的購物欲,讓用戶對登錄注冊更主動。
如何寫有吸引力的好文案?超實用教程!《年度最佳教程!7招教你寫出互聯(lián)網(wǎng)頂尖文案!》

8. 盡量減少表單域
從視覺角度來說,表格狀的形式不僅能把雜亂的數(shù)據(jù)清晰化,也能把原本簡單的內(nèi)容復(fù)雜化。有調(diào)查顯示,電商網(wǎng)站登陸頁上顯示的表單域越少,轉(zhuǎn)化率就越高,由此可見,用戶對于填寫表格并不感興趣。
尤其對于首次使用的新用戶來說,他們對網(wǎng)站的信任感還很薄弱,在這時讓他們填寫大量的表格式個人相關(guān)信息是很不恰當?shù)模@對之后建立彼此之間的信任感也很不利。

ebay的網(wǎng)站走的是極簡路線。而表單形式在登陸頁面中基本上避免不了,所以,ebay很聰明的只保留登錄部分,有注冊需要的用戶可以點擊右側(cè)的按鈕跳轉(zhuǎn)到另一個頁面。這是一個兩全其美的做法,既讓登錄頁面變得更簡單,也讓網(wǎng)站的條理更清晰。
9. 感謝頁面社會化
與其想盡辦法讓廣告在網(wǎng)站內(nèi)無處不在,不如把握住感謝頁面,效果可能也會好得多。當用戶完成登錄頁的轉(zhuǎn)化后,我們可以在頁面上添加一些選項,比如為登陸頁點個贊,又或是分享到社交網(wǎng)站上,這樣能第一時間集中更多的客戶群。
10. 使用單開式登陸頁
無論從實際操作還是用戶體驗角度出發(fā),單開式的登錄頁都是目前最理想的打開方式。如果選擇彈框或者直接本頁登錄,會很明顯的不利于用戶的使用,Lancome的網(wǎng)站就是一個例子;另外,有些瀏覽器會有屏蔽彈框的功能。

單開式的登陸頁設(shè)計能更好的引導(dǎo)用戶,同時產(chǎn)生一種被重視的感覺,這對于電商網(wǎng)站尤為重要。


一號店的登陸頁是同類網(wǎng)站中做的很周到的,在首頁的登錄入口位置做了一個鼠標懸停顯示的效果,這樣可以避免用戶因為誤點而造成的不必要的點擊。
總結(jié):
我們認為,在電子商務(wù)網(wǎng)站的登錄環(huán)節(jié)暫時還無法割舍的現(xiàn)在,頁面的設(shè)計要以用戶體驗為先,讓用戶在使用的時候盡可能的減少思考時間。同時,我們也希望在未來可以讓注冊登錄成為不必要的環(huán)節(jié),讓用戶可以以游客身份直接購買,登錄注冊的好處只是讓購物流程變得更容易或者價格更優(yōu)惠,以這樣的方式讓用戶主動注冊,讓登錄注冊變成一個用戶喜歡的環(huán)節(jié)。
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優(yōu)秀網(wǎng)站模板免費下載2015-09-16
20套高質(zhì)量的免費網(wǎng)頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關(guān)PSD素材下載2013-07-31
CSS實例教程:十步學(xué)會用CSS建站2011-10-05
網(wǎng)頁設(shè)計師:淺淡網(wǎng)頁BANNER設(shè)計2010-09-27
網(wǎng)頁細節(jié)教程:WEB設(shè)計精確點滴2010-09-13
網(wǎng)頁設(shè)計中的點滴細節(jié)把握2010-09-01
總結(jié)交互組件創(chuàng)新的四種方式2010-06-28
最全的國外電子商務(wù)CSS模板下載2010-06-18
如何提高登錄注冊的提高用戶體驗
相關(guān)文章2902018-12-20
設(shè)計師解讀超全面的標簽欄設(shè)計
相關(guān)文章1722018-10-10
詳細解析iPhone 2018全面屏適配詳解
相關(guān)文章2572018-09-14
超全面的手機界面彈窗設(shè)計技巧分析
相關(guān)文章2702017-12-11
如何快速的設(shè)計出城市指南網(wǎng)站著陸頁
相關(guān)文章1522017-08-07
盤點注冊和登錄產(chǎn)品設(shè)計路上爬過的坑
相關(guān)文章2592017-06-01
交互設(shè)計新手的信息架構(gòu)全方位入門指南
相關(guān)文章1792016-09-14
寫給設(shè)計師的趣味編程指南入門教程
相關(guān)文章3172016-08-03
