十個(gè)優(yōu)秀網(wǎng)頁(yè)布局對(duì)比(上)
1.少用表單
人類(lèi)天生討厭勞動(dòng)密集型的任務(wù),這也同理適用于填寫(xiě)表單字段。你每增加一個(gè)填寫(xiě)區(qū)域,就有可能讓你的訪客轉(zhuǎn)身離開(kāi)。并不是每個(gè)人打字一樣快,而且在移動(dòng)設(shè)備上打字也讓人厭煩。仔細(xì)考慮每個(gè)字段是不是真的必要,并且刪除盡可能多的字段。如果你真的有超多選擇字段,也考慮把他們移動(dòng)到表單提交之后的單獨(dú)頁(yè)面上去。你的表單很容易變得過(guò)長(zhǎng),更少的字段會(huì)不錯(cuò)地提升轉(zhuǎn)化率。
2.直接展示選項(xiàng)而非隱藏
每一個(gè)你使用的下拉菜單都隱藏著一些需要花費(fèi)氣力去尋找的內(nèi)容。如果那些隱藏的選項(xiàng)是你的訪客一路向前要做的事情,那么你可能希望表單內(nèi)容離他們更近。試圖保留可預(yù)測(cè)的且不需學(xué)習(xí)的下拉菜單選項(xiàng),比如一系列日期和時(shí)間(例如日歷)或地理位置。
偶爾下拉菜單按鈕也會(huì)引向使用方面頻率很高的界面——一個(gè)人會(huì)一段時(shí)間內(nèi)重復(fù)使用它。注意把基本元素隱藏在下拉單之后對(duì)轉(zhuǎn)化率的影響。
3.進(jìn)行連續(xù)式推薦,而不是使用一個(gè)虛假的頁(yè)面結(jié)尾
虛假的頁(yè)面結(jié)尾可謂轉(zhuǎn)化率殺手。的確,滾動(dòng)長(zhǎng)頁(yè)面很棒,但是千萬(wàn)不要給你的訪客一種頁(yè)面到達(dá)底部感覺(jué)。如果你的頁(yè)面需要滾動(dòng),嘗試建立一個(gè)能讓用戶放心繼續(xù)閱讀的視覺(jué)模塊。另外,注意兩個(gè)頁(yè)面之間的空白區(qū)域不能過(guò)大(目前有這么多終端,我主要是說(shuō)的是區(qū)間范圍比例)。
4.保持專(zhuān)注,而非陷入在鏈接之中
創(chuàng)建一個(gè)有很多鏈接并且讓用戶前翻后找的頁(yè)面是很容易的。然而如果你正在設(shè)計(jì)一個(gè)故事性的底部有號(hào)召需求的頁(yè)面,那么請(qǐng)三思。注意你頁(yè)面上的鏈接個(gè)數(shù)并且盡可能平衡兩種頁(yè)面風(fēng)格:多鏈接探索型和少鏈接隧道型。去掉無(wú)關(guān)的鏈接是一個(gè)很好的增加用戶到達(dá)底部重要按鈕的方法。
5.展示狀態(tài)而非隱藏
在界面中我們常常展示一些不同狀態(tài)的元素。郵件是否被閱讀,賬單是否被支付等等。通知使用者各個(gè)物品的不同狀態(tài)是良好的提供反饋的方法。界面狀態(tài)能夠幫助人們了解他們過(guò)去的動(dòng)作是否成功,以及是否該采取某些行動(dòng)。
6.按鈕上的文案讓用戶有優(yōu)惠感
想象一下,一頁(yè)上有兩個(gè)按鈕,一個(gè)寫(xiě)著“幫你省錢(qián)”,另外一個(gè)寫(xiě)著“注冊(cè)“。由于注冊(cè)沒(méi)有潛在價(jià)值,我敢打賭第一個(gè)點(diǎn)擊率更高。一個(gè)花費(fèi)精力的注冊(cè)流程常常和長(zhǎng)表單和瑣事聯(lián)系在一起。
這里的假設(shè)是:暗示有好處的按鈕往往有更高的點(diǎn)擊率。如果不是這樣,也可以在行動(dòng)按鈕附近放置暗示好處的文案,讓人們回想起來(lái)他們?yōu)槭裁瘩R上要采取這個(gè)行動(dòng)。當(dāng)然,有很多基于行動(dòng)的按鈕,但是那些就只是頁(yè)面之前切換,也很少需要有說(shuō)服力和重復(fù)的煽動(dòng)性文案。
7.采用直接操作,避免上下文菜單
有時(shí),讓一些特定界面元素可直接編輯是有道理的,比列出一系列毫無(wú)關(guān)系的條目要好很多。當(dāng)展示一系列舉例數(shù)據(jù)時(shí),我們特別期望用戶點(diǎn)擊或編輯列表中的條目。點(diǎn)擊或者鼠標(biāo)懸停在一個(gè)數(shù)據(jù)條(就是一個(gè)文字地址)之后,馬上可以對(duì)它進(jìn)行編輯。使用這樣的交互減少了很多不必要步驟,如果要編輯長(zhǎng)字段也同樣適用。牢記,如果是條目之間關(guān)系不明確,使用上下文菜單沒(méi)什么問(wèn)題。
8.用區(qū)域展示內(nèi)容,不要?jiǎng)?chuàng)建多余頁(yè)面
當(dāng)?shù)顷戫?yè)為了轉(zhuǎn)化價(jià)值時(shí),可以直接顯示表單。與單獨(dú)的注冊(cè)頁(yè)面相比,這種登陸頁(yè)更有利于轉(zhuǎn)化。首先,去除額外的操作步驟,減少完成任務(wù)的時(shí)間。第二,顯示表單的數(shù)量,把完成任務(wù)需要的時(shí)間告知用戶。
9.使用過(guò)渡,避免直接改變
在用戶使用時(shí),頁(yè)面元素常常出現(xiàn),隱藏,移動(dòng),轉(zhuǎn)換和改變大小。當(dāng)元素相應(yīng)我們的交互,理解剛剛發(fā)生的小動(dòng)作就會(huì)更加容易。以動(dòng)畫(huà)或者變換為形式的有意小延遲,方便認(rèn)知,并且讓人們有時(shí)間理解大小或者位置的改變。記住當(dāng)我們把這些動(dòng)作的時(shí)間延長(zhǎng)到0.5秒以上,就會(huì)出現(xiàn)人們厭煩的情況。對(duì)于那些只想讓事情很快完成的人來(lái)說(shuō),動(dòng)作太長(zhǎng)是一個(gè)負(fù)擔(dān)。
10.讓用戶慢慢體驗(yàn),別馬上讓他們注冊(cè)
與其命令訪客馬上就注冊(cè),為什么不讓他們首先完成一個(gè)能展示有效價(jià)值的任務(wù)呢?在這些最初的交互中,產(chǎn)品不僅能夠顯示它的好處,也能展現(xiàn)它的個(gè)性。一旦用戶開(kāi)始發(fā)現(xiàn)你的產(chǎn)品的價(jià)值并且懂得怎樣好好讓產(chǎn)品為自己所用,他們就會(huì)更加樂(lè)于把其余信息分享到你的產(chǎn)品中。
逐步的參與,真的是一個(gè)推遲注冊(cè)流程卻有讓用戶使用你的產(chǎn)品的良好方法。
本文地址:http://m.likemindfilms.com/tutorial/di2004.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏