編者按：輾轉已到(dào)第三課，趁著(zhe)雙十一(yī)還(hái)木(mù​✔£)有(yǒu)剁手之前，趕緊來(lái)學一(yī)©​篇超贊的(de)登錄界面設計(jì)指南(nán)！想想有(yǒu)一(yī)天δ¥★•你(nǐ)滿心歡喜買

了(le)一(yī)籃子(zǐ)東(dōng)西(xī)，剛想豪爽地(dì)叫小(x÷​∏ iǎo)二買單，小(xiǎo)二讓你(nǐ)先注冊，頓時(™₩<​shí)歡喜近(jìn)無。這(zhè)時(shí)候就(jiù)該設計λ ↕(jì)師(shī)出場(chǎng)咯，今天我們分(fēn)享10個(gè)技(jì)

巧，幫訪客高(gāo)興注冊！

電(diàn)子(zǐ)商務網站(zhàn)已經慢(màn)慢(màn)✔™成為(wèi)現(xiàn)代都(dōu)市(shì)人(rén)的(de) ±≠σ必需品，大(dà)家(jiā)都(dōu)樂(yuè)此不(bù)疲的(de)使••₩φ用(yòng)著(zhe)，但(dàn)對(duì)于第一(yī)次注冊使用(₹∏yòng)的(de)情景，相(xiàng)信大(dà)家(jiā)還(h÷γ♥ái)記

憶猶新。精心挑選完商品之後，用(yòng)戶們懷著(zhe)愉快(kuài)的(de)心情點擊購(Ω★←gòu)買按鈕，但(dàn)顯示的(de)卻×↓♦是(shì)“請(qǐng)先注冊或登錄”，原本滿滿的(de)購(gòu)物(wù)

欲和(hé)好(hǎo)心情有(yǒu)可(kě)能(néng)瞬間(jiān∞₹δσ)大(dà)打折扣。

電(diàn)商網站(zhàn)需要(yào)注冊和(hé)登錄才Ω'§能(néng)執行(xíng)購(gòu)買流程雖然受到(dào)很(hě♦$n)大(dà)一(yī)部分(fēn)用(yòng)戶的(d•↑§¶e)不(bù)喜愛(ài)，但(dàn)确實是(shì)非常普遍↓∏∏ 的(de)現(xiàn)象。用(yòng)戶之所以如(rú)此

反感，也(yě)不(bù)完全因為(wèi)流程繁瑣，網站(zhàn≥₽♦<)的(de)表現(xiàn)形式不(bù)夠友(yǒu)好( ε≥≈hǎo)、人(rén)性化(huà)也(yě)是(shì¥✘₽)原因之一(yī)，甚至還(hái)有(yǒu)網站(z←δ>≤hàn)令用(yòng)戶很(hěn)直接的(de)感受到(dàoβ÷±)一(yī)種

強迫性。

市(shì)場(chǎng)環境讓幾乎所有(yǒuδσ)國(guó)內(nèi)的(de)電(∞βdiàn)商網站(zhàn)都(dōu)随大(dà)流的(de)加上(sh↑≠àng)注冊登錄環節，那(nà)麽，如(rú)何↓§讓這(zhè)一(yī)步驟變得(de)更友(yǒu)好(hǎo)更适用(yòng)，這("φ ‌zhè)是(shì)我們需

要(yào)思考的(de)問(wèn)題。現(xiàn)在，就(jiù)列出÷ '"10條我們的(de)觀點。

1. 簡潔突出，大(dà)膽留白(bái)

“挑剔”是(shì)大(dà)多(duō)數(shù)網購(gòu)人(rén)群的(de)特≠∏性，這(zhè)種“挑剔”不(bù)僅體(tǐ)現(xi≠÷ ¥àn)在他(tā)們對(duì)商品的(de)态度，也(yě)蔓延到(dào)對↕♣‍✘(duì)網站(zhàn)的(de)每個(gè)頁面。用(y ✔λ₹òng)戶不(bù)喜歡

思考和(hé)尋找，他(tā)們希望所有(yǒu)自(zì)己需要(×®♣≥yào)的(de)內(nèi)容都(dōu)清晰的(de)攤在眼前，甚至眼前隻有(yǒu)自(↔€∞zì)己需要(yào)的(de)內(nèi)容。這(zhè)樣的(de)要(yào↔∑₹)求聽(tīng)起來(lái)很(hěn)苛刻，

但(dàn)隻有(yǒu)把握類似這(zhè)樣的(de)細φ≈節，才能(néng)在競争激烈的(de)電(diàn)商市(shì)場(™↔∏chǎng)中占有(yǒu)一(yī)席之地(dì)。

很(hěn)多(duō)設計(jì)師(shī)對(duì)于留白(bái)都(dōu)有(σ₹yǒu)些(xiē)戰戰兢兢，生(shēng)怕讓别人(rén)誤以為(wèi)是(s>♦αhì)自(zì)己偷懶了(le)。其實，在電(diàn)商登陸頁的(de)設計(jì)中≤☆$，留白(bái)卻是(shì)一(yī)種挽回

用(yòng)戶好(hǎo)心情的(de™ σ)好(hǎo)方法。登錄注冊在用(yòng)戶心裡(±σ≤∞lǐ)就(jiù)是(shì)一(yī)個(gè)很(hěn)麻煩的(d☆ €e)過程，而大(dà)量的(de)留白(bái)能(néng)讓用♥> (yòng)戶感覺“原來(lái)隻有(yǒu)一(yī)個(gè)步驟而已”

，能(néng)很(hěn)大(dà)程度的(de)提升用(yòng)戶體(tǐ)驗。

2. 以訪客利益為(wèi)主導

訪客利益為(wèi)先的(de)衡量标準說(shu↔Ω∞ō)起來(lái)可(kě)能(néng)比較空(kōng)洞，很(hěn)多(duō‌≤→∞)電(diàn)商網站(zhàn)也(yě)因此忽略了(±δ¥©le)這(zhè)一(yī)點。電(diàn)商網站(zhàn)的(de)主要(yào)目Ω 的(de)是(shì)盡可(kě)能(n"×≈éng)的(de)多(duō)推廣

、多(duō)銷售自(zì)己的(de)産品，于‍↕¶₩是(shì)有(yǒu)的(de)網站(zhàn)就(jiù₩∞)不(bù)放(fàng)過任何一(yī)個(gè)可(kě)以推銷自(zì)己産品的(de)"↔​&角落，這(zhè)樣的(de)做(zuò)法會(huì)讓用(yòng)戶很(hěn)厭(♥€<yàn)煩，尤其在登陸

頁上(shàng)出現(xiàn)諸如(rú)此類的(de)推銷信息。

亞馬遜的(de)登陸頁就(jiù)與之完全不(bù)同，不(bù)僅在引導上(shàng)做(zφ©∑uò)的(de)很(hěn)到(dào)位，語句←₩>∏的(de)撰寫也(yě)更多(duō)的(de)為(wèi)客戶考慮，“我的(de ☆)郵箱地(dì)址是(shì)…”，這(zhè)

樣的(de)語言顯得(de)更有(yǒu)親和(hé)力。

3. 好(hǎo)的(de)标題是(shì)成功的(de)一(yī)半

有(yǒu)統計(jì)顯示，閱讀(dú)标題的(de)人(π¶♣rén)是(shì)閱讀(dú)正文(wén)的(de)人(rén)的(de)5倍，這(zhè)♣&意味著(zhe)“敲門(mén)磚”的(de)重要(yào)性。如(rú)果你(n≠¶¶≤ǐ)的(de)标題夠吸引人(rén)，也(yě)許用(yòn¥$g)戶跟不(bù)

用(yòng)等到(dào)購(gòu)買前才登陸注冊，讓用(yòng)戶心甘情願的(∞♠≤φde)化(huà)被動為(wèi)主動才是(shì)交互設計(jì)☆ε☆♥更深層的(de)意義。

4. 簡化(huà)頁面副本，切中要(yào)害

剛才已經提到(dào)，用(yòng)戶根本沒有(yǒu)心思在短(duǎn)短σλ(duǎn)的(de)幾秒(miǎo)鐘(zhōng)之內(n★→¶®èi)做(zuò)任何思考，因此，這(zhè)裡(lǐ)又(yòu)涉及到(dào)了(le)✔± ♦頁面副本的(de)問(wèn)題。如(rú)今什(shén)麽都(dōu)講

求要(yào)創新獨特，但(dàn)在登陸頁上(shàng)還(hái)是∏φ(shì)要(yào)盡量避免。登陸頁面上(shàng)的(de)Ω↑®÷文(wén)案還(hái)是(shì)應該簡單一(y πī)點，用(yòng)一(yī)些(xiē)一(yī)看(kàn)就(jiù)能(÷≠ néng)懂(dǒng)，而且沒有(yǒu)歧義的(de)

文(wén)字。

5. 有(yǒu)趣美(měi)觀的(de)頁面設計(jì)

“人(rén)不(bù)愛(ài)美(měi)，天誅地(dì)滅•δ×”，視(shì)覺上(shàng)美(mě♥>εi)觀的(de)是(shì)事(shì)物(wù)總能(néng)給人(rén)更好(hǎo)的¥✘≤Ω(de)第一(yī)印象，對(duì)于網頁設計(jì♥¶‍)也(yě)是(shì)一(yī)樣的(de)道(dào)理(l∏☆$•ǐ)。從(cóng)色彩到(dào)布局，

登陸頁設計(jì)要(yào)的(de)是(shì)一(yī)種♠÷£↑和(hé)諧，如(rú)果能(néng)在和(hé)諧舒适的(de)體(tǐ)驗↔↔基礎上(shàng)增添一(yī)些(xiē)趣味性，用(y<§±±òng)戶會(huì)更樂(yuè)于使用(÷φ✘yòng)和(hé)點擊。

京東(dōng)的(de)登陸頁就(jiù)很(hěn∞₹↔♥)有(yǒu)趣味性，左側圖片是(shì)略帶搞笑(xiào)的(de)風(fēnφ™Ωg)格，也(yě)許能(néng)不(bù)©φ÷少(shǎo)讓用(yòng)戶會(huì)心一(yī)笑(xiào) € ∑，帶著(zhe)好(hǎo)心情來(lái)™§登錄和(hé)購(gòu)物(wù)。

6. 必要(yào)時(shí)加入動畫(huà)效果∑Ω¥

雖然登陸頁面講求簡潔，但(dàn)不(bù)可(kě)否認動态的(de)事(sα§☆♥hì)物(wù)總能(néng)在第一(yī)時(shí)間(jiān)抓住用(yòng)戶的(d×'φ e)眼球。當用(yòng)戶不(bù)願閱讀(dú)文(wén)字的(de)時(shí)候，在網∑¥←←頁中加

入動畫(huà)或小(xiǎo)視(shì)頻(pín)就(jiù)是(shì)個(∞₽↔gè)提高(gāo)轉化(huà)率的(de)另一(yī)個(gè)方法。但(dà​≤♦n)這(zhè)樣的(de)做(zuò)法如(rú)果把握不(bù)​‍好(hǎo)界限反而會(huì)破壞整個(gè)頁面的(de)效果，甚ε₹↕至影(yǐng)響用(yòng)

戶體(tǐ)驗，所以還(hái)是(shì)要(yào)謹慎而行(xí≈✔®βng)。

在線客服的(de)功能(néng)很(hěn)多(d∑↑uō)網站(zhàn)都(dōu)有(yǒu)，但(dàn)在登陸頁出現(xiβ©α©àn)的(de)卻不(bù)多(duō)見(jiàn)。在登錄×≥或注冊的(de)過程中，其實用(yòng)戶很(hěn)容易遇到(dào)困難，在β♦♦麥德龍

的(de)登陸頁中就(jiù)很(hěn)貼心的(de)設置了(le)這(zhè)一(yī)功能≠π♥(néng)，并且實現(xiàn)動态效果，讓用(yòng)戶在有(yǒu)需要(yào)的($<de)時(shí)候馬上(shàng)找到(dà$♠Ωo)它。

7. 撰寫充滿号召力的(de)文(wén)案¥σ•∞

要(yào)用(yòng)僅僅幾個(gè)字的(d£₩¥ e)短(duǎn)句就(jiù)抓住用(‌λ✘®yòng)戶的(de)心，文(wén)案的(deεαε↔)号召力是(shì)很(hěn)重要(yào)的(de)因素，尤其對(duì)新用₩'∑₽(yòng)戶。這(zhè)裡(lǐ)所說←£(shuō)的(de)号召力也(yě)并非一(yī)定要(yào)用(yòn£¶σg)

短(duǎn)句來(lái)實現(xiàn)，使用(yòng)大(dà)動态字體(tǐ™₽↑)的(de)“注冊”也(yě)能(néng)産生(shēng)相(xiàng)應≈γ的(de)效果，總之能(néng)讓用(yòng)戶感受到( λ♣₽dào)你(nǐ)的(de)活力和(hé)朝氣，他(tā)們才↔©會(huì)更願意去(qù)做(zuò)

。

充滿号召力的(de)文(wén)案一(yī)定♠€要(yào)夠簡短(duǎn)夠順口，易迅網的(de)↓ λ“就(jiù)是(shì)這(zhè)麽拼”雖然稱不(bù)上(‌™®®shàng)多(duō)有(yǒu)創意，但(dàn)著(zhe)實能(n>"λéng)勾起用(yòng)戶的(de)購(gòu)物(wù)欲，讓用(yòng)

戶對(duì)登錄注冊更主動。

8. 盡量減少(shǎo)表單域

從(cóng)視(shì)覺角度來(lái)說(shuō)，表格狀的(de)形‌↑♣ 式不(bù)僅能(néng)把雜(zá)亂的(de)數(s'≠✘↕hù)據清晰化(huà)，也(yě)能(néng)把原本簡單的('£de)內(nèi)容複雜(zá)化(hu‌♠☆à)。有(yǒu)調查顯示，電(diàn)↔Ω‌σ商網站(zhàn)登陸頁

上(shàng)顯示的(de)表單域越少(shǎo)，轉化(huà)率就(j∞ iù)越高(gāo)，由此可(kě)見(jiàn)，用(yòng)戶對(duì)于填‌÷♣&寫表格并不(bù)感興趣。

尤其對(duì)于首次使用(yòng)的(de)新用(yòng)戶來(lái)說(shuō)，他β↓σ(tā)們對(duì)網站(zhàn)的(de)信任感↕₹‍還(hái)很(hěn)薄弱，在這(zhè)時(shí)讓他(tā)們填寫大(d₩←à)量的(de)表格式個(gè)人(rén)相(xiàng)關←♥信息是(shì)很(hěn)不(bù)恰當

的(de)，這(zhè)對(duì)之後建立彼此之間(jiān)的(de)信任感也(y±≈'ě)很(hěn)不(bù)利。

ebay的(de)網站(zhàn)走的(de)是(shì)極簡路(lù)線。而表單形式在登陸頁☆±✘面中基本上(shàng)避免不(bù)了(le)，所以，ebay很(hěn)&α¥聰明(míng)的(de)隻保留登錄部分(fēn)，有(yǒu)注冊₽"需要(yào)

的(de)用(yòng)戶可(kě)以點擊右側的(de)按鈕跳(±≥♣tiào)轉到(dào)另一(yī)個(↓£gè)頁面。這(zhè)是(shì)一(yī)個(gè)兩全其美(měi)的(d≠¥ <e)做(zuò)法，既讓登錄頁面變得(de)更簡單，也(yě)讓網站(↑←✘←zhàn)的(de)條理(lǐ)更清

晰。

9. 感謝(xiè)頁面社會(huì)化(huà)

與其想盡辦法讓廣告在網站(zhàn)內(nèi)無處不(bù)在，不(bù)如<↕(rú)把握住感謝(xiè)頁面，效果可(kě)能(n' ★•éng)也(yě)會(huì)好(hǎo)得(de)多(du&♣ō)。當用(yòng)戶完成登錄頁的(de)轉ε♦化(huà)後，我們可(kě)

以在頁面上(shàng)添加一(yī)些(xiē)選項，比如(rú)為(wèi)登陸§'頁點個(gè)贊，又(yòu)或是(shì)分(fēn)享到(dào)社交網站(zhàφ≥∏πn)上(shàng)，這(zhè)樣能(néng)★€♠✘第一(yī)時(shí)間(jiān)集中更多(duō)的(de)客戶群。

10. 使用(yòng)單開(kāi)式登陸頁

無論從(cóng)實際操作(zuò)還(hái)是(shì)用(y×→≤òng)戶體(tǐ)驗角度出發，單開(kāi)式的(de)登錄頁都(dōu✔♣)是(shì)目前最理(lǐ)想的(de)打開(kāi)方式。如(rú≈∑®←)果選擇彈框或者直接本頁登錄，會(huì)

很(hěn)明(míng)顯的(de)不(bù)利于用(yòng)戶的≤ (de)使用(yòng)，Lancome的(de)網站₩₹(zhàn)就(jiù)是(shì)一(yī)個(gè)例子(zǐ)γ¥×；另外(wài)，有(yǒu)些(xiē)浏覽器(qì)會(huì)有(yǒu)屏蔽'±彈框的(de)功能(néng)。

一(yī)号店(diàn)的(de)登陸頁是(shì)同類®®↕網站(zhàn)中做(zuò)的(de)很(hěn)周到(dào)的(de★β€≥)，在首頁的(de)登錄入口位置做(zuò)" 了(le)一(yī)個(gè)鼠标懸停顯示的(de)效果，這(zhè)樣可(kě)以避免用(yò↑£≈γng)戶因為(wèi)

誤點而造成的(de)不(bù)必要(yào)的(de)點擊。

總結：

我們認為(wèi)，在電(diàn)子(zǐ)φσ商務網站(zhàn)的(de)登錄環節暫時(shí)還(hái)±★無法割舍的(de)現(xiàn)在，頁面的(π&Ωde)設計(jì)要(yào)以用(yòng)戶體(tǐ)驗為(♠‍€wèi)先，讓用(yòng)戶在使用(yòng)的(deφ₽)時(shí)候盡可(kě)能(néng)

的(de)減少(shǎo)思考時(shí)間(jiān)。同時(shí)，我們也≈♠(yě)希望在未來(lái)可(kě)以讓注冊登錄成為(wèi)不♠€Ω∏(bù)必要(yào)的(de)環節，讓用∞γ©≈(yòng)戶可(kě)以以遊客身(shēn)份直接購(gòu)買，登↑&γ 錄注冊

的(de)好(hǎo)處隻是(shì)讓購(g&± òu)物(wù)流程變得(de)更容易或者價格更優惠，以這(zh☆ è)樣的(de)方式讓用(yòng)戶主動注冊，讓登錄注冊變成一(yī)個(gè)§β☆‍用(yòng)戶喜歡的(de)環節。